@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -1,229 +1,28 @@
 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 { fetchLiveStats } from "../lib/live-stats";
+import { renderSection, AnnouncementBar } from "../lib/section-renderer";
 import { homepageSectionsRepository } from "../repository/homepage-sections.repository";
-const DEFAULT_TRUST_FEATURES = [
-    {
-        iconName: "secure-payments",
-        title: "Secure Payments",
-        description: "Protected payments with transparent order tracking.",
-    },
-    {
-        iconName: "fast-delivery",
-        title: "Fast Delivery",
-        description: "Fast shipping with reliable nationwide logistics partners.",
-    },
-    {
-        iconName: "easy-returns",
-        title: "Easy Returns",
-        description: "Hassle-free returns within the policy window.",
-    },
-    {
-        iconName: "support",
-        title: "24/7 Support",
-        description: "Real help from our team across pre and post purchase.",
-    },
-];
-const DEFAULT_HOW_IT_WORKS = [
-    {
-        number: 1,
-        title: "Browse & Discover",
-        desc: "Search 10,000+ listings across products, auctions, and pre-orders.",
-    },
-    {
-        number: 2,
-        title: "Bid or Buy Now",
-        desc: "Place a bid on live auctions or buy instantly at the listed price.",
-    },
-    {
-        number: 3,
-        title: "Get Delivered",
-        desc: "Track your order end-to-end until it arrives at your door.",
-    },
-];
-const DEFAULT_SECURITY_ITEMS = [
-    {
-        key: "encryption",
-        title: "End-to-End Encryption",
-        description: "All sensitive data is encrypted in transit and at rest.",
-    },
-    {
-        key: "tls",
-        title: "TLS 1.3 in Transit",
-        description: "Every API call and page load is secured with modern TLS.",
-    },
-    {
-        key: "rbac",
-        title: "Role-Based Access",
-        description: "Strict role boundaries keep buyer, seller, and admin data separate.",
-    },
-    {
-        key: "min-priv",
-        title: "Minimum-Privilege Tokens",
-        description: "Short-lived, scoped tokens minimise exposure on every request.",
-    },
-];
-// --- Helpers -----------------------------------------------------------------
-function parseWelcomeDescription(description) {
-    if (!description)
-        return "";
-    try {
-        const parsed = JSON.parse(description);
-        const extracted = parsed.content
-            ?.flatMap((node) => node.content ?? [])
-            .map((leaf) => leaf.text ?? "")
-            .join(" ")
-            .trim();
-        return extracted || description;
-    }
-    catch {
-        return description;
-    }
-}
+import { getFeaturedProducts, getFeaturedAuctions, getFeaturedPreOrders } from "../../products/actions/product-actions";
+import { listTopLevelCategories, listBrandCategories } from "../../categories/actions/category-actions";
+import { listStores } from "../../stores/actions/store-query-actions";
+import { getFeaturedBlogPosts } from "../../blog/actions/blog-actions";
+import { listPublicEvents } from "../../events/actions/event-actions";
 /**
- * Render a single homepage section based on its type and config
+ * Converts Firestore CarouselSlideDocument[] (Date fields) to the API-shaped
+ * CarouselSlide[] (string dates) expected by HeroCarousel / useHeroCarousel.
+ * The two types share all display-relevant fields; only createdAt/updatedAt
+ * and internal-only fields (analytics, createdBy) diverge.
  */
