@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/marketing/marketing.d.ts

@@ -0,0 +1,176 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+import { type MascotStandingState } from '../mascot/mascot';
+export type SectionTone = 'default' | 'muted' | 'indigo' | 'brand';
+export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    tone?: SectionTone;
+    /** Vertical spacing: `md` 64/96px, `lg` 96/160px. */
+    spacing?: 'sm' | 'md' | 'lg';
+    /** Small label above the title ("How we work"). */
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Center the header (default left). */
+    centered?: boolean;
+    headingLevel?: 2 | 3;
+    children?: ReactNode;
+}
+/** Page section with consistent spacing, width and an optional header. */
+export declare function Section({ tone, spacing, eyebrow, title, description, centered, headingLevel, className, children, ...rest }: SectionProps): import("react").JSX.Element;
+export interface PageHeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Buttons; the primary action first. */
+    actions?: ReactNode;
+    /** Right column on desktop (illustration, product shot, interactive tool), below on mobile. */
+    media?: ReactNode;
+    /** Small line under the actions ("No credit card · Cancel anytime"). */
+    note?: ReactNode;
+    /** A line of facts under the title ("Updated Nov 4, 2026 · 5 min read"). */
+    meta?: ReactNode;
+    /** `default`: the home and landing hero. `compact`: less space and a smaller title (docs, legal, support pages). */
+    size?: 'default' | 'compact';
+    tone?: SectionTone;
+    /** Use `h1` (default) once per page. */
+    headingLevel?: 1 | 2;
+    /**
+     * Vertical alignment of the two columns. `start` keeps the headline still when the media grows
+     * (an interactive tool that streams results); `center` (default) suits static media.
+     */
+    align?: 'center' | 'start';
+}
+/** Top of a page: one H1, one sentence, one primary action. */
+export declare function PageHero({ eyebrow, title, description, actions, media, note, meta, size, tone, headingLevel, align, className, ...rest }: PageHeroProps): import("react").JSX.Element;
+export interface ProofBarProps extends HTMLAttributes<HTMLElement> {
+    /** Lead-in, e.g. "Trusted by" + logos or names. */
+    label?: ReactNode;
+    logos?: ReactNode;
+    stats: {
+        value: ReactNode;
+        label: ReactNode;
+    }[];
+}
+/**
+ * Instant trust under the hero: who trusts us and honest numbers. Without `label`/`logos` the stats span the
+ * full width, one column per stat. Name clients or show logos only with their consent.
+ */
+export declare function ProofBar({ label, logos, stats, className, ...rest }: ProofBarProps): import("react").JSX.Element;
+export interface Door {
+    title: ReactNode;
+    description: ReactNode;
+    href: string;
+    icon: IconName;
+    cta?: ReactNode;
+}
+/** Self-segmentation: the three ways to work with Kodffe (Products · Automation & AI · Teams). */
+export declare function DoorCards({ doors, linkAs: Link, className, }: {
+    doors: Door[];
+    linkAs?: ElementType;
+    className?: string;
+}): import("react").JSX.Element;
+/** Horizontal process ("Audit → Sprint → Run & improve"); stacks on mobile. */
+export declare function ProcessSteps({ steps, className, }: {
+    steps: {
+        title: ReactNode;
+        description: ReactNode;
+        meta?: ReactNode;
+    }[];
+    className?: string;
+}): import("react").JSX.Element;
+export interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'role'> {
+    quote: ReactNode;
+    author: string;
+    role: ReactNode;
+    photo?: string;
+    /** Company logo or name. */
+    company?: ReactNode;
+    size?: 'md' | 'lg';
+}
+/** Customer quote. Use real people only with their written consent. */
+export declare function Testimonial({ quote, author, role, photo, company, size, className, ...rest }: TestimonialProps): import("react").JSX.Element;
+export interface PricingTableProps {
+    /** Usually `PlanCard`s. */
+    plans: ReactNode[];
+    /** Optional comparison rows: feature name + one cell per plan (true/false or text). */
+    comparison?: {
+        feature: ReactNode;
+        values: (boolean | ReactNode)[];
+    }[];
+    planNames?: string[];
+    /** Billing toggle (monthly/yearly) or currency switch above the plans. */
+    toolbar?: ReactNode;
+    /** Small print under the plans ("Prices in USD, taxes not included."). */
+    footnote?: ReactNode;
+    caption?: string;
+    className?: string;
+}
+/** Plans side by side, plus an optional feature comparison (scrolls horizontally on mobile). */
+export declare function PricingTable({ plans, comparison, planNames, toolbar, footnote, caption, className, }: PricingTableProps): import("react").JSX.Element;
+export interface FaqProps {
+    items: {
+        question: string;
+        answer: string;
+    }[];
+    /** Adds FAQPage structured data (JSON-LD) for search results. */
+    structuredData?: boolean;
+    /** `divided` (default): rows split by lines. `separated`: each question in its own card. */
+    appearance?: 'divided' | 'separated';
+    className?: string;
+}
+/** Questions and answers with optional FAQPage JSON-LD for SEO. */
+export declare function Faq({ items, structuredData, appearance, className }: FaqProps): import("react").JSX.Element;
+export interface CtaBandProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    actions: ReactNode;
+    /** A short label above the title ("Ready when you are"). */
+    eyebrow?: ReactNode;
+    /** Small print under the actions ("Free 30-minute call · No commitment"). */
+    note?: ReactNode;
+    mascot?: MascotStandingState | false;
+    /** `band` (default): brand gradient, closes a page. `card`: an outlined card for calls to action inside content. */
+    variant?: 'band' | 'card';
+}
+/** Closing call to action on brand gradient, with the mascot; or an outlined card inside content. */
+export declare function CtaBand({ title, description, actions, eyebrow, note, mascot, variant, className, ...rest }: CtaBandProps): import("react").JSX.Element;
+export interface FooterColumn {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+        external?: boolean;
+    }[];
+}
+export interface SiteFooterProps {
+    logo: ReactNode;
+    tagline?: ReactNode;
+    columns: FooterColumn[];
+    /** Social links (icon buttons with `aria-label`). */
+    social?: ReactNode;
+    /** Locale switch or contact line. */
+    aside?: ReactNode;
+    legal: ReactNode;
+    linkAs?: ElementType;
+    /** Shows the oversized sign-off slogan after the footer. */
+    signOff?: ReactNode;
+    /** Accessible name of the sitemap navigation (localize it). */
+    navLabel?: string;
+    /** A language switch shown as its own column, after the sitemap (e.g. `LocaleSwitch variant="select"`). */
+    locale?: ReactNode;
+    /** Its column title ("Language"). */
+    localeTitle?: string;
+    /** `default`: the page background. `brand`: a dark brand footer with accent column titles (product sites). */
+    tone?: 'default' | 'brand';
+    className?: string;
+}
+/** Site footer: brand, sitemap columns, social, legal, and the sign-off slogan. */
+export declare function SiteFooter({ logo, tagline, columns, social, aside, legal, linkAs: Link, signOff, navLabel, locale, localeTitle, tone, className, }: SiteFooterProps): import("react").JSX.Element;
+/**
+ * Oversized sign-off ("Made with code and coffee in Ecuador.") as the last thing on the page:
+ * Manrope 800, ~200px space above (120px on mobile), mint period.
+ */
+export declare function SignOff({ children, className, }: {
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/marketing/marketing.js

@@ -0,0 +1,451 @@
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Mascot as n } from "../mascot/mascot.js";
+import { Glyph as r } from "../lib/glyphs.js";
+import { Avatar as i } from "../data-display/avatar.js";
+import { Accordion as a, AccordionContent as o, AccordionItem as s, AccordionTrigger as c } from "../accordion/accordion.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/marketing/marketing.tsx
+var f = "mx-auto w-full max-w-[75rem] px-gutter", p = (e) => e === "indigo" || e === "brand" ? { "data-theme": "dark" } : {}, m = {
+	default: "bg-bg text-fg",
+	muted: "bg-surface-muted text-fg",
+	indigo: "bg-primary-strong text-fg",
+	brand: "bg-primary-strong bg-[radial-gradient(circle_at_85%_15%,color-mix(in_oklab,var(--kf-accent)_28%,transparent),transparent_55%)] text-fg"
+};
+function h({ tone: t = "default", spacing: n = "md", eyebrow: r, title: i, description: a, centered: o, headingLevel: s = 2, className: c, children: l, ...h }) {
+	let g = `h${s}`;
+	return /* @__PURE__ */ u("section", {
+		...p(t),
+		className: e("font-sans", m[t], n === "sm" ? "py-section-sm" : n === "md" ? "py-section-md" : "py-section-lg", c),
+		...h,
+		children: /* @__PURE__ */ d("div", {
+			className: f,
+			children: [(r || i || a) && /* @__PURE__ */ d("header", {
+				className: e("kf-reveal mb-10 grid max-w-3xl gap-3 md:mb-14", o && "mx-auto justify-items-center text-center"),
+				children: [
+					r && /* @__PURE__ */ u("p", {
+						className: e("m-0 text-sm font-bold tracking-wide uppercase", t === "default" || t === "muted" ? "text-link" : "text-accent"),
+						children: r
+					}),
+					i && /* @__PURE__ */ u(g, {
+						className: "m-0 font-display text-3xl font-extrabold tracking-tight text-balance md:text-5xl",
+						children: i
+					}),
+					a && /* @__PURE__ */ u("p", {
+						className: "m-0 max-w-2xl text-lg text-pretty text-fg-muted",
+						children: a
+					})
+				]
+			}), /* @__PURE__ */ u("div", {
+				className: "kf-reveal",
+				children: l
+			})]
+		})
+	});
+}
+function g({ eyebrow: t, title: n, description: r, actions: i, media: a, note: o, meta: s, size: c = "default", tone: l = "default", headingLevel: h = 1, align: g = "center", className: _, ...v }) {
+	let y = `h${h}`, b = c === "compact";
+	return /* @__PURE__ */ u("section", {
+		...p(l),
+		className: e("overflow-hidden font-sans", b ? "py-10 md:py-16" : "py-16 md:py-28", m[l], _),
+		...v,
+		children: /* @__PURE__ */ d("div", {
+			className: e(f, "grid gap-12", g === "start" ? "items-start" : "items-center", !!a && "md:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] md:gap-16"),
+			children: [/* @__PURE__ */ d("div", {
+				className: "grid max-w-2xl gap-5",
+				children: [
+					t && /* @__PURE__ */ u("p", {
+						className: e("m-0 text-sm font-bold tracking-wide uppercase", l === "default" || l === "muted" ? "text-link" : "text-accent"),
+						children: t
+					}),
+					/* @__PURE__ */ u(y, {
+						className: e("m-0 font-display leading-[1.05] font-extrabold tracking-tight text-balance", b ? "text-3xl md:text-5xl" : "text-4xl sm:text-5xl md:text-6xl"),
+						children: n
+					}),
+					s && /* @__PURE__ */ u("p", {
+						className: "m-0 text-sm text-fg-muted",
+						children: s
+					}),
+					r && /* @__PURE__ */ u("p", {
+						className: "m-0 max-w-xl text-lg text-pretty text-fg-muted md:text-xl",
+						children: r
+					}),
+					i && /* @__PURE__ */ u("div", {
+						className: "mt-2 flex flex-col gap-3 *:w-full sm:flex-row sm:flex-wrap sm:*:w-auto",
+						children: i
+					}),
+					o && /* @__PURE__ */ u("p", {
+						className: "m-0 text-sm text-fg-muted",
+						children: o
+					})
+				]
+			}), a && /* @__PURE__ */ u("div", {
+				className: "min-w-0",
+				children: a
+			})]
+		})
+	});
+}
+var _ = {
+	2: "sm:grid-cols-2",
+	3: "sm:grid-cols-3",
+	4: "sm:grid-cols-4"
+};
+function v({ label: t, logos: n, stats: r, className: i, ...a }) {
+	return /* @__PURE__ */ u("section", {
+		"aria-label": "Proof",
+		className: e("border-y border-border bg-surface py-8 font-sans", i),
+		...a,
+		children: /* @__PURE__ */ d("div", {
+			className: e(f, "flex flex-col items-center gap-8 md:flex-row md:justify-between"),
+			children: [(t || n) && /* @__PURE__ */ d("div", {
+				className: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-fg-muted",
+				children: [t && /* @__PURE__ */ u("span", {
+					className: "font-semibold",
+					children: t
+				}), n]
+			}), /* @__PURE__ */ u("dl", {
+				className: e("m-0 grid w-full grid-cols-2 gap-x-6 gap-y-5 [&>*:last-child:nth-child(odd)]:col-span-2 sm:[&>*:last-child:nth-child(odd)]:col-span-1", _[r.length] ?? "sm:grid-cols-4", t || n ? "md:w-auto" : void 0),
+				children: r.map((e, t) => /* @__PURE__ */ d("div", {
+					className: "grid justify-items-center gap-0.5 text-center md:justify-items-start md:text-left",
+					children: [/* @__PURE__ */ u("dt", {
+						className: "text-sm text-fg-muted",
+						children: e.label
+					}), /* @__PURE__ */ u("dd", {
+						className: "order-first m-0 font-display text-3xl font-extrabold tracking-tight text-fg tabular-nums",
+						children: e.value
+					})]
+				}, t))
+			})]
+		})
+	});
+}
+function y({ doors: n, linkAs: i = "a", className: a }) {
+	return /* @__PURE__ */ u("ul", {
+		className: e("m-0 grid list-none gap-4 p-0 font-sans md:grid-cols-3", a),
+		children: n.map((e, n) => /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d(i, {
+			href: e.href,
+			className: "group relative flex h-full flex-col gap-4 rounded-xl border border-border bg-surface p-7 text-fg no-underline transition-[transform,box-shadow,border-color] duration-200 ease-standard hover:-translate-y-1 hover:border-primary hover:shadow-raised focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+			children: [
+				/* @__PURE__ */ u("span", {
+					className: "grid size-14 place-items-center rounded-lg bg-gradient-brand text-on-primary",
+					children: /* @__PURE__ */ u(t, {
+						name: e.icon,
+						size: 32
+					})
+				}),
+				/* @__PURE__ */ u("span", {
+					className: "font-display text-2xl font-bold tracking-tight",
+					children: e.title
+				}),
+				/* @__PURE__ */ u("span", {
+					className: "text-[15px] text-fg-muted",
+					children: e.description
+				}),
+				/* @__PURE__ */ d("span", {
+					className: "mt-auto inline-flex items-center gap-1 pt-2 text-sm font-semibold text-link",
+					children: [e.cta ?? "Explore", /* @__PURE__ */ u(r, {
+						name: "chevron-right",
+						size: 16,
+						className: "transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
+					})]
+				})
+			]
+		}) }, n))
+	});
+}
+function b({ steps: t, className: n }) {
+	return /* @__PURE__ */ u("ol", {
+		className: e("m-0 grid list-none gap-6 p-0 font-sans md:grid-cols-[repeat(auto-fit,minmax(0,1fr))] md:gap-8", n),
+		children: t.map((e, t) => /* @__PURE__ */ d("li", {
+			className: "relative grid content-start gap-3 md:pt-14",
+			children: [
+				/* @__PURE__ */ u("span", {
+					"aria-hidden": "true",
+					className: "hidden md:absolute md:inset-x-0 md:top-5 md:block md:h-0.5 md:bg-border md:first:left-5"
+				}),
+				/* @__PURE__ */ u("span", {
+					className: "relative z-10 grid size-10 place-items-center rounded-full bg-primary font-display text-lg font-extrabold text-on-primary md:absolute md:top-0",
+					children: t + 1
+				}),
+				/* @__PURE__ */ u("h3", {
+					className: "m-0 font-display text-xl font-bold tracking-tight",
+					children: e.title
+				}),
+				e.meta && /* @__PURE__ */ u("p", {
+					className: "m-0 text-sm font-semibold text-link",
+					children: e.meta
+				}),
+				/* @__PURE__ */ u("p", {
+					className: "m-0 text-[15px] text-fg-muted",
+					children: e.description
+				})
+			]
+		}, t))
+	});
+}
+function x({ quote: t, author: n, role: r, photo: a, company: o, size: s = "lg", className: c, ...f }) {
+	return /* @__PURE__ */ d("figure", {
+		className: e("m-0 grid max-w-4xl gap-8 font-sans", c),
+		...f,
+		children: [
+			/* @__PURE__ */ u("span", {
+				"aria-hidden": "true",
+				className: "font-display text-7xl leading-[0.5] font-extrabold text-accent",
+				children: "“"
+			}),
+			/* @__PURE__ */ u("blockquote", {
+				className: e("m-0 font-display font-semibold tracking-tight text-balance", s === "lg" ? "text-2xl leading-snug md:text-3xl" : "text-xl leading-snug"),
+				children: t
+			}),
+			/* @__PURE__ */ d("figcaption", {
+				className: "flex items-center gap-4",
+				children: [/* @__PURE__ */ u(i, {
+					name: n,
+					src: a,
+					size: "lg",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ d("div", {
+					className: "grid",
+					children: [/* @__PURE__ */ u("span", {
+						className: "font-semibold",
+						children: n
+					}), /* @__PURE__ */ d("span", {
+						className: "text-sm text-fg-muted",
+						children: [r, o && /* @__PURE__ */ d(l, { children: [" · ", o] })]
+					})]
+				})]
+			})
+		]
+	});
+}
+function S({ plans: t, comparison: n, planNames: i = [], toolbar: a, footnote: o, caption: s = "Plan comparison", className: c }) {
+	return /* @__PURE__ */ d("div", {
+		className: e("grid gap-10 font-sans", c),
+		children: [
+			a && /* @__PURE__ */ u("div", {
+				className: "flex justify-center",
+				children: a
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "grid items-stretch gap-6 pt-3 md:grid-cols-[repeat(auto-fit,minmax(16rem,1fr))]",
+				children: t
+			}),
+			o && /* @__PURE__ */ u("p", {
+				className: "m-0 -mt-4 text-center text-sm text-fg-muted",
+				children: o
+			}),
+			n && /* @__PURE__ */ u("div", {
+				tabIndex: 0,
+				role: "region",
+				"aria-label": s,
+				className: "overflow-x-auto rounded-lg border border-border focus-visible:outline-3 focus-visible:outline-focus",
+				children: /* @__PURE__ */ d("table", {
+					className: "w-full min-w-[36rem] border-collapse text-sm",
+					children: [
+						/* @__PURE__ */ u("caption", {
+							className: "sr-only",
+							children: s
+						}),
+						/* @__PURE__ */ u("thead", {
+							className: "bg-surface-muted",
+							children: /* @__PURE__ */ d("tr", { children: [/* @__PURE__ */ u("th", {
+								scope: "col",
+								className: "px-4 py-3 text-left font-semibold text-fg-muted",
+								children: /* @__PURE__ */ u("span", {
+									className: "sr-only",
+									children: "Feature"
+								})
+							}), i.map((e) => /* @__PURE__ */ u("th", {
+								scope: "col",
+								className: "px-4 py-3 text-center font-semibold",
+								children: e
+							}, e))] })
+						}),
+						/* @__PURE__ */ u("tbody", { children: n.map((e, t) => /* @__PURE__ */ d("tr", {
+							className: "border-t border-border",
+							children: [/* @__PURE__ */ u("th", {
+								scope: "row",
+								className: "px-4 py-3 text-left font-medium",
+								children: e.feature
+							}), e.values.map((e, t) => /* @__PURE__ */ u("td", {
+								className: "px-4 py-3 text-center",
+								children: e === !0 ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(r, {
+									name: "check",
+									size: 18,
+									className: "inline text-success-icon"
+								}), /* @__PURE__ */ u("span", {
+									className: "sr-only",
+									children: "Included"
+								})] }) : e === !1 ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(r, {
+									name: "minus",
+									size: 18,
+									className: "inline text-fg-muted/60"
+								}), /* @__PURE__ */ u("span", {
+									className: "sr-only",
+									children: "Not included"
+								})] }) : e
+							}, t))]
+						}, t)) })
+					]
+				})
+			})
+		]
+	});
+}
+function C({ items: t, structuredData: n = !0, appearance: r = "divided", className: i }) {
+	let l = {
+		"@context": "https://schema.org",
+		"@type": "FAQPage",
+		mainEntity: t.map((e) => ({
+			"@type": "Question",
+			name: e.question,
+			acceptedAnswer: {
+				"@type": "Answer",
+				text: e.answer
+			}
+		}))
+	};
+	return /* @__PURE__ */ d("div", {
+		className: e("max-w-3xl", i),
+		children: [/* @__PURE__ */ u(a, {
+			type: "single",
+			collapsible: !0,
+			appearance: r === "separated" ? "card" : "divided",
+			children: t.map((e) => /* @__PURE__ */ d(s, {
+				value: e.question,
+				children: [/* @__PURE__ */ u(c, {
+					size: "lg",
+					children: e.question
+				}), /* @__PURE__ */ u(o, {
+					forceMount: !0,
+					size: "lg",
+					children: e.answer
+				})]
+			}, e.question))
+		}), n && /* @__PURE__ */ u("script", {
+			type: "application/ld+json",
+			dangerouslySetInnerHTML: { __html: JSON.stringify(l).replace(/</g, "\\u003c") }
+		})]
+	});
+}
+function w({ title: t, description: r, actions: i, eyebrow: a, note: o, mascot: s = "happy", variant: c = "band", className: l, ...f }) {
+	let p = c === "band";
+	return /* @__PURE__ */ u("section", {
+		className: e("font-sans", p && "px-gutter py-section-md", l),
+		...f,
+		children: /* @__PURE__ */ d("div", {
+			...p ? { "data-theme": "dark" } : {},
+			className: e(p ? e(m.brand, "rounded-2xl px-6 py-12 md:px-14 md:py-16") : "rounded-xl border border-border bg-surface p-6 md:p-8", "mx-auto grid max-w-[75rem] items-center gap-8 overflow-hidden md:grid-cols-[auto_1fr_auto]"),
+			children: [
+				s && /* @__PURE__ */ u(n, {
+					state: s,
+					size: p ? 88 : 64,
+					title: "",
+					className: e("hidden md:block", p ? "text-accent" : "text-primary")
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "grid gap-3",
+					children: [
+						a && /* @__PURE__ */ u("p", {
+							className: e("m-0 text-sm font-bold tracking-wide uppercase", p ? "text-accent" : "text-link"),
+							children: a
+						}),
+						/* @__PURE__ */ u("h2", {
+							className: e("m-0 font-display font-extrabold tracking-tight text-balance", p ? "text-3xl md:text-4xl" : "text-2xl md:text-3xl"),
+							children: t
+						}),
+						r && /* @__PURE__ */ u("p", {
+							className: "m-0 max-w-xl text-lg text-fg-muted",
+							children: r
+						})
+					]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ u("div", {
+						className: "flex flex-col gap-3 *:w-full sm:flex-row sm:*:w-auto md:flex-col",
+						children: i
+					}), o && /* @__PURE__ */ u("p", {
+						className: "m-0 text-center text-sm text-fg-muted",
+						children: o
+					})]
+				})
+			]
+		})
+	});
+}
+function T({ logo: t, tagline: n, columns: r, social: i, aside: a, legal: o, linkAs: s = "a", signOff: c, navLabel: l = "Footer", locale: p, localeTitle: m = "Language", tone: h = "default", className: g }) {
+	let _ = h === "brand";
+	return /* @__PURE__ */ d("footer", {
+		..._ ? { "data-theme": "dark" } : {},
+		className: e("pt-16 font-sans text-fg md:pt-24", _ ? "bg-primary-strong" : "bg-bg", g),
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: e(f, "grid gap-12 md:grid-cols-[minmax(0,1.3fr)_minmax(0,3fr)]"),
+				children: [/* @__PURE__ */ d("div", {
+					className: "grid content-start gap-4",
+					children: [
+						/* @__PURE__ */ u("div", {
+							className: e("text-3xl", _ ? "text-fg" : "text-logo"),
+							children: t
+						}),
+						n && /* @__PURE__ */ u("p", {
+							className: "m-0 max-w-xs text-fg-muted",
+							children: n
+						}),
+						i && /* @__PURE__ */ u("div", {
+							className: "flex gap-1",
+							children: i
+						})
+					]
+				}), /* @__PURE__ */ d("nav", {
+					"aria-label": l,
+					className: "grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4",
+					children: [r.map((t) => /* @__PURE__ */ d("div", {
+						className: "grid content-start gap-3",
+						children: [/* @__PURE__ */ u("h2", {
+							className: e("m-0 text-sm font-bold", _ && "text-accent"),
+							children: t.title
+						}), /* @__PURE__ */ u("ul", {
+							className: "m-0 grid list-none gap-2.5 p-0",
+							children: t.links.map((e) => /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(s, {
+								href: e.href,
+								...e.external ? {
+									target: "_blank",
+									rel: "noopener noreferrer"
+								} : {},
+								className: "rounded-xs text-sm text-fg-muted no-underline hover:text-fg hover:underline focus-visible:outline-3 focus-visible:outline-focus",
+								children: e.label
+							}) }, e.href))
+						})]
+					}, t.title)), p && /* @__PURE__ */ d("div", {
+						className: "grid content-start gap-3",
+						children: [/* @__PURE__ */ u("h2", {
+							className: e("m-0 text-sm font-bold", _ && "text-accent"),
+							children: m
+						}), /* @__PURE__ */ u("div", { children: p })]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e(f, "mt-14 flex flex-col gap-4 border-t border-border py-6 text-sm text-fg-muted sm:flex-row sm:items-center sm:justify-between"),
+				children: [/* @__PURE__ */ u("div", { children: o }), a]
+			}),
+			c && /* @__PURE__ */ u(E, { children: c })
+		]
+	});
+}
+function E({ children: t = "Made with code and coffee in Ecuador", className: n }) {
+	return /* @__PURE__ */ d("p", {
+		className: e("m-0 overflow-hidden px-4 pt-[120px] pb-6 text-center font-display text-[clamp(2.25rem,9vw,8.5rem)] leading-[0.95] font-extrabold tracking-tighter text-balance text-fg md:pt-[200px] md:pb-10", n),
+		children: [t, /* @__PURE__ */ u("span", {
+			className: "text-accent",
+			children: "."
+		})]
+	});
+}
+//#endregion
+export { w as CtaBand, y as DoorCards, C as Faq, g as PageHero, S as PricingTable, b as ProcessSteps, v as ProofBar, h as Section, E as SignOff, T as SiteFooter, x as Testimonial };
+
+//# sourceMappingURL=marketing.js.map