Continue work on hero and layout, implement hover effect

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@astrojs/vue": "^5.1.1",
     "astro": "^5.13.7",
+    "gsap": "^3.13.0",
     "vue": "^3.5.21"
   }
 }

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       astro:
         specifier: ^5.13.7
         version: 5.13.7(@types/node@24.2.0)(rollup@4.46.2)(typescript@5.9.2)
+      gsap:
+        specifier: ^3.13.0
+        version: 3.13.0
       vue:
         specifier: ^3.5.21
         version: 3.5.21(typescript@5.9.2)
@@ -1084,6 +1087,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  gsap@3.13.0:
+    resolution: {integrity: sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==}
+
   h3@1.15.4:
     resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
 
@@ -3139,6 +3145,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  gsap@3.13.0: {}
+
   h3@1.15.4:
     dependencies:
       cookie-es: 1.2.2

src/components/Cursor.astro

@@ -0,0 +1,73 @@
+<div class="cursor">
+    <div class="ball ball--small">
+        <svg height="10" width="10">
+            <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
+        </svg>
+    </div>
+    <div class="ball ball--big">
+        <svg height="30" width="30">
+            <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
+        </svg>
+    </div>
+</div>
+
+<script>
+    import { gsap } from "gsap";
+
+    const smallBall = document.querySelector(".cursor > .ball--small");
+    const bigBall = document.querySelector(".cursor >.ball--big");
+    const hoverables = document.querySelectorAll(".hoverable");
+
+    // Listeners
+    document.body.addEventListener("mousemove", onMouseMove);
+    for (let i = 0; i < hoverables.length; i++) {
+        hoverables[i].addEventListener("mouseenter", onMouseHover);
+        hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
+    }
+
+    // Move the cursor
+    function onMouseMove(event: MouseEvent) {
+        gsap.to(bigBall, {
+            duration: 0.4,
+            y: event.pageY - 15,
+            x: event.pageX - 15,
+        });
+        gsap.to(smallBall, {
+            duration: 0.1,
+            x: event.pageX - 5,
+            y: event.pageY - 7,
+        });
+    }
+
+    // Hover an element
+    function onMouseHover() {
+        gsap.to(bigBall, {
+            duration: 0.3,
+            scale: 5,
+        });
+    }
+    function onMouseHoverOut() {
+        gsap.to(bigBall, {
+            duration: 0.3,
+            scale: 1,
+        });
+    }
+</script>
+
+<style>
+    .cursor {
+        pointer-events: none;
+    }
+
+    .ball {
+        position: fixed;
+        top: 0;
+        left: 0;
+        mix-blend-mode: difference;
+        /* z-index: -1; */
+
+        & circle {
+            fill: var(--clr-ts-warm-red);
+        }
+    }
+</style>

src/components/GlobalStyles.astro

@@ -1,6 +1,6 @@
 <style is:global>
-@import url('../styles/archivo.css');
+    @import url("../styles/archivo.css");
-@import url('../styles/clash-display.css');
+    @import url("../styles/clash-display.css");
 
     :root {
         --clr-ts-warm-red: hsl(3, 94%, 60%);
@@ -11,9 +11,9 @@
         --ff-heading: "Clash Display", sans-serif;
         --ff-body: "Archivo", sans-serif;
 
-    --fs-xl: clamp(3.75rem, 5vw + 1rem, 6rem);
+        --fs-xl: clamp(3rem, 4vw + 1rem, 6rem);
-    --fs-600: 1.5rem;
+        --fs-600: 1.25rem;
-    --fs-500: 1.25rem;
+        --fs-500: 1.125rem;
         --fs-400: 1rem;
     }
 
@@ -23,23 +23,32 @@
         padding: 0;
     }
 
-html,
     body {
-    margin: 0;
         width: 100%;
         height: 100%;
-}
+        margin: 0;
+        overflow: clip;
+
+        padding: clamp(2rem, 5vw + 1rem, 3.75rem);
 
-body {
-    background-color: var(--clr-ts-dark);
-    color: var(--clr-ts-light);
         font-family: var(--ff-body);
         font-size: var(--fs-400);
-    padding: clamp(2rem, 5vw + 1rem, 3.75rem);
+
+        background-color: var(--clr-ts-dark);
+        color: var(--clr-ts-light);
     }
 
