Perspective and glow button

src/components/Button.astro

@@ -0,0 +1,60 @@
+<button class="relative py-2 px-6 bg-slate-900 rounded-[100vmax] text-sm">
+  <slot />
+</button>
+
+<style lang="scss">
+:root {
+  --stop-1: #022c22;
+  --stop-2: #34d399;
+  --stop-3: #ecfdf5;
+}
+
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+button::before,
+button::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: -1;
+  background: conic-gradient(
+    from var(--gradient-angle),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-2),
+    var(--stop-3),
+    var(--stop-2),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1),
+    var(--stop-1)
+  );
+  border-radius: inherit;
+  animation: rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+button::after {
+  filter: blur(3.5rem);
+}
+
+@keyframes rotation {
+  0% {
+    --gradient-angle: -180deg;
+  }
+  100% {
+    --gradient-angle: 180deg;
+  }
+}
+</style>

src/pages/index.astro

@@ -1,15 +1,28 @@
 ---
+import Button from '../components/Button.astro';
 import Heading from '../components/Heading.astro';
 import Layout from '../layouts/Layout.astro';
 ---
 
 <Layout>
   <main>
-    <section class="relative h-screen overflow-clip">
+    <section class="relative h-screen overflow-clip max-w-full">
+      <div class="h-full container grid place-items-center auto-rows-auto">
+        <div class="max-w-2xl grid gap-2 text-center">
           <Heading tag="h1">
             Titre
           </Heading>
   
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam sint placeat dolores nemo asperiores minus, quam commodi cum?</p>
+
+          <div>
+            <Button>
+              Test
+            </Button>
+          </div>
+        </div>
+      </div>
+
       <div class="absolute inset-0 -z-30 isolate">
         <div id="spotlight-filter"></div>
         <div id="spotlight" class="bg-gradient-to-tr from-lime-500 from-35% via-green-500 via-70% to-emerald-500 to-100% opacity-50"></div>
@@ -21,11 +34,13 @@ import Layout from '../layouts/Layout.astro';
       </div>
 
       <div
-        class="absolute inset-0 -z-10 isolate grid place-items-center pointer-events-none"
+        id="grid-bg-wrapper"
+        class="absolute -inset-full -z-10 isolate grid place-items-center pointer-events-none"
       >
         <svg
+          id="grid-bg"
           class="col-start-1 row-start-1 w-full h-full opacity-20" xmlns="http://www.w3.org/2000/svg"
-          style="mask-image: radial-gradient(circle at center, black 0%, transparent 80%);"
+          style="mask-image: radial-gradient(circle at center, black 0%, black 5%, transparent 35%);"
         >
           <defs>
             <pattern id="grid" width="38" height="38" patternUnits="userSpaceOnUse">
@@ -66,6 +81,10 @@ if (shape || spotlight) {
 </script>
 
 <style lang="scss">
+#grid-bg {
+  transform: scaleY(0.7) skewX(-24deg) skewY(12deg);
+}
+
 @keyframes shape-spin {
   from {
     rotate: 0deg;