@mohasinac/appkit 2.3.0 → 2.3.2

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

@@ -0,0 +1,262 @@
+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 -----------------------------------------------------------------
+/** Strip leading emoji/symbols that admins sometimes prefix onto DB titles. */
+function cleanTitle(raw) {
+    if (!raw)
+        return raw;
+    const cleaned = raw.replace(/^[^\p{L}\p{N}]+/u, "").trim();
+    return cleaned || raw;
+}
+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 = {
+    carousel: "afterHero",
+    products: "afterFeaturedProducts",
+    reviews: "afterReviews",
+    faq: "afterFAQ",
+};
+function renderSection(section, adSlots, newsletterFormSlot, faqItems, slides) {
+    const { type, config } = section;
+    const adSlotKey = AD_SLOT_MAP[type];
+    const sectionElement = (() => {
+        switch (type) {
+            case "carousel":
+                return _jsx(HeroCarousel, { initialSlides: slides });
+            case "welcome": {
+                const cfg = config;
+                const title = cleanTitle(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: cleanTitle(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: cleanTitle(cfg?.title) || "Featured Products", viewMoreHref: ROUTES.PUBLIC.PRODUCTS, viewMoreLabel: "View all products \u2192" }));
+            }
+            case "auctions": {
+                const cfg = config;
+                return (_jsx(FeaturedAuctionsSection, { title: cleanTitle(cfg?.title) || "Live Auctions", viewMoreHref: ROUTES.PUBLIC.AUCTIONS, viewMoreLabel: "View all auctions \u2192" }));
+            }
+            case "pre-orders": {
+                const cfg = config;
+                return (_jsx(FeaturedPreOrdersSection, { title: cleanTitle(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: cleanTitle(cfg?.title) || "Featured Stores", viewMoreHref: ROUTES.PUBLIC.STORES, viewMoreLabel: "View all stores \u2192" }));
+            }
+            case "events": {
+                const cfg = config;
+                return (_jsx(EventsSection, { title: cleanTitle(cfg?.title) || "Events & Offers", viewMoreHref: ROUTES.PUBLIC.EVENTS, viewMoreLabel: "View all events \u2192" }));
+            }
+            case "reviews": {
+                const cfg = config;
+                return (_jsx(HomepageCustomerReviewsSection, { title: cleanTitle(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: cleanTitle(cfg?.title) || "Why Buyers Trust LetiTrip", items: DEFAULT_TRUST_FEATURES }));
+            }
+            case "features": {
+                const cfg = config;
+                return (_jsx(SecurityHighlightsSection, { title: cleanTitle(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: cleanTitle(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: cleanTitle(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: cleanTitle(cfg?.title) || "From Our Blog", viewMoreHref: ROUTES.BLOG.LIST, viewMoreLabel: "View all posts \u2192" }));
+            }
+            case "newsletter": {
+                const cfg = config;
+                return (_jsx(NewsletterSection, { title: cleanTitle(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: cleanTitle(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, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, slides))] }));
+}

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

@@ -0,0 +1,22 @@
+export interface NewsletterBannerProps {
+    /**
+     * Called when the user submits the form. Throw on failure — the component
+     * will show a generic error message.
+     */
+    onSubscribe: (email: string) => Promise<void>;
+    /** Eyebrow label. Default: "STAY CONNECTED". */
+    eyebrow?: string;
+    /** Section heading. Default: "Join Our Newsletter". */
+    heading?: string;
+    /** Sub-heading. Default: "Get exclusive offers, new arrivals and more." */
+    subheading?: string;
+    /** Email placeholder text. Default: "Enter your email". */
+    placeholder?: string;
+    /** CTA button label. Default: "Subscribe". */
+    ctaLabel?: string;
+    /** Success message shown after subscribe. Default: "You're in! Check your inbox." */
+    successMessage?: string;
+    /** Error message on failure. Default: "Something went wrong. Please try again." */
+    errorMessage?: string;
+}
+export declare function NewsletterBanner({ onSubscribe, eyebrow, heading, subheading, placeholder, ctaLabel, successMessage, errorMessage, }: NewsletterBannerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Div, Heading, Input, Section, Span, Text, } from "../../../ui";
+export function NewsletterBanner({ onSubscribe, eyebrow = "STAY CONNECTED", heading = "Join Our Newsletter", subheading = "Get exclusive offers, new arrivals and more.", placeholder = "Enter your email", ctaLabel = "Subscribe", successMessage = "You're in! Check your inbox.", errorMessage = "Something went wrong. Please try again.", }) {
+    const [email, setEmail] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [success, setSuccess] = useState(false);
+    const [error, setError] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        if (!email)
+            return;
+        setLoading(true);
+        setError(false);
+        try {
+            await onSubscribe(email);
+            setEmail("");
+            setSuccess(true);
+        }
+        catch {
+            setError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    return (_jsxs(Section, { className: "relative overflow-hidden py-24", style: {
+            background: "var(--newsletter-bg, linear-gradient(135deg, var(--color-primary, #1e40af) 0%, var(--color-secondary, #7c3aed) 100%))",
+        }, children: [_jsx(Div, { className: "pointer-events-none absolute -top-20 -right-20 h-60 w-60 rounded-full border border-white/[0.06]" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full border border-dashed border-white/[0.08]" }), _jsxs(Div, { className: "relative mx-auto max-w-2xl px-4 text-center sm:px-6", children: [_jsx(Span, { className: "mb-4 inline-flex rounded-full border border-white/20 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white/70", children: eyebrow }), _jsx(Heading, { level: 2, className: "text-3xl font-bold text-white sm:text-4xl", children: heading }), _jsx(Text, { className: "mt-4 text-white/60", children: subheading }), success ? (_jsx(Text, { className: "mt-8 rounded-xl border border-white/20 bg-white/10 px-6 py-4 text-sm font-semibold text-white", children: successMessage })) : (_jsxs("form", { onSubmit: handleSubmit, className: "mt-8 flex gap-3", children: [_jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, required: true, className: "flex-1 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/40" }), _jsx(Button, { type: "submit", disabled: loading, variant: "primary", className: "shrink-0 rounded-xl px-5 py-3 text-sm font-bold transition-opacity disabled:opacity-60", style: {
+                                    background: "var(--color-yellow, #FFE500)",
+                                    color: "#0D0D0D",
+                                }, children: loading ? "…" : ctaLabel })] })), error && (_jsx(Text, { className: "mt-3 text-sm text-red-300", children: errorMessage })), _jsx(Text, { className: "mt-4 text-xs text-white/40", children: "No spam, ever. Unsubscribe anytime." })] })] }));
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface NewsletterSectionProps {
+    title: string;
+    subtitle?: string;
+    privacyLabel?: string;
+    privacyHref?: string;
+    renderForm: () => React.ReactNode;
+    className?: string;
+}
+export declare function NewsletterSection({ title, subtitle, privacyLabel, privacyHref, renderForm, className, }: NewsletterSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Section, Text, TextLink } from "../../../ui";
+import { Mail } from "lucide-react";
+// --- 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", "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/PromoGrid.d.ts

@@ -0,0 +1,9 @@
+import type { PromoBanner } from "../types";
+export interface PromoGridProps {
+    banners: PromoBanner[];
+    /** Eyebrow label above the section heading. Default: "LIMITED TIME". */
+    eyebrow?: string;
+    /** Section heading. Default: "HOT DEALS & PROMOS". */
+    heading?: string;
+}
+export declare function PromoGrid({ banners, eyebrow, heading, }: PromoGridProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Link from "next/link";
+import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
+export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DEALS & PROMOS", }) {
+    if (banners.length === 0)
+        return null;
+    return (_jsx(Section, { className: "py-10 sm:py-16", style: {
+            background: "var(--dark-section-alt)",
+            borderTop: "1px solid rgba(255,255,255,0.06)",
+            borderBottom: "1px solid rgba(255,255,255,0.06)",
+        }, children: _jsxs(Div, { className: "mx-auto max-w-7xl px-4", children: [_jsx(Row, { wrap: true, align: "end", justify: "between", gap: "sm", className: "mb-7 gap-y-2", children: _jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-black uppercase tracking-widest", style: { color: "var(--color-red)", letterSpacing: "0.18em" }, children: eyebrow }), _jsx(Heading, { level: 2, style: {
+                                    fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                    fontSize: "clamp(1.6rem, 4vw, 2.4rem)",
+                                    letterSpacing: "0.08em",
+                                    color: "#FFFFFF",
+                                    lineHeight: 1,
+                                }, children: heading })] }) }), _jsx(Div, { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: banners.slice(0, 4).map((banner, i) => (_jsxs(Link, { href: banner.ctaUrl, className: `group relative block overflow-hidden ${i === 0 ? "sm:row-span-2" : ""}`, style: {
+                            minHeight: i === 0
+                                ? "clamp(220px, 32vh, 480px)"
+                                : "clamp(130px, 16vh, 240px)",
+                            background: "var(--dark-section-card)",
+                        }, children: [_jsx(Image, { src: banner.image, alt: banner.title, fill: true, className: "object-cover transition-transform duration-500 group-hover:scale-105", sizes: i === 0
+                                    ? "(max-width: 640px) 100vw, 40vw"
+                                    : "(max-width: 640px) 50vw, 30vw" }), _jsx(Div, { className: "absolute inset-0", style: {
+                                    background: i === 0
+                                        ? "linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%)"
+                                        : "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 100%)",
+                                } }), _jsx(Div, { className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", style: { boxShadow: "inset 0 0 0 2px var(--color-yellow)" } }), _jsxs(Div, { className: "absolute bottom-0 left-0 right-0 p-4", children: [_jsx(Text, { className: "leading-tight", style: {
+                                            fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                            fontSize: i === 0 ? "1.35rem" : "1rem",
+                                            letterSpacing: "0.06em",
+                                            color: "#FFFFFF",
+                                        }, children: banner.title }), _jsxs(Span, { className: "mt-1 inline-flex items-center gap-1 text-xs font-black uppercase", style: { color: "var(--color-yellow)" }, children: [banner.ctaLabel, " \u2192"] })] })] }, banner.id))) })] }) }));
+}

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { type PerViewConfig } from "../../../ui";
+export interface SectionCarouselProps<T = unknown> {
+    /** Section heading */
+    title: string;
+    /** Optional subtitle below the heading */
+    description?: string;
+    /**
+     * Heading visual variant.
+     * - `"default"` — standard themed text
+     * - `"gradient"` — primary→cobalt gradient clip text
+     * - `"editorial"` — pill + font-display H2 + ornament
+     */
+    headingVariant?: "default" | "gradient" | "editorial";
+    /**
+     * Pill label shown above the heading when `headingVariant="editorial"`.
+     * Required for editorial variant; ignored otherwise.
+     */
+    pillLabel?: string;
+    /**
+     * URL of an image to use as the section background.
+     * A dark semi-transparent overlay is applied so text remains readable.
+     */
+    backgroundImage?: string;
+    /** Route for the "View More" button. Omit to hide the button. */
+    viewMoreHref?: string;
+    /**
+     * Label for the "View More" button.
+     * Defaults to "View all →" when omitted.
+     */
+    viewMoreLabel?: string;
+    /** Items to render in the carousel. */
+    items: T[];
+    /** Renders a single item. Receives (item, index). */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** Responsive items-per-view breakpoint config. Default: { base: 1, sm: 2, md: 3 } */
+    perView?: PerViewConfig;
+    /** Gap between cards in px. Default: 16 */
+    gap?: number;
+    /** Enable circular auto-scroll. Default: false */
+    autoScroll?: boolean;
+    /** Interval between auto-scroll steps in ms. Default: 3500 */
+    autoScrollInterval?: number;
+    /** Key extractor for the HorizontalScroller. */
+    keyExtractor?: (item: T, index: number) => string;
+    /**
+     * Number of rows (for 2-row grid mode).
+     * Auto-scroll is disabled in grid mode.
+     * Default: 1
+     */
+    rows?: number;
+    /** Additional classes on the outer `<Section>`. */
+    className?: string;
+    /** Show a loading skeleton instead of items. */
+    isLoading?: boolean;
+    /** Number of skeleton cards to show. Default: 4 */
+    skeletonCount?: number;
+    /**
+     * Whether the heading and description text should be light-coloured.
+     * Defaults to `true` when `backgroundImage` is provided, `false` otherwise.
+     */
+    lightText?: boolean;
+    /**
+     * When `true`, adds a negative right margin to the scroller wrapper so the
+     * last visible item peeks at the edge.
+     * Default: false
+     */
+    showPeek?: boolean;
+    /**
+     * Minimum item width in px.
+     * Default: 220
+     */
+    minItemWidth?: number;
+}
+export declare function SectionCarousel<T = unknown>({ title, description, headingVariant, pillLabel, backgroundImage, viewMoreHref, viewMoreLabel, items, renderItem, perView, gap, autoScroll, autoScrollInterval, keyExtractor, rows, className, isLoading, skeletonCount, lightText, showPeek, minItemWidth, }: SectionCarouselProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+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 ----------------------------------------------------------------
+function CarouselSkeleton({ count }) {
+    const { skeleton } = THEME_CONSTANTS;
+    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 = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = THEME_CONSTANTS.carousel.perView.standard, 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;
+    const headingClass = useLightText
+        ? "text-white"
+        : headingVariant === "gradient"
+            ? "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent"
+            : themed.textPrimary;
+    const descVariant = useLightText ? "text-white/80" : themed.textSecondary;
+    const pillClass = "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";
+    return (_jsxs(Section, { className: [
+            "relative overflow-hidden w-full",
+            hasBg ? "" : themed.bgSecondary,
+            "p-8",
+            className,
+        ]
+            .filter(Boolean)
+            .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", "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 flex justify-center", "data-section": "sectioncarousel-div-356", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-1.5 rounded-lg border px-6 py-2.5 text-sm font-medium transition-colors ${useLightText
+                                ? "border-white/40 text-white hover:bg-white/10"
+                                : "border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800"}`, children: viewMoreLabel }) }))] })] }));
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+export interface SecurityHighlightItem {
+    key: string;
+    title: string;
+    description: string;
+    renderIcon?: (props: {
+        className?: string;
+    }) => React.ReactNode;
+    colorClass?: string;
+    iconColorClass?: string;
+}
+export interface SecurityHighlightsSectionProps {
+    title: string;
+    subtitle?: string;
+    pillLabel?: string;
+    items: SecurityHighlightItem[];
+    learnMoreHref?: string;
+    learnMoreLabel?: string;
+    className?: string;
+}
+export declare function SecurityHighlightsSection({ title, subtitle, pillLabel, items, learnMoreHref, learnMoreLabel, className, }: SecurityHighlightsSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+"use client";
+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 -------------------------------------------------------------
+function SecurityCard({ item, visible, delay, }) {
+    const colorClass = item.colorClass ??
+        "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30";
+    const iconColorClass = item.iconColorClass ?? "text-primary";
+    return (_jsxs("div", { className: [
+            "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` }, "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 -----------------------------------------------------------------
+export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, learnMoreHref, learnMoreLabel = "Learn more →", className = "", }) {
+    const { themed } = THEME_CONSTANTS;
+    const sectionRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const el = sectionRef.current;
+        if (!el)
+            return;
+        const observer = new IntersectionObserver(([entry], obs) => {
+            if (entry.isIntersecting) {
+                setVisible(true);
+                obs.disconnect();
+            }
+        }, { threshold: 0.15 });
+        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", "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 w-full min-h-[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.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), 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 }) }))] }) }));
+}

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

@@ -0,0 +1,13 @@
+export interface SiteFeatureItem {
+    id: string;
+    icon: string;
+    title: string;
+    description: string;
+}
+export interface SiteFeaturesSectionProps {
+    title: string;
+    subtitle?: string;
+    features: SiteFeatureItem[];
+    className?: string;
+}
+export declare function SiteFeaturesSection({ title, subtitle, features, className, }: SiteFeaturesSectionProps): import("react/jsx-runtime").JSX.Element;