@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/features/about/components/HowAuctionsWorkView.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ROUTES } from "../../../constants";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { TextLink } from "../../../ui";
+import { Gavel, Clock, Trophy, CreditCard } from "lucide-react";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+export async function HowAuctionsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("howAuctionsWork");
+    const STEPS = [
+        { number: 1, icon: "🔍", title: t("step1Title"), text: t("step1Text") },
+        { number: 2, icon: "💬", title: t("step2Title"), text: t("step2Text") },
+        { number: 3, icon: "⏳", title: t("step3Title"), text: t("step3Text") },
+        { number: 4, icon: "🏆", title: t("step4Title"), text: t("step4Text") },
+        { number: 5, icon: "💳", title: t("step5Title"), text: t("step5Text") },
+    ];
+    const INFO_CARDS = [
+        {
+            icon: Gavel,
+            title: t("infoCard1Title"),
+            text: t("infoCard1Text"),
+            color: "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
+            iconColor: "text-primary",
+        },
+        {
+            icon: Clock,
+            title: t("infoCard2Title"),
+            text: t("infoCard2Text"),
+            color: "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-700",
+            iconColor: "text-amber-600 dark:text-amber-400",
+        },
+        {
+            icon: Trophy,
+            title: t("infoCard3Title"),
+            text: t("infoCard3Text"),
+            color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-700",
+            iconColor: "text-emerald-600 dark:text-emerald-400",
+        },
+        {
+            icon: CreditCard,
+            title: t("infoCard4Title"),
+            text: t("infoCard4Text"),
+            color: "bg-sky-50 border-sky-200 dark:bg-sky-900/20 dark:border-sky-700",
+            iconColor: "text-sky-600 dark:text-sky-400",
+        },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "🔍",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("step1Title"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "💬",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("step2Title"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "⏳",
+            circleClass: "bg-amber-100 dark:bg-amber-900/40 border-2 border-amber-300 dark:border-amber-600",
+            badge: t("step3Title"),
+            badgeClass: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "🏆",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("step4Title"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("diagramStep4Desc"),
+        },
+        {
+            emoji: "📦",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("step5Title"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("diagramStep5Desc"),
+        },
+    ];
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howauctionsworkview-div-115", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howauctionsworkview-div-116", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howauctionsworkview-div-117", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howauctionsworkview-div-118", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howauctionsworkview-div-119", children: icon }), _jsxs("div", { "data-section": "howauctionsworkview-div-120", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🔨 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howauctionsworkview-div-121", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howauctionsworkview-div-122", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howauctionsworkview-div-123", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howauctionsworkview-div-124", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.AUCTIONS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] })] })] }));
+}

package/dist/features/about/components/HowCheckoutWorksView.d.ts

@@ -0,0 +1,4 @@
+export interface HowCheckoutWorksViewProps {
+    heroBannerClass?: string;
+}
+export declare function HowCheckoutWorksView({ heroBannerClass, }?: HowCheckoutWorksViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/about/components/HowCheckoutWorksView.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ROUTES } from "../../../constants";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { TextLink } from "../../../ui";
+import { Smartphone, Banknote } from "lucide-react";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+export async function HowCheckoutWorksView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("howCheckoutWorks");
+    const STEPS = [
+        { number: 1, icon: "🛒", title: t("step1Title"), text: t("step1Text") },
+        { number: 2, icon: "📍", title: t("step2Title"), text: t("step2Text") },
+        { number: 3, icon: "💳", title: t("step3Title"), text: t("step3Text") },
+        { number: 4, icon: "✅", title: t("step4Title"), text: t("step4Text") },
+        { number: 5, icon: "📧", title: t("step5Title"), text: t("step5Text") },
+    ];
+    const PAYMENT_METHODS = [
+        {
+            icon: Smartphone,
+            title: t("pm1Title"),
+            text: t("pm1Text"),
+            color: "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
+            iconColor: "text-primary",
+        },
+        {
+            icon: Banknote,
+            title: t("pm2Title"),
+            text: t("pm2Text"),
+            color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-700",
+            iconColor: "text-emerald-600 dark:text-emerald-400",
+        },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "🛒",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("step1Title"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "📍",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("step2Title"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "💳",
+            circleClass: "bg-violet-100 dark:bg-violet-900/40 border-2 border-violet-400 dark:border-violet-600",
+            badge: t("step3Title"),
+            badgeClass: "bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "✅",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("step4Title"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("diagramStep4Desc"),
+        },
+        {
+            emoji: "📦",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("step5Title"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("diagramStep5Desc"),
+        },
+    ];
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howcheckoutworksview-div-125", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howcheckoutworksview-div-126", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howcheckoutworksview-div-127", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howcheckoutworksview-div-128", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howcheckoutworksview-div-129", children: icon }), _jsxs("div", { "data-section": "howcheckoutworksview-div-130", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🗺️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3 text-center", children: t("paymentMethodsTitle") }), _jsx(Text, { variant: "secondary", className: "text-center mb-8 max-w-xl mx-auto", children: t("paymentMethodsSubtitle") }), _jsx("div", { className: "grid gap-5 md:grid-cols-3", "data-section": "howcheckoutworksview-div-131", children: PAYMENT_METHODS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howcheckoutworksview-div-132", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howcheckoutworksview-div-133", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howcheckoutworksview-div-134", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] })] })] }));
+}

package/dist/features/about/components/HowOffersWorkView.d.ts

@@ -0,0 +1,4 @@
+export interface HowOffersWorkViewProps {
+    heroBannerClass?: string;
+}
+export declare function HowOffersWorkView({ heroBannerClass, }?: HowOffersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/about/components/HowOffersWorkView.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ROUTES } from "../../../constants";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { TextLink } from "../../../ui";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+export async function HowOffersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("howOffersWork");
+    const STEPS = [
+        { number: 1, icon: "🔍", title: t("step1Title"), text: t("step1Text") },
+        { number: 2, icon: "💬", title: t("step2Title"), text: t("step2Text") },
+        { number: 3, icon: "🤝", title: t("step3Title"), text: t("step3Text") },
+        { number: 4, icon: "💳", title: t("step4Title"), text: t("step4Text") },
+        { number: 5, icon: "📦", title: t("step5Title"), text: t("step5Text") },
+        { number: 6, icon: "⭐", title: t("step6Title"), text: t("step6Text") },
+    ];
+    const RULES = [t("rule1"), t("rule2"), t("rule3"), t("rule4"), t("rule5")];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "💬",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("diagramStep1Badge"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "📩",
+            circleClass: "bg-amber-100 dark:bg-amber-900/40 border-2 border-amber-300 dark:border-amber-600",
+            badge: t("diagramStep2Badge"),
+            badgeClass: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "✅",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("diagramStep3Badge"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "💳",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("diagramStep4Badge"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep4Desc"),
+        },
+        {
+            emoji: "📦",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("diagramStep5Badge"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("diagramStep5Desc"),
+        },
+    ];
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howoffersworkview-div-135", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howoffersworkview-div-136", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howoffersworkview-div-137", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howoffersworkview-div-138", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howoffersworkview-div-139", children: icon }), _jsxs("div", { "data-section": "howoffersworkview-div-140", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🤝 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsxs(Section, { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-6`, children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("rulesTitle") }), _jsx("ul", { className: "space-y-2", children: RULES.map((rule) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", children: [_jsx("span", { className: "text-primary mt-0.5", children: "\u2022" }), _jsx(Text, { variant: "secondary", children: rule })] }, rule))) })] }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howoffersworkview-div-141", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] })] })] }));
+}

