From 987626178961a510f9bf2b03eb199ca8ec2fff3b Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Mon, 15 Jul 2024 20:03:20 +0200
Subject: [PATCH] styling improvements update join page

---
 web/src/components/Button.astro        |  2 +-
 web/src/components/Heading.astro       |  3 ++-
 web/src/components/Layout/Header.astro | 20 ++++++++++-------
 web/src/lib/animate-heading.ts         | 20 ++++++++++++-----
 web/src/pages/support/join.astro       |  9 ++++++++
 web/src/sections/LandingHeader.astro   | 31 +++++++++++++-------------
 6 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/web/src/components/Button.astro b/web/src/components/Button.astro
index a5bd5b3..a2f4bad 100644
--- a/web/src/components/Button.astro
+++ b/web/src/components/Button.astro
@@ -23,7 +23,7 @@ export const button = cva(
           "border border-input hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-main/10 text-main hocus:bg-main/20",
         ghost: "hocus:bg-accent hocus:text-accent-foreground",
-        link: "underline-offset-4 hocus:underline text-primary",
+        link: "underline-offset-4 hocus:underline text-main",
       },
       size: {
         default: "text-base py-2 px-4",
diff --git a/web/src/components/Heading.astro b/web/src/components/Heading.astro
index fac64af..92b7ac4 100644
--- a/web/src/components/Heading.astro
+++ b/web/src/components/Heading.astro
@@ -8,7 +8,8 @@ const heading = cva(
   {
     variants: {
       main: {
-        true: "font-bold animated-heading",
+        true: "font-bold text-transparent animated-heading \
+        bg-gradient-to-t from-transparent to-primary bg-clip-text",
         false: "font-semibold",
       },
       animated: {
diff --git a/web/src/components/Layout/Header.astro b/web/src/components/Layout/Header.astro
index 68068f1..38daf9e 100644
--- a/web/src/components/Layout/Header.astro
+++ b/web/src/components/Layout/Header.astro
@@ -4,13 +4,12 @@ import { Menu } from "lucide-astro";
 import Logo from "../Logo/Logo.astro";
 ---
 
-<header id="nav-container" class="fixed top-0 w-full h-header z-50">
+<header id="nav-container" class="fixed -top-1 w-full h-header z-50 hidden">
   <div
     class="w-full h-full absolute -z-20 backdrop-blur-lg"
-    style="  
-    background-image:
-      linear-gradient(to bottom, transparent, hsl(var(--color-neutral)) 100%),
-      repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.7) 2px, hsl(var(--color-neutral-accent) / 1) 4px );"
+    style="background-image:
+        linear-gradient(to bottom, transparent, hsl(var(--color-neutral) / 0.8) 100%),
+        repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.2) 0.5rem, hsl(var(--color-neutral-accent) / 1) 0.5rem );"
   >
   </div>
   <div
@@ -25,7 +24,7 @@ import Logo from "../Logo/Logo.astro";
           <Logo withText={false} />
         </div>
         <h2
-          class="text-2xl text-primary lg:text-3xl transition-all font-extrabold"
+          class="text-2xl text-main lg:text-3xl transition-all font-extrabold"
         >
           vspace.one
         </h2>
@@ -59,12 +58,12 @@ import Logo from "../Logo/Logo.astro";
       >
     </div>
     <div class="flex flex-row gap-2 items-center max-lg:hidden">
-      <a class={button({ variant: "secondary", size: "lg" })} href="/#location"
+      <a class={button({ variant: "link", size: "lg" })} href="/#location"
         >Standort</a
       >
       <a
         class={button({
-          variant: "secondary",
+          variant: "link",
           size: "lg",
           class: "max-md:hidden",
         })}
@@ -83,12 +82,17 @@ import Logo from "../Logo/Logo.astro";
 
   const navContainer = document.getElementById("nav-container")!;
 
+  navContainer.classList.remove("hidden");
+
   animate(navContainer, { y: [-100, 0] }, { ...ease.quint!(0.8).out });
 
   const init = () => {
     const button = document.getElementById("nav-button")!;
     const navMobile = document.getElementById("nav-mobile")!;
     const navButtons = navMobile.children;
+    const navContainer = document.getElementById("nav-container")!;
+
+    navContainer.classList.remove("hidden");
 
     button.addEventListener("click", () => {
       if (navMobile.classList.contains("hidden")) {
diff --git a/web/src/lib/animate-heading.ts b/web/src/lib/animate-heading.ts
index 97c861c..cd9a715 100644
--- a/web/src/lib/animate-heading.ts
+++ b/web/src/lib/animate-heading.ts
@@ -1,6 +1,6 @@
 import { animate, spring, stagger } from "motion";
 
-export default function animateHeading(e: Element, delay?: number) {
+export default function animateHeading(e: Element, options?: { delay?: number, once?: boolean }) {
     const id = Math.floor(Math.random() * 100).toString();
 
     e.id = id;
@@ -8,7 +8,8 @@ export default function animateHeading(e: Element, delay?: number) {
     if (e.textContent) {
         e.innerHTML = e.textContent.replace(
             /\S/g,
-            "<span class='letter'>$&</span>",
+            `<span class='letter 
+            bg-gradient-to-t from-primary/40 to-primary bg-clip-text bg-contain p-0'>$&</span>`,
         );
 
         const updatedElement = document.getElementById(id)!;
@@ -17,17 +18,26 @@ export default function animateHeading(e: Element, delay?: number) {
 
         const letters = updatedElement.querySelectorAll(`:scope > .letter`);
 
+
+        let didAppear = false;
+
         const observer = new IntersectionObserver(
             () => {
                 console.log("inview");
+
+                if (options?.once && didAppear) {
+                    return;
+                }
+
                 animate(
                     letters,
-                    { y: [100, 0] },
+                    { y: [50, 0] },
                     {
-                        easing: spring({ stiffness: 200, damping: 20 }),
-                        delay: stagger(0.02, { start: delay !== undefined ? delay : 0 }),
+                        easing: spring({ stiffness: 100, damping: 40 }),
+                        delay: stagger(0.02, { start: options?.delay !== undefined ? didAppear ? 0 : options.delay : 0 }),
                     },
                 );
+                didAppear = true;
             },
             { threshold: 0.01 },
         );
diff --git a/web/src/pages/support/join.astro b/web/src/pages/support/join.astro
index cb38e9d..f082be4 100644
--- a/web/src/pages/support/join.astro
+++ b/web/src/pages/support/join.astro
@@ -11,6 +11,15 @@ import RootLayout from "@/layouts/RootLayout.astro";
       <Heading main>Werde Mitglied!</Heading>
     </Section>
     <Section>
+      <p>
+        Du findest toll was wir machen und möchtest unseren Verein unterstützen?
+        Dann werde Mitglied! Mitglieder profitieren auch von einigen Vorteilen.
+      </p>
+    </Section>
+    <Section>
+      <h3 class="mb-2">
+        Du bist überzeugt und fragst dich wie du beitreten kannst?
+      </h3>
       <p>
         Lade dir unter Downloads die Beitrittserklärung herunter, bring sie mit
         in den Space und drücke sie einem der Vorstände in die Hände. Dafür
diff --git a/web/src/sections/LandingHeader.astro b/web/src/sections/LandingHeader.astro
index b2267bf..8c928c8 100644
--- a/web/src/sections/LandingHeader.astro
+++ b/web/src/sections/LandingHeader.astro
@@ -11,9 +11,12 @@ import Heading from "@/components/Heading.astro";
   >
     <div
       id="landing-heading-container"
-      style="opacity: 0;"
-      class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl p-card rounded-card ring ring-primary/20
+      class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl
+      p-card rounded-card ring ring-primary/20
       max-md:w-[90vw]"
+      style="background-image:
+        linear-gradient(to bottom, transparent, hsl(var(--color-primary) / 0.1) 100%),
+        repeating-linear-gradient(60deg, transparent, hsl(var(--color-neutral-accent) / 0.2) 0.5rem, hsl(var(--color-neutral-accent) / 1) 0.5rem );"
     >
       <!--h1>vspace.one</h1-->
       <Heading
@@ -22,7 +25,7 @@ import Heading from "@/components/Heading.astro";
         id="heading-makerspace"
         class="text-4xl text-center"
       >
-        Ein Makerspace und Hackerspace
+        Ein Space für Maker und Hacker!
       </Heading>
       <p>
         <a class="text-xl" href="/tour">Hier gehts zur virtuellen Space-Tour!</a
@@ -70,11 +73,17 @@ import Heading from "@/components/Heading.astro";
           "#landing-heading-container",
         )!;
 
+        animate(
+          landingHeadingContainer,
+          { scale: [0.4, 1], opacity: [0, 1] },
+          {
+            ...ease.quint!(1.4, 0.2).out,
+          },
+        );
+
+        animateHeading(headingMakerspace, { delay: 0.5, once: true });
+
         viewer.on("load", () => {
-          console.log("loaded");
-
-          animateHeading(headingMakerspace, 0.5);
-
           animate(
             panoBg,
             { scale: [0.9, 1], opacity: [0, 1] },
@@ -83,14 +92,6 @@ import Heading from "@/components/Heading.astro";
             },
           );
 
-          animate(
-            landingHeadingContainer,
-            { scale: [0.4, 1], opacity: [0, 1] },
-            {
-              ...ease.quint!(1.4, 0.2).out,
-            },
-          );
-
           animate(
             (progress) => {
               viewer.setPitch(progress * 10, false);