[V0_FILE]png:file="public/images/product-page.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-50I1gbmcrcjKbU4gxw3tcaZjshdxWm.png" isMerged="true" [V0_FILE]typescriptreact:file="ar-viewer.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Eye, Smartphone, RotateCcw, Move3D, ZoomIn } from "lucide-react" export default function ARViewer() { const [isARActive, setIsARActive] = useState(false) const [arStep, setArStep] = useState(0) const arSteps = [ { title: "AR-Kamera aktivieren", description: "Ihre Kamera wird gestartet, um die Umgebung zu erfassen", icon: , }, { title: "Platz finden", description: "Richten Sie die Kamera auf eine ebene Fläche in Ihrem Raum", icon: , }, { title: "Möbel platzieren", description: "Das 3D-Modell wird in Ihrem Raum angezeigt", icon: , }, { title: "Anpassen & Prüfen", description: "Drehen, verschieben und die Größe in Ihrem Raum beurteilen", icon: , }, ] const handleStartAR = () => { setIsARActive(true) setArStep(0) // Simuliere AR-Schritte const interval = setInterval(() => { setArStep((prev) => { if (prev >= arSteps.length - 1) { clearInterval(interval) return prev } return prev + 1 }) }, 2000) } const handleStopAR = () => { setIsARActive(false) setArStep(0) } return (

{/* AR Hauptfunktion */} Augmented Reality Ansicht

Was ist AR-Ansicht?

Sehen Sie das Möbelstück direkt in Ihrem Zuhause, bevor Sie es kaufen. Die AR-Technologie zeigt Ihnen eine realistische 3D-Darstellung in Ihrem Raum.

{!isARActive ? (

Originalgröße

1:1 Darstellung

360° Ansicht

Alle Winkel

Benötigt Kamera-Zugriff • Funktioniert auf Smartphone & Tablet

) : (

AR Aktiv

{arSteps.map((step, index) => (

{step.icon}

{step.title}

{step.description}

{index <= arStep &&

}

))}

)} {/* Hilfe & Tipps */} AR-Tipps für beste Ergebnisse

Gute Beleuchtung

Sorgen Sie für ausreichend Licht im Raum

Ebene Fläche

Richten Sie die Kamera auf den Boden oder eine Tischplatte

Langsam bewegen

Bewegen Sie das Gerät langsam für beste Tracking-Ergebnisse

{/* Produktinfo (vereinfacht) */}

Konfigurierbarer Sessel

500.00 CHF

Sehen Sie, wie dieser Sessel in Ihrem Zuhause aussieht

) } [V0_FILE]typescriptreact:file="product-page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Sparkles, Rocket, ShoppingCart, Share2, Download, Calendar, Eye, ChevronLeft, ChevronRight, Edit, Star, Truck, Shield, Clock, } from "lucide-react" export default function ProductPage() { const [currentSlide, setCurrentSlide] = useState(1) const [isSticky, setIsSticky] = useState(false) const stickyRef = useRef(null) const totalSlides = 3 useEffect(() => { const handleScroll = () => { if (stickyRef.current) { const rect = stickyRef.current.getBoundingClientRect() const newIsSticky = rect.top <= 0 if (newIsSticky !== isSticky) { setIsSticky(newIsSticky) } } } window.addEventListener("scroll", handleScroll, { passive: true }) return () => window.removeEventListener("scroll", handleScroll) }, [isSticky]) const nextSlide = () => { setCurrentSlide((prev) => (prev < totalSlides ? prev + 1 : 1)) } const prevSlide = () => { setCurrentSlide((prev) => (prev > 1 ? prev - 1 : totalSlides)) } return (

{/* Header */}

Fertig konfiguriert – weiter geht's!

{/* Pricing */}

650,00 CHF 500,00 CHF -23%

Aktionspreis gültig bis 31.12.2024

{/* Sticky CTA Buttons */}

{!isSticky ? ( <> {/* Normal Layout */}

) : ( <> {/* Ultra Compact Sticky Layout */}

)}

{/* Gesamtmaße Section */}

Gesamtmaße

{currentSlide} / {totalSlides}

Breite × Höhe × Länge: 180 cm × 85 cm × 90 cm

Sitztiefe: 55 cm

{/* Slide Indicators */}

{[1, 2, 3].map((slide) => (

))}

{/* AR Button */} {/* Zusammenfassung Section */}

Zusammenfassung

{/* Armlehnenoptik */}

Armlehnenoptik

Armlehne 1 - Breite 22 cm

1 2

{/* Sitzhöhe */}

Sitzhöhe

42 cm

1 2

{/* Sitzausführungen */}

Sitzausführungen

feste Sitzkissen Soft

1 2

{/* Additional Content for Scrolling */}

{/* Product Details */}

Produktdetails

Premium Qualität

Hochwertige Materialien und erstklassige Verarbeitung für langanhaltenden Komfort.

Kostenlose Lieferung

Versandkostenfrei direkt zu Ihnen nach Hause. Lieferzeit: 2-3 Wochen.

5 Jahre Garantie

Umfassende Herstellergarantie auf alle Komponenten und Materialien.

30 Tage Rückgaberecht

Nicht zufrieden? Kein Problem - 30 Tage kostenlose Rückgabe.

{/* Care Instructions */}

Pflegehinweise

• Regelmäßig mit einem weichen, trockenen Tuch abstauben

• Bei Flecken sofort mit einem feuchten Tuch behandeln

• Direkte Sonneneinstrahlung vermeiden

• Professionelle Reinigung bei hartnäckigen Verschmutzungen

{/* Reviews */}

Kundenbewertungen

{[1, 2, 3, 4, 5].map((i) => ( ))}

Maria K.

"Absolut zufrieden mit der Qualität und dem Komfort. Der Konfigurator hat perfekt funktioniert!"

{[1, 2, 3, 4, 5].map((i) => ( ))}

Thomas R.

"Schnelle Lieferung und einfacher Aufbau. Sitzt sich sehr bequem!"

{/* More content to enable scrolling */}

Technische Daten

Material:

Premium Leder

Gewicht:

45 kg

Belastbarkeit:

120 kg

Herkunft:

Deutschland

) } [V0_FILE]typescriptreact:file="components/navigation-tabs.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ShoppingCart } from "lucide-react" interface NavigationTabsProps { tabs: string[] activeTab?: number } export function NavigationTabs({ tabs, activeTab = 0 }: NavigationTabsProps) { return (

{tabs.map((tab, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/collapsible-section.tsx" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { ChevronDown, ArrowRight } from "lucide-react" interface CollapsibleSectionProps { title: string itemCount: number isExpanded?: boolean onToggle?: () => void } export function CollapsibleSection({ title, itemCount, isExpanded = true, onToggle }: CollapsibleSectionProps) { return (

) } [V0_FILE]typescriptreact:file="hooks/use-scroll-state.ts" isMerged="true" "use client" import { useState, useEffect } from "react" import type { ConfiguratorState } from "../types/furniture" export function useScrollState(compactThreshold = 150) { const [state, setState] = useState({ scrollY: 0, isCompact: false, showExchangeable: false, }) useEffect(() => { const handleScroll = () => { const newScrollY = window.scrollY const newIsCompact = newScrollY > compactThreshold setState((prev) => ({ ...prev, scrollY: newScrollY, isCompact: newIsCompact, })) } window.addEventListener("scroll", handleScroll, { passive: true }) return () => window.removeEventListener("scroll", handleScroll) }, [compactThreshold]) const toggleExchangeable = () => { setState((prev) => ({ ...prev, showExchangeable: !prev.showExchangeable, })) } return { ...state, toggleExchangeable, } } [V0_FILE]typescriptreact:file="types/furniture.ts" isEdit="true" isMerged="true" export interface FurnitureItem { id: number name: string dimensions?: string image: string selected?: boolean highlighted?: boolean } export interface ConfiguratorState { scrollY: number isCompact: boolean showExchangeable: boolean } export type InteractionMode = "browse" | "replacing" | "adding" export interface AppState { currentSelection: FurnitureItem[] mode: InteractionMode replacingItemId: number | null } [V0_FILE]typescriptreact:file="data/furniture-data.ts" isEdit="true" isMerged="true" import type { FurnitureItem } from "../types/furniture" export const initialSelection: FurnitureItem[] = [ { id: 1, name: "2,5-Sitzer rechts", image: "/placeholder.svg?height=60&width=80", selected: true, }, { id: 2, name: "2,5-Sitzer (Alle)", image: "/placeholder.svg?height=60&width=80", selected: true, }, { id: 3, name: "2,5-Sitzer mit", image: "/placeholder.svg?height=60&width=80", selected: true, highlighted: true, }, ] export const exchangeableItems: FurnitureItem[] = [ { id: 4, name: "2,5-Sitzer Armlehne rechts", dimensions: "B:160 T:97cm", image: "/placeholder.svg?height=80&width=100", }, { id: 5, name: "2,5-Sitzer mit Querschläfer", dimensions: "B:160 T:97cm", image: "/placeholder.svg?height=80&width=100", }, ] export const allOptions: FurnitureItem[] = [ { id: 6, name: "2-Sitzer Standard", dimensions: "B:140 T:85cm", image: "/placeholder.svg?height=100&width=120", }, { id: 7, name: "2-Sitzer mit Armlehne", dimensions: "B:140 T:85cm", image: "/placeholder.svg?height=100&width=120", }, { id: 8, name: "2-Sitzer Querschläfer", dimensions: "B:140 T:85cm", image: "/placeholder.svg?height=100&width=120", }, { id: 9, name: "2-Sitzer Eckmodul", dimensions: "B:140 T:85cm", image: "/placeholder.svg?height=100&width=120", }, { id: 10, name: "2-Sitzer Premium", dimensions: "B:140 T:85cm", image: "/placeholder.svg?height=100&width=120", }, { id: 11, name: "2-Sitzer Kompakt", dimensions: "B:140 T:85cm", image: "/placeholder.svg?height=100&width=120", }, ] export const navigationTabs = ["Planen", "Zusatzartikel", "Armlehnenoptik", "Sitzhöhe", "Sitzausführung"] [V0_FILE]typescriptreact:file="hooks/use-app-state.ts" isEdit="true" isMerged="true" "use client" import { useState } from "react" import type { AppState, FurnitureItem } from "../types/furniture" import { initialSelection } from "../data/furniture-data" export function useAppState() { const [state, setState] = useState({ currentSelection: initialSelection, mode: "replacing", // Always start in replacing mode replacingItemId: initialSelection[0]?.id || null, // Always have first item selected }) const removeItem = (id: number) => { setState((prev) => { const newSelection = prev.currentSelection.filter((item) => item.id !== id) // If we removed the currently selected item, select the first remaining item const newReplacingId = prev.replacingItemId === id ? newSelection[0]?.id || null : prev.replacingItemId return { ...prev, currentSelection: newSelection, mode: newSelection.length > 0 ? "replacing" : "browse", replacingItemId: newReplacingId, } }) } const selectForReplacement = (id: number) => { setState((prev) => ({ ...prev, mode: "replacing", replacingItemId: id, })) } const startAdding = () => { setState((prev) => ({ ...prev, mode: "adding", replacingItemId: null, })) } const replaceItem = (newItem: FurnitureItem) => { if (state.replacingItemId === null) return setState((prev) => ({ ...prev, currentSelection: prev.currentSelection.map((item) => item.id === prev.replacingItemId ? { ...newItem, selected: true, highlighted: false } : item, ), mode: "replacing", // Keep the same item selected (now replaced) or select first if it doesn't exist replacingItemId: prev.replacingItemId, })) } const addItem = (newItem: FurnitureItem) => { const newId = Math.max(...state.currentSelection.map((item) => item.id), 0) + 1 const addedItem = { ...newItem, id: newId, selected: true, highlighted: false } setState((prev) => ({ ...prev, currentSelection: [...prev.currentSelection, addedItem], mode: "replacing", replacingItemId: addedItem.id, // Select the newly added item })) } const selectItem = (item: FurnitureItem) => { if (state.mode === "replacing") { replaceItem(item) } else if (state.mode === "adding") { addItem(item) } } return { ...state, removeItem, selectForReplacement, startAdding, selectItem, } } [V0_FILE]typescriptreact:file="furniture-configurator.tsx" isEdit="true" isMerged="true" "use client" import { useRef } from "react" import { Card, CardContent } from "@/components/ui/card" // Components import { NavigationTabs } from "./components/navigation-tabs" import { CurrentSelection } from "./components/current-selection" import { CompactSelection } from "./components/compact-selection" import { SectionHeader } from "./components/section-header" import { CollapsibleSection } from "./components/collapsible-section" import { ProductGrid } from "./components/product-grid" // Data & Hooks import { allOptions, navigationTabs } from "./data/furniture-data" import { useScrollState } from "./hooks/use-scroll-state" import { useAppState } from "./hooks/use-app-state" export default function FurnitureConfigurator() { const { isCompact } = useScrollState(150) const { currentSelection, mode, replacingItemId, removeItem, selectForReplacement, startAdding, selectItem } = useAppState() const stickyRef = useRef(null) const replacingItem = currentSelection.find((item) => item.id === replacingItemId) return (

{/* Navigation Tabs */} {/* Sticky Configuration Bar */}

{!isCompact ? ( ) : ( )}

{/* Section Header */} {/* Main Content Area */}

{/* Collapsible Section */} {/* Product Grid */} {/* Additional Content for Scrolling */}

{Array.from({ length: 10 }, (_, i) => (

Zusätzlicher Inhalt {i + 1}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

))}

) } [V0_FILE]typescriptreact:file="components/section-header.tsx" isEdit="true" isMerged="true" import { Badge } from "@/components/ui/badge" import type { InteractionMode } from "../types/furniture" interface SectionHeaderProps { mode: InteractionMode replacingItemName?: string itemCount: number } export function SectionHeader({ mode, replacingItemName, itemCount }: SectionHeaderProps) { const getHeaderContent = () => { switch (mode) { case "replacing": return { badgeText: "Ersetzen", badgeClass: "bg-orange-100 text-orange-800", } case "adding": return { badgeText: "Hinzufügen", badgeClass: "bg-green-100 text-green-800", } default: return { badgeText: `${itemCount} verfügbar`, badgeClass: "text-gray-600", } } } const content = getHeaderContent() return (

{content.badgeText}

) } [V0_FILE]typescriptreact:file="components/current-selection.tsx" isEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { X, Plus, RefreshCw } from "lucide-react" import type { FurnitureItem, InteractionMode } from "../types/furniture" interface CurrentSelectionProps { items: FurnitureItem[] mode: InteractionMode replacingItemId: number | null onRemoveItem?: (id: number) => void onSelectForReplacement?: (id: number) => void onAddItem?: () => void } export function CurrentSelection({ items, mode, replacingItemId, onRemoveItem, onSelectForReplacement, onAddItem, }: CurrentSelectionProps) { const getModeTitle = () => { switch (mode) { case "replacing": return "Deine aktuelle Zusammenstellung:" case "adding": return "Deine aktuelle Zusammenstellung:" default: return "Deine aktuelle Zusammenstellung:" } } const getModeColor = () => { switch (mode) { case "replacing": return "bg-red-100 text-red-800" case "adding": return "bg-red-100 text-red-800" default: return "bg-red-100 text-red-800" } } return (

{getModeTitle()}

{items.length} Elemente

{items.map((item) => (

onSelectForReplacement?.(item.id)} title={replacingItemId === item.id ? "Aktuell ausgewählt" : "Klicken um auszuwählen"} > {/* Delete button */} {onRemoveItem && ( )} {/* Selection indicator */} {replacingItemId === item.id && (

)}

{item.name}

{/* Selection overlay */} {replacingItemId === item.id && (

AUSGEWÄHLT

)} {/* Hover effect for non-selected items */} {replacingItemId !== item.id && (

AUSWÄHLEN

)}

))} {/* Add button */} {onAddItem && ( )}

) } [V0_FILE]typescriptreact:file="components/compact-selection.tsx" isEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Settings, RefreshCw, ArrowRight, Plus, MousePointer } from "lucide-react" import type { FurnitureItem, InteractionMode } from "../types/furniture" interface CompactSelectionProps { items: FurnitureItem[] mode: InteractionMode replacingItemId: number | null onSelectForReplacement?: (id: number) => void } export function CompactSelection({ items, mode, replacingItemId, onSelectForReplacement }: CompactSelectionProps) { const getModeText = () => { switch (mode) { case "replacing": return "Tauschbare Elemente" case "adding": return "Tauschbare Elemente" default: return "Tauschbare Elemente" } } const getModeIcon = () => { switch (mode) { case "replacing": return (

) case "adding": return (

) default: return (

) } } const getModeColor = () => { switch (mode) { case "replacing": return "text-orange-600" case "adding": return "text-green-600" default: return "text-gray-600" } } return (

{items.slice(0, 3).map((item) => (

onSelectForReplacement?.(item.id)} title={replacingItemId === item.id ? "Aktuell ausgewählt" : "Klicken um auszuwählen"} > {item.name}

{item.highlighted && (

)} {replacingItemId === item.id && (

)}

))}

{items.length}

{getModeIcon()} {getModeText()}

) } [V0_FILE]typescriptreact:file="components/product-grid.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { RefreshCw, Plus } from "lucide-react" import type { FurnitureItem, InteractionMode } from "../types/furniture" interface ProductGridProps { items: FurnitureItem[] mode: InteractionMode onSelectItem?: (item: FurnitureItem) => void } export function ProductGrid({ items, mode, onSelectItem }: ProductGridProps) { const getButtonContent = () => { switch (mode) { case "replacing": return { icon: (

), text: "Als Ersatz wählen", hoverClass: "group-hover:bg-orange-50 group-hover:border-orange-200 group-hover:text-orange-700", iconColor: "bg-orange-600", overlayColor: "bg-orange-500", overlayText: "ERSETZEN", } case "adding": return { icon: (

), text: "Hinzufügen", hoverClass: "group-hover:bg-green-50 group-hover:border-green-200 group-hover:text-green-700", iconColor: "bg-green-600", overlayColor: "bg-green-500", overlayText: "HINZUFÜGEN", } default: return { icon: (

), text: "Auswählen", hoverClass: "group-hover:bg-gray-50 group-hover:border-gray-300 group-hover:text-gray-600", iconColor: "bg-gray-600", overlayColor: "bg-gray-500", overlayText: "AUSWÄHLEN", } } } const buttonContent = getButtonContent() return (

{items.map((item) => ( onSelectItem?.(item)} >

{mode === "replacing" ? ( ) : mode === "adding" ? ( ) : ( )}

{buttonContent.overlayText}

{item.name}

{item.dimensions &&

{item.dimensions}

} ))}

) } [V0_FILE]typescriptreact:file="option-1-toggle-switch.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Settings } from "lucide-react" export default function ToggleSwitchOption() { const [individualMode, setIndividualMode] = useState(false) return (