package/dist/features/about/components/HowOrdersWorkView.d.ts

@@ -0,0 +1,4 @@
+export interface HowOrdersWorkViewProps {
+    heroBannerClass?: string;
+}
+export declare function HowOrdersWorkView({ heroBannerClass, }?: HowOrdersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/about/components/HowOrdersWorkView.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ROUTES } from "../../../constants";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, Text, Section, Span, Row, FlowDiagram } from "../../../ui";
+import { TextLink } from "../../../ui";
+import { PackageSearch, MapPinned, FileText, XCircle } from "lucide-react";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+export async function HowOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("howOrdersWork");
+    const ORDER_STATUSES = [
+        {
+            status: t("statusPending"),
+            icon: "⏳",
+            badge: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("statusPendingDesc"),
+        },
+        {
+            status: t("statusConfirmed"),
+            icon: "✅",
+            badge: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("statusConfirmedDesc"),
+        },
+        {
+            status: t("statusPacked"),
+            icon: "📦",
+            badge: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("statusPackedDesc"),
+        },
+        {
+            status: t("statusShipped"),
+            icon: "🚚",
+            badge: "bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300",
+            desc: t("statusShippedDesc"),
+        },
+        {
+            status: t("statusOutForDelivery"),
+            icon: "🏃",
+            badge: "bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300",
+            desc: t("statusOutForDeliveryDesc"),
+        },
+        {
+            status: t("statusDelivered"),
+            icon: "🎉",
+            badge: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("statusDeliveredDesc"),
+        },
+        {
+            status: t("statusCancelled"),
+            icon: "❌",
+            badge: "bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300",
+            desc: t("statusCancelledDesc"),
+        },
+    ];
+    const INFO_CARDS = [
+        {
+            icon: PackageSearch,
+            title: t("infoCard1Title"),
+            text: t("infoCard1Text"),
+            color: "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
+            iconColor: "text-primary",
+        },
+        {
+            icon: MapPinned,
+            title: t("infoCard2Title"),
+            text: t("infoCard2Text"),
+            color: "bg-sky-50 border-sky-200 dark:bg-sky-900/20 dark:border-sky-700",
+            iconColor: "text-sky-600 dark:text-sky-400",
+        },
+        {
+            icon: FileText,
+            title: t("infoCard3Title"),
+            text: t("infoCard3Text"),
+            color: "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-700",
+            iconColor: "text-amber-600 dark:text-amber-400",
+        },
+        {
+            icon: XCircle,
+            title: t("infoCard4Title"),
+            text: t("infoCard4Text"),
+            color: "bg-rose-50 border-rose-200 dark:bg-rose-900/20 dark:border-rose-700",
+            iconColor: "text-rose-600 dark:text-rose-400",
+        },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "🛒",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("diagramStep1Badge"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "✅",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("diagramStep2Badge"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "📦",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("diagramStep3Badge"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "🚚",
+            circleClass: "bg-violet-100 dark:bg-violet-900/40 border-2 border-violet-400 dark:border-violet-600",
+            badge: t("diagramStep4Badge"),
+            badgeClass: "bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300",
+            desc: t("diagramStep4Desc"),
+        },
+        {
+            emoji: "🏠",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("diagramStep5Badge"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("diagramStep5Desc"),
+        },
+        {
+            emoji: "⭐",
+            circleClass: "bg-amber-100 dark:bg-amber-900/40 border-2 border-amber-300 dark:border-amber-600",
+            badge: t("diagramStep6Badge"),
+            badgeClass: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("diagramStep6Desc"),
+        },
+    ];
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howordersworkview-div-142", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howordersworkview-div-143", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howordersworkview-div-144", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("statusesTitle") }), _jsx("div", { className: "space-y-3", "data-section": "howordersworkview-div-145", children: ORDER_STATUSES.map(({ status, icon, badge, desc }) => (_jsxs("div", { className: `flex items-start gap-4 p-4 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howordersworkview-div-146", children: [_jsxs(Row, { align: "center", gap: "sm", className: "flex-shrink-0 pt-0.5", children: [_jsx(Span, { className: "text-xl", children: icon }), _jsx(Span, { className: `text-xs font-semibold px-2 py-0.5 rounded-full ${badge}`, children: status })] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: desc })] }, status))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📦 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howordersworkview-div-147", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howordersworkview-div-148", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howordersworkview-div-149", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howordersworkview-div-150", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), variant: "muted", children: t("ctaCheckout") })] })] })] })] }));
+}

