@mohasinac/appkit 2.3.0 → 2.3.1

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

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Button, Div, Heading, Row, Span } from "../../../ui";
+export function HeroBanner({ banners, autoplayMs = 5000 }) {
+    const [current, setCurrent] = useState(0);
+    const [animating, setAnimating] = useState(false);
+    const goTo = useCallback((idx) => {
+        if (animating)
+            return;
+        setAnimating(true);
+        setCurrent(idx);
+        setTimeout(() => setAnimating(false), 600);
+    }, [animating]);
+    const next = useCallback(() => {
+        goTo((current + 1) % banners.length);
+    }, [current, banners.length, goTo]);
+    const prev = useCallback(() => {
+        goTo((current - 1 + banners.length) % banners.length);
+    }, [current, banners.length, goTo]);
+    useEffect(() => {
+        if (banners.length <= 1)
+            return;
+        const id = setInterval(next, autoplayMs);
+        return () => clearInterval(id);
+    }, [next, banners.length, autoplayMs]);
+    if (banners.length === 0)
+        return null;
+    const banner = banners[current];
+    return (_jsxs(Div, { className: "relative overflow-hidden", style: {
+            minHeight: "100svh",
+            background: banner.backgroundColor ?? "var(--dark-section-deep)",
+        }, children: [banners.map((b, i) => (_jsx(Div, { className: "absolute inset-0 transition-opacity duration-700", style: { opacity: i === current ? 1 : 0, zIndex: 1 }, children: b.backgroundImage && (_jsx(Image, { src: b.backgroundImage, alt: b.title, fill: true, className: "object-cover object-center", priority: i === 0, sizes: "100vw" })) }, b.id))), _jsx(Div, { className: "absolute inset-0", style: {
+                    background: "linear-gradient(110deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.18) 100%)",
+                    zIndex: 2,
+                } }), _jsx(Div, { className: "absolute inset-0", style: {
+                    background: "linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 30%, rgba(0,0,0,0.55) 100%)",
+                    zIndex: 3,
+                } }), _jsxs(Div, { className: "relative flex flex-col justify-end px-5 pb-16 sm:px-12 sm:pb-24 lg:px-20", style: {
+                    minHeight: "100svh",
+                    zIndex: 10,
+                    paddingTop: "var(--header-height, 4rem)",
+                }, children: [banner.subtitle && (_jsx(Div, { className: "mb-3", children: _jsx(Span, { className: "inline-block px-3 py-1 text-xs font-black uppercase tracking-[0.18em]", style: {
+                                background: "var(--color-red)",
+                                color: "#FFFFFF",
+                                fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                letterSpacing: "0.16em",
+                            }, children: banner.subtitle }) })), _jsx(Heading, { level: 2, className: "mb-5 max-w-xl leading-none", style: {
+                            fontFamily: "var(--font-bangers, Bangers, cursive)",
+                            fontSize: "clamp(3rem, 9vw, 6.5rem)",
+                            letterSpacing: "0.04em",
+                            color: banner.textColor ?? "#FFFFFF",
+                            textShadow: "0 4px 32px rgba(0,0,0,0.5)",
+                        }, children: banner.title }), banner.ctaLabel && banner.ctaUrl && (_jsx(Row, { wrap: true, gap: "md", children: _jsxs(Link, { href: banner.ctaUrl, className: "inline-flex items-center gap-2 sm:gap-3 px-5 py-3 sm:px-8 sm:py-3.5 font-black uppercase transition-all hover:-translate-y-0.5", style: {
+                                fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                letterSpacing: "0.1em",
+                                fontSize: "clamp(0.85rem, 2.5vw, 1.1rem)",
+                                background: "var(--color-yellow)",
+                                color: "#1A1A1A",
+                                boxShadow: "0 4px 24px rgba(255,229,0,0.35)",
+                            }, children: [banner.ctaLabel, _jsx(Span, { "aria-hidden": "true", className: "text-lg sm:text-xl leading-none", children: "\u2192" })] }) }))] }), banners.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: prev, "aria-label": "Previous slide", variant: "ghost", size: "sm", className: "absolute left-3 sm:left-6 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full transition-all hover:scale-105", style: {
+                            zIndex: 15,
+                            width: 40,
+                            height: 40,
+                            background: "rgba(255,255,255,0.12)",
+                            border: "1px solid rgba(255,255,255,0.2)",
+                            color: "#ffffff",
+                            backdropFilter: "blur(6px)",
+                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { onClick: next, "aria-label": "Next slide", variant: "ghost", size: "sm", className: "absolute right-3 sm:right-6 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full transition-all hover:scale-105", style: {
+                            zIndex: 15,
+                            width: 40,
+                            height: 40,
+                            background: "rgba(255,255,255,0.12)",
+                            border: "1px solid rgba(255,255,255,0.2)",
+                            color: "#ffffff",
+                            backdropFilter: "blur(6px)",
+                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] })), banners.length > 1 && (_jsxs(Row, { className: "absolute bottom-8 right-6 sm:right-12 gap-3", style: { zIndex: 15 }, children: [_jsxs(Span, { className: "text-xs font-black tabular-nums", style: {
+                            color: "rgba(255,255,255,0.6)",
+                            fontFamily: "var(--font-bangers, Bangers, cursive)",
+                            letterSpacing: "0.1em",
+                        }, children: [String(current + 1).padStart(2, "0"), " /", " ", String(banners.length).padStart(2, "0")] }), _jsx(Div, { className: "flex gap-1.5", children: banners.map((_, i) => (_jsx(Button, { onClick: () => goTo(i), "aria-label": `Go to slide ${i + 1}`, variant: "ghost", size: "sm", className: "transition-all", style: {
+                                height: 3,
+                                width: i === current ? 28 : 10,
+                                borderRadius: 2,
+                                background: i === current
+                                    ? "var(--color-yellow)"
+                                    : "rgba(255,255,255,0.35)",
+                            } }, i))) })] })), _jsx(Div, { className: "absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1", style: { zIndex: 15, opacity: 0.5 }, "aria-hidden": "true", children: _jsx(Div, { className: "h-8 w-px", style: {
+                        background: "linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8))",
+                    } }) })] }));
+}

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