-const AD_SLOT_MAP = {
-    products: "afterFeaturedProducts",
-    reviews: "afterReviews",
-    faq: "afterFAQ",
-};
-function renderSection(section, adSlots, newsletterFormSlot, faqItems) {
-    const { type, config } = section;
-    const adSlotKey = AD_SLOT_MAP[type];
-    const sectionElement = (() => {
-        switch (type) {
-            case "welcome": {
-                const cfg = config;
-                const title = cfg?.h1 || "Discover Amazing Products";
-                const subtitle = parseWelcomeDescription(cfg?.description);
-                const ctaText = cfg?.ctaText || "Shop Now";
-                const ctaLink = cfg?.ctaLink || ROUTES.PUBLIC.PRODUCTS;
-                return (_jsx(WelcomeSection, { title: title, subtitle: subtitle, pillLabel: "India's #1 Marketplace", showCTA: cfg?.showCTA ?? true, ctaLabel: ctaText, ctaHref: ctaLink, secondaryCtaLabel: "Browse All", secondaryCtaHref: ROUTES.PUBLIC.PRODUCTS, trustChips: [
-                        { key: "delivery", emoji: "🚀", label: "Fast Delivery" },
-                        { key: "secure", emoji: "🔒", label: "Secure Payments" },
-                        { key: "rating", emoji: "⭐", label: "4.8+ Rated" },
-                        { key: "returns", emoji: "↩️", label: "Easy Returns" },
-                    ], brandLogoText: "LIR" }));
-            }
-            case "categories": {
-                const cfg = config;
-                return (_jsx(ShopByCategorySection, { title: cfg?.title || "Shop by Category", viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All categories \u2192" }));
-            }
-            case "stats": {
-                const cfg = config;
-                const stats = Array.isArray(cfg?.stats)
-                    ? cfg.stats
-                        .filter((item) => typeof item?.label === "string" &&
-                        item.label.trim().length > 0 &&
-                        typeof item?.value === "string" &&
-                        item.value.trim().length > 0)
-                        .map((item, index) => ({
-                        key: typeof item?.key === "string" && item.key.trim().length > 0
-                            ? item.key
-                            : `stat-${index}`,
-                        label: item.label,
-                        value: item.value,
-                    }))
-                    : [];
-                if (stats.length === 0) {
-                    return null;
-                }
-                return _jsx(StatsCounterSection, { stats: stats });
-            }
-            case "products": {
-                const cfg = config;
-                return (_jsx(FeaturedProductsSection, { title: cfg?.title || "Featured Products", viewMoreHref: ROUTES.PUBLIC.PRODUCTS, viewMoreLabel: "View all products \u2192" }));
-            }
-            case "auctions": {
-                const cfg = config;
-                return (_jsx(FeaturedAuctionsSection, { title: cfg?.title || "Live Auctions", viewMoreHref: ROUTES.PUBLIC.AUCTIONS, viewMoreLabel: "View all auctions \u2192" }));
-            }
-            case "pre-orders": {
-                const cfg = config;
-                return (_jsx(FeaturedPreOrdersSection, { title: cfg?.title || "Reserve Before It Ships", viewMoreHref: ROUTES.PUBLIC.PRE_ORDERS, viewMoreLabel: "View all pre-orders \u2192" }));
-            }
-            case "stores": {
-                const cfg = config;
-                return (_jsx(FeaturedStoresSection, { title: cfg?.title || "Featured Stores", viewMoreHref: ROUTES.PUBLIC.STORES, viewMoreLabel: "View all stores \u2192" }));
-            }
-            case "events": {
-                const cfg = config;
-                return (_jsx(EventsSection, { title: cfg?.title || "Events & Offers", viewMoreHref: ROUTES.PUBLIC.EVENTS, viewMoreLabel: "View all events \u2192" }));
-            }
-            case "reviews": {
-                const cfg = config;
-                return (_jsx(HomepageCustomerReviewsSection, { title: cfg?.title || "What Our Customers Say", viewMoreHref: ROUTES.PUBLIC.REVIEWS, viewMoreLabel: "See all reviews \u2192" }));
-            }
-            case "banner": {
-                const cfg = config;
-                return (_jsx(CTABannerSection, { title: cfg?.content?.title || "Thousands of collectibles. One marketplace.", primaryLabel: "Shop All Products \u2192", primaryHref: ROUTES.PUBLIC.PRODUCTS, secondaryLabel: "Browse Auctions \u2192", secondaryHref: ROUTES.PUBLIC.AUCTIONS }));
-            }
-            case "trust-indicators": {
-                const cfg = config;
-                return (_jsx(TrustFeaturesSection, { title: cfg?.title || "Why Buyers Trust LetiTrip", items: DEFAULT_TRUST_FEATURES }));
-            }
-            case "features": {
-                const cfg = config;
-                return (_jsx(SecurityHighlightsSection, { title: cfg?.title || "Security You Can Trust", pillLabel: "Built for trust", items: DEFAULT_SECURITY_ITEMS, learnMoreHref: ROUTES.PUBLIC.SECURITY, learnMoreLabel: "Learn about our security \u2192" }));
-            }
-            case "whatsapp-community": {
-                const cfg = config;
-                return (_jsx(WhatsAppCommunitySection, { title: cfg?.title || "Join Our WhatsApp Community", descriptionHtml: cfg?.description || "5,000+ members. Get deal alerts, auction updates, and exclusive drops before anyone else.", memberCount: cfg?.memberCount || 5000, groupLink: cfg?.groupLink || "https://chat.whatsapp.com/" }));
-            }
-            case "faq": {
-                const cfg = config;
-                if (!cfg?.showOnHomepage) {
-                    return null;
-                }
-                return (_jsx(FAQSection, { title: cfg?.title || "Frequently Asked Questions", tabs: [], activeTab: "", items: faqItems, viewMoreHref: ROUTES.PUBLIC.FAQS, viewMoreLabel: "View all FAQs \u2192" }));
-            }
-            case "blog-articles": {
-                const cfg = config;
-                return (_jsx(BlogArticlesSection, { title: cfg?.title || "From Our Blog", viewMoreHref: ROUTES.BLOG.LIST, viewMoreLabel: "View all posts \u2192" }));
-            }
-            case "newsletter": {
-                const cfg = config;
-                return (_jsx(NewsletterSection, { title: cfg?.title || "Stay Updated", subtitle: cfg?.description || "Get the latest drops, auctions, and deals in your inbox.", renderForm: () => newsletterFormSlot ?? null }));
-            }
-            case "brands": {
-                const cfg = config;
-                return (_jsx(BrandsSection, { title: cfg?.title || "Top Brands", subtitle: cfg?.subtitle, limit: cfg?.maxBrands || 12, viewMoreHref: ROUTES.PUBLIC.CATEGORIES, viewMoreLabel: "All brands \u2192" }));
-            }
-            default:
-                return null;
-        }
-    })();
-    // Return section with optional ad slot before it
-    if (!sectionElement) {
-        return null;
-    }
-    return (_jsxs(React.Fragment, { children: [sectionElement, adSlots && adSlotKey !== undefined && adSlotKey in adSlots && adSlots[adSlotKey]] }, section.id));
+function toCarouselSlides(docs) {
+    return docs.map(({ createdAt, updatedAt, analytics: _analytics, createdBy: _createdBy, ...rest }) => ({
+        ...rest,
+        createdAt: createdAt instanceof Date ? createdAt.toISOString() : undefined,
+        updatedAt: updatedAt instanceof Date ? updatedAt.toISOString() : undefined,
+    }));
 }
-// --- 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() ||
@@ -233,6 +32,19 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, } =
         homepageSectionsRepository.getEnabledSections().catch(() => []),
         faqsRepository.getHomepageFAQs().catch(() => []),
     ]);
+    // Collect only the live metric keys that are actually configured in this deployment
+    const liveMetricsNeeded = new Set();
+    for (const section of enabledSections) {
+        if (section.type === "stats") {
+            const cfg = section.config;
+            for (const stat of cfg?.stats ?? []) {
+                if (stat.source === "live" && stat.metric) {
+                    liveMetricsNeeded.add(stat.metric);
+                }
+            }
+        }
+    }
+    const liveStats = liveMetricsNeeded.size > 0 ? await fetchLiveStats([...liveMetricsNeeded]) : {};
     const orderedSections = [...enabledSections].sort((a, b) => {
         if (a.order !== b.order)
             return a.order - b.order;
@@ -247,6 +59,47 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, } =
         question: faq.question,
         answer: typeof faq.answer === "string" ? faq.answer : faq.answer.text,
     }));
