Fix auth form errors and redirects: Add React keys/useEffects for error rendering and scroll, Inertia::location in controllers for SPA navigation, extend RegistrationTest and add E2E. Update docs (changes/2025-10-02-registration-fixes.md, prp/13-backend-authentication.md). Add new UI components (accordion, carousel, progress, table, tabs), marketing/legal pages (Blog, Kontakt, Datenschutz, etc.), fonts, user migration (remove_name), views/css/package updates, seeders/factories.

resources/js/components/marketing/MarketingFooter.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from '@inertiajs/react';
+
+const MarketingFooter: React.FC = () => {
+  return (
+    <footer className="bg-gray-800 text-white py-8 px-4">
+      <div className="container mx-auto text-center">
+        <p>&copy; 2025 Fotospiel GmbH. Alle Rechte vorbehalten.</p>
+        <div className="mt-4 space-x-4">
+          <Link href="/impressum" className="hover:text-[#FFB6C1]">
+            Impressum
+          </Link>
+          <Link href="/datenschutz" className="hover:text-[#FFB6C1]">
+            Datenschutz
+          </Link>
+          <Link href="/kontakt" className="hover:text-[#FFB6C1]">
+            Kontakt
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default MarketingFooter;

resources/js/components/marketing/MarketingHeader.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Link } from '@inertiajs/react';
+import { usePage } from '@inertiajs/react';
+
+const MarketingHeader: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { url } = usePage();
+
+  const occasions = [
+    { href: '/de/occasions/weddings', label: 'Hochzeiten' },
+    { href: '/de/occasions/birthdays', label: 'Geburtstage' },
+    { href: '/de/occasions/corporate-events', label: 'Firmenevents' },
+    { href: '/de/occasions/family-celebrations', label: 'Familienfeiern' },
+  ];
+
+  return (
+    <header className="bg-white shadow-md sticky top-0 z-50">
+      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <Link href="/" className="text-2xl font-bold text-gray-900">
+            Die Fotospiel.App
+          </Link>
+          <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        </div>
+        <nav className="hidden md:flex space-x-6 items-center">
+          <Link href="/#how-it-works" className="text-gray-600 hover:text-gray-900">
+            So funktioniert es
+          </Link>
+          <Link href="/#features" className="text-gray-600 hover:text-gray-900">
+            Features
+          </Link>
+          <div className="relative">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="text-gray-600 hover:text-gray-900"
+            >
+              Anlässe
+            </button>
+            {isOpen && (
+              <div className="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg z-10">
+                {occasions.map((occasion) => (
+                  <Link
+                    key={occasion.href}
+                    href={occasion.href}
+                    className="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    {occasion.label}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+          <Link href="/blog" className="text-gray-600 hover:text-gray-900">
+            Blog
+          </Link>
+          <Link href="/packages" className="text-gray-600 hover:text-gray-900">
+            Packages
+          </Link>
+          <Link href="/kontakt" className="text-gray-600 hover:text-gray-900">
+            Kontakt
+          </Link>
+          <Link
+            href="/packages"
+            className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition"
+          >
+            Packages entdecken
+          </Link>
+        </nav>
+        <button className="md:hidden text-gray-600">☰</button>
+      </div>
+    </header>
+  );
+};
+
+export default MarketingHeader;

resources/js/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

resources/js/components/ui/carousel.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+import Autoplay from "embla-carousel-autoplay"
+import useEmblaCarousel from "embla-carousel-react"
+
+interface CarouselApi {
+  slideNodes(): HTMLElement[]
+  on(event: string, listener: (...args: any[]) => void): void
+  scrollPrev(): void
+  scrollNext(): void
+  reInit(): void
+}
+
+const CarouselContext = React.createContext<CarouselApi | null>(null)
+
+interface CarouselProps {
+  opts?: {
+    align?: "start" | "center" | "end"
+    loop?: boolean
+  }
+  plugins?: any[]
+  setApi?: (api: CarouselApi) => void
+  [key: string]: any
+}
+
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  ({ opts, plugins = [Autoplay()], setApi, className, children, ...props }, ref) => {
+    const [api, setApiInternal] = React.useState<CarouselApi | null>(null)
+    const [current, setCurrent] = React.useState(0)
+    const [count, setCount] = React.useState(0)
+
+    const [emblaRef] = useEmblaCarousel(opts, plugins)
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      setCount(api.slideNodes().length)
+      api.on("reInit", setCount)
+      api.on("slideChanged", ({ slide }: { slide: number }) => setCurrent(slide))
+      setApi?.(api)
+    }, [api, setApi])
+
+    return (
+      <CarouselContext.Provider value={api}>
+        <div
+          ref={ref}
+          className={cn(
+            "relative w-full",
+            className
+          )}
+          {...props}
+        >
+          <div
+            className="overflow-hidden"
+            ref={emblaRef}
+          >
+            <div className="flex">{children}</div>
+          </div>
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+interface CarouselContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
+  ({ children, className }, ref) => (
+    <div ref={ref} className={cn("flex", className)}>
+      {children}
+    </div>
+  )
+)
+CarouselContent.displayName = "CarouselContent"
+
+interface CarouselItemProps {
+  children: React.ReactNode
+  className?: string
+}
+
+const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
+  ({ children, className }, ref) => (
+    <div
+      ref={ref}
+      className={cn("min-w-0 shrink-0 grow-0 basis-full pl-4 md:pl-6", className)}
+    >
+      {children}
+    </div>
+  )
+)
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+  <Button
+    ref={ref}
+    variant="outline"
+    size="icon"
+    className={cn(
+      "absolute -left-1 top-1/2 -translate-y-1/2 rounded-full h-8 w-8 bg-background/80 backdrop-blur-sm hover:bg-background/90 disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <ArrowLeft className="h-4 w-4" />
+    <span className="sr-only">Previous slide</span>
+  </Button>
+))
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+  <Button
+    ref={ref}
+    variant="outline"
+    size="icon"
+    className={cn(
+      "absolute -right-1 top-1/2 -translate-y-1/2 rounded-full h-8 w-8 bg-background/80 backdrop-blur-sm hover:bg-background/90 disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <ArrowRight className="h-4 w-4" />
+    <span className="sr-only">Next slide</span>
+  </Button>
+))
+CarouselNext.displayName = "CarouselNext"
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

resources/js/components/ui/progress.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

resources/js/components/ui/table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

resources/js/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

resources/js/layouts/MarketingLayout.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Link } from '@inertiajs/react';
+import { usePage } from '@inertiajs/react';
+
+interface MarketingLayoutProps {
+  children: React.ReactNode;
+  title?: string;
+}
+
+const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
+  const { props } = usePage();
+  const { auth } = props as any;
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      {/* Header */}
+      <header className="bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center py-4">
+            {/* Logo */}
+            <Link href="/marketing" className="text-2xl font-bold font-display text-pink-500">
+              FotoSpiel
+            </Link>
+            
+            {/* Navigation */}
+            <nav className="hidden md:flex space-x-8">
+              <Link href="/marketing" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
+                Home
+              </Link>
+              <Link href="/marketing/packages" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
+                Pakete
+              </Link>
+              <Link href="/marketing/blog" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
+                Blog
+              </Link>
+              <Link href="/marketing/occasions" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
+                Anlässe
+              </Link>
+              {auth.user ? (
+                <Link href="/dashboard" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
+                  Dashboard
+                </Link>
+              ) : (
+                <Link href="/marketing/register" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
+                  Registrieren
+                </Link>
+              )}
+            </nav>
+            
+            {/* Mobile Menu Button – TODO: Implementiere Dropdown */}
+            <div className="md:hidden">
+              <button className="text-gray-700 hover:text-pink-500">☰</button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-grow">
+        {title && (
+          <title>{title}</title>
+        )}
+        {children}
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-white border-t border-gray-200 mt-auto">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="col-span-1 md:col-span-2">
+              <Link href="/marketing" className="text-2xl font-bold font-display text-pink-500">
+                FotoSpiel
+              </Link>
+              <p className="text-gray-600 font-sans-marketing mt-2">
+                Deine Plattform für Event-Fotos.
+              </p>
+            </div>
+            
+            <div>
+              <h3 className="font-semibold font-display text-gray-900 mb-4">Rechtliches</h3>
+              <ul className="space-y-2 text-sm text-gray-600 font-sans-marketing">
+                <li><Link href="/legal/impressum" className="hover:text-pink-500">Impressum</Link></li>
+                <li><Link href="/legal/datenschutz" className="hover:text-pink-500">Datenschutz</Link></li>
+                <li><Link href="/legal/agb" className="hover:text-pink-500">AGB</Link></li>
+                <li><Link href="/legal/kontakt" className="hover:text-pink-500">Kontakt</Link></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="font-semibold font-display text-gray-900 mb-4">Social</h3>
+              <ul className="space-y-2 text-sm text-gray-600 font-sans-marketing">
+                <li><a href="#" className="hover:text-pink-500">Instagram</a></li>
+                <li><a href="#" className="hover:text-pink-500">Facebook</a></li>
+                <li><a href="#" className="hover:text-pink-500">YouTube</a></li>
+              </ul>
+            </div>
+          </div>
+          
+          <div className="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-500 font-sans-marketing">
+            &copy; 2025 FotoSpiel. Alle Rechte vorbehalten.
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default MarketingLayout;

resources/js/layouts/marketing/MarketingLayout.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { Head } from '@inertiajs/react';
+import MarketingHeader from '@/components/marketing/MarketingHeader';
+import MarketingFooter from '@/components/marketing/MarketingFooter';
+
+interface MarketingLayoutProps {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+}
+
+const MarketingLayout: React.FC<MarketingLayoutProps> = ({ 
+  children, 
+  title = 'Fotospiel - Event-Fotos einfach und sicher mit QR-Codes', 
+  description = 'Sammle Gastfotos für Events mit QR-Codes und unserer PWA-Plattform. Für Hochzeiten, Firmenevents und mehr. Kostenloser Einstieg.' 
+}) => {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <style>{`
+          @keyframes aurora {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+          }
+          .bg-aurora {
+            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+            background-size: 400% 400%;
+            animation: aurora 15s ease infinite;
+          }
+        `}</style>
+      </Head>
+      <div className="bg-gray-50 text-gray-900 min-h-screen flex flex-col font-sans antialiased">
+        <MarketingHeader />
+        <main className="flex-grow">
+          {children}
+        </main>
+        <MarketingFooter />
+      </div>
+    </>
+  );
+};
+
+export default MarketingLayout;

resources/js/pages/auth/login.tsx

@@ -25,14 +25,28 @@ export default function Login({ status, canResetPassword }: LoginProps) {
 
     const submit = (e: React.FormEvent) => {
         e.preventDefault();
-        post('/login');
+        post('/login', {
+            preserveState: true,
+            onSuccess: () => {
+                console.log('Login successful');
+            },
+            onError: (errors: Record<string, string>) => {
+                console.log('Login errors:', errors);
+            },
+        });
     };
 
+    React.useEffect(() => {
+        if (Object.keys(errors).length > 0) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, [errors]);
+
     return (
         <AuthLayout title="Log in to your account" description="Enter your email and password below to log in">
             <Head title="Log in" />
 
-            <form onSubmit={submit} className="flex flex-col gap-6">
+            <form key={`login-form-${Object.keys(errors).length}`} onSubmit={submit} className="flex flex-col gap-6">
                 <div className="grid gap-6">
                     <div className="grid gap-2">
                         <Label htmlFor="email">Email address</Label>
@@ -48,7 +62,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
                             value={data.email}
                             onChange={(e) => setData('email', e.target.value)}
                         />
-                        <InputError message={errors.email} />
+                        <InputError key={`error-email`} message={errors.email} />
                     </div>
 
                     <div className="grid gap-2">
@@ -71,7 +85,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
                             value={data.password}
                             onChange={(e) => setData('password', e.target.value)}
                         />
-                        <InputError message={errors.password} />
+                        <InputError key={`error-password`} message={errors.password} />
                     </div>
 
                     <div className="flex items-center space-x-3">
@@ -100,6 +114,14 @@ export default function Login({ status, canResetPassword }: LoginProps) {
             </form>
 
             {status && <div className="mb-4 text-center text-sm font-medium text-green-600">{status}</div>}
+
+            {Object.keys(errors).length > 0 && (
+                <div key={`general-errors-${Object.keys(errors).join('-')}`} className="p-4 bg-red-50 border border-red-200 rounded-md mb-4">
+                    <p className="text-sm text-red-800">
+                        {Object.values(errors).join(' ')}
+                    </p>
+                </div>
+            )}
         </AuthLayout>
     );
 }

resources/js/pages/auth/register.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useForm, router } from '@inertiajs/react';
 import { Head } from '@inertiajs/react';
-import { LoaderCircle } from 'lucide-react';
+import { LoaderCircle, User, Mail, Phone, Lock, Home, MapPin } from 'lucide-react';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 
 interface RegisterProps {
     package?: {
@@ -10,11 +11,15 @@ interface RegisterProps {
         description: string;
         price: number;
     } | null;
+    privacyHtml: string;
 }
 
-export default function Register({ package: initialPackage }: RegisterProps) {
-    const { data, setData, post, processing, errors } = useForm({
-        name: '',
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+
+export default function Register({ package: initialPackage, privacyHtml }: RegisterProps) {
+    const [privacyOpen, setPrivacyOpen] = useState(false);
+
+    const { data, setData, post, processing, errors, setError } = useForm({
         username: '',
         email: '',
         password: '',
@@ -27,225 +32,295 @@ export default function Register({ package: initialPackage }: RegisterProps) {
         package_id: initialPackage?.id || null,
     });
 
+    React.useEffect(() => {
+        if (Object.keys(errors).length > 0) {
+            console.log('Validation errors received:', errors);
+        }
+        if (!processing) {
+            console.log('Registration processing completed');
+        }
+    }, [errors, processing, data]);
+
+    React.useEffect(() => {
+        if (Object.keys(errors).length > 0) {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, [errors]);
+
+    React.useEffect(() => {
+        if (Object.keys(errors).length > 0) {
+            // Force re-render or scroll to errors
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, [errors]);
+
     const submit = (e: React.FormEvent) => {
         e.preventDefault();
-        router.post('/register');
+        console.log('Submitting registration form with data:', data);
+        router.post('/register', data, {
+            preserveState: true,
+            forceFormData: true,
+            onSuccess: () => {
+                console.log('Registration successful');
+            },
+            onError: (errors) => {
+                console.log('Registration errors:', errors);
+                setError(errors);
+            },
+        });
+        console.log('POST to /register initiated');
     };
 
     return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-            <Head title="Registrieren" />
-            <div className="max-w-md w-full space-y-8">
-                <div>
-                    <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-                        Registrieren
-                    </h2>
-                    {initialPackage && (
-                        <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
-                            <h3 className="text-lg font-semibold text-blue-900 mb-2">{initialPackage.name}</h3>
-                            <p className="text-blue-800 mb-2">{initialPackage.description}</p>
-                            <p className="text-sm text-blue-700">
-                                {initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}
+        <MarketingLayout title="Registrieren">
+            <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+                <div className="max-w-4xl w-full space-y-8">
+                    <div className="bg-white rounded-lg shadow-md p-8">
+                        <div>
+                            <h2 className="mt-6 text-center text-3xl font-bold text-gray-900 font-display">
+                                Willkommen bei Fotospiel – Erstellen Sie Ihren Account
+                            </h2>
+                            <p className="mt-4 text-center text-gray-600 font-sans-marketing">
+                                Registrierung ermöglicht Zugriff auf Events, Galerien und personalisierte Features.
+                            </p>
+                            {initialPackage && (
+                                <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
+                                    <h3 className="text-lg font-semibold text-blue-900 mb-2">{initialPackage.name}</h3>
+                                    <p className="text-blue-800 mb-2">{initialPackage.description}</p>
+                                    <p className="text-sm text-blue-700">
+                                        {initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+                        <form key={`form-${processing ? 'submitting' : 'idle'}-${Object.keys(errors).length}`} onSubmit={submit} className="mt-8 space-y-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="md:col-span-1">
+                                <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
+                                    Vorname *
+                                </label>
+                                <div className="relative">
+                                    <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="first_name"
+                                        name="first_name"
+                                        type="text"
+                                        required
+                                        value={data.first_name}
+                                        onChange={(e) => setData('first_name', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.first_name ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="Vorname"
+                                    />
+                                </div>
+                                {errors.first_name && <p key={`error-first_name`} className="text-sm text-red-600 mt-1">{errors.first_name}</p>}
+                            </div>
+
+                            <div className="md:col-span-1">
+                                <label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
+                                    Nachname *
+                                </label>
+                                <div className="relative">
+                                    <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="last_name"
+                                        name="last_name"
+                                        type="text"
+                                        required
+                                        value={data.last_name}
+                                        onChange={(e) => setData('last_name', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.last_name ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="Nachname"
+                                    />
+                                </div>
+                                {errors.last_name && <p key={`error-last_name`} className="text-sm text-red-600 mt-1">{errors.last_name}</p>}
+                            </div>
+
+                            <div className="md:col-span-2">
+                                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                                    E-Mail-Adresse *
+                                </label>
+                                <div className="relative">
+                                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="email"
+                                        name="email"
+                                        type="email"
+                                        required
+                                        value={data.email}
+                                        onChange={(e) => setData('email', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="email@example.com"
+                                    />
+                                </div>
+                                {errors.email && <p key={`error-email`} className="text-sm text-red-600 mt-1">{errors.email}</p>}
+                            </div>
+
+                            <div className="md:col-span-2">
+                                <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
+                                    Adresse *
+                                </label>
+                                <div className="relative">
+                                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="address"
+                                        name="address"
+                                        type="text"
+                                        required
+                                        value={data.address}
+                                        onChange={(e) => setData('address', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="Adresse"
+                                    />
+                                </div>
+                                {errors.address && <p key={`error-address`} className="text-sm text-red-600 mt-1">{errors.address}</p>}
+                            </div>
+
+                            <div className="md:col-span-1">
+                                <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
+                                    Telefon *
+                                </label>
+                                <div className="relative">
+                                    <Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="phone"
+                                        name="phone"
+                                        type="tel"
+                                        required
+                                        value={data.phone}
+                                        onChange={(e) => setData('phone', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.phone ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="Telefonnummer"
+                                    />
+                                </div>
+                                {errors.phone && <p key={`error-phone`} className="text-sm text-red-600 mt-1">{errors.phone}</p>}
+                            </div>
+
+                            <div className="md:col-span-1">
+                                <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+                                    Benutzername *
+                                </label>
+                                <div className="relative">
+                                    <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="username"
+                                        name="username"
+                                        type="text"
+                                        required
+                                        value={data.username}
+                                        onChange={(e) => setData('username', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="Benutzername"
+                                    />
+                                </div>
+                                {errors.username && <p key={`error-username`} className="text-sm text-red-600 mt-1">{errors.username}</p>}
+                            </div>
+
+                            <div className="md:col-span-1">
+                                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                                    Passwort *
+                                </label>
+                                <div className="relative">
+                                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="password"
+                                        name="password"
+                                        type="password"
+                                        required
+                                        value={data.password}
+                                        onChange={(e) => setData('password', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="Passwort"
+                                    />
+                                </div>
+                                {errors.password && <p key={`error-password`} className="text-sm text-red-600 mt-1">{errors.password}</p>}
+                            </div>
+
+                            <div className="md:col-span-1">
+                                <label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700 mb-1">
+                                    Passwort bestätigen *
+                                </label>
+                                <div className="relative">
+                                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+                                    <input
+                                        id="password_confirmation"
+                                        name="password_confirmation"
+                                        type="password"
+                                        required
+                                        value={data.password_confirmation}
+                                        onChange={(e) => setData('password_confirmation', e.target.value)}
+                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password_confirmation ? 'border-red-500' : 'border-gray-300'}`}
+                                        placeholder="Passwort bestätigen"
+                                    />
+                                </div>
+                                {errors.password_confirmation && <p className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
+                            </div>
+
+                            <div className="md:col-span-2 flex items-start">
+                                <input
+                                    id="privacy_consent"
+                                    name="privacy_consent"
+                                    type="checkbox"
+                                    required
+                                    checked={data.privacy_consent}
+                                    onChange={(e) => setData('privacy_consent', e.target.checked)}
+                                    className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
+                                />
+                                <label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
+                                    Ich stimme der{' '}
+                                    <button
+                                        type="button"
+                                        onClick={() => setPrivacyOpen(true)}
+                                        className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium"
+                                    >
+                                        Datenschutzerklärung
+                                    </button>{' '}
+                                    zu.
+                                </label>
+                                {errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
+                            </div>
+                        </div>
+                        
+                        {Object.keys(errors).length > 0 && (
+                            <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+                                <p className="text-sm text-red-800">
+                                    {Object.entries(errors).map(([key, value]) => (
+                                        <span key={key}>
+                                            {value}
+                                        </span>
+                                    ))}
+                                </p>
+                            </div>
+                        )}
+                        
+                        <button
+                            type="submit"
+                            disabled={processing}
+                            className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
+                        >
+                            {processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
+                            Account erstellen
+                        </button>
+
+                        <div className="text-center">
+                            <p className="text-sm text-gray-600">
+                                Bereits registriert?{' '}
+                                <a href="/login" className="font-medium text-[#FFB6C1] hover:text-[#FF69B4]">
+                                    Anmelden
+                                </a>
                             </p>
                         </div>
-                    )}
+                    </form>
                 </div>
-                <form onSubmit={submit} className="mt-8 space-y-6">
-                    <div className="space-y-4">
-                        <div>
-                            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-                                Name
-                            </label>
-                            <input
-                                id="name"
-                                name="name"
-                                type="text"
-                                required
-                                autoFocus
-                                value={data.name}
-                                onChange={(e) => setData('name', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Vollständiger Name"
-                            />
-                            {errors.name && <p className="mt-2 text-sm text-red-600">{errors.name}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="username" className="block text-sm font-medium text-gray-700">
-                                Benutzername
-                            </label>
-                            <input
-                                id="username"
-                                name="username"
-                                type="text"
-                                required
-                                value={data.username}
-                                onChange={(e) => setData('username', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Benutzername"
-                            />
-                            {errors.username && <p className="text-sm text-red-600">{errors.username}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-                                E-Mail-Adresse
-                            </label>
-                            <input
-                                id="email"
-                                name="email"
-                                type="email"
-                                required
-                                value={data.email}
-                                onChange={(e) => setData('email', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="email@example.com"
-                            />
-                            {errors.email && <p className="text-sm text-red-600">{errors.email}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="first_name" className="block text-sm font-medium text-gray-700">
-                                Vorname
-                            </label>
-                            <input
-                                id="first_name"
-                                name="first_name"
-                                type="text"
-                                required
-                                value={data.first_name}
-                                onChange={(e) => setData('first_name', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Vorname"
-                            />
-                            {errors.first_name && <p className="text-sm text-red-600">{errors.first_name}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="last_name" className="block text-sm font-medium text-gray-700">
-                                Nachname
-                            </label>
-                            <input
-                                id="last_name"
-                                name="last_name"
-                                type="text"
-                                required
-                                value={data.last_name}
-                                onChange={(e) => setData('last_name', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Nachname"
-                            />
-                            {errors.last_name && <p className="text-sm text-red-600">{errors.last_name}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-                                Adresse
-                            </label>
-                            <textarea
-                                id="address"
-                                name="address"
-                                required
-                                value={data.address}
-                                onChange={(e) => setData('address', e.target.value)}
-                                rows={3}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Adresse"
-                            />
-                            {errors.address && <p className="text-sm text-red-600">{errors.address}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
-                                Telefon
-                            </label>
-                            <input
-                                id="phone"
-                                name="phone"
-                                type="tel"
-                                required
-                                value={data.phone}
-                                onChange={(e) => setData('phone', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Telefonnummer"
-                            />
-                            {errors.phone && <p className="text-sm text-red-600">{errors.phone}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
-                                Passwort
-                            </label>
-                            <input
-                                id="password"
-                                name="password"
-                                type="password"
-                                required
-                                value={data.password}
-                                onChange={(e) => setData('password', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Passwort"
-                            />
-                            {errors.password && <p className="text-sm text-red-600">{errors.password}</p>}
-                        </div>
-
-                        <div>
-                            <label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700">
-                                Passwort bestätigen
-                            </label>
-                            <input
-                                id="password_confirmation"
-                                name="password_confirmation"
-                                type="password"
-                                required
-                                value={data.password_confirmation}
-                                onChange={(e) => setData('password_confirmation', e.target.value)}
-                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                                placeholder="Passwort bestätigen"
-                            />
-                            {errors.password_confirmation && <p className="text-sm text-red-600">{errors.password_confirmation}</p>}
-                        </div>
-
-                        <div className="flex items-start">
-                            <input
-                                id="privacy_consent"
-                                name="privacy_consent"
-                                type="checkbox"
-                                required
-                                checked={data.privacy_consent}
-                                onChange={(e) => setData('privacy_consent', e.target.checked)}
-                                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                            />
-                            <label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
-                                Ich stimme der{' '}
-                                <a href="/de/datenschutz" className="text-blue-600 hover:underline">
-                                    Datenschutzerklärung
-                                </a>{' '}
-                                zu.
-                            </label>
-                            {errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
-                        </div>
-                    </div>
-
-                    <button
-                        type="submit"
-                        disabled={processing}
-                        className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 disabled:opacity-50"
-                    >
-                        {processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
-                        Account erstellen
-                    </button>
-
-                    <div className="text-center">
-                        <p className="text-sm text-gray-600">
-                            Bereits registriert?{' '}
-                            <a href="/login" className="font-medium text-blue-600 hover:text-blue-500">
-                                Anmelden
-                            </a>
-                        </p>
-                    </div>
-                </form>
             </div>
+
+            <Dialog open={privacyOpen} onOpenChange={setPrivacyOpen}>
+                <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto p-0">
+                    <div className="p-6">
+                        <div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
+                    </div>
+                </DialogContent>
+            </Dialog>
         </div>
+        </MarketingLayout>
     );
 }

resources/js/pages/legal/Datenschutz.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Head, Link } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/MarketingLayout';
+import { usePage } from '@inertiajs/react';
+
+const Datenschutz: React.FC = () => {
+  const { props } = usePage();
+  const { __ } = props as any; // Für i18n
+
+  return (
+    <MarketingLayout title={__('legal.datenschutz_title')}>
+      <Head title={__('legal.datenschutz_title')} />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold mb-4 font-display">{__('legal.datenschutz')}</h1>
+        <p className="mb-4 font-sans-marketing">{__('legal.datenschutz_intro')}</p>
+        <p className="mb-4 font-sans-marketing">{__('legal.responsible')}</p>
+        <p className="mb-4 font-sans-marketing">{__('legal.data_collection')}</p>
+        <h2 className="text-xl font-semibold mb-2 font-display">{__('legal.payments')}</h2>
+        <p className="mb-4 font-sans-marketing">
+          {__('legal.payments_desc')} <a href="https://stripe.com/de/privacy" target="_blank" rel="noopener noreferrer">{__('legal.stripe_privacy')}</a> {__('legal.and')} <a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" target="_blank" rel="noopener noreferrer">{__('legal.paypal_privacy')}</a>.
+        </p>
+        <p className="mb-4 font-sans-marketing">{__('legal.data_retention')}</p>
+        <p className="mb-4 font-sans-marketing">
+          {__('legal.rights')} <Link href="/de/kontakt">{__('legal.contact')}</Link>.
+        </p>
+        <p className="mb-4 font-sans-marketing">{__('legal.cookies')}</p>
+        
+        <h2 className="text-xl font-semibold mb-2 font-display">{__('legal.personal_data')}</h2>
+        <p className="mb-4 font-sans-marketing">{__('legal.personal_data_desc')}</p>
+        
+        <h2 className="text-xl font-semibold mb-2 font-display">{__('legal.account_deletion')}</h2>
+        <p className="mb-4 font-sans-marketing">{__('legal.account_deletion_desc')}</p>
+        
+        <h2 className="text-xl font-semibold mb-2 font-display">{__('legal.data_security')}</h2>
+        <p className="mb-4 font-sans-marketing">{__('legal.data_security_desc')}</p>
+      </div>
+    </MarketingLayout>
+  );
+};
+
+export default Datenschutz;

resources/js/pages/legal/Impressum.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Head, Link } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/MarketingLayout';
+import { usePage } from '@inertiajs/react';
+
+const Impressum: React.FC = () => {
+  const { props } = usePage();
+  const { __ } = props as any; // Für i18n
+
+  return (
+    <MarketingLayout title={__('legal.impressum_title')}>
+      <Head title={__('legal.impressum_title')} />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-2xl font-bold mb-4 font-display">{__('legal.impressum')}</h1>
+        <p className="mb-4 font-sans-marketing">{__('legal.impressum_section')}</p>
+        <p className="mb-4 font-sans-marketing">
+          {__('legal.company')}<br />
+          {__('legal.address')}<br />
+          {__('legal.representative')}<br />
+          {__('legal.contact')}: <Link href={route('kontakt')}>{__('legal.contact')}</Link>
+        </p>
+        <p className="mb-4 font-sans-marketing">{__('legal.vat_id')}</p>
+        <h2 className="text-xl font-semibold mb-2 font-display">{__('legal.monetization')}</h2>
+        <p className="mb-4 font-sans-marketing">{__('legal.monetization_desc')}</p>
+        <p className="mb-4 font-sans-marketing">{__('legal.register_court')}</p>
+        <p className="mb-4 font-sans-marketing">{__('legal.commercial_register')}</p>
+      </div>
+    </MarketingLayout>
+  );
+};
+
+export default Impressum;

resources/js/pages/marketing/Blog.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Head, Link, usePage } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+
+interface Props {
+  posts: {
+    data: any[];
+    links: any[];
+    current_page: number;
+    last_page: number;
+  };
+}
+
+const Blog: React.FC<Props> = ({ posts }) => {
+  const { url } = usePage();
+
+  const renderPagination = () => {
+    if (!posts.links || posts.links.length <= 3) return null;
+    return (
+      <div className="mt-12 text-center">
+        <div className="flex justify-center space-x-2">
+          {posts.links.map((link, index) => (
+            <Link
+              key={index}
+              href={link.url || '#'}
+              className={`px-3 py-2 rounded ${
+                link.active
+                  ? 'bg-[#FFB6C1] text-white'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              }`}
+              dangerouslySetInnerHTML={{ __html: link.label }}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <MarketingLayout title="Blog - Fotospiel">
+      <Head title="Blog - Fotospiel" />
+      {/* Hero Section */}
+      <section className="bg-aurora-enhanced text-white py-20 px-4">
+        <div className="container mx-auto text-center">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Unser Blog</h1>
+          <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">Tipps, Tricks und Inspiration für perfekte Event-Fotos.</p>
+          <Link href="#posts" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 transition">
+            Zum Blog
+          </Link>
+        </div>
+      </section>
+
+      {/* Posts Section */}
+      <section id="posts" className="py-20 px-4 bg-white">
+        <div className="container mx-auto max-w-4xl">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Neueste Beiträge</h2>
+          {posts.data.length > 0 ? (
+            <>
+              <div className="grid md:grid-cols-2 gap-8">
+                {posts.data.map((post) => (
+                  <div key={post.id} className="bg-gray-50 p-6 rounded-lg">
+                    {post.featured_image && (
+                      <img
+                        src={post.featured_image}
+                        alt={post.title}
+                        className="w-full h-48 object-cover rounded mb-4"
+                      />
+                    )}
+                    <h3 className="text-xl font-semibold mb-2 font-sans-marketing">
+                      <Link href={`/blog/${post.slug}`} className="hover:text-[#FFB6C1]">
+                        {post.title}
+                      </Link>
+                    </h3>
+                    <p className="mb-4 text-gray-700 font-serif-custom">{post.excerpt}</p>
+                    <p className="text-sm text-gray-500 mb-4 font-sans-marketing">
+                      Veröffentlicht am {post.published_at}
+                    </p>
+                    <Link
+                      href={`/blog/${post.slug}`}
+                      className="text-[#FFB6C1] font-semibold font-sans-marketing hover:underline"
+                    >
+                      Weiterlesen
+                    </Link>
+                  </div>
+                ))}
+              </div>
+              {renderPagination()}
+            </>
+          ) : (
+            <p className="text-center text-gray-600 font-serif-custom">Keine Beiträge verfügbar.</p>
+          )}
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+};
+
+export default Blog;

resources/js/pages/marketing/BlogShow.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Head, Link, usePage } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+
+interface Props {
+  post: {
+    id: number;
+    title: string;
+    excerpt?: string;
+    content: string;
+    featured_image?: string;
+    published_at: string;
+    author?: { name: string };
+    slug: string;
+  };
+}
+
+const BlogShow: React.FC<Props> = ({ post }) => {
+  return (
+    <MarketingLayout title={`${post.title} - Fotospiel Blog`}>
+      <Head title={`${post.title} - Fotospiel Blog`} />
+      {/* Hero Section */}
+      <section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
+        <div className="container mx-auto text-center">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4">{post.title}</h1>
+          <p className="text-lg mb-8">
+            Von {post.author?.name || 'Dem Fotospiel Team'} | {new Date(post.published_at).toLocaleDateString('de-DE')}
+          </p>
+          {post.featured_image && (
+            <img
+              src={post.featured_image}
+              alt={post.title}
+              className="mx-auto rounded-lg shadow-lg max-w-2xl"
+            />
+          )}
+        </div>
+      </section>
+
+      {/* Post Content */}
+      <section className="py-20 px-4 bg-white">
+        <div className="container mx-auto max-w-4xl prose prose-lg max-w-none">
+          <div dangerouslySetInnerHTML={{ __html: post.content }} />
+        </div>
+      </section>
+
+      {/* Back to Blog */}
+      <section className="py-10 px-4 bg-gray-50">
+        <div className="container mx-auto text-center">
+          <Link
+            href="/blog"
+            className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition"
+          >
+            Zurück zum Blog
+          </Link>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+};
+
+export default BlogShow;

resources/js/pages/marketing/Home.tsx

@@ -0,0 +1,262 @@
+import React from 'react';
+import { Head, Link, useForm } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+import { Package } from '@/types'; // Annahme: Typ für Package
+
+interface Props {
+  packages: Package[];
+}
+
+const Home: React.FC<Props> = ({ packages }) => {
+  const { data, setData, post, processing, errors, reset } = useForm({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    post('/kontakt', {
+      onSuccess: () => reset(),
+    });
+  };
+
+  return (
+    <MarketingLayout title="Home - Fotospiel">
+      <Head title="Fotospiel - Event-Fotos einfach und sicher mit QR-Codes" />
+      {/* Hero Section */}
+      <section id="hero" className="bg-aurora-enhanced text-white py-20 px-4">
+        <div className="container mx-auto flex flex-col md:flex-row items-center gap-8 max-w-6xl">
+          <div className="md:w-1/2 text-center md:text-left">
+            <h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Fotospiel</h1>
+            <p className="text-xl md:text-2xl mb-8 font-sans-marketing">Sammle Gastfotos für Events mit QR-Codes. Unsere sichere PWA-Plattform für Gäste und Organisatoren – einfach, mobil und datenschutzkonform. Besser als Konkurrenz, geliebt von Tausenden.</p>
+            <Link href="/packages" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition font-sans-marketing">
+              Jetzt starten – Kostenlos
+            </Link>
+          </div>
+          <div className="md:w-1/2">
+            <img
+              src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop"
+              alt="Event-Fotos mit QR"
+              className="rounded-lg shadow-lg w-full"
+              style={{ filter: 'drop-shadow(0 10px 8px rgba(0,0,0,0.1))' }}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* How it works Section */}
+      <section id="how-it-works" className="py-20 px-4 bg-gray-50">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">So funktioniert es – in 4 einfachen Schritten mit QR-Codes</h2>
+          <div className="grid md:grid-cols-4 gap-8">
+            <div className="text-center">
+              <img
+                src="https://images.unsplash.com/photo-1558618047-3c8d6b4d3b0a?w=300&h=200&fit=crop"
+                alt="QR-Code generieren"
+                className="w-12 h-12 mx-auto mb-4 rounded-full"
+              />
+              <h3 className="font-semibold mb-2 font-sans-marketing">Event erstellen & QR generieren</h3>
+              <p className="text-gray-600 font-serif-custom">Als Organisator: Registrieren, Event anlegen, QR-Code erstellen und drucken/teilen.</p>
+            </div>
+            <div className="text-center">
+              <img
+                src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=300&h=200&fit=crop"
+                alt="Fotos hochladen"
+                className="w-12 h-12 mx-auto mb-4 rounded-full"
+              />
+              <h3 className="font-semibold mb-2 font-sans-marketing">Fotos hochladen via QR</h3>
+              <p className="text-gray-600 font-serif-custom">Gäste: QR scannen, PWA öffnen, Fotos via Kamera oder Galerie teilen.</p>
+            </div>
+            <div className="text-center">
+              <img
+                src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop"
+                alt="Freigaben & Likes"
+                className="w-12 h-12 mx-auto mb-4 rounded-full"
+              />
+              <h3 className="font-semibold mb-2 font-sans-marketing">Freigaben & Likes</h3>
+              <p className="text-gray-600 font-serif-custom">Emotions auswählen, Fotos liken, Galerie browsen – alles anonym.</p>
+            </div>
+            <div className="text-center">
+              <img
+                src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=300&h=200&fit=crop"
+                alt="Download & Teilen"
+                className="w-12 h-12 mx-auto mb-4 rounded-full"
+              />
+              <h3 className="font-semibold mb-2 font-sans-marketing">Download & Teilen</h3>
+              <p className="text-gray-600 font-serif-custom">Freigegebene Fotos herunterladen, Event abschließen und QR archivieren.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="py-20 px-4 bg-white">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel mit QR?</h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="text-center p-6">
+              <img
+                src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop"
+                alt="Sichere QR-Uploads"
+                className="w-16 h-16 mx-auto mb-4 rounded-full"
+              />
+              <h3 className="text-xl font-semibold mb-2 font-display">Sichere QR-Uploads</h3>
+              <p className="text-gray-600 font-serif-custom">GDPR-konform, anonyme Sessions, QR-basierte Zugriffe ohne PII-Speicherung.</p>
+            </div>
+            <div className="text-center p-6">
+              <img
+                src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=250&fit=crop"
+                alt="Mobile PWA & QR"
+                className="w-16 h-16 mx-auto mb-4 rounded-full"
+              />
+              <h3 className="text-xl font-semibold mb-2 font-display">Mobile PWA & QR</h3>
+              <p className="text-gray-600 font-serif-custom">Offline-fähig, App-ähnlich für iOS/Android, QR-Scan für schnellen Einstieg.</p>
+            </div>
+            <div className="text-center p-6">
+              <img
+                src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop"
+                alt="Schnell & Einfach"
+                className="w-16 h-16 mx-auto mb-4 rounded-full"
+              />
+              <h3 className="text-xl font-semibold mb-2 font-display">Schnell & Einfach mit QR</h3>
+              <p className="text-gray-600 font-serif-custom">Automatische Thumbnails, Echtzeit-Updates, QR-Sharing für Gäste.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Packages Teaser Section */}
+      <section id="pricing" className="py-20 px-4 bg-gray-50">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Packages</h2>
+          <p className="text-center text-lg text-gray-600 mb-8 font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
+          <div className="text-center">
+            <Link href="/packages" className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-[#FF69B4] transition font-sans-marketing">
+              Alle Packages ansehen
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Section */}
+      <section id="contact" className="py-20 px-4 bg-white">
+        <div className="container mx-auto max-w-2xl">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Kontakt</h2>
+          <form key={`home-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium mb-2 font-sans-marketing">Name</label>
+              <input
+                type="text"
+                id="name"
+                value={data.name}
+                onChange={(e) => setData('name', e.target.value)}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
+              />
+              {errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
+            </div>
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium mb-2 font-sans-marketing">E-Mail</label>
+              <input
+                type="email"
+                id="email"
+                value={data.email}
+                onChange={(e) => setData('email', e.target.value)}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
+              />
+              {errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
+            </div>
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium mb-2 font-sans-marketing">Nachricht</label>
+              <textarea
+                id="message"
+                value={data.message}
+                onChange={(e) => setData('message', e.target.value)}
+                rows={4}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
+              ></textarea>
+              {errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
+            </div>
+            <button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
+              {processing ? 'Sendet...' : 'Senden'}
+            </button>
+          </form>
+          {Object.keys(errors).length === 0 && data.message && !processing && (
+            <p className="mt-4 text-green-600 text-center font-serif-custom">Nachricht gesendet!</p>
+          )}
+
+          React.useEffect(() => {
+              if (Object.keys(errors).length > 0) {
+                  window.scrollTo({ top: 0, behavior: 'smooth' });
+              }
+          }, [errors]);
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Was unsere Kunden sagen</h2>
+          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+            <div className="bg-white p-6 rounded-lg">
+              <p className="mb-4 font-serif-custom">"Perfekt für unsere Hochzeit! QR-Sharing war super einfach."</p>
+              <p className="font-semibold font-sans-marketing">- Anna & Max</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg">
+              <p className="mb-4 font-serif-custom">"Großes Firmenevent – alle Fotos zentral via QR."</p>
+              <p className="font-semibold font-sans-marketing">- Team XYZ GmbH</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ Section */}
+      <section className="py-20 px-4 bg-white">
+        <div className="container mx-auto max-w-3xl">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
+          <div className="space-y-4">
+            <div className="bg-gray-50 p-4 rounded-lg">
+              <h3 className="font-semibold font-display">Ist es kostenlos?</h3>
+              <p className="font-serif-custom">Ja, der Basic-Tarif ist kostenlos für 1 Event mit QR. Upgrades ab 99€.</p>
+            </div>
+            <div className="bg-gray-50 p-4 rounded-lg">
+              <h3 className="font-semibold font-display">Datenschutz?</h3>
+              <p className="font-serif-custom">100% GDPR-konform. Keine personenbezogenen Daten gespeichert. QR-Zugriffe anonym. Siehe <Link href="/datenschutz" className="text-[#FFB6C1]">Datenschutzerklärung</Link>.</p>
+            </div>
+            <div className="bg-gray-50 p-4 rounded-lg">
+              <h3 className="font-semibold font-display">Wie funktioniert QR-Sharing?</h3>
+              <p className="font-serif-custom">Generiere QR im Dashboard, teile es – Gäste scannen, laden Fotos hoch in der PWA.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Packages Section (aus aktuellem TSX, angepasst) */}
+      <section className="py-20 px-4 bg-white">
+        <div className="container mx-auto max-w-4xl">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Pakete</h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            {packages.map((pkg) => (
+              <div key={pkg.id} className="bg-gray-50 p-6 rounded-lg text-center">
+                <h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
+                <p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
+                <p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-display">€{pkg.price}</p>
+                <Link
+                  href={`/marketing/buy/${pkg.id}`}
+                  className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition font-sans-marketing"
+                >
+                  Kaufen
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+};
+
+export default Home;

resources/js/pages/marketing/Kontakt.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Head, Link, useForm, usePage } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+
+const Kontakt: React.FC = () => {
+  const { data, setData, post, processing, errors, reset } = useForm({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const { flash } = usePage().props as any;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    post('/kontakt', {
+      onSuccess: () => reset(),
+    });
+  };
+
+  return (
+    <MarketingLayout title="Kontakt - Fotospiel">
+      <Head title="Kontakt - Fotospiel" />
+      <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-2xl mx-auto">
+          <h1 className="text-3xl font-bold text-center mb-8 font-display">Kontakt</h1>
+          <p className="text-center text-gray-600 mb-8 font-sans-marketing">Haben Sie Fragen? Schreiben Sie uns!</p>
+          <form key={`kontakt-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">Name</label>
+              <input 
+                type="text" 
+                id="name" 
+                value={data.name} 
+                onChange={(e) => setData('name', e.target.value)} 
+                required 
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]" 
+              />
+              {errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
+            </div>
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">E-Mail</label>
+              <input 
+                type="email" 
+                id="email" 
+                value={data.email} 
+                onChange={(e) => setData('email', e.target.value)} 
+                required 
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]" 
+              />
+              {errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
+            </div>
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">Nachricht</label>
+              <textarea 
+                id="message" 
+                value={data.message} 
+                onChange={(e) => setData('message', e.target.value)} 
+                rows={4} 
+                required 
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]" 
+              ></textarea>
+              {errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
+            </div>
+            <button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
+              {processing ? 'Sendet...' : 'Senden'}
+            </button>
+          </form>
+          {flash?.success && <p className="mt-4 text-green-600 text-center font-serif-custom">{flash.success}</p>}
+          {Object.keys(errors).length > 0 && (
+            <div key={`general-errors-${Object.keys(errors).join('-')}`} className="mt-4 p-4 bg-red-100 border border-red-400 rounded-md">
+              <ul className="list-disc list-inside">
+                {Object.values(errors).map((error, index) => (
+                  <li key={`error-${index}`} className="font-serif-custom">{error}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          React.useEffect(() => {
+              if (Object.keys(errors).length > 0) {
+                  window.scrollTo({ top: 0, behavior: 'smooth' });
+              }
+          }, [errors]);
+          <div className="mt-8 text-center">
+            <Link href="/" className="text-[#FFB6C1] hover:underline font-sans-marketing">Zurück zur Startseite</Link>
+          </div>
+        </div>
+      </div>
+    </MarketingLayout>
+  );
+};
+
+export default Kontakt;

resources/js/pages/marketing/Occasions.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Head, Link } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+
+interface Props {
+  type: string;
+}
+
+const Occasions: React.FC<Props> = ({ type }) => {
+  const occasions = {
+    weddings: {
+      title: 'Hochzeiten',
+      description: 'Erfangen Sie die magischen Momente Ihrer Hochzeit mit professionellen Fotos.',
+      features: ['Unbegrenzte Fotos', 'Sofort-Download', 'Privat-Event-Code', 'Emotionen tracken'],
+      image: '/images/wedding-lights-background.svg' // Platzhalter
+    },
+    birthdays: {
+      title: 'Geburtstage',
+      description: 'Feiern Sie Geburtstage unvergesslich mit unseren Event-Foto-Lösungen.',
+      features: ['Schnelle Einrichtung', 'Gäste teilen Fotos', 'Themen-Filter', 'Druck-Optionen'],
+      image: '/images/birthday-placeholder.jpg'
+    },
+    'corporate-events': {
+      title: 'Firmenevents',
+      description: 'Professionelle Fotos für Teamevents, Konferenzen und Unternehmensfeiern.',
+      features: ['Branding-Integration', 'Sichere Cloud-Speicher', 'Analytics & Reports', 'Schnelle Bearbeitung'],
+      image: '/images/corporate-placeholder.jpg'
+    },
+    'family-celebrations': {
+      title: 'Familienfeiern',
+      description: 'Erinnerungen an Taufen, Jubiläen und Familienzusammenkünfte festhalten.',
+      features: ['Persönliche Alben', 'Gemeinsame Zugriffe', 'Einfache Bedienung', 'Hohe Qualität'],
+      image: '/images/family-placeholder.jpg'
+    }
+  };
+
+  const occasion = occasions[type as keyof typeof occasions] || occasions.weddings;
+
+  return (
+    <MarketingLayout title={`${occasion.title} - Fotospiel`}>
+      <Head title={`${occasion.title} - Fotospiel`} />
+      {/* Hero Section */}
+      <section className="bg-aurora-enhanced text-white py-20 px-4">
+        <div className="container mx-auto text-center">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{occasion.title}</h1>
+          <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{occasion.description}</p>
+          {occasion.image && (
+            <img
+              src={occasion.image}
+              alt={occasion.title}
+              className="mx-auto rounded-lg shadow-lg max-w-4xl w-full"
+            />
+          )}
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 px-4 bg-white">
+        <div className="container mx-auto max-w-4xl">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel für {occasion.title}?</h2>
+          <div className="grid md:grid-cols-2 gap-8">
+            {occasion.features.map((feature, index) => (
+              <div key={index} className="bg-gray-50 p-6 rounded-lg flex items-center">
+                <div className="w-8 h-8 bg-[#FFB6C1] rounded-full flex items-center justify-center mr-4">
+                  <span className="text-white text-sm font-bold font-sans-marketing">✓</span>
+                </div>
+                <p className="text-gray-700 font-serif-custom">{feature}</p>
+              </div>
+            ))}
+          </div>
+          <div className="text-center mt-12">
+            <Link
+              href="/marketing/packages"
+              className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-[#FF69B4] transition"
+            >
+              Passendes Paket wählen
+            </Link>
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+};
+
+export default Occasions;

resources/js/pages/marketing/Packages.tsx

@@ -0,0 +1,553 @@
+import React, { useState } from 'react';
+import { Head, Link, usePage } from '@inertiajs/react';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+import { Button } from "@/components/ui/button"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+import { ArrowRight, ShoppingCart, Check, X, Users, Image, Calendar, Shield, Star } from 'lucide-react';
+
+interface Package {
+  id: number;
+  name: string;
+  description: string;
+  price: number;
+  events: number;
+  features: string[];
+  limits?: {
+    max_photos?: number;
+    max_guests?: number;
+    max_tenants?: number;
+    max_events?: number;
+    gallery_days?: number;
+  };
+  watermark_allowed?: boolean;
+  branding_allowed?: boolean;
+}
+
+interface PackagesProps {
+  endcustomerPackages: Package[];
+  resellerPackages: Package[];
+}
+
+const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackages }) => {
+  const [open, setOpen] = useState(false);
+  const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
+  const [currentStep, setCurrentStep] = useState('step1');
+  const { props } = usePage();
+  const { auth } = props as any;
+
+  const testimonials = [
+    { name: 'Anna M.', text: 'Das Starter-Paket war perfekt für unsere Hochzeit – einfach und günstig!', rating: 5 },
+    { name: 'Max B.', text: 'Pro-Paket mit Analytics hat uns geholfen, die besten Momente zu finden.', rating: 5 },
+    { name: 'Lisa K.', text: 'Als Reseller spare ich Zeit mit dem M-Paket – super Support!', rating: 5 },
+  ];
+
+  const allPackages = [...endcustomerPackages, ...resellerPackages];
+
+  const handleCardClick = (pkg: Package) => {
+    setSelectedPackage(pkg);
+    setCurrentStep('step1');
+    setOpen(true);
+  };
+
+  const nextStep = () => {
+    if (currentStep === 'step1') setCurrentStep('step3');
+  };
+
+  const getFeatureIcon = (feature: string) => {
+    switch (feature) {
+      case 'basic_uploads': return <Image className="w-4 h-4" />;
+      case 'unlimited_sharing': return <ArrowRight className="w-4 h-4" />;
+      case 'no_watermark': return <Shield className="w-4 h-4" />;
+      case 'custom_tasks': return <Check className="w-4 h-4" />;
+      case 'advanced_analytics': return <Star className="w-4 h-4" />;
+      case 'priority_support': return <Users className="w-4 h-4" />;
+      case 'reseller_dashboard': return <ShoppingCart className="w-4 h-4" />;
+      case 'custom_branding': return <Image className="w-4 h-4" />;
+      default: return <Check className="w-4 h-4" />;
+    }
+  };
+
+  return (
+    <MarketingLayout title="Packages">
+      {/* Hero Section */}
+      <section className="bg-aurora-enhanced text-white py-20 px-4">
+        <div className="container mx-auto text-center">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Unsere Packages</h1>
+          <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
+          <Link href="#endcustomer" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 transition">
+            Jetzt entdecken
+          </Link>
+        </div>
+      </section>
+
+      <section id="endcustomer" className="py-20 px-4">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Für Endkunden</h2>
+          
+          {/* Mobile Carousel for Endcustomer Packages */}
+          <div className="block md:hidden">
+            <Carousel className="w-full max-w-md mx-auto">
+              <CarouselContent className="-ml-1">
+                {endcustomerPackages.map((pkg) => (
+                  <CarouselItem key={pkg.id} className="pl-1 basis-full">
+                    <div
+                      className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
+                    >
+                      <div className="text-center mb-4">
+                        <ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
+                      </div>
+                      <h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
+                      <p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
+                      <p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
+                        {pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
+                      </p>
+                      <ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
+                        <li>• {pkg.events} Events</li>
+                        {pkg.features.map((feature, index) => (
+                          <li key={index} className="flex items-center">
+                            {getFeatureIcon(feature)} {feature}
+                          </li>
+                        ))}
+                        {pkg.limits?.max_photos && <li>• Max. {pkg.limits.max_photos} Fotos</li>}
+                        {pkg.limits?.gallery_days && <li>• Galerie {pkg.limits.gallery_days} Tage</li>}
+                        {pkg.limits?.max_guests && <li>• Max. {pkg.limits.max_guests} Gäste</li>}
+                        {pkg.watermark_allowed === false && <li><Badge variant="secondary">Kein Watermark</Badge></li>}
+                        {pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
+                      </ul>
+                      <Button
+                        variant="outline"
+                        onClick={() => handleCardClick(pkg)}
+                        className="w-full mt-4 font-sans-marketing"
+                      >
+                        Details anzeigen
+                      </Button>
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+
+          {/* Desktop Grid for Endcustomer Packages */}
+          <div className="hidden md:block">
+            <div className="grid md:grid-cols-3 gap-8">
+              {endcustomerPackages.map((pkg) => (
+                <div
+                  key={pkg.id}
+                  className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
+                >
+                  <div className="text-center mb-4">
+                    <ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
+                  </div>
+                  <h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
+                  <p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
+                  <p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
+                    {pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
+                  </p>
+                  <ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
+                    <li>• {pkg.events} Events</li>
+                    {pkg.features.map((feature, index) => (
+                      <li key={index} className="flex items-center">
+                        {getFeatureIcon(feature)} {feature}
+                      </li>
+                    ))}
+                    {pkg.limits?.max_photos && <li>• Max. {pkg.limits.max_photos} Fotos</li>}
+                    {pkg.limits?.gallery_days && <li>• Galerie {pkg.limits.gallery_days} Tage</li>}
+                    {pkg.limits?.max_guests && <li>• Max. {pkg.limits.max_guests} Gäste</li>}
+                    {pkg.watermark_allowed === false && <li><Badge variant="secondary">Kein Watermark</Badge></li>}
+                    {pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
+                  </ul>
+                  <Button
+                    variant="outline"
+                    onClick={() => handleCardClick(pkg)}
+                    className="w-full mt-4 font-sans-marketing"
+                  >
+                    Details anzeigen
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Comparison Section for Endcustomer */}
+        <div className="mt-12">
+          <h3 className="text-2xl font-bold text-center mb-6 font-display">Endkunden-Pakete vergleichen</h3>
+          <div className="block md:hidden">
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="price">
+                <AccordionTrigger className="font-sans-marketing">Preis</AccordionTrigger>
+                <AccordionContent>
+                  <div className="grid grid-cols-3 gap-4 p-4">
+                    {endcustomerPackages.map((pkg) => (
+                      <div key={pkg.id} className="text-center">
+                        <p className="font-bold">{pkg.name}</p>
+                        <p>{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}</p>
+                      </div>
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="max-photos">
+                <AccordionTrigger className="font-sans-marketing">Max. Fotos {getFeatureIcon('max_photos')}</AccordionTrigger>
+                <AccordionContent>
+                  <div className="grid grid-cols-3 gap-4 p-4">
+                    {endcustomerPackages.map((pkg) => (
+                      <div key={pkg.id} className="text-center">
+                        <p className="font-bold">{pkg.name}</p>
+                        <p>{pkg.limits?.max_photos || 'Unbegrenzt'}</p>
+                      </div>
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="max-guests">
+                <AccordionTrigger className="font-sans-marketing">Max. Gäste {getFeatureIcon('max_guests')}</AccordionTrigger>
+                <AccordionContent>
+                  <div className="grid grid-cols-3 gap-4 p-4">
+                    {endcustomerPackages.map((pkg) => (
+                      <div key={pkg.id} className="text-center">
+                        <p className="font-bold">{pkg.name}</p>
+                        <p>{pkg.limits?.max_guests || 'Unbegrenzt'}</p>
+                      </div>
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="gallery-days">
+                <AccordionTrigger className="font-sans-marketing">Galerie Tage {getFeatureIcon('gallery_days')}</AccordionTrigger>
+                <AccordionContent>
+                  <div className="grid grid-cols-3 gap-4 p-4">
+                    {endcustomerPackages.map((pkg) => (
+                      <div key={pkg.id} className="text-center">
+                        <p className="font-bold">{pkg.name}</p>
+                        <p>{pkg.limits?.gallery_days || 'Unbegrenzt'}</p>
+                      </div>
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="watermark">
+                <AccordionTrigger className="font-sans-marketing">Watermark {getFeatureIcon('no_watermark')}</AccordionTrigger>
+                <AccordionContent>
+                  <div className="grid grid-cols-3 gap-4 p-4">
+                    {endcustomerPackages.map((pkg) => (
+                      <div key={pkg.id} className="text-center">
+                        <p className="font-bold">{pkg.name}</p>
+                        {pkg.watermark_allowed === false ? <Check className="w-4 h-4 text-green-500 mx-auto" /> : <X className="w-4 h-4 text-red-500 mx-auto" />}
+                      </div>
+                    ))}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+          <div className="hidden md:block">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Feature</TableHead>
+                  {endcustomerPackages.map((pkg) => (
+                    <TableHead key={pkg.id} className="text-center">
+                      {pkg.name}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell className="font-semibold">Preis</TableCell>
+                  {endcustomerPackages.map((pkg) => (
+                    <TableCell key={pkg.id} className="text-center">
+                      {pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
+                    </TableCell>
+                  ))}
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-semibold">Max. Fotos {getFeatureIcon('max_photos')}</TableCell>
+                  {endcustomerPackages.map((pkg) => (
+                    <TableCell key={pkg.id} className="text-center">
+                      {pkg.limits?.max_photos || 'Unbegrenzt'}
+                    </TableCell>
+                  ))}
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-semibold">Max. Gäste {getFeatureIcon('max_guests')}</TableCell>
+                  {endcustomerPackages.map((pkg) => (
+                    <TableCell key={pkg.id} className="text-center">
+                      {pkg.limits?.max_guests || 'Unbegrenzt'}
+                    </TableCell>
+                  ))}
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-semibold">Galerie Tage {getFeatureIcon('gallery_days')}</TableCell>
+                  {endcustomerPackages.map((pkg) => (
+                    <TableCell key={pkg.id} className="text-center">
+                      {pkg.limits?.gallery_days || 'Unbegrenzt'}
+                    </TableCell>
+                  ))}
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-semibold">Watermark {getFeatureIcon('no_watermark')}</TableCell>
+                  {endcustomerPackages.map((pkg) => (
+                    <TableCell key={pkg.id} className="text-center">
+                      {pkg.watermark_allowed === false ? <Check className="w-4 h-4 text-green-500" /> : <X className="w-4 h-4 text-red-500" />}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Für Reseller</h2>
+          
+          {/* Mobile Carousel for Reseller Packages */}
+          <div className="block md:hidden">
+            <Carousel className="w-full max-w-md mx-auto">
+              <CarouselContent className="-ml-1">
+                {resellerPackages.map((pkg) => (
+                  <CarouselItem key={pkg.id} className="pl-1 basis-full">
+                    <div
+                      className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
+                    >
+                      <div className="text-center mb-4">
+                        <ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
+                      </div>
+                      <h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
+                      <p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
+                      <p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
+                        {pkg.price} € / Jahr
+                      </p>
+                      <ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
+                        {pkg.features.map((feature, index) => (
+                          <li key={index} className="flex items-center">
+                            {getFeatureIcon(feature)} {feature}
+                          </li>
+                        ))}
+                        {pkg.limits?.max_tenants && <li>• Max. {pkg.limits.max_tenants} Tenants</li>}
+                        {pkg.limits?.max_events && <li>• Max. {pkg.limits.max_events} Events/Jahr</li>}
+                        {pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
+                      </ul>
+                      <Button
+                        variant="outline"
+                        onClick={() => handleCardClick(pkg)}
+                        className="w-full mt-4 font-sans-marketing"
+                      >
+                        Details anzeigen
+                      </Button>
+                    </div>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious />
+              <CarouselNext />
+            </Carousel>
+          </div>
+
+          {/* Desktop Grid for Reseller Packages */}
+          <div className="hidden md:block">
+            <div className="grid md:grid-cols-2 gap-8">
+              {resellerPackages.map((pkg) => (
+                <div
+                  key={pkg.id}
+                  className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
+                >
+                  <div className="text-center mb-4">
+                    <ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
+                  </div>
+                  <h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
+                  <p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
+                  <p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
+                    {pkg.price} € / Jahr
+                  </p>
+                  <ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
+                    {pkg.features.map((feature, index) => (
+                      <li key={index} className="flex items-center">
+                        {getFeatureIcon(feature)} {feature}
+                      </li>
+                    ))}
+                    {pkg.limits?.max_tenants && <li>• Max. {pkg.limits.max_tenants} Tenants</li>}
+                    {pkg.limits?.max_events && <li>• Max. {pkg.limits.max_events} Events/Jahr</li>}
+                    {pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
+                  </ul>
+                  <Button
+                    variant="outline"
+                    onClick={() => handleCardClick(pkg)}
+                    className="w-full mt-4 font-sans-marketing"
+                  >
+                    Details anzeigen
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ Section */}
+      <section className="py-20 px-4">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
+          <div className="grid md:grid-cols-2 gap-8">
+            <div className="bg-white p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold mb-2 font-display">Was ist das Free-Paket?</h3>
+              <p className="text-gray-600 font-sans-marketing">Ideal für Tests: 30 Fotos, 7 Tage Galerie, mit Watermark.</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold mb-2 font-display">Kann ich upgraden?</h3>
+              <p className="text-gray-600 font-sans-marketing">Ja, jederzeit im Dashboard – Limits werden sofort erweitert.</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold mb-2 font-display">Was für Reseller?</h3>
+              <p className="text-gray-600 font-sans-marketing">Jährliche Subscriptions mit Dashboard, Branding und Support.</p>
+            </div>
+            <div className="bg-white p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold mb-2 font-display">Zahlungssicher?</h3>
+              <p className="text-gray-600 font-sans-marketing">Sichere Zahlung via Stripe/PayPal, 14 Tage Rückgaberecht.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Modal */}
+      {selectedPackage && (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle className="text-2xl font-display">{selectedPackage.name} - Details</DialogTitle>
+            </DialogHeader>
+            <Tabs value={currentStep} onValueChange={setCurrentStep} className="w-full">
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="step1">Details</TabsTrigger>
+                <TabsTrigger value="step3">Kaufen</TabsTrigger>
+              </TabsList>
+              <Progress value={(currentStep === 'step1' ? 50 : 100)} className="w-full mt-4" />
+              <TabsContent value="step1" className="mt-4">
+                <div className="space-y-4">
+                  <div className="text-center">
+                    <h2 className="text-3xl font-bold font-display">{selectedPackage.name}</h2>
+                    <p className="text-2xl font-bold text-[#FFB6C1] mt-2">
+                      {selectedPackage.price === 0 ? 'Kostenlos' : `${selectedPackage.price} €`}
+                    </p>
+                  </div>
+                  <p className="text-gray-600 font-sans-marketing">{selectedPackage.description}</p>
+                  <div className="grid grid-cols-2 gap-4">
+                    {selectedPackage.features.map((feature, index) => (
+                      <Badge key={`feature-${index}`} variant="secondary" className="flex items-center justify-center gap-1">
+                        {getFeatureIcon(feature)} {feature}
+                      </Badge>
+                    ))}
+                    {selectedPackage.limits?.max_photos && (
+                      <Badge variant="outline" className="flex items-center justify-center gap-1">
+                        <Image className="w-4 h-4" /> Max. {selectedPackage.limits.max_photos} Fotos
+                      </Badge>
+                    )}
+                    {selectedPackage.limits?.max_guests && (
+                      <Badge variant="outline" className="flex items-center justify-center gap-1">
+                        <Users className="w-4 h-4" /> Max. {selectedPackage.limits.max_guests} Gäste
+                      </Badge>
+                    )}
+                    {selectedPackage.limits?.gallery_days && (
+                      <Badge variant="outline" className="flex items-center justify-center gap-1">
+                        <Calendar className="w-4 h-4" /> {selectedPackage.limits.gallery_days} Tage Galerie
+                      </Badge>
+                    )}
+                    {selectedPackage.watermark_allowed === false && (
+                      <Badge variant="secondary" className="flex items-center justify-center gap-1">
+                        <Shield className="w-4 h-4" /> Kein Watermark
+                      </Badge>
+                    )}
+                    {selectedPackage.branding_allowed && (
+                      <Badge variant="secondary" className="flex items-center justify-center gap-1">
+                        <Image className="w-4 h-4" /> Custom Branding
+                      </Badge>
+                    )}
+                  </div>
+                  {/* Social Proof - unten verschoben */}
+                  <div className="mt-8">
+                    <h3 className="text-xl font-semibold mb-4 font-display">Was Kunden sagen</h3>
+                    <div className="grid md:grid-cols-3 gap-4">
+                      {testimonials.map((testimonial, index) => (
+                        <div key={index} className="bg-white p-4 rounded-lg shadow-md">
+                          <p className="text-gray-600 font-sans-marketing mb-2">"{testimonial.text}"</p>
+                          <p className="font-semibold font-sans-marketing">{testimonial.name}</p>
+                          <div className="flex">
+                            {[...Array(testimonial.rating)].map((_, i) => <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />)}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <button onClick={nextStep} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition">
+                    Zum Kauf
+                  </button>
+                </div>
+              </TabsContent>
+              <TabsContent value="step3" className="mt-4">
+                <h3 className="text-xl font-semibold mb-4 font-display">Bereit zum Kaufen?</h3>
+                <div className="text-center">
+                  <p className="text-gray-600 font-sans-marketing mb-4">Sie haben {selectedPackage.name} ausgewählt.</p>
+                  {auth.user ? (
+                    <Link
+                      href={`/buy-packages/${selectedPackage.id}`}
+                      className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
+                    >
+                      Jetzt kaufen
+                    </Link>
+                  ) : (
+                    <Link
+                      href={`/register?package_id=${selectedPackage.id}`}
+                      className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
+                      onClick={() => {
+                        localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
+                      }}
+                    >
+                      Registrieren & Kaufen
+                    </Link>
+                  )}
+                </div>
+                <button onClick={() => setOpen(false)} className="w-full mt-4 text-gray-500 underline">
+                  Schließen
+                </button>
+              </TabsContent>
+            </Tabs>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* Testimonials Section */}
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="container mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12 font-display">Was unsere Kunden sagen</h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            {testimonials.map((testimonial, index) => (
+              <div key={index} className="bg-white p-6 rounded-lg shadow-md">
+                <p className="text-gray-600 font-sans-marketing mb-4">"{testimonial.text}"</p>
+                <div className="flex items-center">
+                  <div className="flex">
+                    {[...Array(testimonial.rating)].map((_, i) => <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />)}
+                  </div>
+                  <p className="ml-2 font-semibold font-sans-marketing">{testimonial.name}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+};
+
+export default Packages;

resources/js/pages/marketing/Success.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { usePage, router } from '@inertiajs/react';
+import { Head } from '@inertiajs/react';
+import MarketingLayout from '@/layouts/marketing/MarketingLayout';
+import { Loader } from 'lucide-react';
+
+const Success: React.FC = () => {
+  const { auth, flash } = usePage().props as any;
+
+  if (auth.user && auth.user.email_verified_at) {
+    // Redirect to admin
+    router.visit('/admin', { preserveState: false });
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50">
+        <div className="text-center">
+          <Loader className="animate-spin inline-block w-8 h-8 border border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-2" />
+          <p className="text-gray-600">Wird weitergeleitet...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (auth.user && !auth.user.email_verified_at) {
+    return (
+      <MarketingLayout title="E-Mail verifizieren">
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
+            <div className="text-center">
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                E-Mail verifizieren
+              </h2>
+              <p className="text-gray-600 mb-6">
+                Bitte überprüfen Sie Ihre E-Mail und klicken Sie auf den Verifizierungslink.
+              </p>
+              <form method="POST" action="/email/verification-notification">
+                <button
+                  type="submit"
+                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300"
+                >
+                  Verifizierung erneut senden
+                </button>
+              </form>
+              <p className="mt-4 text-sm text-gray-600">
+                Bereits registriert? <a href="/login" className="text-blue-600 hover:text-blue-500">Anmelden</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </MarketingLayout>
+    );
+  }
+
+  return (
+    <MarketingLayout title="Kauf abschließen">
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-gray-900 mb-4">
+              Kauf abschließen
+            </h2>
+            <p className="text-gray-600 mb-6">
+              Melden Sie sich an, um fortzufahren.
+            </p>
+            <a
+              href="/login"
+              className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300 block mb-2"
+            >
+              Anmelden
+            </a>
+            <p className="text-sm text-gray-600">
+              Kein Konto? <a href="/register" className="text-blue-600 hover:text-blue-500">Registrieren</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </MarketingLayout>
+  );
+};
+
+export default Success;

resources/js/pages/settings/profile.tsx

@@ -41,22 +41,6 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                     >
                         {({ processing, recentlySuccessful, errors }) => (
                             <>
-                                <div className="grid gap-2">
-                                    <Label htmlFor="name">Name</Label>
-
-                                    <Input
-                                        id="name"
-                                        className="mt-1 block w-full"
-                                        defaultValue={auth.user.name}
-                                        name="name"
-                                        required
-                                        autoComplete="name"
-                                        placeholder="Full name"
-                                    />
-
-                                    <InputError className="mt-2" message={errors.name} />
-                                </div>
-
                                 <div className="grid gap-2">
                                     <Label htmlFor="email">Email address</Label>