payaza-storefront-layouts 1.0.0

package/dist/layouts/clothing/components/ClothingHomePage.js

@@ -0,0 +1,295 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button';
+import { ProductRating } from '../../../components/ui/product-rating';
+import { ShoppingCart, Heart, ArrowRight, Truck, ShieldCheck, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useState, useEffect } from 'react';
+import { formatCurrency, filterActiveProducts } from '../../../lib/utils';
+import { getLayoutText, getBannerImage } from '../../../lib/utils/asset-helpers';
+import { shouldUseAPI } from '../../../lib/utils/demo-detection';
+import { PromoBanner } from '../../../layouts/shared/components/PromoBanner';
+export function ClothingHomePage({ storeConfig }) {
+    const layoutConfig = storeConfig.layoutConfig;
+    const categories = storeConfig.categories || [];
+    // Randomly select max 2 categories on every page load
+    const [displayedCategories, setDisplayedCategories] = useState([]);
+    useEffect(() => {
+        // Shuffle and select max 2 categories
+        if (categories.length > 0) {
+            const shuffled = [...categories].sort(() => Math.random() - 0.5);
+            setDisplayedCategories(shuffled.slice(0, 2));
+        }
+        else {
+            setDisplayedCategories([]);
+        }
+    }, []); // Empty deps = run on mount only
+    // Debug logging for configuration
+    console.log('[ClothingHomePage] Full storeConfig:', {
+        storeId: storeConfig.id,
+        storeSlug: storeConfig.slug,
+        hasLayoutConfig: !!layoutConfig,
+        layoutConfigType: typeof layoutConfig,
+    });
+    console.log('[ClothingHomePage] LayoutConfig structure:', {
+        hasSections: !!layoutConfig?.sections,
+        hasHero: !!layoutConfig?.sections?.hero,
+        hasHeroSliders: !!layoutConfig?.sections?.hero?.sliders,
+        sliderCount: layoutConfig?.sections?.hero?.sliders?.length || 0,
+        topLevelHero: !!layoutConfig?.hero,
+        topLevelHeroSliders: !!layoutConfig?.hero?.sliders,
+        topLevelSliderCount: layoutConfig?.hero?.sliders?.length || 0,
+    });
+    console.log('[ClothingHomePage] Full LayoutConfig:', JSON.stringify(layoutConfig, null, 2));
+    console.log('[ClothingHomePage] Editorial config:', layoutConfig?.sections?.marketing?.editorial);
+    // Deduplicate products to avoid key warnings and filter out inactive/deleted products
+    const uniqueProducts = (storeConfig.products || []).filter((product, index, self) => index === self.findIndex((t) => t.id === product.id));
+    const products = filterActiveProducts(uniqueProducts);
+    // Hero slides data - use new slider structure with fallback to old format
+    // For demo stores, helpers will return fallbacks; for real stores, try layoutConfig first, then helpers
+    const isRealStore = shouldUseAPI(storeConfig.slug);
+    // Debug logging for slider configuration
+    console.log('[ClothingHomePage] LayoutConfig sections.hero:', layoutConfig?.sections?.hero);
+    console.log('[ClothingHomePage] LayoutConfig hero (top-level):', layoutConfig?.hero);
+    console.log('[ClothingHomePage] Sliders found:', layoutConfig?.sections?.hero?.sliders?.length || 0);
+    // Try new structure first (sections.hero.sliders)
+    let heroSlides = [];
+    if (layoutConfig?.sections?.hero?.sliders && Array.isArray(layoutConfig.sections.hero.sliders) && layoutConfig.sections.hero.sliders.length > 0) {
+        console.log('[ClothingHomePage] Using sections.hero.sliders structure');
+        heroSlides = layoutConfig.sections.hero.sliders
+            .filter((slider) => slider && slider.image) // Filter out invalid sliders
+            .map((slider) => {
+            // Extract button text - only use if not empty
+            const primaryButtonText = slider.primaryButton?.text?.trim() || '';
+            const secondaryButtonText = slider.secondaryButton?.text?.trim() || '';
+            console.log('[ClothingHomePage] Slider:', {
+                id: slider.id,
+                image: slider.image ? 'present' : 'missing',
+                title: slider.title,
+                primaryButtonText,
+                secondaryButtonText,
+            });
+            // Check badge visibility - use sections.hero.showBadges first, fallback to top-level hero.showBadges
+            const showBadges = layoutConfig?.sections?.hero?.showBadges !== false &&
+                (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
+            return {
+                image: slider.image || '',
+                badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : undefined,
+                title: slider.title || storeConfig.name,
+                description: slider.description || storeConfig.description || '',
+                // Only set button text if it's not empty - this allows button visibility logic to work
+                primaryButtonText: primaryButtonText || getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
+                primaryButtonLink: slider.primaryButton?.link || `/${storeConfig.slug}/products`,
+                secondaryButtonText: secondaryButtonText || undefined, // Don't provide fallback for secondary
+                secondaryButtonLink: slider.secondaryButton?.link || `/${storeConfig.slug}/categories`,
+            };
+        });
+    }
+    else if (layoutConfig?.hero?.sliders && Array.isArray(layoutConfig.hero.sliders) && layoutConfig.hero.sliders.length > 0) {
+        // Fallback to top-level hero.sliders
+        console.log('[ClothingHomePage] Using top-level hero.sliders structure');
+        heroSlides = layoutConfig.hero.sliders
+            .filter((slider) => slider && slider.image) // Filter out invalid sliders
+            .map((slider) => {
+            const primaryButtonText = slider.primaryButton?.text?.trim() || '';
+            const secondaryButtonText = slider.secondaryButton?.text?.trim() || '';
+            // Check badge visibility - use sections.hero.showBadges first, fallback to top-level hero.showBadges
+            const showBadges = layoutConfig?.sections?.hero?.showBadges !== false &&
+                (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
+            return {
+                image: slider.image || '',
+                badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : undefined,
+                title: slider.title || storeConfig.name,
+                description: slider.description || storeConfig.description || '',
+                primaryButtonText: primaryButtonText || getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
+                primaryButtonLink: slider.primaryButton?.link || `/${storeConfig.slug}/products`,
+                secondaryButtonText: secondaryButtonText || undefined,
+                secondaryButtonLink: slider.secondaryButton?.link || `/${storeConfig.slug}/categories`,
+            };
+        });
+    }
+    else {
+        // Fallback to old format (backward compatibility)
+        heroSlides = [
+            {
+                image: getBannerImage(storeConfig, 'hero_slide_1', 'https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=2070&auto=format&fit=crop'),
+                badge: layoutConfig?.hero?.showBadges
+                    ? (isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.badge ? layoutConfig.text.hero.slides[0].badge : getLayoutText(storeConfig, 'hero.badge', 'New Season'))
+                    : undefined,
+                title: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.title ? layoutConfig.text.hero.slides[0].title : (getLayoutText(storeConfig, 'hero.slide1.title', storeConfig.name) || storeConfig.name),
+                description: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.description ? layoutConfig.text.hero.slides[0].description : (getLayoutText(storeConfig, 'hero.slide1.description', storeConfig.description) || storeConfig.description),
+                primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.primaryButton ? layoutConfig.text.hero.slides[0].primaryButton : getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
+                primaryButtonLink: `/${storeConfig.slug}/products`,
+                secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[0]?.secondaryButton ? layoutConfig.text.hero.slides[0].secondaryButton : getLayoutText(storeConfig, 'common.explore', 'Explore'),
+                secondaryButtonLink: `/${storeConfig.slug}/categories`,
+            },
+            {
+                image: getBannerImage(storeConfig, 'hero_slide_2', 'https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?q=80&w=2070&auto=format&fit=crop'),
+                badge: layoutConfig?.hero?.showBadges
+                    ? (isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.badge ? layoutConfig.text.hero.slides[1].badge : getLayoutText(storeConfig, 'common.trending', 'Trending Now'))
+                    : undefined,
+                title: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.title ? layoutConfig.text.hero.slides[1].title : getLayoutText(storeConfig, 'hero.slide2.title', 'Discover Your Style'),
+                description: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.description ? layoutConfig.text.hero.slides[1].description : getLayoutText(storeConfig, 'hero.slide2.description', 'Explore our curated collection of timeless pieces and contemporary designs.'),
+                primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.primaryButton ? layoutConfig.text.hero.slides[1].primaryButton : getLayoutText(storeConfig, 'common.viewAll', 'View Collection'),
+                primaryButtonLink: `/${storeConfig.slug}/products`,
+                secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[1]?.secondaryButton ? layoutConfig.text.hero.slides[1].secondaryButton : undefined,
+                secondaryButtonLink: `/${storeConfig.slug}/categories/men`,
+            },
+            {
+                image: getBannerImage(storeConfig, 'hero_slide_3', 'https://images.unsplash.com/photo-1469334031218-e382a71b716b?q=80&w=2070&auto=format&fit=crop'),
+                badge: layoutConfig?.hero?.showBadges
+                    ? (isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.badge ? layoutConfig.text.hero.slides[2].badge : getLayoutText(storeConfig, 'common.limited', 'Limited Edition'))
+                    : undefined,
+                title: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.title ? layoutConfig.text.hero.slides[2].title : getLayoutText(storeConfig, 'hero.slide3.title', 'Premium Quality'),
+                description: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.description ? layoutConfig.text.hero.slides[2].description : getLayoutText(storeConfig, 'hero.slide3.description', 'Crafted with attention to detail and premium materials for lasting elegance.'),
+                primaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.primaryButton ? layoutConfig.text.hero.slides[2].primaryButton : getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'),
+                primaryButtonLink: `/${storeConfig.slug}/products`,
+                secondaryButtonText: isRealStore && layoutConfig?.text?.hero?.slides?.[2]?.secondaryButton ? layoutConfig.text.hero.slides[2].secondaryButton : undefined,
+                secondaryButtonLink: `/${storeConfig.slug}/categories/men`,
+            },
+        ];
+    }
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [isAutoPlaying, setIsAutoPlaying] = useState(layoutConfig?.hero?.autoPlay !== false);
+    // Auto-play functionality
+    useEffect(() => {
+        if (!isAutoPlaying || layoutConfig?.hero?.autoPlay === false || heroSlides.length === 0)
+            return;
+        const interval = setInterval(() => {
+            setCurrentSlide((prev) => (prev + 1) % heroSlides.length);
+        }, 5000); // Change slide every 5 seconds
+        return () => clearInterval(interval);
+    }, [isAutoPlaying, heroSlides.length, layoutConfig?.hero?.autoPlay]);
+    const goToSlide = (index) => {
+        if (heroSlides.length === 0)
+            return;
+        setCurrentSlide(Math.min(index, heroSlides.length - 1));
+        setIsAutoPlaying(false);
+        // Resume auto-play after 10 seconds
+        if (layoutConfig?.hero?.autoPlay !== false) {
+            setTimeout(() => setIsAutoPlaying(true), 10000);
+        }
+    };
+    const nextSlide = () => {
+        if (heroSlides.length === 0)
+            return;
+        setCurrentSlide((prev) => (prev + 1) % heroSlides.length);
+        setIsAutoPlaying(false);
+        if (layoutConfig?.hero?.autoPlay !== false) {
+            setTimeout(() => setIsAutoPlaying(true), 10000);
+        }
+    };
+    const prevSlide = () => {
+        if (heroSlides.length === 0)
+            return;
+        setCurrentSlide((prev) => (prev - 1 + heroSlides.length) % heroSlides.length);
+        setIsAutoPlaying(false);
+        if (layoutConfig?.hero?.autoPlay !== false) {
+            setTimeout(() => setIsAutoPlaying(true), 10000);
+        }
+    };
+    // Determine grid layout - always use 2-column layout since we limit to 2 categories
+    const getCategoryGridClass = () => {
+        return 'grid-cols-1 md:grid-cols-2';
+    };
+    return (_jsxs("div", { className: "min-h-screen bg-white", children: [layoutConfig?.hero?.show !== false && heroSlides.length > 0 && (_jsxs("section", { className: "relative h-[85vh] w-full overflow-hidden", onMouseEnter: () => setIsAutoPlaying(false), onMouseLeave: () => layoutConfig?.hero?.autoPlay !== false && setIsAutoPlaying(true), children: [_jsx("div", { className: "relative h-full w-full", children: heroSlides.map((slide, index) => (_jsxs("div", { className: `absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0'}`, children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(Image, { src: slide.image, alt: slide.title, fill: true, className: "object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/50 via-black/20 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center z-20", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: `max-w-3xl text-white space-y-8 transition-all duration-1000 ${index === currentSlide
+                                                ? 'opacity-100 translate-y-0'
+                                                : 'opacity-0 translate-y-8'}`, children: [_jsxs("div", { children: [slide.badge && (_jsx("span", { className: "inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full text-sm font-medium border border-white/30 uppercase tracking-wider mb-4", children: slide.badge })), _jsx("h1", { className: "text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight tracking-tight mb-4", children: slide.title }), _jsx("div", { className: "h-1 w-24 bg-white/80 rounded-full" })] }), _jsx("p", { className: "text-xl sm:text-2xl text-gray-100 font-light leading-relaxed max-w-lg", children: slide.description }), _jsxs("div", { className: "flex flex-wrap gap-4 pt-4", children: [layoutConfig?.sections?.hero?.showCTA !== false &&
+                                                            layoutConfig?.hero?.showCTA !== false &&
+                                                            slide.primaryButtonText &&
+                                                            slide.primaryButtonText.trim() !== '' && (_jsx(Link, { href: slide.primaryButtonLink, children: _jsx(Button, { size: "lg", className: "h-14 px-10 text-base rounded-full bg-white text-black hover:bg-gray-100 transition-all duration-300 hover:scale-105 font-semibold", children: slide.primaryButtonText }) })), (layoutConfig?.sections?.hero?.showSecondaryCTA !== false || layoutConfig?.hero?.showSecondaryCTA !== false) &&
+                                                            slide.secondaryButtonText &&
+                                                            slide.secondaryButtonText.trim() !== '' &&
+                                                            slide.secondaryButtonLink && (_jsx(Link, { href: slide.secondaryButtonLink, children: _jsx(Button, { size: "lg", variant: "outline", className: "h-14 px-10 text-base rounded-full border-white bg-transparent text-white hover:bg-white/20 hover:text-white backdrop-blur-sm transition-all duration-300", style: { color: 'white' }, children: slide.secondaryButtonText }) }))] })] }) }) })] }, index))) }), _jsx("button", { onClick: prevSlide, className: "absolute left-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-3 transition-all duration-300 hover:scale-110 group", "aria-label": "Previous slide", children: _jsx(ChevronLeft, { className: "h-6 w-6 text-white group-hover:text-white" }) }), _jsx("button", { onClick: nextSlide, className: "absolute right-4 top-1/2 -translate-y-1/2 z-30 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full p-3 transition-all duration-300 hover:scale-110 group", "aria-label": "Next slide", children: _jsx(ChevronRight, { className: "h-6 w-6 text-white group-hover:text-white" }) }), _jsx("div", { className: "absolute bottom-8 left-1/2 -translate-x-1/2 z-30 flex gap-2", children: heroSlides.map((_, index) => (_jsx("button", { onClick: () => goToSlide(index), className: `transition-all duration-300 rounded-full ${index === currentSlide
+                                ? 'w-12 h-2 bg-white'
+                                : 'w-2 h-2 bg-white/50 hover:bg-white/75'}`, "aria-label": `Go to slide ${index + 1}` }, index))) })] })), layoutConfig?.features?.show !== false && (_jsx("section", { className: "py-8 bg-gray-50 border-b border-gray-100", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-gray-200", children: [_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-4", children: [_jsx(Truck, { className: "h-6 w-6 text-gray-900" }), _jsx("h3", { className: "font-semibold text-gray-900", children: "Free Shipping" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["On all orders over $", storeConfig.settings.freeShippingThreshold] })] }), _jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-4", children: [_jsx(RefreshCw, { className: "h-6 w-6 text-gray-900" }), _jsx("h3", { className: "font-semibold text-gray-900", children: "Free Returns" }), _jsx("p", { className: "text-sm text-gray-500", children: "30-day money back guarantee" })] }), _jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-4", children: [_jsx(ShieldCheck, { className: "h-6 w-6 text-gray-900" }), _jsx("h3", { className: "font-semibold text-gray-900", children: "Secure Payment" }), _jsx("p", { className: "text-sm text-gray-500", children: "100% secure checkout process" })] })] }) }) })), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { className: "py-12 md:py-20 px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-end mb-8 md:mb-12 gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold mb-3 tracking-tight", children: getLayoutText(storeConfig, 'sections.categories.title', 'Shop by Category') }), _jsx("p", { className: "text-gray-500 text-lg", children: getLayoutText(storeConfig, 'sections.categories.subtitle', 'Curated collections for every style') })] }), layoutConfig?.sections?.categories?.showViewAll !== false && (_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "group flex items-center gap-2 text-sm font-medium hover:text-gray-600 transition-colors pb-1 border-b border-transparent hover:border-gray-300", children: [getLayoutText(storeConfig, 'sections.categories.viewAll', 'View All Categories'), " ", _jsx(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-1" })] }))] }), _jsx("div", { className: `grid ${getCategoryGridClass()} gap-6`, children: displayedCategories.map((category) => {
+                                // Validate category image - handle all formats
+                                const extractCategoryImage = (image) => {
+                                    if (!image)
+                                        return undefined;
+                                    // If already a string, validate
+                                    if (typeof image === 'string') {
+                                        const trimmed = image.trim();
+                                        return trimmed.length > 0 ? trimmed : undefined;
+                                    }
+                                    // If object, extract url
+                                    if (typeof image === 'object' && image !== null) {
+                                        if ('url' in image && image.url) {
+                                            const url = typeof image.url === 'string' ? image.url.trim() : String(image.url).trim();
+                                            return url.length > 0 ? url : undefined;
+                                        }
+                                    }
+                                    // If array, take first valid item
+                                    if (Array.isArray(image) && image.length > 0) {
+                                        return extractCategoryImage(image[0]);
+                                    }
+                                    return undefined;
+                                };
+                                const categoryImage = extractCategoryImage(category.image);
+                                return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: `group relative overflow-hidden rounded-2xl aspect-[3/4]`, children: [_jsxs("div", { className: "absolute inset-0 bg-gray-200", children: [_jsx(ImageWithFallback, { src: categoryImage, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "auto" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-70 transition-opacity" })] }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-8", children: [_jsx("h3", { className: "text-2xl font-bold text-white mb-2 transform translate-y-0 transition-transform duration-300", children: category.name }), _jsx("div", { className: "h-0.5 w-12 bg-white/0 group-hover:bg-white/100 transition-all duration-500 mb-4" }), _jsxs("span", { className: "inline-flex items-center text-white text-sm font-medium opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300", children: [getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'), " ", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] })] })] }, category.id));
+                            }) })] }) })), layoutConfig?.sections?.marketing?.show !== false && (_jsx("section", { className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-stone-50", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 lg:gap-20 items-center", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "aspect-[4/5] rounded-lg overflow-hidden relative", children: _jsx(ImageWithFallback, { src: layoutConfig?.sections?.marketing?.editorial?.image, alt: "Editorial Lookbook", className: "w-full h-full object-cover", skeletonAspectRatio: "4/5" }) }), layoutConfig?.sections?.marketing?.editorial?.detailImage && (_jsx("div", { className: "absolute -bottom-8 -right-8 w-48 h-48 bg-white p-4 shadow-xl rounded-lg hidden md:block animate-fade-in-up", style: { animationDelay: '0.2s' }, children: _jsx("div", { className: "w-full h-full relative", children: _jsx(ImageWithFallback, { src: layoutConfig.sections.marketing.editorial.detailImage, alt: "Detail Shot", className: "w-full h-full object-cover rounded", skeletonAspectRatio: "square" }) }) }))] }), _jsxs("div", { className: "space-y-8", children: [_jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase", children: layoutConfig?.sections?.marketing?.editorial?.label || "Editorial" }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight text-gray-900", children: layoutConfig?.sections?.marketing?.editorial?.title ? (layoutConfig.sections.marketing.editorial.title.split('\n').map((line, idx, arr) => (_jsxs("span", { children: [line, idx < arr.length - 1 && _jsx("br", {})] }, idx)))) : (_jsxs(_Fragment, { children: ["Redefining Modern ", _jsx("br", {}), _jsx("span", { className: "italic font-serif", children: "Elegance" })] })) }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed", children: layoutConfig?.sections?.marketing?.editorial?.description || "Explore our latest editorial featuring timeless pieces crafted for the contemporary wardrobe. From essential basics to statement outwear, find your signature look." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 pt-4", children: [layoutConfig?.sections?.marketing?.editorial?.primaryButtonText && layoutConfig.sections.marketing.editorial.primaryButtonText.trim() !== '' && (_jsx(Link, { href: layoutConfig.sections.marketing.editorial.primaryButtonLink || `/${storeConfig.slug}/style-guide`, children: _jsx(Button, { className: "rounded-full px-8 py-6 bg-gray-900 hover:bg-black text-white transition-all", children: layoutConfig.sections.marketing.editorial.primaryButtonText }) })), layoutConfig?.sections?.marketing?.editorial?.secondaryButtonText && layoutConfig.sections.marketing.editorial.secondaryButtonText.trim() !== '' && (_jsx(Link, { href: layoutConfig.sections.marketing.editorial.secondaryButtonLink || `/${storeConfig.slug}/about`, children: _jsx(Button, { variant: "outline", className: "rounded-full px-8 py-6 border-gray-300 hover:bg-white hover:border-gray-900 transition-all", children: layoutConfig.sections.marketing.editorial.secondaryButtonText }) }))] })] })] }) }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center max-w-2xl mx-auto mb-10 md:mb-16", children: [_jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase mb-3 block", children: "Curated For You" }), _jsx("h2", { className: "text-3xl md:text-4xl font-bold mb-4 tracking-tight", children: layoutConfig?.sections?.featuredProducts?.title || getLayoutText(storeConfig, 'sections.featuredProducts.title', 'Trending Now') }), _jsx("div", { className: "h-1 w-20 bg-gray-900 mx-auto mb-6" }), _jsx("p", { className: "text-gray-600 text-lg", children: getLayoutText(storeConfig, 'sections.featuredProducts.subtitle', 'Discover the latest trends and essential pieces that define this season\'s style.') })] }), _jsx("div", { className: "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8", children: products.slice(0, 4).map((product) => {
+                                // Comprehensive image extraction - handles all formats
+                                const extractProductImages = (images) => {
+                                    if (!images)
+                                        return [];
+                                    // If already an array of strings, validate and return
+                                    if (Array.isArray(images)) {
+                                        const firstItem = images[0];
+                                        if (typeof firstItem === 'string') {
+                                            return images
+                                                .filter((img) => typeof img === 'string' && img.trim().length > 0)
+                                                .map((img) => img.trim());
+                                        }
+                                        // If array of objects, extract URLs
+                                        if (firstItem && typeof firstItem === 'object' && firstItem !== null) {
+                                            const result = [];
+                                            for (const item of images) {
+                                                if (!item)
+                                                    continue;
+                                                if (typeof item === 'object' && item !== null) {
+                                                    // Check for url property
+                                                    if ('url' in item && item.url) {
+                                                        const url = typeof item.url === 'string' ? item.url.trim() : String(item.url).trim();
+                                                        if (url.length > 0) {
+                                                            result.push(url);
+                                                        }
+                                                    }
+                                                    // Check for nested url
+                                                    else if (item.url && typeof item.url === 'object' && 'url' in item.url) {
+                                                        const url = typeof item.url.url === 'string' ? item.url.url.trim() : String(item.url.url).trim();
+                                                        if (url.length > 0) {
+                                                            result.push(url);
+                                                        }
+                                                    }
+                                                }
+                                                else if (typeof item === 'string') {
+                                                    const trimmed = item.trim();
+                                                    if (trimmed.length > 0) {
+                                                        result.push(trimmed);
+                                                    }
+                                                }
+                                            }
+                                            return result;
+                                        }
+                                    }
+                                    // Handle single object
+                                    if (typeof images === 'object' && images !== null && !Array.isArray(images)) {
+                                        if ('url' in images && images.url) {
+                                            const url = typeof images.url === 'string' ? images.url.trim() : String(images.url).trim();
+                                            return url.length > 0 ? [url] : [];
+                                        }
+                                    }
+                                    // Handle single string
+                                    if (typeof images === 'string') {
+                                        const trimmed = images.trim();
+                                        return trimmed.length > 0 ? [trimmed] : [];
+                                    }
+                                    return [];
+                                };
+                                const validImages = extractProductImages(product.images);
+                                const firstImage = validImages.length > 0 ? validImages[0] : undefined;
+                                return (_jsx("div", { className: "group", children: _jsxs(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, children: [_jsxs("div", { className: "relative aspect-[3/4] bg-gray-50 rounded-xl overflow-hidden mb-4", children: [_jsx(ImageWithFallback, { src: firstImage, alt: product.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", skeletonAspectRatio: "3/4" }), validImages[1] && (_jsx(ImageWithFallback, { src: validImages[1], alt: product.name, className: "absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-500", skeletonAspectRatio: "3/4" })), _jsxs("div", { className: "hidden lg:flex absolute bottom-4 right-4 flex-col gap-2 opacity-0 transform translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300", children: [storeConfig.features.wishlist && (_jsx(Button, { variant: "secondary", size: "icon", className: "bg-white hover:bg-black hover:text-white shadow-md rounded-full transition-colors", children: _jsx(Heart, { className: "h-4 w-4" }) })), _jsx(Button, { variant: "secondary", size: "icon", className: "bg-white hover:bg-black hover:text-white shadow-md rounded-full transition-colors", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) })] }), _jsx(Button, { variant: "secondary", size: "icon", className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(ShoppingCart, { className: "h-4 w-4" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-3 left-3 bg-black text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "font-semibold text-gray-900 group-hover:text-gray-600 transition-colors text-lg", children: product.name }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-gray-900", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice && (_jsx("span", { className: "text-sm text-gray-400 line-through", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') }))] }), _jsx(ProductRating, { rating: product.rating, reviewCount: product.reviewCount, size: "sm", showReviewCount: false, className: "shrink-0" })] })] }) }, product.id));
+                            }) }), layoutConfig?.sections?.featuredProducts?.showViewAll !== false && (_jsx("div", { className: "mt-16 text-center", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { variant: "outline", className: "rounded-full px-10 py-6 border-gray-200 hover:border-black hover:bg-black hover:text-white transition-all text-base font-medium", children: getLayoutText(storeConfig, 'sections.featuredProducts.viewAll', 'View All Products') }) }) }))] }) })), _jsx(PromoBanner, { config: layoutConfig?.sections?.promoBanner, layoutStyle: "clothing" })] }));
+}

