remove heading animation temporarly

improve styling
use ubuntu font for headings

web/astro.config.mjs

@@ -3,6 +3,8 @@ import tailwind from "@astrojs/tailwind";
 
 import mdx from "@astrojs/mdx";
 
+import icon from "astro-icon";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://www.vspace.one",
@@ -16,5 +18,6 @@ export default defineConfig({
       applyBaseStyles: false,
     }),
     mdx(),
+    icon(),
   ],
 });

web/package.json

@@ -15,11 +15,14 @@
     "@astrojs/mdx": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/ts-plugin": "^1.10.2",
+    "@iconify-icons/akar-icons": "^1.2.19",
+    "@iconify-json/akar-icons": "^1.2.1",
     "@photo-sphere-viewer/core": "^5.10.0",
     "@photo-sphere-viewer/markers-plugin": "^5.10.0",
     "@photo-sphere-viewer/virtual-tour-plugin": "^5.10.0",
     "@unom/style": "git+https://git.unom.io/unom/style.git",
     "astro": "^4.15.6",
+    "astro-icon": "^1.1.1",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

web/src/components/Cards/CardEvent.astro

@@ -13,11 +13,11 @@ const { event } = Astro.props;
   <div class="bg-primary rounded-t-card p-card">
     <h3 class="text-neutral">
       <span class="block font-medium">
