replace pano

web/package.json

@@ -28,17 +28,18 @@
     "lucide-astro": "^0.399.0",
     "marked": "^13.0.1",
     "motion": "^10.18.0",
-    "postcss": "^8.4.38",
-    "postcss-custom-media": "^10.0.6",
+    "pannellum": "^2.5.6",
+    "postcss": "^8.4.39",
+    "postcss-custom-media": "^10.0.7",
     "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": {
-    "@types/ical": "^0.8.3"
+    "@types/ical": "^0.8.3",
+    "@types/pannellum": "^2.5.0"
   }
 }

web/src/components/Button.astro

@@ -5,11 +5,11 @@ import { cn } from "@/lib/utils";
 
 export const button = cva(
   cn(
-    "inline-flex items-center justify-center rounded-md text-sm font-medium",
+    "inline-flex items-center justify-center rounded-md 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"
+    "disabled:pointer-events-none ring-offset-background",
   ),
   {
     variants: {
@@ -26,12 +26,12 @@ export const button = cva(
         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",
+        default: "text-base py-2 px-4",
+        sm: "py-1 px-3 rounded-md",
+        lg: "text-lg py-3 px-5 rounded-md",
+      },
     },
   },
-  }
 );
 
 export interface Props

web/src/components/InfoSlide.astro

@@ -12,17 +12,22 @@ const {
 ---
 
 <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">
+  <div
+    class="flex flex-col lg:flex-row max-w-section m-auto p-main lg:h-[600px]"
+  >
+    <div
+      class="max-lg:rounded-t-card lg:rounded-l-card overflow-hidden
+    lg:h-full lg:w-[60%] max-lg:max-h-[500px]"
+    >
       <Image
         densities={[1.5, 2]}
-        class="w-full h-full object-cover"
+        class="w-full h-full object-cover object-center"
         src={image}
         alt={imageAlt}
       />
     </div>
     <div
-      class="p-card bg-neutral-accent lg:rounded-r-card max-lg:rounded-b-card min-h-[200px] lg:w-[600px]"
+      class="p-card bg-neutral-accent lg:rounded-r-card max-lg:rounded-b-card w-[40%] max-lg:w-full"
     >
       <h4 class="text-2xl font-semibold mb-2">{title}</h4>
       <p>{text}</p>

web/src/pages/index.astro

@@ -24,7 +24,7 @@ import InfoSlideshow from "@/sections/InfoSlideshow.astro";
     <Section id="participate">
       <Participate />
     </Section>
-    <Section id="info-slideshow" maxWidth={false}>
+    <Section id="info-slideshow" padding={false} maxWidth={false}>
       <InfoSlideshow />
     </Section>
     <Section id="events">

web/src/sections/InfoSlideshow.astro

@@ -3,7 +3,7 @@ import InfoSlide from "@/components/InfoSlide.astro";
 import { infoSlides } from "@/content/info-slides";
 ---
 
-<div class="max-w-[1800px] m-auto">
+<div class="m-auto">
   <div class="keen-slider" id="info-slideshow">
     {infoSlides.map((e) => <InfoSlide infoSlide={e} />)}
   </div>
@@ -13,7 +13,7 @@ import { infoSlides } from "@/content/info-slides";
   import KeenSlider, { type KeenSliderOptions } from "keen-slider";
 
   const options: KeenSliderOptions = {
-    loop: true,
+    loop: false,
 
     slides: {
       spacing: 12,

web/src/sections/LandingHeader.astro

@@ -1,5 +1,5 @@
 ---
-
+import "pannellum/build/pannellum.css";
 ---
 
 <div class="h-[60vh] w-full flex justify-center items-center">
@@ -19,25 +19,38 @@
       </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 class="w-full h-full">
+    <div class="w-full h-full" id="pano-bg"></div>
+    <!--little-planet
+      width="2400"
+      height="900"
+      class="anim"
+      src="/pic/panorama/maschinenraum_half.jpg"
+      mode="pano"></!little-planet-->
   </div>
+  <script
+    is:inline
+    type="text/javascript"
+    src="https://cdn.pannellum.org/2.3/pannellum.js"></script>
   <script>
     import { animate } from "motion";
     import { ease } from "@unom/style";
 
+    const viewer = pannellum.viewer("pano-bg", {
+      panorama: "/pic/panorama/maschinenraum_half.jpg",
+      autoLoad: true,
+      showControls: false,
+    });
+
+    viewer.setYaw(90, true);
+
     const animateEntry = () => {
       let scene: any = document.querySelector("little-planet.anim")!;
       const landingHeadingContainer = document.querySelector(
         "#landing-heading-container",
       )!;
 
-      console.log(scene.width);
+      console.log(scene.children);
 
       scene.addEventListener("load", () => {
         animate(