add many sections

add public

web/.prettierrc.mjs

@@ -0,0 +1,13 @@
+// .prettierrc.mjs
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

web/astro.config.mjs

@@ -1,12 +1,15 @@
 import { defineConfig } from "astro/config";
-
 import tailwind from "@astrojs/tailwind";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
+  site: "https://www.vspace.one",
   integrations: [
     tailwind({
       applyBaseStyles: false,
     }),
+    mdx(),
   ],
 });

web/package.json

@@ -11,19 +11,28 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
+    "@astrojs/mdx": "^3.1.2",
     "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/ts-plugin": "^1.8.0",
+    "@photo-sphere-viewer/core": "^5.8.1",
+    "@photo-sphere-viewer/markers-plugin": "^5.8.1",
+    "@photo-sphere-viewer/virtual-tour-plugin": "^5.8.1",
     "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",
     "marked": "^13.0.1",
     "motion": "^10.18.0",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.6",
     "postcss-import": "^16.1.0",
+    "prettier-plugin-astro": "^0.14.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.165.0",
     "typescript": "^5.5.2"
   },
   "devDependencies": {

web/public/pic/.comments/ethernetcable-original.jpeg.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<comment version="3.0">
+  <caption>LAN cable</caption>
+  <note>LAN cable</note>
+  <place/>
+  <categories>
+    <category value="Cable"/>
+    <category value="Computer"/>
+    <category value="adsl"/>
+    <category value="blue"/>
+    <category value="broadband"/>
+    <category value="business"/>
+    <category value="communication"/>
+    <category value="computercable"/>
+    <category value="computing"/>
+    <category value="connect"/>
+    <category value="connection"/>
+    <category value="connectivity"/>
+    <category value="connector"/>
+    <category value="data"/>
+    <category value="digital"/>
+    <category value="dsl"/>
+    <category value="electric"/>
+    <category value="electronic"/>
+    <category value="equipment"/>
+    <category value="ethernet"/>
+    <category value="interconnect"/>
+    <category value="internet"/>
+    <category value="lan"/>
+    <category value="line"/>
+    <category value="link"/>
+    <category value="macro"/>
+    <category value="net"/>
+    <category value="network"/>
+    <category value="networkconnectionplug"/>
+    <category value="networking"/>
+    <category value="patch"/>
+    <category value="plug"/>
+    <category value="technology"/>
+    <category value="telecommunication"/>
+    <category value="w-lan"/>
+    <category value="white"/>
+    <category value="wire"/>
+    <category value="wired"/>
+  </categories>
+</comment>

web/public/pic/favicon/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

web/public/pic/favicon/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

web/public/pic/logos/Matrix.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Matrix (protocol) logo</title>
+ <g transform="translate(-.095 .005)" fill="#777">
+  <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
+  <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
+  <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
+ </g>
+</svg>

web/public/pic/sponsors/netcup_logo_RGB_color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305 87"><title>netcup_logo_color</title><path d="M254.712,77.153h5.837V87H242.932V26.254h-5.293V16.4h34.9c7.02,0,10.481,3.543,10.481,10.732v29.22c0,6.968-3.567,10.511-10.8,10.511h-10.7V57.016H268c2.376,0,3.568-1.222,3.568-3.766V30.126c0-2.552-1.192-3.872-3.461-3.872h-13.4ZM232.467,66.862H200.054c-7.028,0-10.588-3.543-10.588-10.625V25.145h-5.187V16.4h16.852V52.807c0,2.765,1.3,4.209,3.782,4.209h10.48V16.4h11.673V57.016h5.4Zm-55.9,0H140.369V34.221c0-11.841,6.264-17.822,18.907-17.822H176.67V33.335H166.625V26.254h-8.212c-4.324,0-6.486,2.429-6.486,7.187V57.016h24.636Zm-45.063,0H118.636c-5.722,0-8.533-3.1-8.533-9.182V26.254h-6.486V16.4H110.1V.906h11.558V16.4h9.724v9.855h-9.724V53.471c0,2.544,1.405,3.766,4.11,3.651H128.9a19.654,19.654,0,0,0,2.6-.106ZM97.116,47.5H71.074v6.532c0,1.986.97,2.987,2.811,2.987H95.817v9.846H69.348c-6.486,0-9.725-3.208-9.725-9.74V27.353c0-7.3,3.782-10.954,11.237-10.954H86.635c6.914,0,10.374,3.43,10.481,10.4Zm-26.042-9.74h14.7V29.462c0-2.109-.978-3.208-2.918-3.208H74.206c-2.055,0-3.132,1.214-3.132,3.651Zm-38.127,29.1V29.126c0-1.88-1.085-2.872-3.247-2.872H17.386V66.862H5.714V26.254H.313V16.4H34.994c6.379,0,9.618,3.323,9.618,10.076V57.016h5.4v9.846Z" style="fill:#056473;fill-rule:evenodd"/><path d="M295.6,16.007a7.05,7.05,0,0,1-7.211-6.838A7.29,7.29,0,0,1,295.6,1.911c3.927,0,7.7,3.278,7.7,7.258,0,3.8-3.774,6.838-7.7,6.838M287,9.169a8.4,8.4,0,0,0,8.6,8.228c4.928,0,9.091-3.706,9.091-8.228A8.952,8.952,0,0,0,295.6.53,8.608,8.608,0,0,0,287,9.169m6.577-.535V5.579h2.215c1.139,0,2.323.161,2.323,1.481,0,1.506-1.307,1.574-2.788,1.574ZM292.182,14h1.39V10.025h1.75L298.255,14h1.436L296.85,9.91a2.6,2.6,0,0,0,2.65-2.781c0-1.986-1.1-2.941-3.414-2.941h-3.9Z" style="fill:#056473;fill-rule:evenodd"/></svg>

web/src/components/Button.astro

@@ -4,43 +4,43 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 export const button = cva(
-    cn(
-        "inline-flex items-center justify-center rounded-md text-sm font-medium",
-        "transition-colors focus-visible:outline-none",
-        "ring-main focus-visible:ring-2 focus-visible:ring-ring",
-        "focus-visible:ring-offset-2 disabled:opacity-50",
-        "disabled:pointer-events-none ring-offset-background"
-    ),
-    {
-        variants: {
-            variant: {
-                default: "bg-main text-neutral hocus:bg-main/80",
-                primary:
-                    "bg-primary dark:bg-primary/50 text-neutral dark:text-main hocus:bg-primary/80 dark:hocus:bg-primary/80",
-                destructive:
-                    "bg-error text-destructive-foreground hocus:bg-destructive/90",
-                outline:
-                    "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",
-            },
-            size: {
-                default: "h-10 text-base py-2 px-4",
-                sm: "h-9 px-3 rounded-md",
-                lg: "h-11 px-8 rounded-md",
-            },
-        },
-    }
+  cn(
+    "inline-flex items-center justify-center rounded-md text-sm font-medium",
+    "transition-colors focus-visible:outline-none no-underline",
+    "ring-main focus-visible:ring-2 focus-visible:ring-ring",
+    "focus-visible:ring-offset-2 disabled:opacity-50",
+    "disabled:pointer-events-none ring-offset-background"
+  ),
+  {
+    variants: {
+      variant: {
+        default: "bg-main text-neutral hocus:bg-main/80",
+        primary:
+          "bg-primary dark:bg-primary/50 text-neutral dark:text-main hocus:bg-primary/80 dark:hocus:bg-primary/80",
+        destructive:
+          "bg-error text-destructive-foreground hocus:bg-destructive/90",
+        outline:
+          "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",
+      },
+      size: {
+        default: "h-10 text-base py-2 px-4",
+        sm: "h-9 px-3 rounded-md",
+        lg: "h-14 text-lg px-8 rounded-md",
+      },
+    },
+  }
 );
 
 export interface Props
-    extends HTMLAttributes<"button">,
-        VariantProps<typeof button> {}
+  extends HTMLAttributes<"button">,
+    VariantProps<typeof button> {}
 
 const { variant = "default", size = "default", ...props } = Astro.props;
 ---
 
 <button {...props} class={button({ variant, size })}>
-    <slot />
+  <slot />
 </button>

web/src/components/Card.astro

@@ -7,7 +7,7 @@ const card = cva(
   {
     variants: {
       interactable: {
-        false: "transition-shadow focus-within:shadow-lg ring-2 ring-neutral",
+        false: "transition-shadow focus-within:shadow-lg ring-2 ring-main",
         true: "cursor-pointer shadow-sm hocus:bg-neutral-accent/50 \
         hocus:shadow-lg hocus:ring-2 hocus:outline-none",
       },

web/src/components/Cards/CardFaq.astro

@@ -0,0 +1,14 @@
+---
+import Card from "../Card.astro";
+
+type Props = {
+  title: string;
+};
+
+const { title } = Astro.props;
+---
+
+<Card>
+  <h3 class="mb-2">{title}</h3>
+  <slot />
+</Card>

web/src/components/Cards/CardSponsor.astro

@@ -0,0 +1,19 @@
+---
+import type { z } from "astro:content";
+import { Sponsor } from "@/content/config";
+import Card from "../Card.astro";
+
+type Props = {
+  sponsor: z.output<typeof Sponsor>;
+};
+
+const { sponsor } = Astro.props;
+---
+
+<Card>
+  <div class="max-w-[256px]">
+    <img class="w-full h-full object-contain" src={sponsor.logo} />
+  </div>
+  <h3>{sponsor.name}</h3>
+  <slot />
+</Card>

web/src/components/Layout/Footer.astro

@@ -25,31 +25,86 @@ type NavigationGroup = {
 
 const tree: Array<NavigationGroup> = [
   {
-    title: "Overview",
+    title: "Übersicht",
     items: [
       {
         path: "/",
         type: NavigationItemType.Link,
-        label: "Landing",
+        label: "Startseite",
+      },
+    
+      {
+        path: "/faq",
+        type: NavigationItemType.Link,
+        label: "FAQ",
+      },
+    ],
+  },
+  {title: "Unterstützung",
+  items: [
+  {
+        path: "/support/donate",
+        type: NavigationItemType.Link,
+        label: "Spenden",
       },
       {
-        path: "https://github.com/tempblade/creator",
+        path: "/support/sponsor",
         type: NavigationItemType.Link,
-        label: "GitHub",
+        label: "Sponsoren",
       },
       {
-        path: "https://tempblade.com",
+        path: "/support/join",
+        type: NavigationItemType.Link,
+        label: "Werde Mitglied!",
+      },
+  ]
+  },
+  {
+    title: "Nützliches",
+    items: [
+      {
+        path: "/downloads",
+        label: "Downloads",
+        type: NavigationItemType.Link,
+      },
+      {
+        path: "https://wiki.vspace.one",
+        label: "Wiki",
         type: NavigationItemType.Link,
-        label: "tempblade",
       },
     ],
   },
   {
-    title: "Legal",
+    title: "Rechtliches",
     items: [
       {
         path: "/legal/imprint",
-        label: "Imprint",
+        label: "Impressum",
+        type: NavigationItemType.Link,
+      },
+      {
+        path: "/legal/privacy",
+        label: "Datenschutzerklärung",
+        type: NavigationItemType.Link,
+      },
+    ],
+  },
+  {
+    title: "Soziales",
+    items: [
+      {
+        path: "https://github.com/vspaceone",
+        label: "GitHub",
+        type: NavigationItemType.Link,
+      },
+      {
+        path: "https://t.me/joinchat/DmNdswpnKgox_zzqENYXiA",
+        label: "Telegram",
+        type: NavigationItemType.Link,
+      },
+      {
+        path: "https://matrix.to/#/#vspaceone-general:matrix.org",
+        label: "Matrix",
         type: NavigationItemType.Link,
       },
     ],

web/src/components/Layout/Header.astro

@@ -1,17 +1,26 @@
 ---
 import { button } from "../Button.astro";
-import Logo from "components/Logo/Logo.astro";
 ---
 
-<header class="fixed top-0 w-full h-16 z-50">
+<header id="header" class="fixed top-0 w-full h-[100px] z-50 bg-neutral-accent">
   <div
     class="flex flex-row justify-between h-full w-full max-w-section m-auto p-main"
   >
-    <div class="w-16 h-8 flex">
-      <Logo />
+    <div class="flex justify-center items-center">
+      <a class="no-underline" href="/">
+        <h2 class="text-3xl font-extrabold">vspace.one</h2>
+      </a>
+    </div>
+    <div class="flex flex-row gap-2 items-center">
+      <a class={button({ variant: "secondary", size: "lg" })} href="/#location"
+        >Standort</a
+      >
+      <a class={button({ variant: "secondary", size: "lg" })} href="/faq">FAQ</a
+      >
+      <a
+        class={button({ variant: "primary", size: "lg" })}
+        href="/support/donate">Unterstütze uns!</a
+      >
     </div>
-    <a class={button({ variant: "primary", size: "default" })} href="/faq"
-      >FAQ</a
-    >
   </div>
 </header>