Option 1: Toggle Switch

{/* Compact Toggle Control */}

Konfiguration

Alle {/* Toggle Switch */} Einzeln

{/* Status Display */}

{individualMode ? "Einzelkonfiguration" : "Gesamtkonfiguration"} {individualMode ? "Jedes Element separat anpassen" : "Alle Elemente gleichzeitig ändern"}

) } [V0_FILE]typescriptreact:file="option-2-segmented-control.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Layers, Grid3X3 } from "lucide-react" export default function SegmentedControlOption() { const [mode, setMode] = useState<"all" | "individual">("all") return (

Option 2: Segmented Control

{/* Compact Segmented Control */}

{/* Status Display */}

{mode === "all" ? "✓ Änderungen werden auf alle Elemente angewendet" : "✓ Jedes Element kann individuell konfiguriert werden"}

) } [V0_FILE]typescriptreact:file="option-3-dropdown-compact.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronDown, Settings2, Target } from "lucide-react" export default function DropdownCompactOption() { const [mode, setMode] = useState<"all" | "individual">("all") const [isOpen, setIsOpen] = useState(false) const modes = [ { value: "all", label: "Alle Elemente", icon: Settings2, description: "Gleichzeitig konfigurieren", }, { value: "individual", label: "Einzelelemente", icon: Target, description: "Separat anpassen", }, ] const currentMode = modes.find((m) => m.value === mode)! return (

Option 3: Compact Dropdown

{/* Compact Dropdown */}

{isOpen && (

{modes.map((modeOption) => ( ))}

)}

{/* Current Status */}

{currentMode.description}

) } [V0_FILE]typescriptreact:file="option-4-radio-pills.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Layers, Focus } from "lucide-react" export default function RadioPillsOption() { const [mode, setMode] = useState<"all" | "individual">("all") return (

Option 4: Radio Pills

{/* Compact Radio Pills */}

Modus: setMode("all")} className="sr-only" />

Alle

setMode("individual")} className="sr-only" />

Einzeln

{/* Compact Status */}

{mode === "all" ? "Globale Konfiguration aktiv" : "Individuelle Konfiguration aktiv"}

) } [V0_FILE]typescriptreact:file="option-1-hamburger-menu.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Menu, X, Home, Settings, Globe, User, ShoppingCart } from "lucide-react" export default function HamburgerMenuOption() { const [isOpen, setIsOpen] = useState(false) return (

Option 1: Classic Hamburger Menu

{/* Product Page Header */}

{/* Hamburger Button */}

Produktname

{/* Side Menu Overlay */} {isOpen && ( <>

setIsOpen(false)} />

Menü

)} {/* Mock Product Content */}

Produktinhalt hier...

) } [V0_FILE]typescriptreact:file="option-2-profile-avatar.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { ChevronDown, Home, Settings, Globe, User, ShoppingCart, LogOut } from "lucide-react" export default function ProfileAvatarOption() { const [isOpen, setIsOpen] = useState(false) return (

Option 2: Profile Avatar Menu

{/* Product Page Header */}

{/* Profile Avatar Button */}

{/* Dropdown Menu */} {isOpen && ( <>

setIsOpen(false)} />

Max Kunde

max@example.com

)}

Produktname

{/* Mock Product Content */}

Produktinhalt hier...

) } [V0_FILE]typescriptreact:file="option-3-floating-action.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Settings, Home, Globe, User, ShoppingCart, X, Menu } from "lucide-react" export default function FloatingActionOption() { const [isOpen, setIsOpen] = useState(false) return (

Option 3: Floating Action Button

{/* Product Page Header */}

{/* Spacer */}

Produktname

{/* Mock Product Content */}

Produktinhalt hier...

{/* Floating Action Button */}

{/* Quick Actions */} {isOpen && (

)}

) } [V0_FILE]typescriptreact:file="option-4-swipe-gesture.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronRight, Home, Settings, User, ShoppingCart, ArrowLeft } from "lucide-react" export default function SwipeGestureOption() { const [isOpen, setIsOpen] = useState(false) return (

Option 4: Edge Swipe + Visual Indicator

{/* Product Page Header */}

{/* Edge Swipe Indicator */}

Wischen

Produktname

{/* Side Panel */}

Navigation

💡 Tipp: Wische vom linken Rand nach rechts

{/* Overlay */} {isOpen &&

setIsOpen(false)} />} {/* Mock Product Content */}

Produktinhalt hier...

) } [V0_FILE]typescriptreact:file="option-5-bottom-sheet.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { MoreHorizontal, Home, Settings, Globe, User, ShoppingCart, ChevronUp } from "lucide-react" export default function BottomSheetOption() { const [isOpen, setIsOpen] = useState(false) return (

Option 5: Bottom Sheet (Mobile-First)

{/* Product Page Header */}

{/* More Options Button */}

Produktname

{/* Mock Product Content */}

Produktinhalt hier...

{/* Bottom Sheet */} {isOpen && ( <>

setIsOpen(false)} />

Menü

{/* Grid Layout for Mobile */}

{/* Language Selector */}

Aktuelle Sprache:

)}

) } [V0_FILE]png:file="public/images/mattress-advisor-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-AZRAZqYiHRUmfZ4E5PqjhUM2HZfqlt.png" isMerged="true" [V0_FILE]typescriptreact:file="types/mattress-advisor.ts" isMerged="true" export interface UserProfile { height: number weight: number gender: "male" | "female" | "prefer-not-to-say" sleepPosition: "side" | "stomach" | "back" | "changing" | "unknown" bodyType: "normal" | "slim" | "curvy" | "unknown" painPoints: string[] nightMovement: "rarely" | "sometimes" | "often" | "unknown" firmnessPreference: "soft" | "firm" | "no-preference" } export interface MattressRecommendation { id: string name: string firmness: string material: string price: number image: string matchPercentage: number features: string[] description: string } export type AdvisorStep = "welcome" | "body-metrics" | "sleep-habits" | "preferences" | "pain-points" | "results" [V0_FILE]typescriptreact:file="data/mattress-data.ts" isMerged="true" import type { MattressRecommendation } from "../types/mattress-advisor" export const mattressRecommendations: MattressRecommendation[] = [ { id: "comfort-plus", name: "Comfort Plus Matratze", firmness: "Mittel-Weich", material: "Memory Foam", price: 899, image: "/placeholder.svg?height=200&width=300&text=Comfort+Plus", matchPercentage: 95, features: ["Druckentlastung", "Temperaturregulierung", "7 Zonen"], description: "Perfekt für Seitenschläfer mit Druckpunkten", }, { id: "support-pro", name: "Support Pro Matratze", firmness: "Fest", material: "Federkern", price: 1299, image: "/placeholder.svg?height=200&width=300&text=Support+Pro", matchPercentage: 88, features: ["Optimale Stützung", "Atmungsaktiv", "Langlebig"], description: "Ideal für Bauch- und Rückenschläfer", }, { id: "hybrid-deluxe", name: "Hybrid Deluxe Matratze", firmness: "Mittel", material: "Hybrid (Federkern + Memory Foam)", price: 1599, image: "/placeholder.svg?height=200&width=300&text=Hybrid+Deluxe", matchPercentage: 92, features: ["Beste beider Welten", "Bewegungsisolation", "Kühlend"], description: "Universell geeignet für alle Schlaftypen", }, ] export const painPointOptions = [ "Schulterschmerzen", "Nackenschmerzen", "Rückenschmerzen (unterer Rücken)", "Rückenschmerzen (ganzer Rücken)", "Milbenallergien", "Hüftschmerzen", "Schwitzen in der Nacht", "Keine der Optionen trifft zu 😊", ] [V0_FILE]typescriptreact:file="hooks/use-mattress-advisor.ts" isMerged="true" "use client" import { useState } from "react" import type { UserProfile, AdvisorStep, MattressRecommendation } from "../types/mattress-advisor" import { mattressRecommendations } from "../data/mattress-data" const initialProfile: UserProfile = { height: 170, weight: 70, gender: "prefer-not-to-say", sleepPosition: "unknown", bodyType: "normal", painPoints: [], nightMovement: "sometimes", firmnessPreference: "no-preference", } export function useMattressAdvisor() { const [currentStep, setCurrentStep] = useState("welcome") const [profile, setProfile] = useState(initialProfile) const [recommendations, setRecommendations] = useState([]) const updateProfile = (updates: Partial) => { setProfile((prev) => ({ ...prev, ...updates })) } const nextStep = () => { const steps: AdvisorStep[] = ["welcome", "body-metrics", "sleep-habits", "preferences", "pain-points", "results"] const currentIndex = steps.indexOf(currentStep) if (currentIndex < steps.length - 1) { setCurrentStep(steps[currentIndex + 1]) } } const prevStep = () => { const steps: AdvisorStep[] = ["welcome", "body-metrics", "sleep-habits", "preferences", "pain-points", "results"] const currentIndex = steps.indexOf(currentStep) if (currentIndex > 0) { setCurrentStep(steps[currentIndex - 1]) } } const generateRecommendations = () => { // Simple recommendation logic based on profile const scored = mattressRecommendations.map((mattress) => { let score = 70 // Base score // Adjust based on sleep position if (profile.sleepPosition === "side" && mattress.material.includes("Memory Foam")) score += 15 if (profile.sleepPosition === "stomach" && mattress.firmness === "Fest") score += 15 if (profile.sleepPosition === "back" && mattress.firmness === "Mittel") score += 10 // Adjust based on pain points if (profile.painPoints.includes("Rückenschmerzen") && mattress.features.includes("Optimale Stützung")) score += 10 if (profile.painPoints.includes("Schulterschmerzen") && mattress.features.includes("Druckentlastung")) score += 10 // Adjust based on firmness preference if (profile.firmnessPreference === "soft" && mattress.firmness.includes("Weich")) score += 10 if (profile.firmnessPreference === "firm" && mattress.firmness === "Fest") score += 10 return { ...mattress, matchPercentage: Math.min(score, 98), } }) const sorted = scored.sort((a, b) => b.matchPercentage - a.matchPercentage) setRecommendations(sorted) setCurrentStep("results") } const getStepProgress = () => { const steps: AdvisorStep[] = ["welcome", "body-metrics", "sleep-habits", "preferences", "pain-points", "results"] const currentIndex = steps.indexOf(currentStep) return ((currentIndex + 1) / steps.length) * 100 } return { currentStep, profile, recommendations, updateProfile, nextStep, prevStep, generateRecommendations, getStepProgress, setCurrentStep, } } [V0_FILE]typescriptreact:file="components/progress-bar.tsx" isMerged="true" interface ProgressBarProps { progress: number className?: string } export function ProgressBar({ progress, className = "" }: ProgressBarProps) { return (

) } [V0_FILE]typescriptreact:file="components/step-body-metrics.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import type { UserProfile } from "../types/mattress-advisor" interface StepBodyMetricsProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function StepBodyMetrics({ profile, onUpdate, onNext, onPrev }: StepBodyMetricsProps) { return (

Deine Körpermaße

Diese Angaben helfen uns, die optimale Unterstützung zu finden.

Körpergröße

{profile.height}cm

onUpdate({ height: value[0] })} min={120} max={220} step={1} className="w-full" />

120cm 220cm

Körpergewicht

{profile.weight}kg

onUpdate({ weight: value[0] })} min={40} max={150} step={1} className="w-full" />

40kg 150kg

Biologisches Geschlecht

