feat: Finish animations, add imprint/privacy pages

src/components/Footer.astro

@@ -48,7 +48,7 @@ function getCurrentYear() {
     <div class="legal">
       <span class="list-title">Legal</span>
       <ul>
-        <li><a href="/privacy-policy">Privacy Policy</a></li>
+        <li><a href="/privacy">Privacy Policy</a></li>
         <li><a href="/imprint">Imprint</a></li>
       </ul>
     </div>
@@ -136,3 +136,27 @@ function getCurrentYear() {
     margin-top: 8rem;
   }
 </style>
+
+<script>
+  import { gsap } from "gsap";
+  import { SplitText } from "gsap/SplitText";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+  gsap.registerPlugin(SplitText);
+  gsap.registerPlugin(ScrollTrigger);
+
+  const footer = document.querySelector("footer");
+
+  if (footer) {
+    gsap.from(footer, {
+      scrollTrigger: {
+        trigger: footer,
+        start: "top bottom",
+      },
+      duration: 2,
+      opacity: 0,
+      yPercent: 10,
+      ease: "expo.out",
+    });
+  }
+</script>

src/components/GlobalStyles.astro

@@ -96,27 +96,3 @@
     border: 2px solid var(--clr-ts-red-400);
   }
 </style>
-
-<script>
-  import { gsap } from "gsap";
-  import { SplitText } from "gsap/SplitText";
-  import { ScrollTrigger } from "gsap/ScrollTrigger";
-
-  gsap.registerPlugin(SplitText);
-  gsap.registerPlugin(ScrollTrigger);
-
-  const footer = document.querySelector("footer");
-
-  if (footer) {
-    gsap.from(footer, {
-      scrollTrigger: {
-        trigger: footer,
-        start: "top 90%",
-      },
-      duration: 2,
-      opacity: 0,
-      yPercent: 10,
-      ease: "expo.out",
-    });
-  }
-</script>

src/components/Header.astro

@@ -8,10 +8,12 @@ import SkipNavLink from "./SkipNavLink.astro";
   <SkipNavLink contentId="main-content" />
 
   {/* Logo */}
-  <Logo class="logo" />
+  <a class="header-logo" href="/">
+    <Logo class="logo" />
+  </a>
 
   {/* Contact Link */}
-  <a href="mailto:office@tideshiftdigital.com">
+  <a class="header-contact" href="mailto:office@tideshiftdigital.com">
     <span class="heading-gradient">Contact us</span>
     <ArrowUpRight class="icon char" />
   </a>
@@ -35,14 +37,16 @@ import SkipNavLink from "./SkipNavLink.astro";
     z-index: 10;
   }
 
-  .logo {
-    width: 12.5rem;
-    transform: translate3d(-0.75rem, 0, 0);
-
+  .header-logo {
     grid-column: 1 / 3;
   }
 
-  a {
+  .logo {
+    width: 12.5rem;
+    transform: translate3d(-0.75rem, 0, 0);
+  }
+
+  .header-contact {
     display: flex;
     align-items: center;
     gap: 0.5rem;

src/components/landing/AboutSection.astro

@@ -131,8 +131,8 @@ import { Picture } from "astro:assets";
 
         tl.addLabel("heading", 0);
         tl.addLabel("heading-text", 0.6);
-        tl.addLabel("image", 1);
-        tl.addLabel("image-text", 1.4);
+        tl.addLabel("image", 0.8);
+        tl.addLabel("image-text", 1.1);
 
         new SplitText(aboutSection.querySelector("h2"), {
             type: "words, chars",

src/components/landing/ContactSection.astro

@@ -114,6 +114,7 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
     tl.addLabel("image", 0.2);
     tl.addLabel("heading", 0.5);
     tl.addLabel("text", 0.6);
+    tl.addLabel("arrow", 0.6);
 
     new SplitText(contactSection.querySelector("h2"), {
       type: "words, chars",
@@ -187,5 +188,16 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
         });
       },
     });
+
+    tl.from(
+      contactSection.querySelector("a > svg"),
+      {
+        duration: 1,
+        opacity: 0,
+        yPercent: -10,
+        ease: "expo.out",
+      },
+      "arrow",
+    );
   }
 </script>

src/components/landing/ServicesSection.astro

@@ -119,7 +119,7 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
 
         tl.addLabel("heading", 0);
         tl.addLabel("text", 0.3);
-        tl.addLabel("cards", 0.8);
+        tl.addLabel("cards", 0.5);
 
         new SplitText(servicesSection.querySelector("h2"), {
             type: "words, chars",