storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/electronics-grid/components/ElectronicsHomePageGrid.js

@@ -1,34 +1,29 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { Sheet } from '../../../components/ui/sheet.js';
-import { CheckoutButton } from '../../../components/ui/checkout-button.js';
-import { CategoryTree } from '../../../components/ui/category-tree.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 { Sheet } from '../../../components/ui/sheet';
+import { CheckoutButton } from '../../../components/ui/checkout-button';
+import { CategoryTree } from '../../../components/ui/category-tree';
+import { useStore } from '../../../lib/store-context';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useToast } from '../../../components/ui/toast';
 import { ShoppingCart, Star, Heart, Menu, Search, User, Smartphone, ChevronRight, ChevronDown, CheckCircle2, Package, Tag, Filter, X } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { useState } from 'react';
-import { usePathname } from 'next/navigation';
-import { richFieldPlainTextForDisplay } from '../../../lib/rich-html.js';
-import { useAuth } from '../../../lib/auth-context.js';
-import { formatCurrency, cn, filterActiveProducts, formatStoreDisplayName } from '../../../lib/utils/index.js';
-import { getCartLineImage } from '../../../lib/product-variation-utils.js';
-import { getLayoutText, getBannerImage, getLogoUrl } from '../../../lib/utils/asset-helpers.js';
-import { StoreLogo } from '../../../components/ui/store-logos.js';
-import { PromoBanner } from '../../shared/components/PromoBanner.js';
-import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
-import { resolveStoreLink } from '../../../lib/layout-route-utils.js';
-import { ElectronicsGridProductCard } from './ElectronicsGridProductCard.js';
+import { useEffect, useState } from 'react';
+import { formatCurrency, cn, filterActiveProducts } from '../../../lib/utils';
+import { getLayoutText, getBannerImage, getLogoUrl } from '../../../lib/utils/asset-helpers';
+import { toStoreHref } from '../../../lib/utils/url-helpers';
+import { StoreLogo } from '../../../components/ui/store-logos';
+import { PromoBanner } from '../../shared/components/PromoBanner';
+import { ElectronicsGridProductCard } from './ElectronicsGridProductCard';
+import { productService } from '../../../lib/services/product.service';
+import { transformProductToStoreProduct } from '../../../lib/store-config-utils';
 const ElectronicsFilterContent = ({ categories, storeSlug }) => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "bg-white border-b border-gray-100 overflow-hidden", children: [_jsxs("div", { className: "bg-white px-4 py-3 border-b border-gray-100 font-normal text-sm text-gray-900 flex justify-between items-center", children: ["Browse by ", _jsx(ChevronDown, { className: "h-4 w-4 text-gray-400" })] }), _jsx("div", { className: "py-2", children: _jsx(CategoryTree, { categories: categories, mode: "link", storeSlug: storeSlug, linkBasePath: "" }) })] }), _jsxs("div", { className: "bg-white p-6 space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400", defaultChecked: true }), "In Stock"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors mt-2", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400" }), "On Sale"] })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Price" }), _jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-2 top-1.5 text-gray-400 text-xs", children: "$" }), _jsx("input", { type: "number", className: "w-full pl-5 pr-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400", placeholder: "Min" })] }), _jsx("span", { className: "text-gray-400", children: "-" }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-2 top-1.5 text-gray-400 text-xs", children: "$" }), _jsx("input", { type: "number", className: "w-full pl-5 pr-2 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-gray-400 focus:border-gray-400", placeholder: "Max" })] })] }), _jsx(Button, { size: "sm", variant: "outline", className: "w-full text-xs font-normal border-gray-300 text-gray-700 hover:bg-gray-50", children: "Apply Price" })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Brands" }), _jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200", children: ['Apple'].map(brand => (_jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors", children: [_jsx("input", { type: "checkbox", className: "rounded border-gray-300 text-gray-900 focus:ring-gray-400", defaultChecked: true }), brand] }, brand))) })] }), _jsxs("div", { className: "border-t border-gray-100 pt-6", children: [_jsx("h3", { className: "font-medium text-sm text-gray-900 mb-4", children: "Rating" }), [4, 3, 2].map(stars => (_jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-gray-900 p-2 -ml-2 transition-colors mb-1.5", children: [_jsx("input", { type: "radio", name: "rating", className: "border-gray-300 text-gray-900 focus:ring-gray-400" }), _jsx("div", { className: "flex text-yellow-400", children: [...Array(5)].map((_, i) => (_jsx(Star, { className: `h-3 w-3 ${i < stars ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-xs", children: "& Up" })] }, stars)))] })] })] }));
 export function ElectronicsHomePageGrid({ storeConfig: initialConfig }) {
     const { store, cart, addToCart, updateCartQuantity, isCartOpen, setIsCartOpen, cartTotal, cartCount, wishlist } = useStore();
-    const { isAuthenticated, openLogin } = useAuth();
-    const pathname = usePathname();
     const storeConfig = store || initialConfig;
-    const storeDisplayName = formatStoreDisplayName(storeConfig.name);
     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;
@@ -40,7 +35,8 @@ export function ElectronicsHomePageGrid({ storeConfig: initialConfig }) {
             { id: 'cat3', name: 'iPad', slug: 'ipad', image: 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?q=80&w=800' },
             { id: 'cat4', name: 'Accessories', slug: 'accessories', image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800' }
         ] : []);
-    const rawProducts = storeConfig.products || [];
+    const initialProducts = storeConfig.products || [];
+    const rawProducts = useFeaturedProducts(storeConfig.id, initialProducts, !isPreview);
     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
@@ -63,20 +59,56 @@ export function ElectronicsHomePageGrid({ storeConfig: initialConfig }) {
     const INITIAL_DISPLAY_COUNT = 12;
     const LOAD_MORE_INCREMENT = 12;
     const [visibleCount, setVisibleCount] = useState(INITIAL_DISPLAY_COUNT);
+    const [catalogProducts, setCatalogProducts] = useState(products);
+    const [catalogPage, setCatalogPage] = useState(1);
+    const [catalogTotal, setCatalogTotal] = useState(products.length);
+    const [isLoadingCatalog, setIsLoadingCatalog] = useState(false);
+    useEffect(() => {
+        if (isPreview || initialProducts.length > 0)
+            return;
+        let cancelled = false;
+        setIsLoadingCatalog(true);
+        productService.getProducts({ storeId: storeConfig.id, page: 1, limit: 12 })
+            .then((response) => {
+            if (cancelled)
+                return;
+            setCatalogProducts(response.data.map(transformProductToStoreProduct));
+            setCatalogPage(1);
+            setCatalogTotal(response.meta.total);
+            setVisibleCount(INITIAL_DISPLAY_COUNT);
+        })
+            .catch((error) => !cancelled && console.error('Failed to fetch home products:', error))
+            .finally(() => !cancelled && setIsLoadingCatalog(false));
+        return () => { cancelled = true; };
+    }, [initialProducts.length, isPreview, storeConfig.id]);
     const handleAddToCart = (product) => {
         addToCart(product);
         addToast(`${product.name} added to cart`, 'success');
     };
     const filteredProducts = searchQuery
-        ? products.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || richFieldPlainTextForDisplay(p.description).toLowerCase().includes(searchQuery.toLowerCase()))
-        : products;
+        ? catalogProducts.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.description.toLowerCase().includes(searchQuery.toLowerCase()))
+        : catalogProducts;
+    const loadMoreProducts = async () => {
+        if (isLoadingCatalog || catalogPage * LOAD_MORE_INCREMENT >= catalogTotal)
+            return;
+        setIsLoadingCatalog(true);
+        try {
+            const nextPage = catalogPage + 1;
+            const response = await productService.getProducts({ storeId: storeConfig.id, page: nextPage, limit: LOAD_MORE_INCREMENT });
+            setCatalogProducts((current) => [...current, ...response.data.map(transformProductToStoreProduct)]);
+            setCatalogPage(nextPage);
+            setCatalogTotal(response.meta.total);
+            setVisibleCount((current) => current + LOAD_MORE_INCREMENT);
+        }
+        finally {
+            setIsLoadingCatalog(false);
+        }
+    };
     const [isFilterOpen, setIsFilterOpen] = useState(false);
-    return (_jsxs("div", { className: "min-h-screen font-sans text-gray-900 bg-white", children: [_jsx("div", { className: "bg-white text-gray-500 text-xs font-normal py-3 px-4 md:px-8 border-b border-gray-100/50", children: _jsxs("div", { className: "container mx-auto flex justify-between items-center", children: [_jsxs("div", { className: "hidden md:flex gap-8", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Package, { className: "h-3.5 w-3.5 text-gray-400" }), " Free Express Shipping Nationwide"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-gray-400" }), " Authentic Apple Products"] })] }), _jsxs("div", { className: "flex gap-6 ml-auto", children: [_jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }), _jsx(Link, { href: `/${storeConfig.slug}/contact`, className: "hover:text-gray-900 transition-colors", children: "Business Direct" }), _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-900 transition-colors", children: "Support" })] })] }) }), _jsxs("header", { className: "sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100", children: [_jsxs("div", { "data-section": "header", "data-payaza-section-key": "header", "data-payaza-page": "home", className: "container mx-auto px-4 md:px-6 h-16 flex items-center gap-8", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'header'), children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "flex flex-col leading-none shrink-0 group", children: getLogoUrl(storeConfig) ? (_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-10 w-10 transition-all duration-300 hover:opacity-90", alt: storeDisplayName })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xl font-medium tracking-tight text-gray-900 group-hover:text-gray-600 transition-colors", children: storeDisplayName }), _jsx("span", { className: "text-[9px] font-normal tracking-wide text-gray-400 mt-0.5", children: layoutConfig?.sections?.header?.subtitle || 'Premium Apple Products' })] })) }), _jsx("div", { className: "hidden md:flex flex-1 max-w-3xl relative", children: _jsxs("div", { className: "relative w-full flex", children: [_jsx("div", { className: "relative flex-1", children: _jsx("input", { type: "text", placeholder: "Search by keyword, model number, or SKU...", value: searchQuery, onChange: (e) => {
+    return (_jsxs("div", { className: "min-h-screen font-sans text-gray-900 bg-white", children: [_jsx("div", { className: "bg-white text-gray-500 text-xs font-normal py-3 px-4 md:px-8 border-b border-gray-100/50", children: _jsxs("div", { className: "container mx-auto flex justify-between items-center", children: [_jsxs("div", { className: "hidden md:flex gap-8", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(Package, { className: "h-3.5 w-3.5 text-gray-400" }), " Free Express Shipping Nationwide"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-gray-400" }), " Authentic Apple Products"] })] }), _jsxs("div", { className: "flex gap-6 ml-auto", children: [_jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }), _jsx(Link, { href: `/${storeConfig.slug}/contact`, className: "hover:text-gray-900 transition-colors", children: "Business Direct" }), _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-900 transition-colors", children: "Support" })] })] }) }), _jsxs("header", { className: "sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100", children: [_jsxs("div", { "data-section": "header", className: "container mx-auto px-4 md:px-6 h-16 flex items-center gap-8", children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "flex flex-col leading-none shrink-0 group", children: getLogoUrl(storeConfig) ? (_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-10 w-10 transition-all duration-300 hover:opacity-90", alt: storeConfig.name })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xl font-medium tracking-tight text-gray-900 group-hover:text-gray-600 transition-colors", children: storeConfig.name }), _jsx("span", { className: "text-[9px] font-normal tracking-wide text-gray-400 mt-0.5", children: layoutConfig?.sections?.header?.subtitle || 'Premium Apple Products' })] })) }), _jsx("div", { className: "hidden md:flex flex-1 max-w-3xl relative", children: _jsxs("div", { className: "relative w-full flex", children: [_jsx("div", { className: "relative flex-1", children: _jsx("input", { type: "text", placeholder: "Search by keyword, model number, or SKU...", value: searchQuery, onChange: (e) => {
                                                     setSearchQuery(e.target.value);
                                                     setVisibleCount(INITIAL_DISPLAY_COUNT);
-                                                }, className: "w-full h-10 pl-4 pr-12 rounded-l-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 transition-all" }) }), _jsxs("button", { className: "h-10 px-6 bg-gray-900 hover:bg-gray-800 text-white font-normal text-sm rounded-r-lg border border-gray-900 border-l-0 transition-colors flex items-center gap-2", children: [_jsx(Search, { className: "h-4 w-4" }), " Search"] })] }) }), _jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "md:hidden h-10 w-10 text-slate-600", onClick: () => setIsSearchOpen(!isSearchOpen), children: isSearchOpen ? _jsx(X, { className: "h-6 w-6" }) : _jsx(Search, { className: "h-6 w-6" }) }), isAuthenticated ? (_jsx(Link, { href: `/${storeConfig.slug}/account`, children: _jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 transition-colors", children: [_jsx(User, { className: "h-5 w-5" }), _jsx("span", { className: "text-[10px] font-normal", children: "Account" })] }) })) : (_jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 transition-colors", onClick: () => openLogin({
-                                            callbackUrl: pathname || `/${storeConfig.slug}/account`,
-                                        }), children: [_jsx(User, { className: "h-5 w-5" }), _jsx("span", { className: "text-[10px] font-normal", children: "Account" })] })), storeConfig.features.wishlist && (_jsx(Link, { href: `/${storeConfig.slug}/wishlist`, children: _jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 relative", children: [_jsxs("div", { className: "relative", children: [_jsx(Heart, { className: cn("h-5 w-5 transition-all", wishlistCount > 0 && "fill-current text-red-500") }), wishlistCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-3.5 w-3.5 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-sm ring-1 ring-white", style: { backgroundColor: storeConfig.branding.primaryColor || '#ef4444' }, children: wishlistCount > 9 ? '9+' : wishlistCount }))] }), _jsx("span", { className: "text-[10px] font-normal", children: "Saved" })] }) })), _jsx("div", { className: "h-6 w-px bg-gray-200 mx-1 hidden sm:block" }), _jsxs(Button, { className: "relative bg-white hover:bg-gray-50 text-gray-900 border border-gray-200 font-normal h-10 px-4 rounded-lg flex items-center gap-2 transition-colors", onClick: () => setIsCartOpen(true), children: [_jsx(ShoppingCart, { className: "h-4 w-4 text-gray-600" }), _jsx("span", { className: "text-sm", children: cartCount })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "md:hidden h-10 w-10", onClick: () => setIsMobileMenuOpen(true), children: _jsx(Menu, { className: "h-6 w-6" }) })] })] }), isSearchOpen && (_jsx("div", { className: "md:hidden p-4 bg-white border-b border-gray-200 animate-in slide-in-from-top-2 absolute w-full top-20 z-40 shadow-lg", children: _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", placeholder: "Search by keyword...", value: searchQuery, onChange: (e) => {
+                                                }, className: "w-full h-10 pl-4 pr-12 rounded-l-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 transition-all" }) }), _jsxs("button", { className: "h-10 px-6 bg-gray-900 hover:bg-gray-800 text-white font-normal text-sm rounded-r-lg border border-gray-900 border-l-0 transition-colors flex items-center gap-2", children: [_jsx(Search, { className: "h-4 w-4" }), " Search"] })] }) }), _jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "md:hidden h-10 w-10 text-slate-600", onClick: () => setIsSearchOpen(!isSearchOpen), children: isSearchOpen ? _jsx(X, { className: "h-6 w-6" }) : _jsx(Search, { className: "h-6 w-6" }) }), _jsx(Link, { href: `/${storeConfig.slug}/account`, children: _jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 transition-colors", children: [_jsx(User, { className: "h-5 w-5" }), _jsx("span", { className: "text-[10px] font-normal", children: "Account" })] }) }), storeConfig.features.wishlist && (_jsx(Link, { href: `/${storeConfig.slug}/wishlist`, children: _jsxs(Button, { variant: "ghost", className: "hidden sm:flex flex-col items-center justify-center h-auto py-1 px-2 text-gray-500 hover:text-gray-900 hover:bg-transparent gap-0.5 relative", children: [_jsxs("div", { className: "relative", children: [_jsx(Heart, { className: cn("h-5 w-5 transition-all", wishlistCount > 0 && "fill-current text-red-500") }), wishlistCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-3.5 w-3.5 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-sm ring-1 ring-white", style: { backgroundColor: storeConfig.branding.primaryColor || '#ef4444' }, children: wishlistCount > 9 ? '9+' : wishlistCount }))] }), _jsx("span", { className: "text-[10px] font-normal", children: "Saved" })] }) })), _jsx("div", { className: "h-6 w-px bg-gray-200 mx-1 hidden sm:block" }), _jsxs(Button, { className: "relative bg-white hover:bg-gray-50 text-gray-900 border border-gray-200 font-normal h-10 px-4 rounded-lg flex items-center gap-2 transition-colors", onClick: () => setIsCartOpen(true), children: [_jsx(ShoppingCart, { className: "h-4 w-4 text-gray-600" }), _jsx("span", { className: "text-sm", children: cartCount })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "md:hidden h-10 w-10", onClick: () => setIsMobileMenuOpen(true), children: _jsx(Menu, { className: "h-6 w-6" }) })] })] }), isSearchOpen && (_jsx("div", { className: "md:hidden p-4 bg-white border-b border-gray-200 animate-in slide-in-from-top-2 absolute w-full top-20 z-40 shadow-lg", children: _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", placeholder: "Search by keyword...", value: searchQuery, onChange: (e) => {
                                         setSearchQuery(e.target.value);
                                         setVisibleCount(INITIAL_DISPLAY_COUNT);
                                     }, className: "w-full h-12 pl-12 pr-4 rounded-xl bg-gray-100 border-none focus:ring-2 focus:ring-blue-500 text-base", autoFocus: true }), _jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" })] }) })), _jsx("div", { className: "hidden md:block bg-white border-b border-gray-100/50", children: _jsxs("div", { className: "container mx-auto px-6 h-12 flex items-center gap-8 text-sm font-normal text-gray-600", children: [categories.slice(0, 8).map(cat => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: "hover:text-gray-900 transition-colors py-1", children: cat.name }, cat.id))), _jsxs(Link, { href: `/${storeConfig.slug}/products?sale=true`, className: "ml-auto flex items-center gap-1.5 text-gray-500 hover:text-gray-900 transition-colors", children: [_jsx(Tag, { className: "h-3.5 w-3.5" }), " Special Offers"] })] }) })] }), _jsxs("main", { className: "container mx-auto px-4 md:px-6 py-6", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500 mb-6", children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "hover:text-black transition-colors", children: "Home" }), _jsx(ChevronRight, { className: "h-3 w-3" }), _jsx("span", { className: "font-semibold text-gray-900", children: "Apple Products" })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [_jsx("aside", { className: "hidden lg:block w-64 flex-shrink-0 space-y-6 sticky top-32 self-start h-fit z-30", children: _jsx(ElectronicsFilterContent, { categories: categories, storeSlug: storeConfig.slug }) }), _jsxs("div", { className: "flex-1", children: [(() => {
@@ -104,9 +136,19 @@ export function ElectronicsHomePageGrid({ storeConfig: initialConfig }) {
                                             getLayoutText(storeConfig, 'common.shopNow', defaultButtonText) ||
                                             getLayoutText(storeConfig, 'sections.marketing.promoBanner.button', defaultButtonText) ||
                                             defaultButtonText;
-                                        const bannerButtonLink = resolveStoreLink(promoBanner?.buttonLink || 'products', storeConfig.slug);
-                                        return (_jsxs("div", { "data-section": "marketing", "data-payaza-section-key": "marketing", "data-payaza-page": "home", className: "mb-8 rounded-lg bg-white text-gray-900 py-12 px-6 flex items-center justify-between relative overflow-hidden min-h-[200px]", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'marketing'), children: [_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(Image, { src: bannerImage, alt: bannerTitle, fill: true, className: "object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/40" })] }), _jsxs("div", { className: "relative z-10 max-w-2xl", children: [_jsx("h2", { className: "text-4xl font-light mb-4 text-white tracking-tight", children: bannerTitle }), _jsx("p", { className: "text-gray-200 text-lg mb-8 leading-relaxed font-light", children: bannerSubtitle }), _jsx(Link, { href: bannerButtonLink, children: _jsx(Button, { size: "sm", className: "bg-white hover:bg-gray-100 text-gray-900 font-normal border-none transition-colors px-6 py-2.5 text-sm shadow-lg", children: bannerButtonText }) })] })] }));
-                                    })(), _jsxs("div", { className: "bg-white py-4 mb-6 flex flex-wrap items-center gap-4 justify-between border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("span", { className: "text-sm font-normal text-gray-600", children: [filteredProducts.length, " Items"] }), _jsx("div", { className: "h-4 w-px bg-gray-200" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500 font-normal", children: "Sort:" }), _jsxs("select", { className: "text-sm border-none bg-transparent font-normal text-gray-900 focus:ring-0 cursor-pointer p-0 pr-6 appearance-none", children: [_jsx("option", { children: "Best Match" }), _jsx("option", { children: "Price Low-High" }), _jsx("option", { children: "Price High-Low" }), _jsx("option", { children: "Highest Rated" })] })] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "lg:hidden flex items-center gap-2 text-gray-600 hover:text-gray-900", onClick: () => setIsFilterOpen(true), children: [_jsx(Filter, { className: "h-4 w-4" }), " Filters"] }) })] }), _jsx(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "left", children: _jsx(ElectronicsFilterContent, { categories: categories, storeSlug: storeConfig.slug }) }), _jsx("div", { "data-section": "products", "data-payaza-section-key": "products", "data-payaza-page": "home", className: "grid gap-4 sm:gap-6 lg:gap-8 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3", style: getPayazaSectionInlineStyle(storeConfig, 'home', 'products'), children: filteredProducts.slice(0, visibleCount).map((product, index) => (
+                                        const bannerButtonLink = toStoreHref(storeConfig.slug, promoBanner?.buttonLink, '/products');
+                                        return (_jsxs("div", { "data-section": "marketing", className: "mb-8 rounded-lg bg-white text-gray-900 py-12 px-6 flex items-center justify-between relative overflow-hidden min-h-[200px]", children: [_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(Image, { src: bannerImage, alt: bannerTitle, fill: true, className: "object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/40" })] }), _jsxs("div", { className: "relative z-10 max-w-2xl", children: [_jsx("h2", { className: "text-4xl font-light mb-4 text-white tracking-tight", children: bannerTitle }), _jsx("p", { className: "text-gray-200 text-lg mb-8 leading-relaxed font-light", children: bannerSubtitle }), _jsx(Link, { href: bannerButtonLink, children: _jsx(Button, { size: "sm", className: "bg-white hover:bg-gray-100 text-gray-900 font-normal border-none transition-colors px-6 py-2.5 text-sm shadow-lg", children: bannerButtonText }) })] })] }));
+                                    })(), _jsxs("div", { className: "bg-white py-4 mb-6 flex flex-wrap items-center gap-4 justify-between border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("span", { className: "text-sm font-normal text-gray-600", children: [filteredProducts.length, " Items"] }), _jsx("div", { className: "h-4 w-px bg-gray-200" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500 font-normal", children: "Sort:" }), _jsxs("select", { className: "text-sm border-none bg-transparent font-normal text-gray-900 focus:ring-0 cursor-pointer p-0 pr-6 appearance-none", children: [_jsx("option", { children: "Best Match" }), _jsx("option", { children: "Price Low-High" }), _jsx("option", { children: "Price High-Low" }), _jsx("option", { children: "Highest Rated" })] })] })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "lg:hidden flex items-center gap-2 text-gray-600 hover:text-gray-900", onClick: () => setIsFilterOpen(true), children: [_jsx(Filter, { className: "h-4 w-4" }), " Filters"] }) })] }), _jsx(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "left", children: _jsx(ElectronicsFilterContent, { categories: categories, storeSlug: storeConfig.slug }) }), _jsx("div", { "data-section": "products", className: "grid gap-4 sm:gap-6 lg:gap-8 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3", children: filteredProducts.slice(0, visibleCount).map((product, index) => (
                                         // Grid View Card - High Density Info
-                                        _jsx(ElectronicsGridProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, index: index }, product.id))) }), visibleCount < filteredProducts.length && (_jsx("div", { className: "mt-16 flex justify-center border-t border-gray-100 pt-12", children: _jsx(Button, { variant: "outline", onClick: () => setVisibleCount(prev => prev + LOAD_MORE_INCREMENT), className: "min-w-[200px] border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-900 font-normal transition-colors", children: "Load More Products" }) }))] })] })] }), _jsx("footer", { className: "bg-white border-t border-gray-100 pt-16 pb-12 mt-20", children: _jsxs("div", { className: "container mx-auto px-6", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 mb-12", children: [_jsxs("div", { className: "lg:col-span-1", children: [_jsx("div", { className: "mb-6", children: _jsx("span", { className: "text-lg font-medium text-gray-900", children: storeConfig.name }) }), _jsx("p", { className: "text-sm text-gray-500 leading-relaxed mb-6 font-light", children: storeConfig.description || "Nigeria's premier destination for authentic Apple products. Authorized reseller with genuine warranty and exceptional service." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "w-8 h-8 bg-gray-100 rounded flex items-center justify-center text-gray-400", children: _jsx(Smartphone, { className: "h-4 w-4" }) }), _jsx("div", { className: "w-8 h-8 bg-gray-100 rounded flex items-center justify-center text-gray-400", children: _jsx(Tag, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Shop" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/products`, className: "hover:text-gray-900 transition-colors", children: "All Products" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/categories`, className: "hover:text-gray-900 transition-colors", children: "Categories" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Support" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-900 transition-colors", children: "Help Center" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Account" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/account`, className: "hover:text-gray-900 transition-colors", children: "My Account" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }) })] })] })] }), _jsxs("div", { className: "border-t border-gray-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-400", children: [_jsxs("p", { children: ["\u00A9 2024 ", storeConfig.name, ". All rights reserved."] }), _jsxs("div", { className: "flex gap-6", children: [_jsx(Link, { href: `/${storeConfig.slug}/privacy`, className: "hover:text-gray-600 transition-colors", children: "Privacy Policy" }), _jsx(Link, { href: `/${storeConfig.slug}/terms`, className: "hover:text-gray-600 transition-colors", children: "Terms & Conditions" }), _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-600 transition-colors", children: "Accessibility" })] })] })] }) }), _jsx(Sheet, { isOpen: isCartOpen, onClose: () => setIsCartOpen(false), title: `My Cart (${cartCount})`, side: "right", children: _jsx("div", { className: "flex flex-col h-full", children: cart.length === 0 ? (_jsxs("div", { className: "flex-1 flex flex-col items-center justify-center text-center p-8 text-gray-500", children: [_jsx(ShoppingCart, { className: "h-12 w-12 mb-4 text-gray-300" }), _jsx("p", { className: "font-medium mb-1", children: "Your cart is empty" }), _jsx(Button, { onClick: () => setIsCartOpen(false), className: "bg-blue-600 hover:bg-blue-700 text-white mt-4", children: "Start Shopping" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex-1 overflow-y-auto py-4", children: cart.map(item => (_jsxs("div", { className: "flex gap-4 p-4 border-b border-gray-100", children: [_jsx("div", { className: "h-16 w-16 bg-white border border-gray-200 rounded flex-shrink-0 overflow-hidden", children: _jsx(ImageWithFallback, { src: getCartLineImage(item) || item.product.images?.[0], alt: item.product.name, className: "w-full h-full object-cover", skeletonAspectRatio: "square" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm text-gray-900 line-clamp-2 mb-1", children: item.product.name }), item.variantName && (_jsx("p", { className: "text-xs text-gray-500 mb-1", children: item.variantName })), _jsxs("div", { className: "flex justify-between items-center mt-2", children: [_jsx("p", { className: "text-blue-600 font-bold text-sm", children: formatCurrency(item.price, item.product?.currency || storeConfig.settings?.currency || 'USD') }), _jsxs("div", { className: "flex items-center border border-gray-200 rounded bg-white", children: [_jsx("button", { onClick: () => updateCartQuantity(item.id, item.quantity - 1), className: "px-2 py-0.5 hover:bg-gray-50 text-gray-500", children: "-" }), _jsx("span", { className: "px-2 text-xs font-medium", children: item.quantity }), _jsx("button", { onClick: () => updateCartQuantity(item.id, item.quantity + 1), className: "px-2 py-0.5 hover:bg-gray-50 text-gray-500", children: "+" })] })] })] })] }, item.id))) }), _jsxs("div", { className: "border-t border-gray-100 p-4 space-y-4 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-center font-bold text-lg text-gray-900", children: [_jsx("span", { children: "Total" }), _jsx("span", { children: formatCurrency(cartTotal, storeConfig.settings?.currency || 'USD') })] }), _jsx(CheckoutButton, { storeConfig: storeConfig, className: "w-full bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold" })] })] })) }) }), _jsx(Sheet, { isOpen: isMobileMenuOpen, onClose: () => setIsMobileMenuOpen(false), title: "Menu", side: "left", children: _jsx("div", { className: "py-2", children: categories.map(cat => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, onClick: () => setIsMobileMenuOpen(false), className: "block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-blue-600 border-b border-gray-100", children: cat.name }, cat.id))) }) }), _jsx(PromoBanner, { config: layoutConfig?.sections?.promoBanner, layoutStyle: "electronics" })] }));
+                                        _jsx(ElectronicsGridProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, index: index }, product.id))) }), catalogPage * LOAD_MORE_INCREMENT < catalogTotal && (_jsx("div", { className: "mt-16 flex justify-center border-t border-gray-100 pt-12", children: _jsx(Button, { variant: "outline", onClick: loadMoreProducts, disabled: isLoadingCatalog, className: "min-w-[200px] border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-900 font-normal transition-colors", children: isLoadingCatalog ? 'Loading...' : 'Load More Products' }) }))] })] })] }), _jsx("footer", { "data-section": "footer", className: "bg-white border-t border-gray-100 pt-16 pb-12 mt-20", children: _jsxs("div", { className: "container mx-auto px-6", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12", children: [_jsxs("div", { className: "lg:col-span-1", children: [_jsx("div", { className: "mb-6", children: _jsx("span", { className: "text-lg font-medium text-gray-900", children: storeConfig.name }) }), _jsx("p", { className: "text-sm text-gray-500 leading-relaxed mb-6 font-light", children: storeConfig.description || "Nigeria's premier destination for authentic Apple products. Authorized reseller with genuine warranty and exceptional service." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "w-8 h-8 bg-gray-100 rounded flex items-center justify-center text-gray-400", children: _jsx(Smartphone, { className: "h-4 w-4" }) }), _jsx("div", { className: "w-8 h-8 bg-gray-100 rounded flex items-center justify-center text-gray-400", children: _jsx(Tag, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Shop" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/products`, className: "hover:text-gray-900 transition-colors", children: "All Products" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/categories`, className: "hover:text-gray-900 transition-colors", children: "Categories" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Support" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-900 transition-colors", children: "Help Center" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/shipping-returns`, className: "hover:text-gray-900 transition-colors", children: "Shipping & Returns" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Account" }), _jsxs("ul", { className: "space-y-3 text-sm text-gray-500", children: [_jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/account`, className: "hover:text-gray-900 transition-colors", children: "My Account" }) }), _jsx("li", { children: _jsx(Link, { href: `/${storeConfig.slug}/track-order`, className: "hover:text-gray-900 transition-colors", children: "Track Order" }) })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 text-sm mb-4", children: "Stay Connected" }), _jsxs("form", { onSubmit: async (e) => {
+                                                e.preventDefault();
+                                                const form = e.target;
+                                                const emailInput = form.querySelector('input[type="email"]');
+                                                if (emailInput && emailInput.value) {
+                                                    // Simulate newsletter subscription
+                                                    await new Promise(resolve => setTimeout(resolve, 500));
+                                                    addToast('Thank you for subscribing!', 'success');
+                                                    emailInput.value = '';
+                                                }
+                                            }, className: "flex flex-col gap-3", children: [_jsx("input", { type: "email", placeholder: "Enter email for deals", required: true, className: "rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-gray-500 transition-colors bg-white" }), _jsx(Button, { type: "submit", size: "sm", className: "bg-gray-900 hover:bg-gray-800 text-white w-full font-normal", children: "Subscribe" })] })] })] }), _jsxs("div", { className: "border-t border-gray-100 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-400", children: [_jsxs("p", { children: ["\u00A9 2024 ", storeConfig.name, ". All rights reserved."] }), _jsxs("div", { className: "flex gap-6", children: [_jsx(Link, { href: `/${storeConfig.slug}/privacy`, className: "hover:text-gray-600 transition-colors", children: "Privacy Policy" }), _jsx(Link, { href: `/${storeConfig.slug}/terms`, className: "hover:text-gray-600 transition-colors", children: "Terms & Conditions" }), _jsx(Link, { href: `/${storeConfig.slug}/help-center`, className: "hover:text-gray-600 transition-colors", children: "Accessibility" })] })] })] }) }), _jsx(Sheet, { isOpen: isCartOpen, onClose: () => setIsCartOpen(false), title: `My Cart (${cartCount})`, side: "right", children: _jsx("div", { className: "flex flex-col h-full", children: cart.length === 0 ? (_jsxs("div", { className: "flex-1 flex flex-col items-center justify-center text-center p-8 text-gray-500", children: [_jsx(ShoppingCart, { className: "h-12 w-12 mb-4 text-gray-300" }), _jsx("p", { className: "font-medium mb-1", children: "Your cart is empty" }), _jsx(Button, { onClick: () => setIsCartOpen(false), className: "bg-blue-600 hover:bg-blue-700 text-white mt-4", children: "Start Shopping" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex-1 overflow-y-auto py-4", children: cart.map(item => (_jsxs("div", { className: "flex gap-4 p-4 border-b border-gray-100", children: [_jsx("div", { className: "h-16 w-16 bg-white border border-gray-200 rounded flex-shrink-0 overflow-hidden", children: _jsx(ImageWithFallback, { src: item.product.images?.[0], alt: item.product.name, className: "w-full h-full object-cover", skeletonAspectRatio: "square" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm text-gray-900 line-clamp-2 mb-1", children: item.product.name }), _jsxs("div", { className: "flex justify-between items-center mt-2", children: [_jsx("p", { className: "text-blue-600 font-bold text-sm", children: formatCurrency(item.price, item.product?.currency || storeConfig.settings?.currency || 'USD') }), _jsxs("div", { className: "flex items-center border border-gray-200 rounded bg-white", children: [_jsx("button", { onClick: () => updateCartQuantity(item.id, item.quantity - 1), className: "px-2 py-0.5 hover:bg-gray-50 text-gray-500", children: "-" }), _jsx("span", { className: "px-2 text-xs font-medium", children: item.quantity }), _jsx("button", { onClick: () => updateCartQuantity(item.id, item.quantity + 1), className: "px-2 py-0.5 hover:bg-gray-50 text-gray-500", children: "+" })] })] })] })] }, item.id))) }), _jsxs("div", { className: "border-t border-gray-100 p-4 space-y-4 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-center font-bold text-lg text-gray-900", children: [_jsx("span", { children: "Total" }), _jsx("span", { children: formatCurrency(cartTotal, storeConfig.settings?.currency || 'USD') })] }), _jsx(CheckoutButton, { storeConfig: storeConfig, className: "w-full bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold" })] })] })) }) }), _jsx(Sheet, { isOpen: isMobileMenuOpen, onClose: () => setIsMobileMenuOpen(false), title: "Menu", side: "left", children: _jsx("div", { className: "py-2", children: categories.map(cat => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, onClick: () => setIsMobileMenuOpen(false), className: "block px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-blue-600 border-b border-gray-100", children: cat.name }, cat.id))) }) }), _jsx(PromoBanner, { config: layoutConfig?.sections?.promoBanner, layoutStyle: "electronics" })] }));
 }