{[ { value: "male", label: "Mann" }, { value: "female", label: "Frau" }, { value: "prefer-not-to-say", label: "k.A." }, ].map((option) => ( ))}

) } [V0_FILE]typescriptreact:file="components/step-sleep-habits.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { UserProfile } from "../types/mattress-advisor" interface StepSleepHabitsProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function StepSleepHabits({ profile, onUpdate, onNext, onPrev }: StepSleepHabitsProps) { return (

Deine Schlafgewohnheiten

Erzähl uns, wie du normalerweise schläfst.

In der Regel liegst Du:

{[ { value: "side", label: "auf der Seite" }, { value: "stomach", label: "auf dem Bauch" }, { value: "back", label: "auf dem Rücken" }, { value: "changing", label: "häufig wechselnd" }, ].map((option) => ( ))}

Deine Körperform beschreibst Du eher:

{[ { value: "normal", label: "normal" }, { value: "slim", label: "schlank" }, { value: "curvy", label: "kurvig" }, { value: "unknown", label: "weiß nicht genau" }, ].map((option) => ( ))}

In der Nacht wälzt Du Dich:

{[ { value: "sometimes", label: "manchmal" }, { value: "rarely", label: "eher selten" }, { value: "often", label: "eher oft" }, { value: "unknown", label: "weiß nicht genau" }, ].map((option) => ( ))}

) } [V0_FILE]typescriptreact:file="components/step-preferences.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { UserProfile } from "../types/mattress-advisor" interface StepPreferencesProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function StepPreferences({ profile, onUpdate, onNext, onPrev }: StepPreferencesProps) { return (

Deine Präferenzen

Wie magst du es am liebsten?

Unabhängig von dem für Dich richtigen Härtegrad bevorzugst Du ein:

{[ { value: "soft", label: "eher weiches Liegegefühl" }, { value: "firm", label: "eher festes Liegegefühl" }, ].map((option) => ( ))}

) } [V0_FILE]typescriptreact:file="components/step-pain-points.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Check } from "lucide-react" import { painPointOptions } from "../data/mattress-data" import type { UserProfile } from "../types/mattress-advisor" interface StepPainPointsProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function StepPainPoints({ profile, onUpdate, onNext, onPrev }: StepPainPointsProps) { const togglePainPoint = (painPoint: string) => { const isSelected = profile.painPoints.includes(painPoint) const newPainPoints = isSelected ? profile.painPoints.filter((p) => p !== painPoint) : [...profile.painPoints, painPoint] onUpdate({ painPoints: newPainPoints }) } return (

Beschwerden & Bedürfnisse

Du neigst zu: (Mehrfachauswahl möglich)

Wähle alle zutreffenden Punkte aus:

{painPointOptions.map((option) => { const isSelected = profile.painPoints.includes(option) return ( ) })}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "5.7.3" } } [V0_FILE]typescriptreact:file="components/step-welcome.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Bed, Clock, Target } from "lucide-react" interface StepWelcomeProps { onNext: () => void } export function StepWelcome({ onNext }: StepWelcomeProps) { return (

Finde deine perfekte Matratze

Beantworte ein paar Fragen über deine Schlafgewohnheiten und wir empfehlen dir die ideale Matratze für erholsamen Schlaf.

Nur 2-3 Minuten

Schnell und einfach

Personalisierte Empfehlung

Basierend auf deinen Bedürfnissen

) } [V0_FILE]png:file="public/images/mattress-3d.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-PlKArvNZ32MoI9w1esBcaic2xv7e6u.png" isMerged="true" [V0_FILE]typescriptreact:file="components/circular-progress.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" interface CircularProgressProps { value: number size?: number strokeWidth?: number className?: string children?: React.ReactNode animated?: boolean } export function CircularProgress({ value, size = 120, strokeWidth = 8, className = "", children, animated = true, }: CircularProgressProps) { const [animatedValue, setAnimatedValue] = useState(0) const radius = (size - strokeWidth) / 2 const circumference = radius * 2 * Math.PI const offset = circumference - (animatedValue / 100) * circumference useEffect(() => { if (animated) { const timer = setTimeout(() => { setAnimatedValue(value) }, 500) return () => clearTimeout(timer) } else { setAnimatedValue(value) } }, [value, animated]) return (

{/* Content in center */}

{children}

) } [V0_FILE]typescriptreact:file="components/step-results.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Award, ShoppingCart, Info, ArrowRight, RotateCcw } from "lucide-react" import { useState, useEffect } from "react" import { FirmnessRecommendation } from "./firmness-recommendation" import { Mattress3DView } from "./mattress-3d-view" import { RecommendationExplanation } from "./recommendation-explanation" import { ConfidenceGuarantee } from "./confidence-guarantee" import type { MattressRecommendation } from "../types/mattress-advisor" interface StepResultsProps { recommendations: MattressRecommendation[] profile?: any // Make profile optional onRestart: () => void } export function StepResults({ recommendations, profile = {}, onRestart }: StepResultsProps) { const [showResults, setShowResults] = useState(false) const [showExplanation, setShowExplanation] = useState(false) const topRecommendation = recommendations[0] useEffect(() => { const timer = setTimeout(() => setShowResults(true), 100) return () => clearTimeout(timer) }, []) const getFirmnessFromProfile = () => { // Add null checks and default values if (!profile || typeof profile.weight !== "number" || typeof profile.height !== "number") { return "H3" // Default firmness if profile data is missing } // Simple logic to determine firmness based on weight and height const bmi = profile.weight / ((profile.height / 100) * (profile.height / 100)) if (bmi < 20) return "H2" if (bmi < 25) return "H3" return "H4" } const firmness = getFirmnessFromProfile() if (showExplanation) { return (

Warum wir {firmness} empfehlen

) } return (

{/* Animated Header */}

Eure Empfehlungen auf Basis der Deep-Sleep-Formel von Mozart

{/* Firmness Recommendations */}

{/* 3D Mattress View */} {/* Action Buttons */}

{/* Confidence Guarantee */}

) } [V0_FILE]typescriptreact:file="lib/mattress-calculator.ts" isMerged="true" import type { UserProfile } from "../types/mattress-advisor" export class MattressCalculator { static calculateFirmness(profile: UserProfile): string { if (!profile || typeof profile.weight !== "number" || typeof profile.height !== "number") { return "H3" // Default firmness if profile data is missing } const bmi = profile.weight / ((profile.height / 100) * (profile.height / 100)) // Adjust based on sleep position let firmnessAdjustment = 0 if (profile.sleepPosition === "stomach") firmnessAdjustment += 1 if (profile.sleepPosition === "side") firmnessAdjustment -= 0.5 // Adjust based on body type if (profile.bodyType === "curvy") firmnessAdjustment -= 0.5 if (profile.bodyType === "slim") firmnessAdjustment += 0.5 // Base firmness on BMI let baseFirmness = 2 // H2 if (bmi < 18.5) baseFirmness = 1 // H1 else if (bmi >= 25) baseFirmness = 3 // H3 else if (bmi >= 30) baseFirmness = 4 // H4 const finalFirmness = Math.max(1, Math.min(4, Math.round(baseFirmness + firmnessAdjustment))) return `H${finalFirmness}` } static calculateMatchPercentage(profile: UserProfile, firmness: string): number { let score = 70 // Base score // Sleep position matching if (profile.sleepPosition === "side" && firmness === "H2") score += 15 if (profile.sleepPosition === "stomach" && (firmness === "H3" || firmness === "H4")) score += 15 if (profile.sleepPosition === "back" && (firmness === "H2" || firmness === "H3")) score += 10 // Pain point considerations if (profile.painPoints.includes("Rückenschmerzen") && (firmness === "H3" || firmness === "H4")) score += 10 if (profile.painPoints.includes("Schulterschmerzen") && (firmness === "H1" || firmness === "H2")) score += 10 // Firmness preference if (profile.firmnessPreference === "soft" && (firmness === "H1" || firmness === "H2")) score += 10 if (profile.firmnessPreference === "firm" && (firmness === "H3" || firmness === "H4")) score += 10 return Math.min(98, score) } static getRecommendationExplanations(profile: UserProfile, firmness: string) { const explanations = [] // BMI-based explanation if (profile.weight && profile.height) { const bmi = profile.weight / ((profile.height / 100) * (profile.height / 100)) if (bmi > 25) { explanations.push({ title: "Körpergewicht-Analyse", content: `Dein Körpergewicht ist im Verhältnis zu Deiner Größe etwas erhöht. Daher benötigst Du eine mindestens mittelfeste Federung. So werden bestimmte Körperpartien ausreichend gestützt, um eine optimale Wirbelsäulenposition zu gewährleisten.`, }) } else if (bmi < 20) { explanations.push({ title: "Körpergewicht-Analyse", content: `Dein Körpergewicht ist im Verhältnis zu Deiner Größe eher niedrig. Eine weichere Matratze bietet Dir den optimalen Komfort und passt sich besser an Deine Körperkonturen an.`, }) } } // Sleep position explanation if (profile.sleepPosition) { const positionExplanations = { side: "Als Seitenschläfer benötigst Du eine Matratze, die sich gut an Deine Körperkonturen anpasst und Druckpunkte an Schultern und Hüften entlastet.", stomach: "Als Bauchschläfer ist eine festere Matratze wichtig, um ein zu tiefes Einsinken zu vermeiden und die Wirbelsäule gerade zu halten.", back: "Als Rückenschläfer profitierst Du von einer ausgewogenen Unterstützung, die die natürliche S-Form der Wirbelsäule erhält.", changing: "Da Du Deine Schlafposition häufig wechselst, empfehlen wir eine ausgewogene Festigkeit, die in allen Positionen Komfort bietet.", } if (positionExplanations[profile.sleepPosition as keyof typeof positionExplanations]) { explanations.push({ title: "Schlafposition-Optimierung", content: positionExplanations[profile.sleepPosition as keyof typeof positionExplanations], }) } } // Firmness explanation explanations.push({ title: "Ergonomische Anpassung", content: `Die ${firmness}-Härte bietet die perfekte Balance zwischen Komfort und Unterstützung für Deinen Körpertyp und gewährleistet erholsamen Schlaf.`, }) return explanations } } [V0_FILE]typescriptreact:file="lib/constants.ts" isMerged="true" export const PAIN_POINT_OPTIONS = [ "Schulterschmerzen", "Nackenschmerzen", "Rückenschmerzen (unterer Rücken)", "Rückenschmerzen (ganzer Rücken)", "Milbenallergien", "Hüftschmerzen", "Schwitzen in der Nacht", "Keine der Optionen trifft zu 😊", ] as const export const FIRMNESS_LEVELS = { H1: { value: 25, label: "Weich", color: "from-green-400 to-blue-400" }, H2: { value: 50, label: "Mittel-Weich", color: "from-blue-400 to-cyan-400" }, H3: { value: 75, label: "Mittel-Fest", color: "from-blue-500 to-purple-500" }, H4: { value: 90, label: "Fest", color: "from-purple-500 to-red-500" }, } as const export const SLEEP_POSITIONS = [ { value: "side", label: "auf der Seite" }, { value: "stomach", label: "auf dem Bauch" }, { value: "back", label: "auf dem Rücken" }, { value: "changing", label: "häufig wechselnd" }, ] as const export const BODY_TYPES = [ { value: "normal", label: "normal" }, { value: "slim", label: "schlank" }, { value: "curvy", label: "kurvig" }, { value: "unknown", label: "weiß nicht genau" }, ] as const export const NIGHT_MOVEMENT = [ { value: "sometimes", label: "manchmal" }, { value: "rarely", label: "eher selten" }, { value: "often", label: "eher oft" }, { value: "unknown", label: "weiß nicht genau" }, ] as const export const FIRMNESS_PREFERENCES = [ { value: "soft", label: "eher weiches Liegegefühl" }, { value: "firm", label: "eher festes Liegegefühl" }, { value: "no-preference", label: "keine Präferenz / Weiß nicht" }, ] as const export const GENDER_OPTIONS = [ { value: "male", label: "Mann" }, { value: "female", label: "Frau" }, { value: "prefer-not-to-say", label: "k.A." }, ] as const [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/mattress-advisor/welcome-step.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Bed, Clock, Target } from "lucide-react" interface WelcomeStepProps { onNext: () => void } export function WelcomeStep({ onNext }: WelcomeStepProps) { return (

Finde deine perfekte Matratze

Beantworte ein paar Fragen über deine Schlafgewohnheiten und wir empfehlen dir die ideale Matratze für erholsamen Schlaf.

Nur 2-3 Minuten

Schnell und einfach

Personalisierte Empfehlung

Basierend auf deinen Bedürfnissen

) } [V0_FILE]typescriptreact:file="components/mattress-advisor/body-metrics-step.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { GENDER_OPTIONS } from "../../lib/constants" import type { UserProfile } from "../../types/mattress-advisor" interface BodyMetricsStepProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function BodyMetricsStep({ profile, onUpdate, onNext, onPrev }: BodyMetricsStepProps) { return (

Deine Körpermaße

Diese Angaben helfen uns, die optimale Unterstützung zu finden.

Körpergröße

{profile.height}cm

onUpdate({ height: value[0] })} min={120} max={220} step={1} className="w-full" />

120cm 220cm

Körpergewicht

{profile.weight}kg

onUpdate({ weight: value[0] })} min={40} max={150} step={1} className="w-full" />

40kg 150kg

Biologisches Geschlecht

{GENDER_OPTIONS.map((option) => ( ))}

) } [V0_FILE]typescriptreact:file="components/mattress-advisor/sleep-habits-step.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { SLEEP_POSITIONS, BODY_TYPES, NIGHT_MOVEMENT } from "../../lib/constants" import type { UserProfile } from "../../types/mattress-advisor" interface SleepHabitsStepProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function SleepHabitsStep({ profile, onUpdate, onNext, onPrev }: SleepHabitsStepProps) { return (

Deine Schlafgewohnheiten

Erzähl uns, wie du normalerweise schläfst.

In der Regel liegst Du:

{SLEEP_POSITIONS.map((option) => ( ))}

Deine Körperform beschreibst Du eher:

{BODY_TYPES.map((option) => ( ))}

In der Nacht wälzt Du Dich:

{NIGHT_MOVEMENT.map((option) => ( ))}

) } [V0_FILE]typescriptreact:file="components/mattress-advisor/preferences-step.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FIRMNESS_PREFERENCES } from "../../lib/constants" import type { UserProfile } from "../../types/mattress-advisor" interface PreferencesStepProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function PreferencesStep({ profile, onUpdate, onNext, onPrev }: PreferencesStepProps) { return (

Deine Präferenzen

Wie magst du es am liebsten?

Unabhängig von dem für Dich richtigen Härtegrad bevorzugst Du ein:

{FIRMNESS_PREFERENCES.map((option) => ( ))}

) } [V0_FILE]typescriptreact:file="components/mattress-advisor/pain-points-step.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Check } from "lucide-react" import { PAIN_POINT_OPTIONS } from "../../lib/constants" import type { UserProfile } from "../../types/mattress-advisor" interface PainPointsStepProps { profile: UserProfile onUpdate: (updates: Partial) => void onNext: () => void onPrev: () => void } export function PainPointsStep({ profile, onUpdate, onNext, onPrev }: PainPointsStepProps) { const togglePainPoint = (painPoint: string) => { const isSelected = profile.painPoints.includes(painPoint) const newPainPoints = isSelected ? profile.painPoints.filter((p) => p !== painPoint) : [...profile.painPoints, painPoint] onUpdate({ painPoints: newPainPoints }) } return (

