storefront-layouts 1.0.18 → 1.0.19

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

@@ -1,6 +1,6 @@
 '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 { Heart, 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';
@@ -8,6 +8,8 @@ import Image from 'next/image';
 import { SafeRichHtml } from '../../../components/rich-text/SafeRichHtml.js';
 import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
 import { storySectionImage, storySectionLabel, storySectionTitle, storyTeamSubtitle, storyTeamTitle, } from '../../shared/about-story-media.js';
+import { FOOD_DEFAULT_ABOUT_VALUES, resolveAboutPageValueItems, } from '../../booking/components/booking-about-defaults.js';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
 export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
@@ -27,29 +29,10 @@ export function AboutPage({ storeConfig: initialConfig }) {
     const storyTitle = storySectionTitle(storyConfig);
     const storyCaptionTitle = storyTeamTitle(storyConfig);
     const storyCaptionSubtitle = storyTeamSubtitle(storyConfig);
-    const values = [
-        {
-            icon: Award,
-            title: "Gourmet Excellence",
-            description: "Elevation of traditional flavors into modern culinary masterpieces."
-        },
-        {
-            icon: Users,
-            title: "Community Focused",
-            description: "A hub for food lovers to connect and share extraordinary experiences."
-        },
-        {
-            icon: Heart,
-            title: "Artistic Passion",
-            description: "We view every plate as a canvas, blending taste with visual artistry."
-        },
-        {
-            icon: Leaf,
-            title: "Modern Ethics",
-            description: "Sustainable practices and responsible sourcing for a better tomorrow."
-        }
-    ];
-    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(SafeRichHtml, { value: missionStatement || storeConfig.description, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" })] }) }) })] }), _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: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _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(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, 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: [
+    const valuesConfig = aboutConfig?.values || storeConfig.layoutConfig?.sections?.values;
+    const valuesItems = resolveAboutPageValueItems(storeConfig.layoutConfig, FOOD_DEFAULT_ABOUT_VALUES);
+    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(SafeRichHtml, { value: missionStatement || storeConfig.description, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" })] }) }) })] }), _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: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _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: valuesConfig?.show !== false &&
+                                                valuesItems.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(DynamicIcon, { name: 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(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, 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: "Elite Members", value: "5k+" },
                                 { label: "Modern Creations", value: menuItems?.length ? `${menuItems.length}+` : "35+" },
                                 { label: "Culinary Awards", value: "12+" },

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

@@ -1 +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;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BA6T3E"}
+{"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;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BA+M3E"}

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button } from '../../../components/ui/button.js';
-import { Mail, Phone, MapPin, Clock, Send, MessageSquare, CheckCircle } from 'lucide-react';
+import { Send, CheckCircle } from 'lucide-react';
 import { useStore } from '../../../lib/store-context.js';
 import Image from 'next/image';
 import { submitContact } from '../../../lib/services/contact.service.js';
@@ -49,5 +49,5 @@ export function ContactPage({ storeConfig: initialConfig }) {
             setErrorMessage('Failed to send message. Please try again.');
         }
     };
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { "data-section": "hero", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: contactConfig?.contactHeader?.backgroundImage || "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" }), _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: contactConfig?.contactHeader?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: contactConfig?.contactHeader?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { "data-section": "form", 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: contactConfig?.contactForm?.infoTitle || "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10", children: contactConfig?.contactForm?.infoDescription || "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: storeConfig.contactInfo?.phone || '+1 (555) 123-4567' })] })] }), _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" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.email || `hello@${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: [storeConfig.contactInfo?.address?.street || '123 Commerce Blvd', ",", _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Business City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '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: storeConfig.locations?.[0]?.openingHours || 'Mon - Fri: 9am - 6pm' }), !storeConfig.locations?.[0]?.openingHours && _jsx("p", { className: "text-white/80", children: "Sat: 10am - 4pm" })] })] })] }), _jsx("div", { className: "mt-12 relative z-10", children: _jsxs("div", { className: "flex gap-4", children: [storeConfig.branding.socialMedia?.instagram && (_jsx("a", { href: storeConfig.branding.socialMedia.instagram, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/instagram.svg", alt: "Instagram", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.twitter && (_jsx("a", { href: storeConfig.branding.socialMedia.twitter, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/twitter.svg", alt: "Twitter", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.facebook && (_jsx("a", { href: storeConfig.branding.socialMedia.facebook, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/facebook.svg", alt: "Facebook", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.youtube && (_jsx("a", { href: storeConfig.branding.socialMedia.youtube, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/youtube.svg", alt: "YouTube", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) }))] }) })] }), _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: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3 rounded-xl", children: errorMessage })), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: contactConfig?.contactForm?.title || "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" })] }), (contactConfig?.contactForm?.showPhone !== false) && (_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" })] }))] }), (contactConfig?.contactForm?.showSubject !== false) && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsx("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: contactConfig?.contactForm?.subjects?.length > 0 ? (contactConfig.contactForm.subjects.map((s, i) => (_jsx("option", { value: s.value, children: s.label }, i)))) : (_jsxs(_Fragment, { children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "reservations", children: "Table Reservation" }), _jsx("option", { value: "catering", children: "Gourmet Catering" }), _jsx("option", { value: "feedback", children: "Experience Feedback" }), _jsx("option", { value: "press", children: "Media & Press" })] })) })] })), _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" })] })) }) })] }))] })] }) }), (contactConfig?.contactForm?.showMap !== false) && (_jsx("section", { "data-section": "map", 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: contactConfig?.contactForm?.mapIframeUrl || "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: contactConfig?.contactForm?.mapTitle || storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: contactConfig?.contactForm?.mapAddress || storeConfig.contactInfo?.address?.street || '123 Commerce Blvd' })] })] }) }))] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { "data-section": "hero", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: contactConfig?.contactHeader?.backgroundImage || "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" }), _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: contactConfig?.contactHeader?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: contactConfig?.contactHeader?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { "data-section": "form", className: "container mx-auto px-4 py-12 relative max-w-6xl", children: _jsx("div", { className: "bg-white shadow-xl overflow-hidden border border-gray-100 ", children: _jsx("div", { className: "w-full p-8 md:p-12 bg-white relative", children: 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 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: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3", children: errorMessage })), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: contactConfig?.contactForm?.title || "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 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 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 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "john@example.com" })] }), (contactConfig?.contactForm?.showPhone !== false) && (_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 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "+1 (555) 000-0000" })] }))] }), (contactConfig?.contactForm?.showSubject !== false) && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsx("select", { id: "subject", className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", children: contactConfig?.contactForm?.subjects?.length > 0 ? (contactConfig.contactForm.subjects.map((s, i) => (_jsx("option", { value: s.value, children: s.label }, i)))) : (_jsxs(_Fragment, { children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "reservations", children: "Table Reservation" }), _jsx("option", { value: "catering", children: "Gourmet Catering" }), _jsx("option", { value: "feedback", children: "Experience Feedback" }), _jsx("option", { value: "press", children: "Media & Press" })] })) })] })), _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 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", 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" })] })) }) })] })) }) }) })] }));
 }

package/dist/layouts/motivational-speaker/pages/AboutPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,+BAmPvE"}
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqBhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,+BA+NvE"}

package/dist/layouts/motivational-speaker/pages/AboutPage.js

@@ -1,6 +1,6 @@
 '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 { Heart, 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';
@@ -8,6 +8,8 @@ import Image from 'next/image';
 import { SafeRichHtml } from '../../../components/rich-text/SafeRichHtml.js';
 import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
 import { storySectionImage, storySectionLabel, storySectionTitle, storyTeamSubtitle, storyTeamTitle, } from '../../shared/about-story-media.js';
+import { CLOTHING_DEFAULT_ABOUT_VALUES, resolveAboutPageValueItems, } from '../../booking/components/booking-about-defaults.js';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
 export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
@@ -26,29 +28,10 @@ export function AboutPage({ storeConfig: initialConfig }) {
     const storyTitle = storySectionTitle(storyConfig);
     const storyCaptionTitle = storyTeamTitle(storyConfig);
     const storyCaptionSubtitle = storyTeamSubtitle(storyConfig);
-    const values = [
-        {
-            icon: Award,
-            title: "Proven Results",
-            description: "Thousands of students have transformed their lives using our methods."
-        },
-        {
-            icon: Users,
-            title: "Community Led",
-            description: "Join a network of high achievers supporting each other's growth."
-        },
-        {
-            icon: Heart,
-            title: "Empowerment",
-            description: "Our mission is to give you the tools to take control of your destiny."
-        },
-        {
-            icon: Leaf,
-            title: "Ethical Growth",
-            description: "Success built on integrity, balance, and sustainable high performance."
-        }
-    ];
-    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(SafeRichHtml, { value: missionStatement || storeConfig.description, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" })] }) }) })] }), _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: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _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(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, 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: [
+    const valuesConfig = aboutConfig?.values || storeConfig.layoutConfig?.sections?.values;
+    const valuesItems = resolveAboutPageValueItems(storeConfig.layoutConfig, CLOTHING_DEFAULT_ABOUT_VALUES);
+    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(SafeRichHtml, { value: missionStatement || storeConfig.description, as: "div", className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light [&_p]:mb-0" })] }) }) })] }), _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: storyImage, alt: storyCaptionTitle, 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: storyCaptionTitle }), _jsx("p", { className: "text-white/80 text-sm", children: storyCaptionSubtitle })] })] })), _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: valuesConfig?.show !== false &&
+                                                valuesItems.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(DynamicIcon, { name: 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(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-600 text-sm leading-relaxed" })] })] }, 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: "Students Empowered", value: "25k+" },
                                 { label: "Hours of Content", value: "500+" },
                                 { label: "Global Events", value: "100+" },

package/dist/layouts/motivational-speaker/pages/ContactPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/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,+BA2S3E"}
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/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,+BAiM3E"}

package/dist/layouts/motivational-speaker/pages/ContactPage.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button } from '../../../components/ui/button.js';
-import { Mail, Phone, MapPin, Clock, Send, MessageSquare, CheckCircle } from 'lucide-react';
+import { Send, CheckCircle } from 'lucide-react';
 import { useStore } from '../../../lib/store-context.js';
 import Image from 'next/image';
 import { submitContact } from '../../../lib/services/contact.service.js';
@@ -49,5 +49,5 @@ export function ContactPage({ storeConfig: initialConfig }) {
             setErrorMessage('Failed to send message. Please try again.');
         }
     };
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { "data-section": "hero", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: contactConfig?.hero?.backgroundImage || "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" }), _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: contactConfig?.hero?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: contactConfig?.hero?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { "data-section": "form", 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: storeConfig.contactInfo?.phone || '+1 (555) 123-4567' })] })] }), _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" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.email || `hello@${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: [storeConfig.contactInfo?.address?.street || '123 Commerce Blvd', ",", _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Business City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '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: storeConfig.locations?.[0]?.openingHours || 'Mon - Fri: 9am - 6pm' }), !storeConfig.locations?.[0]?.openingHours && _jsx("p", { className: "text-white/80", children: "Sat: 10am - 4pm" })] })] })] }), _jsx("div", { className: "mt-12 relative z-10", children: _jsxs("div", { className: "flex gap-4", children: [storeConfig.branding.socialMedia?.instagram && (_jsx("a", { href: storeConfig.branding.socialMedia.instagram, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/instagram.svg", alt: "Instagram", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.twitter && (_jsx("a", { href: storeConfig.branding.socialMedia.twitter, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/twitter.svg", alt: "Twitter", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.facebook && (_jsx("a", { href: storeConfig.branding.socialMedia.facebook, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/facebook.svg", alt: "Facebook", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.youtube && (_jsx("a", { href: storeConfig.branding.socialMedia.youtube, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/youtube.svg", alt: "YouTube", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) }))] }) })] }), _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: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3 rounded-xl", children: errorMessage })), _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: "coaching", children: "Coaching Programs" }), _jsx("option", { value: "speaking", children: "Speaking Engagements" }), _jsx("option", { value: "events", children: "Workshop & Events" }), _jsx("option", { value: "media", children: "Media & Press" })] })] }), _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", { "data-section": "map", 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" })] })] }) })] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { "data-section": "hero", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: contactConfig?.hero?.backgroundImage || "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" }), _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: contactConfig?.hero?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: contactConfig?.hero?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { "data-section": "form", className: "container mx-auto px-4 py-12 relative max-w-6xl", children: _jsx("div", { className: "bg-white shadow-xl overflow-hidden border border-gray-100 ", children: _jsx("div", { className: "w-full p-8 md:p-12 bg-white relative", children: 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 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: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3", children: errorMessage })), _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 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 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 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 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 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: "coaching", children: "Coaching Programs" }), _jsx("option", { value: "speaking", children: "Speaking Engagements" }), _jsx("option", { value: "events", children: "Workshop & Events" }), _jsx("option", { value: "media", children: "Media & Press" })] })] }), _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 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", 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" })] })) }) })] })) }) }) })] }));
 }

package/dist/layouts/shared/components/StoreFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoreFooter.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/components/StoreFooter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAkBvD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BA6Y3E"}
+{"version":3,"file":"StoreFooter.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/components/StoreFooter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAiBvD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,+BA6W3E"}

package/dist/layouts/shared/components/StoreFooter.js

@@ -12,7 +12,7 @@ import { payazaInlineBindingProps } from '../../../preview/canvas/field-key.js';
 import { isEditorPreviewMode } from '../../../lib/utils/editor-preview.js';
 import { resolveStoreLink } from '../../../lib/layout-route-utils.js';
 import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
-import { BOOKING_DEFAULT_FOOTER_TAGLINE, resolveBookingFooterMainLinks, resolveBookingFooterSupportLinks, resolveBookingFooterPrimaryColumnTitle, } from '../../booking/components/booking-footer-defaults.js';
+import { BOOKING_DEFAULT_FOOTER_TAGLINE, resolveBookingFooterMainLinks, resolveBookingFooterPrimaryColumnTitle, } from '../../booking/components/booking-footer-defaults.js';
 export function StoreFooter({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
@@ -29,10 +29,8 @@ export function StoreFooter({ storeConfig: initialConfig }) {
         storeConfig.description ||
         BOOKING_DEFAULT_FOOTER_TAGLINE;
     const primaryColumnTitle = resolveBookingFooterPrimaryColumnTitle(footerConfig, storeConfig);
-    const supportColumnTitle = footerConfig?.supportColumnTitle || 'Support';
     const contactColumnTitle = footerConfig?.contactColumnTitle || 'Contact';
     const mainLinks = resolveBookingFooterMainLinks(footerConfig, storeConfig);
-    const supportLinks = resolveBookingFooterSupportLinks(footerConfig, storeConfig);
     const footerAddress = footerConfig?.address ||
         [
             storeConfig.contactInfo?.address?.street,
@@ -64,9 +62,9 @@ export function StoreFooter({ storeConfig: initialConfig }) {
             borderTopColor: borderPrimary,
             borderTopWidth: '1px',
             borderTopStyle: 'solid',
-        }, children: [_jsx("div", { className: "absolute inset-0 z-0 opacity-[0.4] pointer-events-none", children: _jsx(DotPattern, { color: isDarkTheme ? "#3b82f6" : "#94a3b8", cx: 1, cy: 1, cr: 1, width: 20, height: 20 }) }), _jsxs("div", { className: "relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8 mb-16", children: [_jsxs("div", { className: "lg:col-span-4 space-y-6", children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "inline-block", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-10 w-10", alt: storeConfig.name }), !getLogoUrl(storeConfig) && (_jsx("span", { className: cn("text-2xl font-extrabold tracking-tight", isDarkTheme ? "text-white" : ""), style: {
+        }, children: [_jsx("div", { className: "absolute inset-0 z-0 opacity-[0.4] pointer-events-none", children: _jsx(DotPattern, { color: isDarkTheme ? "#3b82f6" : "#94a3b8", cx: 1, cy: 1, cr: 1, width: 20, height: 20 }) }), _jsxs("div", { className: "relative z-10 container mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-6", children: [_jsxs("div", { className: "grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-12 lg:gap-x-12 lg:gap-y-8 lg:items-start mb-10", children: [_jsxs("div", { className: "sm:col-span-2 lg:col-span-5 space-y-4", children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "inline-block", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-10 w-10", alt: storeConfig.name }), !getLogoUrl(storeConfig) && (_jsx("span", { className: cn("text-2xl font-extrabold tracking-tight", isDarkTheme ? "text-white" : ""), style: {
                                                         color: isDarkTheme ? undefined : primaryColor,
-                                                    }, children: storeConfig.name }))] }) }), _jsx("p", { className: cn("text-base leading-relaxed max-w-sm", isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("span", { ...inline(['tagline']), children: _jsx(RichTextExcerpt, { value: tagline, as: "span" }) }) }), showSocial && storeConfig.branding.socialMedia && (_jsxs("div", { className: "flex items-center gap-4 pt-2", children: [storeConfig.branding.socialMedia.facebook && (_jsx("a", { href: storeConfig.branding.socialMedia.facebook, target: "_blank", rel: "noopener noreferrer", className: cn("h-10 w-10 flex items-center justify-center rounded-full transition-all duration-300 transform hover:scale-110 shadow-sm", isDarkTheme
+                                                    }, children: storeConfig.name }))] }) }), String(tagline || '').trim() ? (_jsx("p", { className: cn("text-sm leading-relaxed max-w-md", isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("span", { ...inline(['tagline']), children: _jsx(RichTextExcerpt, { value: tagline, as: "span" }) }) })) : null, showSocial && storeConfig.branding.socialMedia && (_jsxs("div", { className: "flex items-center gap-4 pt-2", children: [storeConfig.branding.socialMedia.facebook && (_jsx("a", { href: storeConfig.branding.socialMedia.facebook, target: "_blank", rel: "noopener noreferrer", className: cn("h-10 w-10 flex items-center justify-center rounded-full transition-all duration-300 transform hover:scale-110 shadow-sm", isDarkTheme
                                                     ? "bg-white/10 border border-white/20 text-gray-400 hover:text-white hover:border-white/40"
                                                     : "bg-white border border-gray-200 text-gray-500 hover:text-white hover:border-transparent"), style: {
                                                     '--hover-bg': primaryColor
@@ -142,5 +140,5 @@ export function StoreFooter({ storeConfig: initialConfig }) {
                                                         e.currentTarget.style.color = '#6b7280';
                                                         e.currentTarget.style.borderColor = '#e5e7eb';
                                                     }
-                                                }, children: _jsx(Share2, { className: "h-5 w-5" }) }))] }))] }), _jsxs("div", { className: "lg:col-span-8 grid grid-cols-2 sm:grid-cols-3 gap-8", children: [_jsxs("div", { children: [_jsx("h4", { className: cn("font-bold text-lg mb-6", isDarkTheme ? "text-white" : "text-gray-900"), children: _jsx("span", { ...inline(['primaryColumnTitle']), children: primaryColumnTitle }) }), _jsx("ul", { className: "space-y-4", children: mainLinks.map((link, index) => (_jsx("li", { children: _jsx(Link, { href: resolveStoreLink(link.href, storeConfig.slug), className: cn("transition-colors flex items-center group", isDarkTheme ? "text-gray-400 hover:text-white" : "text-gray-500 hover:text-gray-900"), children: _jsxs("span", { className: "relative", children: [_jsx("span", { ...inline(['mainLinks', String(index), 'label']), children: link.label }), _jsx("span", { className: cn("absolute -bottom-1 left-0 w-0 h-0.5 transition-all group-hover:w-full", isDarkTheme ? "bg-white" : "bg-gray-900") })] }) }) }, link.id || `${index}-${link.href}`))) })] }), _jsxs("div", { children: [_jsx("h4", { className: cn("font-bold text-lg mb-6", isDarkTheme ? "text-white" : "text-gray-900"), children: _jsx("span", { ...inline(['supportColumnTitle']), children: supportColumnTitle }) }), _jsx("ul", { className: "space-y-4", children: supportLinks.map((link, index) => (_jsx("li", { children: _jsx(Link, { href: resolveStoreLink(link.href, storeConfig.slug), className: cn("transition-colors group flex items-center", isDarkTheme ? "text-gray-400 hover:text-white" : "text-gray-500 hover:text-gray-900"), children: _jsxs("span", { className: "relative", children: [_jsx("span", { ...inline(['supportLinks', String(index), 'label']), children: link.label }), _jsx("span", { className: cn("absolute -bottom-1 left-0 w-0 h-0.5 transition-all group-hover:w-full", isDarkTheme ? "bg-white" : "bg-gray-900") })] }) }) }, link.id || `support-${index}-${link.href}`))) })] }), _jsxs("div", { children: [_jsx("h4", { className: cn("font-bold text-lg mb-6", isDarkTheme ? "text-white" : "text-gray-900"), children: _jsx("span", { ...inline(['contactColumnTitle']), children: contactColumnTitle }) }), _jsxs("ul", { className: "space-y-4", children: [footerAddress && (_jsx("li", { className: cn("text-sm leading-relaxed whitespace-pre-line", isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("span", { ...inline(['address']), children: footerAddress }) })), footerEmail && (_jsx("li", { className: cn(isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("a", { href: `mailto:${footerEmail}`, className: cn("transition-colors", isDarkTheme ? "hover:text-white" : "hover:text-gray-900"), children: _jsx("span", { ...inline(['email']), children: footerEmail }) }) })), footerPhone && (_jsx("li", { className: cn(isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("a", { href: `tel:${footerPhone.replace(/\D/g, '')}`, className: cn("transition-colors", isDarkTheme ? "hover:text-white" : "hover:text-gray-900"), children: _jsx("span", { ...inline(['phone']), children: footerPhone }) }) }))] })] })] })] }), _jsx("div", { className: cn("pt-8 border-t flex flex-col md:flex-row justify-between items-center gap-4", isDarkTheme ? "border-white/10" : "border-slate-200"), children: _jsx("p", { className: cn("text-sm font-medium", isDarkTheme ? "text-gray-500" : "text-gray-500"), children: _jsx("span", { ...inline(['copyrightText']), children: copyrightLine }) }) })] })] }));
+                                                }, children: _jsx(Share2, { className: "h-5 w-5" }) }))] }))] }), _jsxs("div", { className: "lg:col-span-3 lg:pl-8", children: [_jsx("h4", { className: cn("font-bold text-base mb-4 tracking-tight", isDarkTheme ? "text-white" : "text-gray-900"), children: _jsx("span", { ...inline(['primaryColumnTitle']), children: primaryColumnTitle }) }), _jsx("ul", { className: "space-y-3", children: mainLinks.map((link, index) => (_jsx("li", { children: _jsx(Link, { href: resolveStoreLink(link.href, storeConfig.slug), className: cn("text-sm transition-colors flex items-center group", isDarkTheme ? "text-gray-400 hover:text-white" : "text-gray-500 hover:text-gray-900"), children: _jsxs("span", { className: "relative", children: [_jsx("span", { ...inline(['mainLinks', String(index), 'label']), children: link.label }), _jsx("span", { className: cn("absolute -bottom-1 left-0 w-0 h-0.5 transition-all group-hover:w-full", isDarkTheme ? "bg-white" : "bg-gray-900") })] }) }) }, link.id || `${index}-${link.href}`))) })] }), _jsxs("div", { className: "lg:col-span-4", children: [_jsx("h4", { className: cn("font-bold text-base mb-4 tracking-tight", isDarkTheme ? "text-white" : "text-gray-900"), children: _jsx("span", { ...inline(['contactColumnTitle']), children: contactColumnTitle }) }), _jsxs("ul", { className: "space-y-3", children: [footerAddress && (_jsx("li", { className: cn("text-sm leading-relaxed whitespace-pre-line", isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("span", { ...inline(['address']), children: footerAddress }) })), footerEmail && (_jsx("li", { className: cn("text-sm", isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("a", { href: `mailto:${footerEmail}`, className: cn("transition-colors break-all", isDarkTheme ? "hover:text-white" : "hover:text-gray-900"), children: _jsx("span", { ...inline(['email']), children: footerEmail }) }) })), footerPhone && (_jsx("li", { className: cn("text-sm", isDarkTheme ? "text-gray-400" : "text-gray-500"), children: _jsx("a", { href: `tel:${footerPhone.replace(/\D/g, '')}`, className: cn("transition-colors", isDarkTheme ? "hover:text-white" : "hover:text-gray-900"), children: _jsx("span", { ...inline(['phone']), children: footerPhone }) }) }))] })] })] }), _jsx("div", { className: cn("pt-6 border-t flex flex-col md:flex-row justify-between items-center gap-4", isDarkTheme ? "border-white/10" : "border-slate-200"), children: _jsx("p", { className: cn("text-sm font-medium", isDarkTheme ? "text-gray-500" : "text-gray-500"), children: _jsx("span", { ...inline(['copyrightText']), children: copyrightLine }) }) })] })] }));
 }