-    // Render with dynamic sections from DB
-    return (_jsxs(Main, { children: [showAnnouncement ? _jsx(AnnouncementBar, { message: announcementMessage }) : null, _jsx(HeroCarousel, { initialSlides: slides }), adSlots?.afterHero, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems))] }));
+    // Determine which data-driven section types are active so we only fetch what's needed
+    const activeTypes = new Set(orderedSections.map((s) => s.type));
+    const [productsResult, auctionsResult, preOrdersResult, categoriesResult, brandsResult, storesResult, blogResult, eventsResult,] = await Promise.all([
+        activeTypes.has("products") ? getFeaturedProducts(12).catch(() => null) : null,
+        activeTypes.has("auctions") ? getFeaturedAuctions(12).catch(() => null) : null,
+        activeTypes.has("pre-orders") ? getFeaturedPreOrders(12).catch(() => null) : null,
+        activeTypes.has("categories") ? listTopLevelCategories(12).catch(() => null) : null,
+        activeTypes.has("brands") ? listBrandCategories(12).catch(() => null) : null,
+        activeTypes.has("stores") ? listStores({ pageSize: 8, sorts: "-averageRating" }).catch(() => null) : null,
+        activeTypes.has("blog-articles") ? getFeaturedBlogPosts(6).catch(() => null) : null,
+        activeTypes.has("events") ? listPublicEvents({ filters: "status==active", pageSize: 6 }).catch(() => null) : null,
+    ]);
+    // ProductDocument / BlogDocument / EventDocument have Date fields and extra Firestore-only
+    // fields absent from the corresponding *Item types. The casts below are safe: section
+    // components only read display fields that are present on both document and item shapes.
+    const sectionData = {
+        products: productsResult?.items?.length
+            ? productsResult.items
+            : undefined,
+        auctions: auctionsResult?.items?.length
+            ? auctionsResult.items
+            : undefined,
+        preOrders: preOrdersResult?.items?.length
+            ? preOrdersResult.items
+            : undefined,
+        categories: categoriesResult?.length
+            ? categoriesResult
+            : undefined,
+        brands: brandsResult?.length
+            ? brandsResult
+            : undefined,
+        stores: storesResult?.items?.length
+            ? storesResult.items
+            : undefined,
+        blog: blogResult?.length
+            ? blogResult
+            : undefined,
+        events: eventsResult?.items?.length
+            ? eventsResult.items
+            : undefined,
+    };
+    const carouselSlides = toCarouselSlides(slides);
+    return (_jsxs(Main, { children: [showAnnouncement ? _jsx(AnnouncementBar, { message: announcementMessage }) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData))] }));
 }

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