package/dist/layouts/electronics-grid/index.js

@@ -1,15 +1,15 @@
 // Tech Grid (electronics-grid) layout — fully sandboxed exports
-export { ElectronicsHomePageGrid } from './components/ElectronicsHomePageGrid.js';
-export { ElectronicsGridProductCard } from './components/ElectronicsGridProductCard.js';
-export { ElectronicsGridCategoriesPage } from './pages/ElectronicsGridCategoriesPage.js';
-export { ElectronicsGridProductsListingPage } from './pages/ProductsPage.js';
-export { ElectronicsGridProductDetailPage } from './pages/ProductDetailPage.js';
-export { ElectronicsGridCategoryPage } from './pages/CategoryPage.js';
-export { ElectronicsGridCategoriesListingPage } from './pages/CategoriesPage.js';
-export { ElectronicsGridAboutPage } from './pages/AboutPage.js';
-export { ElectronicsGridContactPage } from './pages/ContactPage.js';
-export { ElectronicsGridHelpCenterPage } from './pages/HelpCenterPage.js';
-export { ElectronicsGridPrivacyPolicyPage } from './pages/PrivacyPolicyPage.js';
-export { ElectronicsGridShippingReturnsPage } from './pages/ShippingReturnsPage.js';
-export { ElectronicsGridTermsPage } from './pages/TermsPage.js';
-export { ElectronicsGridTrackOrderPage } from './pages/TrackOrderPage.js';
+export { ElectronicsHomePageGrid } from './components/ElectronicsHomePageGrid';
+export { ElectronicsGridProductCard } from './components/ElectronicsGridProductCard';
+export { ElectronicsGridCategoriesPage } from './pages/ElectronicsGridCategoriesPage';
+export { ElectronicsGridProductsListingPage } from './pages/ProductsPage';
+export { ElectronicsGridProductDetailPage } from './pages/ProductDetailPage';
+export { ElectronicsGridCategoryPage } from './pages/CategoryPage';
+export { ElectronicsGridCategoriesListingPage } from './pages/CategoriesPage';
+export { ElectronicsGridAboutPage } from './pages/AboutPage';
+export { ElectronicsGridContactPage } from './pages/ContactPage';
+export { ElectronicsGridHelpCenterPage } from './pages/HelpCenterPage';
+export { ElectronicsGridPrivacyPolicyPage } from './pages/PrivacyPolicyPage';
+export { ElectronicsGridShippingReturnsPage } from './pages/ShippingReturnsPage';
+export { ElectronicsGridTermsPage } from './pages/TermsPage';
+export { ElectronicsGridTrackOrderPage } from './pages/TrackOrderPage';