-        {event.start.toLocaleDateString("de-DE", { year: "numeric" })}
+        {event.start?.toLocaleDateString("de-DE", { year: "numeric" })}
       </span>
       <span class="block font-bold text-4xl">
         {
-          event.start.toLocaleDateString("de-DE", {
+          event.start?.toLocaleDateString("de-DE", {
             month: "long",
             day: "numeric",
           })

web/src/components/Cards/CardParticipate.astro

@@ -0,0 +1,21 @@
+---
+import Card from "@/components/Card.astro";
+
+export type Props = {
+  title: string;
+};
+
+const { title } = Astro.props;
+---
+
+<Card padding={false}>
+  <div class="flex flex-col bg-primary rounded-t-card p-card">
+    <div class="size-12 mb-2 text-neutral">
+      <slot name="icon" />
+    </div>
+    <h3 class="text-neutral">{title}</h3>
+  </div>
+  <div class="p-card">
+    <slot name="content" />
+  </div>
+</Card>

web/src/components/Cards/CardSponsor.astro

@@ -1,6 +1,6 @@
 ---
 import type { z } from "astro:content";
-import { Sponsor } from "@/content/config";
+import type { Sponsor } from "@/content/config";
 import Card from "../Card.astro";
 
 type Props = {

web/src/components/Heading.astro

@@ -4,12 +4,13 @@ import type { HTMLAttributes } from "astro/types";
 import { type VariantProps, cva } from "class-variance-authority";
 
 const heading = cva(
-  "max-w-3xl m-[var(--section-heading-margin)] overflow-hidden",
+  "max-w-3xl m-[var(--section-heading-margin)] overflow-hidden font-display",
   {
     variants: {
       main: {
         true: "font-bold text-transparent animated-heading \
-        bg-gradient-to-t from-transparent to-primary bg-clip-text",
+        bg-gradient-to-t from-transparent to-primary bg-clip-text \
+        ",
         false: "font-semibold",
       },
       animated: {
@@ -20,6 +21,10 @@ const heading = cva(
         true: "py-4",
         false: "p-0",
       },
+      hasIcon: {
+        true: "",
+        false: "",
+      },
     },
   },
 );
@@ -33,6 +38,7 @@ export interface Props
 const {
   main = false,
   padding = true,
+  hasIcon = false,
   subtitle,
   id,
   class: propsClass,
@@ -45,6 +51,13 @@ const titleClass = cn(
 ---
 
 <div class="z-0 relative">
+  {
+    hasIcon && (
+      <div class="w-16 h-16 text-primary mb-4">
+        <slot name="icon" />
+      </div>
+    )
+  }
   {
     main ? (
       <h1 id={id} class={titleClass}>

web/src/components/InfoSlide.astro

@@ -11,9 +11,10 @@ const {
 } = Astro.props;
 ---
 
+<>
   <div class="keen-slider__slide">
     <div
-    class="flex flex-col lg:flex-row max-w-section m-auto p-main lg:h-[600px]"
+      class="flex flex-col lg:flex-row max-w-section m-auto p-main py-0 lg:h-[600px]"
     >
       <div
         class="max-lg:rounded-t-card lg:rounded-l-card overflow-hidden
@@ -35,3 +36,4 @@ const {
       </div>
     </div>
   </div>
+</>

web/src/components/Layout/Header.astro

@@ -24,7 +24,7 @@ import Logo from "../Logo/Logo.astro";
           <Logo withText={false} />
         </div>
         <h2
-          class="text-2xl text-main lg:text-3xl transition-all font-extrabold"
+          class="text-2xl text-main lg:text-3xl transition-all font-extrabold font-display"
         >
           vspace.one
         </h2>
@@ -43,8 +43,8 @@ import Logo from "../Logo/Logo.astro";
       class="animate-in slide-in-from-top-10 ease-out-quart duration-1000 absolute top-header w-full
       bg-neutral p-main left-0 lg:hidden hidden flex flex-col gap-3 -z-30"
     >
-      <a class={button({ variant: "secondary", size: "lg" })} href="/#location"
+      <a class={button({ variant: "secondary", size: "lg" })} href="/support"
-        >Standort</a
+        >Unterstütze uns</a
       >
       <a
         class={button({
@@ -53,13 +53,13 @@ import Logo from "../Logo/Logo.astro";
         })}
         href="/faq">FAQ</a
       >
-      <a class={button({ variant: "primary", size: "lg" })} href="/support"
+      <a class={button({ variant: "primary", size: "lg" })} href="/#location"
-        >Unterstütze uns!</a
+        >Besuche uns!</a
       >
     </div>
     <div class="flex flex-row gap-2 items-center max-lg:hidden">
-      <a class={button({ variant: "link", size: "lg" })} href="/#location"
+      <a class={button({ variant: "link", size: "lg" })} href="/support"
-        >Standort</a
+        >Unterstütze uns</a
       >
       <a
         class={button({
@@ -69,8 +69,8 @@ import Logo from "../Logo/Logo.astro";
         })}
         href="/faq">FAQ</a
       >
-      <a class={button({ variant: "primary", size: "lg" })} href="/support"
+      <a class={button({ variant: "primary", size: "lg" })} href="/#location"
-        >Unterstütze uns!</a
+        >Besuche uns!</a
       >
     </div>
   </div>

web/src/lib/animate-heading.ts

@@ -1,6 +1,13 @@
-import { animate, spring, stagger } from "motion";
+//import { animate, spring, stagger } from "motion";
 
-export default function animateHeading(e: Element, options?: { delay?: number, once?: boolean }) {
+export default function animateHeading(
+	_e: Element,
+	_options?: { delay?: number; once?: boolean },
+) {
+	return;
+
+	// Currently disabled since theres no handling of line breaks yet
+	/* 
 	const id = Math.floor(Math.random() * 100).toString();
 
 	e.id = id;
@@ -18,7 +25,6 @@ export default function animateHeading(e: Element, options?: { delay?: number, o
 
 		const letters = updatedElement.querySelectorAll(`:scope > .letter`);
 
-
 		let didAppear = false;
 
 		const observer = new IntersectionObserver(
@@ -34,7 +40,14 @@ export default function animateHeading(e: Element, options?: { delay?: number, o
 					{ y: [50, 0] },
 					{
 						easing: spring({ stiffness: 100, damping: 40 }),
-                        delay: stagger(0.02, { start: options?.delay !== undefined ? didAppear ? 0 : options.delay : 0 }),
+						delay: stagger(0.02, {
+							start:
+								options?.delay !== undefined
+									? didAppear
+										? 0
+										: options.delay
+									: 0,
+						}),
 					},
 				);
 				didAppear = true;
@@ -43,5 +56,5 @@ export default function animateHeading(e: Element, options?: { delay?: number, o
 		);
 
 		observer.observe(e);
-    }
+	} */
 }

web/src/pages/support/join.astro

@@ -24,13 +24,13 @@ import RootLayout from "@/layouts/RootLayout.astro";
         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
         eignet sich beispielsweise das regelmäßig stattfindende Treffen am
-        Dienstagabend. <br />
+        Dienstagabend. <br /><br />
 
         Alternativ schicke sie an folgende Adresse:<br />
 
         vspace.one e.V <br />
         Am Krebsgraben 15 <br />
-        78048 Villingen <br />
+        78048 Villingen <br /><br />
 
         Oder an folgende E-Mail Adresse: <br />
 

web/src/sections/InfoSlideshow.astro

@@ -1,8 +1,13 @@
 ---
 import InfoSlide from "@/components/InfoSlide.astro";
 import { infoSlides } from "@/content/info-slides";
+import Heading from "@/components/Heading.astro";
 ---
 
+<div class="p-main m-auto max-w-section py-0">
+  <Heading>Einblicke</Heading>
+</div>
+
 <div class="m-auto">
   <div class="keen-slider" id="info-slideshow">
     {infoSlides.map((e) => <InfoSlide infoSlide={e} />)}

web/src/sections/Introduction.astro

@@ -1,10 +1,12 @@
 ---
 import Heading from "@/components/Heading.astro";
+import vspaceOneRakete from "../../public/pic/vspaceone_Illustrationen_Rakete_1.webp";
+import { Image } from "astro:assets";
 ---
 
-<div>
+<div class="flex flex-col-reverse lg:flex-row lg:items-center">
+  <div class="flex-shrink-0">
     <Heading>Was wir machen</Heading>
-
     <p>
       Unser Ziel ist der Wissensaustausch sowie die Bildung aller interessierten
       in den Bereichen neuartiger computergestützter Technologien (wie zum
@@ -12,12 +14,22 @@ import Heading from "@/components/Heading.astro";
       Robotik), der Elektrotechnik und Elektronik sowie auch auf Gebieten der
       Reparatur und Wartung.
       <br />
-    Natürlich aber auch ganz im Sinne aller anderen Hacker- und Makerspaces das bieten
+      Natürlich aber auch ganz im Sinne aller anderen Hacker- und Makerspaces das
-    einer Plattform, um seinen Interessen in diesen Gebieten nachzugehen von Programmieren
+      bieten einer Plattform, um seinen Interessen in diesen Gebieten nachzugehen
-    bis Holz- und Metallwerken ist fast alles dabei.
+      von Programmieren bis Holz- und Metallwerken ist fast alles dabei.
       <br />
       Dazu haben wir eine immer größer werdende offene Werkstatt, die für jeden zugänglich
       sein soll!
     </p>
-  <a href="/faq">Mehr Fragen zu uns und was wir machen beantworten wir hier!</a>
+    <a href="/faq"
+      >Mehr Fragen zu uns und was wir machen beantworten wir hier!</a
+    >
+  </div>
+  <div class="flex w-full h-full max-lg:max-w-[300px] lg:min-w-[300px]">
+    <Image
+      class="object-fit w-full h-full"
+      src={vspaceOneRakete}
+      alt="Ein 3D Rendering einer Rakete"
+    />
+  </div>
 </div>

web/src/sections/Participate.astro

@@ -1,32 +1,36 @@
 ---
-import Card from "@/components/Card.astro";
+import CardParticipate from "@/components/Cards/CardParticipate.astro";
 import Heading from "@/components/Heading.astro";
+import { Icon } from "astro-icon/components";
+import { HeartHandshake, Binoculars, UsersRound } from "lucide-astro";
 ---
 
 <div id="Mitmachen">
   <Heading>Mitmachen</Heading>
   <div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-main">
-    <Card>
+    <CardParticipate title="Vorbeischauen">
-      <h3>Vorbeischauen</h3>
+      <Binoculars slot="icon" class="w-full h-full" />
-      <p>
+      <p slot="content">
         Du möchtest uns und unsere Räumlichkeiten gerne persönlich kennenlernen?
         Schau doch Dienstags ab 19:00 bei uns in der Am Krebsgraben 15 in
         Villingen vorbei. Dienstags findet bei uns jede Woche der Chaostreff
         statt.
       </p>
-    </Card>
+    </CardParticipate>
-    <Card>
+
-      <h3>Mitglied werden</h3>
+    <CardParticipate title="Mitglied werden">
-      <p>
+      <UsersRound slot="icon" class="w-full h-full" />
+      <p slot="content">
         Bei uns kann Jeder und Jede mitmachen. Interessierte Schüler, Studenten
         und Erwachsene, die sich für kreativen Umgang mit Technik begeistern
         sind willkommen. Wenn euch gefällt was wir tun und ihr uns unterstützen
         wollt findet ihr unser Beitrittsformular <a href="/join">hier</a>.
       </p>
-    </Card>
+    </CardParticipate>
-    <Card>
+    <CardParticipate title="Telegram">
-      <h3>Telegram</h3>
+      <Icon slot="icon" class="w-full h-full" name="akar-icons:telegram-fill" />
-      <p>
+
+      <p slot="content">
         Für die regelmäßige Kommunikation verwenden wir <a
           href="https://t.me/joinchat/DmNdswpnKgox_zzqENYXiA">Telegramgruppe</a
         > und <a href="https://matrix.to/#/#vspaceone-general:matrix.org"
@@ -36,15 +40,16 @@ import Heading from "@/components/Heading.astro";
         interessierst und wissen willst, was bei uns los ist, trete ihr bei oder
         schreibe uns eine Email an info[at]vspace.one.
       </p>
-    </Card>
+    </CardParticipate>
-    <Card>
+
-      <h3>Spenden</h3>
+    <CardParticipate title="Spenden">
-      <p>
+      <HeartHandshake class="w-full h-full" slot="icon" />
+      <p slot="content">
         Dir gefällt was wir machen, hast aber keine Möglichkeit oder Lust
         Mitglied zu werden? Gerne nehmen wir wie <a href="/donate"
           >hier beschrieben</a
         > deine Spende als Überweisung an.
       </p>
-    </Card>
+    </CardParticipate>
   </div>
 </div>

web/src/sections/SpaceState.astro

@@ -17,7 +17,7 @@ const spaceData = await getSpaceData();
       )}
     >
     </div>
-    <p class="text-main font-extrabold text-3xl">
+    <p class="text-main font-extrabold text-3xl font-display">
       {spaceData.state.open ? "Offen" : "Geschlossen"}
     </p>
   </div>

web/tailwind.config.cjs

@@ -5,6 +5,9 @@ module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
+      fontFamily: {
+        display: ["Ubuntu"],
+      },
       screens: { "2xl": "1400px", "3xl": "1850px" },
       borderRadius: {
         card: "0.5rem",
@@ -65,7 +68,7 @@ module.exports = {
   },
   plugins: [
     require("tailwindcss-animate"),
-    plugin(function ({ addVariant }) {
+    plugin(({ addVariant }) => {
       addVariant("hocus", ["&:hover", "&:focus"]);
     }),
   ],