@@ -0,0 +1,11 @@
+import type { CarouselSlide } from "../types/index";
+export interface HeroCarouselProps {
+    initialSlides?: CarouselSlide[];
+    /**
+     * Navigate to an internal path.
+     * Pass `useRouter().push` from your locale-aware router (e.g. `@/i18n/navigation`).
+     * Falls back to `window.location.href` assignment when omitted.
+     */
+    push?: (href: string) => void;
+}
+export declare function HeroCarousel({ initialSlides, push }?: HeroCarouselProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,150 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useMediaQuery } from "../../../react";
+import { THEME_CONSTANTS } from "../../../tokens";
+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;
+function navigate(href, push) {
+    if (push) {
+        push(href);
+    }
+    else {
+        window.location.href = href;
+    }
+}
+export function HeroCarousel({ initialSlides, push } = {}) {
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [isPaused, setIsPaused] = useState(false);
+    const sectionRef = useRef(null);
+    const slidesRef = useRef(null);
+    const isScrollingRef = useRef(false);
+    const isMobile = useMediaQuery("(max-width: 767px)");
+    const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+    const { data, isLoading } = useHeroCarousel({ initialData: initialSlides });
+    const slides = data
+        ?.filter((s) => s.active)
+        ?.sort((a, b) => a.order - b.order)
+        ?.slice(0, 5) || [];
+    const goToSlide = useCallback((index) => {
+        const el = slidesRef.current;
+        if (!el)
+            return;
+        setCurrentSlide(index);
+        isScrollingRef.current = true;
+        el.scrollTo({ left: index * el.offsetWidth, behavior: "smooth" });
+        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]);
+    const handleSlidesScroll = useCallback(() => {
+        if (isScrollingRef.current)
+            return;
+        const el = slidesRef.current;
+        if (!el || el.offsetWidth === 0)
+            return;
+        const idx = Math.round(el.scrollLeft / el.offsetWidth);
+        if (idx >= 0 && idx < slides.length)
+            setCurrentSlide(idx);
+    }, [slides.length]);
+    useEffect(() => {
+        if (slides.length <= 1 || isPaused || prefersReducedMotion)
+            return;
+        const interval = setInterval(goNext, 4000);
+        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),
+    });
+    const handleKeyDown = (e) => {
+        if (e.key === "ArrowRight")
+            goNext();
+        if (e.key === "ArrowLeft")
+            goPrev();
+        if (e.key === " ") {
+            e.preventDefault();
+            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
+                        ? 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" }) }) })] }))] }));
+}

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

@@ -0,0 +1,7 @@
+import type { HomepageSection } from "../types";
+interface HeroSectionProps {
+    section: HomepageSection;
+    onCtaClick?: () => void;
+}
+export declare function HeroSection({ section, onCtaClick }: HeroSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Div, Heading, Section, Text } from "../../../ui";
+export function HeroSection({ section, onCtaClick }) {
+    const { content } = section;
+    return (_jsxs(Section, { className: "relative flex min-h-[60vh] items-center overflow-hidden bg-neutral-900", style: content?.imageUrl
+            ? {
+                backgroundImage: `url(${content.imageUrl})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+            }
+            : undefined, children: [_jsx(Div, { className: "absolute inset-0 bg-black/40" }), _jsxs(Div, { className: "relative mx-auto max-w-7xl px-4 py-16 text-center text-white sm:px-6 lg:px-8", children: [content?.title && (_jsx(Heading, { level: 1, className: "text-4xl font-bold leading-tight sm:text-5xl lg:text-6xl", children: content.title })), content?.subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-2xl text-lg opacity-90", children: content.subtitle })), content?.ctaLabel && (_jsx(Button, { onClick: onCtaClick, className: "mt-8 inline-block rounded-full bg-white px-8 py-3 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100", children: content.ctaLabel }))] })] }));
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+/** Full-page skeleton shown while homepage data loads. */
+export declare function HomepageSkeleton(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,25 @@
+import React from "react";
+export interface HomepageViewProps {
+    renderHero?: () => React.ReactNode;
+    renderWelcome?: () => React.ReactNode;
+    renderTrustFeatures?: () => React.ReactNode;
+    renderStats?: () => React.ReactNode;
+    renderTopCategories?: () => React.ReactNode;
+    renderTopBrands?: () => React.ReactNode;
+    renderFeaturedProducts?: () => React.ReactNode;
+    renderFeaturedAuctions?: () => React.ReactNode;
+    renderFeaturedPreOrders?: () => React.ReactNode;
+    renderFeaturedStores?: () => React.ReactNode;
+    renderFeaturedEvents?: () => React.ReactNode;
+    renderAdvertisement?: () => React.ReactNode;
+    renderCustomerReviews?: () => React.ReactNode;
+    renderCommunity?: () => React.ReactNode;
+    renderFaq?: () => React.ReactNode;
+    renderBlogArticles?: () => React.ReactNode;
+    renderHowItWorks?: () => React.ReactNode;
+    renderSecurity?: () => React.ReactNode;
+    renderNewsletter?: () => React.ReactNode;
+    renderFeaturedResults?: () => React.ReactNode;
+    className?: string;
+}
+export declare function HomepageView({ renderHero, renderWelcome, renderTrustFeatures, renderStats, renderTopCategories, renderTopBrands, renderFeaturedProducts, renderFeaturedAuctions, renderFeaturedPreOrders, renderFeaturedStores, renderFeaturedEvents, renderAdvertisement, renderCustomerReviews, renderCommunity, renderFaq, renderBlogArticles, renderHowItWorks, renderSecurity, renderNewsletter, renderFeaturedResults, className, }: HomepageViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Div } from "../../../ui";
+export function HomepageView({ renderHero, renderWelcome, renderTrustFeatures, renderStats, renderTopCategories, renderTopBrands, renderFeaturedProducts, renderFeaturedAuctions, renderFeaturedPreOrders, renderFeaturedStores, renderFeaturedEvents, renderAdvertisement, renderCustomerReviews, renderCommunity, renderFaq, renderBlogArticles, renderHowItWorks, renderSecurity, renderNewsletter, renderFeaturedResults, className = "", }) {
+    return (_jsxs(Div, { className: className, children: [renderHero?.(), renderWelcome?.(), renderTrustFeatures?.(), renderStats?.(), renderTopCategories?.(), renderTopBrands?.(), renderFeaturedProducts?.(), renderFeaturedAuctions?.(), renderFeaturedPreOrders?.(), renderFeaturedStores?.(), renderFeaturedEvents?.(), renderAdvertisement?.(), renderCustomerReviews?.(), renderCommunity?.(), renderFaq?.(), renderBlogArticles?.(), renderHowItWorks?.(), renderSecurity?.(), renderNewsletter?.(), renderFeaturedResults?.()] }));
+}

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

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+export interface HowItWorksInfoStep {
+    number: number;
+    icon: string;
+    title: string;
+    text: string;
+    /** Optional accent colour class for the step number badge, e.g. "bg-emerald-100 …" */
+    accentClass?: string;
+    /** Optional text colour class for the number */
+    textClass?: string;
+}
+export interface HowItWorksInfoDetail {
+    title: string;
+    text: string;
+}
+export interface HowItWorksInfoViewProps {
+    /** Page hero heading */
+    title: string;
+    subtitle?: string;
+    /** Tailwind gradient class for the hero header, e.g. "bg-gradient-to-r from-cobalt-600 to-violet-700" */
+    heroClass?: string;
+    /** Step-by-step section heading */
+    stepsTitle?: string;
+    steps: HowItWorksInfoStep[];
+    /** "Important things to know" or similar detail cards below the steps */
+    detailsSectionTitle?: string;
+    details?: HowItWorksInfoDetail[];
+    /** Optional: render the flow/status diagram above the steps list */
+    renderDiagram?: () => ReactNode;
+    /** Optional extra content at the bottom (CTAs, links, etc.) */
+    renderFooter?: () => ReactNode;
+    /** Accent colour for the step number badges (default: cobalt/blue) */
+    accentClass?: string;
+    className?: string;
+}
+export declare function HowItWorksInfoView({ title, subtitle, heroClass, stepsTitle, steps, detailsSectionTitle, details, renderDiagram, renderFooter, accentClass, className, }: HowItWorksInfoViewProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,23 @@
+import React from "react";
+export interface HowItWorksStep {
+    number: number;
+    title: string;
+    desc: string;
+    renderIcon?: (props: {
+        className?: string;
+    }) => React.ReactNode;
+    accentFrom?: string;
+    iconColor?: string;
+    iconBg?: string;
+    badgeBg?: string;
+}
+export interface HowItWorksSectionProps {
+    title: string;
+    subtitle?: string;
+    pillLabel?: string;
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+    steps: HowItWorksStep[];
+    className?: string;
+}
+export declare function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className, }: HowItWorksSectionProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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