From 52f2a7875394e3ee4979f3467077ee1fc0c8d41f Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Thu, 25 Jun 2026 22:34:14 +0200
Subject: [PATCH] fix: resolve client-side supabase auth session visibility on
 page.tsx by querying server-side and passing to HomeClient client component

---
 shop/app/page.tsx              | 398 +-------------------------------
 shop/components/HomeClient.tsx | 402 +++++++++++++++++++++++++++++++++
 2 files changed, 414 insertions(+), 386 deletions(-)
 create mode 100644 shop/components/HomeClient.tsx

diff --git a/shop/app/page.tsx b/shop/app/page.tsx
index 6db8bf8..6bedfc0 100644
--- a/shop/app/page.tsx
+++ b/shop/app/page.tsx
@@ -1,391 +1,17 @@
-"use client"
+import { createClient } from '@/lib/supabase/server'
+import { HomeClient } from '@/components/HomeClient'
 
-import { useState, useEffect } from 'react'
-import { createClient } from '@/lib/supabase/client'
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
-import { motion } from 'framer-motion'
-import {
-  ArrowRight,
-  CheckCircle2,
-  ShoppingCart,
-  Utensils,
-  Layers,
-  Users,
-  ClipboardList,
-  Zap,
-  ArrowUpRight,
-  ShieldCheck,
-  Sparkles,
-  Activity
-} from 'lucide-react'
+export const dynamic = "force-dynamic"
 
