@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/features/homepage/api/carousel/[id]/route.js

@@ -12,7 +12,7 @@ import { NextResponse } from "next/server.js";
 import { z } from "zod";
 import { getProviders } from "../../../../../contracts";
 import { createRouteHandler } from "../../../../../next";
-// ──── GET /api/carousel/[id] ──────────────────────────────────────────────────
+// ---- GET /api/carousel/[id] --------------------------------------------------
 export async function GET(_request, context) {
     try {
         const { id } = await context.params;
@@ -33,7 +33,7 @@ export async function GET(_request, context) {
     }
 }
 export { GET as carouselItemGET };
-// ──── PATCH /api/carousel/[id] ─────────────────────────────────────────────────
+// ---- PATCH /api/carousel/[id] -------------------------------------------------
 const carouselSlideUpdateSchema = z
     .object({
     title: z.string().min(1).max(200).optional(),
@@ -101,7 +101,7 @@ export const carouselItemPATCH = createRouteHandler({
         return NextResponse.json({ success: true, data: updated });
     },
 });
-// ──── DELETE /api/carousel/[id] ───────────────────────────────────────────────
+// ---- DELETE /api/carousel/[id] -----------------------------------------------
 export const carouselItemDELETE = createRouteHandler({
     auth: true,
     roles: ["admin"],

package/dist/features/homepage/api/carousel/route.js

@@ -34,7 +34,7 @@ async function getRoleFromSession(request) {
     }
 }
 const MAX_ACTIVE_SLIDES = 5;
-// ─── GET /api/carousel ────────────────────────────────────────────────────────
+// --- GET /api/carousel --------------------------------------------------------
 export async function GET(request) {
     try {
         const url = new URL(request.url);

package/dist/features/homepage/api/route.js

@@ -33,7 +33,7 @@ async function getRoleFromSession(request) {
         return null;
     }
 }
-// ─── GET /api/homepage-sections ───────────────────────────────────────────────
+// --- GET /api/homepage-sections -----------------------------------------------
 export async function GET(request) {
     try {
         const url = new URL(request.url);

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

@@ -0,0 +1,28 @@
+import React from "react";
+import type { AdSlotId } from "../ad-registry";
+export interface AdSlotProps {
+    /** The registered slot id to render. */
+    id: AdSlotId;
+    /**
+     * Manual ad content — rendered only when the slot's provider is `"manual"`.
+     * Pass any ReactNode: an image, a promotional banner, etc.
+     */
+    manualContent?: React.ReactNode;
+    className?: string;
+}
+/**
+ * `<AdSlot>` renders an ad based on the registered configuration for `id`.
+ *
+ * Renders nothing (zero height) when:
+ * - The slot id is not registered
+ * - `enabled: false` in config
+ * - `requiresConsent: true` and consent has not been granted
+ *
+ * When `reservedHeight` is set in the config, the container always reserves
+ * that height to prevent CLS — even before the ad loads.
+ *
+ * @example
+ * <AdSlot id="homepage-hero-banner" />
+ * <AdSlot id="listing-between-rows" manualContent={<PromoBanner />} />
+ */
+export declare function AdSlot({ id, manualContent, className }: AdSlotProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { getAdSlot, isAdSlotRenderable } from "../ad-registry";
+// ---------------------------------------------------------------------------
+// Sub-renderers
+// ---------------------------------------------------------------------------
+function AdsenseAd({ config }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (window.adsbygoogle = window.adsbygoogle || []).push({});
+        }
+        catch {
+            // AdSense not loaded yet — no-op
+        }
+    }, []);
+    return (_jsx("div", { ref: ref, "data-section": "adslot-div-296", children: _jsx("ins", { className: "adsbygoogle", style: { display: "block" }, "data-ad-client": config.adsenseClient ?? "", "data-ad-slot": config.adsenseSlot ?? "", "data-ad-format": config.adsenseFormat ?? "auto", "data-full-width-responsive": "true" }) }));
+}
+function ThirdPartyAd({ config }) {
+    if (config.thirdPartyUrl) {
+        return (_jsx("iframe", { src: config.thirdPartyUrl, width: config.thirdPartyWidth ?? "100%", height: config.thirdPartyHeight ?? "90", scrolling: "no", frameBorder: "0", title: "Advertisement", style: { border: 0, overflow: "hidden" }, loading: "lazy" }));
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// Primary component
+// ---------------------------------------------------------------------------
+/**
+ * `<AdSlot>` renders an ad based on the registered configuration for `id`.
+ *
+ * Renders nothing (zero height) when:
+ * - The slot id is not registered
+ * - `enabled: false` in config
+ * - `requiresConsent: true` and consent has not been granted
+ *
+ * When `reservedHeight` is set in the config, the container always reserves
+ * that height to prevent CLS — even before the ad loads.
+ *
+ * @example
+ * <AdSlot id="homepage-hero-banner" />
+ * <AdSlot id="listing-between-rows" manualContent={<PromoBanner />} />
+ */
+export function AdSlot({ id, manualContent, className = "" }) {
+    const [hydrated, setHydrated] = useState(false);
+    useEffect(() => {
+        setHydrated(true);
+    }, []);
+    if (!hydrated) {
+        return null;
+    }
+    const config = getAdSlot(id);
+    const renderable = isAdSlotRenderable(id);
+    const reservedStyle = config?.reservedHeight
+        ? { minHeight: config.reservedHeight }
+        : undefined;
+    if (!config || !renderable) {
+        // Preserve reserved space even when ad is not shown (avoids layout jumps
+        // when ads are re-enabled after consent grant in the same session).
+        if (config?.reservedHeight && config?.enabled !== false) {
+            return (_jsx("div", { className: className, style: reservedStyle, "aria-hidden": "true", "data-ad-slot-id": id, "data-ad-slot-state": "awaiting-consent" }));
+        }
+        return null;
+    }
+    const content = renderProvider(config.provider, config, manualContent);
+    return (_jsx("div", { className: className, style: reservedStyle, "data-ad-slot-id": id, "aria-label": "Advertisement", children: content }));
+}
+// ---------------------------------------------------------------------------
+// Provider dispatch
+// ---------------------------------------------------------------------------
+function renderProvider(provider, config, manualContent) {
+    switch (provider) {
+        case "manual":
+            return manualContent ?? null;
+        case "adsense":
+            return _jsx(AdsenseAd, { config: config });
+        case "thirdParty":
+            return _jsx(ThirdPartyAd, { config: config });
+        default:
+            return null;
+    }
+}

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

@@ -1,23 +1,23 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
 import { Button, Heading, Row, Section, Span, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { ArrowRight, Sparkles } from "lucide-react";
-// ─── Component ───────────────────────────────────────────────────────────────
+// --- Component ---------------------------------------------------------------
 export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", onCtaClick, backgroundImage, backgroundColor, tagLabel, isLoading = false, compact = false, className = "", }) {
     const wrapClass = "bg-gradient-to-br from-amber-50/40 to-orange-50/20 dark:from-amber-950/10 dark:to-orange-950/5";
     if (isLoading) {
-        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-297", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
     }
-    // ── Split layout: when a backgroundImage is provided ──
+    // -- Split layout: when a backgroundImage is provided --
     if (backgroundImage) {
-        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", children: _jsx("div", { className: "relative overflow-hidden rounded-2xl bg-zinc-900 shadow-xl", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 min-h-[clamp(300px,40vh,420px)]", children: [_jsxs("div", { className: "relative aspect-[4/3] md:aspect-auto order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]", children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx("div", { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs("div", { className: "relative flex flex-col justify-center px-8 py-10 md:px-12 md:py-14", children: [_jsx("div", { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-298", children: _jsx("div", { className: "relative overflow-hidden rounded-2xl bg-zinc-900 shadow-xl", "data-section": "advertisementbanner-div-299", children: _jsxs("div", { className: `${THEME_CONSTANTS.grid.cols2Md} min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-300", children: [_jsxs("div", { className: `relative ${THEME_CONSTANTS.card.aspectBanner} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-301", children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx("div", { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs("div", { className: "relative flex flex-col justify-center px-8 py-10 md:px-12 md:py-14", "data-section": "advertisementbanner-div-302", children: [_jsx("div", { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", "data-section": "advertisementbanner-div-303", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
     }
-    // ── Full-width gradient layout ──
-    return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", children: _jsxs("div", { className: [
+    // -- Full-width gradient layout --
+    return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-304", children: _jsxs("div", { className: [
                     "relative overflow-hidden rounded-2xl flex items-center",
                     compact
                         ? "h-[clamp(112px,16vh,160px)]"
                         : "min-h-[clamp(240px,34vh,360px)]",
-                ].join(" "), style: backgroundColor ? { backgroundColor } : undefined, children: [!backgroundColor && (_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600", "aria-hidden": true })), _jsxs("div", { className: "absolute inset-0 overflow-hidden", "aria-hidden": true, children: [_jsx("div", { className: "absolute -top-16 -left-16 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse" }), _jsx("div", { className: "absolute -bottom-16 right-0 w-80 h-80 rounded-full bg-cobalt/20 blur-3xl animate-pulse" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full px-6 py-4 gap-4 flex-wrap", children: [_jsxs("div", { className: "inline-flex items-center gap-2", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { className: "text-white font-semibold text-sm", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: "bg-white text-indigo-700 hover:bg-zinc-50 font-semibold gap-1.5 flex-shrink-0", children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs("div", { className: "relative z-10 w-full max-w-4xl mx-auto px-6 py-12 md:py-16 text-center", children: [tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 bg-white/15 text-white/90 text-xs font-semibold uppercase tracking-widest px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm shadow-sm", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-5xl lg:text-6xl font-extrabold text-white mb-4 drop-shadow-lg leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white text-base md:text-xl mb-10 max-w-2xl mx-auto", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "bg-white text-indigo-700 hover:bg-zinc-50 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
+                ].join(" "), style: backgroundColor ? { backgroundColor } : undefined, "data-section": "advertisementbanner-div-305", children: [!backgroundColor && (_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600", "aria-hidden": true })), _jsxs("div", { className: "absolute inset-0 overflow-hidden", "aria-hidden": true, "data-section": "advertisementbanner-div-306", children: [_jsx("div", { className: "absolute -top-16 -left-16 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse" }), _jsx("div", { className: "absolute -bottom-16 right-0 w-80 h-80 rounded-full bg-cobalt/20 blur-3xl animate-pulse" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full px-6 py-4 gap-4 flex-wrap", children: [_jsxs("div", { className: "inline-flex items-center gap-2", "data-section": "advertisementbanner-div-307", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { className: "text-white font-semibold text-sm", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: "bg-white text-indigo-700 hover:bg-zinc-50 font-semibold gap-1.5 flex-shrink-0", children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs("div", { className: "relative z-10 w-full max-w-4xl mx-auto px-6 py-12 md:py-16 text-center", "data-section": "advertisementbanner-div-308", children: [tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 bg-white/15 text-white/90 text-xs font-semibold uppercase tracking-widest px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm shadow-sm", "data-section": "advertisementbanner-div-309", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-5xl lg:text-6xl font-extrabold text-white mb-4 drop-shadow-lg leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white text-base md:text-xl mb-10 max-w-2xl mx-auto", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "bg-white text-indigo-700 hover:bg-zinc-50 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
 }

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

@@ -0,0 +1,5 @@
+export interface AnnouncementBarProps {
+    message: string;
+    className?: string;
+}
+export declare function AnnouncementBar({ message, className }: AnnouncementBarProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { X } from "lucide-react";
+export function AnnouncementBar({ message, className = "" }) {
+    const [dismissed, setDismissed] = useState(false);
+    if (dismissed)
+        return null;
+    return (_jsx("div", { className: `relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-primary-700 ${className}`, role: "banner", "data-section": "announcementbar-div-310", children: _jsx("div", { className: "container mx-auto max-w-[1920px] px-4 sm:px-6 lg:px-8", "data-section": "announcementbar-div-311", children: _jsxs("div", { className: "relative flex items-center justify-center py-2 text-center text-sm font-medium text-white", "data-section": "announcementbar-div-312", children: [_jsx("span", { children: message }), _jsx("button", { type: "button", onClick: () => setDismissed(true), className: "absolute right-0 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white", "aria-label": "Dismiss announcement", children: _jsx(X, { className: "h-4 w-4" }) })] }) }) }));
+}

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

@@ -1,4 +1,3 @@
-import "client-only";
 import type { BeforeAfterItem } from "../types";
 export interface BeforeAfterCardProps {
     item: BeforeAfterItem;

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

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useRef, useState, useCallback, useEffect } from "react";
 import Image from "next/image";
 import { Div, Span, Text } from "../../../ui";

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

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

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useBlogArticles } from "../hooks/useBlogArticles";
+import { BlogFeaturedCard } from "../../blog/components/BlogFeaturedCard";
+import { ROUTES } from "../../../next";
+export function BlogArticlesSection({ title = "From Our Blog", description, viewMoreHref, viewMoreLabel = "View all posts →", className = "", }) {
+    const { data, isLoading } = useBlogArticles();
+    const items = data?.posts ?? [];
+    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
+}

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

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

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

@@ -0,0 +1,20 @@
+"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 { useTopBrands } from "../hooks/useTopBrands";
+function BrandLogo({ brand }) {
+    const iconSrc = brand.display?.icon;
+    const coverImage = brand.display?.coverImage;
+    const initial = brand.name[0]?.toUpperCase() ?? "?";
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-24 w-28 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900", children: [iconSrc || coverImage ? (_jsx("img", { src: iconSrc ?? coverImage, alt: brand.name, className: "h-10 w-10 rounded object-contain" })) : (_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
+}
+export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", }) {
+    const { themed } = THEME_CONSTANTS;
+    const { data: brands = [], isLoading } = useTopBrands(limit);
+    if (!isLoading && brands.length === 0)
+        return null;
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { 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 }))] }), viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:underline", children: viewMoreLabel }))] }), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-24 w-28 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false }))] }) }));
+}

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

@@ -0,0 +1,10 @@
+export interface CTABannerSectionProps {
+    title?: string;
+    subtitle?: string;
+    primaryLabel?: string;
+    primaryHref?: string;
+    secondaryLabel?: string;
+    secondaryHref?: string;
+    className?: string;
+}
+export declare function CTABannerSection({ title, subtitle, primaryLabel, primaryHref, secondaryLabel, secondaryHref, className, }: CTABannerSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Section } from "../../../ui";
+export function CTABannerSection({ title = "Thousands of collectibles. One marketplace.", subtitle, primaryLabel = "Shop All Products →", primaryHref = "/products", secondaryLabel = "Browse Auctions →", secondaryHref = "/auctions", className = "", }) {
+    return (_jsx(Section, { className: `bg-gradient-to-r from-primary-600 to-primary-700 py-16 px-4 ${className}`, children: _jsxs("div", { className: "mx-auto max-w-3xl text-center", "data-section": "ctabannersection-div-313", children: [_jsx("span", { className: "mb-4 inline-block text-2xl", "aria-hidden": "true", children: "\u2728" }), _jsx("h2", { className: "text-2xl font-bold text-white md:text-3xl lg:text-4xl", children: title }), subtitle && (_jsx("p", { className: "mt-3 text-base text-white/80", children: subtitle })), _jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4", "data-section": "ctabannersection-div-314", children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-8 py-3 text-sm font-semibold text-primary-700 shadow-sm transition-all hover:bg-zinc-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-8 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
+}

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

@@ -1,4 +1,3 @@
-import "client-only";
 import type { CharacterHotspotConfig, HotspotPin } from "../types";
 export interface CharacterHotspotProps {
     config?: CharacterHotspotConfig | null;

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

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useState, useCallback, useEffect, useRef } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { THEME_CONSTANTS } from "../../../tokens";
 import { useMediaQuery } from "../../../react";
 import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
-/* ── Fallback when no Firestore config is saved yet ──────────────────────────
+/* -- Fallback when no Firestore config is saved yet --------------------------
    Consumers can override the full config via the `config` prop.
-───────────────────────────────────────────────────────────────── */
+----------------------------------------------------------------- */
 const FALLBACK_IMAGE = "/animevssuperhero.jpg";
 const FALLBACK_IMAGE_ALT = "DC, Marvel and Anime characters";
 const DEFAULT_HOTSPOTS = [
@@ -352,7 +352,7 @@ function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, univers
                                                 background: active.accent,
                                                 color: active.accent === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
                                                 borderRadius: 4,
-                                            }, children: [active.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setActiveId(null), className: "px-5 py-3 text-sm font-bold rounded", style: { background: "#F1F5F9", color: "#475569" }, children: "Close" })] })] })] }) })), _jsx(Div, { className: "mx-auto max-w-7xl px-4 py-6 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6", style: { borderTop: "1px solid rgba(255,255,255,0.08)" }, children: universeLinks.map(({ label, href, color, icon }) => (_jsxs(Link, { href: href, className: "group flex items-center gap-2.5 px-3 py-2.5 rounded-sm transition-all hover:-translate-y-0.5", style: {
+                                            }, children: [active.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setActiveId(null), className: "px-5 py-3 text-sm font-bold rounded", style: { background: "#F1F5F9", color: "#475569" }, children: "Close" })] })] })] }) })), _jsx(Div, { className: `mx-auto max-w-7xl px-4 py-6 ${THEME_CONSTANTS.grid.cols6Lg} gap-3`, style: { borderTop: "1px solid rgba(255,255,255,0.08)" }, children: universeLinks.map(({ label, href, color, icon }) => (_jsxs(Link, { href: href, className: "group flex items-center gap-2.5 px-3 py-2.5 rounded-sm transition-all hover:-translate-y-0.5", style: {
                         background: "rgba(255,255,255,0.04)",
                         border: "1px solid rgba(255,255,255,0.08)",
                         transition: "all 0.15s ease",

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

@@ -1,14 +1,13 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Heading, HorizontalScroller, Section, Text, TextLink, } from "../../../ui";
-// ─── Section ─────────────────────────────────────────────────────────────────
+// --- Section -----------------------------------------------------------------
 export function CustomerReviewsSection({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel = "See all reviews", isLoading = false, keyExtractor, className = "", }) {
     const { themed, skeleton } = THEME_CONSTANTS;
     if (isLoading) {
-        return (_jsx(Section, { className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto", children: [_jsx("div", { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx("div", { className: "flex gap-6 overflow-hidden", children: [...Array(3)].map((_, i) => (_jsx("div", { className: `${skeleton.card} h-[clamp(180px,26vh,260px)] min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] flex-none` }, i))) })] }) }));
+        return (_jsx(Section, { className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto", "data-section": "customerreviewssection-div-315", children: [_jsx("div", { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx("div", { className: "flex gap-6 overflow-hidden", "data-section": "customerreviewssection-div-316", children: [...Array(3)].map((_, i) => (_jsx("div", { className: `${skeleton.card} h-[clamp(180px,26vh,260px)] min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] flex-none` }, i))) })] }) }));
     }
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4 md:px-8", children: [_jsxs("div", { className: "text-center mb-10", children: [_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}`, children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: { base: 1, sm: 2, md: 3, lg: 3, "2xl": 4 }, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4 md:px-8", "data-section": "customerreviewssection-div-317", children: [_jsxs("div", { className: "text-center mb-10", "data-section": "customerreviewssection-div-318", children: [_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}`, children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: THEME_CONSTANTS.carousel.perView.reviews, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "customerreviewssection-div-319", children: _jsx(TextLink, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
 }

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

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

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useHomepageEvents } from "../hooks/useHomepageEvents";
+import { EventCard } from "../../events/components/EventCard";
+export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", }) {
+    const { data: items = [], isLoading } = useHomepageEvents(limit);
+    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
+}

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

@@ -14,7 +14,6 @@ export interface FAQSectionProps {
     subtitle?: string;
     tabs: FAQTab[];
     activeTab: string;
-    onTabChange: (tab: string) => void;
     items: FAQItem[];
     viewMoreHref?: string;
     viewMoreLabel?: string;

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

@@ -4,17 +4,17 @@ import { useState } from "react";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Button, Heading, Section, Span, Text, TextLink } from "../../../ui";
 import { ChevronDown } from "lucide-react";
-// ─── Section ─────────────────────────────────────────────────────────────────
+// --- Section -----------------------------------------------------------------
 export function FAQSection({ title, subtitle, items, viewMoreHref, viewMoreLabel = "View all →", hasMore = false, moreCount = 0, renderTabs, className = "", }) {
     const { themed, spacing, flex } = THEME_CONSTANTS;
     const [openFaqId, setOpenFaqId] = useState(null);
     const toggleFaq = (faqId) => {
         setOpenFaqId(openFaqId === faqId ? null : faqId);
     };
-    return (_jsx(Section, { className: `p-8 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto", children: [_jsxs("div", { className: "text-center mb-8", children: [_jsx(Heading, { level: 2, variant: "none", className: "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent text-3xl md:text-4xl font-bold mb-3", children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), renderTabs && _jsx("div", { className: "mb-8 -mx-8", children: renderTabs() }), _jsxs("div", { className: `${spacing.stack} max-w-5xl mx-auto`, children: [items.length === 0 && (_jsx(Text, { className: `text-center py-8 ${themed.textSecondary}`, children: "No FAQs found." })), items.map((faq) => {
+    return (_jsx(Section, { className: `p-8 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto", "data-section": "faqsection-div-320", children: [_jsxs("div", { className: "text-center mb-8", "data-section": "faqsection-div-321", children: [_jsx(Heading, { level: 2, variant: "none", className: "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent text-3xl md:text-4xl font-bold mb-3", children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), renderTabs && _jsx("div", { className: "mb-8 -mx-8", "data-section": "faqsection-div-322", children: renderTabs() }), _jsxs("div", { className: `${spacing.stack} max-w-5xl mx-auto`, "data-section": "faqsection-div-323", children: [items.length === 0 && (_jsx(Text, { className: `text-center py-8 ${themed.textSecondary}`, children: "No FAQs found." })), items.map((faq) => {
                             const isOpen = openFaqId === faq.id;
                             return (_jsxs("div", { className: `${themed.bgPrimary} rounded-2xl overflow-hidden transition-all border-l-4 ${isOpen
                                     ? "border-primary bg-primary/5 dark:bg-primary/10"
-                                    : "border-transparent"}`, children: [_jsxs(Button, { variant: "ghost", className: `w-full text-left p-6 ${flex.between} gap-4 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors`, onClick: () => toggleFaq(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { className: `text-base ${themed.textPrimary} font-medium flex-1`, children: faq.question }), _jsx(ChevronDown, { className: `w-5 h-5 flex-shrink-0 ${themed.textSecondary} transition-transform duration-300 ${isOpen ? "rotate-180" : ""}` })] }), _jsx("div", { className: `overflow-hidden transition-all duration-300 ease-out ${isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`, children: _jsx("div", { className: "p-6 pt-0", children: _jsx(Text, { className: `text-base ${themed.textSecondary} rounded-md ${themed.bgTertiary} p-4`, children: faq.answer }) }) })] }, faq.id));
-                        })] }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", children: _jsxs(TextLink, { href: viewMoreHref, className: "inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400 transition-colors", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { className: "bg-primary dark:bg-primary/80 text-white text-xs px-2 py-0.5 rounded-full", children: ["+", moreCount] }))] }) }))] }) }));
+                                    : "border-transparent"}`, "data-section": "faqsection-div-324", children: [_jsxs(Button, { variant: "ghost", className: `w-full text-left p-6 ${flex.between} gap-4 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors`, onClick: () => toggleFaq(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { className: `text-base ${themed.textPrimary} font-medium flex-1`, children: faq.question }), _jsx(ChevronDown, { className: `w-5 h-5 flex-shrink-0 ${themed.textSecondary} transition-transform duration-300 ${isOpen ? "rotate-180" : ""}` })] }), _jsx("div", { className: `overflow-hidden transition-all duration-300 ease-out ${isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`, "data-section": "faqsection-div-325", children: _jsx("div", { className: "p-6 pt-0", "data-section": "faqsection-div-326", children: _jsx(Text, { className: `text-base ${themed.textSecondary} rounded-md ${themed.bgTertiary} p-4`, children: faq.answer }) }) })] }, faq.id));
+                        })] }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "faqsection-div-327", children: _jsxs(TextLink, { href: viewMoreHref, className: "inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400 transition-colors", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { className: "bg-primary dark:bg-primary/80 text-white text-xs px-2 py-0.5 rounded-full", children: ["+", moreCount] }))] }) }))] }) }));
 }

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

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

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
+import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
+export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", }) {
+    const { data: items = [], isLoading } = useFeaturedAuctions();
+    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.compact, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
+}

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

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

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
+import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
+export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", }) {
+    const { data: items = [], isLoading } = useFeaturedPreOrders();
+    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.compact, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
+}

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

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

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
+import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
+import { ROUTES } from "../../../next";
+export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", }) {
+    const { data, isLoading } = useFeaturedProducts();
+    const items = data?.items ?? [];
+    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: { base: 1 }, gap: 16, rows: 2, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id) })), className: className }));
+}

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

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Grid, Heading, Section, Span, Text } from "../../../ui";
+import { Div, Heading, Section, Span, Text, HorizontalScroller } from "../../../ui";
 import { BeforeAfterCard } from "./BeforeAfterCard";
-// ─── Sectmon ─────────────────────────────────────────────────────────────────
+// --- Sectmon -----------------------------------------------------------------
 export function FeaturedResultsSection({ title, subtitle, pillLabel, ornamentLabel = "✶", items, className = "", }) {
     const { flex } = THEME_CONSTANTS;
     const pillCls = "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 uppercase tracking-[0.2em] text-primary-700 backdrop-blur-sm dark:text-primary-400";
     if (!items.length)
         return null;
-    return (_jsxs(Section, { className: `px-4 py-16 md:py-20 ${className}`, children: [_jsxs(Div, { className: "mb-12 text-center", children: [pillLabel && (_jsxs(Span, { className: pillCls, children: [_jsx(Span, { className: "inline-block h-1.5 w-1.5 rounded-full bg-primary-500", "aria-hidden": "true" }), pillLabel] })), _jsx(Heading, { level: 2, className: "mt-3 font-display text-4xl text-zinc-900 dark:text-white", children: title }), _jsxs(Div, { className: `mt-3 ${flex.center} gap-2 text-zinc-400 dark:text-zinc-500`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: ornamentLabel }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-md text-sm text-zinc-500 dark:text-zinc-400", children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "mx-auto max-w-7xl grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4", children: items.map((item, i) => (_jsx(BeforeAfterCard, { item: {
-                        id: item.id ?? `result-${i}`,
-                        beforeImage: item.beforeImage,
-                        afterImage: item.afterImage,
-                        caption: item.caption ?? "",
-                        sortOrder: item.sortOrder ?? i,
-                    } }, item.id ?? `result-${i}`))) })] }));
+    return (_jsxs(Section, { className: `px-4 py-16 md:py-20 ${className}`, children: [_jsxs(Div, { className: "mb-12 text-center", children: [pillLabel && (_jsxs(Span, { className: pillCls, children: [_jsx(Span, { className: "inline-block h-1.5 w-1.5 rounded-full bg-primary-500", "aria-hidden": "true" }), pillLabel] })), _jsx(Heading, { level: 2, className: "mt-3 font-display text-4xl text-zinc-900 dark:text-white", children: title }), _jsxs(Div, { className: `mt-3 ${flex.center} gap-2 text-zinc-400 dark:text-zinc-500`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: ornamentLabel }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-md text-sm text-zinc-500 dark:text-zinc-400", children: subtitle }))] }), _jsx("div", { className: "mx-auto max-w-7xl", children: _jsx(HorizontalScroller, { items: items, renderItem: (item, i) => (_jsx("div", { className: "w-full sm:w-auto", children: _jsx(BeforeAfterCard, { item: {
+                                id: item.id ?? `result-${i}`,
+                                beforeImage: item.beforeImage,
+                                afterImage: item.afterImage,
+                                caption: item.caption ?? "",
+                                sortOrder: item.sortOrder ?? i,
+                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, showFadeEdges: true }) })] }));
 }

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

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

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedStores } from "../hooks/useFeaturedStores";
+import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
+import { ROUTES } from "../../../next";
+export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", }) {
+    const { data: items = [], isLoading } = useFeaturedStores(limit);
+    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
+}

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

@@ -1,4 +1,3 @@
-import "client-only";
 import type { CarouselSlide } from "../types/index";
 export interface HeroCarouselProps {
     initialSlides?: CarouselSlide[];
@@ -9,4 +8,4 @@ export interface HeroCarouselProps {
      */
     push?: (href: string) => void;
 }
-export declare function HeroCarousel({ initialSlides, push }?: HeroCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeroCarousel({ initialSlides, push }?: HeroCarouselProps): import("react/jsx-runtime").JSX.Element;