package/dist/layouts/electronics-grid/pages/AboutPage.d.ts

@@ -2,6 +2,6 @@ import { StoreConfig } from '../../../lib/store-types';
 interface AboutPageProps {
     storeConfig: StoreConfig;
 }
-export declare function ElectronicsGridAboutPage({ 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/electronics-grid/pages/AboutPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAShD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,wBAAwB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA4PtF"}
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA2OvE"}

package/dist/layouts/electronics-grid/pages/AboutPage.js

@@ -1,24 +1,21 @@
 '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.js';
-import { DotPattern } from '../../../components/ui/background-patterns.js';
-import { useStore } from '../../../lib/store-context.js';
+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 { payazaInlineBindingProps, encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-export function ElectronicsGridAboutPage({ storeConfig: initialConfig }) {
+export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
     const primaryColor = storeConfig.branding.primaryColor;
     const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
     const aboutConfig = storeConfig.layoutConfig?.pages?.about;
-    const isPreview = !!storeConfig.isPreview;
-    // Electronics-grid hero — check schema path (hero) first, then flat paths for backward compat
-    const heroImage = aboutConfig?.hero?.heroImage || aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1498049381960-da565139a979?q=80&w=2071&auto=format&fit=crop';
-    const pageTitle = aboutConfig?.hero?.title || aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
-    const pageContent = aboutConfig?.story?.content || aboutConfig?.content || storeConfig.description;
-    const missionStatement = aboutConfig?.hero?.missionStatement || aboutConfig?.missionStatement;
+    // Electronics-grid-specific hero image
+    const heroImage = aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1498049381960-da565139a979?q=80&w=2071&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 = [
         {
@@ -42,10 +39,10 @@ export function ElectronicsGridAboutPage({ storeConfig: initialConfig }) {
             description: "Commitment to reduced carbon footprint and energy-efficient tech."
         }
     ];
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { "data-section": "hero", "data-payaza-section-key": "hero", "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": isPreview ? encodePayazaFieldKey('hero', ['heroImage']) : undefined, 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: [showLayoutDecorativeBadges() && (_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", ...payazaInlineBindingProps(isPreview, 'hero', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", ...payazaInlineBindingProps(isPreview, 'hero', ['missionStatement']), children: missionStatement || storeConfig.description })] }) }) })] }), _jsxs("section", { "data-section": "story", "data-payaza-section-key": "story", "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: [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", ...payazaInlineBindingProps(isPreview, 'story', ['content'], { rich: 'inline' }), 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", { "data-section": "stats", "data-payaza-section-key": "stats", "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: [
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_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 || storeConfig.description })] }) }) })] }), _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: [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" }) }, 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))) })] })] }) })] }), _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: "Global Users", value: "100k+" },
                                 { label: "Gadgets", value: storeConfig.products?.length ? `${storeConfig.products.length * 15}+` : "150+" },
                                 { label: "Tech Awards", value: "25+" },
                                 { label: "Innovation Hubs", value: "5+" }
-                            ].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", { "data-section": "contact-info", "data-payaza-section-key": "contact-info", "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", 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: [storeConfig.contactInfo?.address?.street || '123 Store Street', _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Commerce City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '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: [storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com`, _jsx("br", {}), storeConfig.contactInfo?.phone || '+1 (555) 123-4567'] }), _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" }), _jsx("p", { className: "text-gray-600 leading-relaxed", children: storeConfig.locations?.[0]?.openingHours || (_jsxs(_Fragment, { children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })) })] })] })] }) })] }));
+                            ].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", { "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: [storeConfig.contactInfo?.address?.street || '123 Store Street', _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Commerce City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '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: [storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com`, _jsx("br", {}), storeConfig.contactInfo?.phone || '+1 (555) 123-4567'] }), _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" }), _jsx("p", { className: "text-gray-600 leading-relaxed", children: storeConfig.locations?.[0]?.openingHours || (_jsxs(_Fragment, { children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })) })] })] })] }) })] }));
 }