Beschwerden & Bedürfnisse

Du neigst zu: (Mehrfachauswahl möglich)

Wähle alle zutreffenden Punkte aus:

{PAIN_POINT_OPTIONS.map((option) => { const isSelected = profile.painPoints.includes(option) return ( ) })}

) } [V0_FILE]typescriptreact:file="mattress-advisor.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { X, ArrowLeft, Bed } from "lucide-react" import { useState } from "react" // Components import { ProgressBar } from "./components/progress-bar" import { WelcomeStep } from "./components/mattress-advisor/welcome-step" import { BodyMetricsStep } from "./components/mattress-advisor/body-metrics-step" import { SleepHabitsStep } from "./components/mattress-advisor/sleep-habits-step" import { PreferencesStep } from "./components/mattress-advisor/preferences-step" import { PainPointsStep } from "./components/mattress-advisor/pain-points-step" import { ResultsStep } from "./components/mattress-advisor/results-step" // Hooks import { useMattressAdvisor } from "./hooks/use-mattress-advisor" interface MattressAdvisorProps { isOpen?: boolean onClose?: () => void } export default function MattressAdvisor({ isOpen = true, onClose }: MattressAdvisorProps) { const [isGenerating, setIsGenerating] = useState(false) const { currentStep, profile, recommendations, updateProfile, nextStep, prevStep, generateRecommendations, getStepProgress, setCurrentStep, } = useMattressAdvisor() const handleNext = async () => { if (currentStep === "pain-points") { setIsGenerating(true) // Add a delay to show loading animation await new Promise((resolve) => setTimeout(resolve, 2000)) generateRecommendations() setIsGenerating(false) } else { nextStep() } } const handleRestart = () => { setCurrentStep("welcome") setIsGenerating(false) } if (!isOpen) return null return (

{currentStep !== "welcome" && currentStep !== "results" && !isGenerating && ( )}

Matratzen-Berater

{onClose && !isGenerating && ( )}

{currentStep !== "welcome" && currentStep !== "results" && !isGenerating && (

)}

{isGenerating && (

Analysiere deine Angaben...

Wir finden die perfekte Matratze für dich

)} {!isGenerating && ( <> {currentStep === "welcome" && } {currentStep === "body-metrics" && ( )} {currentStep === "sleep-habits" && ( )} {currentStep === "preferences" && ( )} {currentStep === "pain-points" && ( )} {currentStep === "results" && ( )} )}

) } [V0_FILE]typescriptreact:file="components/firmness-recommendation.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Info, ChevronRight } from "lucide-react" import { CircularProgress } from "./circular-progress" import { useState, useEffect } from "react" interface FirmnessRecommendationProps { firmness: string description: string isPartner?: boolean animated?: boolean } export function FirmnessRecommendation({ firmness, description, isPartner = false, animated = true, }: FirmnessRecommendationProps) { const [showContent, setShowContent] = useState(false) useEffect(() => { if (animated) { const timer = setTimeout(() => setShowContent(true), isPartner ? 800 : 400) return () => clearTimeout(timer) } else { setShowContent(true) } }, [animated, isPartner]) const getFirmnessValue = (firmness: string) => { switch (firmness) { case "H1": return 25 case "H2": return 50 case "H3": return 75 case "H4": return 90 default: return 75 } } return (

{isPartner ? "Härtegrad-Empfehlung für Dein(e) PartnerIn" : "Deine Härtegrad-Empfehlung"}

{firmness}

Ergonomischer Härtegrad-
Index: 61

{/* Firmness indicators */}

) } [V0_FILE]typescriptreact:file="components/mattress-3d-view.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { useState, useEffect } from "react" interface Mattress3DViewProps { animated?: boolean } export function Mattress3DView({ animated = true }: Mattress3DViewProps) { const [showContent, setShowContent] = useState(false) useEffect(() => { if (animated) { const timer = setTimeout(() => setShowContent(true), 1200) return () => clearTimeout(timer) } else { setShowContent(true) } }, [animated]) return (

Eure Topper-Empfehlung: Gel-Topper

{/* Floating animation effect */}

Eine ergonomische Schlafposition ist durch die Mozart 7-Zonen Matratze samt richtigem Härtegrad sichergestellt.

Damit Ihr Euch im neuen Bett auch richtig wohlfühlt, rundet der Gel-Topper Euer bevorzugtes Liegegefühl perfekt ab.

) } [V0_FILE]typescriptreact:file="components/recommendation-explanation.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight } from "lucide-react" import { CircularProgress } from "./circular-progress" import { useState, useEffect } from "react" interface RecommendationExplanationProps { firmness: string explanations: Array<{ title: string; content: string }> animated?: boolean } export function RecommendationExplanation({ firmness, explanations, animated = true }: RecommendationExplanationProps) { const [showContent, setShowContent] = useState(false) const [currentSlide, setCurrentSlide] = useState(0) useEffect(() => { if (animated) { const timer = setTimeout(() => setShowContent(true), 600) return () => clearTimeout(timer) } else { setShowContent(true) } }, [animated]) const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % explanations.length) } const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + explanations.length) % explanations.length) } return (

{/* Explanation Text */}

{explanations[currentSlide]?.title}

{explanations[currentSlide]?.content}

{/* Slide indicators */} {explanations.length > 1 && (

{explanations.map((_, index) => (

)}

{/* Circular Progress */}

{firmness}

Ergonomischer Härtegrad-
Index: 61

) } [V0_FILE]typescriptreact:file="components/confidence-guarantee.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Shield, RefreshCw, Heart } from "lucide-react" import { useState, useEffect } from "react" interface ConfidenceGuaranteeProps { animated?: boolean } export function ConfidenceGuarantee({ animated = true }: ConfidenceGuaranteeProps) { const [showContent, setShowContent] = useState(false) useEffect(() => { if (animated) { const timer = setTimeout(() => setShowContent(true), 1600) return () => clearTimeout(timer) } else { setShowContent(true) } }, [animated]) return (

Angst vor der falschen Wahl?

Dazu gibt es keinen Grund 😊 Ganze 94% unserer Kunden sind mit ihrer Empfehlung sofort zufrieden. Und für alle anderen bieten wir die Möglichkeit eines kostenlosen Matratzentauschs. Solltest Du mit dem Härtegrad nicht zufrieden sein, liefern wir Dir eine neue Matratze und nehmen die alte wieder mit - für Dich 100% kostenlos!

94% zufrieden

Kostenloser Tausch

100% Garantie

) } [V0_FILE]typescriptreact:file="components/mattress-advisor/results-step.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Award, ShoppingCart, Info, ArrowRight, RotateCcw } from "lucide-react" import { useState, useEffect } from "react" import { FirmnessRecommendation } from "../../components/firmness-recommendation" import { Mattress3DView } from "../../components/mattress-3d-view" import { RecommendationExplanation } from "../../components/recommendation-explanation" import { ConfidenceGuarantee } from "../../components/confidence-guarantee" import { MattressCalculator } from "../../lib/mattress-calculator" import type { MattressRecommendation } from "../../types/mattress-advisor" import type { UserProfile } from "../../types/mattress-advisor" interface ResultsStepProps { recommendations: MattressRecommendation[] profile: UserProfile onRestart: () => void } export function ResultsStep({ recommendations, profile, onRestart }: ResultsStepProps) { const [showResults, setShowResults] = useState(false) const [showExplanation, setShowExplanation] = useState(false) useEffect(() => { const timer = setTimeout(() => setShowResults(true), 100) return () => clearTimeout(timer) }, []) const firmness = MattressCalculator.calculateFirmness(profile) const explanations = MattressCalculator.getRecommendationExplanations(profile, firmness) if (showExplanation) { return (

Warum wir {firmness} empfehlen

) } return (

{/* Animated Header */}

Eure Empfehlungen auf Basis der Deep-Sleep-Formel von Mozart

{/* Firmness Recommendations */}

{/* 3D Mattress View */} {/* Action Buttons */}

{/* Confidence Guarantee */}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 96%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96%; --accent-foreground: 222.2 84% 4.9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 84% 4.9%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 94.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; box-sizing: border-box; margin: 0; padding: 0; } body { @apply bg-background text-foreground; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #333; } } /* Animations */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Responsive design */ @media (max-width: 768px) { .roomGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } } @media (max-width: 480px) { .container { padding: 16px !important; } .headerCard { padding: 20px !important; } .headerTitle { font-size: 20px !important; } .headerSubtitle { font-size: 14px !important; } .generateButton { padding: 6px 10px !important; font-size: 11px !important; } } [V0_FILE]typescriptreact:file="components/universal-upload.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Camera, Upload, ImageIcon, X, Check, AlertCircle } from "lucide-react" interface UniversalUploadProps { onFileSelect?: (file: File) => void onCapture?: (file: File) => void acceptedTypes?: string[] maxSize?: number // in MB className?: string } export function UniversalUpload({ onFileSelect, onCapture, acceptedTypes = ["image/*"], maxSize = 10, className = "", }: UniversalUploadProps) { const [isDragging, setIsDragging] = useState(false) const [isCapturing, setIsCapturing] = useState(false) const [uploadedFile, setUploadedFile] = useState(null) const [previewUrl, setPreviewUrl] = useState(null) const [error, setError] = useState(null) const [uploadProgress, setUploadProgress] = useState(0) const fileInputRef = useRef(null) const cameraInputRef = useRef(null) const validateFile = (file: File): string | null => { if (maxSize && file.size > maxSize * 1024 * 1024) { return `File size must be less than ${maxSize}MB` } const isValidType = acceptedTypes.some((type) => { if (type === "image/*") return file.type.startsWith("image/") return file.type === type }) if (!isValidType) { return `File type not supported. Accepted: ${acceptedTypes.join(", ")}` } return null } const processFile = useCallback( (file: File) => { const validationError = validateFile(file) if (validationError) { setError(validationError) return } setError(null) setUploadedFile(file) // Create preview for images if (file.type.startsWith("image/")) { const url = URL.createObjectURL(file) setPreviewUrl(url) } // Simulate upload progress setUploadProgress(0) const interval = setInterval(() => { setUploadProgress((prev) => { if (prev >= 100) { clearInterval(interval) onFileSelect?.(file) return 100 } return prev + Math.random() * 30 }) }, 200) }, [maxSize, acceptedTypes, onFileSelect], ) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(false) }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) const files = Array.from(e.dataTransfer.files) if (files.length > 0) { processFile(files[0]) } }, [processFile], ) const handleFileSelect = useCallback( (e: React.ChangeEvent) => { const files = e.target.files if (files && files.length > 0) { processFile(files[0]) } }, [processFile], ) const handleCameraCapture = useCallback( (e: React.ChangeEvent) => { const files = e.target.files if (files && files.length > 0) { setIsCapturing(false) processFile(files[0]) onCapture?.(files[0]) } }, [processFile, onCapture], ) const openFileDialog = () => { fileInputRef.current?.click() } const openCamera = () => { setIsCapturing(true) cameraInputRef.current?.click() } const removeFile = () => { setUploadedFile(null) setPreviewUrl(null) setUploadProgress(0) setError(null) if (previewUrl) { URL.revokeObjectURL(previewUrl) } } const getFileSize = (bytes: number) => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } return (

{/* Hidden file inputs */} {!uploadedFile ? ( {/* Upload Icon */}

{/* Main Text */}

{isDragging ? "Drop your file here" : "Upload your photo"}

Drag and drop, or click to browse

{/* Action Buttons */}

{/* File Info */}

Supported: {acceptedTypes.join(", ")}

Max size: {maxSize}MB

{/* Error Message */} {error && (

{error}

)} ) : ( /* File Preview */ {/* Preview Header */}

{uploadProgress === 100 ? ( ) : ( )}

{uploadedFile.name}

{getFileSize(uploadedFile.size)}

{/* Image Preview */} {previewUrl && (

{uploadProgress < 100 && (

Uploading... {Math.round(uploadProgress)}%

)}

)} {/* Progress Bar */} {uploadProgress < 100 && (

)} {/* Success State */} {uploadProgress === 100 && (

✓ Upload completed successfully!

)} )}

) } [V0_FILE]typescriptreact:file="upload-demo.tsx" isMerged="true" "use client" import { useState } from "react" import { UniversalUpload } from "./components/universal-upload" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function UploadDemo() { const [selectedFile, setSelectedFile] = useState(null) const [capturedFile, setCapturedFile] = useState(null) const handleFileSelect = (file: File) => { setSelectedFile(file) console.log("File selected:", file) } const handleCapture = (file: File) => { setCapturedFile(file) console.log("Photo captured:", file) } return (

Universal Upload Component {/* Debug Info */} {(selectedFile || capturedFile) && ( Upload Results {selectedFile && (

Selected File:

{selectedFile.name}

{selectedFile.type}

{(selectedFile.size / 1024 / 1024).toFixed(2)} MB

)} {capturedFile && (

Captured Photo:

{capturedFile.name}

{capturedFile.type}

{(capturedFile.size / 1024 / 1024).toFixed(2)} MB

)} )}

) } [V0_FILE]typescriptreact:file="app/components/universal-upload.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Upload, X, Check, AlertCircle } from "lucide-react" interface UniversalUploadProps { onFileSelect?: (file: File) => void onCapture?: (file: File) => void acceptedTypes?: string[] maxSize?: number // in MB className?: string } export function UniversalUpload({ onFileSelect, onCapture, acceptedTypes = ["image/*"], maxSize = 10, className = "", }: UniversalUploadProps) { const [isDragging, setIsDragging] = useState(false) const [isCapturing, setIsCapturing] = useState(false) const [uploadedFile, setUploadedFile] = useState(null) const [previewUrl, setPreviewUrl] = useState(null) const [error, setError] = useState(null) const [uploadProgress, setUploadProgress] = useState(0) const [isIOS, setIsIOS] = useState(false) const [isTouchDevice, setIsTouchDevice] = useState(false) const fileInputRef = useRef(null) const cameraInputRef = useRef(null) // Detect iOS and touch devices useEffect(() => { const detectDevice = () => { const isIOSDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) const isTouchSupported = "ontouchstart" in window || navigator.maxTouchPoints > 0 setIsIOS(isIOSDevice) setIsTouchDevice(isTouchSupported) } detectDevice() }, []) const validateFile = (file: File): string | null => { if (maxSize && file.size > maxSize * 1024 * 1024) { return `File size must be less than ${maxSize}MB` } const isValidType = acceptedTypes.some((type) => { if (type === "image/*") return file.type.startsWith("image/") return file.type === type }) if (!isValidType) { return `File type not supported. Accepted: ${acceptedTypes.join(", ")}` } return null } const processFile = useCallback( (file: File) => { const validationError = validateFile(file) if (validationError) { setError(validationError) return } setError(null) setUploadedFile(file) // Create preview for images if (file.type.startsWith("image/")) { const url = URL.createObjectURL(file) setPreviewUrl(url) } // Simulate upload progress setUploadProgress(0) const interval = setInterval(() => { setUploadProgress((prev) => { if (prev >= 100) { clearInterval(interval) onFileSelect?.(file) return 100 } return prev + Math.random() * 30 }) }, 200) }, [maxSize, acceptedTypes, onFileSelect], ) // Touch-friendly drag handlers const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) const files = Array.from(e.dataTransfer.files) if (files.length > 0) { processFile(files[0]) } }, [processFile], ) // Touch event handlers const handleTouchStart = useCallback( (e: React.TouchEvent) => { if (isTouchDevice) { setIsDragging(true) } }, [isTouchDevice], ) const handleTouchEnd = useCallback( (e: React.TouchEvent) => { if (isTouchDevice) { setIsDragging(false) } }, [isTouchDevice], ) const handleFileSelect = useCallback( (e: React.ChangeEvent) => { const files = e.target.files if (files && files.length > 0) { processFile(files[0]) } // Reset input value for iOS compatibility if (e.target) { e.target.value = "" } }, [processFile], ) const handleCameraCapture = useCallback( (e: React.ChangeEvent) => { const files = e.target.files if (files && files.length > 0) { setIsCapturing(false) processFile(files[0]) onCapture?.(files[0]) } // Reset input value for iOS compatibility if (e.target) { e.target.value = "" } }, [processFile, onCapture], ) const openFileDialog = useCallback(() => { if (fileInputRef.current) { fileInputRef.current.click() } }, []) const openCamera = useCallback(() => { setIsCapturing(true) if (cameraInputRef.current) { cameraInputRef.current.click() } }, []) const removeFile = () => { setUploadedFile(null) setPreviewUrl(null) setUploadProgress(0) setError(null) if (previewUrl) { URL.revokeObjectURL(previewUrl) } } const getFileSize = (bytes: number) => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } return (

{/* Hidden file inputs with iOS-specific attributes */} {!uploadedFile ? ( {/* Upload Icon */}

{/* Main Text */}

{isDragging ? "Drop here" : isTouchDevice ? "Tap to upload" : "Upload"}

{/* Touch-optimized Action Buttons */}

{/* Error Message */} {error && (

Error

)} ) : ( /* File Preview - Touch-optimized */ {/* Preview Header */}

{uploadProgress === 100 ? ( ) : ( )}

{uploadedFile.name}

{getFileSize(uploadedFile.size)}

{/* Progress Bar */} {uploadProgress < 100 && (

)} )}

) } [V0_FILE]png:file="public/images/sofa-orange.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-le30QeYTiT8EmfC5UgpSyUc9LQCJ67.png" isMerged="true" [V0_FILE]typescriptreact:file="furniture-product-view.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Eye, Grid3x3, FileText, LayoutGrid, Layers, Sparkles, Share2, Download, ChevronLeft, ChevronRight, Pencil, ShoppingCart, RotateCw, Maximize2, } from "lucide-react" export default function FurnitureProductView() { const [selectedStyle, setSelectedStyle] = useState("Boho") const styles = [ { name: "Boho", image: "/placeholder.svg?height=100&width=120" }, { name: "Südtirol", image: "/placeholder.svg?height=100&width=120" }, { name: "Modern", image: "/placeholder.svg?height=100&width=120" }, { name: "Skandi", image: "/placeholder.svg?height=100&width=120" }, { name: "Alzey", image: "/placeholder.svg?height=100&width=120" }, { name: "Elegant", image: "/placeholder.svg?height=100&width=120" }, ] return (