-export default function Home() {
-  const [user, setUser] = useState<any>(null)
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-    const supabase = createClient()
-    supabase.auth.getUser().then(({ data: { user } }) => {
-      setUser(user)
-    })
-  }, [])
-
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.15
-      }
-    }
+export default async function Home() {
+  let user = null
+  try {
+    const supabase = await createClient()
+    const { data } = await supabase.auth.getUser()
+    user = data.user
+  } catch (e) {
+    console.error("Failed to fetch user in page.tsx:", e)
   }
 
-  const itemVariants = {
-    hidden: { y: 20, opacity: 0 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      transition: {
-        type: "spring" as const,
-        stiffness: 100,
-        damping: 15
-      }
-    }
-  }
-
-  return (
-    <div className="min-h-screen bg-slate-950 text-slate-100 overflow-hidden relative selection:bg-blue-500/30 selection:text-blue-200">
-
-      {/* Background Decorative Animated Blobs */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-[600px] pointer-events-none -z-10 overflow-hidden">
-        <motion.div
-          animate={{
-            scale: [1, 1.15, 0.95, 1],
-            rotate: [0, 90, 180, 270, 360],
-            x: [0, 40, -30, 0],
-            y: [0, -20, 50, 0]
-          }}
-          transition={{
-            duration: 20,
-            repeat: Infinity,
-            ease: "easeInOut"
-          }}
-          className="absolute -top-[10%] left-[10%] w-[350px] sm:w-[500px] h-[350px] sm:h-[500px] bg-blue-600/15 blur-[120px] sm:blur-[160px] rounded-full"
-        />
-        <motion.div
-          animate={{
-            scale: [1, 0.9, 1.1, 1],
-            rotate: [0, -90, -180, -270, -360],
-            x: [0, -30, 40, 0],
-            y: [0, 50, -30, 0]
-          }}
-          transition={{
-            duration: 25,
-            repeat: Infinity,
-            ease: "easeInOut"
-          }}
-          className="absolute -top-[5%] right-[15%] w-[300px] sm:w-[450px] h-[300px] sm:h-[450px] bg-purple-600/10 blur-[100px] sm:blur-[140px] rounded-full"
-        />
-      </div>
-
-      {/* Hero Section */}
-      <section className="w-full pt-16 pb-12 md:pt-28 md:pb-20 px-4 relative flex flex-col items-center">
-        <motion.div
-          initial="hidden"
-          animate="visible"
-          variants={containerVariants}
-          className="container max-w-6xl mx-auto flex flex-col items-center text-center space-y-8"
-        >
-          {/* Badge */}
-          <motion.div
-            variants={itemVariants}
-            className="inline-flex items-center gap-2 rounded-full bg-blue-500/10 border border-blue-500/20 px-4 py-1.5 text-xs sm:text-sm text-blue-400 font-semibold tracking-wide backdrop-blur-md shadow-[0_0_15px_rgba(59,130,246,0.1)]"
-          >
-            <motion.div
-              animate={{ opacity: [0.5, 1, 0.5] }}
-              transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
-            >
-              <Zap className="w-3.5 h-3.5 text-blue-400 fill-blue-400/20" />
-            </motion.div>
-            CASPOS Lizenz-Order-Portal
-          </motion.div>
-
-          {/* Headline */}
-          <div className="space-y-4 max-w-4xl">
-            <motion.h1
-              variants={itemVariants}
-              className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl/tight bg-clip-text text-transparent bg-gradient-to-b from-white via-slate-100 to-slate-400"
-            >
-              POS Software <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-500 font-black">Lizenzen & Module</span>
-            </motion.h1>
-            <motion.p
-              variants={itemVariants}
-              className="mx-auto max-w-[750px] text-slate-400 text-base sm:text-lg md:text-xl font-normal leading-relaxed"
-            >
-              Erwerben und verwalten Sie digitale Lizenzen für CASPOS Kassensysteme.
-              Sofortige Aktivierung und automatische Bereitstellung für Ihre Kunden.
-            </motion.p>
-          </div>
-
-          {/* Hero CTAs */}
-          <motion.div
-            variants={itemVariants}
-            className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full max-w-md pt-4"
-          >
-            <Link href="/order" className="w-full sm:w-auto">
-              <Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base font-bold transition-all duration-300 hover:scale-[1.02] bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-[0_0_25px_rgba(37,99,235,0.25)] hover:shadow-[0_0_35px_rgba(37,99,235,0.45)] border-none rounded-xl">
-                Lizenz bestellen <ArrowRight className="ml-2 h-4 w-4" />
-              </Button>
-            </Link>
-            <Link href="https://caspos.de/kontakt/" target="_blank" rel="noopener noreferrer" className="w-full sm:w-auto">
-              <Button size="lg" variant="outline" className="w-full sm:w-auto h-12 px-8 text-base font-semibold transition-all duration-300 hover:bg-white/5 border-slate-800 hover:border-slate-700 text-slate-300 hover:text-white rounded-xl backdrop-blur-sm">
-                Fragen? Kontakt
-              </Button>
-            </Link>
-          </motion.div>
-
-          {/* Quick Access Actions Bar */}
-          {mounted && user && (
-            <motion.div
-              variants={itemVariants}
-              className="w-full max-w-3xl pt-12"
-            >
-              <div className="relative p-6 rounded-2xl border border-slate-900/80 bg-slate-950/40 backdrop-blur-xl shadow-2xl">
-                {/* Card border glow decoration */}
-                <div className="absolute inset-0 rounded-2xl border border-blue-500/10 pointer-events-none" />
-                <p className="text-xs font-bold uppercase tracking-widest text-slate-500 mb-5 text-left sm:text-center px-2">
-                  Mein Dashboard Schnellzugriff
-                </p>
-
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  <Link href="/my-customers" className="group">
-                    <motion.div
-                      whileHover={{ y: -4, scale: 1.01 }}
-                      whileTap={{ scale: 0.99 }}
-                      className="flex items-center justify-between p-4 rounded-xl border border-slate-900 bg-slate-950/60 hover:bg-slate-900/30 hover:border-blue-500/20 transition-all duration-300"
-                    >
-                      <div className="flex items-center gap-4">
-                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors">
-                          <Users className="w-5.5 h-5.5" />
-                        </div>
-                        <div className="text-left">
-                          <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Kundenliste</span>
-                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Kunden & Lizenzen verwalten</span>
-                        </div>
-                      </div>
-                      <ArrowUpRight className="w-4.5 h-4.5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
-                    </motion.div>
-                  </Link>
-
-                  <Link href="/my-orders" className="group">
-                    <motion.div
-                      whileHover={{ y: -4, scale: 1.01 }}
-                      whileTap={{ scale: 0.99 }}
-                      className="flex items-center justify-between p-4 rounded-xl border border-slate-900 bg-slate-950/60 hover:bg-slate-900/30 hover:border-blue-500/20 transition-all duration-300"
-                    >
-                      <div className="flex items-center gap-4">
-                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors">
-                          <ClipboardList className="w-5.5 h-5.5" />
-                        </div>
-                        <div className="text-left">
-                          <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Bestellungen</span>
-                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Aufträge & Status einsehen</span>
-                        </div>
-                      </div>
-                      <ArrowUpRight className="w-4.5 h-4.5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
-                    </motion.div>
-                  </Link>
-                </div>
-              </div>
-            </motion.div>
-          )}
-
-        </motion.div>
-      </section>
-
-      {/* Grid of modules */}
-      <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/50 relative">
-        <div className="container max-w-6xl mx-auto px-4 relative">
-
-          <div className="absolute top-1/4 right-0 w-[400px] h-[400px] bg-indigo-600/5 blur-[120px] rounded-full -z-10 pointer-events-none" />
-
-          <div className="text-center space-y-3 mb-16">
-            <div className="inline-flex items-center gap-1.5 text-xs font-bold text-indigo-400 uppercase tracking-widest bg-indigo-500/10 border border-indigo-500/20 px-3 py-1 rounded-full">
-              <Sparkles className="w-3 h-3" /> System-Module
-            </div>
-            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400">
-              Verfügbare System-Module
-            </h2>
-            <p className="text-slate-400 max-w-[600px] mx-auto text-sm sm:text-base">
-              Wählen Sie das passende Modul für das Kassensystem Ihres Kunden.
-            </p>
-          </div>
-
-          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {/* Card 1 */}
-            <motion.div
-              whileHover={{ y: -6 }}
-              className="group relative flex flex-col p-6 rounded-2xl border border-slate-900 bg-slate-950/70 hover:bg-slate-900/40 hover:border-slate-800/80 transition-all duration-300 shadow-xl overflow-hidden"
-            >
-              {/* Highlight line hover effect */}
-              <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-              <div className="space-y-4 relative">
-                <div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400 group-hover:bg-blue-500/20 group-hover:scale-110 transition-all duration-300">
-                  <ShoppingCart className="h-6 w-6" />
-                </div>
-                <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Handel & ERP</h3>
-                <p className="text-slate-400 text-sm leading-relaxed">
-                  Erweiterungen für Handelskassen, Bestandsführung und vollwertige Warenwirtschaftssysteme (ERP).
-                </p>
-              </div>
-            </motion.div>
-
-            {/* Card 2 */}
-            <motion.div
-              whileHover={{ y: -6 }}
-              className="group relative flex flex-col p-6 rounded-2xl border border-slate-900 bg-slate-950/70 hover:bg-slate-900/40 hover:border-slate-800/80 transition-all duration-300 shadow-xl overflow-hidden"
-            >
-              {/* Highlight line hover effect */}
-              <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-              <div className="space-y-4 relative">
-                <div className="inline-flex p-3 bg-indigo-500/10 rounded-xl text-indigo-400 group-hover:bg-indigo-500/20 group-hover:scale-110 transition-all duration-300">
-                  <Utensils className="h-6 w-6" />
-                </div>
-                <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Gastronomie</h3>
-                <p className="text-slate-400 text-sm leading-relaxed">
-                  Lizenzen für mobiles Bestellen (Orderman), digitale Küchen-Monitore und interaktive Abhol-Boards.
-                </p>
-              </div>
-            </motion.div>
-
-            {/* Card 3 */}
-            <motion.div
-              whileHover={{ y: -6 }}
-              className="group relative flex flex-col p-6 rounded-2xl border border-slate-900 bg-slate-950/70 hover:bg-slate-900/40 hover:border-slate-800/80 transition-all duration-300 shadow-xl overflow-hidden"
-            >
-              {/* Highlight line hover effect */}
-              <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-purple-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-              <div className="space-y-4 relative">
-                <div className="inline-flex p-3 bg-purple-500/10 rounded-xl text-purple-400 group-hover:bg-purple-500/20 group-hover:scale-110 transition-all duration-300">
-                  <Layers className="h-6 w-6" />
-                </div>
-                <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Hybride Systeme</h3>
-                <p className="text-slate-400 text-sm leading-relaxed">
-                  Das Beste aus beiden Welten. Nahtlose Kombination von Handel- und Gastronomie-Funktionalitäten.
-                </p>
-              </div>
-            </motion.div>
-          </div>
-        </div>
-      </section>
-
-      {/* Stepper info */}
-      <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/30">
-        <div className="container max-w-5xl mx-auto px-4">
-          <div className="text-center space-y-3 mb-16">
-            <div className="inline-flex items-center gap-1.5 text-xs font-bold text-blue-400 uppercase tracking-widest bg-blue-500/10 border border-blue-500/20 px-3 py-1 rounded-full">
-              <Activity className="w-3 h-3" /> Ablauf
-            </div>
-            <h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-center bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-200 to-slate-400">
-              Wie funktioniert die Bereitstellung?
-            </h2>
-          </div>
-
-          <div className="relative">
-            {/* Connection line for Desktop */}
-            <div className="hidden md:block absolute top-[28px] left-[15%] right-[15%] h-[1px] bg-gradient-to-r from-blue-500/10 via-blue-500/30 to-blue-500/10 z-0" />
-
-            <div className="grid gap-8 md:grid-cols-3 relative z-10">
-              {/* Step 1 */}
-              <div className="flex flex-col items-center text-center space-y-4 p-4 group">
-                <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-900 border border-slate-800 text-blue-400 font-black text-lg shadow-lg group-hover:border-blue-500/40 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] transition-all duration-300">
-                  1
-                </div>
-                <h4 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Kunde wählen</h4>
-                <p className="text-sm text-slate-400 leading-relaxed max-w-[250px]">
-                  Gewünschten Kunden auswählen, der die Lizenz erhalten soll.
-                </p>
-              </div>
-
-              {/* Step 2 */}
-              <div className="flex flex-col items-center text-center space-y-4 p-4 group">
-                <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-900 border border-slate-800 text-blue-400 font-black text-lg shadow-lg group-hover:border-blue-500/40 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] transition-all duration-300">
-                  2
-                </div>
-                <h4 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Lizenz wählen</h4>
-                <p className="text-sm text-slate-400 leading-relaxed max-w-[250px]">
-                  Gewünschte Lizenzen für den Kunden auswählen und den Bestellung abschließen.
-                </p>
-              </div>
-
-              {/* Step 3 */}
-              <div className="flex flex-col items-center text-center space-y-4 p-4 group">
-                <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-900 border border-slate-800 text-blue-400 font-black text-lg shadow-lg group-hover:border-blue-500/40 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] transition-all duration-300">
-                  3
-                </div>
-                <h4 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Live gehen</h4>
-                <p className="text-sm text-slate-400 leading-relaxed max-w-[250px]">
-                  Nach dem Erhalt der Lizenz Live gehen.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Core values / Features list */}
-      <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/50">
-        <div className="container max-w-5xl mx-auto px-4">
-          <div className="grid gap-8 md:grid-cols-2 items-center">
-            <div className="space-y-6">
-              <div className="inline-flex items-center gap-1.5 text-xs font-bold text-blue-400 uppercase tracking-widest bg-blue-500/10 border border-blue-500/20 px-3 py-1 rounded-full">
-                <ShieldCheck className="w-3.5 h-3.5" /> Sicherheit & Stabilität
-              </div>
-              <h3 className="text-3xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400">
-                Verlässliche Plattform für Lizenz-Aktivierungen
-              </h3>
-              <p className="text-slate-400 text-sm sm:text-base leading-relaxed">
-                Unsere Kassenlösungen sind GoBD-konform und offline-fähig. Über den Lizenz-Management-Server werden alle Lizenzen und Module verschlüsselt übertragen und sind innerhalb weniger Millisekunden auf der Kasse aktiv.
-              </p>
-            </div>
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
-                <CheckCircle2 className="w-5 h-5 text-blue-500" />
-                <h5 className="font-bold text-sm text-slate-200">GoBD Konformität</h5>
-                <p className="text-xs text-slate-400">Konform nach allen aktuellen steuerrechtlichen Anforderungen.</p>
-              </div>
-              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
-                <CheckCircle2 className="w-5 h-5 text-blue-500" />
-                <h5 className="font-bold text-sm text-slate-200">Same-Day-Bearbeitung</h5>
-                <p className="text-xs text-slate-400">Bearbeitung und Erstellung Ihrer Lizenzen noch am selben Werktag.</p>
-              </div>
-              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
-                <CheckCircle2 className="w-5 h-5 text-blue-500" />
-                <h5 className="font-bold text-sm text-slate-200">Verschlüsselte Keys</h5>
-                <p className="text-xs text-slate-400">Sichere Lizenz-Authentifizierung direkt auf der Kasse.</p>
-              </div>
-              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
-                <CheckCircle2 className="w-5 h-5 text-blue-500" />
-                <h5 className="font-bold text-sm text-slate-200">Partner Support</h5>
-                <p className="text-xs text-slate-400">Schnelle Hilfe und kompetente Ansprechpartner für Händler.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="w-full border-t border-slate-900 bg-slate-950 py-8 px-4 md:px-6 relative z-10">
-        <div className="container max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
-          <p className="text-xs text-slate-500">© 2026 CASPOS GmbH. Alle Rechte vorbehalten.</p>
-          <nav className="flex gap-6">
-            <Link className="text-xs text-slate-500 hover:text-slate-300 transition-colors" href="/impressum">Impressum</Link>
-            <Link className="text-xs text-slate-500 hover:text-slate-300 transition-colors" href="/datenschutz">Datenschutz</Link>
-          </nav>
-        </div>
-      </footer>
-    </div>
-  )
+  return <HomeClient initialUser={user} />
 }
