payaza-storefront-layouts 1.0.0

package/dist/layouts/food-modern/pages/AboutPage.js

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

package/dist/layouts/food-modern/pages/CategoriesPage.d.ts

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

package/dist/layouts/food-modern/pages/CategoriesPage.d.ts.map

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

package/dist/layouts/food-modern/pages/CategoriesPage.js

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

package/dist/layouts/food-modern/pages/CategoryPage.d.ts

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

package/dist/layouts/food-modern/pages/CategoryPage.d.ts.map

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

package/dist/layouts/food-modern/pages/CategoryPage.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useStore } from '../../../lib/store-context';
+import { ArrowLeft, Filter, Clock, Star, ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import { useToast } from '../../../components/ui/toast';
+import { useAnalytics } from '../../../hooks/use-analytics';
+import { useEffect } from 'react';
+import { ProductCard } from '../../../components/ui/product-card';
+import { getLayoutText, getTextContent } from '../../../lib/utils/asset-helpers';
+import { formatCurrency, filterActiveProducts, filterActiveServices } from '../../../lib/utils';
+import Image from 'next/image';
+export function CategoryPage({ storeConfig, categorySlug }) {
+    const categories = storeConfig.categories || [];
+    const category = categories.find(c => c.slug === categorySlug);
+    const products = filterActiveProducts(storeConfig.products?.filter(p => p.categoryId === category?.id) || []);
+    const services = filterActiveServices(storeConfig.services?.filter(s => s.categoryId === category?.id) || []);
+    const { addToCart } = useStore();
+    const { addToast } = useToast();
+    const { trackEvent } = useAnalytics();
+    // Track category view
+    useEffect(() => {
+        if (category && storeConfig?.id) {
+            trackEvent({
+                eventType: 'category_view',
+                metadata: {
+                    categoryId: category.id,
+                    categoryName: category.name,
+                    categorySlug: category.slug,
+                },
+            });
+        }
+    }, [category?.id, storeConfig?.id, trackEvent]);
+    // Determine if this is a service-based store
+    const isServiceStore = storeConfig.type === 'booking' ||
+        storeConfig.layout === 'booking' ||
+        storeConfig.layout === 'booking-agenda' ||
+        (storeConfig.services && storeConfig.services.length > 0);
+    // Show services if it's a service store, or if there are services for this category
+    const shouldShowServices = isServiceStore || services.length > 0;
+    const shouldShowProducts = !isServiceStore || products.length > 0;
+    const hasItems = (shouldShowServices && services.length > 0) || (shouldShowProducts && products.length > 0);
+    const handleAddToCart = (product) => {
+        addToCart(product);
+        addToast(`${product.name} added to cart`, 'success');
+    };
+    const handleQuickView = (product) => {
+        addToast(`Quick view for ${product.name}`, 'info');
+    };
+    if (!category) {
+        return (_jsx("div", { className: "min-h-screen bg-gray-50 flex items-center justify-center p-8", children: _jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-2xl font-bold mb-2", children: "Category Not Found" }), _jsx("p", { className: "text-gray-600 mb-4", children: "The category you're looking for doesn't exist." }), _jsx(Link, { href: `/${storeConfig.slug}/categories`, children: _jsx(Button, { children: "Back to Categories" }) })] }) }));
+    }
+    // Modern / Dark Theme Logic (e.g. for Modern Eats)
+    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: [_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 && (_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 ${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"] }), _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: (() => {
+                                    const itemType = isServiceStore ? 'services' : 'products';
+                                    const defaultMessage = isServiceStore
+                                        ? 'No services found in this category.'
+                                        : 'No products found in this category.';
+                                    // Try to get from layout config, fallback to default
+                                    return getLayoutText(storeConfig, `sections.categories.emptyState.${itemType}`, getTextContent(storeConfig, `category_empty_${itemType}`, defaultMessage));
+                                })() }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsxs("div", { className: "space-y-12", children: [shouldShowServices && services.length > 0 && (_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold mb-6", children: isServiceStore ? 'Services' : 'Services in this Category' }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: services.map((service) => (_jsxs("div", { className: "group flex flex-col h-full", children: [_jsxs(Link, { href: `/${storeConfig.slug}/book?service=${service.slug}`, className: "block relative aspect-[4/3] rounded-2xl overflow-hidden bg-gray-100 mb-4 shadow-sm group-hover:shadow-xl transition-all duration-500", children: [_jsx(Image, { src: service.image || 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&auto=format&fit=crop&q=60', alt: service.name, fill: true, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", unoptimized: true }), _jsx("div", { className: "absolute bottom-4 left-4 bg-white/95 backdrop-blur px-4 py-2 rounded-full text-sm font-bold shadow-sm text-gray-900", children: formatCurrency(service.price, service.currency || storeConfig.settings?.currency || 'USD') }), _jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-full bg-white text-black hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8", children: "Book Now" }) })] }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx(Link, { href: `/${storeConfig.slug}/book?service=${service.slug}`, children: _jsx("h3", { className: "text-xl font-bold text-gray-900 mb-2 group-hover:text-gray-600 transition-colors", children: service.name }) }), _jsx("p", { className: "text-gray-500 mb-4 line-clamp-2 leading-relaxed text-sm flex-1", children: service.description }), _jsxs("div", { className: "flex items-center justify-between pt-4 border-t border-gray-100 text-sm font-medium text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "w-4 h-4 text-gray-400" }), service.duration, " mins"] }), service.provider && service.provider.rating && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Star, { className: "w-4 h-4 fill-gray-200 text-gray-200" }), service.provider.rating] }))] }), _jsxs(Link, { href: `/${storeConfig.slug}/book?service=${service.slug}`, className: "flex items-center gap-2 text-black font-bold group/link", children: ["Book ", _jsx(ArrowRight, { className: "w-4 h-4 transition-transform group-hover/link:translate-x-1" })] })] })] })] }, service.id))) })] })), shouldShowProducts && products.length > 0 && (_jsxs("div", { children: [shouldShowServices && services.length > 0 && (_jsx("h2", { className: "text-2xl font-bold mb-6", children: "Products in this Category" })), _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))) })] }))] }))] })] }));
+}