{/* Left Sidebar */}

{/* Bottom icons */}

{/* Main 3D View Area */}

{/* Breadcrumb */}

Kollektionen Modelle Information Planung Artikel

{/* Product Title */}

CLASSICS

4.095,00 €

{/* 3D Viewer */}

{/* View Controls */}

{/* Right Configuration Panel */}

{/* Success Header */}

🎉

Fertig konfiguriert – weiter geht's!

🚀

{/* Price */}

4.095,00 €

{/* Main CTA */} {/* Action Buttons */}

{/* Progress */}

44%

{/* KI Visualization Section */}

Jetzt neu: KI-Visualisierung

Sehen Sie, wie Ihre Konfiguration in verschiedenen Einrichtungsstilen wirkt.

{/* Style Grid */}

{styles.slice(0, 3).map((style) => ( ))}

{styles.slice(3, 6).map((style) => ( ))}

{/* Dimensions */}

Gesamtmaße

Breite × Tiefe × Höhe

244 × 97 × 77 cm

{/* Try at Home */} {/* Your Selection */}

Ihre Auswahl

Armlehnen

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="furniture-product-layout.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Eye, Grid3x3, FileText, LayoutGrid, Layers, Sparkles, Share2, Download, ChevronLeft, ChevronRight, Pencil, ShoppingCart, RotateCw, Maximize2, Menu, Settings, Ruler, } from "lucide-react" export default function FurnitureProductLayout() { const [selectedStyle, setSelectedStyle] = useState("Boho") const styles = [ { name: "Boho", image: "/boho-living-room.jpg" }, { name: "Südtirol", image: "/alpine-interior.jpg" }, { name: "Modern", image: "/modern-living-room.png" }, { name: "Skandi", image: "/scandinavian-interior.png" }, { name: "Alzey", image: "/classic-interior.jpg" }, { name: "Elegant", image: "/elegant-living-room.png" }, ] const navigationIcons = [ { icon: ChevronRight, label: "Expand" }, { icon: Eye, label: "View" }, { icon: FileText, label: "Documents" }, { icon: Grid3x3, label: "Grid 3x3" }, { icon: LayoutGrid, label: "Layout" }, { icon: LayoutGrid, label: "Grid" }, { icon: Layers, label: "Layers" }, { icon: Menu, label: "Menu" }, { icon: Settings, label: "Settings" }, ] return (

{/* Left Sidebar */}

{navigationIcons.map((item, index) => ( ))} {/* Spacer */}

{/* AR Button */}

{/* Bottom icons */}

{/* Main Content Area */}

{/* Breadcrumb Navigation */}

Kollektionen Modelle Information Planung Artikel

{/* Product Title and Share Button */}

CLASSICS

4.095,00 €

{/* 3D Viewer Area */}

{/* Placeholder for 3D Model */}

{/* 3D View Controls - Bottom Center */}

{/* Left side tools */}

{/* Right Configuration Panel */}

{/* Success Header */}

🎉

Fertig konfiguriert – weiter geht's!

🚀

{/* Price Display */}

4.095,00 €

{/* Main CTA Button */} {/* Action Buttons Row */}

{/* Progress Bar */}

44%

{/* KI Visualization Section */}

Jetzt neu: KI-Visualisierung

Sehen Sie, wie Ihre Konfiguration in verschiedenen Einrichtungsstilen wirkt.

{/* Style Grid - First Row */}

{styles.slice(0, 3).map((style) => ( ))}

{/* Style Grid - Second Row */}

{styles.slice(3, 6).map((style) => ( ))}

{/* Navigation Arrows */}

{/* Dimensions Section */}

Gesamtmaße

Breite × Tiefe × Höhe

244 × 97 × 77 cm

{/* Try at Home Button */} {/* Your Selection Section */}

Ihre Auswahl

Armlehnenoptik

Armlehnen

{/* Sticky Bottom Navigation */}

) } [V0_FILE]jpg:file="public/boho-living-room.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/boho-living-room-kPFx1cnZIeLk49T5y1eaFPV8NPSLYy.jpg" isMerged="true" [V0_FILE]jpg:file="public/alpine-interior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/alpine-interior-UHBCMMa58tSwTD2fgy5lkxtES194cd.jpg" isMerged="true" [V0_FILE]png:file="public/modern-living-room.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-living-room-HxAEnPwOVpztARtVV4TiTwU1x3DSnH.png" isMerged="true" [V0_FILE]png:file="public/scandinavian-interior.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/scandinavian-interior-shkSCJBhlcMXLXuELaz9ec8zO7LKBk.png" isMerged="true" [V0_FILE]jpg:file="public/classic-interior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-interior-K7VKZ4mBrxTmMprxJKX4kJVbFzSUms.jpg" isMerged="true" [V0_FILE]png:file="public/elegant-living-room.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elegant-living-room-HnZOzRKzfJFU65gTMRmtGdQG6YAVop.png" isMerged="true" [V0_FILE]jpg:file="public/orange-coral-modern-sofa-3d-render.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/orange-coral-modern-sofa-3d-render-uuArJRYWsAaAXAEF3U9qlwxKCCMrww.jpg" isMerged="true" [V0_FILE]jpg:file="public/sofa-armrest.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sofa-armrest-gGOImhVcnoNOXejHajSEP6Q6cftN2N.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/components/breadcrumb-navigation.tsx" isMerged="true" "use client" import { ChevronRight } from "lucide-react" export function BreadcrumbNavigation() { return (

Kollektionen Modelle Information Planung Artikel

) } [V0_FILE]typescriptreact:file="app/components/product-header.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Share2 } from "lucide-react" interface ProductHeaderProps { title: string price: string } export function ProductHeader({ title, price }: ProductHeaderProps) { return (

{title}

{price}

) } [V0_FILE]typescriptreact:file="app/furniture-product-layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import type { ReactNode } from "react" import { Eye, Grid3x3, FileText, Layers, Menu, Settings, Package, Users, BarChart3 } from "lucide-react" import { BreadcrumbNavigation } from "./components/breadcrumb-navigation" import { ProductHeader } from "./components/product-header" import { ProductViewer3D } from "./components/product-viewer-3d" import { ConfigurationPanel } from "./components/configuration-panel" interface FurnitureProductLayoutProps { children: ReactNode } const styles = [ { name: "Boho", image: "/boho-living-room.jpg" }, { name: "Südtirol", image: "/alpine-interior.jpg" }, { name: "Modern", image: "/modern-living-room.png" }, { name: "Skandi", image: "/scandinavian-interior.png" }, { name: "Alzey", image: "/classic-interior.jpg" }, { name: "Elegant", image: "/elegant-living-room.png" }, ] export default function FurnitureProductLayout() { const [activeNav, setActiveNav] = useState("eye") const [selectedStyle, setSelectedStyle] = useState("Boho") const navItems = [ { id: "eye", icon: Eye, label: "View" }, { id: "text", icon: FileText, label: "Documents" }, { id: "grid1", icon: Grid3x3, label: "Grid" }, { id: "layers", icon: Layers, label: "Layers" }, { id: "grid2", icon: Grid3x3, label: "Grid 2" }, { id: "grid3", icon: Grid3x3, label: "Grid 3" }, { id: "settings", icon: Settings, label: "Settings" }, { id: "package", icon: Package, label: "Package" }, { id: "users", icon: Users, label: "Users" }, { id: "chart", icon: BarChart3, label: "Analytics" }, { id: "menu", icon: Menu, label: "Menu" }, ] return (

{/* Left Sidebar - Dark */}

{navItems.map((item) => ( ))} {/* AR Button at Bottom */}

{/* Main Content Area */}

{/* Breadcrumb Navigation */} {/* Product Header */} {/* 3D Viewer */}

{/* Right Configuration Panel */}

) } [V0_FILE]typescriptreact:file="app/components/configuration-panel.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Share2, Download, ChevronLeft, Pencil, ShoppingCart, Sparkles, Ruler } from "lucide-react" import { KIVisualizationSection } from "./ki-visualization-section" interface Style { name: string image: string isRendered?: boolean } interface ConfigurationPanelProps { price: string dimensions: string styles: Style[] isAnonymous?: boolean maxAnonymousRenderings?: number } export function ConfigurationPanel({ price, dimensions, styles, isAnonymous = true, maxAnonymousRenderings = 2, }: ConfigurationPanelProps) { const handleStyleSelect = (styleName: string) => { console.log("Selected style:", styleName) } const handleGenerateRendering = async (styleName: string) => { console.log("Generating rendering for:", styleName) // Here you would call your API to generate the AI rendering } return (

{/* Success Header */}

🎉

Fertig konfiguriert – weiter geht's!

🚀

{/* Price Display */}

{price}

{/* Main CTA Button */} {/* Action Buttons Row */}

{/* KI Visualization Section */} {/* Dimensions Section */}

Gesamtmaße

Breite × Tiefe × Höhe

{dimensions}

{/* Try at Home Button */} {/* Your Selection Section */}

Ihre Auswahl

Armlehnenoptik

Armlehnen

