/** * Home page component for BOLDYASE premium fashion webshop * Features: 4K-ready design, Retina-display optimization, luxury aesthetics, AI recommendations */ import React, { useState, useEffect } from 'react'; import ShoppingCart from '../components/ShoppingCart'; import { Button } from '../components/ui/button'; import { Badge } from '../components/ui/badge'; import { ShoppingBag, Heart, Search, User, Menu, Star, TrendingUp, Sparkles, ArrowRight, Filter, Grid, List, Shield, Truck, Award, Clock, Globe, Zap, Crown, Gem, ChevronRight, Play, X, Camera, MessageCircle, Bot } from 'lucide-react'; /** * Product interface for type safety */ interface Product { id: string; name: string; price: number; originalPrice?: number; image: string; hoverImage: string; category: string; subcategory: string; rating: number; isNew?: boolean; isPersonalized?: boolean; isBestseller?: boolean; isExclusive?: boolean; sizes: string[]; colors: string[]; description: string; } /** * Subcategory structure for shop organization */ interface CategoryStructure { [key: string]: { name: string; subcategories: string[]; }; } const categoryStructure: CategoryStructure = { women: { name: 'Women', subcategories: [ 'Blazers & Jassen', 'Tops & Truien', 'Jurken', 'Broeken', 'Rokken', 'Lingerie', 'Tassen', 'Sieraden' ] }, men: { name: 'Men', subcategories: [ 'Blazers & Jassen', 'Tops & Truien', 'Overhemden', 'Broeken', 'Pakken', 'Tassen', 'Accessoires' ] }, shoes: { name: 'Shoes', subcategories: [ 'Sneakers', 'Pumps', 'Laarzen', 'Loafers', 'Sandalen', 'Sportschoenen', 'Formele Schoenen' ] }, accessories: { name: 'Accessories', subcategories: [ 'Tassen', 'Horloges', 'Riemen', 'Sieraden', 'Zonnebrillen', 'Sjaals', 'Hoeden' ] } }; /** * Format price utility function */ /** * Format price utility function */ const formatPrice = (price: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }).format(price); }; /** * Function to automatically determine subcategory based on product name and category */ const determineSubcategory = (productName: string, category: string): string => { const name = productName.toLowerCase(); switch (category) { case 'women': if (name.includes('blazer') || name.includes('jacket') || name.includes('coat')) return 'Blazers & Jassen'; if (name.includes('dress') || name.includes('jurk')) return 'Jurken'; if (name.includes('sweater') || name.includes('trui') || name.includes('turtleneck')) return 'Tops & Truien'; if (name.includes('bag') || name.includes('handbag') || name.includes('tas')) return 'Tassen'; if (name.includes('skirt') || name.includes('rok')) return 'Rokken'; if (name.includes('pants') || name.includes('broek')) return 'Broeken'; if (name.includes('earring') || name.includes('necklace') || name.includes('ring')) return 'Sieraden'; return 'Tops & Truien'; // Default case 'men': if (name.includes('blazer') || name.includes('jacket') || name.includes('coat') || name.includes('overcoat')) return 'Blazers & Jassen'; if (name.includes('suit') || name.includes('pak')) return 'Pakken'; if (name.includes('shirt') || name.includes('overhemd')) return 'Overhemden'; if (name.includes('sweater') || name.includes('trui') || name.includes('pullover')) return 'Tops & Truien'; if (name.includes('briefcase') || name.includes('bag') || name.includes('tas')) return 'Tassen'; if (name.includes('pants') || name.includes('broek')) return 'Broeken'; return 'Overhemden'; // Default case 'shoes': if (name.includes('sneaker') || name.includes('trainer')) return 'Sneakers'; if (name.includes('pump') || name.includes('heel')) return 'Pumps'; if (name.includes('boot') || name.includes('laars')) return 'Laarzen'; if (name.includes('loafer') || name.includes('moccasin')) return 'Loafers'; if (name.includes('sandal') || name.includes('sandaal')) return 'Sandalen'; return 'Sneakers'; // Default case 'accessories': if (name.includes('watch') || name.includes('horloge')) return 'Horloges'; if (name.includes('bag') || name.includes('handbag') || name.includes('briefcase') || name.includes('tas')) return 'Tassen'; if (name.includes('belt') || name.includes('riem')) return 'Riemen'; if (name.includes('scarf') || name.includes('sjaal')) return 'Sjaals'; if (name.includes('earring') || name.includes('necklace') || name.includes('ring') || name.includes('diamond')) return 'Sieraden'; if (name.includes('sunglasses') || name.includes('glasses')) return 'Zonnebrillen'; return 'Accessoires'; // Default default: return 'Algemeen'; } }; /** * Complete product catalog with all categories */ const allProducts: Product[] = [ // WOMEN'S COLLECTION { id: 'w1', name: 'Silk Evening Dress', price: 899, originalPrice: 1199, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/2179613e-7401-40a8-9b02-770a40b648ac.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/ee24a76e-1d60-44d1-94b7-2dae44b9a5e3.jpg', category: 'women', rating: 4.8, isExclusive: true, isPersonalized: true, sizes: ['XS', 'S', 'M', 'L'], colors: ['Black', 'Midnight Blue', 'Champagne'], description: 'Hand-finished silk evening dress with intricate beadwork' }, { id: 'w2', name: 'Cashmere Turtleneck', price: 459, originalPrice: 599, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/111056eb-0680-44b9-a0f5-bfd715a6b0d0.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/fd48aec8-2390-4356-a2eb-597001adf3c3.jpg', category: 'women', rating: 4.9, isNew: true, isBestseller: true, sizes: ['XS', 'S', 'M', 'L', 'XL'], colors: ['Cream', 'Black', 'Camel'], description: 'Premium cashmere turtleneck with Italian craftsmanship' }, { id: 'w3', name: 'Tailored Blazer', price: 699, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/511d2f63-178c-47a8-8a6a-984f4247ea8a.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/c9009c22-329b-4246-b5fe-f0e30088572d.jpg', category: 'women', rating: 4.7, isPersonalized: true, sizes: ['XS', 'S', 'M', 'L'], colors: ['Navy', 'Black', 'Charcoal'], description: 'Perfectly tailored blazer with premium wool blend' }, { id: 'w4', name: 'Leather Handbag', price: 1299, originalPrice: 1599, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/26581dea-f6f6-45a9-b38f-eb164d5632d4.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/81ca7fd4-4a49-4f53-be31-76d318127718.jpg', category: 'women', rating: 4.9, isExclusive: true, sizes: ['One Size'], colors: ['Black', 'Cognac', 'Burgundy'], description: 'Handcrafted Italian leather handbag with gold hardware' }, // MEN'S COLLECTION { id: 'm1', name: 'Cashmere Overcoat', price: 1299, originalPrice: 1599, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/148f8588-3105-4cec-8418-87200f8fb869.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/85ac5cb0-5143-42ad-940c-04c1e484d1b8.jpg', category: 'men', rating: 4.9, isNew: true, isBestseller: true, sizes: ['S', 'M', 'L', 'XL', 'XXL'], colors: ['Camel', 'Black', 'Navy'], description: 'Luxurious cashmere blend overcoat with Italian craftsmanship' }, { id: 'm2', name: 'Wool Suit', price: 1899, originalPrice: 2399, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/3ba23cc5-1bbe-4a41-a726-f66afb2b3e3d.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/a18f24cf-895b-451c-b11c-4ac11794a749.jpg', category: 'men', rating: 4.8, isExclusive: true, sizes: ['S', 'M', 'L', 'XL'], colors: ['Charcoal', 'Navy', 'Black'], description: 'Hand-tailored wool suit with perfect fit guarantee' }, { id: 'm3', name: 'Silk Dress Shirt', price: 299, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/e976a801-8a59-4e35-bebc-8e1bba8c4a4c.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/e5ac18c0-2b97-4868-bc99-e33066d4db4b.jpg', category: 'men', rating: 4.7, isPersonalized: true, sizes: ['S', 'M', 'L', 'XL'], colors: ['White', 'Light Blue', 'Charcoal'], description: 'Premium silk dress shirt with mother-of-pearl buttons' }, { id: 'm4', name: 'Leather Briefcase', price: 899, originalPrice: 1199, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/741d508f-cbc1-4550-a200-03043efadd02.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/2c57781e-8676-45aa-8037-b03951e7bc37.jpg', category: 'men', rating: 4.9, isNew: true, sizes: ['One Size'], colors: ['Black', 'Brown', 'Cognac'], description: 'Handcrafted leather briefcase with lifetime warranty' }, // SHOES COLLECTION { id: 's1', name: 'Italian Leather Loafers', price: 659, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/ca733ad9-b13e-4139-a80d-e6d5132983d7.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/8cb48cb5-6449-4c47-8c8b-76a3bd01464b.jpg', category: 'shoes', rating: 4.9, isNew: true, isBestseller: true, sizes: ['38', '39', '40', '41', '42', '43', '44'], colors: ['Black', 'Brown', 'Cognac'], description: 'Handcrafted Italian leather loafers with premium finish' }, { id: 's2', name: 'High Heel Pumps', price: 549, originalPrice: 699, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/47396ae7-dbf4-40b6-8912-b80582a6bc2c.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/b74c960a-5ed2-4792-b807-a12c7fd52fc0.jpg', category: 'shoes', rating: 4.8, isExclusive: true, sizes: ['35', '36', '37', '38', '39', '40', '41'], colors: ['Black', 'Red', 'Nude'], description: 'Elegant high heel pumps with superior comfort technology' }, { id: 's3', name: 'Leather Sneakers', price: 399, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/32c703a3-2820-4c39-bfaa-92174888f3cb.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/5912758f-0a48-42b0-a9b7-d24061a20113.jpg', category: 'shoes', rating: 4.7, isPersonalized: true, sizes: ['36', '37', '38', '39', '40', '41', '42', '43'], colors: ['White', 'Black', 'Navy'], description: 'Premium leather sneakers with handcrafted details' }, { id: 's4', name: 'Suede Ankle Boots', price: 799, originalPrice: 999, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/46cd42b0-affa-46dc-96d0-38a046c5cb9e.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/3f2e6203-26a2-4892-a657-2c3f0bd50c15.jpg', category: 'shoes', rating: 4.9, isNew: true, sizes: ['35', '36', '37', '38', '39', '40', '41'], colors: ['Tan', 'Black', 'Gray'], description: 'Luxurious suede ankle boots with Italian craftsmanship' }, // ACCESSORIES COLLECTION { id: 'a1', name: 'Swiss Gold Watch', price: 2499, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/877e5626-3ea3-42cf-b182-5221d2377c39.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/876436e4-354b-445e-99b8-805a9edcfdc1.jpg', category: 'accessories', rating: 5.0, isExclusive: true, sizes: ['One Size'], colors: ['Gold', 'Rose Gold', 'Silver'], description: 'Swiss-made luxury timepiece with 18k gold case' }, { id: 'a2', name: 'Silk Scarf', price: 299, originalPrice: 399, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/b9952b78-a5ee-4ff1-831d-8bac56635a35.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/31284825-5cc9-4bd8-80ef-30478d4c5fac.jpg', category: 'accessories', rating: 4.8, isPersonalized: true, sizes: ['One Size'], colors: ['Floral', 'Geometric', 'Abstract'], description: 'Hand-printed silk scarf with exclusive designer patterns' }, { id: 'a3', name: 'Leather Belt', price: 199, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/7533c9f4-0127-4eed-b1c5-90c62180f3c6.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/413f1dac-8b5d-4561-bb85-971bec600f87.jpg', category: 'accessories', rating: 4.7, isBestseller: true, sizes: ['S', 'M', 'L', 'XL'], colors: ['Black', 'Brown', 'Cognac'], description: 'Premium leather belt with hand-polished buckle' }, { id: 'a4', name: 'Diamond Earrings', price: 1899, originalPrice: 2399, image: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/5ffc6805-5116-4df4-9acb-72691ee354c5.jpg', hoverImage: 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/dcf36c91-14e2-4ef1-b086-862a4544d057.jpg', category: 'accessories', rating: 5.0, isExclusive: true, isNew: true, sizes: ['One Size'], colors: ['White Gold', 'Yellow Gold', 'Rose Gold'], description: 'Brilliant cut diamond earrings with premium setting' } ]; /** * Header component props */ interface HeaderProps { isCartOpen: boolean; setIsCartOpen: (open: boolean) => void; activeCategory: string; setActiveCategory: (category: string) => void; } /** * EASY TOUCH MINIMAL HEADER - Clean, unobtrusive navigation */ const Header: React.FC = ({ isCartOpen, setIsCartOpen, activeCategory, setActiveCategory }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); const [cartItemCount, setCartItemCount] = useState(3); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 100); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); // Only show header when scrolled or not on home page if (activeCategory === 'home' && !isScrolled) { return null; } return (
{/* Minimal Logo */} {/* Minimal Navigation - Hidden on mobile */} {/* Essential Icons Only */}
{/* Hamburger Menu - Only for account, orders, contact */}
{/* Minimal Mobile/Account Menu */} {isMenuOpen && (
BOLDYASE
{/* Account & Essential Links */}
)}
); }; /** * EASY TOUCH HERO SECTION - Conversational Shopping Experience */ const HeroSection: React.FC = () => { const [chatInput, setChatInput] = useState(''); const [isTyping, setIsTyping] = useState(false); const [showCursor, setShowCursor] = useState(true); const [messages, setMessages] = useState>([]); // Cursor blinking animation useEffect(() => { const interval = setInterval(() => { setShowCursor(prev => !prev); }, 500); return () => clearInterval(interval); }, []); const handleInspiration = (prompt: string) => { setChatInput(prompt); handleChatSubmit(prompt); }; const handleChatSubmit = (input: string = chatInput) => { if (!input.trim()) return; setMessages(prev => [...prev, { type: 'user', content: input }]); setChatInput(''); setIsTyping(true); // Simulate AI response setTimeout(() => { const response = getAIResponse(input); setMessages(prev => [...prev, response]); setIsTyping(false); }, 1200); }; const getAIResponse = (input: string): {type: 'ai', content: string, products?: any[]} => { const lowerInput = input.toLowerCase(); if (lowerInput.includes('jurk') || lowerInput.includes('dress')) { return { type: 'ai', content: 'Prachtige keuze! Hier zijn onze mooiste jurken. Heb je voorkeur voor kleur of gelegenheid?', products: allProducts.filter(p => p.subcategory === 'Jurken').slice(0, 3) }; } else if (lowerInput.includes('blazer') || lowerInput.includes('jacket')) { return { type: 'ai', content: 'Perfecte timing! Onze blazer collectie is net uitgebreid. Welke stijl spreekt je aan?', products: allProducts.filter(p => p.subcategory === 'Blazers & Jassen').slice(0, 3) }; } else if (lowerInput.includes('schoenen') || lowerInput.includes('shoes')) { return { type: 'ai', content: 'Geweldige keuze! Van sneakers tot elegante pumps, we hebben alles. Wat past bij jouw stijl?', products: allProducts.filter(p => p.category === 'shoes').slice(0, 3) }; } else { return { type: 'ai', content: 'Ik help je graag! Hier zijn onze nieuwste arrivals die perfect bij jouw stijl passen.', products: allProducts.filter(p => p.isNew).slice(0, 3) }; } }; return (
{/* Subtle Background Video Loop */}
{/* Clean, Minimal Layout */}
{/* Logo - Subtle and Clean */}
BOLDYASE
BOLDYASE
{/* Conversational Prompt */}

Waar kan ik je vandaag
mee helpen? |

{/* Chat Input */}
setChatInput(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && handleChatSubmit()} placeholder="Typ hier of kies een inspiratie hieronder..." className="w-full px-8 py-6 text-lg bg-white/80 backdrop-blur-sm border-2 border-gray-200 rounded-2xl focus:outline-none focus:border-black transition-all duration-300 shadow-lg" />
{/* Inspiration Buttons */}
{/* Chat Messages */} {messages.length > 0 && (
{messages.map((message, index) => (

{message.content}

{/* AI Response with Products */} {message.type === 'ai' && message.products && (
{message.products.map((product) => (
{product.name}

{product.name}

{product.subcategory}

{formatPrice(product.price)}
))}
)}
))} {/* Typing Indicator */} {isTyping && (
AI stylist is aan het denken...
)}
)}
{/* Proactive Help Balloon */}

Persoonlijke stylist

Kan je perfecte item niet vinden? Omschrijf het, dan zoek ik direct!

); }; /** * Premium AI-powered personalization section */ const PersonalizedSection: React.FC = () => { const [user] = useState({ name: 'Sarah', preferences: ['minimalist', 'premium', 'sustainable'] }); const personalizedSections = [ { title: "Curated For Your Style", description: "AI-selected pieces that match your aesthetic", image: "https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/0a73bb44-c534-48f6-8f0b-9366ec65b778.jpg", cta: "View My Collection", badge: "98% Match" }, { title: "Trending in Your Size", description: "Popular items available in your preferred size", image: "https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/bdb8a5c5-67e6-4dda-ac5e-791a7d35dafc.jpg", cta: "Shop Trending", badge: "Size M" }, { title: "Sustainable Luxury", description: "Eco-conscious pieces from premium brands", image: "https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/b68f41c8-a3e0-48bf-8850-25b9a61859af.jpg", cta: "Shop Sustainable", badge: "Eco-Friendly" } ]; return (
AI Curated For You

Hello, {user.name}

Our AI analyzes your style preferences to curate the perfect luxury collection

{personalizedSections.map((section, index) => (
{section.title}
{section.badge}

{section.title}

{section.description}

))}
); }; /** * Category section component for displaying filtered products */ interface CategorySectionProps { category: string; products: Product[]; } const CategorySection: React.FC = ({ category, products }) => { const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); const [hoveredProduct, setHoveredProduct] = useState(null); const [sortBy, setSortBy] = useState<'price' | 'rating' | 'newest'>('newest'); const [priceRange, setPriceRange] = useState<[number, number]>([0, 5000]); const [selectedSubcategory, setSelectedSubcategory] = useState('all'); const [selectedColors, setSelectedColors] = useState([]); const [selectedSizes, setSelectedSizes] = useState([]); const [showFilters, setShowFilters] = useState(false); const [onlyInStock, setOnlyInStock] = useState(false); const [onlyOnSale, setOnlyOnSale] = useState(false); const getCategoryTitle = (cat: string) => { const titles = { 'women': 'Women\'s Collection', 'men': 'Men\'s Collection', 'shoes': 'Luxury Footwear', 'accessories': 'Premium Accessories', 'sale': 'Exclusive Sale' }; return titles[cat as keyof typeof titles] || 'Featured Products'; }; const getCategoryDescription = (cat: string) => { const descriptions = { 'women': 'Elegant pieces that define feminine sophistication', 'men': 'Refined essentials for the modern gentleman', 'shoes': 'Handcrafted footwear with uncompromising quality', 'accessories': 'Luxury accessories to complete your look', 'sale': 'Limited time offers on premium luxury items' }; return descriptions[cat as keyof typeof descriptions] || 'Carefully curated luxury items'; }; // Advanced filter and sort products const filteredProducts = products .filter(product => product.price >= priceRange[0] && product.price <= priceRange[1]) .filter(product => category === 'sale' ? product.originalPrice : true) // Only show sale items for sale category .filter(product => selectedSubcategory === 'all' || product.subcategory === selectedSubcategory) .filter(product => selectedColors.length === 0 || product.colors.some(color => selectedColors.includes(color))) .filter(product => selectedSizes.length === 0 || product.sizes.some(size => selectedSizes.includes(size))) .filter(product => !onlyOnSale || product.originalPrice) .sort((a, b) => { switch (sortBy) { case 'price': return a.price - b.price; case 'rating': return b.rating - a.rating; case 'newest': return (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0); default: return 0; } }); // Get unique subcategories, colors, and sizes for current category const availableSubcategories = [...new Set(products.map(product => product.subcategory))]; const availableColors = [...new Set(products.flatMap(product => product.colors))]; const availableSizes = [...new Set(products.flatMap(product => product.sizes))]; const currentCategoryStructure = categoryStructure[category] || { subcategories: [] }; // Quick stats const totalProducts = products.length; const saleProducts = products.filter(p => p.originalPrice).length; const newProducts = products.filter(p => p.isNew).length; const exclusiveProducts = products.filter(p => p.isExclusive).length; return (
{/* Special Sale Banner */} {category === 'sale' && (
LUXURY SALE

Up to 40% off on selected premium items • Limited time only

)}
{/* Breadcrumbs */}
{getCategoryTitle(category)}
{/* Enhanced Category Header */}
{getCategoryTitle(category)}