package/dist/layouts/food-modern/pages/ContactPage.d.ts

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

package/dist/layouts/food-modern/pages/ContactPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,EAAE,gBAAgB,2CA6P5D"}

package/dist/layouts/food-modern/pages/ContactPage.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../../components/ui/button';
+import { Mail, Phone, MapPin, Clock, Send, MessageSquare, CheckCircle } from 'lucide-react';
+import Image from 'next/image';
+export function ContactPage({ storeConfig }) {
+    // We use CSS variables for theming to inherit from parent layout
+    // const primaryColor = storeConfig.branding.primaryColor;
+    // const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
+    const [formState, setFormState] = useState('idle');
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setFormState('submitting');
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        setFormState('success');
+    };
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop", alt: "Contact Background", fill: true, className: "w-full h-full object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-black/60" })] }), _jsxs("div", { className: "container mx-auto px-4 relative z-10 text-center", children: [_jsx("h1", { className: "text-4xl md:text-6xl font-bold mb-4 tracking-tight", children: "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { className: "container mx-auto px-4 -mt-10 relative z-20 max-w-6xl", children: _jsxs("div", { className: "bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 flex flex-col lg:flex-row", children: [_jsxs("div", { className: "lg:w-2/5 p-8 md:p-12 text-white relative overflow-hidden", style: { backgroundColor: 'var(--store-primary)' }, children: [_jsx("div", { className: "absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl" }), _jsx("div", { className: "absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-black opacity-10 rounded-full blur-2xl" }), _jsx("h2", { className: "text-2xl font-bold mb-8 relative z-10", children: "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10", children: "Fill out the form and our team will get back to you within 24 hours." }), _jsxs("div", { className: "space-y-8 relative z-10", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Phone, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Call Us" }), _jsx("p", { className: "text-white/80", children: "+1 (555) 123-4567" }), _jsx("p", { className: "text-white/80", children: "+1 (555) 987-6543" })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Mail, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Email Us" }), _jsxs("p", { className: "text-white/80", children: ["hello@", storeConfig.slug, ".com"] }), _jsxs("p", { className: "text-white/80", children: ["support@", storeConfig.slug, ".com"] })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(MapPin, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Visit Us" }), _jsxs("p", { className: "text-white/80", children: ["123 Commerce Blvd,", _jsx("br", {}), "Suite 100,", _jsx("br", {}), "Business City, ST 12345"] })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Clock, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Opening Hours" }), _jsx("p", { className: "text-white/80", children: "Mon - Fri: 9am - 6pm" }), _jsx("p", { className: "text-white/80", children: "Sat: 10am - 4pm" })] })] })] }), _jsx("div", { className: "mt-12 relative z-10", children: _jsx("div", { className: "flex gap-4", children: [1, 2, 3, 4].map((i) => (_jsx("div", { className: "w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 cursor-pointer transition-colors" }, i))) }) })] }), _jsxs("div", { className: "lg:w-3/5 p-8 md:p-12 bg-white relative", children: [_jsx("div", { className: "absolute top-0 right-0 p-6 opacity-5", children: _jsx(MessageSquare, { className: "w-32 h-32" }) }), formState === 'success' ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center text-center py-10", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6", children: _jsx(CheckCircle, { className: "w-10 h-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Message Sent!" }), _jsx("p", { className: "text-gray-600 max-w-sm mx-auto mb-8", children: "Thank you for contacting us. We have received your message and will respond as soon as possible." }), _jsx(Button, { onClick: () => setFormState('idle'), className: "bg-gray-900 hover:bg-gray-800", children: "Send Another Message" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "relative z-10 space-y-6", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: "Send us a Message" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "firstName", className: "text-sm font-medium text-gray-700", children: "First Name" }), _jsx("input", { type: "text", id: "firstName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "John" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "lastName", className: "text-sm font-medium text-gray-700", children: "Last Name" }), _jsx("input", { type: "text", id: "lastName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "Doe" })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "email", className: "text-sm font-medium text-gray-700", children: "Email Address" }), _jsx("input", { type: "email", id: "email", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "john@example.com" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "phone", className: "text-sm font-medium text-gray-700", children: "Phone (Optional)" }), _jsx("input", { type: "tel", id: "phone", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "+1 (555) 000-0000" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsxs("select", { id: "subject", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "support", children: "Customer Support" }), _jsx("option", { value: "orders", children: "Orders & Returns" }), _jsx("option", { value: "wholesale", children: "Wholesale & Partnerships" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "message", className: "text-sm font-medium text-gray-700", children: "Message" }), _jsx("textarea", { id: "message", rows: 4, required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all resize-none", placeholder: "How can we help you today?" })] }), _jsx("div", { className: "pt-2", children: _jsx(Button, { type: "submit", disabled: formState === 'submitting', className: "w-full py-6 text-lg font-semibold rounded-xl", style: { backgroundColor: 'var(--store-primary)' }, children: formState === 'submitting' ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" }), "Sending..."] })) : (_jsxs("span", { className: "flex items-center gap-2", children: ["Send Message", _jsx(Send, { className: "w-4 h-4" })] })) }) })] }))] })] }) }), _jsx("section", { className: "container mx-auto px-4 mt-20 max-w-6xl", children: _jsxs("div", { className: "bg-gray-100 rounded-3xl overflow-hidden h-96 w-full relative grayscale hover:grayscale-0 transition-all duration-500", children: [_jsx("iframe", { src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus", width: "100%", height: "100%", style: { border: 0 }, allowFullScreen: true, loading: "lazy", title: "Store Location" }), _jsxs("div", { className: "absolute top-4 right-4 bg-white p-4 rounded-xl shadow-lg z-10 hidden md:block", children: [_jsx("p", { className: "font-bold text-gray-900", children: storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: "123 Commerce Blvd" })] })] }) })] }));
+}

package/dist/layouts/food-modern/pages/MenuPage.d.ts

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

package/dist/layouts/food-modern/pages/MenuPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/MenuPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQhD,UAAU,aAAa;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,QAAQ,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,aAAa,2CAiQpE"}

package/dist/layouts/food-modern/pages/MenuPage.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from '../../../components/ui/card';
+import { Button } from '../../../components/ui/button';
+import { ShoppingCart, Search, Star, Flame, Leaf, Wheat, Info, ChevronRight, ChevronLeft } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { cn, formatCurrency } from '../../../lib/utils';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+export function MenuPage({ storeConfig, categorySlug }) {
+    const categories = storeConfig.categories || [];
+    const menuItems = storeConfig.menuItems || [];
+    const [selectedCategory, setSelectedCategory] = useState(categorySlug || '');
+    const [searchQuery, setSearchQuery] = useState('');
+    const scrollContainerRef = useRef(null);
+    const [showLeftGradient, setShowLeftGradient] = useState(false);
+    const [showRightGradient, setShowRightGradient] = useState(true);
+    const primaryColor = storeConfig.branding.primaryColor;
+    // Icons mapping for dietary info
+    const dietaryIcons = {
+        'spicy': Flame,
+        'vegan': Leaf,
+        'vegetarian': Leaf,
+        'gluten-free': Wheat,
+        'popular': Star
+    };
+    const filteredItems = menuItems.filter(item => {
+        // Category Filter
+        if (selectedCategory) {
+            const category = categories.find(c => c.id === item.categoryId);
+            if (category?.slug !== selectedCategory)
+                return false;
+        }
+        // Search Filter
+        if (searchQuery) {
+            return item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                item.description.toLowerCase().includes(searchQuery.toLowerCase());
+        }
+        return true;
+    });
+    const checkScroll = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            setShowLeftGradient(scrollLeft > 0);
+            setShowRightGradient(scrollLeft < scrollWidth - clientWidth - 5);
+        }
+    };
+    useEffect(() => {
+        checkScroll();
+        window.addEventListener('resize', checkScroll);
+        return () => window.removeEventListener('resize', checkScroll);
+    }, []);
+    const scrollCategories = (direction) => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = 200;
+            scrollContainerRef.current.scrollBy({
+                left: direction === 'left' ? -scrollAmount : scrollAmount,
+                behavior: 'smooth'
+            });
+        }
+    };
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsxs("div", { className: "relative bg-black text-white py-16 px-4 overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" }), _jsxs("div", { className: "relative z-10 container mx-auto text-center max-w-4xl", children: [_jsx("h1", { className: "text-4xl md:text-5xl font-black mb-4 tracking-tight", children: "Our Menu" }), _jsx("p", { className: "text-lg text-gray-200 max-w-2xl mx-auto", children: "Discover our wide range of delicious dishes, crafted with passion and the finest ingredients." })] })] }), _jsx("div", { className: "sticky top-0 z-30 bg-gray-50/95 backdrop-blur-sm py-4 transition-all border-b border-gray-200 shadow-sm", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-4 items-center", children: [_jsxs("div", { className: "relative w-full md:max-w-xs flex-shrink-0", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" }), _jsx("input", { type: "text", placeholder: "Search menu...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full pl-9 pr-4 py-2 bg-white border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-black/5 transition-all shadow-sm" })] }), _jsxs("div", { className: "relative flex-1 w-full overflow-hidden group", children: [_jsx("button", { onClick: () => scrollCategories('left'), className: cn("absolute left-0 top-1/2 -translate-y-1/2 z-10 h-8 w-8 bg-white/90 shadow-md rounded-full flex items-center justify-center text-gray-600 transition-opacity hover:bg-white md:flex hidden", !showLeftGradient && "opacity-0 pointer-events-none"), children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => scrollCategories('right'), className: cn("absolute right-0 top-1/2 -translate-y-1/2 z-10 h-8 w-8 bg-white/90 shadow-md rounded-full flex items-center justify-center text-gray-600 transition-opacity hover:bg-white md:flex hidden", !showRightGradient && "opacity-0 pointer-events-none"), children: _jsx(ChevronRight, { className: "w-4 h-4" }) }), _jsx("div", { className: cn("absolute left-0 top-0 bottom-0 w-12 bg-gradient-to-r from-gray-50 to-transparent z-0 pointer-events-none transition-opacity", showLeftGradient ? "opacity-100" : "opacity-0") }), _jsx("div", { className: cn("absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-gray-50 to-transparent z-0 pointer-events-none transition-opacity", showRightGradient ? "opacity-100" : "opacity-0") }), _jsxs("div", { ref: scrollContainerRef, onScroll: checkScroll, className: "flex gap-2 overflow-x-auto scrollbar-hide py-1 px-1 scroll-smooth", children: [_jsx("button", { onClick: () => setSelectedCategory(''), className: cn("px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all border flex-shrink-0 select-none", !selectedCategory
+                                                    ? "text-white border-transparent shadow-md transform scale-105"
+                                                    : "bg-white text-gray-600 border-gray-200 hover:bg-gray-100 hover:border-gray-300"), style: !selectedCategory ? { backgroundColor: primaryColor } : {}, children: "All Items" }), categories.map((category) => (_jsx("button", { onClick: () => setSelectedCategory(category.slug), className: cn("px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all border flex-shrink-0 select-none", selectedCategory === category.slug
+                                                    ? "text-white border-transparent shadow-md transform scale-105"
+                                                    : "bg-white text-gray-600 border-gray-200 hover:bg-gray-100 hover:border-gray-300"), style: selectedCategory === category.slug ? { backgroundColor: primaryColor } : {}, children: category.name }, category.id)))] })] })] }) }) }), _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-12", children: [selectedCategory && (_jsx("div", { className: "mb-8 animate-fade-in", children: _jsxs("h2", { className: "text-2xl font-bold text-gray-900 capitalize flex items-center gap-3", children: [categories.find(c => c.slug === selectedCategory)?.name || 'Category', _jsxs("span", { className: "text-sm font-normal text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full", children: [filteredItems.length, " items"] })] }) })), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: filteredItems.map((item, index) => (_jsxs(Card, { className: "group overflow-hidden hover:shadow-xl transition-all duration-300 border-gray-100 flex flex-col h-full bg-white rounded-2xl", children: [_jsxs("div", { className: "relative aspect-[4/3] overflow-hidden", children: [_jsx(ImageWithFallback, { src: item.image, alt: item.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "4/3" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6", children: _jsx(Button, { className: "rounded-full font-bold shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300", style: { backgroundColor: primaryColor, color: 'white' }, children: "Quick Add" }) }), index % 3 === 0 && (_jsxs("div", { className: "absolute top-3 right-3 bg-white/90 backdrop-blur text-gray-900 text-[10px] font-bold px-2 py-1 rounded-full shadow-sm flex items-center gap-1", children: [_jsx(Star, { className: "w-3 h-3 fill-yellow-400 text-yellow-400" }), " Popular"] }))] }), _jsxs(CardContent, { className: "p-6 flex-1 flex flex-col", children: [_jsxs("div", { className: "flex justify-between items-start mb-2", children: [_jsx("h3", { className: "font-bold text-lg text-gray-900 leading-tight", children: item.name }), _jsx("span", { className: "font-black text-lg text-gray-900 whitespace-nowrap ml-2", children: formatCurrency(item.price, item.currency || storeConfig.settings?.currency || 'USD') })] }), _jsx("p", { className: "text-gray-500 text-sm mb-4 line-clamp-2 leading-relaxed flex-1", children: item.description }), item.dietaryInfo && item.dietaryInfo.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-6", children: item.dietaryInfo.map((info) => {
+                                                const Icon = dietaryIcons[info.toLowerCase()] || Info;
+                                                return (_jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-1 rounded bg-gray-50 text-gray-500 border border-gray-100", children: [_jsx(Icon, { className: "w-3 h-3" }), info] }, info));
+                                            }) })), _jsxs(Button, { className: "w-full rounded-xl font-bold h-11 shadow-sm hover:shadow-md transition-all active:scale-[0.98]", style: {
+                                                backgroundColor: 'black',
+                                                color: 'white',
+                                            }, children: [_jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), "Add to Cart"] })] })] }, item.id))) }), filteredItems.length === 0 && (_jsxs("div", { className: "text-center py-20 bg-white rounded-3xl border border-dashed border-gray-200", children: [_jsx("div", { className: "w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4", children: _jsx(Search, { className: "w-8 h-8 text-gray-300" }) }), _jsx("h3", { className: "text-xl font-bold text-gray-900 mb-2", children: "No items found" }), _jsx("p", { className: "text-gray-500", children: "Try adjusting your search or category filter." }), _jsx(Button, { variant: "outline", className: "mt-6", onClick: () => {
+                                    setSearchQuery('');
+                                    setSelectedCategory('');
+                                }, children: "Clear Filters" })] }))] })] }));
+}

package/dist/layouts/food-modern/pages/ProductDetailPage.d.ts

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

package/dist/layouts/food-modern/pages/ProductDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/ProductDetailPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8C,MAAM,mBAAmB,CAAC;AAyB5F,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB;AAyHD,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CA6sCrF"}