package/dist/layouts/clothing/index.d.ts

@@ -0,0 +1,8 @@
+export { ClothingHomePage } from './components/ClothingHomePage';
+export { ProductsPage } from './pages/ProductsPage';
+export { ProductDetailPage } from './pages/ProductDetailPage';
+export { CategoryPage } from './pages/CategoryPage';
+export { CategoriesPage } from './pages/CategoriesPage';
+export { AboutPage } from './pages/AboutPage';
+export { ContactPage } from './pages/ContactPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/clothing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/clothing/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/layouts/clothing/index.js

@@ -0,0 +1,8 @@
+// Clothing layout exports
+export { ClothingHomePage } from './components/ClothingHomePage';
+export { ProductsPage } from './pages/ProductsPage';
+export { ProductDetailPage } from './pages/ProductDetailPage';
+export { CategoryPage } from './pages/CategoryPage';
+export { CategoriesPage } from './pages/CategoriesPage';
+export { AboutPage } from './pages/AboutPage';
+export { ContactPage } from './pages/ContactPage';

package/dist/layouts/clothing/pages/AboutPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface AboutPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function AboutPage({ storeConfig }: AboutPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AboutPage.d.ts.map

package/dist/layouts/clothing/pages/AboutPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,EAAE,cAAc,2CAsOxD"}

package/dist/layouts/clothing/pages/AboutPage.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Users, Award, Heart, Leaf, MapPin, Clock, Mail, ArrowRight } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
+import { DotPattern } from '../../../components/ui/background-patterns';
+import Image from 'next/image';
+export function AboutPage({ storeConfig }) {
+    const primaryColor = storeConfig.branding.primaryColor;
+    const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
+    const aboutConfig = storeConfig.layoutConfig?.pages?.about;
+    // Clothing-specific hero image
+    const heroImage = aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2074&auto=format&fit=crop';
+    const pageTitle = aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
+    const pageContent = aboutConfig?.content || storeConfig.description;
+    const missionStatement = aboutConfig?.missionStatement;
+    const galleryImages = aboutConfig?.gallerySection;
+    const values = [
+        {
+            icon: Award,
+            title: "Quality First",
+            description: "We never compromise on the quality of our products and services."
+        },
+        {
+            icon: Users,
+            title: "Customer Focused",
+            description: "Your satisfaction is our top priority. We're here to help."
+        },
+        {
+            icon: Heart,
+            title: "Passion",
+            description: "We love what we do and it shows in every detail of our work."
+        },
+        {
+            icon: Leaf,
+            title: "Sustainability",
+            description: "Committed to eco-friendly practices and responsible sourcing."
+        }
+    ];
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] }), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", children: missionStatement || storeConfig.description })] }) }) })] }), _jsxs("section", { className: "py-24 px-4 sm:px-6 lg:px-8 relative", children: [_jsx("div", { className: "absolute top-0 right-0 -mt-24 -mr-24 w-96 h-96 bg-gray-50 rounded-full blur-3xl -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "relative", children: [galleryImages && galleryImages.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: galleryImages.slice(0, 4).map((img, i) => (_jsx("div", { className: `relative overflow-hidden rounded-2xl shadow-lg ${i === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'}`, children: _jsx(Image, { src: img.image, alt: img.caption || "Gallery Image", fill: true, className: "w-full h-full object-cover hover:scale-110 transition-transform duration-500", unoptimized: true }) }, i))) })) : (_jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop", alt: "Our Team", fill: true, className: "w-full h-full object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60" }), _jsxs("div", { className: "absolute bottom-8 left-8 text-white", children: [_jsx("p", { className: "font-bold text-lg", children: "The Dream Team" }), _jsx("p", { className: "text-white/80 text-sm", children: "Working together to serve you better" })] })] })), _jsx("div", { className: "absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 animate-bounce duration-[3000ms]", children: _jsx(Heart, { className: "w-10 h-10", style: { color: primaryColor, fill: primaryColor } }) })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-widest mb-3 block", style: { color: primaryColor }, children: "Who We Are" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: "Our Journey" }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: values.map((item, idx) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, children: _jsx(item.icon, { className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2 text-lg", children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", children: item.description })] })] }, idx))) })] })] }) })] }), _jsxs("section", { className: "py-20 relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 opacity-10", children: _jsx(DotPattern, { color: primaryColor, cx: 2, cy: 2, cr: 2, width: 30, height: 30 }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundColor: `${secondaryColor}15` } }), _jsx("div", { className: "container mx-auto px-4 relative z-10", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12", children: [
+                                { label: "Happy Customers", value: "10k+" },
+                                { label: "Products", value: storeConfig.products?.length ? `${storeConfig.products.length * 10}+` : "50+" },
+                                { label: "Years Active", value: "5+" },
+                                { label: "Team Members", value: "25+" }
+                            ].map((stat, idx) => (_jsxs("div", { className: "text-center group", children: [_jsx("div", { className: "text-5xl md:text-6xl font-black mb-2 tracking-tight transition-transform group-hover:scale-110 duration-300", style: { color: primaryColor }, children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", children: stat.label })] }, idx))) }) })] }), _jsx("section", { className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "text-center mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: "Get in Touch" }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", children: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(MapPin, { className: "h-8 w-8 text-gray-400 group-hover:text-blue-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Visit Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: ["123 Store Street", _jsx("br", {}), "Commerce City, ST 12345"] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Mail, { className: "h-8 w-8 text-gray-400 group-hover:text-orange-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Email Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: ["hello@", storeConfig.slug, ".com", _jsx("br", {}), "support@", storeConfig.slug, ".com"] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Clock, { className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Opening Hours" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })] })] })] }) })] }));
+}

