storefront-layouts 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/layouts/clothing/components/ClothingHomePage.d.ts.map +1 -1
- package/dist/layouts/clothing/components/ClothingHomePage.js +4 -2
- package/dist/layouts/clothing-minimal/components/ClothingHomePageMinimal.d.ts.map +1 -1
- package/dist/layouts/clothing-minimal/components/ClothingHomePageMinimal.js +9 -12
- package/dist/layouts/clothing-minimal/pages/ProductsPage.d.ts.map +1 -1
- package/dist/layouts/clothing-minimal/pages/ProductsPage.js +3 -1
- package/dist/lib/payaza-checkout.d.ts +1 -1
- package/dist/lib/payaza-checkout.js +2 -2
- package/dist/styles/index.css +15 -0
- package/package.json +1 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClothingHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/components/ClothingHomePage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"ClothingHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/components/ClothingHomePage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAgBvD,UAAU,qBAAqB;IAC7B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAaD,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CAsvBrF"}
|
|
@@ -13,6 +13,7 @@ import { toStoreHref } from '../../../lib/utils/url-helpers';
|
|
|
13
13
|
import { shouldUseAPI } from '../../../lib/utils/demo-detection';
|
|
14
14
|
import { useStore } from '../../../lib/store-context';
|
|
15
15
|
import { DynamicIcon } from '../../../components/ui/dynamic-icon';
|
|
16
|
+
import { SafeRichHtml } from '../../../components/rich-text/SafeRichHtml';
|
|
16
17
|
export function ClothingHomePage({ storeConfig: initialConfig }) {
|
|
17
18
|
// Use the store from context which is updated in real-time by the editor
|
|
18
19
|
const { store } = useStore();
|
|
@@ -226,7 +227,7 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
|
|
|
226
227
|
};
|
|
227
228
|
return (_jsxs("div", { className: "min-h-screen bg-white", children: [(layoutConfig?.sections?.hero?.show !== false || layoutConfig?.hero?.show !== false) && heroSlides.length > 0 && (_jsxs("section", { "data-section": "hero", className: "relative h-[85vh] w-full overflow-hidden", onMouseEnter: () => setIsAutoPlaying(false), onMouseLeave: () => layoutConfig?.hero?.autoPlay !== false && setIsAutoPlaying(true), children: [_jsx("div", { className: "relative h-full w-full", children: heroSlides.map((slide, index) => (_jsxs("div", { className: `absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0'}`, children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(ImageWithFallback, { src: slide.image, alt: slide.title, className: "absolute inset-0 h-full w-full object-cover", skeletonAspectRatio: "16/9", priority: index === currentSlide }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/50 via-black/20 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center z-20", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: `max-w-3xl text-white space-y-8 transition-all duration-1000 ${index === currentSlide
|
|
228
229
|
? 'opacity-100 translate-y-0'
|
|
229
|
-
: 'opacity-0 translate-y-8'}`, children: [_jsxs("div", { children: [slide.badge && (_jsx("span", { className: "inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full text-sm font-medium border border-white/30 uppercase tracking-wider mb-4", children: slide.badge })), _jsx("h1", { className: "text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight tracking-tight mb-4", children: slide.title }), _jsx("div", { className: "h-1 w-24 bg-white/80 rounded-full" })] }), _jsx("
|
|
230
|
+
: 'opacity-0 translate-y-8'}`, children: [_jsxs("div", { children: [slide.badge && (_jsx("span", { className: "inline-block px-4 py-1.5 bg-white/20 backdrop-blur-md rounded-full text-sm font-medium border border-white/30 uppercase tracking-wider mb-4", children: slide.badge })), _jsx("h1", { className: "text-4xl sm:text-6xl lg:text-7xl font-bold leading-tight tracking-tight mb-4", children: _jsx(SafeRichHtml, { value: slide.title, fallbackPlain: storeConfig.name }) }), _jsx("div", { className: "h-1 w-24 bg-white/80 rounded-full" })] }), _jsx("div", { className: "text-xl sm:text-2xl text-gray-100 font-light leading-relaxed max-w-lg [&_p]:mb-3 [&_p:last-child]:mb-0", children: _jsx(SafeRichHtml, { value: slide.description, fallbackPlain: "" }) }), _jsxs("div", { className: "flex flex-wrap gap-4 pt-4", children: [layoutConfig?.sections?.hero?.showCTA !== false &&
|
|
230
231
|
layoutConfig?.hero?.showCTA !== false &&
|
|
231
232
|
slide.primaryButtonText &&
|
|
232
233
|
slide.primaryButtonText.trim() !== '' && (_jsx(Link, { href: slide.primaryButtonLink, children: _jsx(Button, { size: "lg", className: "h-14 px-10 text-base rounded-full bg-white text-black hover:bg-gray-100 transition-all duration-300 hover:scale-105 font-semibold", children: slide.primaryButtonText }) })), (layoutConfig?.sections?.hero?.showSecondaryCTA !== false || layoutConfig?.hero?.showSecondaryCTA !== false) &&
|
|
@@ -265,7 +266,8 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
|
|
|
265
266
|
};
|
|
266
267
|
const categoryImage = extractCategoryImage(category.image);
|
|
267
268
|
return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: `group relative overflow-hidden rounded-2xl aspect-[3/4]`, children: [_jsxs("div", { className: "absolute inset-0 bg-gray-200", children: [_jsx(ImageWithFallback, { src: categoryImage, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "auto", lazy: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-70 transition-opacity" })] }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-8", children: [_jsx("h3", { className: "text-2xl font-bold text-white mb-2 transform translate-y-0 transition-transform duration-300", children: category.name }), _jsx("div", { className: "h-0.5 w-12 bg-white/0 group-hover:bg-white/100 transition-all duration-500 mb-4" }), _jsxs("span", { className: "inline-flex items-center text-white text-sm font-medium opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300", children: [getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'), " ", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] })] })] }, category.id));
|
|
268
|
-
}) })] }) })), layoutConfig?.sections?.marketing?.editorial?.show !== false && (_jsx("section", { "data-section": "editorial", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-stone-50", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 lg:gap-20 items-center", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "aspect-[4/5] rounded-lg overflow-hidden relative", children: _jsx(ImageWithFallback, { src: layoutConfig?.sections?.marketing?.editorial?.image || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2000&auto=format&fit=crop', alt: "Editorial Lookbook", className: "w-full h-full object-cover", skeletonAspectRatio: "4/5", lazy: true }) }), (layoutConfig?.sections?.marketing?.editorial?.detailImage) && (_jsx("div", { className: "absolute w-48 h-48 bg-white p-4 shadow-xl rounded-lg hidden md:block z-20 animate-fade-in-up", style: { bottom: '-2rem', right: '-2rem', animationDelay: '0.2s' }, children: _jsx("div", { className: "w-full h-full relative", children: _jsx(ImageWithFallback, { src: layoutConfig.sections.marketing.editorial.detailImage, alt: "Detail Shot", className: "w-full h-full object-cover rounded", skeletonAspectRatio: "square", lazy: true }) }) }))] }), _jsxs("div", { className: "space-y-8", children: [_jsx("div", { className: "flex flex-col gap-2", children: _jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase", children: layoutConfig?.sections?.marketing?.editorial?.badgeText || "Lookbook" }) }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight text-gray-900", children: layoutConfig?.sections?.marketing?.editorial?.title ? (layoutConfig.sections.marketing.editorial.title.split('\n').map((line, idx, arr) => (_jsxs("span", { children: [line, idx < arr.length - 1 && _jsx("br", {})] }, idx)))) : (_jsxs(_Fragment, { children: ["Redefining Modern ", _jsx("br", {}), _jsx("span", { className: "italic font-serif", children: "Elegance" })] })) }), _jsx("
|
|
269
|
+
}) })] }) })), layoutConfig?.sections?.marketing?.editorial?.show !== false && (_jsx("section", { "data-section": "editorial", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-stone-50", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 lg:gap-20 items-center", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "aspect-[4/5] rounded-lg overflow-hidden relative", children: _jsx(ImageWithFallback, { src: layoutConfig?.sections?.marketing?.editorial?.image || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2000&auto=format&fit=crop', alt: "Editorial Lookbook", className: "w-full h-full object-cover", skeletonAspectRatio: "4/5", lazy: true }) }), (layoutConfig?.sections?.marketing?.editorial?.detailImage) && (_jsx("div", { className: "absolute w-48 h-48 bg-white p-4 shadow-xl rounded-lg hidden md:block z-20 animate-fade-in-up", style: { bottom: '-2rem', right: '-2rem', animationDelay: '0.2s' }, children: _jsx("div", { className: "w-full h-full relative", children: _jsx(ImageWithFallback, { src: layoutConfig.sections.marketing.editorial.detailImage, alt: "Detail Shot", className: "w-full h-full object-cover rounded", skeletonAspectRatio: "square", lazy: true }) }) }))] }), _jsxs("div", { className: "space-y-8", children: [_jsx("div", { className: "flex flex-col gap-2", children: _jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase", children: layoutConfig?.sections?.marketing?.editorial?.badgeText || "Lookbook" }) }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight text-gray-900", children: layoutConfig?.sections?.marketing?.editorial?.title ? (layoutConfig.sections.marketing.editorial.title.split('\n').map((line, idx, arr) => (_jsxs("span", { children: [line, idx < arr.length - 1 && _jsx("br", {})] }, idx)))) : (_jsxs(_Fragment, { children: ["Redefining Modern ", _jsx("br", {}), _jsx("span", { className: "italic font-serif", children: "Elegance" })] })) }), _jsx("div", { className: "text-lg text-gray-600 leading-relaxed [&_p]:mb-3 [&_p:last-child]:mb-0", children: _jsx(SafeRichHtml, { value: layoutConfig?.sections?.marketing?.editorial?.description ||
|
|
270
|
+
'Explore our latest editorial featuring timeless pieces crafted for the contemporary wardrobe. From essential basics to statement outwear, find your signature look.', fallbackPlain: "Explore our latest editorial featuring timeless pieces crafted for the contemporary wardrobe. From essential basics to statement outwear, find your signature look." }) }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 pt-4", children: [layoutConfig?.sections?.marketing?.editorial?.primaryButton?.text && (_jsx(Link, { href: toStoreHref(storeConfig.slug, layoutConfig.sections.marketing.editorial.primaryButton.link, '/style-guide'), children: _jsx(Button, { className: "rounded-full px-8 py-6 bg-gray-900 hover:bg-black text-white transition-all", children: layoutConfig.sections.marketing.editorial.primaryButton.text }) })), layoutConfig?.sections?.marketing?.editorial?.secondaryButton?.text && (_jsx(Link, { href: toStoreHref(storeConfig.slug, layoutConfig.sections.marketing.editorial.secondaryButton.link, '/about'), children: _jsx(Button, { variant: "outline", className: "rounded-full px-8 py-6 border-gray-300 hover:bg-white hover:border-gray-900 transition-all", children: layoutConfig.sections.marketing.editorial.secondaryButton.text }) }))] })] })] }) }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-7xl", children: [_jsxs("div", { className: "text-center max-w-2xl mx-auto mb-10 md:mb-16", children: [_jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase mb-3 block", children: layoutConfig?.sections?.featuredProducts?.eyebrow || "Curated For You" }), _jsx("h2", { className: "text-3xl md:text-4xl font-bold mb-4 tracking-tight", children: layoutConfig?.sections?.featuredProducts?.title || getLayoutText(storeConfig, 'sections.featuredProducts.title', 'Trending Now') }), _jsx("div", { className: "h-1 w-20 bg-gray-900 mx-auto mb-6" }), _jsx("div", { className: "text-gray-600 text-lg [&_p]:mb-2 [&_p:last-child]:mb-0", children: _jsx(SafeRichHtml, { value: getLayoutText(storeConfig, 'sections.featuredProducts.subtitle', "Discover the latest trends and essential pieces that define this season's style."), fallbackPlain: "Discover the latest trends and essential pieces that define this season's style." }) })] }), _jsx("div", { className: "grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8", children: products.slice(0, 4).map((product) => {
|
|
269
271
|
// Comprehensive image extraction - handles all formats
|
|
270
272
|
const extractProductImages = (images) => {
|
|
271
273
|
if (!images)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClothingHomePageMinimal.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/components/ClothingHomePageMinimal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"ClothingHomePageMinimal.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/components/ClothingHomePageMinimal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AAiBrE,UAAU,4BAA4B;IACpC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,4BAA4B,2CAsVnG"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx,
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useFeaturedProducts } from '../../../hooks/use-featured-products';
|
|
4
4
|
import { Button } from '../../../components/ui/button';
|
|
5
5
|
import { useStore } from '../../../lib/store-context';
|
|
@@ -12,6 +12,7 @@ import { countProductsInCategoryTree, getCategoriesForDisplay, } from '../../../
|
|
|
12
12
|
import { getLayoutText, getBannerImage, getTextContent } from '../../../lib/utils/asset-helpers';
|
|
13
13
|
import { PromoBanner } from '../../shared/components/PromoBanner';
|
|
14
14
|
import { DynamicIcon } from '../../../components/ui/dynamic-icon';
|
|
15
|
+
import { SafeRichHtml } from '../../../components/rich-text/SafeRichHtml';
|
|
15
16
|
export function ClothingHomePageMinimal({ storeConfig: initialConfig }) {
|
|
16
17
|
const { store, addToCart } = useStore();
|
|
17
18
|
const storeConfig = store || initialConfig;
|
|
@@ -47,26 +48,22 @@ export function ClothingHomePageMinimal({ storeConfig: initialConfig }) {
|
|
|
47
48
|
addToCart(product);
|
|
48
49
|
addToast(`${product.name} added to cart`, 'success');
|
|
49
50
|
};
|
|
50
|
-
return (_jsxs("div", { className: "min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white", children: [layoutConfig?.sections?.hero?.show !== false && (_jsx("section", { "data-section": "hero", className: "lg:h-screen h-auto w-full", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 h-full", children: [_jsx("div", { className: "relative bg-[#F4F4F4] flex flex-col justify-center px-12 md:px-24 lg:order-1 order-2 py-20 lg:py-0", children: _jsxs("div", { className: "space-y-6 md:space-y-8 max-w-lg animate-fade-in-up", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.2em] text-gray-500", children: layoutConfig?.sections?.hero?.badge || getTextContent(storeConfig, 'hero_badge', 'New Collection 2024') }), _jsx("h1", { className: "text-4xl md:text-7xl font-light tracking-tight leading-[1.1]", children: (()
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const parts = titleText.split('sophistication');
|
|
55
|
-
return (_jsxs(_Fragment, { children: [parts[0], _jsx("span", { className: "font-serif italic", children: "sophistication" }), parts[1]] }));
|
|
56
|
-
}
|
|
57
|
-
return titleText;
|
|
58
|
-
})() }), _jsx("p", { className: "text-gray-600 text-lg leading-relaxed", children: layoutConfig?.sections?.hero?.subtitle || getLayoutText(storeConfig, 'hero.subtitle', storeConfig.description ? `${storeConfig.description} Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.` : 'Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.') }), _jsx("div", { className: "pt-4", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "h-14 px-10 rounded-full bg-black text-white hover:bg-gray-800 text-base transition-all hover:scale-105", children: layoutConfig?.sections?.hero?.primaryCTA || getLayoutText(storeConfig, 'common.shopNow', 'Shop Collection') }) }) })] }) }), _jsxs("div", { className: "relative h-[60vh] lg:h-full w-full lg:order-2 order-1 overflow-hidden group", children: [_jsx(ImageWithFallback, { src: getBannerImage(storeConfig, 'hero_main', 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1887&auto=format&fit=crop'), alt: "Minimal Fashion", className: "absolute inset-0 w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-[2s]" }), _jsxs("div", { className: "absolute bottom-8 right-8 bg-white/90 backdrop-blur p-4 rounded-lg hidden md:block", children: [_jsx("p", { className: "text-xs font-bold uppercase tracking-wider mb-1", children: "Featured Look" }), _jsx("p", { className: "text-sm text-gray-600", children: "Linen Blend Blazer - $299" })] })] })] }) })), layoutConfig?.sections?.features?.show !== false && (_jsx("section", { "data-section": "features", className: "py-12 border-b border-gray-100 bg-white", children: _jsx("div", { className: "container mx-auto px-4 md:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: (layoutConfig?.sections?.features?.items || [
|
|
51
|
+
return (_jsxs("div", { className: "min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white", children: [layoutConfig?.sections?.hero?.show !== false && (_jsx("section", { "data-section": "hero", className: "lg:h-screen h-auto w-full", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 h-full", children: [_jsx("div", { className: "relative bg-[#F4F4F4] flex flex-col justify-center px-12 md:px-24 lg:order-1 order-2 py-20 lg:py-0", children: _jsxs("div", { className: "space-y-6 md:space-y-8 max-w-lg animate-fade-in-up", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.2em] text-gray-500", children: layoutConfig?.sections?.hero?.badge || getTextContent(storeConfig, 'hero_badge', 'New Collection 2024') }), _jsx("h1", { className: "text-4xl md:text-7xl font-light tracking-tight leading-[1.1]", children: _jsx(SafeRichHtml, { value: layoutConfig?.sections?.hero?.title || getLayoutText(storeConfig, 'hero.title', 'Simplicity is the ultimate sophistication.'), fallbackPlain: "Simplicity is the ultimate sophistication." }) }), _jsx("div", { className: "text-gray-600 text-lg leading-relaxed [&_p]:mb-3 [&_p:last-child]:mb-0", children: _jsx(SafeRichHtml, { value: layoutConfig?.sections?.hero?.subtitle ||
|
|
52
|
+
getLayoutText(storeConfig, 'hero.subtitle', storeConfig.description
|
|
53
|
+
? `${storeConfig.description} Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.`
|
|
54
|
+
: 'Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.'), fallbackPlain: "Discover our latest arrivals, crafted for the modern individual who values quality and timeless design." }) }), _jsx("div", { className: "pt-4", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "h-14 px-10 rounded-full bg-black text-white hover:bg-gray-800 text-base transition-all hover:scale-105", children: layoutConfig?.sections?.hero?.primaryCTA || getLayoutText(storeConfig, 'common.shopNow', 'Shop Collection') }) }) })] }) }), _jsxs("div", { className: "relative h-[60vh] lg:h-full w-full lg:order-2 order-1 overflow-hidden group", children: [_jsx(ImageWithFallback, { src: getBannerImage(storeConfig, 'hero_main', 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1887&auto=format&fit=crop'), alt: "Minimal Fashion", className: "absolute inset-0 w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-[2s]" }), _jsxs("div", { className: "absolute bottom-8 right-8 bg-white/90 backdrop-blur p-4 rounded-lg hidden md:block", children: [_jsx("p", { className: "text-xs font-bold uppercase tracking-wider mb-1", children: "Featured Look" }), _jsx("p", { className: "text-sm text-gray-600", children: "Linen Blend Blazer - $299" })] })] })] }) })), layoutConfig?.sections?.features?.show !== false && (_jsx("section", { "data-section": "features", className: "py-12 border-b border-gray-100 bg-white", children: _jsx("div", { className: "container mx-auto px-4 md:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: (layoutConfig?.sections?.features?.items || [
|
|
59
55
|
{ icon: 'Truck', title: 'Global Delivery', description: 'Free on orders over $200' },
|
|
60
56
|
{ icon: 'ShieldCheck', title: 'Secure Payment', description: '100% secure checkout' },
|
|
61
57
|
{ icon: 'RefreshCw', title: 'Easy Returns', description: '30-day return policy' }
|
|
62
58
|
]).filter(Boolean).map((item, idx) => (_jsxs("div", { className: "flex items-center gap-4 group", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-colors duration-300", children: _jsx(DynamicIcon, { name: item.icon, className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wider", children: item.title }), _jsx("p", { className: "text-xs text-gray-500", children: item.description })] })] }, idx))) }) }) })), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", className: "py-16 md:py-24 px-4 md:px-8", children: _jsxs("div", { className: "container mx-auto", children: [_jsxs("div", { className: "flex justify-between items-end mb-8 md:mb-12", children: [_jsx("h2", { className: "text-3xl font-light", children: layoutConfig?.sections?.categories?.title || getLayoutText(storeConfig, 'sections.categories.title', 'Categories') }), _jsx(Link, { href: `/${storeConfig.slug}/categories`, className: "text-sm font-bold uppercase tracking-wider border-b border-black pb-1 hover:text-gray-600 hover:border-gray-600 transition-colors", children: layoutConfig?.sections?.categories?.viewAllLabel || getLayoutText(storeConfig, 'sections.categories.viewAll', 'View All') })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: categories.map((category) => {
|
|
63
59
|
const itemCount = countProductsInCategoryTree(category, allCategories, categoryProducts);
|
|
64
60
|
return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: "group block cursor-pointer", children: [_jsxs("div", { className: "relative aspect-[3/4] overflow-hidden bg-[#F4F4F4] mb-4", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500" }), _jsx("div", { className: "absolute top-4 right-4 bg-white rounded-full p-2 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300", children: _jsx(ArrowUpRight, { className: "h-5 w-5" }) })] }), _jsx("h3", { className: "text-xl font-medium mb-1", children: category.name }), itemCount > 0 && (_jsxs("p", { className: "text-sm text-gray-500", children: [itemCount, " ", itemCount === 1 ? 'Item' : 'Items'] }))] }, category.id));
|
|
65
|
-
}) })] }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", className: "py-16 md:py-24 bg-[#FAFAFA]", children: _jsxs("div", { className: "container mx-auto px-4 md:px-8", children: [_jsxs("div", { className: "max-w-2xl mx-auto text-center mb-10 md:mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-light mb-4", children: layoutConfig?.sections?.featuredProducts?.title || 'The Essentials' }), _jsx("
|
|
61
|
+
}) })] }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", className: "py-16 md:py-24 bg-[#FAFAFA]", children: _jsxs("div", { className: "container mx-auto px-4 md:px-8", children: [_jsxs("div", { className: "max-w-2xl mx-auto text-center mb-10 md:mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-light mb-4", children: layoutConfig?.sections?.featuredProducts?.title || 'The Essentials' }), _jsx("div", { className: "text-gray-500 [&_p]:mb-2 [&_p:last-child]:mb-0", children: _jsx(SafeRichHtml, { value: layoutConfig?.sections?.featuredProducts?.subtitle || 'Timeless pieces designed to build the foundation of your wardrobe.', fallbackPlain: "Timeless pieces designed to build the foundation of your wardrobe." }) })] }), _jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12 md:gap-8", children: products.slice(0, 4).map((product) => (_jsx("div", { className: "group", children: _jsxs(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, children: [_jsxs("div", { className: "aspect-[3/4] bg-white overflow-hidden relative mb-4", children: [_jsx(ImageWithFallback, { src: product.images[0], alt: product.name, className: "w-full h-full object-cover mix-blend-multiply group-hover:scale-105 transition-transform duration-500", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "hidden lg:flex absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity items-end justify-center pb-6", children: _jsx("button", { onClick: (e) => {
|
|
66
62
|
e.preventDefault();
|
|
67
63
|
handleAddToCart(product);
|
|
68
64
|
}, className: "bg-white text-black px-8 py-3 rounded-full text-sm font-bold shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-black hover:text-white", children: "Quick Add" }) }), _jsx("button", { onClick: (e) => {
|
|
69
65
|
e.preventDefault();
|
|
70
66
|
handleAddToCart(product);
|
|
71
|
-
}, className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 flex items-center justify-center rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(Plus, { className: "h-5 w-5" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-2 left-2 text-[10px] font-bold uppercase tracking-wider bg-black text-white px-2 py-1", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-base mb-1 group-hover:underline decoration-1 underline-offset-4", children: product.name }), _jsx("div", { className: "flex gap-2 mb-2", children: ['#D4D4D4', '#171717', '#737373'].map((color, i) => (_jsx("div", { className: "w-3 h-3 rounded-full border border-gray-200", style: { backgroundColor: color } }, i))) })] }), _jsx("span", { className: "font-medium text-sm", children: formatCurrency(product.price, product.currency || 'USD') })] })] }) }, product.id))) })] }) })), layoutConfig?.sections?.about?.show !== false && (_jsx("section", { "data-section": "about", className: "py-16 md:py-24 px-4 md:px-8 border-t border-gray-100", children: _jsx("div", { className: "container mx-auto", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-gray-100 group overflow-hidden", children: [_jsx(ImageWithFallback, { src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=2070&auto=format&fit=crop", alt: "Shop the look", className: "w-full h-full object-cover" }), _jsxs("div", { className: "absolute top-[30%] left-[45%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute left-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Oversized Wool Coat" }), _jsx("p", { className: "text-xs text-gray-500", children: "$299.00" })] })] }), _jsxs("div", { className: "absolute bottom-[25%] right-[40%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute right-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Leather Ankle Boots" }), _jsx("p", { className: "text-xs text-gray-500", children: "$189.00" })] })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsx("h2", { className: "text-4xl font-light", children: layoutConfig?.sections?.about?.title || (_jsxs(_Fragment, { children: ["Winter ", _jsx("span", { className: "font-serif italic", children: "Layering" })] })) }), _jsx("
|
|
67
|
+
}, className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 flex items-center justify-center rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(Plus, { className: "h-5 w-5" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-2 left-2 text-[10px] font-bold uppercase tracking-wider bg-black text-white px-2 py-1", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-base mb-1 group-hover:underline decoration-1 underline-offset-4", children: product.name }), _jsx("div", { className: "flex gap-2 mb-2", children: ['#D4D4D4', '#171717', '#737373'].map((color, i) => (_jsx("div", { className: "w-3 h-3 rounded-full border border-gray-200", style: { backgroundColor: color } }, i))) })] }), _jsx("span", { className: "font-medium text-sm", children: formatCurrency(product.price, product.currency || 'USD') })] })] }) }, product.id))) })] }) })), layoutConfig?.sections?.about?.show !== false && (_jsx("section", { "data-section": "about", className: "py-16 md:py-24 px-4 md:px-8 border-t border-gray-100", children: _jsx("div", { className: "container mx-auto", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-gray-100 group overflow-hidden", children: [_jsx(ImageWithFallback, { src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=2070&auto=format&fit=crop", alt: "Shop the look", className: "w-full h-full object-cover" }), _jsxs("div", { className: "absolute top-[30%] left-[45%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute left-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Oversized Wool Coat" }), _jsx("p", { className: "text-xs text-gray-500", children: "$299.00" })] })] }), _jsxs("div", { className: "absolute bottom-[25%] right-[40%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute right-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Leather Ankle Boots" }), _jsx("p", { className: "text-xs text-gray-500", children: "$189.00" })] })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsx("h2", { className: "text-4xl font-light", children: layoutConfig?.sections?.about?.title || (_jsxs(_Fragment, { children: ["Winter ", _jsx("span", { className: "font-serif italic", children: "Layering" })] })) }), _jsx("div", { className: "text-gray-600 leading-relaxed max-w-md [&_p]:mb-3 [&_p:last-child]:mb-0", children: _jsx(SafeRichHtml, { value: layoutConfig?.sections?.about?.description ||
|
|
68
|
+
'Master the art of layering with our winter collection. Combining warmth with style, these pieces are designed to work together seamlessly.', fallbackPlain: "Master the art of layering with our winter collection. Combining warmth with style, these pieces are designed to work together seamlessly." }) }), _jsx("div", { className: "space-y-4", children: products.slice(0, 3).map((item, i) => (_jsxs("div", { className: "flex gap-4 items-center p-2 hover:bg-gray-50 rounded-lg transition-colors group cursor-pointer", children: [_jsx("div", { className: "w-16 h-20 bg-white relative", children: _jsx(ImageWithFallback, { src: item.images[0], alt: item.name, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm mb-1", children: item.name }), _jsx("p", { className: "text-xs text-gray-500", children: formatCurrency(item.price, item.currency || storeConfig.settings?.currency || 'USD') })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleAddToCart(item), className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(Plus, { className: "h-4 w-4" }) })] }, i))) }), _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "w-full bg-black text-white hover:bg-gray-800 h-12 rounded-none uppercase tracking-widest text-xs font-bold", children: getLayoutText(storeConfig, 'common.shopNow', 'Shop The Edit') }) })] })] }) }) })), _jsx(PromoBanner, { config: layoutConfig?.sections?.promoBanner, layoutStyle: "clothing" })] }));
|
|
72
69
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/ProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"ProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/ProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AA0BrE,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAyxBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAMpD"}
|
|
@@ -18,6 +18,7 @@ import { useProductBrands } from '../../../hooks/use-product-brands';
|
|
|
18
18
|
import { filterActiveProducts } from '../../../lib/utils';
|
|
19
19
|
import { getAllCategoryIds, flattenCategoryTree, buildCategoryTree } from '../../../lib/utils/category-tree';
|
|
20
20
|
import { getBannerImage, getLayoutText } from '../../../lib/utils/asset-helpers';
|
|
21
|
+
import { SafeRichHtml } from '../../../components/rich-text/SafeRichHtml';
|
|
21
22
|
import { shouldUseAPI } from '../../../lib/utils/demo-detection';
|
|
22
23
|
import { useCatalogPriceRange } from '../../../hooks/use-catalog-price-range';
|
|
23
24
|
import { isWithinActivePriceRange } from '../../../lib/utils/catalog-price-bounds';
|
|
@@ -319,7 +320,8 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
|
|
|
319
320
|
const secondaryButtonText = hasSecondaryButtonFromConfig
|
|
320
321
|
? (categoryHeaderSecondaryButton && categoryHeaderSecondaryButton.trim() !== '' ? categoryHeaderSecondaryButton.trim() : null)
|
|
321
322
|
: getLayoutText(storeConfig, 'sections.categories.viewAll', 'View Categories');
|
|
322
|
-
return (_jsxs("div", { className: "min-h-screen bg-white font-sans text-slate-900", children: [layoutConfig?.sections?.productsHeader?.show !== false && (_jsxs("div", { className: "relative overflow-hidden bg-white", children: [(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(ImageWithFallback, { src: layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage, alt: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || storeConfig.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60" })] })), !(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-gray-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-gray-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow", style: { animationDelay: '2s' } })] })), _jsx("div", { className: `container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 pb-16 lg:pt-20 lg:pb-24 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'min-h-[500px] flex items-center' : ''}`, children: _jsx("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: _jsxs("div", { className: `w-full text-center lg:text-left animate-fade-in-up ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx("div", { className: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20' : '', children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'light' : 'default' }) }) }), _jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase mb-6 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/20 backdrop-blur-md text-white border border-white/30' : 'bg-black/5 text-gray-900'}`, children: [_jsx("span", { className: `w-2 h-2 rounded-full animate-pulse ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white' : 'bg-black'}` }), layoutConfig?.sections?.productsHeader?.badge || getLayoutText(storeConfig, 'common.newArrivals', 'New Arrivals 2024')] }), _jsx("h1", { className: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1] ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : 'text-gray-900'}`, children: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || (_jsxs(_Fragment, { children: ["Explore The Collections of ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900", children: storeConfig.name })] })) }), _jsx("
|
|
323
|
+
return (_jsxs("div", { className: "min-h-screen bg-white font-sans text-slate-900", children: [layoutConfig?.sections?.productsHeader?.show !== false && (_jsxs("div", { className: "relative overflow-hidden bg-white", children: [(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(ImageWithFallback, { src: layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage, alt: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || storeConfig.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60" })] })), !(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-gray-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-gray-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow", style: { animationDelay: '2s' } })] })), _jsx("div", { className: `container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 pb-16 lg:pt-20 lg:pb-24 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'min-h-[500px] flex items-center' : ''}`, children: _jsx("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: _jsxs("div", { className: `w-full text-center lg:text-left animate-fade-in-up ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx("div", { className: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20' : '', children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'light' : 'default' }) }) }), _jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase mb-6 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/20 backdrop-blur-md text-white border border-white/30' : 'bg-black/5 text-gray-900'}`, children: [_jsx("span", { className: `w-2 h-2 rounded-full animate-pulse ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white' : 'bg-black'}` }), layoutConfig?.sections?.productsHeader?.badge || getLayoutText(storeConfig, 'common.newArrivals', 'New Arrivals 2024')] }), _jsx("h1", { className: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1] ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : 'text-gray-900'}`, children: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || (_jsxs(_Fragment, { children: ["Explore The Collections of ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900", children: storeConfig.name })] })) }), _jsx("div", { className: `text-lg mb-8 leading-relaxed max-w-lg mx-auto lg:mx-0 [&_p]:mb-3 [&_p:last-child]:mb-0 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white/90' : 'text-gray-600'}`, children: _jsx(SafeRichHtml, { value: layoutConfig?.sections?.productsHeader?.description ||
|
|
324
|
+
getLayoutText(storeConfig, 'category_header:description', "Don't miss out on shopping our latest collection! curated for quality and style. Experience the perfect blend of modern aesthetics and premium craftsmanship."), fallbackPlain: "Don't miss out on shopping our latest collection! curated for quality and style. Experience the perfect blend of modern aesthetics and premium craftsmanship." }) }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center lg:justify-start", children: [(layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText) && (layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText).trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white text-gray-900 hover:bg-gray-100' : ''}`, onClick: () => {
|
|
323
325
|
const element = document.getElementById('product-grid');
|
|
324
326
|
element?.scrollIntoView({ behavior: 'smooth' });
|
|
325
327
|
}, children: layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText })), (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText) && (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText).trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md text-white border border-white/30 hover:bg-white/20' : 'bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200'}`, onClick: () => {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Payaza Checkout SDK Integration
|
|
3
3
|
* Based on Payaza Web SDK documentation: https://docs.payaza.africa/developers/apis/sdks/web-sdk
|
|
4
4
|
*
|
|
5
|
-
* Implementation uses npm package: payaza-web-sdk
|
|
5
|
+
* Implementation uses npm package: payaza-web-sdk (live checkout at checkout-v2.payaza.africa)
|
|
6
6
|
* Method: setup(config).showPopup()
|
|
7
7
|
*/
|
|
8
8
|
export type PayazaConnectionMode = 'Live' | 'Test';
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
* Payaza Checkout SDK Integration
|
|
3
3
|
* Based on Payaza Web SDK documentation: https://docs.payaza.africa/developers/apis/sdks/web-sdk
|
|
4
4
|
*
|
|
5
|
-
* Implementation uses npm package: payaza-web-sdk
|
|
5
|
+
* Implementation uses npm package: payaza-web-sdk (live checkout at checkout-v2.payaza.africa)
|
|
6
6
|
* Method: setup(config).showPopup()
|
|
7
7
|
*/
|
|
8
|
-
import PayazaCheckout from 'payaza-web-sdk
|
|
8
|
+
import PayazaCheckout from 'payaza-web-sdk';
|
|
9
9
|
import { normalizePhoneForPayaza } from '../lib/utils/phone-format';
|
|
10
10
|
/** Map backend payazaConnectionMode (or legacy environment values) to SDK connection mode. */
|
|
11
11
|
export function normalizeConnectionMode(value) {
|
package/dist/styles/index.css
CHANGED
|
@@ -9730,11 +9730,26 @@
|
|
|
9730
9730
|
margin-bottom: calc(var(--spacing) * 0);
|
|
9731
9731
|
}
|
|
9732
9732
|
}
|
|
9733
|
+
.\[\&_p\]\:mb-2 {
|
|
9734
|
+
& p {
|
|
9735
|
+
margin-bottom: calc(var(--spacing) * 2);
|
|
9736
|
+
}
|
|
9737
|
+
}
|
|
9738
|
+
.\[\&_p\]\:mb-3 {
|
|
9739
|
+
& p {
|
|
9740
|
+
margin-bottom: calc(var(--spacing) * 3);
|
|
9741
|
+
}
|
|
9742
|
+
}
|
|
9733
9743
|
.\[\&_p\+p\]\:mt-2 {
|
|
9734
9744
|
& p+p {
|
|
9735
9745
|
margin-top: calc(var(--spacing) * 2);
|
|
9736
9746
|
}
|
|
9737
9747
|
}
|
|
9748
|
+
.\[\&_p\:last-child\]\:mb-0 {
|
|
9749
|
+
& p:last-child {
|
|
9750
|
+
margin-bottom: calc(var(--spacing) * 0);
|
|
9751
|
+
}
|
|
9752
|
+
}
|
|
9738
9753
|
.\[\&_svg\]\:pointer-events-none {
|
|
9739
9754
|
& svg {
|
|
9740
9755
|
pointer-events: none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "storefront-layouts",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"lts": true,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Shared layout components for Storefront applications",
|
|
@@ -140,7 +140,6 @@
|
|
|
140
140
|
"isomorphic-dompurify": "^2.28.0",
|
|
141
141
|
"lucide-react": "^0.554.0",
|
|
142
142
|
"nprogress": "^0.2.0",
|
|
143
|
-
"payaza-web-sdk": "^1.0.8",
|
|
144
143
|
"tailwind-merge": "^3.4.0",
|
|
145
144
|
"tw-animate-css": "^1.4.0"
|
|
146
145
|
},
|