package/dist/features/about/components/HowPayoutsWorkView.d.ts

@@ -0,0 +1,4 @@
+export interface HowPayoutsWorkViewProps {
+    heroBannerClass?: string;
+}
+export declare function HowPayoutsWorkView({ heroBannerClass, }?: HowPayoutsWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/about/components/HowPayoutsWorkView.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ROUTES } from "../../../constants";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { TextLink } from "../../../ui";
+import { DollarSign, Calendar, Banknote, ShieldCheck } from "lucide-react";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+export async function HowPayoutsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("howPayoutsWork");
+    const STEPS = [
+        { number: 1, icon: "✅", title: t("step1Title"), text: t("step1Text") },
+        { number: 2, icon: "🔍", title: t("step2Title"), text: t("step2Text") },
+        { number: 3, icon: "📤", title: t("step3Title"), text: t("step3Text") },
+        { number: 4, icon: "🏦", title: t("step4Title"), text: t("step4Text") },
+        { number: 5, icon: "🎉", title: t("step5Title"), text: t("step5Text") },
+    ];
+    const INFO_CARDS = [
+        {
+            icon: Calendar,
+            title: t("infoCard1Title"),
+            text: t("infoCard1Text"),
+            color: "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
+            iconColor: "text-primary",
+        },
+        {
+            icon: DollarSign,
+            title: t("infoCard2Title"),
+            text: t("infoCard2Text"),
+            color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-700",
+            iconColor: "text-emerald-600 dark:text-emerald-400",
+        },
+        {
+            icon: Banknote,
+            title: t("infoCard3Title"),
+            text: t("infoCard3Text"),
+            color: "bg-sky-50 border-sky-200 dark:bg-sky-900/20 dark:border-sky-700",
+            iconColor: "text-sky-600 dark:text-sky-400",
+        },
+        {
+            icon: ShieldCheck,
+            title: t("infoCard4Title"),
+            text: t("infoCard4Text"),
+            color: "bg-violet-50 border-violet-200 dark:bg-violet-900/20 dark:border-violet-700",
+            iconColor: "text-violet-600 dark:text-violet-400",
+        },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "✅",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("step1Title"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "🔍",
+            circleClass: "bg-amber-100 dark:bg-amber-900/40 border-2 border-amber-300 dark:border-amber-600",
+            badge: t("step2Title"),
+            badgeClass: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "📤",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("step3Title"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "🏦",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("step4Title"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("diagramStep4Desc"),
+        },
+        {
+            emoji: "🎉",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("step5Title"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("diagramStep5Desc"),
+        },
+    ];
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpayoutsworkview-div-151", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpayoutsworkview-div-152", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpayoutsworkview-div-153", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpayoutsworkview-div-154", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpayoutsworkview-div-155", children: icon }), _jsxs("div", { "data-section": "howpayoutsworkview-div-156", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `💸 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpayoutsworkview-div-157", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpayoutsworkview-div-158", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpayoutsworkview-div-159", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpayoutsworkview-div-160", children: [_jsx(TextLink, { href: String(ROUTES.SELLER.PAYOUT_SETTINGS), children: t("ctaPayoutSettings") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.FEES), variant: "muted", children: t("ctaFees") })] })] })] })] }));
+}

package/dist/features/about/components/HowPreOrdersWorkView.d.ts

@@ -0,0 +1,4 @@
+export interface HowPreOrdersWorkViewProps {
+    heroBannerClass?: string;
+}
+export declare function HowPreOrdersWorkView({ heroBannerClass, }?: HowPreOrdersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/about/components/HowPreOrdersWorkView.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ROUTES } from "../../../constants";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { TextLink } from "../../../ui";
+import { Package, Clock, Banknote, AlertCircle } from "lucide-react";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+export async function HowPreOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("howPreOrdersWork");
+    const STEPS = [
+        { number: 1, icon: "🔍", title: t("step1Title"), text: t("step1Text") },
+        { number: 2, icon: "📋", title: t("step2Title"), text: t("step2Text") },
+        { number: 3, icon: "💳", title: t("step3Title"), text: t("step3Text") },
+        { number: 4, icon: "⏳", title: t("step4Title"), text: t("step4Text") },
+        { number: 5, icon: "📦", title: t("step5Title"), text: t("step5Text") },
+    ];
+    const INFO_CARDS = [
+        {
+            icon: Package,
+            title: t("infoCard1Title"),
+            text: t("infoCard1Text"),
+            color: "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
+            iconColor: "text-primary",
+        },
+        {
+            icon: Clock,
+            title: t("infoCard2Title"),
+            text: t("infoCard2Text"),
+            color: "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-700",
+            iconColor: "text-amber-600 dark:text-amber-400",
+        },
+        {
+            icon: Banknote,
+            title: t("infoCard3Title"),
+            text: t("infoCard3Text"),
+            color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-700",
+            iconColor: "text-emerald-600 dark:text-emerald-400",
+        },
+        {
+            icon: AlertCircle,
+            title: t("infoCard4Title"),
+            text: t("infoCard4Text"),
+            color: "bg-rose-50 border-rose-200 dark:bg-rose-900/20 dark:border-rose-700",
+            iconColor: "text-rose-600 dark:text-rose-400",
+        },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "🔍",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("step1Title"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "💳",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("step3Title"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "⏳",
+            circleClass: "bg-amber-100 dark:bg-amber-900/40 border-2 border-amber-300 dark:border-amber-600",
+            badge: t("step4Title"),
+            badgeClass: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "📦",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("step5Title"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("diagramStep4Desc"),
+        },
+        {
+            emoji: "🎉",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("diagramStep5Badge"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("diagramStep5Desc"),
+        },
+    ];
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpreordersworkview-div-161", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpreordersworkview-div-162", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpreordersworkview-div-163", children: [_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: STEPS.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpreordersworkview-div-164", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpreordersworkview-div-165", children: icon }), _jsxs("div", { "data-section": "howpreordersworkview-div-166", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📋 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpreordersworkview-div-167", children: INFO_CARDS.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpreordersworkview-div-168", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpreordersworkview-div-169", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }), _jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpreordersworkview-div-170", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRE_ORDERS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] })] })] }));
+}

package/dist/features/about/components/HowReviewsWorkView.d.ts

@@ -0,0 +1,4 @@
+export interface HowReviewsWorkViewProps {
+    heroBannerClass?: string;
+}
+export declare function HowReviewsWorkView({ heroBannerClass, }?: HowReviewsWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;