\ No newline at end of file
diff --git a/shop/components/HomeClient.tsx b/shop/components/HomeClient.tsx
new file mode 100644
index 0000000..bc17039
--- /dev/null
+++ b/shop/components/HomeClient.tsx
@@ -0,0 +1,402 @@
+"use client"
+
+import { useState, useEffect } from 'react'
+import { createClient } from '@/lib/supabase/client'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { type User } from '@supabase/supabase-js'
+import {
+  ArrowRight,
+  CheckCircle2,
+  ShoppingCart,
+  Utensils,
+  Layers,
+  Users,
+  ClipboardList,
+  Zap,
+  ArrowUpRight,
+  ShieldCheck,
+  Sparkles,
+  Activity
+} from 'lucide-react'
+
+interface HomeClientProps {
+  initialUser: User | null
+}
+
+export function HomeClient({ initialUser }: HomeClientProps) {
+  const [user, setUser] = useState<User | null>(initialUser)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    const supabase = createClient()
+
+    // Listen to client-side auth state changes to stay in sync
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+      setUser(session?.user ?? null)
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [])
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15
+      }
+    }
+  }
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        type: "spring" as const,
+        stiffness: 100,
+        damping: 15
+      }
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 overflow-hidden relative selection:bg-blue-500/30 selection:text-blue-200">
+      
+      {/* Background Decorative Animated Blobs */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-[600px] pointer-events-none -z-10 overflow-hidden">
+        <motion.div
+          animate={{
+            scale: [1, 1.15, 0.95, 1],
+            rotate: [0, 90, 180, 270, 360],
+            x: [0, 40, -30, 0],
+            y: [0, -20, 50, 0]
+          }}
+          transition={{
+            duration: 20,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+          className="absolute -top-[10%] left-[10%] w-[350px] sm:w-[500px] h-[350px] sm:h-[500px] bg-blue-600/15 blur-[120px] sm:blur-[160px] rounded-full"
+        />
+        <motion.div
+          animate={{
+            scale: [1, 0.9, 1.1, 1],
+            rotate: [0, -90, -180, -270, -360],
+            x: [0, -30, 40, 0],
+            y: [0, 50, -30, 0]
+          }}
+          transition={{
+            duration: 25,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+          className="absolute -top-[5%] right-[15%] w-[300px] sm:w-[450px] h-[300px] sm:h-[450px] bg-purple-600/10 blur-[100px] sm:blur-[140px] rounded-full"
+        />
+      </div>
+
+      {/* Hero Section */}
+      <section className="w-full pt-16 pb-12 md:pt-28 md:pb-20 px-4 relative flex flex-col items-center">
+        <motion.div 
+          initial="hidden"
+          animate="visible"
+          variants={containerVariants}
+          className="container max-w-6xl mx-auto flex flex-col items-center text-center space-y-8"
+        >
+          {/* Badge */}
+          <motion.div 
+            variants={itemVariants}
+            className="inline-flex items-center gap-2 rounded-full bg-blue-500/10 border border-blue-500/20 px-4 py-1.5 text-xs sm:text-sm text-blue-400 font-semibold tracking-wide backdrop-blur-md shadow-[0_0_15px_rgba(59,130,246,0.1)]"
+          >
+            <motion.div
+              animate={{ opacity: [0.5, 1, 0.5] }}
+              transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
+            >
+              <Zap className="w-3.5 h-3.5 text-blue-400 fill-blue-400/20" />
+            </motion.div>
+            CASPOS Lizenz-Order-Portal
+          </motion.div>
+
+          {/* Headline */}
+          <div className="space-y-4 max-w-4xl">
+            <motion.h1 
+              variants={itemVariants}
+              className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl/tight bg-clip-text text-transparent bg-gradient-to-b from-white via-slate-100 to-slate-400"
+            >
+              POS Software <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-500 font-black">Lizenzen & Module</span>
+            </motion.h1>
+            <motion.p 
+              variants={itemVariants}
+              className="mx-auto max-w-[750px] text-slate-400 text-base sm:text-lg md:text-xl font-normal leading-relaxed"
+            >
+              Erwerben und verwalten Sie digitale Lizenzen für CASPOS Kassensysteme.
+              Sofortige Aktivierung und automatische Bereitstellung für Ihre Kunden.
+            </motion.p>
+          </div>
+
+          {/* Hero CTAs */}
+          <motion.div 
+            variants={itemVariants}
+            className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full max-w-md pt-4"
+          >
+            <Link href="/order" className="w-full sm:w-auto">
+              <Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base font-bold transition-all duration-300 hover:scale-[1.02] bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-[0_0_25px_rgba(37,99,235,0.25)] hover:shadow-[0_0_35px_rgba(37,99,235,0.45)] border-none rounded-xl">
+                Lizenz bestellen <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </Link>
+            <Link href="https://caspos.de/kontakt/" target="_blank" rel="noopener noreferrer" className="w-full sm:w-auto">
+              <Button size="lg" variant="outline" className="w-full sm:w-auto h-12 px-8 text-base font-semibold transition-all duration-300 hover:bg-white/5 border-slate-800 hover:border-slate-700 text-slate-300 hover:text-white rounded-xl backdrop-blur-sm">
+                Fragen? Kontakt
+              </Button>
+            </Link>
+          </motion.div>
+
+          {/* Quick Access Actions Bar */}
+          {mounted && user && (
+            <motion.div
+              variants={itemVariants}
+              className="w-full max-w-3xl pt-12"
+            >
+              <div className="relative p-6 rounded-2xl border border-slate-900/80 bg-slate-950/40 backdrop-blur-xl shadow-2xl">
+                {/* Card border glow decoration */}
+                <div className="absolute inset-0 rounded-2xl border border-blue-500/10 pointer-events-none" />
+                <p className="text-xs font-bold uppercase tracking-widest text-slate-500 mb-5 text-left sm:text-center px-2">
+                  Mein Dashboard Schnellzugriff
+                </p>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <Link href="/my-customers" className="group">
+                    <motion.div
+                      whileHover={{ y: -4, scale: 1.01 }}
+                      whileTap={{ scale: 0.99 }}
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-900 bg-slate-950/60 hover:bg-slate-900/30 hover:border-blue-500/20 transition-all duration-300"
+                    >
+                      <div className="flex items-center gap-4">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors">
+                          <Users className="w-5.5 h-5.5" />
+                        </div>
+                        <div className="text-left">
+                          <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Kundenliste</span>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Kunden & Lizenzen verwalten</span>
+                        </div>
+                      </div>
+                      <ArrowUpRight className="w-4.5 h-4.5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
+                    </motion.div>
+                  </Link>
+
+                  <Link href="/my-orders" className="group">
+                    <motion.div
+                      whileHover={{ y: -4, scale: 1.01 }}
+                      whileTap={{ scale: 0.99 }}
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-900 bg-slate-950/60 hover:bg-slate-900/30 hover:border-blue-500/20 transition-all duration-300"
+                    >
+                      <div className="flex items-center gap-4">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors">
+                          <ClipboardList className="w-5.5 h-5.5" />
+                        </div>
+                        <div className="text-left">
+                          <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Bestellungen</span>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Aufträge & Status einsehen</span>
+                        </div>
+                      </div>
+                      <ArrowUpRight className="w-4.5 h-4.5 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
+                    </motion.div>
+                  </Link>
+                </div>
+              </div>
+            </motion.div>
+          )}
+
+        </motion.div>
+      </section>
+
+      {/* Grid of modules */}
+      <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/50 relative">
+        <div className="container max-w-6xl mx-auto px-4 relative">
+          
+          <div className="absolute top-1/4 right-0 w-[400px] h-[400px] bg-indigo-600/5 blur-[120px] rounded-full -z-10 pointer-events-none" />
+
+          <div className="text-center space-y-3 mb-16">
+            <div className="inline-flex items-center gap-1.5 text-xs font-bold text-indigo-400 uppercase tracking-widest bg-indigo-500/10 border border-indigo-500/20 px-3 py-1 rounded-full">
+              <Sparkles className="w-3 h-3" /> System-Module
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400">
+              Verfügbare CASPOS-Kassen
+            </h2>
+            <p className="text-slate-400 max-w-[600px] mx-auto text-sm sm:text-base">
+              Wählen Sie die passende Kasse für Ihren Kunden aus.
+            </p>
+          </div>
+
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {/* Card 1 */}
+            <motion.div 
+              whileHover={{ y: -6 }}
+              className="group relative flex flex-col p-6 rounded-2xl border border-slate-900 bg-slate-950/70 hover:bg-slate-900/40 hover:border-slate-800/80 transition-all duration-300 shadow-xl overflow-hidden"
+            >
+              {/* Highlight line hover effect */}
+              <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="space-y-4 relative">
+                <div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400 group-hover:bg-blue-500/20 group-hover:scale-110 transition-all duration-300">
+                  <ShoppingCart className="h-6 w-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Handel & ERP</h3>
+                <p className="text-slate-400 text-sm leading-relaxed">
+                  Erweiterungen für Handelskassen, Bestandsführung und vollwertige Warenwirtschaftssysteme (ERP).
+                </p>
+              </div>
+            </motion.div>
+
+            {/* Card 2 */}
+            <motion.div 
+              whileHover={{ y: -6 }}
+              className="group relative flex flex-col p-6 rounded-2xl border border-slate-900 bg-slate-950/70 hover:bg-slate-900/40 hover:border-slate-800/80 transition-all duration-300 shadow-xl overflow-hidden"
+            >
+              {/* Highlight line hover effect */}
+              <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="space-y-4 relative">
+                <div className="inline-flex p-3 bg-indigo-500/10 rounded-xl text-indigo-400 group-hover:bg-indigo-500/20 group-hover:scale-110 transition-all duration-300">
+                  <Utensils className="h-6 w-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Gastronomie</h3>
+                <p className="text-slate-400 text-sm leading-relaxed">
+                  Lizenzen für mobiles Bestellen (Orderman), digitale Küchen-Monitore und interaktive Abhol-Boards.
+                </p>
+              </div>
+            </motion.div>
+
+            {/* Card 3 */}
+            <motion.div 
+              whileHover={{ y: -6 }}
+              className="group relative flex flex-col p-6 rounded-2xl border border-slate-900 bg-slate-950/70 hover:bg-slate-900/40 hover:border-slate-800/80 transition-all duration-300 shadow-xl overflow-hidden"
+            >
+              {/* Highlight line hover effect */}
+              <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-purple-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="space-y-4 relative">
+                <div className="inline-flex p-3 bg-purple-500/10 rounded-xl text-purple-400 group-hover:bg-purple-500/20 group-hover:scale-110 transition-all duration-300">
+                  <Layers className="h-6 w-6" />
+                </div>
+                <h3 className="text-xl font-bold text-slate-200 group-hover:text-white transition-colors">Hybride Systeme</h3>
+                <p className="text-slate-400 text-sm leading-relaxed">
+                  Das Beste aus beiden Welten. Nahtlose Kombination von Handel- und Gastronomie-Funktionalitäten.
+                </p>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Stepper info */}
+      <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/30">
+        <div className="container max-w-5xl mx-auto px-4">
+          <div className="text-center space-y-3 mb-16">
+            <div className="inline-flex items-center gap-1.5 text-xs font-bold text-blue-400 uppercase tracking-widest bg-blue-500/10 border border-blue-500/20 px-3 py-1 rounded-full">
+              <Activity className="w-3 h-3" /> Ablauf
+            </div>
+            <h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-center bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-200 to-slate-400">
+              Wie funktioniert die Bereitstellung?
+            </h2>
+          </div>
+          
+          <div className="relative">
+            {/* Connection line for Desktop */}
+            <div className="hidden md:block absolute top-[28px] left-[15%] right-[15%] h-[1px] bg-gradient-to-r from-blue-500/10 via-blue-500/30 to-blue-500/10 z-0" />
+            
+            <div className="grid gap-8 md:grid-cols-3 relative z-10">
+              {/* Step 1 */}
+              <div className="flex flex-col items-center text-center space-y-4 p-4 group">
+                <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-900 border border-slate-800 text-blue-400 font-black text-lg shadow-lg group-hover:border-blue-500/40 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] transition-all duration-300">
+                  1
+                </div>
+                <h4 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Kunde wählen</h4>
+                <p className="text-sm text-slate-400 leading-relaxed max-w-[250px]">
+                  Gewünschten Kunden auswählen, der die Lizenz erhalten soll.
+                </p>
+              </div>
+
+              {/* Step 2 */}
+              <div className="flex flex-col items-center text-center space-y-4 p-4 group">
+                <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-900 border border-slate-800 text-blue-400 font-black text-lg shadow-lg group-hover:border-blue-500/40 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] transition-all duration-300">
+                  2
+                </div>
+                <h4 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Lizenz wählen</h4>
+                <p className="text-sm text-slate-400 leading-relaxed max-w-[250px]">
+                  Gewünschte Lizenzen für den Kunden auswählen und den Bestellung abschließen.
+                </p>
+              </div>
+
+              {/* Step 3 */}
+              <div className="flex flex-col items-center text-center space-y-4 p-4 group">
+                <div className="flex items-center justify-center w-14 h-14 rounded-2xl bg-slate-900 border border-slate-800 text-blue-400 font-black text-lg shadow-lg group-hover:border-blue-500/40 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] transition-all duration-300">
+                  3
+                </div>
+                <h4 className="text-lg font-bold text-slate-200 group-hover:text-white transition-colors">Live gehen</h4>
+                <p className="text-sm text-slate-400 leading-relaxed max-w-[250px]">
+                  Nach dem Erhalt der Lizenz Live gehen.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Core values / Features list */}
+      <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/50">
+        <div className="container max-w-5xl mx-auto px-4">
+          <div className="grid gap-8 md:grid-cols-2 items-center">
+            <div className="space-y-6">
+              <div className="inline-flex items-center gap-1.5 text-xs font-bold text-blue-400 uppercase tracking-widest bg-blue-500/10 border border-blue-500/20 px-3 py-1 rounded-full">
+                <ShieldCheck className="w-3.5 h-3.5" /> Sicherheit & Stabilität
+              </div>
+              <h3 className="text-3xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400">
+                Verlässliche Plattform für Lizenz-Aktivierungen
+              </h3>
+              <p className="text-slate-400 text-sm sm:text-base leading-relaxed">
+                Unsere Kassenlösungen sind GoBD-konform und offline-fähig. Über den Lizenz-Management-Server werden alle Lizenzen und Module verschlüsselt übertragen und sind innerhalb weniger Millisekunden auf der Kasse aktiv.
+              </p>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
+                <CheckCircle2 className="w-5 h-5 text-blue-500" />
+                <h5 className="font-bold text-sm text-slate-200">GoBD Konformität</h5>
+                <p className="text-xs text-slate-400">Konform nach allen aktuellen steuerrechtlichen Anforderungen.</p>
+              </div>
+              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
+                <CheckCircle2 className="w-5 h-5 text-blue-500" />
+                <h5 className="font-bold text-sm text-slate-200">Same-Day-Bearbeitung</h5>
+                <p className="text-xs text-slate-400">Bearbeitung und Erstellung Ihrer Lizenzen noch am selben Werktag.</p>
+              </div>
+              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
+                <CheckCircle2 className="w-5 h-5 text-blue-500" />
+                <h5 className="font-bold text-sm text-slate-200">Verschlüsselte Keys</h5>
+                <p className="text-xs text-slate-400">Sichere Lizenz-Authentifizierung direkt auf der Kasse.</p>
+              </div>
+              <div className="p-5 rounded-xl border border-slate-900 bg-slate-950/70 space-y-2">
+                <CheckCircle2 className="w-5 h-5 text-blue-500" />
+                <h5 className="font-bold text-sm text-slate-200">Partner Support</h5>
+                <p className="text-xs text-slate-400">Schnelle Hilfe und kompetente Ansprechpartner für Händler.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="w-full border-t border-slate-900 bg-slate-950 py-8 px-4 md:px-6 relative z-10">
+        <div className="container max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-xs text-slate-500">© 2026 CASPOS GmbH. Alle Rechte vorbehalten.</p>
+          <nav className="flex gap-6">
+            <Link className="text-xs text-slate-500 hover:text-slate-300 transition-colors" href="/impressum">Impressum</Link>
+            <Link className="text-xs text-slate-500 hover:text-slate-300 transition-colors" href="/datenschutz">Datenschutz</Link>
+          </nav>
+        </div>
+      </footer>
+    </div>
+  )
+}