@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/features/homepage/components/HeroCarousel.js

@@ -1,8 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useState, useEffect, useRef, useCallback } from "react";
-import { useTranslations } from "next-intl";
 import { useMediaQuery } from "../../../react";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
@@ -19,8 +17,6 @@ function navigate(href, push) {
     }
 }
 export function HeroCarousel({ initialSlides, push } = {}) {
-    const tLoading = useTranslations("loading");
-    const tA11y = useTranslations("accessibility");
     const [currentSlide, setCurrentSlide] = useState(0);
     const [isPaused, setIsPaused] = useState(false);
     const sectionRef = useRef(null);
@@ -63,10 +59,10 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         return () => clearInterval(interval);
     }, [slides.length, isPaused, prefersReducedMotion, goNext]);
     if (isLoading) {
-        return (_jsx(Div, { className: `relative w-full ${homepage.heroMinH} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: tLoading("default") }) }) }));
+        return (_jsx(Div, { className: `relative w-full ${homepage.heroMinH} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
     }
     if (!slides || slides.length === 0) {
-        return null;
+        return (_jsxs(Div, { className: `relative w-full ${homepage.heroMinH} bg-gradient-to-br from-primary/10 to-secondary/10 ${flex.center} flex-col gap-4`, children: [_jsx(Heading, { level: 2, className: "text-2xl font-bold text-primary", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "text-center max-w-md px-4", children: "Amazing deals are on their way. Stay tuned!" })] }));
     }
     const getBackgroundStyle = (card) => {
         const { type, value } = card.background;
@@ -92,10 +88,7 @@ export function HeroCarousel({ initialSlides, push } = {}) {
             setIsPaused((p) => !p);
         }
     };
-    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${homepage.heroMinH} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": tA11y("heroCarouselAriaLabel"), onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: tA11y("heroCarouselSlideOf", {
-                    current: currentSlide + 1,
-                    total: slides.length,
-                }) }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => (_jsxs(Div, { className: "snap-start flex-none w-full relative self-stretch bg-zinc-900", children: [_jsxs(Div, { className: position.fill, children: [slide.media.type === "image" ? (_jsx(MediaImage, { src: isMobile && slide.mobileMedia
+    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${homepage.heroMinH} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => (_jsxs(Div, { className: "snap-start flex-none w-full relative self-stretch bg-zinc-900", children: [_jsxs(Div, { className: position.fill, children: [slide.media.type === "image" ? (_jsx(MediaImage, { src: isMobile && slide.mobileMedia
                                             ? slide.mobileMedia.url
                                             : slide.media.url, alt: slide.media.alt, size: "hero", priority: slideIndex === 0 })) : (_jsx(MediaVideo, { src: isMobile && slide.mobileMedia
                                             ? slide.mobileMedia.url
@@ -136,7 +129,7 @@ export function HeroCarousel({ initialSlides, push } = {}) {
                                                     ? "p-1.5 md:p-3"
                                                     : card.sizing?.padding === "lg"
                                                         ? "p-3 md:p-8"
-                                                        : "p-2 md:p-6"}`, children: [card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: "text-[11px] md:text-2xl lg:text-3xl font-bold !text-white mb-0.5 md:mb-3 line-clamp-1 md:line-clamp-2 drop-shadow-md", children: card.content.title })), card.content?.description && (_jsx(Text, { className: "text-[10px] md:text-sm lg:text-base !text-white/80 mb-1 md:mb-4 line-clamp-1 drop-shadow-sm", children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn) => (_jsx(Button, { variant: btn.variant, size: "sm", onClick: () => {
+                                                        : "p-2 md:p-6"}`, children: [card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl font-bold !text-white mb-0.5 md:mb-3 ${THEME_CONSTANTS.utilities.textClamp1} md:${THEME_CONSTANTS.utilities.textClamp2} drop-shadow-md`, children: card.content.title })), card.content?.description && (_jsx(Text, { className: `text-[10px] md:text-sm lg:text-base !text-white/80 mb-1 md:mb-4 ${THEME_CONSTANTS.utilities.textClamp1} drop-shadow-sm`, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn) => (_jsx(Button, { variant: btn.variant, size: "sm", onClick: () => {
                                                             if (btn.openInNewTab) {
                                                                 window.open(btn.link, "_blank", "noopener,noreferrer");
                                                             }
@@ -153,5 +146,5 @@ export function HeroCarousel({ initialSlides, push } = {}) {
                                                 }
                                             }, children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }, card.id))) }))] }, slide.id))) }) }), slides.length > 1 && (_jsx(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
                         ? THEME_CONSTANTS.carousel.dotActive
-                        : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": tA11y("heroCarouselGoToSlide", { number: index + 1 }), children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), _jsx(Div, { className: "absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-slate-950 to-transparent pointer-events-none z-[5]", "aria-hidden": "true" }), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": tA11y("heroCarouselPrevSlide"), children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": tA11y("heroCarouselNextSlide"), children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
+                        : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), _jsx(Div, { className: "absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-slate-950 to-transparent pointer-events-none z-[5]", "aria-hidden": "true" }), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
 }

package/dist/features/homepage/components/HomepageCustomerReviewsSection.d.ts

@@ -0,0 +1,8 @@
+export interface HomepageCustomerReviewsSectionProps {
+    title?: string;
+    subtitle?: string;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    className?: string;
+}
+export declare function HomepageCustomerReviewsSection({ title, subtitle, viewMoreHref, viewMoreLabel, className, }: HomepageCustomerReviewsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/HomepageCustomerReviewsSection.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CustomerReviewsSection } from "./CustomerReviewsSection";
+import { useHomepageReviews } from "../hooks/useHomepageReviews";
+import { ReviewCard } from "../../reviews/components";
+export function HomepageCustomerReviewsSection({ title = "What Our Customers Say", subtitle, viewMoreHref, viewMoreLabel = "See all reviews →", className = "", }) {
+    const { data: reviews = [], isLoading } = useHomepageReviews();
+    return (_jsx(CustomerReviewsSection, { title: title, subtitle: subtitle, items: reviews, renderItem: (review) => (_jsx(ReviewCard, { review: review, className: "h-full border-zinc-200 shadow-sm dark:border-slate-700" })), viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, isLoading: isLoading, keyExtractor: (review) => review.id, className: className }));
+}

package/dist/features/homepage/components/HomepageSkeleton.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Grid, Section } from "../../../ui";
@@ -10,5 +9,5 @@ export function HomepageSkeleton() {
     const trustCardH = "h-[clamp(120px,18vh,170px)]";
     const categoryTileH = "h-[clamp(112px,16vh,160px)]";
     const newsletterH = "h-[clamp(220px,28vh,320px)]";
-    return (_jsxs("div", { className: "w-full overflow-hidden", children: [_jsx("div", { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsx("div", { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgPrimary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, children: [_jsx("div", { className: `${skeleton.heading} w-52` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, children: [_jsx("div", { className: `${skeleton.heading} w-56` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx("div", { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
+    return (_jsxs("div", { className: "w-full overflow-hidden", "data-section": "homepageskeleton-div-328", children: [_jsx("div", { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsx("div", { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgPrimary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, "data-section": "homepageskeleton-div-329", children: [_jsx("div", { className: `${skeleton.heading} w-52` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", "data-section": "homepageskeleton-div-330", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, "data-section": "homepageskeleton-div-331", children: [_jsx("div", { className: `${skeleton.heading} w-56` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", "data-section": "homepageskeleton-div-332", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx("div", { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
 }

package/dist/features/homepage/components/HowItWorksInfoView.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Grid, Heading, Section, Span, Text } from "../../../ui";
-// ─── View ─────────────────────────────────────────────────────────────────────
+// --- View ---------------------------------------------------------------------
 export function HowItWorksInfoView({ title, subtitle, heroClass = "bg-gradient-to-br from-cobalt-700 via-cobalt-600 to-violet-700", stepsTitle, steps, detailsSectionTitle, details = [], renderDiagram, renderFooter, accentClass = "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400", className = "", }) {
     const { themed, flex, spacing } = THEME_CONSTANTS;
-    return (_jsxs("div", { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, children: [_jsx(Section, { className: `${heroClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: subtitle }))] }) }), _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-12 lg:py-16", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx("div", { className: `${spacing.stack} mb-14`, children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { className: `flex gap-4 items-start ${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx("div", { className: `shrink-0 w-10 h-10 rounded-xl ${stepAccent ?? accentClass} ${flex.center} text-sm font-bold`, children: _jsx(Span, { className: textClass, children: number }) }), _jsxs("div", { children: [_jsxs(Heading, { level: 3, className: "font-semibold mb-1", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs("div", { className: `${themed.bgSecondary} border ${themed.border} rounded-xl p-5`, children: [_jsx(Heading, { level: 3, className: "font-semibold mb-2", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
+    return (_jsxs("div", { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, "data-section": "howitworksinfoview-div-333", children: [_jsx(Section, { className: `${heroClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", "data-section": "howitworksinfoview-div-334", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: subtitle }))] }) }), _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-12 lg:py-16", "data-section": "howitworksinfoview-div-335", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx("div", { className: `${spacing.stack} mb-14`, "data-section": "howitworksinfoview-div-336", children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { className: `flex gap-4 items-start ${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx("div", { className: `shrink-0 w-10 h-10 rounded-xl ${stepAccent ?? accentClass} ${flex.center} text-sm font-bold`, "data-section": "howitworksinfoview-div-337", children: _jsx(Span, { className: textClass, children: number }) }), _jsxs("div", { "data-section": "howitworksinfoview-div-338", children: [_jsxs(Heading, { level: 3, className: "font-semibold mb-1", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs("div", { className: `${themed.bgSecondary} border ${themed.border} rounded-xl p-5`, "data-section": "howitworksinfoview-div-339", children: [_jsx(Heading, { level: 3, className: "font-semibold mb-2", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
 }

package/dist/features/homepage/components/HowItWorksSection.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Button, Div, Grid, Heading, Section, Text } from "../../../ui";
-// ─── Single step card ─────────────────────────────────────────────────────────
+// --- Single step card ---------------------------------------------------------
 function StepCard({ step, visible, delay, }) {
     const { badgeBg = "bg-primary", iconColor = "text-primary", iconBg = "bg-primary/5 dark:bg-primary/10", } = step;
     return (_jsxs("div", { className: [
@@ -12,9 +12,9 @@ function StepCard({ step, visible, delay, }) {
             "shadow-md group hover:-translate-y-2 hover:shadow-xl",
             "transition-all duration-300",
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, children: [_jsx("div", { className: "absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none", "aria-hidden": "true", children: step.number }), _jsx("div", { className: `relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`, children: step.number }), step.renderIcon && (_jsx("div", { className: `relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`, children: _jsx("span", { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`, children: step.title }), _jsx(Text, { className: `relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`, children: step.desc })] }));
+        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "howitworkssection-div-340", children: [_jsx("div", { className: "absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none", "aria-hidden": "true", "data-section": "howitworkssection-div-341", children: step.number }), _jsx("div", { className: `relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`, "data-section": "howitworkssection-div-342", children: step.number }), step.renderIcon && (_jsx("div", { className: `relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`, "data-section": "howitworkssection-div-343", children: _jsx("span", { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`, children: step.title }), _jsx(Text, { className: `relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`, children: step.desc })] }));
 }
-// ─── Section ─────────────────────────────────────────────────────────────────
+// --- Section -----------------------------------------------------------------
 export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className = "", }) {
     const { themed } = THEME_CONSTANTS;
     const sectionRef = useRef(null);
@@ -32,5 +32,5 @@ export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaC
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: `text-center mb-12 transition-all duration-700 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: [pillLabel && (_jsx("div", { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx("div", { className: `text-center transition-all duration-700 delay-500 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: `text-center mb-12 transition-all duration-700 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-344", children: [pillLabel && (_jsx("div", { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", "data-section": "howitworkssection-div-345", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx("div", { className: `text-center transition-all duration-700 delay-500 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-346", children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
 }

package/dist/features/homepage/components/MarketplaceHomepageView.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface MarketplaceHomepageViewAdSlots {
+    /** Rendered immediately after the hero carousel. Good for a full-width banner. */
+    afterHero?: React.ReactNode;
+    /** Rendered between featured products and featured auctions. */
+    afterFeaturedProducts?: React.ReactNode;
+    /** Rendered after the customer reviews section. */
+    afterReviews?: React.ReactNode;
+    /** Rendered after the FAQ section. */
+    afterFAQ?: React.ReactNode;
+}
+export interface MarketplaceHomepageViewProps {
+    /**
+     * Optional ad slot content injected at key positions in the homepage.
+     * Pass `<AdSlot id="..." />` as values; they render nothing when the slot
+     * is not configured or consent hasn't been granted.
+     */
+    adSlots?: MarketplaceHomepageViewAdSlots;
+    /**
+     * Optional newsletter form content for homepage section #16.
+     * Provide a client component wired to live subscribe actions/API.
+     */
+    newsletterFormSlot?: React.ReactNode;
+}
+export declare function MarketplaceHomepageView({ adSlots, newsletterFormSlot, }?: MarketplaceHomepageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/homepage/components/MarketplaceHomepageView.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Main } from "../../../ui";
+import { carouselRepository, faqsRepository, siteSettingsRepository } from "../../../repositories";
+import { ROUTES } from "../../../next";
+import { AnnouncementBar } from "./AnnouncementBar";
+import { HeroCarousel } from "./HeroCarousel";
+import { StatsCounterSection } from "./StatsCounterSection";
+import { TrustFeaturesSection } from "./TrustFeaturesSection";
+import { ShopByCategorySection } from "./ShopByCategorySection";
+import { FeaturedProductsSection } from "./FeaturedProductsSection";
+import { FeaturedAuctionsSection } from "./FeaturedAuctionsSection";
+import { FeaturedPreOrdersSection } from "./FeaturedPreOrdersSection";
+import { FeaturedStoresSection } from "./FeaturedStoresSection";
+import { EventsSection } from "./EventsSection";
+import { CTABannerSection } from "./CTABannerSection";
+import { HomepageCustomerReviewsSection } from "./HomepageCustomerReviewsSection";
+import { SecurityHighlightsSection } from "./SecurityHighlightsSection";
+import { WhatsAppCommunitySection } from "./WhatsAppCommunitySection";
+import { FAQSection } from "./FAQSection";
+import { NewsletterSection } from "./NewsletterSection";
+import { BlogArticlesSection } from "./BlogArticlesSection";
+import { WelcomeSection } from "./WelcomeSection";
+import { BrandsSection } from "./BrandsSection";
+import { homepageSectionsRepository } from "../repository/homepage-sections.repository";
+const DEFAULT_TRUST_FEATURES = [
+    {
+        iconName: "secure-payments",
+        title: "Secure Payments",
+        description: "Protected payments with transparent order tracking.",
+    },
+    {
+        iconName: "fast-delivery",
+        title: "Fast Delivery",
+        description: "Fast shipping with reliable nationwide logistics partners.",
+    },
+    {
+        iconName: "easy-returns",
+        title: "Easy Returns",
+        description: "Hassle-free returns within the policy window.",
+    },
+    {
+        iconName: "support",
+        title: "24/7 Support",
+        description: "Real help from our team across pre and post purchase.",
+    },
+];
+const DEFAULT_HOW_IT_WORKS = [
+    {
+        number: 1,
+        title: "Browse & Discover",
+        desc: "Search 10,000+ listings across products, auctions, and pre-orders.",
+    },
+    {
+        number: 2,
+        title: "Bid or Buy Now",
+        desc: "Place a bid on live auctions or buy instantly at the listed price.",
+    },
+    {
+        number: 3,
+        title: "Get Delivered",
+        desc: "Track your order end-to-end until it arrives at your door.",
+    },
+];
+const DEFAULT_SECURITY_ITEMS = [
+    {
+        key: "encryption",
+        title: "End-to-End Encryption",
+        description: "All sensitive data is encrypted in transit and at rest.",
+    },
+    {
+        key: "tls",
+        title: "TLS 1.3 in Transit",
+        description: "Every API call and page load is secured with modern TLS.",
+    },
+    {
+        key: "rbac",
+        title: "Role-Based Access",
+        description: "Strict role boundaries keep buyer, seller, and admin data separate.",
+    },
+    {
+        key: "min-priv",
+        title: "Minimum-Privilege Tokens",
+        description: "Short-lived, scoped tokens minimise exposure on every request.",
+    },
+];
+// --- Helpers -----------------------------------------------------------------
+function parseWelcomeDescription(description) {
+    if (!description)
+        return "";
+    try {
+        const parsed = JSON.parse(description);
+        const extracted = parsed.content
+            ?.flatMap((node) => node.content ?? [])
+            .map((leaf) => leaf.text ?? "")
+            .join(" ")
+            .trim();
+        return extracted || description;
+    }
+    catch {
+        return description;
+    }
+}
+/**
+ * Render a single homepage section based on its type and config
+ */
+const AD_SLOT_MAP = {
+    products: "afterFeaturedProducts",
+    reviews: "afterReviews",
+    faq: "afterFAQ",
+};
+function renderSection(section, adSlots, newsletterFormSlot, faqItems) {
+    const { type, config } = section;
+    const adSlotKey = AD_SLOT_MAP[type];
+    const sectionElement = (() => {
+        switch (type) {
+            case "welcome": {
+                const cfg = config;
+                const title = cfg?.h1 || "Discover Amazing Products";
+                const subtitle = parseWelcomeDescription(cfg?.description);
+                const ctaText = cfg?.ctaText || "Shop Now";
+                const ctaLink = cfg?.ctaLink || ROUTES.PUBLIC.PRODUCTS;
+                return (_jsx(WelcomeSection, { title: title, subtitle: subtitle, pillLabel: "India's #1 Marketplace", showCTA: cfg?.showCTA ?? true, ctaLabel: ctaText, ctaHref: ctaLink, secondaryCtaLabel: "Browse All", secondaryCtaHref: ROUTES.PUBLIC.PRODUCTS, trustChips: [
+                        { key: "delivery", emoji: "🚀", label: "Fast Delivery" },
+                        { key: "secure", emoji: "🔒", label: "Secure Payments" },
+                        { key: "rating", emoji: "⭐", label: "4.8+ Rated" },
+                        { key: "returns", emoji: "↩️", label: "Easy Returns" },
+                    ], brandLogoText: "LIR" }));
+            }
+            case "categories": {
+                const cfg = config;
+                return (_jsx(ShopByCategorySection, { title: cfg?.title || "Shop by Category", viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All categories \u2192" }));
+            }
+            case "stats": {
+                const cfg = config;
+                const stats = Array.isArray(cfg?.stats)
+                    ? cfg.stats
+                        .filter((item) => typeof item?.label === "string" &&
+                        item.label.trim().length > 0 &&
+                        typeof item?.value === "string" &&
+                        item.value.trim().length > 0)
+                        .map((item, index) => ({
+                        key: typeof item?.key === "string" && item.key.trim().length > 0
+                            ? item.key
+                            : `stat-${index}`,
+                        label: item.label,
+                        value: item.value,
+                    }))
+                    : [];
+                if (stats.length === 0) {
+                    return null;
+                }
+                return _jsx(StatsCounterSection, { stats: stats });
+            }
+            case "products": {
+                const cfg = config;
+                return (_jsx(FeaturedProductsSection, { title: cfg?.title || "Featured Products", viewMoreHref: ROUTES.PUBLIC.PRODUCTS, viewMoreLabel: "View all products \u2192" }));
+            }
+            case "auctions": {
+                const cfg = config;
+                return (_jsx(FeaturedAuctionsSection, { title: cfg?.title || "Live Auctions", viewMoreHref: ROUTES.PUBLIC.AUCTIONS, viewMoreLabel: "View all auctions \u2192" }));
+            }
+            case "pre-orders": {
+                const cfg = config;
+                return (_jsx(FeaturedPreOrdersSection, { title: cfg?.title || "Reserve Before It Ships", viewMoreHref: ROUTES.PUBLIC.PRE_ORDERS, viewMoreLabel: "View all pre-orders \u2192" }));
+            }
+            case "stores": {
+                const cfg = config;
+                return (_jsx(FeaturedStoresSection, { title: cfg?.title || "Featured Stores", viewMoreHref: ROUTES.PUBLIC.STORES, viewMoreLabel: "View all stores \u2192" }));
+            }
+            case "events": {
+                const cfg = config;
+                return (_jsx(EventsSection, { title: cfg?.title || "Events & Offers", viewMoreHref: ROUTES.PUBLIC.EVENTS, viewMoreLabel: "View all events \u2192" }));
+            }
+            case "reviews": {
+                const cfg = config;
+                return (_jsx(HomepageCustomerReviewsSection, { title: cfg?.title || "What Our Customers Say", viewMoreHref: ROUTES.PUBLIC.REVIEWS, viewMoreLabel: "See all reviews \u2192" }));
+            }
+            case "banner": {
+                const cfg = config;
+                return (_jsx(CTABannerSection, { title: cfg?.content?.title || "Thousands of collectibles. One marketplace.", primaryLabel: "Shop All Products \u2192", primaryHref: ROUTES.PUBLIC.PRODUCTS, secondaryLabel: "Browse Auctions \u2192", secondaryHref: ROUTES.PUBLIC.AUCTIONS }));
+            }
+            case "trust-indicators": {
+                const cfg = config;
+                return (_jsx(TrustFeaturesSection, { title: cfg?.title || "Why Buyers Trust LetiTrip", items: DEFAULT_TRUST_FEATURES }));
+            }
+            case "features": {
+                const cfg = config;
+                return (_jsx(SecurityHighlightsSection, { title: cfg?.title || "Security You Can Trust", pillLabel: "Built for trust", items: DEFAULT_SECURITY_ITEMS, learnMoreHref: ROUTES.PUBLIC.SECURITY, learnMoreLabel: "Learn about our security \u2192" }));
+            }
+            case "whatsapp-community": {
+                const cfg = config;
+                return (_jsx(WhatsAppCommunitySection, { title: cfg?.title || "Join Our WhatsApp Community", descriptionHtml: cfg?.description || "5,000+ members. Get deal alerts, auction updates, and exclusive drops before anyone else.", memberCount: cfg?.memberCount || 5000, groupLink: cfg?.groupLink || "https://chat.whatsapp.com/" }));
+            }
+            case "faq": {
+                const cfg = config;
+                if (!cfg?.showOnHomepage) {
+                    return null;
+                }
+                return (_jsx(FAQSection, { title: cfg?.title || "Frequently Asked Questions", tabs: [], activeTab: "", items: faqItems, viewMoreHref: ROUTES.PUBLIC.FAQS, viewMoreLabel: "View all FAQs \u2192" }));
+            }
+            case "blog-articles": {
+                const cfg = config;
+                return (_jsx(BlogArticlesSection, { title: cfg?.title || "From Our Blog", viewMoreHref: ROUTES.BLOG.LIST, viewMoreLabel: "View all posts \u2192" }));
+            }
+            case "newsletter": {
+                const cfg = config;
+                return (_jsx(NewsletterSection, { title: cfg?.title || "Stay Updated", subtitle: cfg?.description || "Get the latest drops, auctions, and deals in your inbox.", renderForm: () => newsletterFormSlot ?? null }));
+            }
+            case "brands": {
+                const cfg = config;
+                return (_jsx(BrandsSection, { title: cfg?.title || "Top Brands", subtitle: cfg?.subtitle, limit: cfg?.maxBrands || 12, viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All brands \u2192" }));
+            }
+            default:
+                return null;
+        }
+    })();
+    // Return section with optional ad slot before it
+    if (!sectionElement) {
+        return null;
+    }
+    return (_jsxs(React.Fragment, { children: [sectionElement, adSlots && adSlotKey !== undefined && adSlotKey in adSlots && adSlots[adSlotKey]] }, section.id));
+}
+// --- Main View ---------------------------------------------------------------
+export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, } = {}) {
+    // Load carousel slides and sections from DB
+    const slides = await carouselRepository.getActiveSlides().catch(() => []);
+    const siteSettings = await siteSettingsRepository.getSingleton().catch(() => null);
+    const announcementMessage = siteSettings?.announcementBar?.message?.trim() ||
+        "🎉 Up to 15% Off on Pokémon TCG this week — Use code SAVE15";
+    const showAnnouncement = siteSettings?.announcementBar?.enabled ?? true;
+    const [enabledSections, rawFaqItems] = await Promise.all([
+        homepageSectionsRepository.getEnabledSections().catch(() => []),
+        faqsRepository.getHomepageFAQs().catch(() => []),
+    ]);
+    const orderedSections = [...enabledSections].sort((a, b) => {
+        if (a.order !== b.order)
+            return a.order - b.order;
+        const aUpdated = new Date(a.updatedAt).getTime();
+        const bUpdated = new Date(b.updatedAt).getTime();
+        if (aUpdated !== bUpdated)
+            return aUpdated - bUpdated;
+        return a.id.localeCompare(b.id);
+    });
+    const faqItems = rawFaqItems.map((faq) => ({
+        id: faq.id,
+        question: faq.question,
+        answer: typeof faq.answer === "string" ? faq.answer : faq.answer.text,
+    }));
+    // Render with dynamic sections from DB
+    return (_jsxs(Main, { children: [showAnnouncement ? _jsx(AnnouncementBar, { message: announcementMessage }) : null, _jsx(HeroCarousel, { initialSlides: slides }), adSlots?.afterHero, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems))] }));
+}

package/dist/features/homepage/components/NewsletterSection.js

@@ -1,8 +1,7 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading, Section, Text, TextLink } from "../../../ui";
 import { Mail } from "lucide-react";
-// ─── Section ─────────────────────────────────────────────────────────────────
+// --- Section -----------------------------------------------------------------
 export function NewsletterSection({ title, subtitle, privacyLabel, privacyHref, renderForm, className = "", }) {
-    return (_jsxs(Section, { className: `py-16 px-4 relative overflow-hidden ${className}`, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-cobalt/5 to-secondary/10 dark:from-primary/15 dark:via-cobalt/10 dark:to-secondary/15 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/5 dark:bg-primary/10 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -bottom-16 -left-16 w-64 h-64 rounded-full bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none", "aria-hidden": true }), _jsxs("div", { className: "relative z-10 max-w-2xl mx-auto text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto", children: _jsx(Mail, { className: "w-7 h-7 text-primary" }) }), _jsx(Heading, { level: 2, className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3", children: title }), subtitle && (_jsx(Text, { size: "base", className: "text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto", children: subtitle })), renderForm(), privacyLabel && privacyHref && (_jsxs(Text, { size: "xs", className: "text-zinc-400 dark:text-zinc-500 mt-4", children: [privacyLabel, " ", _jsx(TextLink, { href: privacyHref, className: "underline underline-offset-2 hover:text-primary", children: "Privacy Policy" }), "."] }))] })] }));
+    return (_jsxs(Section, { className: `py-16 px-4 relative overflow-hidden ${className}`, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-cobalt/5 to-secondary/10 dark:from-primary/15 dark:via-cobalt/10 dark:to-secondary/15 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/5 dark:bg-primary/10 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -bottom-16 -left-16 w-64 h-64 rounded-full bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none", "aria-hidden": true }), _jsxs("div", { className: "relative z-10 max-w-2xl mx-auto text-center", "data-section": "newslettersection-div-347", children: [_jsx("div", { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto", "data-section": "newslettersection-div-348", children: _jsx(Mail, { className: "w-7 h-7 text-primary" }) }), _jsx(Heading, { level: 2, className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3", children: title }), subtitle && (_jsx(Text, { size: "base", className: "text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto", children: subtitle })), renderForm(), privacyLabel && privacyHref && (_jsxs(Text, { size: "xs", className: "text-zinc-400 dark:text-zinc-500 mt-4", children: [privacyLabel, " ", _jsx(TextLink, { href: privacyHref, className: "underline underline-offset-2 hover:text-primary", children: "Privacy Policy" }), "."] }))] })] }));
 }

package/dist/features/homepage/components/SectionCarousel.js

@@ -1,15 +1,14 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Heading, HorizontalScroller, Section, Span, Text, TextLink, } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
-// ─── Skeleton ────────────────────────────────────────────────────────────────
+// --- Skeleton ----------------------------------------------------------------
 function CarouselSkeleton({ count }) {
     const { skeleton } = THEME_CONSTANTS;
-    return (_jsx("div", { className: "flex gap-4 overflow-hidden px-4", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2", children: [_jsx("div", { className: `aspect-square rounded-xl ${skeleton.image}` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) }));
+    return (_jsx("div", { className: "flex gap-4 overflow-hidden px-4", "data-section": "sectioncarousel-div-349", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2", "data-section": "sectioncarousel-div-350", children: [_jsx("div", { className: `aspect-square rounded-xl ${skeleton.image}` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) }));
 }
-// ─── Component ───────────────────────────────────────────────────────────────
-export function SectionCarousel({ title, description, headingVariant = "default", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = { base: 1, sm: 2, md: 3 }, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek = false, minItemWidth = 220, }) {
+// --- Component ---------------------------------------------------------------
+export function SectionCarousel({ title, description, headingVariant = "default", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = THEME_CONSTANTS.carousel.perView.default, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek = false, minItemWidth = 220, }) {
     const hasBg = Boolean(backgroundImage);
     const useLightText = lightText ?? hasBg;
     const { themed, flex } = THEME_CONSTANTS;
@@ -27,13 +26,20 @@ export function SectionCarousel({ title, description, headingVariant = "default"
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [hasBg && backgroundImage && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 overflow-hidden", children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "hero" }) }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), _jsxs("div", { className: "relative z-10 w-full max-w-7xl mx-auto", children: [_jsxs("div", { className: "text-center mb-6", children: [headingVariant === "editorial" && pillLabel && (_jsx("div", { className: "mb-4", children: _jsxs(Span, { className: pillClass, children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 2, variant: "none", className: [
+            .join(" "), children: [hasBg && backgroundImage && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 overflow-hidden", "data-section": "sectioncarousel-div-351", children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "hero" }) }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), _jsxs("div", { className: "relative z-10 w-full max-w-7xl mx-auto", "data-section": "sectioncarousel-div-352", children: [_jsxs("div", { className: "text-center mb-6", "data-section": "sectioncarousel-div-353", children: [headingVariant === "editorial" && pillLabel && (_jsx("div", { className: "mb-4", "data-section": "sectioncarousel-div-354", children: _jsxs(Span, { className: pillClass, children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 2, variant: "none", className: [
                                     "text-3xl md:text-4xl font-bold mb-2",
                                     headingVariant === "editorial" ? "font-display text-4xl" : "",
                                     headingClass,
                                 ]
                                     .filter(Boolean)
-                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs("div", { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-500 text-xs select-none`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium transition-colors ${useLightText
+                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs("div", { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-500 text-xs select-none`, "aria-hidden": "true", "data-section": "sectioncarousel-div-355", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, 
+                        /* Default behaviour for homepage sections using cards:
+                           - show arrows for easier navigation
+                           - snap to items for a tidy carousel feel
+                           - show fade edges for visual affordance
+                           - hide native scrollbar for cleaner appearance
+                        */
+                        showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", "data-section": "sectioncarousel-div-356", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium transition-colors ${useLightText
                                 ? "bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm"
                                 : "bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400"}`, children: viewMoreLabel }) }))] })] }));
 }

package/dist/features/homepage/components/SecurityHighlightsSection.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Grid, Heading, Section, Span, Text, TextLink } from "../../../ui";
-// ─── Single card ─────────────────────────────────────────────────────────────
+// --- Single card -------------------------------------------------------------
 function SecurityCard({ item, visible, delay, }) {
     const colorClass = item.colorClass ??
         "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30";
@@ -12,9 +12,9 @@ function SecurityCard({ item, visible, delay, }) {
             "rounded-xl border p-5 transition-all duration-500",
             colorClass,
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, children: [item.renderIcon && (_jsx("div", { className: "w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 flex items-center justify-center mb-3", children: _jsx("span", { className: iconColorClass, "aria-hidden": "true", children: item.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Text, { className: "font-semibold mb-1", children: item.title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: item.description })] }));
+        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "securityhighlightssection-div-357", children: [item.renderIcon && (_jsx("div", { className: "w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 flex items-center justify-center mb-3", "data-section": "securityhighlightssection-div-358", children: _jsx("span", { className: iconColorClass, "aria-hidden": "true", children: item.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Text, { className: "font-semibold mb-1", children: item.title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: item.description })] }));
 }
-// ─── Section ─────────────────────────────────────────────────────────────────
+// --- Section -----------------------------------------------------------------
 export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, learnMoreHref, learnMoreLabel = "Learn more →", className = "", }) {
     const { themed } = THEME_CONSTANTS;
     const sectionRef = useRef(null);
@@ -32,5 +32,5 @@ export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, l
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `py-14 px-4 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "text-center mb-10", children: [pillLabel && (_jsx(Span, { className: "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `mt-4 text-3xl md:text-4xl font-bold ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-2 max-w-xl mx-auto", children: subtitle }))] }), _jsx(Grid, { gap: "none", className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5", children: items.map((item, index) => (_jsx(SecurityCard, { item: item, visible: visible, delay: index * 100 }, item.key))) }), learnMoreHref && (_jsx("div", { className: "text-center mt-8", children: _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `py-14 px-4 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "max-w-6xl mx-auto", "data-section": "securityhighlightssection-div-359", children: [_jsxs("div", { className: "text-center mb-10", "data-section": "securityhighlightssection-div-360", children: [pillLabel && (_jsx(Span, { className: "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `mt-4 text-3xl md:text-4xl font-bold ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-2 max-w-xl mx-auto", children: subtitle }))] }), _jsx(Grid, { gap: "none", className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5", children: items.map((item, index) => (_jsx(SecurityCard, { item: item, visible: visible, delay: index * 100 }, item.key))) }), learnMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "securityhighlightssection-div-361", children: _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/components/ShopByCategorySection.d.ts

@@ -0,0 +1,9 @@
+export interface ShopByCategorySectionProps {
+    title?: string;
+    subtitle?: string;
+    limit?: number;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    className?: string;
+}
+export declare function ShopByCategorySection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, }: ShopByCategorySectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/ShopByCategorySection.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, HorizontalScroller, Section, Text } from "../../../ui";
+import { ROUTES } from "../../../next";
+import { useTopCategories } from "../hooks/useTopCategories";
+function CategoryChip({ category }) {
+    const iconSrc = category.display?.icon;
+    const coverImage = category.display?.coverImage;
+    const initial = category.name[0]?.toUpperCase() ?? "?";
+    const productCount = category.metrics?.productCount ?? 0;
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex min-h-[220px] min-w-[180px] max-w-[220px] flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 dark:hover:border-primary-600", children: [coverImage ? (_jsx("div", { className: "aspect-video w-full overflow-hidden bg-zinc-100 dark:bg-slate-800", "data-section": "shopbycategorysection-div-362", children: _jsx("img", { src: coverImage, alt: category.name, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx("div", { className: "aspect-video w-full bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700" })), _jsxs("div", { className: "flex flex-1 flex-col p-3 text-left", "data-section": "shopbycategorysection-div-363", children: [_jsx("div", { className: "mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", "data-section": "shopbycategorysection-div-364", children: iconSrc ? (_jsx("img", { src: iconSrc, alt: "", className: "h-6 w-6 rounded object-cover", "aria-hidden": "true" })) : (initial) }), _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-semibold text-zinc-800 dark:text-zinc-200`, children: category.name }), _jsxs(Text, { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: [productCount.toLocaleString(), " items"] }), _jsx(Text, { className: "mt-auto pt-3 text-xs font-medium text-primary dark:text-primary-400", children: "Browse category \u2192" })] })] }));
+}
+export function ShopByCategorySection({ title = "Shop by Category", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "View all categories →", className = "", }) {
+    const { themed } = THEME_CONSTANTS;
+    const { data: categories = [], isLoading } = useTopCategories(limit);
+    if (!isLoading && categories.length === 0)
+        return null;
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", "data-section": "shopbycategorysection-div-365", children: [_jsxs("div", { className: "mb-6 text-center", "data-section": "shopbycategorysection-div-366", children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden px-1", "data-section": "shopbycategorysection-div-367", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: "flex-none h-[104px] w-[108px] animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: THEME_CONSTANTS.carousel.perView.compact, gap: 16, keyExtractor: (cat) => cat.id, minItemWidth: 180 })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", "data-section": "shopbycategorysection-div-368", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
+}