From 7cdc4eb28788f19951aa17cdad2ecf9e6d5254d4 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 7 Aug 2024 11:17:42 +0200
Subject: [PATCH] Perspective and glow button

---
 src/components/Button.astro | 60 +++++++++++++++++++++++++++++++++++++
 src/pages/index.astro       | 31 +++++++++++++++----
 2 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Button.astro

diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 0000000..185cba7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b28d086..162e0ef 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,14 +1,27 @@
 ---
+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">
-      <Heading tag="h1">
-        Titre
-      </Heading>
+    <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>
@@ -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;