-h1 { 
+    .sr-only {
-    font-family: var(--ff-heading);
+        position: absolute !important;
-    font-size: var(--fs-xl);
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        padding: 0 !important;
+        border: 0 !important;
+        clip: rect(1px 1px 1px 1px) !important;
+        -webkit-clip-path: inset(50%) !important;
+        clip-path: inset(50%) !important;
     }
 </style>

src/components/Header.astro

@@ -7,26 +7,27 @@ const isEnglish = Astro.currentLocale === "en";
 ---
 
 <header>
-    <div>
+    <a href="." class="hoverable hoverable--diff">
+        <span class="sr-only">Back to home</span>
         <Image
             class="icon"
             src={logo}
             loading="eager"
             alt="Tideshift Digital logo mark"
         />
-    </div>
+    </a>
 
     <nav>
         <ul>
             <li>
                 <a
-                    class:list={[{ active: isEnglish }]}
+                    class:list={['hoverable', { active: isEnglish }]}
                     href={getRelativeLocaleUrl("en", "")}>EN</a
                 >
             </li>
             <li>
                 <a
-                    class:list={[{ active: !isEnglish }]}
+                    class:list={['hoverable',{ active: !isEnglish }]}
                     href={getRelativeLocaleUrl("de", "")}>DE</a
                 >
             </li>
@@ -38,7 +39,6 @@ const isEnglish = Astro.currentLocale === "en";
     header {
         display: flex;
         justify-content: space-between;
-        border: 1px solid var(--clr-ts-warm-red);
     }
 
     .icon {
@@ -53,7 +53,7 @@ const isEnglish = Astro.currentLocale === "en";
     }
 
     ul {
-        a {
+        & a {
             color: var(--clr-ts-light);
             text-decoration: none;
 

src/components/Hero.astro

@@ -3,24 +3,55 @@ import { Image } from "astro:assets";
 import Logo from "../assets/ci/icon-only.svg";
 ---
 
-<div>
+<div class="wrapper">
-    <div>
+    <div class="inner">
-        <h1 class="title">Smart websites for bold ideas.</h1>
+        <div class="content">
+            <h1>Smart websites for bold ideas.</h1>
 
             <p>
-            From concept to launch — websites, apps, and digital solutions that
+                From concept to launch — websites, apps, and digital solutions
-            work hard, so you can play hard. Whether it's a personal site, an
+                that work hard, so you can play hard. Whether it's a personal
-            e-commerce platform, or a custom web app, I bring your ideas to
+                site, an e-commerce platform, or a custom web app, I bring your
-            life.
+                ideas to life.
             </p>
+
+            <a href="mailto:hello@tideshiftdigital.com?subject=Anfrage" class="hoverable">Get in touch</a>
+        </div>
+
+        <div class="typemark">Tideshift</div>
     </div>
 
     <Logo class="logo" />
 </div>
 
 <style>
+    .wrapper {
+        display: block;
+        height: 100%;
+        width: 100%;
+        overflow: clip; 
+    }
+
+    .inner {
+        display: grid;
+        height: 100%;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 2em;
+        grid-column: 1 / -1;
+        grid-row: 1 / -1;
+    }
+
     h1 {
         max-width: 16ch;
+        font-family: var(--ff-heading);
+        font-size: var(--fs-xl);
         font-weight: 700;
         text-transform: uppercase;
         line-height: 1.1;
@@ -30,9 +61,51 @@ import Logo from "../assets/ci/icon-only.svg";
     p {
         max-width: 50ch;
         line-height: 1.4;
+        font-size: var(--fs-600);
+    }
+
+    a {
+        display: inline-block;
+        width: max-content;
+        text-decoration: none;
+        position: relative;
+        font-size: var(--fs-600);
+        font-weight: 600; 
+        color: var(--clr-ts-light);
+    }
+
+    a:after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: var(--clr-ts-warm-red);
+        position: absolute;
+        left: 0;
+        bottom: 0;
+    }
+
+    .typemark {
+        margin: auto 0 0 auto;
+        grid-row: 2;
+        grid-column: 2;
+        font-family: var(--ff-heading);
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 3.125rem;
+        letter-spacing: 0.03em;
+        color: var(--clr-ts-warm-red);
     }
 
     .logo {
+        width: auto;
+        margin-left: auto;
+        height: 95vh;
         fill: var(--clr-ts-dark-logo) !important;
+        z-index: -10;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        transform: translate3d(10vw, 10vh, 0);
     }
 </style>

src/layouts/Layout.astro

@@ -1,4 +1,5 @@
 ---
+import Cursor from "../components/Cursor.astro";
 import GlobalStyles from "../components/GlobalStyles.astro";
 import Header from "../components/Header.astro";
 ---
@@ -14,6 +15,7 @@ import Header from "../components/Header.astro";
 	</head>
 	<body>
 		<GlobalStyles />
+		<Cursor />
 		<Header />
 		<slot />
 	</body>

src/pages/imprint.astro

@@ -0,0 +1,7 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    <h1>Imprint</h1>
+</Layout>