{/* Sticky Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Input = React.forwardRef>( ({ className, type, ...props }, ref) => { return ( ) }, ) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/components/lead-capture-modal.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { X, Sparkles, Mail, User } from "lucide-react" interface LeadCaptureModalProps { isOpen: boolean onClose: () => void onSubmit: (email: string, name: string) => void maxRenderings: number } export function LeadCaptureModal({ isOpen, onClose, onSubmit, maxRenderings }: LeadCaptureModalProps) { const [email, setEmail] = useState("") const [name, setName] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [errors, setErrors] = useState<{ email?: string; name?: string }>({}) if (!isOpen) return null const validateForm = () => { const newErrors: { email?: string; name?: string } = {} if (!email.trim()) { newErrors.email = "E-Mail ist erforderlich" } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { newErrors.email = "Ungültige E-Mail-Adresse" } if (!name.trim()) { newErrors.name = "Name ist erforderlich" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) return setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1000)) onSubmit(email, name) setIsSubmitting(false) setEmail("") setName("") setErrors({}) } return (

Unbegrenzte KI-Renderings freischalten

Sie haben Ihre {maxRenderings} kostenlosen Renderings genutzt. Registrieren Sie sich für unbegrenzten Zugang!

Ihr Name *

{ setName(e.target.value) setErrors((prev) => ({ ...prev, name: undefined })) }} placeholder="Max Mustermann" className={`pl-10 ${errors.name ? "border-red-500 focus:ring-red-500" : ""}`} />

{errors.name &&

{errors.name}

}

Ihre E-Mail-Adresse *

{ setEmail(e.target.value) setErrors((prev) => ({ ...prev, email: undefined })) }} placeholder="max@beispiel.de" className={`pl-10 ${errors.email ? "border-red-500 focus:ring-red-500" : ""}`} />

{errors.email &&

{errors.email}

}

Ihre Vorteile:

✓ Unbegrenzte KI-Visualisierungen
✓ Konfigurationen speichern und teilen
✓ Exklusive Angebote und Updates
✓ Persönliche Beratung durch Experten

Mit der Registrierung akzeptieren Sie unsere{" "} Datenschutzbestimmungen

) } [V0_FILE]typescriptreact:file="app/components/lead-capture/soft-gate-approach.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Mail, X, Sparkles } from "lucide-react" interface SoftGateApproachProps { roomImage: string roomName: string onSubmit: (email: string, name: string) => void } export function SoftGateApproach({ roomImage, roomName, onSubmit }: SoftGateApproachProps) { const [email, setEmail] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email.trim()) return setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1000)) onSubmit(email, "") setIsSubmitting(false) } return (

Fast geschafft!

Sehen Sie Ihr {roomName}-Rendering in voller Auflösung

Kostenlos • Keine Kreditkarte erforderlich

) } [V0_FILE]typescriptreact:file="app/components/lead-capture/value-first-approach.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Mail, X, Sparkles, Check } from "lucide-react" interface ValueFirstApproachProps { roomImage: string roomName: string onSubmit: (email: string, name: string) => void } export function ValueFirstApproach({ roomImage, roomName, onSubmit }: ValueFirstApproachProps) { const [email, setEmail] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email.trim()) return setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1000)) onSubmit(email, "") setIsSubmitting(false) } return (

Standard Qualität

512 × 384 px • Niedriger Details

Premium Qualität (Kostenlos)

2048 × 1536 px • Ultra HD Details

Upgrade zu Premium Qualität

Erhalten Sie Ihr {roomName}-Rendering in höchster Qualität

{["4x höhere Auflösung", "Photorealistische Details", "Sofortiger Download"].map((benefit) => (

{benefit}

))}

) } [V0_FILE]typescriptreact:file="app/components/lead-capture/progressive-approach.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Mail, User, X, ArrowRight, Sparkles } from "lucide-react" interface ProgressiveApproachProps { roomImage: string roomName: string onSubmit: (email: string, name: string) => void } export function ProgressiveApproach({ roomImage, roomName, onSubmit }: ProgressiveApproachProps) { const [step, setStep] = useState(1) const [email, setEmail] = useState("") const [name, setName] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const handleEmailSubmit = (e: React.FormEvent) => { e.preventDefault() if (!email.trim()) return setStep(2) } const handleNameSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!name.trim()) return setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1000)) onSubmit(email, name) setIsSubmitting(false) } return (

= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-500" }`} > 1

= 2 ? "bg-blue-600" : "bg-gray-200"}`} />

= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-500" }`} > 2

{step === 1 ? (

Schritt 1 von 2

Wo sollen wir Ihr {roomName}-Rendering hinsenden?

100% kostenlos • Keine Zahlungsinformationen erforderlich

) : (

Schritt 2 von 2

Wie dürfen wir Sie ansprechen?

)}

) } [V0_FILE]typescriptreact:file="app/components/lead-capture/social-proof-approach.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Mail, X, Star, Users, Sparkles } from "lucide-react" interface SocialProofApproachProps { roomImage: string roomName: string onSubmit: (email: string, name: string) => void } export function SocialProofApproach({ roomImage, roomName, onSubmit }: SocialProofApproachProps) { const [email, setEmail] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email.trim()) return setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1000)) onSubmit(email, "") setIsSubmitting(false) } const testimonials = [ { name: "Lisa M.", text: "Die KI-Visualisierung hat mir die Entscheidung so viel leichter gemacht!", rating: 5 }, { name: "Thomas K.", text: "Beeindruckend realistisch. Genau so sieht es jetzt bei mir aus.", rating: 5 }, { name: "Sarah B.", text: "Kostenlos und in Sekunden fertig. Super Service!", rating: 5 }, ] return (

2.847 Nutzer haben heute registriert

Schließen Sie sich Tausenden zufriedenen Kunden an

{[...Array(5)].map((_, i) => ( ))} 4.9 von 5 (1.234 Bewertungen)

Erhalten Sie Ihr {roomName}-Rendering in höchster Qualität

{testimonials.map((testimonial, index) => (

{[...Array(testimonial.rating)].map((_, i) => ( ))}

"{testimonial.text}"

{testimonial.name}

))}

15.000+

Renderings erstellt

98%

Zufriedenheit

< 30s

Erstellung

100% kostenlos • Keine Kreditkarte • Jederzeit kündbar

) } [V0_FILE]typescriptreact:file="app/components/lead-capture/urgency-approach.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Mail, X, Clock, Sparkles, AlertCircle } from "lucide-react" interface UrgencyApproachProps { roomImage: string roomName: string onSubmit: (email: string, name: string) => void } export function UrgencyApproach({ roomImage, roomName, onSubmit }: UrgencyApproachProps) { const [email, setEmail] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [timeLeft, setTimeLeft] = useState(300) // 5 minutes in seconds useEffect(() => { const timer = setInterval(() => { setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0)) }, 1000) return () => clearInterval(timer) }, []) const minutes = Math.floor(timeLeft / 60) const seconds = timeLeft % 60 const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!email.trim()) return setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1000)) onSubmit(email, "") setIsSubmitting(false) } return (

⚡ Limitiertes Angebot!

Nur noch begrenzte Premium-Renderings verfügbar

{String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}

Letzte Chance!

Sichern Sie sich jetzt Ihr kostenloses {roomName}-Rendering, bevor das Angebot abläuft

Warum jetzt handeln?

✓ Nur noch 7 Premium-Slots heute verfügbar
✓ Nach Ablauf: Normale Wartezeit von 24-48h
✓ Sofortiger Zugang zu allen Stilrichtungen

{[...Array(5)].map((_, i) => (

{String.fromCharCode(65 + i)}

))}

237 Personen schauen sich dieses Angebot gerade an

100% kostenlos • Keine Zahlungsinformationen • Angebot endet automatisch

) } [V0_FILE]typescriptreact:file="app/components/lead-capture/approach-selector.tsx" isEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" export type LeadCaptureApproach = "modal" | "soft-gate" | "value-first" | "progressive" | "social-proof" | "urgency" interface ApproachSelectorProps { selectedApproach: LeadCaptureApproach onSelectApproach: (approach: LeadCaptureApproach) => void } export function ApproachSelector({ selectedApproach, onSelectApproach }: ApproachSelectorProps) { const approaches: { value: LeadCaptureApproach; label: string; description: string }[] = [ { value: "modal", label: "💬 Classic Modal", description: "Traditional approach" }, { value: "soft-gate", label: "🔒 Soft Gate", description: "Blurred preview + unlock" }, { value: "value-first", label: "⭐ Value First", description: "Low-res vs high-res" }, { value: "progressive", label: "📝 Progressive", description: "2-step form" }, { value: "social-proof", label: "👥 Social Proof", description: "Testimonials + stats" }, { value: "urgency", label: "⏰ Urgency", description: "Countdown timer" }, ] return (

🧪 Test Lead Capture Approach:

{approaches.map((approach) => ( ))}

) } [V0_FILE]typescriptreact:file="app/components/room-generation/generation-mode-selector.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Grid3x3, Images, ArrowLeftRight, Sparkles, Brain } from "lucide-react" export type GenerationMode = "grid" | "carousel" | "comparison" | "prompt" | "quiz" interface GenerationModeSelectorProps { selectedMode: GenerationMode onSelectMode: (mode: GenerationMode) => void } const modes = [ { id: "grid" as const, label: "Grid View", icon: Grid3x3, emoji: "🔲" }, { id: "carousel" as const, label: "Carousel", icon: Images, emoji: "🎠" }, { id: "comparison" as const, label: "Comparison", icon: ArrowLeftRight, emoji: "⚖️" }, { id: "prompt" as const, label: "AI Prompt", icon: Sparkles, emoji: "✨" }, { id: "quiz" as const, label: "Style Quiz", icon: Brain, emoji: "🎯" }, ] export function GenerationModeSelector({ selectedMode, onSelectMode }: GenerationModeSelectorProps) { return (

🧪 Test Generation Modes

{modes.find((m) => m.id === selectedMode)?.label}

{modes.map((mode) => { const Icon = mode.icon return ( ) })}

Wähle verschiedene Modi um die beste UX für deine Nutzer zu testen

) } [V0_FILE]typescriptreact:file="app/components/ki-visualization-section.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card } from "@/components/ui/card" import { ApproachSelector, type LeadCaptureApproach } from "./lead-capture/approach-selector" import { SoftGateApproach } from "./lead-capture/soft-gate-approach" import { ValueFirstApproach } from "./lead-capture/value-first-approach" import { ProgressiveApproach } from "./lead-capture/progressive-approach" import { SocialProofApproach } from "./lead-capture/social-proof-approach" import { UrgencyApproach } from "./lead-capture/urgency-approach" import { LeadCaptureModal } from "./lead-capture-modal" import { GenerationModeSelector, type GenerationMode } from "./room-generation/generation-mode-selector" import { GridMode } from "./room-generation/grid-mode" import { CarouselMode } from "./room-generation/carousel-mode" import { ComparisonMode } from "./room-generation/comparison-mode" import { PromptMode } from "./room-generation/prompt-mode" import { QuizMode } from "./room-generation/quiz-mode" interface RoomStyle { name: string image: string isRendered?: boolean } interface KIVisualizationSectionProps { styles: RoomStyle[] onStyleSelect?: (styleName: string) => void onGenerateRendering?: (styleName: string) => void isAnonymous?: boolean maxAnonymousRenderings?: number } export function KIVisualizationSection({ styles, onStyleSelect, onGenerateRendering, isAnonymous = true, maxAnonymousRenderings = 2, }: KIVisualizationSectionProps) { const [selectedStyle, setSelectedStyle] = useState(null) const [renderingStyles, setRenderingStyles] = useState>(new Set()) const [renderedStyles, setRenderedStyles] = useState>(new Set()) const [showLeadCapture, setShowLeadCapture] = useState(false) const [pendingGenerateStyle, setPendingGenerateStyle] = useState(null) const [selectedApproach, setSelectedApproach] = useState("modal") const [generationMode, setGenerationMode] = useState("grid") const handleStyleClick = (styleName: string) => { setSelectedStyle(styleName) onStyleSelect?.(styleName) } const handleGenerateClick = async (styleName: string, e: React.MouseEvent) => { e.stopPropagation() if (isAnonymous && renderedStyles.size >= maxAnonymousRenderings) { setPendingGenerateStyle(styleName) setShowLeadCapture(true) return } setRenderingStyles((prev) => new Set(prev).add(styleName)) onGenerateRendering?.(styleName) await new Promise((resolve) => setTimeout(resolve, 3000)) setRenderingStyles((prev) => { const next = new Set(prev) next.delete(styleName) return next }) setRenderedStyles((prev) => new Set(prev).add(styleName)) } const handleUnlockClick = (styleName: string, e: React.MouseEvent) => { e.stopPropagation() setPendingGenerateStyle(styleName) setShowLeadCapture(true) } const handleLeadSubmit = async (email: string, name: string) => { console.log("Lead captured:", { email, name, approach: selectedApproach }) setShowLeadCapture(false) if (pendingGenerateStyle) { await handleGenerateClick(pendingGenerateStyle, { stopPropagation: () => {} } as React.MouseEvent) setPendingGenerateStyle(null) } } const handleCloseLeadCapture = () => { setShowLeadCapture(false) setPendingGenerateStyle(null) } const handleGenerateCustom = async (prompt: string) => { console.log("Generating custom room with prompt:", prompt) if (isAnonymous && renderedStyles.size >= maxAnonymousRenderings) { setPendingGenerateStyle("custom-prompt") setShowLeadCapture(true) return } setRenderingStyles((prev) => new Set(prev).add("custom-prompt")) onGenerateRendering?.("custom-prompt") await new Promise((resolve) => setTimeout(resolve, 3000)) setRenderingStyles((prev) => { const next = new Set(prev) next.delete("custom-prompt") return next }) setRenderedStyles((prev) => new Set(prev).add("custom-prompt")) } const hasReachedLimit = isAnonymous && renderedStyles.size >= maxAnonymousRenderings const renderLeadCapture = () => { if (!showLeadCapture || !pendingGenerateStyle) return null const styleData = styles.find((s) => s.name === pendingGenerateStyle) || { name: "Custom Prompt", image: "/placeholder.svg", } const props = { roomImage: styleData.image, roomName: styleData.name, onSubmit: handleLeadSubmit, } switch (selectedApproach) { case "soft-gate": return case "value-first": return case "progressive": return case "social-proof": return case "urgency": return case "modal": default: return ( ) } } return ( <>

Jetzt neu: KI-Visualisierung

Sehen Sie, wie Ihre Konfiguration in verschiedenen Einrichtungsstilen wirkt.

{isAnonymous && generationMode !== "prompt" && generationMode !== "quiz" && (

{renderedStyles.size} von {maxAnonymousRenderings} kostenlosen Renderings genutzt {hasReachedLimit && ( <>
Registrieren Sie sich für unbegrenzte Renderings )}

)} {generationMode === "grid" && ( )} {generationMode === "carousel" && ( )} {generationMode === "comparison" && ( )} {generationMode === "prompt" && ( )} {generationMode === "quiz" && ( )} {renderLeadCapture()} ) } [V0_FILE]typescriptreact:file="app/components/room-generation/grid-mode.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Sparkles, Loader2, Lock } from "lucide-react" interface GridModeProps { styles: Array<{ name: string; image: string }> renderedStyles: Set renderingStyles: Set selectedStyle: string | null hasReachedLimit: boolean onStyleSelect: (styleName: string) => void onGenerateClick: (styleName: string, e: React.MouseEvent) => void onUnlockClick: (styleName: string, e: React.MouseEvent) => void } export function GridMode({ styles, renderedStyles, renderingStyles, selectedStyle, hasReachedLimit, onStyleSelect, onGenerateClick, onUnlockClick, }: GridModeProps) { const isRendering = (styleName: string) => renderingStyles.has(styleName) const isRendered = (styleName: string) => renderedStyles.has(styleName) return ( <>

{styles.slice(0, 3).map((style) => ( ) : ( )}

)} ))}

{styles.slice(3, 6).map((style) => ( ) : ( )}

)} ))}

) } [V0_FILE]typescriptreact:file="app/components/room-generation/carousel-mode.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight, Sparkles, Loader2, Lock } from "lucide-react" interface CarouselModeProps { styles: Array<{ name: string; image: string }> renderedStyles: Set renderingStyles: Set hasReachedLimit: boolean onGenerateClick: (styleName: string, e: React.MouseEvent) => void onUnlockClick: (styleName: string, e: React.MouseEvent) => void } export function CarouselMode({ styles, renderedStyles, renderingStyles, hasReachedLimit, onGenerateClick, onUnlockClick, }: CarouselModeProps) { const [currentIndex, setCurrentIndex] = useState(0) const isRendering = (styleName: string) => renderingStyles.has(styleName) const isRendered = (styleName: string) => renderedStyles.has(styleName) const currentStyle = styles[currentIndex] const handlePrev = () => { setCurrentIndex((prev) => (prev === 0 ? styles.length - 1 : prev - 1)) } const handleNext = () => { setCurrentIndex((prev) => (prev === styles.length - 1 ? 0 : prev + 1)) } return (

{/* Main Carousel Display */}

{isRendered(currentStyle.name) ? ( <>

{/* AI Warning Badge */}

KI-generiert

) : (

Noch nicht generiert

)} {/* Style Name Overlay */}

{currentStyle.name}

{/* Navigation Arrows */} {/* Generate Button Overlay */} {!isRendered(currentStyle.name) && (

{isRendering(currentStyle.name) ? (

Generiere Visualisierung...

) : hasReachedLimit ? ( ) : ( )}

)}

{/* Thumbnail Navigation */}

{styles.map((style, index) => ( ))}

{/* Progress Indicator */}

