feat: add custom navbar with inline supabase clients and custom dropdown

shop/app/login/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function LoginPage() {
+  redirect("/auth/login");
+}

shop/app/page.tsx

@@ -1,66 +1,46 @@
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
-import { Rocket, Shield, Cpu, ArrowRight } from 'lucide-react'
+import { Shield, Cpu, ArrowRight, Key, Zap, CheckCircle2 } from 'lucide-react'
+import { Navbar } from '@/components/Navbar'
 
 export default function Home() {
   return (
-    <div className="flex flex-col min-h-screen bg-[#020617] text-white">
-      <div className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-400 font-medium tracking-wide z-50">
+    <div className="flex flex-col min-h-screen bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white">
+      {/* Demo Banner */}
+      <div className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50">
         ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
       </div>
-      <header className="px-4 lg:px-6 h-16 flex items-center border-b border-white/5 backdrop-blur-md sticky top-0 z-50">
-        <Link className="flex items-center justify-center gap-2" href="#">
-          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-            <Rocket className="h-5 w-5 text-white" />
-          </div>
-          <span className="font-bold text-xl tracking-tighter">CASPOS Store</span>
-          <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
-            Demo
-          </span>
-        </Link>
-        <nav className="ml-auto flex gap-4 sm:gap-6 items-center">
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/order">
-            Bestellen
-          </Link>
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/my-customers">
-            Meine Kunden
-          </Link>
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/my-orders">
-            Meine Bestellungen
-          </Link>
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/admin/products">
-            Admin
-          </Link>
-          <Button variant="outline" className="border-white/10 hover:bg-white/5">
-            Login
-          </Button>
-        </nav>
-      </header>
+
+      <Navbar />
+
       <main className="flex-1">
+        {/* Hero Section: Zielgerichtet auf Lizenzen */}
         <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 px-4 overflow-hidden relative">
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-primary/20 blur-[120px] rounded-full -z-10 opacity-30" />
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full -z-10 opacity-30" />
           <div className="container mx-auto">
             <div className="flex flex-col items-center space-y-4 text-center">
               <div className="space-y-2">
-                <div className="inline-block rounded-full bg-amber-500/10 px-3 py-1 text-sm text-amber-400 font-medium border border-amber-500/20 mb-4">
-                  ⚠️ Demo-Umgebung für Testbestellungen
+                <div className="inline-block rounded-full bg-blue-500/10 px-3 py-1 text-sm text-blue-600 dark:text-blue-400 font-medium border border-blue-500/20 mb-4">
+                  CASPOS Lizenz-Management-Server
                 </div>
                 <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-7xl/none">
-                  CASPOS   <span className="text-gradient">Software-Bestellung</span>
+                  POS Software <span className="text-blue-600 dark:text-blue-500">Lizenzen & Add-ons</span>
                 </h1>
-                <p className="mx-auto max-w-[700px] text-slate-400 md:text-xl dark:text-zinc-400 mt-6">
-                  Modulare Lösungen, einfaches Deployment und ein intuitives Interface für Ihre Business-Anforderungen.
+                <p className="mx-auto max-w-[700px] text-slate-600 dark:text-slate-400 md:text-xl mt-6">
+                  Erwerben und verwalten Sie digitale Lizenzen für CASPOS Kassensysteme. Sofortige Aktivierung und automatische Bereitstellung für Ihre Kunden.
                 </p>
               </div>
+
+              {/* High-Contrast Buttons (Light/Dark Ready) */}
               <div className="space-x-4 mt-8">
                 <Link href="/order">
-                  <Button size="lg" className="h-12 px-8 text-lg font-semibold shadow-lg shadow-primary/20 transition-all hover:scale-105">
-                    Jetzt bestellen <ArrowRight className="ml-2 h-5 w-5" />
+                  <Button size="lg" className="h-12 px-8 text-lg font-bold transition-all hover:scale-105 bg-slate-900 text-white hover:bg-slate-800 border border-slate-200 dark:bg-white dark:text-black dark:hover:bg-slate-200 dark:border-none">
+                    Lizenz bestellen <ArrowRight className="ml-2 h-5 w-5" />
                   </Button>
                 </Link>
                 <Link href="/contact">
-                  <Button size="lg" variant="outline" className="h-12 px-8 text-lg border-white/10 hover:bg-white/5">
-                    Contact Us
+                  <Button size="lg" variant="outline" className="h-12 px-8 text-lg font-semibold bg-transparent border-slate-400 text-slate-900 hover:bg-slate-100 dark:border-white/40 dark:text-white dark:hover:bg-white/10">
+                    Fragen? Kontaktieren Sie uns
                   </Button>
                 </Link>
               </div>
@@ -68,38 +48,69 @@ export default function Home() {
           </div>
         </section>
 
-        <section className="w-full py-12 md:py-24 lg:py-32 border-t border-white/5 bg-white/[0.02]">
+        {/* Feature Grid: Aufgeteilt nach echten POS-Modulen */}
+        <section className="w-full py-12 md:py-24 lg:py-32 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/[0.02]">
           <div className="container mx-auto px-4 md:px-6">
             <div className="grid gap-12 lg:grid-cols-3">
-              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl glass-dark">
-                <div className="p-3 bg-primary/10 rounded-xl">
-                  <Cpu className="h-8 w-8 text-primary" />
+
+              {/* Modul 1 */}
+              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-slate-900/50 shadow-sm">
+                <div className="p-3 bg-blue-600/10 rounded-xl">
+                  <Cpu className="h-8 w-8 text-blue-600 dark:text-blue-500" />
                 </div>
-                <h3 className="text-xl font-bold">Handel</h3>
-                <p className="text-slate-400">Von der einfachen Handelskasse bis hin zur vollwertigen ERP. Wir können es.</p>
+                <h3 className="text-xl font-bold">Handel & ERP</h3>
+                <p className="text-slate-600 dark:text-slate-400">Erweiterungen für Handelskassen, Bestandsführung und vollwertige Warenwirtschaftssysteme (ERP).</p>
               </div>
-              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl glass-dark">
-                <div className="p-3 bg-primary/10 rounded-xl">
-                  <Shield className="h-8 w-8 text-primary" />
+
+              {/* Modul 2 */}
+              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-slate-900/50 shadow-sm">
+                <div className="p-3 bg-blue-600/10 rounded-xl">
+                  <Zap className="h-8 w-8 text-blue-600 dark:text-blue-500" />
                 </div>
-                <h3 className="text-xl font-bold">Gastro</h3>
-                <p className="text-slate-400">Egal ob mobiles Ordern, einer Küchen-Anzeige oder einen Pick-Up-Bord. Wir können es.</p>
+                <h3 className="text-xl font-bold">Gastronomie</h3>
+                <p className="text-slate-600 dark:text-slate-400">Lizenzen für mobiles Bestellen (Orderman), digitale Küchen-Monitore und interaktive Abhol-Boards.</p>
               </div>
-              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl glass-dark">
-                <div className="p-3 bg-primary/10 rounded-xl">
-                  <Rocket className="h-8 w-8 text-primary" />
+
+              {/* Modul 3 */}
+              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-slate-900/50 shadow-sm">
+                <div className="p-3 bg-blue-600/10 rounded-xl">
+                  <Shield className="h-8 w-8 text-blue-600 dark:text-blue-500" />
                 </div>
-                <h3 className="text-xl font-bold">Hybrid Systeme</h3>
-                <p className="text-slate-400">Sie benötigen eine Lösung aus beiden Welten? Sprechen Sie uns an.</p>
+                <h3 className="text-xl font-bold">Hybride Systeme</h3>
+                <p className="text-slate-600 dark:text-slate-400">Das beste aus beiden Welten. Handel mit Gastronomie und umgekehrt. </p>
+              </div>
+
+            </div>
+          </div>
+        </section>
+
+        {/* Kurze Info-Sektion für Partner / Händler */}
+        <section className="w-full py-12 md:py-24 border-t border-slate-200 dark:border-white/5">
+          <div className="container mx-auto px-4 max-w-4xl text-center">
+            <h2 className="text-2xl font-bold tracking-tight sm:text-3xl mb-6">Wie funktioniert die Bereitstellung?</h2>
+            <div className="grid gap-6 sm:grid-cols-3 text-left">
+              <div className="flex gap-2 items-start">
+                <CheckCircle2 className="h-5 w-5 text-blue-600 dark:text-blue-500 shrink-0 mt-0.5" />
+                <p className="text-sm text-slate-600 dark:text-slate-400"><strong>1. Lizenz wählen:</strong> Gewünschtes POS-Modul im Shop selektieren.</p>
+              </div>
+              <div className="flex gap-2 items-start">
+                <CheckCircle2 className="h-5 w-5 text-blue-600 dark:text-blue-500 shrink-0 mt-0.5" />
+                <p className="text-sm text-slate-600 dark:text-slate-400"><strong>2. Kunde zuweisen:</strong> Lizenz direkt einem Kunden-Account zuordnen.</p>
+              </div>
+              <div className="flex gap-2 items-start">
+                <CheckCircle2 className="h-5 w-5 text-blue-600 dark:text-blue-500 shrink-0 mt-0.5" />
+                <p className="text-sm text-slate-600 dark:text-slate-400"><strong>3. Live gehen:</strong> Lizenz-Key (`.key`) wird sofort serverseitig aktiviert.</p>
               </div>
             </div>
           </div>
         </section>
       </main>
-      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-white/5 bg-[#020617]">
+
+      {/* Footer */}
+      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-[#020617]">
         <p className="text-xs text-slate-500">© 2026 CASPOS GmbH. Alle Rechte vorbehalten.</p>
         <nav className="sm:ml-auto flex gap-4 sm:gap-6">
-          <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="#">Impressum</Link>
+          <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="https://caspos.de/impressum/" target="_blank" rel="noopener noreferrer">Impressum</Link>
           <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="#">Datenschutz</Link>
         </nav>
       </footer>

shop/components/Navbar.tsx

@@ -0,0 +1,49 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+import { NavbarClient } from "@/components/NavbarClient";
+
+export async function Navbar() {
+  const cookieStore = await cookies();
+
+  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseAnonKey) {
+    // Falls keine Env-Vars da sind, leeren User an Client übergeben
+    return <NavbarClient user={null} />;
+  }
+
+  const supabase = createServerClient(
+    supabaseUrl,
+    supabaseAnonKey,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options),
+            );
+          } catch {
+            // Kann in Server Components ignoriert werden, da dort keine Cookies gesetzt werden können
+          }
+        },
+      },
+      cookieOptions: {
+        name: "webshop-auth-token",
+      },
+    },
+  );
+
+  let user = null;
+  try {
+    const { data } = await supabase.auth.getUser();
+    user = data.user;
+  } catch (error) {
+    console.error("Fehler beim Abrufen des Users in Navbar:", error);
+  }
+
+  return <NavbarClient user={user} />;
+}

