From 9bfae3bcee96e9efbe5d188d21a976057a697d9e Mon Sep 17 00:00:00 2001
From: Michael Rieger <mr@tideshiftdigital.com>
Date: Thu, 5 Mar 2026 13:50:40 +0100
Subject: [PATCH] feat: Finish animations, add imprint/privacy pages

---
 src/components/Footer.astro                  |  26 ++-
 src/components/GlobalStyles.astro            |  24 ---
 src/components/Header.astro                  |  18 +-
 src/components/landing/AboutSection.astro    |   4 +-
 src/components/landing/ContactSection.astro  |  12 ++
 src/components/landing/ServicesSection.astro |   2 +-
 src/layouts/BaseLayout.astro                 |   1 -
 src/pages/imprint.astro                      |  92 +++++++++++
 src/pages/old/imprint.astro                  |  41 -----
 src/pages/old/privacy.astro                  |  94 -----------
 src/pages/privacy.astro                      | 163 +++++++++++++++++++
 11 files changed, 306 insertions(+), 171 deletions(-)
 create mode 100644 src/pages/imprint.astro
 delete mode 100644 src/pages/old/imprint.astro
 delete mode 100644 src/pages/old/privacy.astro
 create mode 100644 src/pages/privacy.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f186215..653cfe9 100644
--- a/src/components/Footer.astro
+++ b/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>
\ No newline at end of file
diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index 12902df..5b6a12d 100644
--- a/src/components/GlobalStyles.astro
+++ b/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>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 949d3e2..63f6630 100644
--- a/src/components/Header.astro
+++ b/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;
diff --git a/src/components/landing/AboutSection.astro b/src/components/landing/AboutSection.astro
index e43b3e9..5f58e40 100644
--- a/src/components/landing/AboutSection.astro
+++ b/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",
diff --git a/src/components/landing/ContactSection.astro b/src/components/landing/ContactSection.astro
index 9665144..c540ec7 100644
--- a/src/components/landing/ContactSection.astro
+++ b/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>
diff --git a/src/components/landing/ServicesSection.astro b/src/components/landing/ServicesSection.astro
index 4377ff7..30a2c05 100644
--- a/src/components/landing/ServicesSection.astro
+++ b/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",
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index eb2780b..4f56606 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,7 +3,6 @@ import Footer from "../components/Footer.astro";
 import GlobalStyles from "../components/GlobalStyles.astro";
 import Header from "../components/Header.astro";
 import PlausibleAnalytics from "../components/PlausibleAnalytics.astro";
-import SkipNavLink from "../components/SkipNavLink.astro";
 
 const { pageTitle } = Astro.props;
 const title = pageTitle