{styles.map((_, index) => (

))}

) } [V0_FILE]typescriptreact:file="app/components/room-generation/comparison-mode.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Sparkles, Loader2, Lock, ArrowLeftRight } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface ComparisonModeProps { styles: Array<{ name: string; image: string }> renderedStyles: Set renderingStyles: Set hasReachedLimit: boolean onGenerateClick: (styleName: string, e: React.MouseEvent) => void onUnlockClick: (styleName: string, e: React.MouseEvent) => void } export function ComparisonMode({ styles, renderedStyles, renderingStyles, hasReachedLimit, onGenerateClick, onUnlockClick, }: ComparisonModeProps) { const [leftStyle, setLeftStyle] = useState(styles[0].name) const [rightStyle, setRightStyle] = useState(styles[1].name) const isRendering = (styleName: string) => renderingStyles.has(styleName) const isRendered = (styleName: string) => renderedStyles.has(styleName) const leftStyleData = styles.find((s) => s.name === leftStyle)! const rightStyleData = styles.find((s) => s.name === rightStyle)! const swapStyles = () => { setLeftStyle(rightStyle) setRightStyle(leftStyle) } return (

{/* Style Selectors */}

{/* Comparison Display */}

{/* Left Side */}

{isRendered(leftStyle) ? ( <>

{/* AI Warning Badge */}

KI-generiert

) : (

Nicht generiert

)}

{leftStyle}

{!isRendered(leftStyle) && (

{isRendering(leftStyle) ? (

Generiere...

) : hasReachedLimit ? ( ) : ( )}

)}

{/* Right Side */}

{isRendered(rightStyle) ? ( <>

{/* AI Warning Badge */}

KI-generiert

) : (

Nicht generiert

)}

{rightStyle}

{!isRendered(rightStyle) && (

{isRendering(rightStyle) ? (

Generiere...

) : hasReachedLimit ? ( ) : ( )}

)}

{/* Comparison Info */}

Vergleichen Sie verschiedene Stile nebeneinander, um die perfekte Atmosphäre für Ihr Möbelstück zu finden.

) } [V0_FILE]typescriptreact:file="app/components/room-generation/prompt-mode.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Sparkles, Lightbulb, Palette, Sofa, Lock } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface PromptModeProps { hasReachedLimit: boolean renderCount: number maxRenderings: number onGenerateCustom: (prompt: string) => void onUnlockClick: (styleName: string, e: React.MouseEvent) => void } export function PromptMode({ hasReachedLimit, renderCount, maxRenderings, onGenerateCustom, onUnlockClick, }: PromptModeProps) { const [prompt, setPrompt] = useState("") const [lighting, setLighting] = useState("natürlich") const [furniture, setFurniture] = useState("modern") const [colorPalette, setColorPalette] = useState("warm") const examplePrompts = [ "Ein gemütliches Wohnzimmer mit warmen Holztönen und viel Tageslicht", "Moderner minimalistischer Raum mit neutralen Farben und klaren Linien", "Skandinavisches Design mit hellen Farben und natürlichen Materialien", ] const handleGenerate = () => { const fullPrompt = `${prompt}. Beleuchtung: ${lighting}, Möbelstil: ${furniture}, Farbpalette: ${colorPalette}` onGenerateCustom(fullPrompt) } return (

{/* Render Count Info */}

{renderCount} von {maxRenderings} kostenlosen Renderings genutzt

{/* Custom Prompt Input */}

Beschreiben Sie Ihren Traumraum

setPrompt(e.target.value)}
          placeholder="z.B. Ein helles Wohnzimmer mit skandinavischem Design und viel Grün..."
          className="min-h-[100px] resize-none"
          disabled={hasReachedLimit}
        />
      </div>

{/* Quick Configurator */}
      <div className="grid grid-cols-3 gap-3">
        <div className="space-y-1.5">
          <label className="text-xs font-medium text-gray-600 flex items-center gap-1">
            <Lightbulb className="w-3 h-3" />
            Beleuchtung
          </label>
          <Select value={lighting} onValueChange={setLighting} disabled={hasReachedLimit}>
            <SelectTrigger className="h-9 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="natürlich">Natürlich</SelectItem>
              <SelectItem value="warm">Warm</SelectItem>
              <SelectItem value="kühl">Kühl</SelectItem>
              <SelectItem value="gedimmt">Gedimmt</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-1.5">
          <label className="text-xs font-medium text-gray-600 flex items-center gap-1">
            <Sofa className="w-3 h-3" />
            Möbelstil
          </label>
          <Select value={furniture} onValueChange={setFurniture} disabled={hasReachedLimit}>
            <SelectTrigger className="h-9 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="modern">Modern</SelectItem>
              <SelectItem value="klassisch">Klassisch</SelectItem>
              <SelectItem value="skandinavisch">Skandinavisch</SelectItem>
              <SelectItem value="industrial">Industrial</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-1.5">
          <label className="text-xs font-medium text-gray-600 flex items-center gap-1">
            <Palette className="w-3 h-3" />
            Farbpalette
          </label>
          <Select value={colorPalette} onValueChange={setColorPalette} disabled={hasReachedLimit}>
            <SelectTrigger className="h-9 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="warm">Warm</SelectItem>
              <SelectItem value="kühl">Kühl</SelectItem>
              <SelectItem value="neutral">Neutral</SelectItem>
              <SelectItem value="bunt">Bunt</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

{/* Example Prompts */}
      <div className="space-y-2">
        <p className="text-xs font-medium text-gray-600">Beispiel-Prompts:</p>
        <div className="space-y-1.5">
          {examplePrompts.map((example, index) => (
            <button
              key={index}
              onClick={() => !hasReachedLimit && setPrompt(example)}
              disabled={hasReachedLimit}
              className="w-full text-left text-xs text-gray-600 hover:text-blue-600 hover:bg-blue-50 p-2 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {example}
            </button>
          ))}
        </div>
      </div>

{/* Generate Button */}
      {hasReachedLimit ? (
        <Button
          onClick={(e) => onUnlockClick("custom-prompt", e)}
          className="w-full bg-orange-600 hover:bg-orange-700 text-white"
        >
          <Lock className="w-4 h-4 mr-2" />
          Freischalten für unbegrenzte Renderings
        </Button>
      ) : (
        <Button
          onClick={handleGenerate}
          disabled={!prompt.trim()}
          className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white"
        >
          <Sparkles className="w-4 h-4 mr-2" />
          KI-Visualisierung Generieren
        </Button>
      )}

{/* Info Box */}
      <div className="bg-purple-50 border border-purple-200 rounded-lg p-3">
        <p className="text-xs text-center text-purple-900">
          💡 Je detaillierter Ihre Beschreibung, desto besser wird das Ergebnis!
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/room-generation/quiz-mode.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Sparkles, Lock, CheckCircle2 } from "lucide-react"

interface QuizModeProps {
  styles: Array<{ name: string; image: string }>
  hasReachedLimit: boolean
  renderCount: number
  maxRenderings: number
  onGenerateClick: (styleName: string, e: React.MouseEvent) => void
  onUnlockClick: (styleName: string, e: React.MouseEvent) => void
}

const questions = [
  {
    question: "Welche Atmosphäre bevorzugen Sie?",
    options: [
      { label: "Gemütlich & Warm", value: "warm", styles: ["Boho", "Skandi"] },
      { label: "Modern & Minimalistisch", value: "modern", styles: ["Modern", "Elegant"] },
      { label: "Traditionell & Klassisch", value: "classic", styles: ["Südtirol", "Alzey"] },
    ],
  },
  {
    question: "Welche Farben sprechen Sie an?",
    options: [
      { label: "Helle, neutrale Töne", value: "light", styles: ["Skandi", "Modern"] },
      { label: "Warme Erdtöne", value: "earth", styles: ["Boho", "Südtirol"] },
      { label: "Dunkle, elegante Farben", value: "dark", styles: ["Elegant", "Alzey"] },
    ],
  },
  {
    question: "Wie viel Dekoration mögen Sie?",
    options: [
      { label: "Viel Dekoration & Persönlichkeit", value: "much", styles: ["Boho", "Alzey"] },
      { label: "Ausgewogene Dekoration", value: "balanced", styles: ["Südtirol", "Skandi"] },
      { label: "Minimal & Aufgeräumt", value: "minimal", styles: ["Modern", "Elegant"] },
    ],
  },
]

export function QuizMode({
  styles,
  hasReachedLimit,
  renderCount,
  maxRenderings,
  onGenerateClick,
  onUnlockClick,
}: QuizModeProps) {
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [answers, setAnswers] = useState<string[]>([])
  const [recommendedStyle, setRecommendedStyle] = useState<string | null>(null)
  const [showResult, setShowResult] = useState(false)

const handleAnswer = (optionValue: string) => {
    const newAnswers = [...answers, optionValue]
    setAnswers(newAnswers)

if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1)
    } else {
      // Calculate recommendation based on answers
      const styleCounts: Record<string, number> = {}
      newAnswers.forEach((answer, index) => {
        const option = questions[index].options.find((opt) => opt.value === answer)
        option?.styles.forEach((style) => {
          styleCounts[style] = (styleCounts[style] || 0) + 1
        })
      })

const recommended = Object.entries(styleCounts).sort((a, b) => b[1] - a[1])[0][0]
      setRecommendedStyle(recommended)
      setShowResult(true)
    }
  }

const resetQuiz = () => {
    setCurrentQuestion(0)
    setAnswers([])
    setRecommendedStyle(null)
    setShowResult(false)
  }

const recommendedStyleData = styles.find((s) => s.name === recommendedStyle)