package/dist/layouts/clothing/pages/CategoriesPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface CategoriesPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function CategoriesPage({ storeConfig }: CategoriesPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CategoriesPage.d.ts.map

package/dist/layouts/clothing/pages/CategoriesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/pages/CategoriesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAmGD,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAwHlE"}

package/dist/layouts/clothing/pages/CategoriesPage.js

@@ -0,0 +1,162 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { ArrowRight } from 'lucide-react';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
+/**
+ * Calculate optimal grid span classes based on category count and index
+ * Ensures visual balance and hierarchy for any number of categories
+ */
+function getCategoryGridLayout(index, totalCount) {
+    // Always make first category prominent (hero treatment)
+    if (index === 0) {
+        if (totalCount === 1) {
+            return 'md:col-span-3 md:row-span-2'; // Full width for single category
+        }
+        if (totalCount === 2) {
+            return 'md:col-span-2 md:row-span-2'; // Large hero, second category fills remaining space
+        }
+        return 'md:col-span-2 md:row-span-2'; // Standard hero treatment
+    }
+    // Handle different category count ranges
+    if (totalCount === 1) {
+        return ''; // Won't be reached, but safe fallback
+    }
+    if (totalCount === 2) {
+        // Second category fills remaining space
+        return 'md:col-span-1 md:row-span-2';
+    }
+    if (totalCount === 3) {
+        // After hero, two equal categories
+        if (index === 1)
+            return 'md:col-span-1 md:row-span-2';
+        if (index === 2)
+            return 'md:col-span-1 md:row-span-2';
+        return '';
+    }
+    if (totalCount === 4) {
+        // Hero + 3 categories: one tall, two standard
+        if (index === 1)
+            return 'md:col-span-1 md:row-span-2';
+        if (index === 2)
+            return 'md:col-span-1';
+        if (index === 3)
+            return 'md:col-span-1';
+        return '';
+    }
+    if (totalCount === 5) {
+        // Hero + 4 categories: balanced distribution
+        if (index === 1)
+            return 'md:col-span-1 md:row-span-2';
+        if (index === 2)
+            return 'md:col-span-1';
+        if (index === 3)
+            return 'md:col-span-1';
+        if (index === 4)
+            return 'md:col-span-1';
+        return '';
+    }
+    if (totalCount === 6) {
+        // Hero + 5 categories: create visual rhythm
+        if (index === 1)
+            return 'md:col-span-1 md:row-span-2';
+        if (index === 2)
+            return 'md:col-span-1';
+        if (index === 3)
+            return 'md:col-span-1';
+        if (index === 4)
+            return 'md:col-span-2'; // Wide category
+        if (index === 5)
+            return 'md:col-span-1';
+        return '';
+    }
+    if (totalCount >= 7 && totalCount <= 9) {
+        // Hero + masonry-style grid
+        if (index === 1)
+            return 'md:col-span-1 md:row-span-2';
+        if (index === 2)
+            return 'md:col-span-1';
+        if (index === 3)
+            return 'md:col-span-1';
+        if (index === 4)
+            return 'md:col-span-2'; // Wide category
+        if (index === 5)
+            return 'md:col-span-1';
+        if (index === 6)
+            return 'md:col-span-1 md:row-span-2';
+        if (index === 7)
+            return 'md:col-span-1';
+        if (index === 8)
+            return 'md:col-span-1';
+        return '';
+    }
+    // 10+ categories: uniform grid with occasional emphasis
+    // Create a repeating pattern for visual interest
+    const patternIndex = (index - 1) % 8; // Pattern repeats every 8 items (after hero)
+    if (patternIndex === 0)
+        return 'md:col-span-1 md:row-span-2'; // Tall
+    if (patternIndex === 3)
+        return 'md:col-span-2'; // Wide
+    if (patternIndex === 6)
+        return 'md:col-span-1 md:row-span-2'; // Tall
+    return ''; // Standard 1x1
+}
+/**
+ * Get optimal grid container class based on category count
+ */
+function getGridContainerClass(totalCount) {
+    if (totalCount === 1) {
+        return 'grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[300px]';
+    }
+    if (totalCount <= 3) {
+        return 'grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[300px]';
+    }
+    // For 4+ categories, use standard 3-column grid
+    return 'grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[300px]';
+}
+export function CategoriesPage({ storeConfig }) {
+    const categories = storeConfig.categories || [];
+    // Breadcrumbs
+    const breadcrumbItems = [
+        { label: storeConfig.name, href: `/${storeConfig.slug}` },
+        { label: 'Categories', href: `/${storeConfig.slug}/categories` },
+    ];
+    return (_jsxs("div", { "data-content-ready": true, className: "min-h-screen bg-white text-slate-900 font-sans", children: [_jsx("div", { className: "bg-gray-50 border-b border-gray-200", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16", children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [_jsx("div", { className: "mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsx("h1", { className: "text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 mb-6", children: "Shop by Category" }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed max-w-2xl", children: "Explore our comprehensive collection of premium products across various departments. Dive into our curated selections designed to match your style and needs." })] }) }) }), _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-16", children: categories.length === 0 ? (_jsxs("div", { className: "text-center py-20", children: [_jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-2", children: "No categories available" }), _jsx("p", { className: "text-gray-500", children: "Categories will appear here once they are added to the store." })] })) : (_jsx("div", { className: getGridContainerClass(categories.length), children: categories.map((category, index) => {
+                        // Get adaptive grid layout based on position and total count
+                        const spanClass = getCategoryGridLayout(index, categories.length);
+                        // Validate category image - handle all formats independently
+                        const extractCategoryImage = (image) => {
+                            if (!image)
+                                return undefined;
+                            // If already a string, validate
+                            if (typeof image === 'string') {
+                                const trimmed = image.trim();
+                                return trimmed.length > 0 ? trimmed : undefined;
+                            }
+                            // If object, extract url
+                            if (typeof image === 'object' && image !== null) {
+                                if ('url' in image && image.url) {
+                                    const url = typeof image.url === 'string' ? image.url.trim() : String(image.url).trim();
+                                    return url.length > 0 ? url : undefined;
+                                }
+                                // Check for other common property names
+                                for (const key of ['src', 'image', 'imageUrl', 'image_url', 'value']) {
+                                    if (key in image && image[key]) {
+                                        const url = typeof image[key] === 'string' ? image[key].trim() : String(image[key]).trim();
+                                        if (url.length > 0) {
+                                            return url;
+                                        }
+                                    }
+                                }
+                            }
+                            // If array, take first valid item
+                            if (Array.isArray(image) && image.length > 0) {
+                                return extractCategoryImage(image[0]);
+                            }
+                            return undefined;
+                        };
+                        const categoryImage = extractCategoryImage(category.image);
+                        return (_jsxs(Link, { "data-category-card": true, href: `/${storeConfig.slug}/products?category=${category.slug}`, className: `group relative overflow-hidden rounded-2xl bg-gray-100 border border-gray-200 shadow-sm hover:shadow-xl transition-all duration-500 min-h-[300px] ${spanClass}`, children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(ImageWithFallback, { src: categoryImage, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", skeletonAspectRatio: "auto" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 transition-opacity group-hover:opacity-70" })] }), _jsx("div", { className: "absolute inset-0 flex flex-col justify-end p-6 lg:p-8", children: _jsxs("div", { className: "transform transition-transform duration-300 translate-y-2 group-hover:translate-y-0", children: [_jsx("h2", { className: "font-bold text-white mb-2 text-2xl md:text-3xl", children: category.name }), category.description && (_jsx("p", { className: "text-gray-200 mb-6 line-clamp-2 max-w-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-75 text-sm md:text-base", children: category.description })), _jsxs("div", { className: "flex items-center gap-2 text-white font-medium text-sm tracking-wide uppercase", children: [_jsx("span", { className: "border-b border-transparent group-hover:border-white transition-colors", children: "Explore Collection" }), _jsx(ArrowRight, { className: "w-4 h-4 transform transition-transform group-hover:translate-x-1" })] })] }) })] }, category.id));
+                    }) })) })] }));
+}

package/dist/layouts/clothing/pages/CategoryPage.d.ts

@@ -0,0 +1,8 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface CategoryPageProps {
+    storeConfig: StoreConfig;
+    categorySlug: string;
+}
+export declare function CategoryPage({ storeConfig, categorySlug }: CategoryPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CategoryPage.d.ts.map

package/dist/layouts/clothing/pages/CategoryPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/pages/CategoryPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,mBAAmB,CAAC;AAc5E,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CA+N5E"}