feat: Header, Hero animations

src/components/Header.astro

@@ -1,9 +1,7 @@
 ---
-import ArrowUpRight from "./icons/ArrowUpRight.astro";
 import Logo from "../assets/ci/side-light.svg";
-import Menu from "./Menu.astro";
+import ArrowUpRight from "./icons/ArrowUpRight.astro";
 import SkipNavLink from "./SkipNavLink.astro";
-import NewMenu from "./NewMenu.astro";
 ---
 
 <header>
@@ -15,7 +13,7 @@ import NewMenu from "./NewMenu.astro";
   {/* Contact Link */}
   <a class="contact" href="mailto:office@tideshiftdigital.com">
     <span class="heading-gradient">Contact us</span>
-    <ArrowUpRight class="icon" />
+    <ArrowUpRight class="icon char" />
   </a>
 
   {/* Menu Button */}
@@ -34,6 +32,7 @@ import NewMenu from "./NewMenu.astro";
     position: fixed;
     top: 0;
     inset-inline: 0;
+    z-index: 10;
   }
 
   .logo {
@@ -67,3 +66,26 @@ import NewMenu from "./NewMenu.astro";
     grid-column: -1 / -2;
   }*/
 </style>
+
+<script>
+  import { gsap } from "gsap";
+  import { SplitText } from "gsap/SplitText";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+  gsap.registerPlugin(SplitText);
+  gsap.registerPlugin(ScrollTrigger);
+
+  const header = document.querySelector("header");
+
+  if (header) {
+    const timeline = gsap.timeline();
+
+    timeline.from(header.children, {
+      duration: 1,
+      yPercent: -120,
+      opacity: 0,
+      stagger: 0.2,
+      ease: "expo.out",
+    });
+  }
+</script>