{getCategoryTitle(category)}

{getCategoryDescription(category)}

{/* Advanced Controls */}
{/* Product Statistics */}
{totalProducts}
Total Products
{saleProducts}
On Sale
{newProducts}
New Arrivals
{exclusiveProducts}
Exclusive
{/* Geavanceerde Subcategorie Filter */}

Subcategorieën

{filteredProducts.length} {filteredProducts.length === 1 ? 'product' : 'producten'} gevonden
{availableSubcategories.map(subcategory => { const count = products.filter(p => p.subcategory === subcategory).length; return ( ); })}
{/* Advanced Filters Panel */} {showFilters && (
{/* Price Range Filter */}

💰 Price Range

$0
setPriceRange([priceRange[0], parseInt(e.target.value)])} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" />
$5,000
Up to ${priceRange[1].toLocaleString()}
{/* Color Filter */}

🎨 Colors

{availableColors.slice(0, 8).map(color => ( ))}
{/* Size Filter */}

📏 Sizes

{availableSizes.slice(0, 8).map(size => ( ))}
{/* Quick Filters */}

Quick Filters

)} {/* Basic Price Range (always visible) */}

Price Range

$0
setPriceRange([priceRange[0], parseInt(e.target.value)])} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" />
$5,000
Up to ${priceRange[1].toLocaleString()}
{/* Products Grid */}
{filteredProducts.map((product) => (
setHoveredProduct(product.id)} onMouseLeave={() => setHoveredProduct(null)} >
{product.name} {/* Premium Badges */}
{product.isNew && ( NEW )} {product.isBestseller && ( BESTSELLER )} {product.isExclusive && ( EXCLUSIVE )} {product.isPersonalized && ( FOR YOU )} {product.originalPrice && ( -{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% )}
{/* Quick Actions */}
{/* Quick Shop Overlay */}
{getCategoryTitle(category)}
{product.rating}

{product.name}

{product.description}

{formatPrice(product.price)} {product.originalPrice && ( {formatPrice(product.originalPrice)} )}
{/* Colors and Sizes */}
Colors {product.sizes.length} sizes
{product.colors.slice(0, 3).map((color, index) => (
))}
))}
{/* Load More */}
); }; /** * Premium featured products with luxury presentation and semantic structure */ const FeaturedProducts: React.FC = () => { const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid'); const [hoveredProduct, setHoveredProduct] = useState(null); // Featured products selection (first 8 from all categories) const featuredProducts = allProducts.slice(0, 8); return (
{/* Premium Header */}
Featured Collection

Luxury Essentials

Carefully curated pieces that define timeless elegance

{/* Premium Products Grid */}
{featuredProducts.map((product) => (
setHoveredProduct(product.id)} onMouseLeave={() => setHoveredProduct(null)} role="article" aria-label={`${product.name} - ${formatPrice(product.price)}`} >
{product.name} {/* Premium Badges */}
{product.isNew && ( NEW )} {product.isBestseller && ( BESTSELLER )} {product.isExclusive && ( EXCLUSIVE )} {product.isPersonalized && ( FOR YOU )} {product.originalPrice && ( -{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% )}
{/* Minimalistic Quick Actions */}
{/* Elegant Minimalistic Overlay */}
{product.category}
{product.rating}

{product.name}

{product.description}

{formatPrice(product.price)} {product.originalPrice && ( {formatPrice(product.originalPrice)} )}
{/* Size & Color Options */}
Colors Sizes
{product.colors.slice(0, 3).map((color, index) => (
))}
{product.sizes.length} sizes
{/* Elegant Minimalistic CTA */}
))}
{/* Load More */}
); }; /** * Premium trust indicators section with semantic structure */ const TrustSection: React.FC = () => { const trustIndicators = [ { icon: , title: "Lifetime Warranty", description: "Premium protection for your investment" }, { icon: , title: "White Glove Delivery", description: "Complimentary premium shipping worldwide" }, { icon: , title: "Master Craftsmen", description: "Handcrafted by skilled artisans" }, { icon: , title: "Global Boutiques", description: "50+ exclusive locations worldwide" } ]; return (
The BOLDYASE Promise

Luxury Redefined

{trustIndicators.map((indicator, index) => (
{indicator.icon}

{indicator.title}

{indicator.description}

))}
); }; /** * Premium newsletter section with semantic structure */ const NewsletterSection: React.FC = () => { const [email, setEmail] = useState(''); const [isSubscribed, setIsSubscribed] = useState(false); const handleSubscribe = () => { if (!email || !/\S+@\S+\.\S+/.test(email)) { alert('Please enter a valid email address'); return; } // Simulate API call setTimeout(() => { setIsSubscribed(true); setEmail(''); setTimeout(() => setIsSubscribed(false), 3000); }, 500); }; return (
Exclusive Access

Join The Elite

Be first to discover new collections, exclusive events, and insider luxury insights

{ e.preventDefault(); handleSubscribe(); }} role="form" aria-label="Newsletter subscription" > setEmail(e.target.value)} className="flex-1 px-6 py-4 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white/30 backdrop-blur-sm" required aria-label="Email address" />

