@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Section, Text } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
+import { fetchGoogleReviews } from "../lib/google-reviews-fetcher";
+// --- Star Rating -------------------------------------------------------------
+function StarRating({ rating }) {
+    return (_jsx("div", { className: "flex items-center gap-0.5", "aria-label": `${rating} out of 5 stars`, children: [1, 2, 3, 4, 5].map((star) => (_jsx("svg", { className: `w-4 h-4 ${star <= rating ? "text-yellow-400" : "text-zinc-300 dark:text-zinc-600"}`, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }));
+}
+// --- Google Logo Badge -------------------------------------------------------
+function GoogleBadge() {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400", children: [_jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), "Posted on Google"] }));
+}
+// --- Review Card -------------------------------------------------------------
+function ReviewCard({ review, showRating, showDate, }) {
+    const dateStr = showDate
+        ? new Date(review.time * 1000).toLocaleDateString("en-IN", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        })
+        : null;
+    return (_jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-xl bg-[var(--appkit-color-surface)] shadow-sm border border-[var(--appkit-color-border)]", children: [_jsxs("div", { className: "flex items-center gap-3", children: [review.authorPhotoUrl ? (_jsx("img", { src: review.authorPhotoUrl, alt: review.authorName, className: "w-9 h-9 rounded-full object-cover flex-shrink-0", loading: "lazy", referrerPolicy: "no-referrer" })) : (_jsx("div", { className: "w-9 h-9 rounded-full bg-[var(--appkit-color-primary)] flex items-center justify-center flex-shrink-0", children: _jsx("span", { className: "text-white text-sm font-bold", children: review.authorName.charAt(0).toUpperCase() }) })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-semibold truncate", children: review.authorName }), dateStr && (_jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: dateStr }))] })] }), showRating && _jsx(StarRating, { rating: review.rating }), review.text && (_jsx("p", { className: "text-sm leading-relaxed text-zinc-700 dark:text-zinc-300 line-clamp-4", children: review.text })), _jsx(GoogleBadge, {})] }));
+}
+// --- Empty / Not Configured States -------------------------------------------
+function NotConfiguredState() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-zinc-400 text-sm", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4m0 4h.01" })] }), "Google Reviews not configured. Add your Google Maps API key in Site Settings."] }));
+}
+function EmptyState() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-zinc-400 text-sm", children: [_jsx("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }) }), "No reviews yet."] }));
+}
+export async function GoogleReviewsSection(config) {
+    const { placeId: configPlaceId, maxReviews = 6, minRating = 0, layout = "grid", showRating = true, showDate = true, linkToGoogleMaps = true, googleMapsUrl, } = config;
+    const { themed } = THEME_CONSTANTS;
+    // Get credentials from site settings
+    const credentials = await siteSettingsRepository
+        .getDecryptedCredentials()
+        .catch(() => ({}));
+    const apiKey = credentials.googleMapsApiKey ?? "";
+    if (!apiKey) {
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto px-4", children: _jsx(NotConfiguredState, {}) }) }));
+    }
+    const placeId = configPlaceId || credentials.googlePlaceId || "";
+    if (!placeId) {
+        return null;
+    }
+    let reviews = [];
+    let aggregateRating = 0;
+    let totalRatings = 0;
+    try {
+        const result = await fetchGoogleReviews(placeId, apiKey, maxReviews, minRating);
+        reviews = result.reviews;
+        aggregateRating = result.aggregateRating;
+        totalRatings = result.totalRatings;
+    }
+    catch {
+        // Fail silently — empty state shown
+    }
+    const gridClass = layout === "carousel"
+        ? "flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory"
+        : "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4";
+    const cardClass = layout === "carousel" ? "flex-shrink-0 w-72 snap-start" : "";
+    const mapsHref = googleMapsUrl || (placeId ? `https://search.google.com/local/reviews?placeid=${placeId}` : "");
+    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, children: "What Our Customers Say" }), aggregateRating > 0 && (_jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx(StarRating, { rating: Math.round(aggregateRating) }), _jsxs(Text, { size: "sm", variant: "muted", children: [aggregateRating.toFixed(1), " \u00B7 ", totalRatings.toLocaleString(), " reviews"] })] }))] }), linkToGoogleMaps && mapsHref && (_jsx("a", { href: mapsHref, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline", children: "View on Google \u2192" }))] }), reviews.length === 0 ? (_jsx(EmptyState, {})) : (_jsx("div", { className: gridClass, children: reviews.map((review, i) => (_jsx("div", { className: cardClass, children: _jsx(ReviewCard, { review: review, showRating: showRating, showDate: showDate }) }, `${review.authorName}-${i}`))) }))] }) }));
+}

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useMediaQuery } from "../../../react";
 import { THEME_CONSTANTS } from "../../../tokens";
@@ -7,7 +7,7 @@ import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { MediaVideo } from "../../media/MediaVideo";
 import { useHeroCarousel } from "../hooks/useHeroCarousel";
-const { flex, position, homepage } = THEME_CONSTANTS;
+const { flex, position } = THEME_CONSTANTS;
 function navigate(href, push) {
     if (push) {
         push(href);
@@ -16,6 +16,102 @@ function navigate(href, push) {
         window.location.href = href;
     }
 }
+function resolveZoneToGrid(zone) {
+    const row = zone <= 3 ? 1 : 2;
+    const col = zone <= 3 ? zone : zone - 3;
+    return { gridRow: row, gridColumn: col };
+}
+function getHoverClass(effect) {
+    if (!effect || effect === "none")
+        return "";
+    if (effect === "scale")
+        return "hover:scale-105";
+    if (effect === "glow")
+        return "hover:shadow-[0_0_24px_6px_rgba(255,255,255,0.25)]";
+    if (effect === "color")
+        return "hover:brightness-110";
+    return "";
+}
+function getSlideHeightClass(height) {
+    if (height === "viewport")
+        return "min-h-screen";
+    if (height === "tall")
+        return "min-h-[80vh]";
+    return "min-h-[60vh] md:min-h-[clamp(420px,72vh,680px)]";
+}
+/** Renders the slide background — image, video, solid colour, or gradient. */
+function SlideBackground({ bg, legacy, mobileLegacy, isMobile, priority, }) {
+    const effectiveBg = bg ?? (legacy ? { type: legacy.type, url: legacy.url } : undefined);
+    const mobileUrl = effectiveBg?.mobileUrl ?? (isMobile && mobileLegacy ? mobileLegacy.url : undefined);
+    const src = mobileUrl ?? effectiveBg?.url ?? "";
+    if (!effectiveBg) {
+        return _jsx(Div, { className: `${position.fill} bg-zinc-900` });
+    }
+    if (effectiveBg.type === "color") {
+        const bg_color = effectiveBg.color ?? "var(--appkit-color-primary)";
+        return _jsx(Div, { className: position.fill, style: { backgroundColor: bg_color } });
+    }
+    if (effectiveBg.type === "gradient") {
+        const from = effectiveBg.gradientFrom ?? "var(--appkit-color-primary)";
+        const to = effectiveBg.gradientTo ?? "var(--appkit-color-secondary)";
+        const angle = effectiveBg.gradientAngle ?? 135;
+        return (_jsx(Div, { className: position.fill, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
+    }
+    if (effectiveBg.type === "video") {
+        return (_jsxs(_Fragment, { children: [_jsx(MediaVideo, { src: src, thumbnailUrl: effectiveBg.thumbnail ?? legacy?.thumbnail, alt: "", autoPlayMuted: true, loop: true, controls: false }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: position.fill, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(MediaImage, { src: src, alt: "", size: "hero", priority: priority }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: position.fill, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
+}
+/** Renders the background of a card (image, video, color, gradient). */
+function CardBackground({ bg }) {
+    if (bg.type === "color") {
+        return (_jsx(Div, { className: position.fill, style: { backgroundColor: bg.color ?? "var(--appkit-color-surface)" } }));
+    }
+    if (bg.type === "gradient") {
+        const from = bg.gradientFrom ?? "var(--appkit-color-primary)";
+        const to = bg.gradientTo ?? "var(--appkit-color-secondary)";
+        const angle = bg.gradientAngle ?? 135;
+        return (_jsx(Div, { className: position.fill, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
+    }
+    if (bg.type === "image" && bg.url) {
+        return _jsx(MediaImage, { src: bg.url, alt: "", size: "card" });
+    }
+    return null;
+}
+function CarouselCardRenderer({ card, isMobile, push, }) {
+    const mobileZone = card.mobileZone;
+    const gridPos = isMobile && mobileZone
+        ? { gridRow: mobileZone <= 3 ? 1 : 2, gridColumn: mobileZone <= 3 ? mobileZone : mobileZone - 3 }
+        : resolveZoneToGrid(card.zone);
+    const hoverClass = getHoverClass(card.hover?.effect);
+    const textAlign = card.content?.textAlign ?? "left";
+    const textAlignClass = textAlign === "center" ? "text-center" : textAlign === "right" ? "text-right" : "text-left";
+    return (_jsxs(Div, { className: `relative rounded-lg overflow-hidden shadow-lg transition-all duration-300 ${hoverClass}`, style: {
+            gridRow: String(gridPos.gridRow),
+            gridColumn: String(gridPos.gridColumn),
+            minHeight: isMobile ? 100 : 140,
+        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(Div, { className: `${position.fill} flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/30 to-transparent p-2 md:p-6 ${textAlignClass}`, children: [card.content?.eyebrow && (_jsx(Text, { className: "text-[10px] md:text-xs !text-white/70 mb-0.5 uppercase tracking-wider drop-shadow-sm", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl font-bold mb-0.5 md:mb-3 drop-shadow-md ${THEME_CONSTANTS.utilities.textClamp2}`, style: { color: card.content.textColor ?? "#ffffff" }, children: card.content.title })), card.content?.description && (_jsx(Text, { className: `text-[10px] md:text-sm !text-white/80 mb-1 md:mb-4 ${THEME_CONSTANTS.utilities.textClamp1} drop-shadow-sm`, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn, i) => {
+                            const variant = btn.variant === "link" || btn.variant === "ghost"
+                                ? "ghost"
+                                : btn.variant;
+                            return (_jsx(Button, { variant: variant, size: "sm", onClick: () => {
+                                    if (btn.openInNewTab) {
+                                        window.open(btn.href, "_blank", "noopener,noreferrer");
+                                    }
+                                    else {
+                                        navigate(btn.href, push);
+                                    }
+                                }, children: btn.text }, btn.id ?? i));
+                        }) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: () => {
+                    const btn = card.buttons[0];
+                    if (btn.openInNewTab) {
+                        window.open(btn.href, "_blank", "noopener,noreferrer");
+                    }
+                    else {
+                        navigate(btn.href, push);
+                    }
+                }, children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }));
+}
 export function HeroCarousel({ initialSlides, push } = {}) {
     const [currentSlide, setCurrentSlide] = useState(0);
     const [isPaused, setIsPaused] = useState(false);
@@ -29,6 +125,9 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         ?.filter((s) => s.active)
         ?.sort((a, b) => a.order - b.order)
         ?.slice(0, 5) || [];
+    const currentSlideData = slides[currentSlide];
+    const autoplayDelay = currentSlideData?.settings?.autoplayDelayMs ?? 4000;
+    const heightClass = getSlideHeightClass(currentSlideData?.settings?.height);
     const goToSlide = useCallback((index) => {
         const el = slidesRef.current;
         if (!el)
@@ -36,9 +135,7 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         setCurrentSlide(index);
         isScrollingRef.current = true;
         el.scrollTo({ left: index * el.offsetWidth, behavior: "smooth" });
-        setTimeout(() => {
-            isScrollingRef.current = false;
-        }, 600);
+        setTimeout(() => { isScrollingRef.current = false; }, 600);
     }, []);
     const goNext = useCallback(() => goToSlide((currentSlide + 1) % slides.length), [currentSlide, slides.length, goToSlide]);
     const goPrev = useCallback(() => goToSlide((currentSlide - 1 + slides.length) % slides.length), [currentSlide, slides.length, goToSlide]);
@@ -55,29 +152,9 @@ export function HeroCarousel({ initialSlides, push } = {}) {
     useEffect(() => {
         if (slides.length <= 1 || isPaused || prefersReducedMotion)
             return;
-        const interval = setInterval(goNext, 4000);
+        const interval = setInterval(goNext, autoplayDelay);
         return () => clearInterval(interval);
-    }, [slides.length, isPaused, prefersReducedMotion, goNext]);
-    if (isLoading) {
-        return (_jsx(Div, { className: `relative w-full ${homepage.heroMinH} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
-    }
-    if (!slides || slides.length === 0) {
-        return (_jsxs(Div, { className: `relative w-full ${homepage.heroMinH} bg-gradient-to-br from-primary/10 to-secondary/10 ${flex.center} flex-col gap-4`, children: [_jsx(Heading, { level: 2, className: "text-2xl font-bold text-primary", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "text-center max-w-md px-4", children: "Amazing deals are on their way. Stay tuned!" })] }));
-    }
-    const getBackgroundStyle = (card) => {
-        const { type, value } = card.background;
-        if (type === "transparent")
-            return { background: "transparent" };
-        if (type === "color")
-            return { backgroundColor: value };
-        if (type === "gradient")
-            return { background: value };
-        return {};
-    };
-    const getGridPosition = (card) => ({
-        gridRow: String(card.gridRow),
-        gridColumn: isMobile ? "1" : String(card.gridCol),
-    });
+    }, [slides.length, isPaused, prefersReducedMotion, goNext, autoplayDelay]);
     const handleKeyDown = (e) => {
         if (e.key === "ArrowRight")
             goNext();
@@ -88,63 +165,30 @@ export function HeroCarousel({ initialSlides, push } = {}) {
             setIsPaused((p) => !p);
         }
     };
-    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${homepage.heroMinH} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => (_jsxs(Div, { className: "snap-start flex-none w-full relative self-stretch bg-zinc-900", children: [_jsxs(Div, { className: position.fill, children: [slide.media.type === "image" ? (_jsx(MediaImage, { src: isMobile && slide.mobileMedia
-                                            ? slide.mobileMedia.url
-                                            : slide.media.url, alt: slide.media.alt, size: "hero", priority: slideIndex === 0 })) : (_jsx(MediaVideo, { src: isMobile && slide.mobileMedia
-                                            ? slide.mobileMedia.url
-                                            : slide.media.url, thumbnailUrl: slide.media.thumbnail, alt: slide.media.alt, autoPlayMuted: true, loop: true, controls: false })), _jsx(Div, { className: `${position.fill} bg-black/10` })] }), slide.overlay ? (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: () => {
-                                                const btn = slide.overlay.button;
-                                                if (btn.openInNewTab) {
-                                                    window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                }
-                                                else {
-                                                    navigate(btn.link, push);
-                                                }
-                                            }, children: slide.overlay.button.text }) }))] })) : (
-                            /* Grid Overlay with Cards */
-                            _jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
-                                    gridTemplateRows: "repeat(2, 1fr)",
-                                    gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
-                                    justifyItems: isMobile ? "center" : undefined,
-                                    alignItems: isMobile ? "center" : undefined,
-                                }, children: slide.cards.map((card) => (_jsxs(Div, { className: "relative rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105", style: {
-                                        ...getGridPosition(card),
-                                        ...getBackgroundStyle(card),
-                                        width: card.sizing?.widthPct
-                                            ? `${isMobile ? Math.min(card.sizing.widthPct, 65) : card.sizing.widthPct}%`
-                                            : isMobile
-                                                ? "65%"
-                                                : "100%",
-                                        height: card.sizing?.heightPct
-                                            ? `${isMobile ? Math.min(card.sizing.heightPct, 55) : card.sizing.heightPct}%`
-                                            : isMobile
-                                                ? "55%"
-                                                : "100%",
-                                        justifySelf: "center",
-                                        alignSelf: "center",
-                                    }, children: [card.background.type === "image" &&
-                                            card.background.value && (_jsx(MediaImage, { src: card.background.value, alt: "", size: "card" })), !card.isButtonOnly && (_jsxs(Div, { className: `${position.fill} flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/30 to-transparent ${card.sizing?.padding === "none"
-                                                ? "p-0"
-                                                : card.sizing?.padding === "sm"
-                                                    ? "p-1.5 md:p-3"
-                                                    : card.sizing?.padding === "lg"
-                                                        ? "p-3 md:p-8"
-                                                        : "p-2 md:p-6"}`, children: [card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl font-bold !text-white mb-0.5 md:mb-3 ${THEME_CONSTANTS.utilities.textClamp1} md:${THEME_CONSTANTS.utilities.textClamp2} drop-shadow-md`, children: card.content.title })), card.content?.description && (_jsx(Text, { className: `text-[10px] md:text-sm lg:text-base !text-white/80 mb-1 md:mb-4 ${THEME_CONSTANTS.utilities.textClamp1} drop-shadow-sm`, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn) => (_jsx(Button, { variant: btn.variant, size: "sm", onClick: () => {
-                                                            if (btn.openInNewTab) {
-                                                                window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                            }
-                                                            else {
-                                                                navigate(btn.link, push);
-                                                            }
-                                                        }, children: btn.text }, btn.id))) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: () => {
-                                                const btn = card.buttons[0];
-                                                if (btn.openInNewTab) {
-                                                    window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                }
-                                                else {
-                                                    navigate(btn.link, push);
-                                                }
-                                            }, children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }, card.id))) }))] }, slide.id))) }) }), slides.length > 1 && (_jsx(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
+    if (isLoading) {
+        return (_jsx(Div, { className: `relative w-full ${heightClass} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
+    }
+    if (!slides || slides.length === 0) {
+        return (_jsxs(Div, { className: `relative w-full min-h-[260px] md:min-h-[60vh] bg-gradient-to-br from-primary/10 to-secondary/10 ${flex.center} flex-col gap-4`, children: [_jsx(Heading, { level: 2, className: "text-2xl font-bold text-primary", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "text-center max-w-md px-4", children: "Amazing deals are on their way. Stay tuned!" })] }));
+    }
+    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
+                        const slideHeightClass = getSlideHeightClass(slide.settings?.height);
+                        const hasCards = slide.cards && slide.cards.length > 0;
+                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: position.fill, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: () => {
+                                                    const btn = slide.overlay.button;
+                                                    if (btn.openInNewTab) {
+                                                        window.open(btn.link, "_blank", "noopener,noreferrer");
+                                                    }
+                                                    else {
+                                                        navigate(btn.link, push);
+                                                    }
+                                                }, children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
+                                        gridTemplateRows: "repeat(2, 1fr)",
+                                        gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
+                                        alignContent: "center",
+                                        alignItems: "stretch",
+                                    }, children: slide.cards.slice(0, 6).map((card) => (_jsx(CarouselCardRenderer, { card: card, isMobile: isMobile, push: push }, card.id))) }))] }, slide.id));
+                    }) }) }), slides.length > 1 && (_jsx(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
                         ? THEME_CONSTANTS.carousel.dotActive
-                        : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), _jsx(Div, { className: "absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-slate-950 to-transparent pointer-events-none z-[5]", "aria-hidden": "true" }), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
+                        : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
 }

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

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