@godxjp/ui 28.7.0 → 28.8.0

package/docs/showcase/marketing-page.tsx

@@ -0,0 +1,885 @@
+/**
+ * Showcase · Marketing page — the composition doctrine's own deliverable (gh#833).
+ *
+ * `docs/COMPOSITION-VS-COMPONENT.md` §3 judges Hero, Navbar, Footer, PricingTable, testimonial,
+ * logo wall, feature grid and CTA band to be COMPOSITIONS: layout + content + token configuration
+ * over real components, expressible today. The doctrine's remedy for a composition is a `docs/`
+ * showcase, not a component. Until this page existed that was an assertion. This is the
+ * demonstration, and its claim is a MEASUREMENT, not a promise:
+ *
+ *                                      this page   acme-website   futurelastic-web
+ *   `<style>` blocks ................       0            1               1
+ *   page-local class SELECTORS ......       0           17              28
+ *   bespoke classes ON elements .....       0           16              25
+ *   non-`ui-*` classes on elements ..       0           38              45
+ *   raw px/rem/em/vw literals .......       0           29              40
+ *
+ * Counted with comments stripped (so a docblock quoting a class or a length is not counted):
+ * selectors are `/(^|[\s,>+~])\.([a-zA-Z_][\w-]*)\s*(?=[{,.:[]|\s)/m`, classes are every token
+ * inside a `className`, literals are `/(?<![\w.$}#-])(\d*\.?\d+)(px|rem|em|ch|pt|v\w+)\b/`. The two
+ * siblings also RE-THEME, which is half of what their stylesheets carry; this page uses the shipped
+ * theme, so everything it could not express is a framework gap rather than a brand decision.
+ * `public-landing.tsx` also measures 0/0 and is not a counter-example: it is a narrow
+ * `CenteredShell preset="public-landing"` page with no full-bleed band, no display type, no
+ * pricing and no logo wall, i.e. none of the shapes that produced the classes above.
+ *
+ * Every LENGTH here is a token reference: `var(--space-section-band)`, `var(--space-section-hero)`,
+ * `var(--page-measure-wide)`, `var(--band-height-3xl)`, `var(--space-6)`, `var(--space-2)`,
+ * `var(--overlay-z-index)`. The only class written anywhere below is `.ui-brand-glow`, which the
+ * package ships (`src/styles/layout.css`).
+ *
+ * ── WHAT IS STILL HAND-WRITTEN, AND WHY (the finding this page exists to produce) ───────────────
+ *
+ * Zero classes and zero literals did NOT mean zero CSS. Six things below are inline `style`
+ * objects because no PROP reaches them. Each one is a named gap, in the order a reader meets them:
+ *
+ *  1. THE SECTION BAND — `paddingBlock: var(--space-section-band | --space-section-hero)`.
+ *     gh#831 minted the tokens and nothing reads them. `Flex pad` / `ResponsiveGrid pad` take a
+ *     `GapProp`, whose numeric ladder stops at `12` (`--space-12`, 48px); `--space-20` (80px) and
+ *     `--space-24` (96px) are off the end of it, so the marketing rhythm is the one spacing a
+ *     layout primitive cannot state. It also has no compact step: `--space-section-hero` measures
+ *     96px at 1440 AND at 320, where the package's own landing preset drops its band through
+ *     `--centered-shell-landing-main-padding-block-compact`.
+ *  2. THE CENTRED COLUMN — `marginInline: auto` + `inlineSize: 100%` +
+ *     `maxInlineSize: var(--page-measure-wide)` + `paddingInline: var(--space-6)`, repeated at
+ *     every band. gh#831 minted `--page-measure-wide` and deliberately did not add
+ *     `PageContainer measure="wide"`, reasoning that a marketing page is full-bleed sections with
+ *     a centred inner column and `PageContainer` owns neither. The reasoning holds; its
+ *     consequence is that NOTHING owns the centred inner column.
+ *  3. THE STICKY BAR — `position: sticky` + `insetBlockStart` + `zIndex`. `Affix` does not exist
+ *     here (`docs/roadmap/website-components.md` §5.2 proposed `--affix-inset-block-start` and
+ *     `--affix-z-index`; neither shipped) and `Topbar` has no `sticky` prop.
+ *  4. THE GLASS — `--topbar-background-alpha` / `--topbar-backdrop-blur-size` as inline custom
+ *     properties. They are `initial` by design, so a call site MUST set them, and that part is
+ *     correct. The blur is the gap: this library has no blur SCALE (no `--blur-*` tier), so the
+ *     only sources for a length are a raw literal or another component's private knob
+ *     (`--app-launcher-launchpad-backdrop-blur-size`). It reads `--space-2` here, which keeps the
+ *     literal count at zero by borrowing a token that means something else. A `--blur-sm|md|lg`
+ *     foundation tier would close it properly. Measured result: `blur(8px)`.
+ *  5. THE HALO — `position: relative` / `overflow: hidden` on the band and `position: absolute` /
+ *     `inset: 0` on the `.ui-brand-glow` layer. This is the package's own idiom (both siblings
+ *     write `className="ui-brand-glow absolute inset-0"`), spelled as logical inline style so
+ *     `check:rtl` never has to grant an exception.
+ *  6. THE DISPLAY RAMP IS NOT RESPONSIVE, and this is the one that changed the page. gh#826 gave
+ *     `Heading size` / `Text size` the display steps, and `size` takes a single scalar: there is
+ *     no responsive object form, the way `Flex direction` and `ResponsiveGrid columns` both take
+ *     one. `--font-size-5xl` is `--font-size-display` = 54px at 1440 and 54px at 320. Measured
+ *     with a headline of ordinary marketing length (99 characters): 6 lines at 1280, 10 at 375,
+ *     12 at 320, i.e. a phone hero five screens tall. The headline in `en`/`ja`/`vi` was cut to
+ *     what 54px can carry (2 lines at 1280, 4 at 375) and the long-copy edge case moved to the
+ *     feature grid, where `features.auditTitle` runs several lines beside `features.ssoTitle` =
+ *     "SSO". NO page-local `clamp()` was written: both siblings wrote one, and writing a third is
+ *     how a framework gap becomes folklore. The package already knows the answer for exactly one
+ *     preset (`--centered-shell-landing-heading-size-compact`, read only by
+ *     `CenteredShell preset="public-landing"`); a composition cannot reach it.
+ *
+ * MegaMenu is deliberately ABSENT, and the absence is measured, not an oversight. A site nav and
+ * this sticky glass bar are mutually exclusive today. `docs/navigation/mega-menu.tsx` records that
+ * MegaMenu must not go in a `Topbar` slot: `topbar-center` is `display: none` below ~1280px, and
+ * `topbar-start` is `overflow: clip` with a nowrap row, which put 58 elements outside the viewport
+ * at 375px. Meanwhile `.ui-topbar` is the ONLY selector that reads the gh#831 glass knobs, and
+ * turning the blur on makes the bar a backdrop root, i.e. the containing block for its own fixed
+ * descendants, which is exactly how MegaMenu positions its panel. So the bar carries plain anchors
+ * at desktop and the narrow answer is the `Sheet`, which is what the MegaMenu doc prescribes.
+ *
+ * ── REACHING THE EDGES, AND THE TWO THINGS IT BROKE ─────────────────────────────────────────────
+ *
+ * Tidy data is why a docs site's examples never break. On purpose here: a 71-character identifier
+ * with no break opportunity in it, in three places; CJK beside Latin in one sentence, one plan row
+ * and one quote; a feature card with NO description beside five that have one; a testimonial with
+ * NO rating beside two that have one; a plan with NO badge and NO figure beside one carrying three
+ * badges; a footer column with one link beside one with six; a brand lockup long enough to outgrow
+ * the bar. Two of those broke the page, and both fixes are documented at the call site:
+ *
+ *   • The id held the document open at 457px on every phone width. `Text whitespace="pre-wrap"`
+ *     gives `overflow-wrap: break-word`, which does NOT reduce a box's MIN-CONTENT size, and a
+ *     flex item keeps `min-width: auto` — so in the footer row it wrapped nothing. `Flex fill`
+ *     (`flex: 1 1 0` + `min-inline-size: 0`) is what makes the break fire.
+ *   • The lockup measured 222px against the 85px `topbar-start` had left at 375, and was clipped.
+ *     `Logo` has no `truncate`; the package's own answer, in `public-landing.tsx`, is to drop the
+ *     wordmark at phone width.
+ *
+ * Measured in Chromium after both, at 320 / 375 / 390 / 768 / 1024 / 1280 / 1440:
+ * `document.documentElement.scrollWidth` equals the viewport at every one, and zero unclipped
+ * elements cross the inline edge. The two boxes that do scroll are the `Marquee` viewport and the
+ * `Carousel` viewport, which is what both components are.
+ *
+ * Every string and every `aria-label` comes from `t()` (`src/i18n/messages/{en,ja,vi}.json`,
+ * namespace `marketingShowcase`), and the locale picker in the bar switches all three live. Money
+ * is `Intl.NumberFormat` with the ACTIVE locale and an ISO 4217 code that lives in data, never a
+ * symbol in the copy. The year is `Intl.DateTimeFormat`. Domains are RFC 2606 reserved
+ * (`*.example.jp`), the company is fictional, and every wordmark in the logo wall is invented.
+ */
+import { useMemo, useState, type CSSProperties } from "react";
+import {
+  ArrowRight,
+  CalendarClock,
+  CircleCheck,
+  FileSearch,
+  Globe2,
+  KeyRound,
+  Menu,
+  Route,
+  Webhook,
+} from "lucide-react";
+
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Card,
+  CardContent,
+  Carousel,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  FeatureList,
+  Marquee,
+  StatCard,
+} from "@godxjp/ui/data-display";
+import { Rating, Segmented } from "@godxjp/ui/data-entry";
+import {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@godxjp/ui/feedback";
+import { Button, Heading, Icon, Logo, Reveal, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, ResponsiveGrid, Separator, Topbar } from "@godxjp/ui/layout";
+import { AppSettingPicker } from "@godxjp/ui/navigation";
+
+/* ── The five inline-style constants named in the docblock. Every value is a token reference; no
+   number with a unit appears anywhere in this file. ─────────────────────────────────────────── */
+
+/** (2) The centred inner column. Nothing in the package owns this shape yet. */
+const SHELL: CSSProperties = {
+  marginInline: "auto",
+  inlineSize: "100%",
+  maxInlineSize: "var(--page-measure-wide)",
+  paddingInline: "var(--space-6)",
+};
+
+/** (1) The section rhythm gh#831 named and no prop reads. */
+const BAND: CSSProperties = { paddingBlock: "var(--space-section-band)" };
+const HERO_BAND: CSSProperties = { paddingBlock: "var(--space-section-hero)" };
+
+/** (5) The halo host and the halo layer. */
+const GLOW_HOST: CSSProperties = { position: "relative", overflow: "hidden" };
+const GLOW_LAYER: CSSProperties = { position: "absolute", inset: 0 };
+const ABOVE_GLOW: CSSProperties = { position: "relative" };
+
+/** (3) The sticky bar region. `Affix` does not exist; `Topbar` has no `sticky`. */
+const STICKY_HEADER: CSSProperties = {
+  position: "sticky",
+  insetBlockStart: 0,
+  zIndex: "var(--overlay-z-index)",
+};
+
+/** (4) gh#831's glass knobs plus the bar geometry its own docstring recommends. */
+const GLASS_BAR: CSSProperties = {
+  "--topbar-height": "var(--band-height-3xl)",
+  /* Full-bleed glass, content on the shell measure: the same `max(gutter, half the slack)` the
+     package writes for CenteredShell's landing preset, so no page-local media query. */
+  "--topbar-inset": "max(var(--space-6), calc((100% - var(--page-measure-wide)) / 2))",
+  "--topbar-background-alpha": "85%",
+  "--topbar-backdrop-blur-size": "var(--space-2)",
+} as CSSProperties;
+
+/** Per-instance halo shaping — the four `--brand-glow-*` knobs, at the call site. */
+const HERO_GLOW: CSSProperties = {
+  "--brand-glow-size": "55% 60%",
+  "--brand-glow-position": "82% -8%",
+  "--brand-glow-alpha": "0.20",
+} as CSSProperties;
+
+const CTA_GLOW: CSSProperties = {
+  "--brand-glow-size": "70% 90%",
+  "--brand-glow-position": "50% 110%",
+  "--brand-glow-alpha": "0.16",
+} as CSSProperties;
+
+/* ── Data. RFC 2606 reserved domains, a fictional company, invented customer wordmarks. ──────── */
+
+const SITE = "works.example.jp";
+
+/**
+ * 71 characters, and not one of them is a break opportunity: no hyphen, no underscore, no slash.
+ * It is in the hero panel AND in a feature card so the failure has two chances to show itself.
+ */
+const ENDPOINT_ID = "whsec0f3a8c1d2e4b5a697c8d0e1f2a3b4c5d6e7f8091a2b3c4d5e6f708192a3b4c5d6e";
+
+const NAV_KEYS = ["product", "solutions", "pricing", "docs"] as const;
+
+/** Invented wordmarks. CJK, Latin and Vietnamese diacritics in one row, plus a very long one. */
+const CUSTOMERS = [
+  { glyph: "A", name: "Aoba Foods" },
+  { glyph: "北", name: "北陸精密工業" },
+  { glyph: "M", name: "Meridian Health" },
+  { glyph: "T", name: "Trường An" },
+  { glyph: "K", name: "Kita Logistics and Warehousing" },
+  { glyph: "Ö", name: "Örebro Verkstad" },
+  { glyph: "海", name: "海運サービス" },
+];
+
+/** The currency lives in DATA, so nothing in the page hard-codes a symbol or an ISO 4217 code. */
+const CURRENCY = "JPY";
+
+type Plan = {
+  key: "starter" | "team" | "enterprise";
+  /** `null` = quoted: the empty slot beside two filled ones. */
+  monthly: number | null;
+  yearlyMonthly: number | null;
+  accent: boolean;
+  badges: Array<"popular" | "saving" | "fresh">;
+  features: Array<{ state: "included" | "limited" | "excluded"; key: string; limitKey?: string }>;
+};
+
+const PLANS: Plan[] = [
+  {
+    key: "starter",
+    monthly: 4800,
+    yearlyMonthly: 4000,
+    accent: false,
+    badges: [],
+    features: [
+      { state: "limited", key: "featChains", limitKey: "limitedChains" },
+      { state: "included", key: "featExport" },
+      { state: "excluded", key: "featDelegation" },
+      { state: "excluded", key: "featSso" },
+      { state: "excluded", key: "featResidency" },
+      { state: "limited", key: "featSupport", limitKey: "limitedSupport" },
+    ],
+  },
+  {
+    key: "team",
+    monthly: 9600,
+    yearlyMonthly: 8000,
+    accent: true,
+    badges: ["popular", "saving", "fresh"],
+    features: [
+      { state: "included", key: "featChains" },
+      { state: "included", key: "featExport" },
+      { state: "included", key: "featDelegation" },
+      { state: "included", key: "featSso" },
+      { state: "excluded", key: "featResidency" },
+      { state: "limited", key: "featSupport", limitKey: "limitedSupport" },
+    ],
+  },
+  {
+    key: "enterprise",
+    monthly: null,
+    yearlyMonthly: null,
+    accent: false,
+    badges: [],
+    features: [
+      { state: "included", key: "featChains" },
+      { state: "included", key: "featExport" },
+      { state: "included", key: "featDelegation" },
+      { state: "included", key: "featSso" },
+      { state: "included", key: "featResidency" },
+      { state: "included", key: "featSupport" },
+    ],
+  },
+];
+
+const FEATURES = [
+  { key: "routing", icon: Route, hasBody: true, long: false },
+  /* The long title with NO body: an empty slot beside five filled ones. */
+  { key: "audit", icon: FileSearch, hasBody: false, long: true },
+  { key: "evidence", icon: CircleCheck, hasBody: true, long: false },
+  { key: "webhook", icon: Webhook, hasBody: true, long: false },
+  { key: "residency", icon: Globe2, hasBody: true, long: false },
+  { key: "sso", icon: KeyRound, hasBody: true, long: false },
+];
+
+const QUOTES = [
+  { key: "1", rating: 5 },
+  /* Two words, and no rating: the second empty slot. */
+  { key: "2", rating: null },
+  { key: "3", rating: 4 },
+] as const;
+
+const FOOTER_COLUMNS = [
+  { key: "product", links: ["featuresLink", "pricingLink", "changelog", "status"] },
+  { key: "company", links: ["about", "careers"] },
+  {
+    key: "legal",
+    links: ["terms", "privacy", "security", "subprocessors", "accessibility", "status"],
+  },
+  /* One link beside six. */
+  { key: "contact", links: ["salesLine"] },
+];
+
+export default function MarketingPage() {
+  const { t, locale } = useTranslation();
+  const [cycle, setCycle] = useState("monthly");
+  const [navOpen, setNavOpen] = useState(false);
+
+  const money = useMemo(
+    () =>
+      new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: CURRENCY,
+        maximumFractionDigits: 0,
+      }),
+    [locale],
+  );
+  const count = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const year = useMemo(
+    () => new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date()),
+    [locale],
+  );
+
+  return (
+    <Flex as="div" direction="col" gap="none">
+      {/* ── NAVBAR ─────────────────────────────────────────────────────────────────────────── */}
+      <header style={STICKY_HEADER}>
+        <Topbar
+          style={GLASS_BAR}
+          start={
+            <Flex align="center" gap="lg">
+              {/* The lockup measures 222px, and at 375 the start slot has 85px after the end
+                  cluster takes its natural width — so `topbar-start` clipped it (measured: 93 in
+                  85). The bar's shrink contract says a long brand string should truncate rather
+                  than spill, and `Logo` has no `truncate`; the package's own answer, in
+                  `public-landing.tsx`, is to drop the wordmark at phone width. The mark alone
+                  identifies the product there, and the full name is the first thing in the Sheet. */}
+              <Flex hideBelow="sm" align="center" gap="none">
+                <Logo
+                  glyph="E"
+                  wordmark={t("marketingShowcase.brand.name")}
+                  productSuffix={t("marketingShowcase.brand.suffix")}
+                />
+              </Flex>
+              <Flex hideFrom="sm" align="center" gap="none">
+                <Logo glyph="E" label={t("marketingShowcase.brand.name")} />
+              </Flex>
+              <Flex
+                as="div"
+                hideBelow="lg"
+                align="center"
+                gap="xs"
+                role="navigation"
+                aria-label={t("marketingShowcase.nav.label")}
+              >
+                {NAV_KEYS.map((key, index) => (
+                  <Button key={key} variant="ghost" size="sm" asChild>
+                    <a href={`#${key}`} aria-current={index === 0 ? "page" : undefined}>
+                      {t(`marketingShowcase.nav.${key}`)}
+                    </a>
+                  </Button>
+                ))}
+              </Flex>
+            </Flex>
+          }
+          end={
+            <Flex align="center" gap="sm">
+              <AppSettingPicker kind="locale" />
+              <Flex hideBelow="sm" align="center" gap="sm">
+                <Button variant="ghost" size="sm" asChild>
+                  <a href="#start">{t("marketingShowcase.nav.signIn")}</a>
+                </Button>
+              </Flex>
+              <Button size="sm" asChild>
+                <a href="#start">{t("marketingShowcase.nav.getStarted")}</a>
+              </Button>
+              {/* The narrow answer the MegaMenu doc prescribes. Nothing in the bar is unreachable
+                  at 375px: every destination hidden above is inside this Sheet. */}
+              <Flex hideFrom="lg" align="center" gap="none">
+                <Sheet open={navOpen} onOpenChange={setNavOpen}>
+                  <SheetTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label={t("marketingShowcase.nav.open")}
+                    >
+                      <Icon as={Menu} size="sm" />
+                    </Button>
+                  </SheetTrigger>
+                  <SheetContent side="right">
+                    <SheetHeader>
+                      <SheetTitle>{t("marketingShowcase.nav.title")}</SheetTitle>
+                      <SheetDescription>{t("marketingShowcase.nav.description")}</SheetDescription>
+                    </SheetHeader>
+                    <SheetBody>
+                      <Flex
+                        direction="col"
+                        gap="xs"
+                        role="navigation"
+                        aria-label={t("marketingShowcase.nav.label")}
+                      >
+                        {NAV_KEYS.map((key) => (
+                          <SheetClose key={key} asChild>
+                            <Button variant="ghost" size="sm" align="start" fullWidth asChild>
+                              <a href={`#${key}`}>{t(`marketingShowcase.nav.${key}`)}</a>
+                            </Button>
+                          </SheetClose>
+                        ))}
+                        <Separator space="sm" />
+                        <SheetClose asChild>
+                          <Button variant="ghost" size="sm" align="start" fullWidth asChild>
+                            <a href="#start">{t("marketingShowcase.nav.signIn")}</a>
+                          </Button>
+                        </SheetClose>
+                      </Flex>
+                    </SheetBody>
+                  </SheetContent>
+                </Sheet>
+              </Flex>
+            </Flex>
+          }
+        />
+      </header>
+
+      <main>
+        {/* ── HERO ─────────────────────────────────────────────────────────────────────────── */}
+        <section id="product" style={GLOW_HOST}>
+          <div
+            aria-hidden="true"
+            className="ui-brand-glow"
+            style={{ ...GLOW_LAYER, ...HERO_GLOW }}
+          />
+          <div style={{ ...SHELL, ...HERO_BAND, ...ABOVE_GLOW }}>
+            <ResponsiveGrid columns={{ base: 1, lg: 2 }} gap="xl" align="start">
+              <Reveal>
+                <Flex direction="col" gap="lg">
+                  <Flex align="center" gap="sm" wrap>
+                    <Badge tone="primary" shape="pill">
+                      {t("marketingShowcase.hero.eyebrow")}
+                    </Badge>
+                  </Flex>
+                  {/* A real <h1> at the display tier — gh#826's `size` beside `level`, instead of
+                      the `.tx-display` class with a raw font-size both siblings used to carry. */}
+                  <Heading level={1} size="5xl" weight="bold">
+                    {t("marketingShowcase.hero.title")}
+                  </Heading>
+                  <Text size="xl" tone="muted">
+                    {t("marketingShowcase.hero.lead")}
+                  </Text>
+                  <Flex align="center" gap="sm" wrap>
+                    <Button size="lg" asChild>
+                      <a href="#start">
+                        {t("marketingShowcase.hero.primary")}
+                        <Icon as={ArrowRight} size="sm" tone="inherit" />
+                      </a>
+                    </Button>
+                    <Button size="lg" variant="outline" asChild>
+                      <a href="#start">
+                        <Icon as={CalendarClock} size="sm" tone="inherit" />
+                        {t("marketingShowcase.hero.secondary")}
+                      </a>
+                    </Button>
+                  </Flex>
+                  <Text size="xs" tone="muted">
+                    {t("marketingShowcase.hero.trust")}
+                  </Text>
+                </Flex>
+              </Reveal>
+
+              <Reveal delay={2}>
+                <Card variant="outline">
+                  <CardContent solo>
+                    <Flex direction="col" gap="md">
+                      <Flex direction="col" gap="none">
+                        <Heading level={2} size="md">
+                          {t("marketingShowcase.hero.panelTitle")}
+                        </Heading>
+                        <Text size="xs" tone="muted">
+                          {t("marketingShowcase.hero.panelNote")}
+                        </Text>
+                      </Flex>
+                      <ResponsiveGrid columns={{ base: 1, sm: 3 }} gap="sm">
+                        <StatCard
+                          label={t("marketingShowcase.hero.pending")}
+                          value={count.format(18)}
+                          accent="attention"
+                        />
+                        <StatCard
+                          label={t("marketingShowcase.hero.cleared")}
+                          value={count.format(146)}
+                          delta="+12"
+                        />
+                        <StatCard
+                          label={t("marketingShowcase.hero.median")}
+                          value={t("marketingShowcase.hero.medianValue")}
+                        />
+                      </ResponsiveGrid>
+                      <Separator space="xs" />
+                      <Flex direction="col" gap="xs">
+                        <Text size="xs" weight="medium" tone="muted">
+                          {t("marketingShowcase.hero.endpointLabel")}
+                        </Text>
+                        {/* 71 characters with nowhere to break. `whitespace="pre-wrap"` is the
+                            public prop for this (`overflow-wrap: break-word`) and it is enough
+                            HERE, because a column flex item has a definite inline size to break
+                            against. In the footer row it was not; see the note there. */}
+                        <Text as="code" chip size="2xs" whitespace="pre-wrap">
+                          {ENDPOINT_ID}
+                        </Text>
+                        <Text size="2xs" tone="muted">
+                          {t("marketingShowcase.hero.endpointNote")}
+                        </Text>
+                      </Flex>
+                    </Flex>
+                  </CardContent>
+                </Card>
+              </Reveal>
+            </ResponsiveGrid>
+          </div>
+        </section>
+
+        {/* ── LOGO WALL ────────────────────────────────────────────────────────────────────── */}
+        <section aria-labelledby="logos-title">
+          <div style={{ ...SHELL, ...BAND }}>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="xs">
+                <Heading level={2} size="lg" id="logos-title">
+                  {t("marketingShowcase.logos.title")}
+                </Heading>
+                <Text size="sm" tone="muted">
+                  {t("marketingShowcase.logos.caption")}
+                </Text>
+              </Flex>
+              {/* `defaultPlay={false}` is the recommended posture; the pause/play control is
+                  Marquee's own real Button, in the tab order, with a localized name. */}
+              <Marquee
+                defaultPlay={false}
+                speed="slow"
+                gap="xl"
+                fade
+                pauseOnHover
+                label={t("marketingShowcase.logos.marqueeLabel")}
+              >
+                {CUSTOMERS.map((customer) => (
+                  <Logo
+                    key={customer.name}
+                    glyph={customer.glyph}
+                    size="sm"
+                    wordmark={customer.name}
+                  />
+                ))}
+              </Marquee>
+            </Flex>
+          </div>
+        </section>
+
+        {/* ── FEATURE GRID ─────────────────────────────────────────────────────────────────── */}
+        <section id="solutions" aria-labelledby="features-title">
+          <Flex as="div" direction="col" gap="none" surface="muted">
+            <div style={{ ...SHELL, ...BAND }}>
+              <Flex direction="col" gap="xl">
+                <Flex direction="col" gap="xs">
+                  <Heading level={2} size="3xl" weight="bold" id="features-title">
+                    {t("marketingShowcase.features.title")}
+                  </Heading>
+                  <Text size="lg" tone="muted">
+                    {t("marketingShowcase.features.lead")}
+                  </Text>
+                </Flex>
+                <ResponsiveGrid columns={{ base: 1, sm: 2, lg: 3 }} gap="md" align="stretch">
+                  {FEATURES.map((feature) => (
+                    <Card key={feature.key} hoverable>
+                      <CardContent solo>
+                        <Flex direction="col" gap="sm">
+                          {/* The doctrine's "icon medallion": Avatar square + a Lucide glyph. */}
+                          <Avatar shape="square" appearance="tinted" size="md">
+                            <AvatarFallback>
+                              <Icon as={feature.icon} size="sm" tone="primary" />
+                            </AvatarFallback>
+                          </Avatar>
+                          <Heading level={3} size="md">
+                            {t(`marketingShowcase.features.${feature.key}Title`)}
+                          </Heading>
+                          {feature.hasBody ? (
+                            <Text size="sm" tone="muted">
+                              {t(`marketingShowcase.features.${feature.key}Body`)}
+                            </Text>
+                          ) : null}
+                          {feature.key === "webhook" ? (
+                            <Text as="code" chip size="2xs" whitespace="pre-wrap">
+                              {ENDPOINT_ID}
+                            </Text>
+                          ) : null}
+                        </Flex>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </ResponsiveGrid>
+              </Flex>
+            </div>
+          </Flex>
+        </section>
+
+        {/* ── TESTIMONIALS ─────────────────────────────────────────────────────────────────── */}
+        <section aria-labelledby="quotes-title">
+          <div style={{ ...SHELL, ...BAND }}>
+            <Flex direction="col" gap="lg">
+              <Heading level={2} size="3xl" weight="bold" id="quotes-title">
+                {t("marketingShowcase.testimonials.title")}
+              </Heading>
+              <Carousel opts={{ align: "start", loop: true }}>
+                <CarouselContent>
+                  {QUOTES.map((quote) => (
+                    <CarouselItem key={quote.key}>
+                      <Card variant="outline">
+                        <CardContent solo>
+                          <Flex direction="col" gap="md">
+                            {quote.rating === null ? null : (
+                              <Rating
+                                readOnly
+                                value={quote.rating}
+                                name={`quote-${quote.key}`}
+                                aria-label={t("marketingShowcase.testimonials.ratingLabel")}
+                              />
+                            )}
+                            <Text size="lg">
+                              {t(`marketingShowcase.testimonials.q${quote.key}`)}
+                            </Text>
+                            <Flex align="center" gap="sm">
+                              <Avatar size="sm">
+                                <AvatarFallback>
+                                  {t(`marketingShowcase.testimonials.a${quote.key}`).slice(0, 1)}
+                                </AvatarFallback>
+                              </Avatar>
+                              <Flex direction="col" gap="none">
+                                <Text size="sm" weight="medium">
+                                  {t(`marketingShowcase.testimonials.a${quote.key}`)}
+                                </Text>
+                                <Text size="xs" tone="muted">
+                                  {t(`marketingShowcase.testimonials.r${quote.key}`)}
+                                </Text>
+                              </Flex>
+                            </Flex>
+                          </Flex>
+                        </CardContent>
+                      </Card>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                {/* The three controls are DIRECT children of Carousel because the component
+                    places them itself: `.ui-carousel-previous` / `-next` are `position: absolute`
+                    against `.ui-carousel`, and `.ui-carousel-dots` carries its own block padding.
+                    Wrapping them in a Flex row produced an empty flex item and moved nothing.
+                    Their accessible names are the component's own (`dataDisplay.carousel.*`). */}
+                <CarouselPrevious />
+                <CarouselNext />
+                <CarouselDots />
+              </Carousel>
+            </Flex>
+          </div>
+        </section>
+
+        {/* ── PRICING ──────────────────────────────────────────────────────────────────────── */}
+        <section id="pricing" aria-labelledby="pricing-title">
+          <Flex as="div" direction="col" gap="none" surface="muted">
+            <div style={{ ...SHELL, ...BAND }}>
+              <Flex direction="col" gap="xl">
+                <Flex direction="col" gap="md">
+                  <Heading level={2} size="3xl" weight="bold" id="pricing-title">
+                    {t("marketingShowcase.pricing.title")}
+                  </Heading>
+                  <Text size="lg" tone="muted">
+                    {t("marketingShowcase.pricing.lead")}
+                  </Text>
+                  {/* FeatureList + Card accent + Segmented. The plan said pricing needs nothing
+                      new, and it needed nothing new. */}
+                  <Segmented
+                    value={cycle}
+                    onValueChange={setCycle}
+                    aria-label={t("marketingShowcase.pricing.cycleLabel")}
+                    options={[
+                      { value: "monthly", label: t("marketingShowcase.pricing.monthly") },
+                      {
+                        value: "yearly",
+                        label: t("marketingShowcase.pricing.yearly"),
+                        count: 2,
+                        countLabel: t("marketingShowcase.pricing.saving"),
+                      },
+                    ]}
+                  />
+                </Flex>
+                <ResponsiveGrid columns={{ base: 1, md: 3 }} gap="md" align="stretch">
+                  {PLANS.map((plan) => {
+                    const amount = cycle === "yearly" ? plan.yearlyMonthly : plan.monthly;
+                    return (
+                      <Card
+                        key={plan.key}
+                        accent={plan.accent ? "primary" : undefined}
+                        accentPlacement={plan.accent ? "perimeter" : undefined}
+                      >
+                        <CardContent solo>
+                          <Flex direction="col" gap="md">
+                            <Flex align="center" gap="xs" wrap>
+                              <Heading level={3} size="lg">
+                                {t(`marketingShowcase.pricing.${plan.key}Name`)}
+                              </Heading>
+                              {plan.badges.map((badge) => (
+                                <Badge
+                                  key={badge}
+                                  as="span"
+                                  shape="pill"
+                                  tone={badge === "popular" ? "primary" : "muted"}
+                                  variant={badge === "fresh" ? "outline" : "default"}
+                                >
+                                  {t(`marketingShowcase.pricing.${badge}`)}
+                                </Badge>
+                              ))}
+                            </Flex>
+                            <Flex direction="col" gap="none">
+                              {/* The quoted plan has NO figure: an empty slot beside two full
+                                  ones, in the row where a missing number usually collapses. */}
+                              <Text size="4xl" weight="bold" tabular>
+                                {amount === null
+                                  ? t("marketingShowcase.pricing.quoted")
+                                  : money.format(amount)}
+                              </Text>
+                              <Text size="xs" tone="muted">
+                                {amount === null
+                                  ? t("marketingShowcase.pricing.quotedNote")
+                                  : cycle === "yearly"
+                                    ? t("marketingShowcase.pricing.billedYearly")
+                                    : t("marketingShowcase.pricing.perMonth")}
+                              </Text>
+                            </Flex>
+                            <Text size="sm" tone="muted">
+                              {t(`marketingShowcase.pricing.${plan.key}Note`)}
+                            </Text>
+                            <FeatureList
+                              items={plan.features.map((feature) => ({
+                                state: feature.state,
+                                label: t(`marketingShowcase.pricing.${feature.key}`),
+                                description: feature.limitKey
+                                  ? t(`marketingShowcase.pricing.${feature.limitKey}`)
+                                  : undefined,
+                              }))}
+                            />
+                            <Button fullWidth variant={plan.accent ? "default" : "outline"} asChild>
+                              <a href="#start">
+                                {amount === null
+                                  ? t("marketingShowcase.pricing.ctaQuote")
+                                  : t("marketingShowcase.pricing.cta")}
+                              </a>
+                            </Button>
+                          </Flex>
+                        </CardContent>
+                      </Card>
+                    );
+                  })}
+                </ResponsiveGrid>
+              </Flex>
+            </div>
+          </Flex>
+        </section>
+
+        {/* ── CTA BAND ─────────────────────────────────────────────────────────────────────── */}
+        <section id="start" style={GLOW_HOST} aria-labelledby="cta-title">
+          <div
+            aria-hidden="true"
+            className="ui-brand-glow"
+            style={{ ...GLOW_LAYER, ...CTA_GLOW }}
+          />
+          <div style={{ ...SHELL, ...BAND, ...ABOVE_GLOW }}>
+            <Reveal on="view">
+              <Flex direction="col" gap="md" align="center">
+                <Heading level={2} size="4xl" weight="bold" align="center" id="cta-title">
+                  {t("marketingShowcase.cta.title")}
+                </Heading>
+                <Text size="lg" tone="muted" align="center">
+                  {t("marketingShowcase.cta.lead")}
+                </Text>
+                <Flex align="center" gap="sm" wrap justify="center">
+                  <Button size="lg" asChild>
+                    <a href={`https://${SITE}`}>
+                      {t("marketingShowcase.cta.primary")}
+                      <Icon as={ArrowRight} size="sm" tone="inherit" />
+                    </a>
+                  </Button>
+                  <Button size="lg" variant="outline" asChild>
+                    <a href={`https://${SITE}`}>{t("marketingShowcase.cta.secondary")}</a>
+                  </Button>
+                </Flex>
+                <Text size="xs" tone="muted" align="center">
+                  {t("marketingShowcase.cta.note")}
+                </Text>
+              </Flex>
+            </Reveal>
+          </div>
+        </section>
+      </main>
+
+      {/* ── FOOTER ───────────────────────────────────────────────────────────────────────── */}
+      <footer>
+        <Flex as="div" direction="col" gap="none" surface="muted">
+          <div style={{ ...SHELL, ...BAND }}>
+            <Flex direction="col" gap="lg">
+              {/* ResponsiveGrid.Item span — the asymmetric footer both siblings hand-wrote a
+                  `grid-template-columns: 1.4fr 1fr 1fr 1fr` for. It has shipped the whole time. */}
+              <ResponsiveGrid columns={12} gap="lg">
+                <ResponsiveGrid.Item span={{ base: 12, sm: 12, md: 4, lg: 4 }}>
+                  <Flex direction="col" gap="sm">
+                    <Logo
+                      glyph="E"
+                      wordmark={t("marketingShowcase.brand.name")}
+                      productSuffix={t("marketingShowcase.brand.suffix")}
+                    />
+                    <Text size="sm" tone="muted">
+                      {t("marketingShowcase.footer.addressLabel")} ·{" "}
+                      {t("marketingShowcase.footer.address")}
+                    </Text>
+                    <Text size="sm" tone="muted">
+                      {t("marketingShowcase.footer.salesLine")} · sales@{SITE}
+                    </Text>
+                  </Flex>
+                </ResponsiveGrid.Item>
+                {FOOTER_COLUMNS.map((column) => (
+                  <ResponsiveGrid.Item key={column.key} span={{ base: 12, sm: 6, md: 2, lg: 2 }}>
+                    <Flex
+                      direction="col"
+                      gap="xs"
+                      align="start"
+                      role="navigation"
+                      aria-label={t(`marketingShowcase.footer.${column.key}`)}
+                    >
+                      <Text size="xs" weight="medium" tone="muted">
+                        {t(`marketingShowcase.footer.${column.key}`)}
+                      </Text>
+                      {column.links.map((link) => (
+                        <Button key={link} variant="link" size="sm" asChild>
+                          <a href={`https://${SITE}`}>{t(`marketingShowcase.footer.${link}`)}</a>
+                        </Button>
+                      ))}
+                    </Flex>
+                  </ResponsiveGrid.Item>
+                ))}
+              </ResponsiveGrid>
+              <Separator space="sm" />
+              <Flex align="center" justify="between" gap="sm" wrap>
+                <Text size="xs" tone="muted">
+                  {year} · {t("marketingShowcase.footer.rights")}
+                </Text>
+                {/* The hostile case, and the one that actually broke: `whitespace="pre-wrap"`
+                    gives `overflow-wrap: break-word`, which does NOT reduce a box's MIN-CONTENT
+                    size, and a flex item keeps `min-width: auto`. So in this row the 71-character
+                    id held the whole line open and the DOCUMENT scrolled: 457px at 390, 375 and
+                    320 alike. `Flex fill` is the documented answer (`flex: 1 1 0` +
+                    `min-inline-size: 0`, layout.css:167) and it is what makes the break fire. */}
+                <Flex fill direction="col" gap="none">
+                  <Text size="2xs" tone="muted" whitespace="pre-wrap" align="end">
+                    {ENDPOINT_ID}
+                  </Text>
+                </Flex>
+              </Flex>
+            </Flex>
+          </div>
+        </Flex>
+      </footer>
+    </Flex>
+  );
+}