@@ -72,4 +72,4 @@ export interface SectionCarouselProps<T = unknown> {
      */
     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;
+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 | null;

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

@@ -8,7 +8,9 @@ function CarouselSkeleton({ count }) {
     return (_jsx("div", { className: "flex gap-4 overflow-hidden px-4", "data-section": "sectioncarousel-div-349", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2", "data-section": "sectioncarousel-div-350", children: [_jsx("div", { className: `aspect-square rounded-xl ${skeleton.image}` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) }));
 }
 // --- Component ---------------------------------------------------------------
-export function SectionCarousel({ title, description, headingVariant = "default", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = THEME_CONSTANTS.carousel.perView.default, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek = false, minItemWidth = 220, }) {
+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, }) {
+    if (!isLoading && items.length === 0)
+        return null;
     const hasBg = Boolean(backgroundImage);
     const useLightText = lightText ?? hasBg;
     const { themed, flex } = THEME_CONSTANTS;
@@ -39,7 +41,7 @@ export function SectionCarousel({ title, description, headingVariant = "default"
                            - show fade edges for visual affordance
                            - hide native scrollbar for cleaner appearance
                         */
-                        showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", "data-section": "sectioncarousel-div-356", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium transition-colors ${useLightText
-                                ? "bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm"
-                                : "bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400"}`, children: viewMoreLabel }) }))] })] }));
+                        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/ShopByCategorySection.d.ts

@@ -1,3 +1,4 @@
+import type { CategoryItem } from "../../categories/types";
 export interface ShopByCategorySectionProps {
     title?: string;
     subtitle?: string;
@@ -5,5 +6,6 @@ export interface ShopByCategorySectionProps {
     viewMoreHref?: string;
     viewMoreLabel?: string;
     className?: string;
+    initialItems?: CategoryItem[];
 }
-export declare function ShopByCategorySection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, }: ShopByCategorySectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShopByCategorySection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, }: ShopByCategorySectionProps): import("react/jsx-runtime").JSX.Element | null;

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

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

@@ -0,0 +1,3 @@
+import type { SocialFeedSectionConfig } from "../schemas";
+export type SocialFeedSectionProps = SocialFeedSectionConfig;
+export declare function SocialFeedSection(config: SocialFeedSectionProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Section, Text } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SocialPostCard } from "./SocialPostCard";
+import { fetchInstagramPosts, fetchFacebookPosts, fetchTikTokPosts, fetchDeviantArtPosts, } from "../lib/social-feed-fetcher";
+import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
+// --- Platform labels ---------------------------------------------------------
+const PLATFORM_LABELS = {
+    instagram: "Instagram",
+    facebook: "Facebook",
+    tiktok: "TikTok",
+    deviantart: "DeviantArt",
+};
+function platformProfileUrl(platform, handle) {
+    switch (platform) {
+        case "instagram": return `https://www.instagram.com/${handle}/`;
+        case "facebook": return `https://www.facebook.com/${handle}`;
+        case "tiktok": return `https://www.tiktok.com/@${handle}`;
+        case "deviantart": return `https://www.deviantart.com/${handle}`;
+    }
+}
+// --- Skeleton ----------------------------------------------------------------
+function SocialFeedSkeleton({ count }) {
+    return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: Array.from({ length: count }).map((_, i) => (_jsx("div", { className: "aspect-square rounded-xl bg-zinc-200 dark:bg-zinc-700 animate-pulse" }, i))) }));
+}
+// --- Empty state -------------------------------------------------------------
+function SocialFeedEmpty({ platform }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-zinc-400", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }), _jsx("path", { d: "M9 9h6M9 12h6M9 15h4" })] }), _jsxs(Text, { size: "sm", children: ["No posts from ", PLATFORM_LABELS[platform], " yet."] })] }));
+}
+// --- Server fetch ------------------------------------------------------------
+async function loadPosts(config) {
+    const { platform, handle, postType, count } = config;
+    try {
+        const credentials = await siteSettingsRepository.getDecryptedCredentials().catch(() => null);
+        switch (platform) {
+            case "instagram": {
+                const token = credentials?.metaPageAccessToken;
+                if (!token)
+                    return { posts: [], error: "Instagram access token not configured in Site Settings." };
+                return { posts: await fetchInstagramPosts(handle, postType, count, token) };
+            }
+            case "facebook": {
+                const token = credentials?.metaPageAccessToken;
+                if (!token)
+                    return { posts: [], error: "Facebook access token not configured in Site Settings." };
+                return { posts: await fetchFacebookPosts(handle, postType, count, token) };
+            }
+            case "tiktok": {
+                const token = credentials?.tiktokAccessToken;
+                if (!token)
+                    return { posts: [], error: "TikTok access token not configured in Site Settings." };
+                return { posts: await fetchTikTokPosts(handle, postType, count, token) };
+            }
+            case "deviantart": {
+                const clientId = credentials?.deviantartClientId;
+                const clientSecret = credentials?.deviantartClientSecret;
+                if (!clientId || !clientSecret)
+                    return { posts: [], error: "DeviantArt credentials not configured in Site Settings." };
+                return { posts: await fetchDeviantArtPosts(handle, postType, count, clientId, clientSecret) };
+            }
+            default:
+                return { posts: [], error: "Unsupported platform." };
+        }
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : "Unknown error";
+        console.error(`[SocialFeedSection] ${platform} fetch failed:`, message);
+        return { posts: [], error: `Could not load ${PLATFORM_LABELS[platform]} posts right now.` };
+    }
+}
+export async function SocialFeedSection(config) {
+    const { title, subtitle, platform, handle, layout, showCaption, showStats, count } = config;
+    const { themed } = THEME_CONSTANTS;
+    const { posts, error } = await loadPosts(config);
+    const gridClass = layout === "carousel"
+        ? "flex gap-3 overflow-x-auto pb-2 snap-x snap-mandatory"
+        : layout === "masonry"
+            ? "columns-2 sm:columns-3 lg:columns-4 gap-3 space-y-3"
+            : "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3";
+    const cardClass = layout === "carousel"
+        ? "flex-shrink-0 w-48 sm:w-56 snap-start"
+        : layout === "masonry"
+            ? "break-inside-avoid"
+            : "";
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs("div", { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), _jsxs("a", { href: platformProfileUrl(platform, handle), target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline", children: ["Follow on ", PLATFORM_LABELS[platform], " \u2192"] })] }), error ? (_jsx("div", { className: "py-12 text-center text-zinc-400 text-sm", children: error })) : posts.length === 0 ? (_jsx(SocialFeedEmpty, { platform: platform })) : (_jsx("div", { className: gridClass, children: posts.slice(0, count).map((post) => (_jsx("div", { className: cardClass, children: _jsx(SocialPostCard, { post: post, showCaption: showCaption, showStats: showStats }) }, post.id))) }))] }) }));
+}

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

@@ -0,0 +1,7 @@
+import type { SocialPost } from "../schemas";
+export interface SocialPostCardProps {
+    post: SocialPost;
+    showCaption?: boolean;
+    showStats?: boolean;
+}
+export declare function SocialPostCard({ post, showCaption, showStats }: SocialPostCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// --- Platform brand colours & icons ------------------------------------------
+const PLATFORM_META = {
+    instagram: {
+        label: "Instagram",
+        color: "bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400",
+        icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) })),
+    },
+    facebook: {
+        label: "Facebook",
+        color: "bg-blue-600",
+        icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) })),
+    },
+    tiktok: {
+        label: "TikTok",
+        color: "bg-black",
+        icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" }) })),
+    },
+    deviantart: {
+        label: "DeviantArt",
+        color: "bg-green-600",
+        icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M19.207 4.794l.23-.43V0h-4.169l-.321.33-1.445 2.698-.428.33H4.793v5.994l.289.321 1.156 2.168v.065l-1.156 2.168-.289.321V19.8h8.481l.428.33 1.445 2.698.321.329h4.169v-4.364l-.23-.43-1.09-2.044v-.064l1.09-2.044.23-.43V4.794zM14.72 14.058h-4.53v-4.116h4.53v4.116z" }) })),
+    },
+};
+// --- Stats formatter ---------------------------------------------------------
+function formatCount(n) {
+    if (n == null)
+        return null;
+    if (n >= 1000000)
+        return `${(n / 1000000).toFixed(1)}M`;
+    if (n >= 1000)
+        return `${(n / 1000).toFixed(1)}K`;
+    return String(n);
+}
+export function SocialPostCard({ post, showCaption = true, showStats = true }) {
+    const meta = PLATFORM_META[post.platform];
+    return (_jsxs("a", { href: post.permalink, target: "_blank", rel: "noopener noreferrer", className: "group relative block rounded-xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-square focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx("span", { className: "text-zinc-400 text-sm", children: "No preview" }) })), post.mediaType === "video" && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: _jsx("div", { className: "w-12 h-12 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center", children: _jsx("svg", { className: "w-5 h-5 text-white ml-1", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx("div", { className: "absolute top-2 right-2 pointer-events-none", children: _jsx("div", { className: "w-6 h-6 rounded bg-black/50 backdrop-blur-sm flex items-center justify-center", children: _jsxs("svg", { className: "w-3.5 h-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "3", width: "15", height: "15", rx: "2" }), _jsx("path", { d: "M7 8h14M7 12h14M7 16h14" })] }) }) })), _jsxs("div", { className: `absolute top-2 left-2 flex items-center gap-1 px-1.5 py-1 rounded text-white text-xs font-medium ${meta.color}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), _jsxs("div", { className: "absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3 pointer-events-none", children: [showCaption && post.caption && (_jsx("p", { className: "text-white text-xs line-clamp-3 mb-2", children: post.caption })), showStats && (_jsxs("div", { className: "flex items-center gap-3 text-white/80 text-xs", children: [post.stats.likes != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }), formatCount(post.stats.likes)] })), post.stats.views != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }), formatCount(post.stats.views)] })), post.stats.comments != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), formatCount(post.stats.comments)] }))] }))] })] }));
+}

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

@@ -9,7 +9,7 @@ function StatCard({ stat, visible, delay, isLast, }) {
             "transition-all duration-700",
             visible ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0",
             !isLast ? "border-r border-zinc-200 dark:border-slate-700" : "",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, children: [stat.renderIcon && (_jsx(Div, { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-50 dark:bg-primary-950/40 border border-primary-100 dark:border-primary-900/30", children: stat.renderIcon({ className: "w-7 h-7" }) })), _jsx(Heading, { level: 2, variant: "none", className: "mb-1 font-display text-4xl font-black bg-gradient-to-r from-primary-600 to-cobalt dark:from-secondary dark:to-cobalt-400 bg-clip-text text-transparent md:text-5xl", children: stat.value }), _jsx(Text, { variant: "none", className: "text-xs uppercase tracking-widest text-zinc-500 dark:text-zinc-400 font-medium", children: stat.label })] }));
+        ].join(" "), style: { transitionDelay: `${delay}ms` }, children: [stat.renderIcon && (_jsx(Div, { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-50 dark:bg-primary-950/40 border border-primary-100 dark:border-primary-900/30", children: stat.renderIcon({ className: "w-7 h-7" }) })), _jsx(Heading, { level: 2, variant: "none", className: "mb-1 font-display text-4xl font-black bg-gradient-to-r from-primary to-secondary dark:from-primary dark:to-cobalt-400 bg-clip-text text-transparent md:text-5xl", children: stat.value }), _jsx(Text, { variant: "none", className: "text-xs uppercase tracking-widest text-zinc-500 dark:text-zinc-400 font-medium", children: stat.label })] }));
 }
 // --- Sectmon -----------------------------------------------------------------
 export function StatsCounterSection({ stats, className = "", }) {

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

@@ -8,5 +8,5 @@ export function WelcomeSection({ title, subtitle, pillLabel, showCTA = true, cta
     if (isLoading) {
         return (_jsx(Section, { className: `relative overflow-hidden py-16 md:py-24 px-4 ${className}`, children: _jsxs("div", { className: "animate-pulse max-w-4xl mx-auto text-center", "data-section": "welcomesection-div-382", children: [_jsx("div", { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded-full w-52 mx-auto mb-6" }), _jsx("div", { className: "h-20 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-4 max-w-2xl mx-auto" }), _jsx("div", { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-8 max-w-lg mx-auto" }), _jsxs("div", { className: "flex justify-center gap-4", "data-section": "welcomesection-div-383", children: [_jsx("div", { className: "h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" }), _jsx("div", { className: "h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" })] })] }) }));
     }
-    return (_jsxs(Section, { className: `relative overflow-hidden py-20 md:py-28 px-4 ${className}`, children: [_jsx("div", { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] rounded-full bg-primary/10 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] rounded-full bg-secondary/10 dark:bg-secondary/15 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "relative z-10 max-w-7xl mx-auto", "data-section": "welcomesection-div-384", children: _jsxs(Grid, { gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 items-center", children: [_jsxs("div", { className: "text-center lg:text-left", "data-section": "welcomesection-div-385", children: [pillLabel && (_jsx("div", { "data-section": "welcomesection-div-386", children: _jsxs(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: [_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: 1, variant: "none", className: "mt-4 font-display text-5xl md:text-6xl lg:text-7xl xl:text-8xl bg-gradient-to-r from-primary-600 via-cobalt to-primary-400 dark:from-secondary dark:via-cobalt-400 dark:to-secondary-300 bg-clip-text text-transparent leading-[1.1] tracking-tight", children: title }), subtitle && (_jsx(Text, { className: `mt-4 text-xl ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 justify-center lg:justify-start", children: [ctaHref ? (_jsx(TextLink, { href: ctaHref, className: "inline-flex items-center justify-center rounded-xl px-8 py-3.5 text-base font-bold !bg-primary hover:!bg-primary-500 !text-zinc-900 dark:!bg-secondary dark:hover:!bg-secondary-600 dark:!text-white shadow-lg shadow-primary/25 dark:shadow-secondary/25 transition-all hover:scale-[1.02]", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { href: secondaryCtaHref, className: "inline-flex items-center justify-center rounded-xl border-2 border-cobalt/40 dark:border-cobalt-400/40 px-8 py-3.5 text-base font-semibold text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 justify-center lg:justify-start", children: trustChips.map((chip) => (_jsxs(Span, { className: "inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-slate-800 border border-zinc-200 dark:border-slate-700 rounded-full px-3.5 py-1.5 text-xs font-medium text-zinc-700 dark:text-zinc-300", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx("div", { className: "hidden lg:block", "data-section": "welcomesection-div-387", children: _jsxs("div", { className: `relative rounded-3xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-primary-100 via-cobalt-100/60 to-secondary-100 dark:from-primary-950/60 dark:via-cobalt-950/40 dark:to-secondary-950/60 border ${themed.border} shadow-2xl`, "data-section": "welcomesection-div-388", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" }), _jsx("div", { className: `absolute inset-0 ${flex.center}`, "data-section": "welcomesection-div-389", children: _jsx(Span, { className: "font-display text-9xl font-black text-primary-400/30 dark:text-secondary-400/30 select-none", children: brandLogoText }) })] }) })] }) })] }));
+    return (_jsxs(Section, { className: `relative overflow-hidden py-20 md:py-28 px-4 ${className}`, children: [_jsx("div", { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] rounded-full bg-primary/10 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] rounded-full bg-secondary/10 dark:bg-secondary/15 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "relative z-10 max-w-7xl mx-auto", "data-section": "welcomesection-div-384", children: _jsxs(Grid, { gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 items-center", children: [_jsxs("div", { className: "text-center lg:text-left", "data-section": "welcomesection-div-385", children: [pillLabel && (_jsx("div", { "data-section": "welcomesection-div-386", children: _jsxs(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: [_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: 1, variant: "none", className: "mt-4 font-display text-5xl md:text-6xl lg:text-7xl xl:text-8xl bg-gradient-to-r from-primary-700 via-cobalt to-secondary-400 dark:from-primary dark:via-cobalt-400 dark:to-primary-300 bg-clip-text text-transparent leading-[1.1] tracking-tight", children: title }), subtitle && (_jsx(Text, { className: `mt-4 text-xl ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 justify-center lg:justify-start", children: [ctaHref ? (_jsx(TextLink, { href: ctaHref, className: "inline-flex items-center justify-center rounded-xl px-8 py-3.5 text-base font-bold !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { href: secondaryCtaHref, className: "inline-flex items-center justify-center rounded-xl border-2 border-cobalt/40 dark:border-cobalt-400/40 px-8 py-3.5 text-base font-semibold text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 justify-center lg:justify-start", children: trustChips.map((chip) => (_jsxs(Span, { className: "inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-slate-800 border border-zinc-200 dark:border-slate-700 rounded-full px-3.5 py-1.5 text-xs font-medium text-zinc-700 dark:text-zinc-300", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx("div", { className: "hidden lg:block", "data-section": "welcomesection-div-387", children: _jsxs("div", { className: `relative rounded-3xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-primary-100 via-cobalt-100/60 to-secondary-100 dark:from-primary-950/60 dark:via-cobalt-950/40 dark:to-secondary-950/60 border ${themed.border} shadow-2xl`, "data-section": "welcomesection-div-388", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" }), _jsx("div", { className: `absolute inset-0 ${flex.center}`, "data-section": "welcomesection-div-389", children: _jsx(Span, { className: "font-display text-9xl font-black text-primary-400/30 dark:text-secondary-400/30 select-none", children: brandLogoText }) })] }) })] }) })] }));
 }