if (showResult && recommendedStyle && recommendedStyleData) {
    return (
      <div className="space-y-4">
        {/* Render Count Info */}
        <div className="bg-blue-100 border border-blue-300 rounded-lg p-3">
          <p className="text-xs text-center text-blue-900">
            <span className="font-semibold">
              {renderCount} von {maxRenderings} kostenlosen Renderings genutzt
            </span>
          </p>
        </div>

{/* Result Display */}
        <div className="bg-gradient-to-br from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-5 text-center space-y-3">
          <CheckCircle2 className="w-12 h-12 text-green-600 mx-auto" />
          <h3 className="text-lg font-semibold text-gray-900">Perfekt für Sie!</h3>
          <p className="text-sm text-gray-600">
            Basierend auf Ihren Antworten empfehlen wir den{" "}
            <span className="font-semibold text-blue-600">{recommendedStyle}</span>-Stil
          </p>
        </div>

{/* Preview Image */}
        <div className="relative aspect-[16/10] rounded-lg overflow-hidden bg-gray-200">
          <img
            src={recommendedStyleData.image || "/placeholder.svg"}
            alt={recommendedStyle}
            className="w-full h-full object-cover blur-sm"
          />
          {/* AI Warning Badge (blurred) */}
          <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded backdrop-blur-sm blur-sm">
            KI-generiert
          </div>
          <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
            {hasReachedLimit ? (
              <Button
                onClick={(e) => onUnlockClick(recommendedStyle, e)}
                className="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 h-auto rounded-lg shadow-lg"
              >
                <Lock className="w-5 h-5 mr-2" />
                Freischalten & Visualisierung anzeigen
              </Button>
            ) : (
              <Button
                onClick={(e) => onGenerateClick(recommendedStyle, e)}
                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-3 h-auto rounded-lg shadow-lg"
              >
                <Sparkles className="w-5 h-5 mr-2" />
                Jetzt Visualisierung Generieren
              </Button>
            )}
          </div>
        </div>

{/* Reset Button */}
        <Button variant="outline" onClick={resetQuiz} className="w-full bg-transparent">
          Quiz Wiederholen
        </Button>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {/* Render Count Info */}
      <div className="bg-blue-100 border border-blue-300 rounded-lg p-3">
        <p className="text-xs text-center text-blue-900">
          <span className="font-semibold">
            {renderCount} von {maxRenderings} kostenlosen Renderings genutzt
          </span>
        </p>
      </div>

{/* Progress Bar */}
      <div className="space-y-2">
        <div className="flex justify-between text-xs text-gray-600">
          <span>
            Frage {currentQuestion + 1} von {questions.length}
          </span>
          <span>{Math.round(((currentQuestion + 1) / questions.length) * 100)}%</span>
        </div>
        <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
          <div
            className="h-full bg-gradient-to-r from-blue-600 to-purple-600 transition-all duration-500"
            style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
          />
        </div>
      </div>

{/* Question */}
      <div className="bg-white border border-gray-200 rounded-lg p-5 space-y-4">
        <h3 className="text-base font-semibold text-gray-900 text-center">{questions[currentQuestion].question}</h3>

<div className="space-y-2">
          {questions[currentQuestion].options.map((option) => (
            <Button
              key={option.value}
              onClick={() => handleAnswer(option.value)}
              variant="outline"
              className="w-full justify-start text-left h-auto py-3 hover:bg-blue-50 hover:border-blue-300 transition-colors"
            >
              {option.label}
            </Button>
          ))}
        </div>
      </div>

{/* Info */}
      <div className="bg-purple-50 border border-purple-200 rounded-lg p-3">
        <p className="text-xs text-center text-purple-900">
          🎯 Beantworten Sie {questions.length} kurze Fragen und wir finden den perfekten Stil für Sie!
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/product-viewer-3d.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { RotateCw, Maximize2, Ruler } from "lucide-react"

interface ProductViewer3DProps {
  imageUrl: string
  altText: string
}

export function ProductViewer3D({ imageUrl, altText }: ProductViewer3DProps) {
  return (
    <div className="flex-1 relative flex items-center justify-center bg-gradient-to-b from-gray-50 to-white overflow-hidden">
      {/* 3D Model */}
      <div className="relative max-w-4xl max-h-full p-8">
        <div className="relative">
          <img
            src={imageUrl || "/placeholder.svg"}
            alt={altText}
            className="w-full h-full object-contain drop-shadow-2xl"
          />

{/* AI Generated Warning Badge */}
          <div className="absolute bottom-4 right-4 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-md">
            <p className="text-white text-xs font-medium">KI-generiert</p>
          </div>
        </div>
      </div>

{/* 3D View Controls - Bottom Center */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3">
        <Button
          variant="secondary"
          size="icon"
          className="rounded-full w-12 h-12 bg-gray-800 text-white hover:bg-gray-700 shadow-lg"
        >
          <RotateCw className="w-5 h-5" />
        </Button>
        <Button variant="secondary" size="icon" className="rounded-full w-12 h-12 bg-white hover:bg-gray-100 shadow-lg">
          <Maximize2 className="w-5 h-5" />
        </Button>
      </div>

{/* Left side tools */}
      <div className="absolute left-4 top-1/2 -translate-y-1/2 flex flex-col gap-2">
        <Button variant="secondary" size="icon" className="rounded-lg w-10 h-10 bg-white shadow">
          <Ruler className="w-4 h-4" />
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/pool-3d-render.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pool-3d-render-QioOvgfE5WG3XhmakM9g9prZNEKCW9.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import PoolConfigurator from "./pool-configurator"

export default function Page() {
  return <PoolConfigurator />
}
[V0_FILE]typescriptreact:file="app/pool-configurator.tsx"
"use client"

import React from "react"
import { useState } from "react"
import { ArrowLeft, ShoppingCart, RotateCcw, Maximize2, Play, Ruler, Droplets, Palette, Layers, Thermometer, Lightbulb, ChevronUp, Home, ScanLine, ChevronRight } from "lucide-react"

interface PoolModel {
  id: string
  name: string
  dimensions: string
  description: string
  image: string
  price: number
}

const poolModels: PoolModel[] = [
  {
    id: "lipari",
    name: "Lipari",
    dimensions: "3,30 x 5,40 - 11,40 x 1,53 m",
    description: "Der modulare Pool mit stylischer, geradliniger Einstiegstreppe.",
    image: "/pool-lipari.jpg",
    price: 0,
  },
  {
    id: "kuba",
    name: "Kuba",
    dimensions: "2,40 x 5,00 x 1,53 m",
    description: "Der kleine Pool mit elegantem Einstieg.",
    image: "/pool-kuba.jpg",
    price: -2000,
  },
  {
    id: "granada",
    name: "Granada",
    dimensions: "3,00 x 6,00 x 1,53 m",
    description: "Der kleine Pool mit praktischer Einstiegstreppe.",
    image: "/pool-granada.jpg",
    price: 500,
  },
  {
    id: "mallorca64",
    name: "Mallorca 64",
    dimensions: "3,30 x 6,40 x 1,53 m",
    description: "Der Pool mit seitlichem Einstieg und voller Schwimmlänge.",
    image: "/pool-mallorca64.jpg",
    price: 1500,
  },
  {
    id: "menorca64",
    name: "Menorca 64",
    dimensions: "3,30 x 6,40 x 1,53 m",
    description: "Der Pool mit seitlichem Einstieg und voller Schwimmlänge.",
    image: "/pool-menorca64.jpg",
    price: 1500,
  },
  {
    id: "ischia",
    name: "Ischia",
    dimensions: "3,30 x 7,00 x 1,53 m",
    description: "Der Klassiker unter den kleineren Pools.",
    image: "/pool-ischia.jpg",
    price: 2500,
  },
  {
    id: "mallorca80",
    name: "Mallorca 80",
    dimensions: "3,30 x 8,00 x 1,53 m",
    description: "Der Pool mit seitlichem Einstieg und voller Schwimmlänge.",
    image: "/pool-mallorca80.jpg",
    price: 4000,
  },
  {
    id: "menorca80",
    name: "Menorca 80",
    dimensions: "3,30 x 8,00 x 1,53 m",
    description: "Der Pool mit seitlichem Einstieg und voller Schwimmlänge.",
    image: "/pool-menorca80.jpg",
    price: 4000,
  },
  {
    id: "athen",
    name: "Athen",
    dimensions: "3,77 x 8,00 x 1,53 m",
    description: "Der geradlinige Pool in dem Sie die ganze Länge in vollen Zügen geniessen können.",
    image: "/pool-athen.jpg",
    price: 5500,
  },
]

interface ConfigOption {
  id: string
  label: string
  value: string
  icon: React.ReactNode
  options: { id: string; label: string; price?: number }[]
}

const configOptions: ConfigOption[] = [
  {
    id: "model",
    label: "Modell",
    value: "Mallorca 64",
    icon: <Ruler className="w-5 h-5" />,
    options: poolModels.map(p => ({ id: p.id, label: p.name, price: p.price })),
  },
  {
    id: "depth",
    label: "Tiefe",
    value: "1,53 m",
    icon: <Droplets className="w-5 h-5" />,
    options: [
      { id: "1.2", label: "1,20 m", price: -500 },
      { id: "1.53", label: "1,53 m", price: 0 },
      { id: "1.8", label: "1,80 m", price: 1500 },
    ]
  },
  {
    id: "color",
    label: "Poolfarbe",
    value: "Azurblau",
    icon: <Palette className="w-5 h-5" />,
    options: [
      { id: "reinweiss", label: "Reinweiß RAL 9016", price: 0 },
      { id: "lichtgrau", label: "Lichtgrau RAL 9018", price: 0 },
      { id: "betongrau", label: "Betongrau RAL 7040", price: 200 },
      { id: "granitgrau", label: "Granitgrau RAL 7150", price: 300 },
      { id: "granitgrau3d", label: "Granitgrau 3D", price: 500 },
      { id: "sand", label: "Sand RAL 1015", price: 200 },
      { id: "azurblau", label: "Azurblau", price: 0 },
    ]
  },
  {
    id: "material",
    label: "Material",
    value: "GFK",
    icon: <Layers className="w-5 h-5" />,
    options: [
      { id: "gfk", label: "GFK", price: 0 },
      { id: "concrete", label: "Beton", price: 3000 },
      { id: "stainless", label: "Edelstahl", price: 8000 },
      { id: "natural", label: "Naturstein", price: 5500 },
    ]
  },
  {
    id: "heating",
    label: "Heizung",
    value: "Wärmepumpe",
    icon: <Thermometer className="w-5 h-5" />,
    options: [
      { id: "none", label: "Keine", price: 0 },
      { id: "heatpump", label: "Wärmepumpe", price: 3500 },
      { id: "solar", label: "Solar", price: 2800 },
      { id: "electric", label: "Elektro", price: 1500 },
    ]
  },
  {
    id: "lighting",
    label: "Beleuchtung",
    value: "LED RGB",
    icon: <Lightbulb className="w-5 h-5" />,
    options: [
      { id: "none", label: "Keine", price: 0 },
      { id: "led-white", label: "LED Weiß", price: 800 },
      { id: "led-rgb", label: "LED RGB", price: 1200 },
      { id: "fiber", label: "Glasfaser", price: 2500 },
    ]
  },
]

export default function PoolConfigurator() {
  const [selectedOption, setSelectedOption] = useState<string | null>(null)
  const [config, setConfig] = useState<Record<string, string>>({
    model: "mallorca64",
    depth: "1.53",
    color: "azurblau",
    material: "gfk",
    heating: "heatpump",
    lighting: "led-rgb",
  })

const handleOptionSelect = (categoryId: string, optionId: string) => {
    setConfig(prev => ({ ...prev, [categoryId]: optionId }))
  }

const getCurrentValue = (option: ConfigOption) => {
    const selected = option.options.find(o => o.id === config[option.id])
    return selected?.label || option.value
  }

const selectedModel = poolModels.find(p => p.id === config.model) || poolModels[3]

return (
    <div className="h-screen w-screen flex flex-col bg-white overflow-hidden">
      {/* Header */}
      <header className="flex items-center justify-between px-6 py-3 bg-white border-b border-gray-200 z-10">
        <button className="flex items-center gap-2 text-cyan-600 hover:text-cyan-700 font-medium text-sm">
          <ArrowLeft className="w-4 h-4" />
          KONFIGURATOR BEENDEN
        </button>
        
        <button className="flex items-center gap-2 bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-3 rounded font-medium transition-colors">
          Anfrage senden
          <ShoppingCart className="w-5 h-5" />
        </button>
      </header>

{/* Main 3D View */}
      <div className="flex-1 relative">
        {/* Product Title */}
        <div className="absolute top-4 left-6 z-10">
          <h1 className="text-xl font-semibold text-gray-900">{selectedModel.name}</h1>
          <button className="text-cyan-600 text-sm hover:underline">Details</button>
        </div>

{/* Left Toolbar */}
        <div className="absolute left-4 top-1/2 -translate-y-1/2 flex flex-col gap-2 z-10">
          <button className="w-11 h-11 bg-cyan-600 text-white rounded flex items-center justify-center hover:bg-cyan-700 transition-colors">
            <Home className="w-5 h-5" />
          </button>
          <button className="w-11 h-11 bg-gray-100 text-gray-600 rounded flex items-center justify-center hover:bg-gray-200 transition-colors border border-gray-200">
            <ScanLine className="w-5 h-5" />
          </button>
          <button className="w-11 h-11 bg-gray-100 text-gray-600 rounded flex items-center justify-center hover:bg-gray-200 transition-colors border border-gray-200">
            <RotateCcw className="w-5 h-5" />
          </button>
          <button className="w-11 h-11 bg-gray-100 text-gray-600 rounded flex items-center justify-center hover:bg-gray-200 transition-colors border border-gray-200">
            <Play className="w-5 h-5" />
          </button>
          <button className="w-11 h-11 bg-gray-100 text-gray-600 rounded flex items-center justify-center hover:bg-gray-200 transition-colors border border-gray-200">
            <Maximize2 className="w-5 h-5" />
          </button>
        </div>

{/* 3D Pool View */}
        <div 
          className="w-full h-full flex items-center justify-center"
          style={{
            background: "url(https://cloud.zeppelin-group.com/aHR0cHM6Ly93d3cucG9seWZhc2VyLmNvbS9kZWZhdWx0L2Nzcy9hbGwtZGNlNDg5ZGM5Y2YzNWQyNWY3ZDMxMzAxMDBjNzJlNWUuY3Nz/h-a5b941f/01766167089/images/design/pattern.jpg) 0 0 repeat",
            backgroundPosition: "center top",
          }}
        >
          <div className="relative">
            <img
              src="/pool-3d-render.jpg"
              alt="Pool Konfiguration"
              className="max-w-4xl max-h-[60vh] object-contain drop-shadow-2xl"
            />
            {/* Pool dimensions overlay */}
            <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 bg-gray-900/80 backdrop-blur px-3 py-1 rounded text-white text-sm">
              {selectedModel.dimensions}
            </div>
          </div>
        </div>

{/* AR Button */}
        <div className="absolute bottom-4 left-6">
          <button className="flex items-center gap-2 bg-white hover:bg-gray-50 px-4 py-2 rounded border border-gray-200 text-sm font-medium text-gray-700 transition-colors shadow-sm">
            Virtuell ausprobieren
            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <rect x="2" y="3" width="20" height="14" rx="2" />
              <path d="M8 21h8" />
              <path d="M12 17v4" />
              <circle cx="12" cy="10" r="3" />
            </svg>
          </button>
        </div>

{/* Brand */}
        <div className="absolute bottom-4 right-6 text-gray-400 text-lg font-light">
          Pool<span className="font-semibold text-gray-600">Design</span>
        </div>

</div>

{/* Expanded Options Panel - Directly above tabs */}
      {selectedOption && (
        <div className="bg-white border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] z-20">
          {selectedOption === "model" ? (
            // Pool Model Grid Selection - Compact
            <div className="p-4 max-h-[280px] overflow-y-auto">
              <div className="grid grid-cols-6 gap-3">
                {poolModels.map((model) => (
                  <button
                    key={model.id}
                    onClick={() => handleOptionSelect("model", model.id)}
                    className={`text-center p-2 rounded-lg border-2 transition-all hover:shadow-md ${
                      config.model === model.id
                        ? "border-cyan-500 bg-cyan-50"
                        : "border-gray-200 bg-white hover:border-gray-300"
                    }`}
                  >
                    <div className="aspect-[4/3] bg-gray-100 rounded mb-2 flex items-center justify-center overflow-hidden">
                      <img
                        src={model.image || "/placeholder.svg"}
                        alt={model.name}
                        className="w-full h-full object-cover"
                        onError={(e) => {
                          e.currentTarget.src = "/pool-3d-render.jpg"
                        }}
                      />
                    </div>
                    <h3 className="text-sm font-semibold italic text-cyan-600">{model.name}</h3>
                    <p className="text-xs text-gray-900 mt-0.5">{model.dimensions}</p>
                    <button className="text-cyan-600 text-xs font-medium mt-1 hover:underline">DETAILS</button>
                  </button>
                ))}
              </div>
            </div>
          ) : selectedOption === "color" ? (
            // Color Selection with Swatches
            <div className="p-4 max-h-[280px] overflow-y-auto">
              <div className="grid grid-cols-7 gap-3">
                {[
                  { id: "reinweiss", label: "Reinweiß RAL 9016", color: "#FAF8F0", tagline: "Karibikfeeling pur!", price: 0 },
                  { id: "lichtgrau", label: "Lichtgrau RAL 9018", color: "#D7D7D2", tagline: "Wie edel!", price: 0 },
                  { id: "betongrau", label: "Betongrau RAL 7040", color: "#9DA1A1", tagline: "Stylisch und clean!", price: 200 },
                  { id: "granitgrau", label: "Granitgrau RAL 7150", color: "#6E6E5C", tagline: "Eine wahre Naturschönheit!", price: 300 },
                  { id: "granitgrau3d", label: "Granitgrau 3D", color: "#808076", tagline: "Ein Juwel!", price: 500, isTextured: true },
                  { id: "sand", label: "Sand RAL 1015", color: "#F5E6C8", tagline: "Ab in den Süden!", price: 200 },
                  { id: "azurblau", label: "Azurblau", color: "#9FCFE0", tagline: "Zeitloser Klassiker!", price: 0 },
                ].map((colorOpt) => (
                  <button
                    key={colorOpt.id}
                    onClick={() => handleOptionSelect("color", colorOpt.id)}
                    className={`text-center p-3 rounded-lg border-2 transition-all hover:shadow-md ${
                      config.color === colorOpt.id
                        ? "border-cyan-500 bg-cyan-50"
                        : "border-gray-200 bg-white hover:border-gray-300"
                    }`}
                  >
                    <div 
                      className="aspect-[4/3] rounded mb-2 border border-gray-200"
                      style={{ 
                        backgroundColor: colorOpt.color,
                        backgroundImage: colorOpt.isTextured ? "url('data:image/svg+xml,%3Csvg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cfilter id=\"noise\"%3E%3CfeTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"4\" /%3E%3C/filter%3E%3Crect width=\"100%25\" height=\"100%25\" filter=\"url(%23noise)\" opacity=\"0.3\"/%3E%3C/svg%3E')" : undefined
                      }}
                    />
                    <h3 className="text-xs font-semibold text-cyan-600">{colorOpt.label}</h3>
                    <p className="text-xs text-gray-500 mt-0.5">{colorOpt.tagline}</p>
                  </button>
                ))}
              </div>
            </div>
          ) : (
            // Standard Options
            <div className="p-4">
              <div className="flex gap-3 overflow-x-auto pb-2">
                {configOptions.find(o => o.id === selectedOption)?.options.map((opt) => (
                  <button
                    key={opt.id}
                    onClick={() => handleOptionSelect(selectedOption, opt.id)}
                    className={`flex-shrink-0 px-5 py-3 rounded-lg border-2 transition-all ${
                      config[selectedOption] === opt.id
                        ? "border-cyan-600 bg-cyan-50 text-cyan-700"
                        : "border-gray-200 bg-white text-gray-700 hover:border-gray-300"
                    }`}
                  >
                    <div className="font-medium">{opt.label}</div>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

{/* Bottom Options Bar */}
      <div className="bg-white border-t border-gray-200 z-30">
        {/* Options Row */}
        <div className="flex items-stretch">
          {configOptions.map((option) => (
            <button
              key={option.id}
              onClick={() => setSelectedOption(selectedOption === option.id ? null : option.id)}
              className={`flex-1 flex items-center gap-3 px-4 py-3 border-r border-gray-100 last:border-r-0 hover:bg-gray-50 transition-colors ${
                selectedOption === option.id ? "bg-cyan-50" : ""
              }`}
            >
              <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                selectedOption === option.id ? "bg-cyan-600 text-white" : "bg-gray-100 text-gray-600"
              }`}>
                {option.icon}
              </div>
              <div className="text-left">
                <div className="text-xs text-gray-500">{option.label}</div>
                <div className="text-sm font-medium text-gray-900">{getCurrentValue(option)}</div>
              </div>
              <ChevronUp className={`w-4 h-4 text-gray-400 ml-auto transition-transform ${
                selectedOption === option.id ? "rotate-180" : ""
              }`} />
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}</article></body></html>