diff --git a/src/pages/imprint.astro b/src/pages/imprint.astro
new file mode 100644
index 0000000..7bd0fad
--- /dev/null
+++ b/src/pages/imprint.astro
@@ -0,0 +1,92 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+---
+
+<BaseLayout pageTitle="Imprint">
+    <div class="imprint">
+        <h1 class="heading-gradient">Imprint</h1>
+
+        <div>
+            <p>Tideshift Digital e.U.</p>
+            <p>Inhaber Michael Rieger</p>
+        </div>
+
+        <div>
+            <p>
+                Dienstleistungen in der automatischen Datenverarbeitung und
+                Informationstechnik
+            </p>
+        </div>
+
+        <div>
+            <p>UID-Nr: ATU82509206</p>
+            <p>FN: 660619Z</p>
+            <p>FB-Gericht: Handelsgericht Wien</p>
+            <p>Sitz: 1030 Wien</p>
+            <p>Grasbergergasse 9/1 | Austria</p>
+            <p>Tel: +43 (0) 670 350 53 50</p>
+            <p>E-Mail: office@tideshiftdigital.com</p>
+        </div>
+    </div>
+</BaseLayout>
+
+<style>
+    .imprint {
+        padding-inline: 5rem;
+        max-width: var(--max-content-width);
+        margin-inline: auto;
+
+        > div {
+            margin-top: 2rem;
+        }
+    }
+
+    h1 {
+        margin-top: 10rem;
+        font-size: var(--fs-page-title);
+        line-height: var(--leading-title);
+        letter-spacing: var(--tracking-narrow);
+        font-weight: 600;
+    }
+
+    * + * {
+        margin-top: 0.25rem;
+    }
+</style>
+
+<script>
+    import { gsap } from "gsap";
+    import { SplitText } from "gsap/SplitText";
+
+    gsap.registerPlugin(SplitText);
+
+    const page = document.querySelector(".imprint");
+
+    if (page) {
+        new SplitText(page.querySelector("h1"), {
+            type: "words, chars",
+            autoSplit: true,
+            mask: "chars",
+            charsClass: "char",
+            onSplit: (self) => {
+                gsap.from(self.chars, {
+                    duration: 1,
+                    yPercent: -120,
+                    scale: 1.2,
+                    stagger: 0.015,
+                    ease: "expo.out",
+                    onComplete: () => self.revert(),
+                });
+            },
+        });
+
+        gsap.from(page.querySelectorAll(":scope > div"), {
+            duration: 1,
+            delay: 0.3,
+            opacity: 0,
+            yPercent: -20,
+            ease: "expo.out",
+            stagger: 0.1,
+        });
+    }
+</script>
diff --git a/src/pages/old/imprint.astro b/src/pages/old/imprint.astro
deleted file mode 100644
index 12a9eec..0000000
--- a/src/pages/old/imprint.astro
+++ /dev/null
@@ -1,41 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
----
-
-<BaseLayout pageTitle="Imprint">
-    <main class="imprint">
-        <h1>Imprint</h1>
-
-        <div>
-            <p>Tideshift Digital e.U.</p>
-            <p>Inhaber Michael Rieger</p>
-        </div>
-
-        <div>
-            <p>
-                Dienstleistungen in der automatischen Datenverarbeitung und
-                Informationstechnik
-            </p>
-        </div>
-
-        <div>
-            <p>UID-Nr: ATU82509206</p>
-            <p>FN: 660619Z</p>
-            <p>FB-Gericht: Handelsgericht Wien</p>
-            <p>Sitz: 1030 Wien</p>
-            <p>Grasbergergasse 9/1/7 | Austria</p>
-            <p>Tel: +43 (0) 670 350 53 50</p>
-            <p>E-Mail: office@tideshiftdigital.com</p>
-        </div>
-    </main>
-</BaseLayout>
-
-<style scoped>
-    h1 {
-        margin-top: 2rem;
-    }
-
-    main > * + * {
-        margin-top: 1rem;
-    }
-</style>
diff --git a/src/pages/old/privacy.astro b/src/pages/old/privacy.astro
deleted file mode 100644
index c3732a6..0000000
--- a/src/pages/old/privacy.astro
+++ /dev/null
@@ -1,94 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
----
-
-<BaseLayout pageTitle="Privacy Policy">
-    <main class="content">
-        <h1>Privacy Policy</h1>
-
-        <div>
-            <p>
-                <strong>Tideshift Digital e.U.</strong> (“we”, “our”, “us”) respects
-                your privacy and is committed to protecting any data related to your
-                use of this website.
-            </p>
-
-            <h2>Analytics</h2>
-            <p>
-                We use <strong>
-                    <a
-                        target="_blank"
-                        href="https://umami.is/"
-                        class="hoverable"
-                        rel="noreferrer noopener">self-hosted Umami</a
-                    >
-                </strong> to measure basic website usage (such as page views and
-                referrers). No personal data, cookies, or IP addresses are collected
-                or stored.
-            </p>
-
-            <h2>Hosting</h2>
-            <p>
-                This website is hosted by <strong>
-                    <a
-                        target="_blank"
-                        href="https://www.hetzner.com/"
-                        class="hoverable"
-                        rel="noreferrer noopener">Hetzner Online GmbH</a
-                    ></strong
-                >. Standard server logs may be collected automatically for
-                technical and security purposes. These logs can include IP
-                addresses and access times. The logs are used solely for server
-                maintenance and security and are not combined with any other
-                data or used for analytics.
-            </p>
-
-            <h2>Data Retention</h2>
-            <p>
-                Analytics data collected by Umami are stored temporarily and
-                only in an anonymized, aggregated form. No personally
-                identifiable information is retained. Server logs are stored by
-                Hetzner in accordance with their standard retention policies,
-                primarily for operational and security purposes.
-            </p>
-
-            <h2>Legal Basis</h2>
-            <p>
-                Data processing through analytics and hosting is based on our
-                legitimate interest (Article 6(1)(f) GDPR) in maintaining and
-                improving our website’s performance and security.
-            </p>
-
-            <h2>Your Rights</h2>
-            <p>
-                Since we do not collect or process personal data directly, no
-                action is generally required from you. However, if you have any
-                questions or concerns regarding data protection, you may contact
-                us at
-                <a href="mailto:privacy@tideshiftdigital.com" class="hoverable"
-                    >privacy@tideshiftdigital.com</a
-                >.
-            </p>
-
-            <h2>Data Controller</h2>
-            <p>
-                The data controller responsible for this website is:<br />
-                <strong>Tideshift Digital e.U.</strong><br />
-                Email: <a
-                    href="mailto:privacy@tideshiftdigital.com"
-                    class="hoverable">privacy@tideshiftdigital.com</a
-                >
-            </p>
-        </div>
-    </main>
-</BaseLayout>
-
-<style>
-    * + * {
-        margin-top: 1rem;
-    }
-
-    h1 {
-        margin-top: 2rem;
-    }
-</style>
diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro
new file mode 100644
index 0000000..cb44817
--- /dev/null
+++ b/src/pages/privacy.astro
@@ -0,0 +1,163 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+---
+
+<BaseLayout pageTitle="Privacy Policy">
+    <div class="privacy">
+        <h1 class="heading-gradient">Privacy Policy</h1>
+
+        <div class="content">
+            <p>
+                <strong>Tideshift Digital e.U.</strong> (“we”, “our”, “us”) respects
+                your privacy and is committed to protecting any data related to your
+                use of this website.
+            </p>
+
+            <section>
+                <h2 class="heading-gradient">Analytics</h2>
+                <p>
+                    We use <strong>
+                        <a
+                            target="_blank"
+                            href="https://umami.is/"
+                            class="hoverable"
+                            rel="noreferrer noopener">self-hosted Umami</a
+                        >
+                    </strong> to measure basic website usage (such as page views and
+                    referrers). No personal data, cookies, or IP addresses are collected
+                    or stored.
+                </p>
+            </section>
+
+            <section>
+                <h2 class="heading-gradient">Hosting</h2>
+                <p>
+                    This website is hosted by <strong>
+                        <a
+                            target="_blank"
+                            href="https://www.hetzner.com/"
+                            class="hoverable"
+                            rel="noreferrer noopener">Hetzner Online GmbH</a
+                        ></strong
+                    >. Standard server logs may be collected automatically for
+                    technical and security purposes. These logs can include IP
+                    addresses and access times. The logs are used solely for
+                    server maintenance and security and are not combined with
+                    any other data or used for analytics.
+                </p>
+            </section>
+
+            <section>
+                <h2 class="heading-gradient">Data Retention</h2>
+                <p>
+                    Analytics data collected by Umami are stored temporarily and
+                    only in an anonymized, aggregated form. No personally
+                    identifiable information is retained. Server logs are stored
+                    by Hetzner in accordance with their standard retention
+                    policies, primarily for operational and security purposes.
+                </p>
+            </section>
+
+            <section>
+                <h2 class="heading-gradient">Legal Basis</h2>
+                <p>
+                    Data processing through analytics and hosting is based on
+                    our legitimate interest (Article 6(1)(f) GDPR) in
+                    maintaining and improving our website’s performance and
+                    security.
+                </p>
+            </section>
+
+            <section>
+                <h2 class="heading-gradient">Your Rights</h2>
+                <p>
+                    Since we do not collect or process personal data directly,
+                    no action is generally required from you. However, if you
+                    have any questions or concerns regarding data protection,
+                    you may contact us at
+                    <a
+                        href="mailto:privacy@tideshiftdigital.com"
+                        class="hoverable">privacy@tideshiftdigital.com</a
+                    >.
+                </p>
+            </section>
+
+            <section>
+                <h2 class="heading-gradient">Data Controller</h2>
+                <p>
+                    The data controller responsible for this website is:<br />
+                    <strong>Tideshift Digital e.U.</strong><br />
+                    Email: <a
+                        href="mailto:privacy@tideshiftdigital.com"
+                        class="hoverable">privacy@tideshiftdigital.com</a
+                    >
+                </p>
+            </section>
+        </div>
+    </div>
+</BaseLayout>
+
+<style>
+    .privacy {
+        padding-inline: 5rem;
+        max-width: var(--max-content-width);
+        margin-inline: auto;
+
+        > div {
+            margin-top: 2rem;
+        }
+    }
+
+    h1 {
+        margin-top: 10rem;
+        font-size: var(--fs-page-title);
+        line-height: var(--leading-title);
+        letter-spacing: var(--tracking-narrow);
+        font-weight: 600;
+    }
+
+    .content {
+        max-width: 80ch;
+
+        > * + * {
+            margin-top: 1rem;
+        }
+    }
+</style>
+
+<script>
+    import { gsap } from "gsap";
+    import { SplitText } from "gsap/SplitText";
+
+    gsap.registerPlugin(SplitText);
+
+    const page = document.querySelector(".privacy");
+
+    if (page) {
+        new SplitText(page.querySelector("h1"), {
+            type: "words, chars",
+            autoSplit: true,
+            mask: "chars",
+            charsClass: "char",
+            onSplit: (self) => {
+                gsap.from(self.chars, {
+                    duration: 1,
+                    yPercent: -120,
+                    scale: 1.2,
+                    stagger: 0.015,
+                    ease: "expo.out",
+                    onComplete: () => self.revert(),
+                });
+            },
+        });
+
+        gsap.from(page.querySelectorAll(".content > *"), {
+            duration: 1,
+            delay: 0.3,
+            opacity: 0,
+            yPercent: -20,
+            ease: "expo.out",
+            stagger: 0.1,
+        });
+    }
+</script>