package/dist/layouts/electronics-grid/pages/CategoriesPage.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ElectronicsGridCategoriesPage } from '../../electronics-grid/pages/ElectronicsGridCategoriesPage.js';
+import { ElectronicsGridCategoriesPage } from '../../electronics-grid/pages/ElectronicsGridCategoriesPage';
 export function ElectronicsGridCategoriesListingPage({ storeConfig }) {
     return _jsx(ElectronicsGridCategoriesPage, { storeConfig: storeConfig });
 }

package/dist/layouts/electronics-grid/pages/CategoryPage.d.ts

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

package/dist/layouts/electronics-grid/pages/CategoryPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/CategoryPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,mBAAmB,CAAC;AAqB5E,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,2CAiH1G"}
+{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/CategoryPage.tsx"],"names":[],"mappings":"AAIA,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,2CAsH5E"}

package/dist/layouts/electronics-grid/pages/CategoryPage.js

@@ -1,26 +1,20 @@
 '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 ElectronicsGridCategoryPage({ 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);
+import { ProductCard } from '../../../components/ui/product-card';
+export function CategoryPage({ storeConfig, categorySlug }) {
+    const categories = storeConfig.categories || [];
+    const category = categories.find(c => c.slug === categorySlug);
+    const { products, isLoading, hasMore, loadMore } = useCategoryProducts(storeConfig.id, category?.id);
+    const { addToCart } = useStore();
     const { addToast } = useToast();
     const { trackEvent } = useAnalytics();
     // Track category view
@@ -51,5 +45,5 @@ export function ElectronicsGridCategoryPage({ 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 bg-gray-50 text-gray-900 transition-colors duration-300", children: [_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 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 }), _jsx(CategoryDescription, { description: 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 text-gray-600 hover:text-gray-900", children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), "Back to All Categories"] }), _jsx("div", { className: "flex items-center gap-4", children: _jsxs(Button, { variant: "outline", className: "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 bg-gray-50 text-gray-900 transition-colors duration-300", children: [_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 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 && (_jsx("p", { className: "text-lg md:text-xl max-w-2xl opacity-90 font-light", 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 text-gray-600 hover:text-gray-900", children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), "Back to All Categories"] }), _jsx("div", { className: "flex items-center gap-4", children: _jsxs(Button, { variant: "outline", className: "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" }) }))] }))] })] }));
 }

package/dist/layouts/electronics-grid/pages/ContactPage.d.ts

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

package/dist/layouts/electronics-grid/pages/ContactPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAShD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,0BAA0B,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAqT1F"}
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAyS3E"}