package/dist/layouts/shared/components/StoreHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoreHeader.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/components/StoreHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AA8BvD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAWD,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,aAAiB,EAAE,EAAE,gBAAgB,+BA8d9F"}
+{"version":3,"file":"StoreHeader.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/components/StoreHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAgCvD,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAWD,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,aAAiB,EAAE,EAAE,gBAAgB,+BA4iB9F"}

package/dist/layouts/shared/components/StoreHeader.js

@@ -28,12 +28,14 @@ const getNavIcon = (label) => {
         return LayoutGrid;
     return null;
 };
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { usePathname } from 'next/navigation';
 import { cn, formatStoreDisplayName } from '../../../lib/utils/index.js';
 import { useAuth } from '../../../lib/auth-context.js';
 import { StoreLogo } from '../../../components/ui/store-logos.js';
 import { useStore } from '../../../lib/store-context.js';
+import { resolveStoreHeaderNavLinks } from '../../../lib/utils/footer-nav-defaults.js';
 import { getLogoUrl } from '../../../lib/utils/asset-helpers.js';
 import { AvatarImage } from '../../../components/ui/avatar-image.js';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -46,6 +48,9 @@ function headerNavLinkClass(isDarkTheme) {
 export function StoreHeader({ storeConfig: initialConfig, cartItemCount = 0 }) {
     const { store, wishlist, setIsCartOpen, cartCount: storeCartCount } = useStore();
     const storeConfig = store || initialConfig;
+    const isClothingLayout = storeConfig.layout === 'clothing';
+    const catalogueMenuRadius = isClothingLayout ? 'rounded-sm' : 'rounded-2xl';
+    const catalogueItemRadius = isClothingLayout ? 'rounded-sm' : 'rounded-xl';
     const wishlistCount = wishlist.length;
     const displayCartCount = storeCartCount > 0 ? storeCartCount : cartItemCount;
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -57,6 +62,9 @@ export function StoreHeader({ storeConfig: initialConfig, cartItemCount = 0 }) {
     const { isAuthenticated, user, openLogin } = useAuth();
     const [mounted, setMounted] = useState(false);
     const searchInputRef = useRef(null);
+    const catalogueRef = useRef(null);
+    const catalogueButtonRef = useRef(null);
+    const [catalogueAnchor, setCatalogueAnchor] = useState(null);
     // Filter to show only parent categories (no parentId)
     const allCategories = storeConfig.categories || [];
     const parentCategories = allCategories.filter(cat => !cat.parentId);
@@ -73,9 +81,42 @@ export function StoreHeader({ storeConfig: initialConfig, cartItemCount = 0 }) {
             searchInputRef.current.focus();
         }
     }, [searchOpen]);
+    useEffect(() => {
+        if (!isCatalogueOpen)
+            return;
+        const onPointerDown = (event) => {
+            if (catalogueRef.current && !catalogueRef.current.contains(event.target)) {
+                setIsCatalogueOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        return () => document.removeEventListener('mousedown', onPointerDown);
+    }, [isCatalogueOpen]);
+    const syncCatalogueAnchor = useCallback(() => {
+        const el = catalogueButtonRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        setCatalogueAnchor({ top: rect.bottom + 6, left: rect.left + rect.width / 2 });
+    }, []);
+    useEffect(() => {
+        if (!isCatalogueOpen) {
+            setCatalogueAnchor(null);
+            return;
+        }
+        syncCatalogueAnchor();
+        const onLayout = () => syncCatalogueAnchor();
+        window.addEventListener('scroll', onLayout, true);
+        window.addEventListener('resize', onLayout);
+        return () => {
+            window.removeEventListener('scroll', onLayout, true);
+            window.removeEventListener('resize', onLayout);
+        };
+    }, [isCatalogueOpen, syncCatalogueAnchor]);
     const primaryColor = storeConfig.branding.primaryColor;
     const storeDisplayName = formatStoreDisplayName(storeConfig.name);
     const isDarkTheme = storeConfig.branding.theme === 'dark' || storeConfig.type === 'electronics';
+    const { allLinks: headerNavLinks, centerLinks: centerNavLinks, contactLink } = resolveStoreHeaderNavLinks(storeConfig);
     if (!mounted) {
         return null;
     }
@@ -84,8 +125,8 @@ export function StoreHeader({ storeConfig: initialConfig, cartItemCount = 0 }) {
         : scrolled ? 'rgba(255, 255, 255, 0.98)' : 'rgba(255, 255, 255, 0.9)';
     return (_jsxs(_Fragment, { children: [_jsx("header", { "data-section": "header", className: cn("sticky top-0 z-[60] w-full transition-all duration-500 backdrop-blur-xl border-b", scrolled
                     ? "shadow-lg border-gray-100 dark:border-white/5 py-0 sm:py-1"
-                    : "border-transparent py-0 sm:py-2.5"), style: { backgroundColor: headerBg }, children: _jsx("div", { className: "container mx-auto px-3 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex h-12 items-center gap-2 sm:gap-3 sm:h-14 lg:h-16", children: [_jsx("div", { className: "flex items-center flex-shrink-0 z-20", children: _jsxs(Link, { href: `/${storeConfig.slug}`, className: "flex items-center gap-3 group", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-8 w-8 transition-transform duration-500 group-hover:scale-105 sm:h-9 sm:w-9 lg:h-10 lg:w-10", alt: storeDisplayName }), !getLogoUrl(storeConfig) && (_jsx("span", { className: cn("text-xl font-bold tracking-tight transition-colors hidden xl:block", isDarkTheme ? "text-white" : "text-gray-900"), children: storeDisplayName }))] }) }), _jsx("nav", { className: "hidden lg:flex flex-1 min-w-0 items-center justify-center gap-1 overflow-hidden px-2 pr-4 mr-1", children: (() => {
-                                    const menuItems = storeConfig.navigation.main;
+                    : "border-transparent py-0 sm:py-2.5"), style: { backgroundColor: headerBg }, children: _jsx("div", { className: "container mx-auto px-3 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex h-12 items-center gap-2 sm:gap-3 sm:h-14 lg:h-16", children: [_jsx("div", { className: "flex items-center flex-shrink-0 z-20", children: _jsxs(Link, { href: `/${storeConfig.slug}`, className: "flex items-center gap-3 group", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-8 w-8 transition-transform duration-500 group-hover:scale-105 sm:h-9 sm:w-9 lg:h-10 lg:w-10", alt: storeDisplayName }), !getLogoUrl(storeConfig) && (_jsx("span", { className: cn("text-xl font-bold tracking-tight transition-colors hidden xl:block", isDarkTheme ? "text-white" : "text-gray-900"), children: storeDisplayName }))] }) }), _jsx("nav", { className: "hidden lg:flex flex-1 min-w-0 items-center justify-center gap-1 overflow-hidden px-2 pr-2 mr-1", children: (() => {
+                                    const menuItems = centerNavLinks;
                                     const categories = parentCategories;
                                     // Logic to determine how many categories to show directly
                                     // Max total top-level items (menu + categories)
@@ -96,12 +137,25 @@ export function StoreHeader({ storeConfig: initialConfig, cartItemCount = 0 }) {
                                     const overflowCategories = categories.slice(categoriesToShowCount);
                                     return (_jsxs(_Fragment, { children: [menuItems.map((item, index) => {
                                                 return (_jsx(Link, { href: `/${storeConfig.slug}${item.href}`, className: headerNavLinkClass(isDarkTheme), children: item.label }, `nav-${index}-${item.href}`));
-                                            }), categoriesToDisplay.map((cat) => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: headerNavLinkClass(isDarkTheme), children: cat.name }, `cat-direct-${cat.id}`))), overflowCategories.length > 0 && (_jsxs("div", { className: "relative group", onMouseEnter: () => setIsCatalogueOpen(true), onMouseLeave: () => setIsCatalogueOpen(false), children: [_jsxs("button", { className: headerNavLinkClass(isDarkTheme), children: [categoriesToDisplay.length > 0 ? "More" : "Catalogue", _jsx(ChevronDown, { className: cn("w-3.5 h-3.5 transition-transform duration-300", isCatalogueOpen && "rotate-180") })] }), _jsx(AnimatePresence, { children: isCatalogueOpen && (_jsx(motion.div, { initial: { opacity: 0, y: 10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.95 }, transition: { duration: 0.2 }, className: cn("absolute top-full left-1/2 -translate-x-1/2 mt-2 w-64 p-3 rounded-2xl shadow-2xl border backdrop-blur-2xl z-50", isDarkTheme ? "bg-black/90 border-white/10" : "bg-white/95 border-gray-100"), children: _jsx("div", { className: "grid gap-1 overflow-y-auto max-h-[70vh]", children: overflowCategories.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: cn("flex items-center justify-between px-4 py-3 rounded-xl transition-all group/item", isDarkTheme ? "hover:bg-white/5" : "hover:bg-gray-50"), onClick: () => setIsCatalogueOpen(false), children: [_jsx("span", { className: cn("text-sm font-medium", isDarkTheme ? "text-gray-300 group-hover/item:text-white" : "text-gray-600 group-hover/item:text-black"), children: cat.name }), _jsx(ChevronRight, { className: "w-4 h-4 opacity-0 -translate-x-2 group-hover/item:opacity-100 group-hover/item:translate-x-0 transition-all text-gray-400" })] }, `cat-overflow-${cat.id}`))) }) })) })] }))] }));
-                                })() }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 lg:gap-2 flex-shrink-0 z-20 ml-auto lg:ml-0 lg:pl-1", children: [_jsx(Button, { variant: "ghost", size: "icon", className: cn("h-9 w-9 sm:h-10 sm:w-10 rounded-full transition-all relative", isDarkTheme ? "hover:bg-white/10 text-gray-300" : "hover:bg-gray-100 text-gray-600", searchOpen && "bg-transparent shadow-none"), onClick: () => setSearchOpen(true), children: _jsx(Search, { className: "h-5 w-5" }) }), storeConfig.features.wishlist && (_jsx(Link, { href: `/${storeConfig.slug}/wishlist`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 sm:h-10 sm:w-10 relative rounded-full group hover:bg-red-50 dark:hover:bg-red-900/10", children: [_jsx(Heart, { className: cn("h-5 w-5 transition-all group-hover:scale-110", wishlistCount > 0 && "fill-red-500 text-red-500") }), wishlistCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: wishlistCount }))] }) })), storeConfig.layout === 'motivational-speaker' && isAuthenticated && (_jsx(Link, { href: `/${storeConfig.slug}/account?tab=learning`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: cn("h-9 w-9 sm:h-10 sm:w-10 relative rounded-full group transition-all", isDarkTheme ? "hover:bg-blue-900/20 text-blue-400" : "hover:bg-blue-50 text-blue-600"), children: [_jsx(BookOpen, { className: "h-5 w-5 transition-all group-hover:scale-110" }), _jsx("span", { className: "sr-only", children: "My Learning" })] }) })), storeConfig.features.cart && (_jsxs(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setIsCartOpen(true), className: "h-9 w-9 sm:h-10 sm:w-10 relative rounded-full group hover:bg-gray-100 dark:hover:bg-white/10", "aria-label": "Open shopping bag", children: [_jsx(ShoppingCart, { className: "h-5 w-5 group-hover:scale-110 transition-all" }), displayCartCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: displayCartCount }))] })), isAuthenticated ? (_jsx(Link, { href: `/${storeConfig.slug}/account`, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 sm:h-10 sm:w-10 rounded-full overflow-hidden border-2 border-transparent hover:border-gray-200 transition-all", children: _jsx(AvatarImage, { src: user?.avatar, alt: "User", size: 32 }) }) })) : (_jsx(Button, { className: "ml-1 hidden sm:block h-10 px-6 rounded-full font-bold text-xs uppercase tracking-widest transition-all shadow-md hover:shadow-lg active:scale-95", style: { backgroundColor: primaryColor, color: 'white' }, onClick: () => openLogin({
+                                            }), categoriesToDisplay.map((cat) => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: headerNavLinkClass(isDarkTheme), children: cat.name }, `cat-direct-${cat.id}`))), overflowCategories.length > 0 && (_jsxs("div", { ref: catalogueRef, className: "relative", onMouseEnter: () => setIsCatalogueOpen(true), onMouseLeave: () => setIsCatalogueOpen(false), children: [_jsxs("button", { ref: catalogueButtonRef, type: "button", "aria-expanded": isCatalogueOpen, "aria-haspopup": "menu", className: headerNavLinkClass(isDarkTheme), onClick: () => {
+                                                            setIsCatalogueOpen((open) => {
+                                                                const next = !open;
+                                                                if (next)
+                                                                    syncCatalogueAnchor();
+                                                                return next;
+                                                            });
+                                                        }, children: [categoriesToDisplay.length > 0 ? "More" : "Catalogue", _jsx(ChevronDown, { className: cn("w-3.5 h-3.5 transition-transform duration-300", isCatalogueOpen && "rotate-180") })] }), mounted &&
+                                                        typeof document !== 'undefined' &&
+                                                        isCatalogueOpen &&
+                                                        catalogueAnchor &&
+                                                        createPortal(_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: { opacity: 0, y: 8, scale: 0.98 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 8, scale: 0.98 }, transition: { duration: 0.15 }, style: { top: catalogueAnchor.top, left: catalogueAnchor.left }, className: cn('fixed z-[100] w-64 -translate-x-1/2 p-3 shadow-2xl border backdrop-blur-2xl', catalogueMenuRadius, isDarkTheme ? 'bg-black/90 border-white/10' : 'bg-white/95 border-gray-100'), children: _jsx("div", { className: "grid gap-1 overflow-y-auto max-h-[70vh]", children: overflowCategories.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: cn('flex items-center justify-between px-4 py-3 transition-all group/item', catalogueItemRadius, isDarkTheme ? 'hover:bg-white/5' : 'hover:bg-gray-50'), onClick: () => setIsCatalogueOpen(false), children: [_jsx("span", { className: cn('text-sm font-medium', isDarkTheme
+                                                                                    ? 'text-gray-300 group-hover/item:text-white'
+                                                                                    : 'text-gray-600 group-hover/item:text-black'), children: cat.name }), _jsx(ChevronRight, { className: "w-4 h-4 opacity-0 -translate-x-2 group-hover/item:opacity-100 group-hover/item:translate-x-0 transition-all text-gray-400" })] }, `cat-overflow-${cat.id}`))) }) }) }), document.body)] }))] }));
+                                })() }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 lg:gap-2 flex-shrink-0 z-30 ml-auto lg:ml-0 lg:pl-1 bg-inherit", children: [contactLink && (_jsx(Link, { href: `/${storeConfig.slug}${contactLink.href}`, className: cn(headerNavLinkClass(isDarkTheme), 'hidden lg:inline-flex flex-shrink-0 relative z-40 mr-0.5'), children: contactLink.label })), _jsx(Button, { variant: "ghost", size: "icon", className: cn("h-9 w-9 sm:h-10 sm:w-10 rounded-full transition-all relative", isDarkTheme ? "hover:bg-white/10 text-gray-300" : "hover:bg-gray-100 text-gray-600", searchOpen && "bg-transparent shadow-none"), onClick: () => setSearchOpen(true), children: _jsx(Search, { className: "h-5 w-5" }) }), storeConfig.features.wishlist && (_jsx(Link, { href: `/${storeConfig.slug}/wishlist`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 sm:h-10 sm:w-10 relative rounded-full group hover:bg-red-50 dark:hover:bg-red-900/10", children: [_jsx(Heart, { className: cn("h-5 w-5 transition-all group-hover:scale-110", wishlistCount > 0 && "fill-red-500 text-red-500") }), wishlistCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: wishlistCount }))] }) })), storeConfig.layout === 'motivational-speaker' && isAuthenticated && (_jsx(Link, { href: `/${storeConfig.slug}/account?tab=learning`, children: _jsxs(Button, { variant: "ghost", size: "icon", className: cn("h-9 w-9 sm:h-10 sm:w-10 relative rounded-full group transition-all", isDarkTheme ? "hover:bg-blue-900/20 text-blue-400" : "hover:bg-blue-50 text-blue-600"), children: [_jsx(BookOpen, { className: "h-5 w-5 transition-all group-hover:scale-110" }), _jsx("span", { className: "sr-only", children: "My Learning" })] }) })), storeConfig.features.cart && (_jsxs(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setIsCartOpen(true), className: "h-9 w-9 sm:h-10 sm:w-10 relative rounded-full group hover:bg-gray-100 dark:hover:bg-white/10", "aria-label": "Open shopping bag", children: [_jsx(ShoppingCart, { className: "h-5 w-5 group-hover:scale-110 transition-all" }), displayCartCount > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 h-4 w-4 text-[9px] font-bold text-white rounded-full flex items-center justify-center shadow-lg", style: { backgroundColor: primaryColor }, children: displayCartCount }))] })), isAuthenticated ? (_jsx(Link, { href: `/${storeConfig.slug}/account`, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 sm:h-10 sm:w-10 rounded-full overflow-hidden border-2 border-transparent hover:border-gray-200 transition-all", children: _jsx(AvatarImage, { src: user?.avatar, alt: "User", size: 32 }) }) })) : (_jsx(Button, { className: "ml-1 hidden sm:block h-10 px-6 rounded-full font-bold text-xs uppercase tracking-widest transition-all shadow-md hover:shadow-lg active:scale-95", style: { backgroundColor: primaryColor, color: 'white' }, onClick: () => openLogin({
                                             callbackUrl: pathname || `/${storeConfig.slug}`,
                                         }), children: storeConfig.headerConfig?.loginButtonText || 'Log In' })), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-9 w-9 sm:h-10 sm:w-10 rounded-full", onClick: () => setMobileMenuOpen(true), children: _jsx(Menu, { className: "h-6 w-6" }) })] })] }) }) }), _jsx(AnimatePresence, { children: searchOpen && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-[100] flex flex-col items-center justify-start pt-24 px-4 bg-white/80 dark:bg-black/80 backdrop-blur-2xl", children: _jsxs(motion.div, { initial: { y: -20, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -20, opacity: 0 }, className: "w-full max-w-3xl relative", children: [_jsxs("div", { className: "relative flex items-center group", children: [_jsx(Search, { className: "absolute left-6 h-6 w-6 text-gray-400 group-focus-within:text-black dark:group-focus-within:text-white transition-colors" }), _jsx("input", { ref: searchInputRef, type: "text", placeholder: storeConfig.headerConfig?.searchPlaceholder || "Search products, categories, guides...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: cn("w-full pl-16 pr-24 py-6 text-2xl md:text-3xl font-light bg-transparent border-b-2 border-gray-200 dark:border-white/10 focus:outline-none focus:border-black dark:focus:border-white transition-all", isDarkTheme ? "text-white placeholder-gray-600" : "text-black placeholder-gray-300"), onKeyDown: (e) => e.key === 'Escape' && setSearchOpen(false) }), _jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [searchQuery && (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => setSearchQuery(''), className: "h-10 w-10 rounded-full", children: _jsx(X, { className: "h-5 w-5 text-gray-400" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSearchOpen(false), className: "text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-black dark:hover:text-white", children: "Esc" })] })] }), _jsxs("div", { className: "mt-12 grid grid-cols-1 md:grid-cols-2 gap-12", children: [_jsxs("div", { className: "space-y-6", children: [_jsx("h4", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-gray-400", children: "Quick Links" }), _jsx("div", { className: "flex flex-wrap gap-2", children: ['Courses', 'Mentorship', 'Free Guides', 'Memberships', 'Contact'].map((tag) => (_jsx("button", { className: cn("px-4 py-2 rounded-full text-sm border transition-all", isDarkTheme
                                                         ? "border-white/10 hover:border-white text-gray-400 hover:text-white"
-                                                        : "border-gray-200 hover:border-black text-gray-600 hover:text-black"), children: tag }, tag))) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("h4", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-gray-400", children: "Popular Categories" }), _jsx("div", { className: "grid gap-3", children: parentCategories.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: "flex items-center gap-3 group", onClick: () => setSearchOpen(false), children: [_jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-100 dark:bg-white/5 flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(ChevronRight, { className: "w-4 h-4 text-gray-400" }) }), _jsx("span", { className: "text-lg font-medium text-gray-500 group-hover:text-black dark:group-hover:text-white transition-colors", children: cat.name })] }, cat.id))) })] })] })] }) })) }), _jsx(AnimatePresence, { children: mobileMenuOpen && (_jsxs("div", { className: "fixed inset-0 z-[100] lg:hidden", children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "absolute inset-0 bg-black/60 backdrop-blur-md", onClick: () => setMobileMenuOpen(false) }), _jsxs(motion.nav, { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' }, transition: { type: "spring", damping: 25, stiffness: 200 }, className: cn("absolute right-0 top-0 bottom-0 w-[300px] shadow-2xl p-8 flex flex-col", isDarkTheme ? "bg-black text-white" : "bg-white text-black"), children: [_jsxs("div", { className: "flex items-center justify-between mb-12", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-8 w-8" }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setMobileMenuOpen(false), children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "flex flex-col gap-8", children: [storeConfig.navigation.main.map((item, i) => {
+                                                        : "border-gray-200 hover:border-black text-gray-600 hover:text-black"), children: tag }, tag))) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("h4", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-gray-400", children: "Popular Categories" }), _jsx("div", { className: "grid gap-3", children: parentCategories.map((cat) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: "flex items-center gap-3 group", onClick: () => setSearchOpen(false), children: [_jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-100 dark:bg-white/5 flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(ChevronRight, { className: "w-4 h-4 text-gray-400" }) }), _jsx("span", { className: "text-lg font-medium text-gray-500 group-hover:text-black dark:group-hover:text-white transition-colors", children: cat.name })] }, cat.id))) })] })] })] }) })) }), _jsx(AnimatePresence, { children: mobileMenuOpen && (_jsxs("div", { className: "fixed inset-0 z-[100] lg:hidden", children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "absolute inset-0 bg-black/60 backdrop-blur-md", onClick: () => setMobileMenuOpen(false) }), _jsxs(motion.nav, { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' }, transition: { type: "spring", damping: 25, stiffness: 200 }, className: cn("absolute right-0 top-0 bottom-0 w-[300px] shadow-2xl p-8 flex flex-col", isDarkTheme ? "bg-black text-white" : "bg-white text-black"), children: [_jsxs("div", { className: "flex items-center justify-between mb-12", children: [_jsx(StoreLogo, { storeConfig: storeConfig, className: "h-8 w-8" }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setMobileMenuOpen(false), children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "flex flex-col gap-8", children: [headerNavLinks.map((item, i) => {
                                             return (_jsx(Link, { href: `/${storeConfig.slug}${item.href}`, className: "text-3xl font-bold tracking-tight hover:opacity-50 transition-opacity flex items-center gap-4", onClick: () => setMobileMenuOpen(false), children: item.label }, i));
                                         }), _jsxs("div", { className: "pt-8 space-y-4 border-t border-gray-100 dark:border-white/10", children: [_jsx("h4", { className: "text-[10px] font-black uppercase tracking-[0.3em] text-gray-400", children: "Catalogue" }), _jsx("div", { className: "grid gap-4", children: parentCategories.map((cat) => (_jsx(Link, { href: `/${storeConfig.slug}/categories/${cat.slug}`, className: "text-lg font-medium text-gray-500 hover:text-black dark:hover:text-white hover:underline underline-offset-4 transition-colors", onClick: () => setMobileMenuOpen(false), children: cat.name }, cat.id))) })] })] }), _jsxs("div", { className: "mt-auto pt-8 border-t border-gray-100 dark:border-white/10 flex flex-col gap-6", children: [!isAuthenticated ? (_jsx(Button, { className: "w-full h-14 rounded-full font-bold text-sm uppercase tracking-widest shadow-xl", style: { backgroundColor: primaryColor, color: 'white' }, onClick: () => {
                                                 setMobileMenuOpen(false);

package/dist/layouts/shared/pages/CheckoutPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/pages/CheckoutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAiChD,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AA8LD,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,EAAE,iBAAiB,+BA+rD9D"}
+{"version":3,"file":"CheckoutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/pages/CheckoutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAiChD,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AA8LD,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,EAAE,iBAAiB,+BAomD9D"}