add remaining faqs

improve landing header

web/astro.config.mjs

@@ -6,6 +6,11 @@ import mdx from "@astrojs/mdx";
 // https://astro.build/config
 export default defineConfig({
   site: "https://www.vspace.one",
+  // Other pages get prefetched for SPA typical navigation speed
+  prefetch: {
+    prefetchAll: true,
+    defaultStrategy: "hover",
+  },
   integrations: [
     tailwind({
       applyBaseStyles: false,

web/package.json

@@ -18,12 +18,14 @@
     "@photo-sphere-viewer/core": "^5.8.1",
     "@photo-sphere-viewer/markers-plugin": "^5.8.1",
     "@photo-sphere-viewer/virtual-tour-plugin": "^5.8.1",
+    "@unom/style": "git+https://git.unom.io/unom/style.git",
     "astro": "^4.11.3",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "ical": "^0.8.0",
     "keen-slider": "^6.8.6",
+    "lucide-astro": "^0.399.0",
     "marked": "^13.0.1",
     "motion": "^10.18.0",
     "postcss": "^8.4.38",

web/src/components/Card.astro

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from "astro/types";
 import { type VariantProps, cva } from "class-variance-authority";
 
-const card = cva(
+export const card = cva(
   "card rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10",
   {
     variants: {
@@ -16,7 +16,7 @@ const card = cva(
         false: "p-0",
       },
     },
-  }
+  },
 );
 
 export interface Props

web/src/components/Cards/CardSupport.astro

@@ -0,0 +1,19 @@
+---
+import { card } from "../Card.astro";
+
+type Props = {
+  title: string;
+  text: string;
+  to: string;
+};
+
+const { text, title, to } = Astro.props;
+---
+
+<a href={to} class={card({ interactable: true, padding: true })}>
+  <div class="w-16 h-16 text-primary mb-4">
+    <slot name="icon" />
+  </div>
+  <h3 class="text-2xl">{title}</h3>
+  <p>{text}</p>
+</a>

web/src/components/InfoSlide.astro

@@ -1,21 +1,24 @@
 ---
 import type { InfoSlide } from "@/content/info-slides";
+import { Image } from "astro:assets";
 
 type Props = {
   infoSlide: InfoSlide;
 };
 
 const {
-  infoSlide: { imageSrc, text, title },
+  infoSlide: { image, text, title, imageAlt },
 } = Astro.props;
 ---
 
 <div class="keen-slider__slide">
   <div class="flex flex-col lg:flex-row w-full">
     <div class="h-[500px] lg:h-[600px] xl:h-[700px] lg:w-full">
-      <img
+      <Image
-        class="lg:rounded-l-card max-lg:rounded-t-card object-cover h-full w-full"
+        densities={[1.5, 2]}
-        src={imageSrc}
+        class="w-full h-full object-cover"
+        src={image}
+        alt={imageAlt}
       />
     </div>
     <div

web/src/components/Layout/Header.astro

@@ -17,9 +17,8 @@ import { button } from "../Button.astro";
       >
       <a class={button({ variant: "secondary", size: "lg" })} href="/faq">FAQ</a
       >
-      <a
+      <a class={button({ variant: "primary", size: "lg" })} href="/support"
-        class={button({ variant: "primary", size: "lg" })}
+        >Unterstütze uns!</a
-        href="/support/donate">Unterstütze uns!</a
       >
     </div>
   </div>

web/src/components/PhotoSphere.astro

@@ -7,7 +7,7 @@ import "@photo-sphere-viewer/core/index.css";
 </div>
 
 <script>
-  import { Viewer, utils } from "@photo-sphere-viewer/core";
+  const { Viewer, utils } = await import("@photo-sphere-viewer/core");
 
   const container: HTMLElement = document.querySelector("#photo-sphere")!;
 

web/src/components/VirtualTour.astro

@@ -2,14 +2,16 @@
 import "@photo-sphere-viewer/core/index.css";
 ---
 
-<div class="h-[800px] overflow-hidden">
+<div class="h-[95vh] overflow-hidden relative z-0">
   <div class="w-full h-full" id="virtual-tour"></div>
 </div>
 
 <script>
-  import { Viewer } from "@photo-sphere-viewer/core";
+  import type { VirtualTourPlugin as VirtualTourPluginType } from "@photo-sphere-viewer/virtual-tour-plugin";
-  import { VirtualTourPlugin } from "@photo-sphere-viewer/virtual-tour-plugin";
+  const { Viewer } = await import("@photo-sphere-viewer/core");
-  // import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
+  const { VirtualTourPlugin } = await import(
+    "@photo-sphere-viewer/virtual-tour-plugin"
+  );
 
   const container: HTMLElement = document.querySelector("#virtual-tour")!;
 
@@ -33,8 +35,8 @@ import "@photo-sphere-viewer/core/index.css";
     ],
   });
 
-  const virtualTour: VirtualTourPlugin = viewer.getPlugin(VirtualTourPlugin);
+  const virtualTour: VirtualTourPluginType =
-  //  const markers = viewer.getPlugin(MarkersPlugin);
+    viewer.getPlugin(VirtualTourPlugin);
 
   virtualTour.setNodes(
     [

web/src/content/faq/06_parken.md

@@ -0,0 +1,4 @@
+---
+title: Wo darf ich parken?
+---
+Auf dem Gelände finden sich stets viele freie Parkplätze. Parkt gerne möglichst nahe an der in Google Maps markierten Stelle auf einem nicht reservierten Stellplatz.

web/src/content/faq/07_wann-antreffbar.md

@@ -0,0 +1,4 @@
+---
+title: Wann treffe ich euch an?
+---
+Überwiegend treffen wir uns jeden Dienstagabend ab etwa 19.00 Uhr. Die meisten Mitglieder haben ihren eigenen Schlüssel und können somit rein, wann immer sie wollen. Ob gerade jemand da ist erfährst du direkt auf vspace.one. Durch die SpaceAPI gibt es zudem auch fertige Apps, um sich den Raumstatus anzeigen zu lassen. Wer die Daten lieber selbst verarbeiten möchte, findet sie hier: [https://vspace.one/spaceapi.json](https://vspace.one/spaceapi.json)

web/src/content/faq/08_wie-kontaktieren.md

@@ -0,0 +1,4 @@
+---
+title: Wie Kontaktiere ich euch/eure Community?
+---
+Unserer Telegram Gruppe könnt ihr [hier](https://t.me/joinchat/DmNdswpnKgox_zzqENYXiA) beitreten! Und dem Matrix Room [hier](https://matrix.to/#/#vspaceone-general:matrix.org)! Beide Chats sind miteinander verbunden, nutze also die App/Technologie die dir zusagt.

web/src/content/faq/09_was-können.md

@@ -0,0 +1,6 @@
+---
+title: Was sollte ich können bevor ich zu euch komme?
+---
+Sobald du unsere Räume betrittst hast du alle Voraussetzungen automatisch erfüllt. Glückwunsch!
+
+Wir erheben keine Ansprüche auf irgendwelche Voraussetzungen die jemand erfüllen sollte und grundsätzlich ist bei uns jeder willkommen. Interesse und Neugierde sind aber auf keinen Fall von Nachteil!

web/src/content/faq/10_was-mitbringen.md

@@ -0,0 +1,6 @@
+---
+title: Was sollte ich mitbringen, wenn ich zu euch komme?
+---
+Wenn du nachts kommst, idealerweise ein Mobiltelefon und unsere Nummer, um im Space anzurufen, damit wir dir die Tür öffnen. Wir arbeiten aktuell daran, dass eingehende Anrufe auf jeden Fall bemerkt werden!
+
+Ansonsten wäre Zeit und Interesse praktisch. Ein Notebook dabei zu haben ist üblicherweise auch gut. Getränke gibt es bei uns für je 1€, du darfst aber auch eigene mitbringen.

web/src/content/faq/11_mitgliedspflicht.md

@@ -0,0 +1,6 @@
+---
+title: Muss ich Mitglied werden um regelmäßig vorbeikommen zu dürfen?
+---
+Nein. Ihr seid eingeladen jederzeit vorbeizukommen - wenn wir offen haben und so oft ihr wollt.
+
+Als Mitglied unterstützt ihr uns aber finanziell und genießt einige Vorteile. Eines davon ist z.B. ein Schlüssel zu unseren Räumlichkeiten um jederzeit freien Eintritt zu haben!

web/src/content/info-slides.ts

@@ -1,38 +1,53 @@
+import vspaceoneGemeinschaft from "../../public/pic/vspaceone_gemeinschaft.jpg"
+import vspaceonePrusaMk3s from "../../public/pic/vspaceone_prusa_mk3s_small.jpg";
+import vspaceoneBigPsu from "../../public/pic/vspaceone_big_psu_small.jpg";
+import vspaceoneDrawerWall from "../../public/pic/vspaceone_drawer_wall_small.jpg";
+import vspaceoneHolzUndMetall from "../../public/pic/vspaceone_holzundmetall.jpg";
+import vspaceoneMaschinenraum from "../../public/pic/vspaceone_maschinenraum.jpg";
+
+
 export type InfoSlide = {
     title: string;
     text: string;
-    imageSrc: string;
+    image: ImageMetadata;
+    imageAlt: string;
 };
 
 export const infoSlides: Array<InfoSlide> = [
     {
         title: "Gemeinsam zum Ziel",
         text: "Sich gegenseitig motivieren, inspirieren, helfen und voneinander lernen. Manches macht gemeinsam einfach mehr Spaß!",
-        imageSrc: "pic/vspaceone_gemeinschaft.jpg",
+        image: vspaceoneGemeinschaft,
+        imageAlt: "Ein verschwommenes Bild auf dem sich eine Gruppe Menschen im vspace.one erkennen lässt."
     },
     {
         title: "3D Druck",
         text: "Unser neuer Prusa i3 MK3s liefert dank zahlreicher Voreinstellungen und ausgeklügelter Features selbst nach kurzen Einweisungen in schnellster Zeit zu Ergebnissen die sich sehen lassen können.",
-        imageSrc: "pic/vspaceone_prusa_mk3s_small.jpg",
+        image: vspaceonePrusaMk3s,
+        imageAlt: "Ein Bild des Prusa i3 MK3s 3D-Druckers"
     },
     {
         title: "Elektronik",
         text: "Der Elektronikarbeitsplatz lädt zum Hacken ein. Stets zur Hand sind Lötkolben, Heißluftstation, Multimeter, Labornetzteile, digitales Oszilloskop sowie ein Haufen Zubehör und natürlich Kabel.",
-        imageSrc: "pic/vspaceone_big_psu_small.jpg",
+        image: vspaceoneBigPsu,
+        imageAlt: "Das Bild zeigt ein großes Netzteil"
     },
     {
         title: "Reparatur",
         text: "Eine Wand voll mit sortierten Elektronikkomponenten bietet die Qual der Wahl von üblicherweise benötigen Bauteile wie Widerstände oder Kondensatoren.",
-        imageSrc: "pic/vspaceone_drawer_wall_small.jpg",
+        image: vspaceoneDrawerWall,
+        imageAlt: "Das Bild zeigt eine Wand mit zahlreichen Elektronikkomponenten"
     },
     {
         title: "Holz und Metall",
         text: "Unsere noch nicht allzu große, aber ständig wachsende, Ausstattung an Werkzeug und Maschinen steht jederzeit für große und kleine Projekte in unseren Räumen bereit.",
-        imageSrc: "pic/vspaceone_holzundmetall.jpg",
+        image: vspaceoneHolzUndMetall,
+        imageAlt: "Das Bild zeigt einen Werkraum im vspace.one"
     },
     {
         title: "Ausstattung",
         text: "Wir haben drei moderne Räume. In der Brücke stehen bequeme Sofas, ein Beamer und ein Kühlschrank. Im Maschinenraum, kann an dank unserer vieler Maschinen an größeren Projekten gearbeitet werden. Das Labor ist mit einem großzügigen Elektronikarbeitsplatz ausgestattet.",
-        imageSrc: "pic/vspaceone_maschinenraum.jpg",
+        image: vspaceoneMaschinenraum,
+        imageAlt: "Das Bild zeigt den Maschinenraum des vspace.one"
     },
 ];

web/src/content/sponsors/netcup.md

@@ -3,4 +3,4 @@ name: netcup
 logo: /pic/sponsors/netcup_logo_RGB_color.svg
 ---
 
-[netcup.de – Ihr Ansprechpartner für qualitatives Webhosting, Servermanagement, Colocation und weitere Internetdienstleistungen]("https://netcup.de") für einen erfolgreichen, zuverlässigen und sicheren Internetauftritt.
+[netcup.de – Ihr Ansprechpartner für qualitatives Webhosting, Servermanagement, Colocation und weitere Internetdienstleistungen](https://netcup.de) für einen erfolgreichen, zuverlässigen und sicheren Internetauftritt.

web/src/layouts/MainLayout.astro

@@ -20,6 +20,6 @@ const slideAnimation = {
 };
 ---
 
-<main transition:animate={slideAnimation} class="pt-[200px] min-h-screen">
+<main transition:animate={slideAnimation} class="pt-[100px] min-h-screen">
   <slot />
 </main>

web/src/pages/faq.astro

@@ -14,7 +14,7 @@ const content = await Promise.all(faqs.map(async (e) => e.render()));
 <RootLayout title="Häufig gestellte Fragen">
   <MainLayout>
     <Section>
-      <Heading>Häufig gestellte Fragen</Heading>
+      <Heading main>Häufig gestellte Fragen</Heading>
     </Section>
     <Section>
       <div class="flex flex-col gap-main">

web/src/pages/index.astro

@@ -18,19 +18,19 @@ import InfoSlideshow from "@/sections/InfoSlideshow.astro";
     <Section padding={false} maxWidth={false}>
       <LandingHeader />
     </Section>
-    <Section>
+    <Section id="introduction">
       <Introduction />
     </Section>
-    <Section>
+    <Section id="participate">
       <Participate />
     </Section>
-    <Section maxWidth={false}>
+    <Section id="info-slideshow" maxWidth={false}>
       <InfoSlideshow />
     </Section>
-    <Section>
+    <Section id="events">
       <Events />
     </Section>
-    <Section>
+    <Section id="state">
       <SpaceState />
     </Section>
     <Section id="location">

web/src/pages/support/index.astro

@@ -0,0 +1,41 @@
+---
+import CardSupport from "@/components/Cards/CardSupport.astro";
+import Heading from "@/components/Heading.astro";
+import Section from "@/components/Section.astro";
+import MainLayout from "@/layouts/MainLayout.astro";
+import RootLayout from "@/layouts/RootLayout.astro";
+import { Euro, Award, UsersRound } from "lucide-astro";
+---
+
+<RootLayout title="Unterstütze uns">
+  <MainLayout>
+    <Section>
+      <Heading main>So kannst du uns unterstützen</Heading>
+    </Section>
+    <Section>
+      <div class="grid grid-cols-3 gap-card">
+        <CardSupport
+          to="/support/join"
+          title="Mitglied werden"
+          text="Trete dem Verein bei"
+        >
+          <UsersRound class="w-full h-full" slot="icon" />
+        </CardSupport>
+        <CardSupport
+          to="/support/donate"
+          title="Spenden"
+          text="Unterstütze uns durch eine Spende"
+        >
+          <Euro class="w-full h-full" slot="icon" />
+        </CardSupport>
+        <CardSupport
+          to="/support/sponsor"
+          title="Sponsor werden"
+          text="Unterstütze uns durch ein Sponsoring"
+        >
+          <Award class="w-full h-full" slot="icon" />
+        </CardSupport>
+      </div>
+    </Section>
+  </MainLayout>
+</RootLayout>

web/src/pages/support/join.astro

@@ -8,7 +8,7 @@ import RootLayout from "@/layouts/RootLayout.astro";
 <RootLayout title="Werde Mitglied!">
   <MainLayout>
     <Section>
-      <Heading> Werde Mitglied! </Heading>
+      <Heading main>Werde Mitglied!</Heading>
     </Section>
     <Section>
       <p>

web/src/sections/LandingHeader.astro

@@ -6,10 +6,85 @@
   <div
     class="w-full h-full absolute flex flex-col justify-center items-center z-40"
   >
-    <h1>vspace.one</h1>
+    <div
-    <p>
+      id="landing-heading-container"
-      Ein Makerspace und Hackerspace.<br />
+      style="opacity: 0;"
-      <a href="/tour">Hier gehts zur virtuellen Space-Tour!</a>
+      class="flex flex-col justify-center items-center gap-2 backdrop-blur-2xl p-card rounded-card ring ring-primary/20"
-    </p>
+    >
+      <!--h1>vspace.one</h1-->
+      <h2 class="text-4xl">Ein Makerspace und Hackerspace</h2>
+      <p>
+        <a class="text-xl" href="/tour">Hier gehts zur virtuellen Space-Tour!</a
+        >
+      </p>
+    </div>
   </div>
+  <div class="h-full w-full overflow-hidden">
+    <little-planet
+      class="anim object-cover"
+      src="/pic/panorama/maschinenraum_quarter.jpg"
+      width="1600"
+      height="1200"
+      mode="pano"></little-planet>
+  </div>
+  <script>
+    import { animate } from "motion";
+    import { ease } from "@unom/style";
+
+    const animateEntry = () => {
+      let scene: any = document.querySelector("little-planet.anim")!;
+      const landingHeadingContainer = document.querySelector(
+        "#landing-heading-container",
+      )!;
+
+      console.log(scene.width);
+
+      scene.addEventListener("load", () => {
+        animate(
+          scene,
+          { scale: [0.9, 1], opacity: [0, 1] },
+          {
+            ...ease.quint!(1.5).out,
+          },
+        );
+
+        animate(
+          landingHeadingContainer,
+          { scale: [0.4, 1], opacity: [0, 1] },
+          {
+            ...ease.quint!(1.4, 0.2).out,
+          },
+        );
+
+        animate(
+          (progress) => {
+            scene.camera = {
+              lon: -180 + ((progress * 270) % 360),
+              lat: progress * 10,
+              fov: 20 + 50 * progress,
+            };
+          },
+          {
+            ...ease.quint!(4).inOut,
+          },
+        );
+
+        /** spring({
+            stiffness: 10,
+            damping: 40,
+            mass: 2,
+            restSpeed: 0.01,
+            restDistance: 0.001,
+          }) */
+      });
+    };
+
+    animateEntry();
+
+    document.addEventListener("astro:after-swap", () => {
+      animateEntry();
+    });
+  </script>
+  <script is:inline type="module" src="https://unpkg.com/little-planet@0.5"
+  ></script>
 </div>

web/src/styles/global.css

@@ -39,6 +39,7 @@
 html {
   @apply bg-neutral text-main;
   font-family: system-ui, sans-serif;
+  scroll-behavior: smooth;
 }
 code {
   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,