feat: Header, Hero animations

src/components/landing/HeroSection.astro

@@ -26,9 +26,9 @@ import ArrowDown from "../icons/ArrowDown.astro";
       digital sovereignty and sustainability.
     </p>
 
-    <a>
+    <button class="down">
       <ArrowDown />
-    </a>
+    </button>
   </div>
 </div>
 
@@ -62,6 +62,7 @@ import ArrowDown from "../icons/ArrowDown.astro";
     grid-template-columns: subgrid;
     grid-template-rows: 1fr 1fr;
     row-gap: 2.25em;
+    z-index: 1;
 
     grid-column: 1 / -1;
     grid-row: 1;
@@ -91,7 +92,7 @@ import ArrowDown from "../icons/ArrowDown.astro";
     line-height: var(--leading-paragraph);
   }
 
-  a {
+  .down {
     display: inline-flex;
 
     grid-column: 1 / -1;
@@ -102,6 +103,9 @@ import ArrowDown from "../icons/ArrowDown.astro";
     padding: 1rem;
     margin-bottom: 2rem;
 
+    background-color: transparent;
+    border: none;
+
     & svg {
       display: inline-block;
       width: 3rem;
@@ -109,3 +113,76 @@ import ArrowDown from "../icons/ArrowDown.astro";
     }
   }
 </style>
+
+<script>
+  import { gsap } from "gsap";
+  import { SplitText } from "gsap/SplitText";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+  gsap.registerPlugin(SplitText);
+  gsap.registerPlugin(ScrollTrigger);
+
+  const heroSection = document.querySelector(".hero");
+
+  if (heroSection) {
+    const timeline = gsap.timeline().pause();
+
+    timeline.from(heroSection.querySelector(".image"), {
+      duration: 2,
+      opacity: 0,
+      // yPercent: 20,
+      ease: "expo.out",
+    });
+
+    timeline.from(
+      heroSection.querySelector(".down"),
+      {
+        duration: 1,
+        opacity: 0,
+        ease: "expo.out",
+      },
+      // ">-1",
+    );
+
+    new SplitText(heroSection.querySelector("h1"), {
+      type: "words, chars",
+      autoSplit: true,
+      mask: "chars",
+      charsClass: "char",
+      onSplit: (self) => {
+        timeline.from(
+          self.chars,
+          {
+            duration: 1,
+            yPercent: -120,
+            scale: 1.2,
+            stagger: 0.015,
+            ease: "expo.out",
+          },
+          ">-2.8",
+        );
+      },
+    });
+
+    new SplitText(heroSection.querySelector("p"), {
+      type: "lines, words",
+      autoSplit: true,
+      mask: "lines",
+      linesClass: "line",
+      onSplit: (self) => {
+        timeline
+          .from(
+            self.lines,
+            {
+              duration: 0.9,
+              yPercent: 105,
+              stagger: 0.06,
+              ease: "expo.out",
+            },
+            ">-1",
+          )
+          .play();
+      },
+    });
+  }
+</script>