Join 100,000+ luxury enthusiasts. Unsubscribe anytime.

• Private Sales • Style Insights • Exclusive Events
); }; /** * Premium footer component with semantic structure */ const Footer: React.FC = () => { return ( ); }; /** * Main Home component with luxury enhancements */ const Home: React.FC = () => { const [isCartOpen, setIsCartOpen] = useState(false); const [activeCategory, setActiveCategory] = useState('home'); useEffect(() => { // Performance optimization for 4K images const preloadImages = () => { const images = [ 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/ee2dad8f-aac3-4b09-9921-99dd2344d8a2.jpg', 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/a6cd0f1c-21e9-4f73-b4de-986b588436c8.jpg', 'https://pub-cdn.sider.ai/u/U0E5HLL3YKO/web-coder/68757064b1dac45b18d6c7ef/resource/0d65b5e4-8773-4599-861d-d8fcffdbffb0.jpg' ]; images.forEach(src => { const img = new Image(); img.src = src; }); }; preloadImages(); }, []); // Filter products based on active category const getProductsByCategory = (category: string) => { if (category === 'home') return allProducts.slice(0, 8); // Show mixed products on home return allProducts.filter(product => product.category === category); }; const renderContent = () => { if (activeCategory === 'home') { return ( <> ); } else { return ( ); } }; return (
{renderContent()}
); }; export default Home;