storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/clothing-minimal/components/ClothingHomePageMinimal.js

@@ -1,44 +1,34 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { useStore } from '../../../lib/store-context.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { useToast } from '../../../components/ui/toast.js';
+import { useFeaturedProducts } from '../../../hooks/use-featured-products';
+import { Button } from '../../../components/ui/button';
+import { useStore } from '../../../lib/store-context';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useToast } from '../../../components/ui/toast';
 import { ArrowUpRight, Plus } from 'lucide-react';
 import Link from 'next/link';
-import { formatCurrency, filterActiveProducts } from '../../../lib/utils/index.js';
-import { getPrimaryProductImageUrl, EDITOR_PRODUCT_IMAGE_PLACEHOLDER } from '../../../lib/utils/product-images.js';
-import { getLayoutText, getBannerImage, getTextContent } from '../../../lib/utils/asset-helpers.js';
-import { PromoBanner } from '../../shared/components/PromoBanner.js';
-import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
-import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
-import { encodePayazaFieldKey, payazaInlineBindingProps, payazaIconBindingProps } from '../../../preview/canvas/field-key.js';
-import { richFieldHtmlForRender } from '../../../lib/rich-html.js';
-import { compactArrayItems, readItemIconName } from '../../../lib/compact-array-items.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-import { heroUsesBlocks, renderHeroBlocks, renderFeaturesBlocks, renderCategoriesHeaderBlocks, renderFeaturedIntroBlocks, renderShopTheLookBlocks, promoConfigFromBlocks, } from './clothing-minimal-block-render.js';
-import { trackStorefrontEvent } from '../../../lib/mixpanel.js';
-function hasPayazaBlocks(section) {
-    if (section === null || typeof section !== 'object')
-        return false;
-    const b = section.blocks;
-    return Array.isArray(b) && b.length > 0;
-}
+import { formatCurrency, filterActiveProducts } from '../../../lib/utils';
+import { countProductsInCategoryTree, getCategoriesForDisplay, } from '../../../lib/utils/category-tree';
+import { getLayoutText, getBannerImage, getTextContent } from '../../../lib/utils/asset-helpers';
+import { PromoBanner } from '../../shared/components/PromoBanner';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon';
 export function ClothingHomePageMinimal({ storeConfig: initialConfig }) {
     const { store, addToCart } = useStore();
     const storeConfig = store || initialConfig;
     const layoutConfig = storeConfig.layoutConfig;
     // In preview mode, use mock data if none are available
     const isPreview = (typeof window !== 'undefined' && window.__IS_PREVIEW__) || storeConfig.layoutConfig?.isPreview;
-    const payazaImg = (sectionKey, segments) => isPreview ? { 'data-payaza-image': encodePayazaFieldKey(sectionKey, segments) } : {};
-    const categories = (storeConfig.categories && storeConfig.categories.length > 0)
+    const allCategories = (storeConfig.categories && storeConfig.categories.length > 0)
         ? storeConfig.categories
         : (isPreview ? [
             { id: 'cat1', name: 'Essentials', slug: 'essentials', image: 'https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=800' },
             { id: 'cat2', name: 'Accessories', slug: 'accessories', image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800' },
             { id: 'cat3', name: 'Collections', slug: 'collections', image: 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=800' }
         ] : []);
-    const rawProducts = storeConfig.products || [];
+    const initialProducts = storeConfig.products || [];
+    const rawProducts = useFeaturedProducts(storeConfig.id, initialProducts, !isPreview);
+    const categoryProducts = filterActiveProducts(initialProducts);
+    const categories = getCategoriesForDisplay(allCategories, categoryProducts, 3);
     const activeProducts = filterActiveProducts(rawProducts);
     // Use real active products if available, otherwise if in preview, use all products (including drafts), 
     // and if still none, use mock data
@@ -57,115 +47,26 @@ export function ClothingHomePageMinimal({ storeConfig: initialConfig }) {
         addToCart(product);
         addToast(`${product.name} added to cart`, 'success');
     };
-    const heroSectionStyle = getPayazaSectionInlineStyle(storeConfig, 'home', 'hero');
-    return (_jsxs("div", { className: "min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white", children: [layoutConfig?.sections?.hero?.show !== false &&
-                (heroUsesBlocks(layoutConfig?.sections?.hero)
-                    ? renderHeroBlocks(layoutConfig.sections.hero, {
-                        isPreview,
-                        storeConfig,
-                        slug: storeConfig.slug,
-                        bannerFallback: getBannerImage(storeConfig, 'hero_main', 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1887&auto=format&fit=crop'),
-                        getLayoutText,
-                        getTextContent,
-                        heroSectionStyle,
-                    })
-                    : (_jsx("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "home", style: heroSectionStyle, className: "lg:h-screen h-auto w-full", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 h-full", children: [_jsx("div", { className: "relative bg-[#F4F4F4] flex flex-col justify-center px-12 md:px-24 lg:order-1 order-2 py-20 lg:py-0", children: _jsxs("div", { className: "space-y-6 md:space-y-8 max-w-lg animate-fade-in-up", children: [showLayoutDecorativeBadges() && (_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.2em] text-gray-500", ...payazaInlineBindingProps(isPreview, 'hero', ['badge'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                                    __html: richFieldHtmlForRender(layoutConfig?.sections?.hero?.badge, getTextContent(storeConfig, 'hero_badge', '')),
-                                                } })), _jsx("h1", { className: "text-4xl md:text-7xl font-light tracking-tight leading-[1.1]", ...payazaInlineBindingProps(isPreview, 'hero', ['title'], { rich: 'inline' }), children: (() => {
-                                                    const stored = layoutConfig?.sections?.hero?.title;
-                                                    if (stored && typeof stored === 'object' && stored.sanitizedHtml) {
-                                                        return _jsx("span", { dangerouslySetInnerHTML: { __html: stored.sanitizedHtml } });
-                                                    }
-                                                    const titleText = (typeof stored === 'string' ? stored : null) || getLayoutText(storeConfig, 'hero.title', 'Simplicity is the ultimate sophistication.');
-                                                    if (titleText.includes('sophistication')) {
-                                                        const parts = titleText.split('sophistication');
-                                                        return (_jsxs(_Fragment, { children: [parts[0], _jsx("span", { className: "font-serif italic", children: "sophistication" }), parts[1]] }));
-                                                    }
-                                                    return titleText;
-                                                })() }), _jsx("p", { className: "text-gray-600 text-lg leading-relaxed", ...payazaInlineBindingProps(isPreview, 'hero', ['subtitle'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                                    __html: richFieldHtmlForRender(layoutConfig?.sections?.hero?.subtitle, getLayoutText(storeConfig, 'hero.subtitle', storeConfig.description
-                                                        ? `${storeConfig.description} Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.`
-                                                        : 'Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.')),
-                                                } }), _jsx("div", { className: "pt-4", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "h-14 px-10 rounded-full bg-black text-white hover:bg-gray-800 text-base transition-all hover:scale-105", children: _jsx("span", { ...payazaInlineBindingProps(isPreview, 'hero', ['primaryCTA'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                                                __html: richFieldHtmlForRender(layoutConfig?.sections?.hero?.primaryCTA, getLayoutText(storeConfig, 'common.shopNow', 'Shop Collection')),
-                                                            } }) }) }) })] }) }), _jsx("div", { className: "relative h-[60vh] lg:h-full w-full lg:order-2 order-1 overflow-hidden group", children: _jsx(ImageWithFallback, { src: getBannerImage(storeConfig, 'hero_main', 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1887&auto=format&fit=crop'), alt: "Minimal Fashion", className: "absolute inset-0 w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-[2s]", ...payazaImg('hero', ['image']) }) })] }) }))), layoutConfig?.sections?.features?.show !== false &&
-                (hasPayazaBlocks(layoutConfig?.sections?.features)
-                    ? renderFeaturesBlocks(layoutConfig.sections.features, {
-                        isPreview,
-                        storeConfig,
-                        slug: storeConfig.slug,
-                    })
-                    : (_jsx("section", { "data-section": "features", "data-payaza-section-key": "features", "data-payaza-page": "home", className: "py-12 border-b border-gray-100 bg-white", children: _jsx("div", { className: "container mx-auto px-4 md:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: compactArrayItems(layoutConfig?.sections?.features?.items || [
-                                    { icon: 'Truck', title: 'Global Delivery', description: 'Free on orders over $200' },
-                                    { icon: 'ShieldCheck', title: 'Secure Payment', description: '100% secure checkout' },
-                                    { icon: 'RefreshCw', title: 'Easy Returns', description: '30-day return policy' },
-                                ]).map((item, idx) => (_jsxs("div", { className: "flex items-center gap-4 group", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-colors duration-300", ...payazaIconBindingProps(isPreview, 'features', ['items', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: readItemIconName(item, 'Truck'), className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wider", ...payazaInlineBindingProps(isPreview, 'features', ['items', String(idx), 'title'], {
-                                                        rich: 'inline',
-                                                    }), dangerouslySetInnerHTML: {
-                                                        __html: richFieldHtmlForRender(item.title, 'Global Delivery'),
-                                                    } }), _jsx("p", { className: "text-xs text-gray-500", ...payazaInlineBindingProps(isPreview, 'features', ['items', String(idx), 'description'], {
-                                                        rich: 'inline',
-                                                    }), dangerouslySetInnerHTML: {
-                                                        __html: richFieldHtmlForRender(item.description, 'Free on orders over $200'),
-                                                    } })] })] }, idx))) }) }) }))), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", "data-payaza-section-key": "categories", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 md:px-8", children: _jsxs("div", { className: "container mx-auto", children: [hasPayazaBlocks(layoutConfig?.sections?.categories)
-                            ? renderCategoriesHeaderBlocks(layoutConfig.sections.categories, {
-                                isPreview,
-                                storeConfig,
-                                slug: storeConfig.slug,
-                            })
-                            : (_jsxs("div", { className: "flex justify-between items-end mb-8 md:mb-12", children: [_jsx("h2", { className: "text-3xl font-light", ...payazaInlineBindingProps(isPreview, 'categories', ['title'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                            __html: richFieldHtmlForRender(layoutConfig?.sections?.categories?.title, getLayoutText(storeConfig, 'sections.categories.title', 'Categories')),
-                                        } }), _jsx(Link, { href: `/${storeConfig.slug}/categories`, className: "text-sm font-bold uppercase tracking-wider border-b border-black pb-1 hover:text-gray-600 hover:border-gray-600 transition-colors", children: _jsx("span", { ...payazaInlineBindingProps(isPreview, 'categories', ['viewAllLabel'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                                __html: richFieldHtmlForRender(layoutConfig?.sections?.categories?.viewAllLabel, getLayoutText(storeConfig, 'sections.categories.viewAll', 'View All')),
-                                            } }) })] })), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: categories.slice(0, 3).map((category, idx) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: "group block cursor-pointer", children: [_jsxs("div", { className: "relative aspect-[3/4] overflow-hidden bg-[#F4F4F4] mb-4", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500" }), _jsx("div", { className: "absolute top-4 right-4 bg-white rounded-full p-2 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300", children: _jsx(ArrowUpRight, { className: "h-5 w-5" }) })] }), _jsx("h3", { className: "text-xl font-medium mb-1", children: category.name }), isPreview && _jsxs("p", { className: "text-sm text-gray-500", children: [12 + idx * 5, " Items"] })] }, category.id))) })] }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", "data-payaza-section-key": "featuredProducts", "data-payaza-page": "home", className: "py-16 md:py-24 bg-[#FAFAFA]", children: _jsxs("div", { className: "container mx-auto px-4 md:px-8", children: [hasPayazaBlocks(layoutConfig?.sections?.featuredProducts) ? (renderFeaturedIntroBlocks(layoutConfig.sections.featuredProducts, {
-                            isPreview,
-                            storeConfig,
-                            slug: storeConfig.slug,
-                        })) : (_jsxs("div", { className: "max-w-2xl mx-auto text-center mb-10 md:mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-light mb-4", ...payazaInlineBindingProps(isPreview, 'featuredProducts', ['title'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                        __html: richFieldHtmlForRender(layoutConfig?.sections?.featuredProducts?.title, 'The Essentials'),
-                                    } }), _jsx("p", { className: "text-gray-500", ...payazaInlineBindingProps(isPreview, 'featuredProducts', ['subtitle'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                        __html: richFieldHtmlForRender(layoutConfig?.sections?.featuredProducts?.subtitle, 'Timeless pieces designed to build the foundation of your wardrobe.'),
-                                    } })] })), _jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12 md:gap-8", children: products.slice(0, 4).map((product) => (_jsx("div", { className: "group", children: _jsxs(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, onClick: () => trackStorefrontEvent('Product_clicked', {
-                                        storeId: storeConfig.id,
-                                        storeSlug: storeConfig.slug,
-                                        productId: product.id,
-                                        productName: product.name,
-                                        categoryId: product.categoryId,
-                                        price: product.price,
-                                    }), children: [_jsxs("div", { className: "aspect-[3/4] bg-white overflow-hidden relative mb-4", children: [_jsx(ImageWithFallback, { src: getPrimaryProductImageUrl(product.images, {
-                                                        placeholder: isPreview ? EDITOR_PRODUCT_IMAGE_PLACEHOLDER : undefined,
-                                                    }), alt: product.name, className: "w-full h-full object-cover mix-blend-multiply group-hover:scale-105 transition-transform duration-500", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "hidden lg:flex absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity items-end justify-center pb-6", children: _jsx("button", { onClick: (e) => {
+    return (_jsxs("div", { className: "min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white", children: [layoutConfig?.sections?.hero?.show !== false && (_jsx("section", { "data-section": "hero", className: "lg:h-screen h-auto w-full", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 h-full", children: [_jsx("div", { className: "relative bg-[#F4F4F4] flex flex-col justify-center px-12 md:px-24 lg:order-1 order-2 py-20 lg:py-0", children: _jsxs("div", { className: "space-y-6 md:space-y-8 max-w-lg animate-fade-in-up", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.2em] text-gray-500", children: layoutConfig?.sections?.hero?.badge || getTextContent(storeConfig, 'hero_badge', 'New Collection 2024') }), _jsx("h1", { className: "text-4xl md:text-7xl font-light tracking-tight leading-[1.1]", children: (() => {
+                                            const titleText = layoutConfig?.sections?.hero?.title || getLayoutText(storeConfig, 'hero.title', 'Simplicity is the ultimate sophistication.');
+                                            // If title contains "sophistication", preserve the italic styling
+                                            if (titleText.includes('sophistication')) {
+                                                const parts = titleText.split('sophistication');
+                                                return (_jsxs(_Fragment, { children: [parts[0], _jsx("span", { className: "font-serif italic", children: "sophistication" }), parts[1]] }));
+                                            }
+                                            return titleText;
+                                        })() }), _jsx("p", { className: "text-gray-600 text-lg leading-relaxed", children: layoutConfig?.sections?.hero?.subtitle || getLayoutText(storeConfig, 'hero.subtitle', storeConfig.description ? `${storeConfig.description} Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.` : 'Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.') }), _jsx("div", { className: "pt-4", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "h-14 px-10 rounded-full bg-black text-white hover:bg-gray-800 text-base transition-all hover:scale-105", children: layoutConfig?.sections?.hero?.primaryCTA || getLayoutText(storeConfig, 'common.shopNow', 'Shop Collection') }) }) })] }) }), _jsxs("div", { className: "relative h-[60vh] lg:h-full w-full lg:order-2 order-1 overflow-hidden group", children: [_jsx(ImageWithFallback, { src: getBannerImage(storeConfig, 'hero_main', 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1887&auto=format&fit=crop'), alt: "Minimal Fashion", className: "absolute inset-0 w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-[2s]" }), _jsxs("div", { className: "absolute bottom-8 right-8 bg-white/90 backdrop-blur p-4 rounded-lg hidden md:block", children: [_jsx("p", { className: "text-xs font-bold uppercase tracking-wider mb-1", children: "Featured Look" }), _jsx("p", { className: "text-sm text-gray-600", children: "Linen Blend Blazer - $299" })] })] })] }) })), layoutConfig?.sections?.features?.show !== false && (_jsx("section", { "data-section": "features", className: "py-12 border-b border-gray-100 bg-white", children: _jsx("div", { className: "container mx-auto px-4 md:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: (layoutConfig?.sections?.features?.items || [
+                            { icon: 'Truck', title: 'Global Delivery', description: 'Free on orders over $200' },
+                            { icon: 'ShieldCheck', title: 'Secure Payment', description: '100% secure checkout' },
+                            { icon: 'RefreshCw', title: 'Easy Returns', description: '30-day return policy' }
+                        ]).filter(Boolean).map((item, idx) => (_jsxs("div", { className: "flex items-center gap-4 group", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-colors duration-300", children: _jsx(DynamicIcon, { name: item.icon, className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wider", children: item.title }), _jsx("p", { className: "text-xs text-gray-500", children: item.description })] })] }, idx))) }) }) })), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", className: "py-16 md:py-24 px-4 md:px-8", children: _jsxs("div", { className: "container mx-auto", children: [_jsxs("div", { className: "flex justify-between items-end mb-8 md:mb-12", children: [_jsx("h2", { className: "text-3xl font-light", children: layoutConfig?.sections?.categories?.title || getLayoutText(storeConfig, 'sections.categories.title', 'Categories') }), _jsx(Link, { href: `/${storeConfig.slug}/categories`, className: "text-sm font-bold uppercase tracking-wider border-b border-black pb-1 hover:text-gray-600 hover:border-gray-600 transition-colors", children: layoutConfig?.sections?.categories?.viewAllLabel || getLayoutText(storeConfig, 'sections.categories.viewAll', 'View All') })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: categories.map((category) => {
+                                const itemCount = countProductsInCategoryTree(category, allCategories, categoryProducts);
+                                return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: "group block cursor-pointer", children: [_jsxs("div", { className: "relative aspect-[3/4] overflow-hidden bg-[#F4F4F4] mb-4", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500" }), _jsx("div", { className: "absolute top-4 right-4 bg-white rounded-full p-2 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300", children: _jsx(ArrowUpRight, { className: "h-5 w-5" }) })] }), _jsx("h3", { className: "text-xl font-medium mb-1", children: category.name }), itemCount > 0 && (_jsxs("p", { className: "text-sm text-gray-500", children: [itemCount, " ", itemCount === 1 ? 'Item' : 'Items'] }))] }, category.id));
+                            }) })] }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", className: "py-16 md:py-24 bg-[#FAFAFA]", children: _jsxs("div", { className: "container mx-auto px-4 md:px-8", children: [_jsxs("div", { className: "max-w-2xl mx-auto text-center mb-10 md:mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-light mb-4", children: layoutConfig?.sections?.featuredProducts?.title || 'The Essentials' }), _jsx("p", { className: "text-gray-500", children: layoutConfig?.sections?.featuredProducts?.subtitle || 'Timeless pieces designed to build the foundation of your wardrobe.' })] }), _jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12 md:gap-8", children: products.slice(0, 4).map((product) => (_jsx("div", { className: "group", children: _jsxs(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, children: [_jsxs("div", { className: "aspect-[3/4] bg-white overflow-hidden relative mb-4", children: [_jsx(ImageWithFallback, { src: product.images[0], alt: product.name, className: "w-full h-full object-cover mix-blend-multiply group-hover:scale-105 transition-transform duration-500", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "hidden lg:flex absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity items-end justify-center pb-6", children: _jsx("button", { onClick: (e) => {
                                                             e.preventDefault();
                                                             handleAddToCart(product);
                                                         }, className: "bg-white text-black px-8 py-3 rounded-full text-sm font-bold shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-black hover:text-white", children: "Quick Add" }) }), _jsx("button", { onClick: (e) => {
                                                         e.preventDefault();
                                                         handleAddToCart(product);
-                                                    }, className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 flex items-center justify-center rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(Plus, { className: "h-5 w-5" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-2 left-2 text-[10px] font-bold uppercase tracking-wider bg-black text-white px-2 py-1", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-base mb-1 group-hover:underline decoration-1 underline-offset-4", children: product.name }), _jsx("div", { className: "flex gap-2 mb-2", children: ['#D4D4D4', '#171717', '#737373'].map((color, i) => (_jsx("div", { className: "w-3 h-3 rounded-full border border-gray-200", style: { backgroundColor: color } }, i))) })] }), _jsx("span", { className: "font-medium text-sm", children: formatCurrency(product.price, product.currency || 'USD') })] })] }) }, product.id))) })] }) })), layoutConfig?.sections?.about?.show !== false && (_jsx("section", { "data-section": "about", "data-payaza-section-key": "about", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 md:px-8 border-t border-gray-100", children: _jsx("div", { className: "container mx-auto", children: hasPayazaBlocks(layoutConfig?.sections?.about)
-                        ? renderShopTheLookBlocks(layoutConfig.sections.about, {
-                            isPreview,
-                            storeConfig,
-                            slug: storeConfig.slug,
-                            products,
-                            onQuickAdd: handleAddToCart,
-                        })
-                        : (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-gray-100 group overflow-hidden", children: [_jsx(ImageWithFallback, { src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=2070&auto=format&fit=crop", alt: "Shop the look", className: "w-full h-full object-cover" }), _jsxs("div", { className: "absolute top-[30%] left-[45%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute left-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Oversized Wool Coat" }), _jsx("p", { className: "text-xs text-gray-500", children: "$299.00" })] })] }), _jsxs("div", { className: "absolute bottom-[25%] right-[40%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute right-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Leather Ankle Boots" }), _jsx("p", { className: "text-xs text-gray-500", children: "$189.00" })] })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsx("h2", { className: "text-4xl font-light", ...payazaInlineBindingProps(isPreview, 'about', ['title'], { rich: 'inline' }), children: (() => {
-                                                const stored = layoutConfig?.sections?.about?.title;
-                                                if (stored && typeof stored === 'object' && stored.sanitizedHtml) {
-                                                    return _jsx("span", { dangerouslySetInnerHTML: { __html: stored.sanitizedHtml } });
-                                                }
-                                                const titleText = (typeof stored === 'string' ? stored : null) || 'Winter Layering';
-                                                if (titleText === 'Winter Layering' || titleText.includes('Layering')) {
-                                                    const parts = titleText.split('Layering');
-                                                    return (_jsxs(_Fragment, { children: [parts[0], _jsx("span", { className: "font-serif italic", children: "Layering" }), parts[1]] }));
-                                                }
-                                                return titleText;
-                                            })() }), _jsx("p", { className: "text-gray-600 leading-relaxed max-w-md", ...payazaInlineBindingProps(isPreview, 'about', ['description'], { rich: 'inline' }), dangerouslySetInnerHTML: {
-                                                __html: richFieldHtmlForRender(layoutConfig?.sections?.about?.description, 'Master the art of layering with our winter collection. Combining warmth with style, these pieces are designed to work together seamlessly.'),
-                                            } }), _jsx("div", { className: "space-y-4", children: products.slice(0, 3).map((item, i) => (_jsxs("div", { className: "flex gap-4 items-center p-2 hover:bg-gray-50 rounded-lg transition-colors group cursor-pointer", children: [_jsx("div", { className: "w-16 h-20 bg-white relative", children: _jsx(ImageWithFallback, { src: item.images[0], alt: item.name, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm mb-1", children: item.name }), _jsx("p", { className: "text-xs text-gray-500", children: formatCurrency(item.price, item.currency || storeConfig.settings?.currency || 'USD') })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleAddToCart(item), className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(Plus, { className: "h-4 w-4" }) })] }, i))) }), _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "w-full bg-black text-white hover:bg-gray-800 h-12 rounded-none uppercase tracking-widest text-xs font-bold", children: getLayoutText(storeConfig, 'common.shopNow', 'Shop The Edit') }) })] })] })) }) })), _jsx(PromoBanner, { config: (() => {
-                    const pb = layoutConfig?.sections?.promoBanner;
-                    const merged = pb && Array.isArray(pb.blocks) && pb.blocks.length > 0 ? promoConfigFromBlocks(pb) : null;
-                    if (merged)
-                        return { ...(layoutConfig?.sections?.promoBanner || {}), ...merged };
-                    return layoutConfig?.sections?.promoBanner;
-                })(), storeSlug: storeConfig.slug, layoutStyle: "clothing", sectionKey: "promoBanner", page: "home" })] }));
+                                                    }, className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 flex items-center justify-center rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(Plus, { className: "h-5 w-5" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-2 left-2 text-[10px] font-bold uppercase tracking-wider bg-black text-white px-2 py-1", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-base mb-1 group-hover:underline decoration-1 underline-offset-4", children: product.name }), _jsx("div", { className: "flex gap-2 mb-2", children: ['#D4D4D4', '#171717', '#737373'].map((color, i) => (_jsx("div", { className: "w-3 h-3 rounded-full border border-gray-200", style: { backgroundColor: color } }, i))) })] }), _jsx("span", { className: "font-medium text-sm", children: formatCurrency(product.price, product.currency || 'USD') })] })] }) }, product.id))) })] }) })), layoutConfig?.sections?.about?.show !== false && (_jsx("section", { "data-section": "about", className: "py-16 md:py-24 px-4 md:px-8 border-t border-gray-100", children: _jsx("div", { className: "container mx-auto", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-gray-100 group overflow-hidden", children: [_jsx(ImageWithFallback, { src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=2070&auto=format&fit=crop", alt: "Shop the look", className: "w-full h-full object-cover" }), _jsxs("div", { className: "absolute top-[30%] left-[45%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute left-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Oversized Wool Coat" }), _jsx("p", { className: "text-xs text-gray-500", children: "$299.00" })] })] }), _jsxs("div", { className: "absolute bottom-[25%] right-[40%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute right-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Leather Ankle Boots" }), _jsx("p", { className: "text-xs text-gray-500", children: "$189.00" })] })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsx("h2", { className: "text-4xl font-light", children: layoutConfig?.sections?.about?.title || (_jsxs(_Fragment, { children: ["Winter ", _jsx("span", { className: "font-serif italic", children: "Layering" })] })) }), _jsx("p", { className: "text-gray-600 leading-relaxed max-w-md", children: layoutConfig?.sections?.about?.description || 'Master the art of layering with our winter collection. Combining warmth with style, these pieces are designed to work together seamlessly.' }), _jsx("div", { className: "space-y-4", children: products.slice(0, 3).map((item, i) => (_jsxs("div", { className: "flex gap-4 items-center p-2 hover:bg-gray-50 rounded-lg transition-colors group cursor-pointer", children: [_jsx("div", { className: "w-16 h-20 bg-white relative", children: _jsx(ImageWithFallback, { src: item.images[0], alt: item.name, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm mb-1", children: item.name }), _jsx("p", { className: "text-xs text-gray-500", children: formatCurrency(item.price, item.currency || storeConfig.settings?.currency || 'USD') })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleAddToCart(item), className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(Plus, { className: "h-4 w-4" }) })] }, i))) }), _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "w-full bg-black text-white hover:bg-gray-800 h-12 rounded-none uppercase tracking-widest text-xs font-bold", children: getLayoutText(storeConfig, 'common.shopNow', 'Shop The Edit') }) })] })] }) }) })), _jsx(PromoBanner, { config: layoutConfig?.sections?.promoBanner, layoutStyle: "clothing" })] }));
 }

package/dist/layouts/clothing-minimal/components/clothing-minimal-block-render.js

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
-import { Button } from '../../../components/ui/button.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { Button } from '../../../components/ui/button';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
 import { Plus } from 'lucide-react';
-import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
-import { encodePayazaFieldKey, payazaInlineBindingProps, payazaGroupBindingProps, payazaIconBindingProps } from '../../../preview/canvas/field-key.js';
-import { richFieldHtmlForRender } from '../../../lib/rich-html.js';
-import { formatCurrency } from '../../../lib/utils/index.js';
-import { readItemIconName } from '../../../lib/compact-array-items.js';
-import { getPayazaBlockDefinition } from '../../../editor/blocks/registry.js';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon';
+import { encodePayazaFieldKey, payazaInlineBindingProps, payazaGroupBindingProps, payazaIconBindingProps } from '../../../preview/canvas/field-key';
+import { richFieldHtmlForRender } from '../../../lib/rich-html';
+import { formatCurrency } from '../../../lib/utils';
+import { readItemIconName } from '../../../lib/compact-array-items';
+import { getPayazaBlockDefinition } from '../../../editor/blocks/registry';
 export function blkAttr(block) {
     const a = block.attributes;
     if (a && typeof a === 'object' && !Array.isArray(a))

package/dist/layouts/clothing-minimal/index.js

@@ -1,8 +1,8 @@
 // Fashion Minimal (clothing-minimal) layout — fully sandboxed exports
-export { ClothingHomePageMinimal } from './components/ClothingHomePageMinimal.js';
-export { ClothingMinimalProductsPage } from './pages/ProductsPage.js';
-export { ClothingMinimalProductDetailPage } from './pages/ProductDetailPage.js';
-export { ClothingMinimalCategoryPage } from './pages/CategoryPage.js';
-export { ClothingMinimalCategoriesPage } from './pages/CategoriesPage.js';
-export { ClothingMinimalAboutPage } from './pages/AboutPage.js';
-export { ClothingMinimalContactPage } from './pages/ContactPage.js';
+export { ClothingHomePageMinimal } from './components/ClothingHomePageMinimal';
+export { ClothingMinimalProductsPage } from './pages/ProductsPage';
+export { ClothingMinimalProductDetailPage } from './pages/ProductDetailPage';
+export { ClothingMinimalCategoryPage } from './pages/CategoryPage';
+export { ClothingMinimalCategoriesPage } from './pages/CategoriesPage';
+export { ClothingMinimalAboutPage } from './pages/AboutPage';
+export { ClothingMinimalContactPage } from './pages/ContactPage';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AASvD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAgBD,wBAAgB,wBAAwB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA+WtF"}
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA8OvE"}

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

@@ -1,71 +1,47 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Heart, ArrowRight } from 'lucide-react';
-import { Button } from '../../../components/ui/button.js';
-import { DotPattern } from '../../../components/ui/background-patterns.js';
-import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
-import { useStore } from '../../../lib/store-context.js';
+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 { useStore } from '../../../lib/store-context';
 import Image from 'next/image';
-import { encodePayazaFieldKey, payazaInlineBindingProps, payazaIconBindingProps } from '../../../preview/canvas/field-key.js';
-const DEFAULT_VALUES = [
-    { icon: 'Award', title: 'Pure Materials', description: 'We use only the highest quality organic and sustainable fabrics.' },
-    { icon: 'Users', title: 'Inclusive Design', description: 'Fashion designed for every body and every style.' },
-    { icon: 'Heart', title: 'Ethical Craft', description: 'Our garments are made in ethical workshops with fair wages.' },
-    { icon: 'Leaf', title: 'Eco-Conscious', description: 'Minimal waste production and plastic-free packaging.' },
-];
-const DEFAULT_STATS = [
-    { value: '12k+', label: 'Happy Shoppers' },
-    { value: '60+', label: 'Active Designs' },
-    { value: '30+', label: 'Countries Served' },
-    { value: '100%', label: 'Eco Impact' },
-];
-export function ClothingMinimalAboutPage({ storeConfig: initialConfig }) {
+export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
-    const isPreview = !!storeConfig.isPreview;
-    const payaza = (sectionKey, segments) => isPreview ? encodePayazaFieldKey(sectionKey, segments) : undefined;
     const primaryColor = storeConfig.branding.primaryColor;
     const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
     const aboutConfig = storeConfig.layoutConfig?.pages?.about;
-    // ── aboutHeader ──────────────────────────────────────────────────────────
-    const heroImage = aboutConfig?.aboutHeader?.heroImage ||
-        aboutConfig?.heroImage ||
-        'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2074&auto=format&fit=crop';
-    const pageTitle = aboutConfig?.aboutHeader?.title ||
-        aboutConfig?.title ||
-        'Crafting Experiences, Delivering Joy.';
-    const missionStatement = aboutConfig?.aboutHeader?.missionStatement ||
-        aboutConfig?.missionStatement ||
-        storeConfig.description ||
-        'We create timeless pieces built for everyday confidence.';
-    // ── aboutContent ─────────────────────────────────────────────────────────
-    const subLabel = aboutConfig?.aboutContent?.subLabel || 'Who We Are';
-    const storyHeading = aboutConfig?.aboutContent?.heading || 'Our Journey';
+    // Clothing-minimal-specific hero image
+    const heroImage = aboutConfig?.aboutHeader?.heroImage || aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2074&auto=format&fit=crop';
+    const pageTitle = aboutConfig?.aboutHeader?.title || aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
     const pageContent = aboutConfig?.aboutContent?.content || aboutConfig?.content || storeConfig.description;
-    const teamImage = aboutConfig?.aboutContent?.teamImage || 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop';
-    const teamCaption = aboutConfig?.aboutContent?.teamCaption || 'The Dream Team';
-    const teamSubCaption = aboutConfig?.aboutContent?.teamSubCaption || 'Working together to serve you better';
-    const values = aboutConfig?.aboutContent?.values || DEFAULT_VALUES;
-    // ── statsSection ─────────────────────────────────────────────────────────
-    const stats = aboutConfig?.statsSection?.items ||
-        DEFAULT_STATS.map((s, i) => i === 1 && storeConfig.products?.length
-            ? { ...s, value: `${storeConfig.products.length}+` }
-            : s);
-    // ── contactSection ───────────────────────────────────────────────────────
-    const contactTitle = aboutConfig?.contactSection?.title || 'Get in Touch';
-    const contactDescription = aboutConfig?.contactSection?.description || "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store.";
-    const visitLabel = aboutConfig?.contactSection?.visitLabel || 'Visit Us';
-    const visitAddress = aboutConfig?.contactSection?.visitAddress || `123 Store Street\nCommerce City, ST 12345`;
-    const emailLabel = aboutConfig?.contactSection?.emailLabel || 'Email Us';
-    const email1 = aboutConfig?.contactSection?.email1 || `hello@${storeConfig.slug}.com`;
-    const email2 = aboutConfig?.contactSection?.email2 || `support@${storeConfig.slug}.com`;
-    const hoursLabel = aboutConfig?.contactSection?.hoursLabel || 'Opening Hours';
-    const hoursLine1 = aboutConfig?.contactSection?.hoursLine1 || 'Mon - Fri: 9am - 6pm';
-    const hoursLine2 = aboutConfig?.contactSection?.hoursLine2 || 'Sat - Sun: 10am - 4pm';
-    const visitIcon = aboutConfig?.contactSection?.visitIcon || 'MapPin';
-    const emailIcon = aboutConfig?.contactSection?.emailIcon || 'Mail';
-    const hoursIcon = aboutConfig?.contactSection?.hoursIcon || 'Clock';
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [aboutConfig?.aboutHeader?.show !== false && (_jsxs("section", { "data-section": "aboutHeader", "data-payaza-section-key": "aboutHeader", "data-payaza-page": "about", className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", "data-payaza-image": payaza('aboutHeader', ['heroImage']), 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: [_jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", "data-payaza-edit": payaza('aboutHeader', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", "data-payaza-edit": payaza('aboutHeader', ['missionStatement']), children: missionStatement })] }) }) })] })), aboutConfig?.aboutContent?.show !== false && (_jsxs("section", { "data-section": "aboutContent", "data-payaza-section-key": "aboutContent", "data-payaza-page": "about", 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: [aboutConfig?.gallerySection && aboutConfig.gallerySection.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: aboutConfig.gallerySection.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("div", { "data-payaza-image": payaza('aboutContent', ['teamImage']), className: "absolute inset-0", children: _jsx(Image, { src: teamImage, 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", "data-payaza-edit": payaza('aboutContent', ['teamCaption']), children: teamCaption }), _jsx("p", { className: "text-white/80 text-sm", "data-payaza-edit": payaza('aboutContent', ['teamSubCaption']), children: teamSubCaption })] })] })), _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 }, "data-payaza-edit": payaza('aboutContent', ['subLabel']), children: subLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", "data-payaza-edit": payaza('aboutContent', ['heading']), children: storyHeading }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", "data-payaza-edit": payaza('aboutContent', ['content']), 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."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: values.map((item, idx) => {
-                                                return (_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` }, ...payazaIconBindingProps(isPreview, 'aboutContent', ['values', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: item.icon || 'Award', 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", "data-payaza-edit": payaza('aboutContent', ['values', String(idx), 'title']), children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", "data-payaza-edit": payaza('aboutContent', ['values', String(idx), 'description']), children: item.description })] })] }, idx));
-                                            }) })] })] }) })] })), aboutConfig?.statsSection?.show !== false && (_jsxs("section", { "data-section": "statsSection", "data-payaza-section-key": "statsSection", "data-payaza-page": "about", 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: stats.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 }, "data-payaza-edit": payaza('statsSection', ['items', String(idx), 'value']), children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", "data-payaza-edit": payaza('statsSection', ['items', String(idx), 'label']), children: stat.label })] }, idx))) }) })] })), aboutConfig?.contactSection?.show !== false && (_jsx("section", { "data-section": "contactSection", "data-payaza-section-key": "contactSection", "data-payaza-page": "about", 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", ...payazaInlineBindingProps(isPreview, 'contactSection', ['title']), children: contactTitle }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", ...payazaInlineBindingProps(isPreview, 'contactSection', ['description']), children: contactDescription })] }), _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", ...payazaIconBindingProps(isPreview, 'contactSection', ['visitIcon']), children: _jsx(DynamicIcon, { name: visitIcon, 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", "data-payaza-edit": payaza('contactSection', ['visitLabel']), children: visitLabel }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", "data-payaza-edit": payaza('contactSection', ['visitAddress']), children: visitAddress })] }), _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", ...payazaIconBindingProps(isPreview, 'contactSection', ['emailIcon']), children: _jsx(DynamicIcon, { name: emailIcon, 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", "data-payaza-edit": payaza('contactSection', ['emailLabel']), children: emailLabel }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [_jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['email1']), children: email1 }), _jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['email2']), children: email2 })] }), _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", ...payazaIconBindingProps(isPreview, 'contactSection', ['hoursIcon']), children: _jsx(DynamicIcon, { name: hoursIcon, 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", "data-payaza-edit": payaza('contactSection', ['hoursLabel']), children: hoursLabel }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: [_jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['hoursLine1']), children: hoursLine1 }), _jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['hoursLine2']), children: hoursLine2 })] })] })] })] }) }))] }));
+    const missionStatement = aboutConfig?.aboutHeader?.missionStatement || aboutConfig?.missionStatement || storeConfig.description;
+    const values = [
+        {
+            icon: Award,
+            title: "Pure Materials",
+            description: "We use only the highest quality organic and sustainable fabrics."
+        },
+        {
+            icon: Users,
+            title: "Inclusive Design",
+            description: "Fashion designed for every body and every style."
+        },
+        {
+            icon: Heart,
+            title: "Ethical Craft",
+            description: "Our garments are made in ethical workshops with fair wages."
+        },
+        {
+            icon: Leaf,
+            title: "Eco-Conscious",
+            description: "Minimal waste production and plastic-free packaging."
+        }
+    ];
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [aboutConfig?.aboutHeader?.show !== false && (_jsxs("section", { "data-section": "hero", 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" }), _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 })] }) }) })] })), aboutConfig?.aboutContent?.show !== false && (_jsxs("section", { "data-section": "story", 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: [aboutConfig?.gallerySection && aboutConfig.gallerySection.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: aboutConfig.gallerySection.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" }) }, 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" }), _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))) })] })] }) })] })), aboutConfig?.statsSection?.show !== false && (_jsxs("section", { "data-section": "stats", 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 Shoppers", value: "12k+" },
+                                { label: "Active Designs", value: storeConfig.products?.length ? `${storeConfig.products.length}+` : "60+" },
+                                { label: "Countries Served", value: "30+" },
+                                { label: "Eco Impact", value: "100%" }
+                            ].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))) }) })] })), aboutConfig?.contactSection?.show !== false && (_jsx("section", { "data-section": "contact-info", 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-minimal/pages/CategoriesPage.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { useStore } from '../../../lib/store-context.js';
-import { isEditorPreviewMode, resolveStoreCategoriesForDisplay } from '../../../lib/utils/editor-preview.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
-import { CategoryMasonryGrid } from '../../../components/categories/category-masonry-grid.js';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useStore } from '../../../lib/store-context';
+import { isEditorPreviewMode, resolveStoreCategoriesForDisplay } from '../../../lib/utils/editor-preview';
+import { useCatalogLoader } from '../../../hooks/use-catalog-loader';
+import { encodePayazaFieldKey } from '../../../preview/canvas/field-key';
+import { CategoryMasonryGrid } from '../../../components/categories/category-masonry-grid';
 export function ClothingMinimalCategoriesPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;

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

@@ -3,6 +3,6 @@ interface CategoryPageProps {
     storeConfig: StoreConfig;
     categorySlug: string;
 }
-export declare function ClothingMinimalCategoryPage({ storeConfig: initialConfig, categorySlug }: CategoryPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryPage({ storeConfig: initialConfig, categorySlug }: CategoryPageProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CategoryPage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/CategoryPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,0BAA0B,CAAC;AAqBnF,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAuI1G"}
+{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/CategoryPage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA8B,MAAM,0BAA0B,CAAC;AAcnF,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAyI3F"}

package/dist/layouts/clothing-minimal/pages/CategoryPage.js

@@ -1,26 +1,21 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { useStore } from '../../../lib/store-context.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCategoryProducts } from '../../../hooks/use-category-products';
+import { Button } from '../../../components/ui/button';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useStore } from '../../../lib/store-context';
 import { ArrowLeft, Filter } from 'lucide-react';
 import Link from 'next/link';
-import { useToast } from '../../../components/ui/toast.js';
-import { useAnalytics } from '../../../hooks/use-analytics.js';
+import { useToast } from '../../../components/ui/toast';
+import { useAnalytics } from '../../../hooks/use-analytics';
 import { useEffect } from 'react';
-import { ProductCard } from '../../../components/ui/product-card.js';
-import { isEditorPreviewMode, resolveCategoryBySlugForDisplay, resolveCategoryProductsForDisplay, } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { CategoryDescription } from '../../../components/rich-text/CategoryDescription.js';
-export function ClothingMinimalCategoryPage({ storeConfig: initialConfig, categorySlug }) {
+import { ProductCard } from '../../../components/ui/product-card';
+export function CategoryPage({ storeConfig: initialConfig, categorySlug }) {
     const { store, addToCart } = useStore();
     const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { categories: loadedCategories, products: loadedProducts } = useCatalogLoader(storeConfig, {
-        fetchServices: false,
-    });
-    const category = resolveCategoryBySlugForDisplay(loadedCategories, categorySlug, isPreview);
-    const products = resolveCategoryProductsForDisplay(loadedProducts, category?.id, isPreview);
+    const categories = storeConfig.categories || [];
+    const category = categories.find(c => c.slug === categorySlug);
+    const { products, isLoading, hasMore, loadMore } = useCategoryProducts(storeConfig.id, category?.id);
     const { addToast } = useToast();
     const { trackEvent } = useAnalytics();
     const categoryDetailConfig = storeConfig.layoutConfig?.pages?.categoryDetail;
@@ -52,5 +47,5 @@ export function ClothingMinimalCategoryPage({ storeConfig: initialConfig, catego
     const isDarkTheme = storeConfig.type === 'food-modern' || storeConfig.branding.theme === 'dark';
     const bgColor = isDarkTheme ? 'bg-[#0F0F0F]' : 'bg-gray-50';
     const textColor = isDarkTheme ? 'text-white' : 'text-gray-900';
-    return (_jsxs("div", { className: `min-h-screen ${bgColor} ${textColor} transition-colors duration-300`, children: [categoryDetailConfig?.showBanner !== false && (_jsxs("div", { "data-section": "banner", "data-payaza-section-key": "banner", "data-payaza-page": "categoryDetail", className: "relative h-[40vh] overflow-hidden", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: `absolute inset-0 ${isDarkTheme ? 'bg-black/60' : 'bg-black/40'} backdrop-blur-[2px]` }), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center p-6 text-white", children: [_jsx("h1", { className: "text-5xl md:text-7xl font-bold tracking-tight mb-4", children: category.name }), categoryDetailConfig?.showDescription !== false && (_jsx(CategoryDescription, { description: category.description }))] })] })), categoryDetailConfig?.showBanner === false && (_jsx("div", { "data-section": "banner", "data-payaza-section-key": "banner", "data-payaza-page": "categoryDetail", className: "bg-white border-b border-gray-100 py-12", children: _jsxs("div", { className: "container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: [_jsx("h1", { className: "text-4xl font-bold mb-4", children: category.name }), categoryDetailConfig?.showDescription !== false && (_jsx(CategoryDescription, { description: category.description, className: "text-lg text-gray-600 max-w-2xl [&_p]:mb-0" }))] }) })), _jsxs("div", { className: "container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center mb-10 gap-4", children: [_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: `inline-flex items-center text-sm font-medium ${isDarkTheme ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'}`, children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), "Back to All Categories"] }), categoryDetailConfig?.showFilters !== false && (_jsx("div", { className: "flex items-center gap-4", children: _jsxs(Button, { variant: "outline", className: `${isDarkTheme ? 'border-white/20 text-white hover:bg-white/10' : 'bg-white'}`, children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filter"] }) }))] }), !hasItems ? (_jsxs("div", { className: "text-center py-20 border border-dashed border-gray-300 rounded-3xl", children: [_jsx("p", { className: "text-gray-500 text-lg", children: "No products found in this category." }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: products.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }))] })] }));
+    return (_jsxs("div", { className: `min-h-screen ${bgColor} ${textColor} transition-colors duration-300`, children: [categoryDetailConfig?.showBanner !== false && (_jsxs("div", { className: "relative h-[40vh] overflow-hidden", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: `absolute inset-0 ${isDarkTheme ? 'bg-black/60' : 'bg-black/40'} backdrop-blur-[2px]` }), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center p-6 text-white", children: [_jsx("h1", { className: "text-5xl md:text-7xl font-bold tracking-tight mb-4", children: category.name }), category.description && categoryDetailConfig?.showDescription !== false && (_jsx("p", { className: "text-lg md:text-xl max-w-2xl opacity-90 font-light", children: category.description }))] })] })), categoryDetailConfig?.showBanner === false && (_jsx("div", { className: "bg-white border-b border-gray-100 py-12", children: _jsxs("div", { className: "container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: [_jsx("h1", { className: "text-4xl font-bold mb-4", children: category.name }), category.description && categoryDetailConfig?.showDescription !== false && (_jsx("p", { className: "text-lg text-gray-600 max-w-2xl", children: category.description }))] }) })), _jsxs("div", { className: "container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center mb-10 gap-4", children: [_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: `inline-flex items-center text-sm font-medium ${isDarkTheme ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'}`, children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), "Back to All Categories"] }), categoryDetailConfig?.showFilters !== false && (_jsx("div", { className: "flex items-center gap-4", children: _jsxs(Button, { variant: "outline", className: `${isDarkTheme ? 'border-white/20 text-white hover:bg-white/10' : 'bg-white'}`, children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filter"] }) }))] }), !hasItems ? (_jsxs("div", { className: "text-center py-20 border border-dashed border-gray-300 rounded-3xl", children: [_jsx("p", { className: "text-gray-500 text-lg", children: "No products found in this category." }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: products.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }), hasMore && (_jsx("div", { className: "mt-10 flex justify-center", children: _jsx(Button, { onClick: loadMore, disabled: isLoading, children: "Load more" }) }))] }))] })] }));
 }