shop/components/NavbarClient.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { createBrowserClient } from "@supabase/ssr";
+import { type User } from "@supabase/supabase-js";
+import { Rocket, Menu, X, User as UserIcon, LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface NavbarClientProps {
+  user: User | null;
+}
+
+export function NavbarClient({ user }: NavbarClientProps) {
+  const router = useRouter();
+  const [currentUser, setCurrentUser] = useState<User | null>(user);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  // Supabase URL & Anon Key auslesen (für Browser-Client)
+  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  // Supabase URL Auflösung inline
+  let resolvedUrl = supabaseUrl;
+  if (resolvedUrl && typeof window !== "undefined") {
+    try {
+      const parsed = new URL(resolvedUrl);
+      if (parsed.hostname === "supabase-kong" || parsed.hostname === "kong") {
+        parsed.hostname = window.location.hostname;
+        resolvedUrl = parsed.toString().replace(/\/$/, "");
+      }
+    } catch {
+      resolvedUrl = resolvedUrl
+        .replace("//supabase-kong", `//${window.location.hostname}`)
+        .replace("//kong", `//${window.location.hostname}`);
+    }
+  }
+
+  // Browser Client inline erstellen
+  const supabase = createBrowserClient(
+    resolvedUrl!,
+    supabaseAnonKey!,
+    {
+      cookieOptions: {
+        name: "webshop-auth-token",
+      },
+    }
+  );
+
+  // Auf Auth-Statusänderungen reagieren
+  useEffect(() => {
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((event, session) => {
+      setCurrentUser(session?.user ?? null);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [supabase]);
+
+  const handleSignOut = async () => {
+    await supabase.auth.signOut();
+    setCurrentUser(null);
+    setIsMobileMenuOpen(false);
+    router.refresh();
+    router.push("/");
+  };
+
+  return (
+    <>
+      <header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b border-white/5 backdrop-blur-md sticky top-0 z-50 bg-[#020617]/85">
+        <Link className="flex items-center justify-center gap-2 group" href="/">
+          <span className="font-bold text-xl tracking-tighter text-white">CASPOS Store</span>
+          <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
+            Demo
+          </span>
+        </Link>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex gap-6 items-center">
+          <Link className="text-sm font-medium text-slate-300 hover:text-primary transition-colors" href="/order">
+            Bestellen
+          </Link>
+          <Link
+            className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
+            href="https://wiki.caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Wiki
+          </Link>
+          <Link
+            className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
+            href="https://support.caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Support
+          </Link>
+
+          <div className="h-4 w-px bg-white/10 mx-2" />
+
+          {currentUser ? (
+            <div className="relative">
+              <Button
+                variant="outline"
+                onClick={() => setOpen(!open)}
+                className="border-white/10 hover:bg-white/5 gap-2 text-white"
+              >
+                <UserIcon className="w-4 h-4 text-primary" />
+                <span className="max-w-[120px] truncate">{currentUser.email}</span>
+              </Button>
+              {open && (
+                <div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10">
+                  <div className="px-3 py-1.5 text-[11px] truncate border-b text-slate-400 border-slate-100 dark:border-white/5 mb-1">
+                    {currentUser.email}
+                  </div>
+                  <Link
+                    href="/my-customers"
+                    onClick={() => setOpen(false)}
+                    className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                  >
+                    Account Kunden
+                  </Link>
+                  <hr className="my-1 border-slate-100 dark:border-white/5" />
+                  <button
+                    onClick={handleSignOut}
+                    className="w-full text-left px-3 py-2 text-sm font-bold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg"
+                  >
+                    Abmelden
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <Button asChild className="bg-primary hover:bg-primary/95 text-white dark:text-blue-500">
+              <Link href="/login">Anmelden</Link>
+            </Button>
+          )}
+        </nav>
+
+        {/* Mobile Hamburger Trigger */}
+        <button
+          className="md:hidden p-2 text-slate-300 hover:text-white focus:outline-none"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+        >
+          {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+        </button>
+      </header>
+
+      {/* Mobile Menu Panel */}
+      {isMobileMenuOpen && (
+        <div className="md:hidden fixed inset-x-0 top-16 bg-[#020617] border-b border-white/5 z-40 py-4 px-6 flex flex-col gap-4 animate-in slide-in-from-top duration-200">
+          <Link
+            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+            href="/order"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            Bestellen
+          </Link>
+          <Link
+            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+            href="https://caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            Wiki
+          </Link>
+          <Link
+            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+            href="https://caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            Support
+          </Link>
+
+          {currentUser && (
+            <>
+              <div className="h-px bg-white/5 my-1" />
+              <div className="text-xs text-slate-500 px-1">Mein Account ({currentUser.email})</div>
+              <Link
+                className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+                href="/my-customers"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                Account Kunden
+              </Link>
+            </>
+          )}
+
+          <div className="h-px bg-white/5 my-1" />
+
+          {currentUser ? (
+            <Button
+              variant="destructive"
+              className="w-full flex items-center justify-center gap-2"
+              onClick={handleSignOut}
+            >
+              <LogOut className="w-4 h-4" /> Abmelden
+            </Button>
+          ) : (
+            <Button asChild className="w-full bg-primary hover:bg-primary/95 text-white dark:text-blue-500" onClick={() => setIsMobileMenuOpen(false)}>
+              <Link href="/login">Anmelden</Link>
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+}