@tuturuuu/ui 0.29.2 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.30.0](https://github.com/tutur3u/platform/compare/ui-v0.29.2...ui-v0.30.0) (2026-08-26)
+
+
+### Features
+
+* **command:** build task-first command center ([cb29d33](https://github.com/tutur3u/platform/commit/cb29d33953745b1a61f09d8c8390459f983d30d7))
+* **command:** build task-first command center ([#5144](https://github.com/tutur3u/platform/issues/5144)) ([292c739](https://github.com/tutur3u/platform/commit/292c7398e2abc3097c2b4ab85522370c302fb030))
+* **forms:** add landing page and per-form SEO controls ([99c5fda](https://github.com/tutur3u/platform/commit/99c5fda3a7d15649a3571b9ccc72759cd815a7ec))
+* **forms:** add landing page, per-form SEO, realtime collaboration, and embeds ([#5145](https://github.com/tutur3u/platform/issues/5145)) ([6896515](https://github.com/tutur3u/platform/commit/6896515b099b28bbebc873f98733879bf108ef89))
+
 ## [0.29.2](https://github.com/tutur3u/platform/compare/ui-v0.29.1...ui-v0.29.2) (2026-08-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.29.2",
+  "version": "0.30.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -91,9 +91,9 @@
     "@tuturuuu/apis": "0.11.3",
     "@tuturuuu/hooks": "0.1.1",
     "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.32.0",
+    "@tuturuuu/internal-api": "0.33.0",
     "@tuturuuu/supabase": "0.5.1",
-    "@tuturuuu/utils": "0.25.5",
+    "@tuturuuu/utils": "0.26.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -154,7 +154,7 @@
     "@tanstack/react-table": "^9.1.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.27.0",
+    "@tuturuuu/types": "0.28.0",
     "@tuturuuu/typescript-config": "0.1.2",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",
@@ -180,6 +180,7 @@
   },
   "exports": {
     "./globals.css": "./src/globals.css",
+    "./marketing": "./src/components/ui/marketing/index.ts",
     "./postcss.config": "./postcss.config.mjs",
     "./badge": {
       "types": "./src/components/ui/badge.tsx",

package/src/components/ui/command.tsx

@@ -34,12 +34,14 @@ function CommandDialog({
   children,
   showCloseButton = true,
   contentClassName,
+  commandProps,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
   showCloseButton?: boolean;
   contentClassName?: string;
+  commandProps?: React.ComponentProps<typeof CommandPrimitive>;
 }) {
   return (
     <Dialog {...props}>
@@ -51,7 +53,13 @@ function CommandDialog({
         className={cn('overflow-hidden p-0', contentClassName)}
         showCloseButton={showCloseButton}
       >
-        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command
+          {...commandProps}
+          className={cn(
+            '**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5',
+            commandProps?.className
+          )}
+        >
           {/* TODO: Fix Bun types issue with children prop */}
           {children as any}
         </Command>

package/src/components/ui/marketing/accents.ts

@@ -0,0 +1,139 @@
+/**
+ * Accent tokens for the satellite marketing kit.
+ *
+ * Tailwind cannot resolve a class name assembled at runtime, so every accent
+ * variant has to exist as a literal string somewhere in the source. Keeping the
+ * full set in one map means a new accent is added once and every marketing
+ * primitive picks it up, instead of each component carrying its own partial
+ * copy of the same lookup table.
+ */
+
+export type MarketingAccent =
+  | 'blue'
+  | 'cyan'
+  | 'green'
+  | 'indigo'
+  | 'orange'
+  | 'pink'
+  | 'purple'
+  | 'red'
+  | 'yellow';
+
+export interface MarketingAccentTokens {
+  /** Foreground colour for icons and eyebrow labels. */
+  text: string;
+  /** Mid-stop for a hairline rule that fades out at both ends. */
+  rule: string;
+  /** Soft corner glow behind a hovered surface. */
+  bloom: string;
+  /** Filled chip / dot background. */
+  solid: string;
+  /** Tinted surface for badges and inline highlights. */
+  soft: string;
+  /** Border tint that pairs with `soft`. */
+  border: string;
+  /** Two-stop gradient for primary calls to action. */
+  gradient: string;
+  /** Radial bloom colour used by `SectionBloom`, referencing the raw token. */
+  radial: string;
+}
+
+export const MARKETING_ACCENTS: Record<MarketingAccent, MarketingAccentTokens> =
+  {
+    blue: {
+      text: 'text-dynamic-blue',
+      rule: 'via-dynamic-blue/45',
+      bloom: 'bg-dynamic-blue/20',
+      solid: 'bg-dynamic-blue',
+      soft: 'bg-dynamic-blue/10',
+      border: 'border-dynamic-blue/25',
+      gradient: 'from-dynamic-blue to-dynamic-cyan',
+      radial: 'bg-[radial-gradient(closest-side,var(--blue),transparent)]',
+    },
+    cyan: {
+      text: 'text-dynamic-cyan',
+      rule: 'via-dynamic-cyan/45',
+      bloom: 'bg-dynamic-cyan/20',
+      solid: 'bg-dynamic-cyan',
+      soft: 'bg-dynamic-cyan/10',
+      border: 'border-dynamic-cyan/25',
+      gradient: 'from-dynamic-cyan to-dynamic-blue',
+      radial: 'bg-[radial-gradient(closest-side,var(--cyan),transparent)]',
+    },
+    green: {
+      text: 'text-dynamic-green',
+      rule: 'via-dynamic-green/45',
+      bloom: 'bg-dynamic-green/20',
+      solid: 'bg-dynamic-green',
+      soft: 'bg-dynamic-green/10',
+      border: 'border-dynamic-green/25',
+      gradient: 'from-dynamic-green to-dynamic-cyan',
+      radial: 'bg-[radial-gradient(closest-side,var(--green),transparent)]',
+    },
+    indigo: {
+      text: 'text-dynamic-indigo',
+      rule: 'via-dynamic-indigo/45',
+      bloom: 'bg-dynamic-indigo/20',
+      solid: 'bg-dynamic-indigo',
+      soft: 'bg-dynamic-indigo/10',
+      border: 'border-dynamic-indigo/25',
+      gradient: 'from-dynamic-indigo to-dynamic-purple',
+      radial: 'bg-[radial-gradient(closest-side,var(--indigo),transparent)]',
+    },
+    orange: {
+      text: 'text-dynamic-orange',
+      rule: 'via-dynamic-orange/45',
+      bloom: 'bg-dynamic-orange/20',
+      solid: 'bg-dynamic-orange',
+      soft: 'bg-dynamic-orange/10',
+      border: 'border-dynamic-orange/25',
+      gradient: 'from-dynamic-orange to-dynamic-pink',
+      radial: 'bg-[radial-gradient(closest-side,var(--orange),transparent)]',
+    },
+    pink: {
+      text: 'text-dynamic-pink',
+      rule: 'via-dynamic-pink/45',
+      bloom: 'bg-dynamic-pink/20',
+      solid: 'bg-dynamic-pink',
+      soft: 'bg-dynamic-pink/10',
+      border: 'border-dynamic-pink/25',
+      gradient: 'from-dynamic-pink to-dynamic-purple',
+      radial: 'bg-[radial-gradient(closest-side,var(--pink),transparent)]',
+    },
+    purple: {
+      text: 'text-dynamic-purple',
+      rule: 'via-dynamic-purple/45',
+      bloom: 'bg-dynamic-purple/20',
+      solid: 'bg-dynamic-purple',
+      soft: 'bg-dynamic-purple/10',
+      border: 'border-dynamic-purple/25',
+      gradient: 'from-dynamic-purple to-dynamic-blue',
+      radial: 'bg-[radial-gradient(closest-side,var(--purple),transparent)]',
+    },
+    red: {
+      text: 'text-dynamic-red',
+      rule: 'via-dynamic-red/45',
+      bloom: 'bg-dynamic-red/20',
+      solid: 'bg-dynamic-red',
+      soft: 'bg-dynamic-red/10',
+      border: 'border-dynamic-red/25',
+      gradient: 'from-dynamic-red to-dynamic-orange',
+      radial: 'bg-[radial-gradient(closest-side,var(--red),transparent)]',
+    },
+    yellow: {
+      text: 'text-dynamic-yellow',
+      rule: 'via-dynamic-yellow/45',
+      bloom: 'bg-dynamic-yellow/20',
+      solid: 'bg-dynamic-yellow',
+      soft: 'bg-dynamic-yellow/10',
+      border: 'border-dynamic-yellow/25',
+      gradient: 'from-dynamic-yellow to-dynamic-orange',
+      radial: 'bg-[radial-gradient(closest-side,var(--yellow),transparent)]',
+    },
+  };
+
+export function getMarketingAccent(
+  accent: MarketingAccent
+): MarketingAccentTokens {
+  return MARKETING_ACCENTS[accent];
+}

package/src/components/ui/marketing/atmosphere.tsx

@@ -0,0 +1,155 @@
+import { cn } from '@tuturuuu/utils/format';
+import { getMarketingAccent, type MarketingAccent } from './accents';
+
+/**
+ * Grain overlay.
+ *
+ * A single inlined SVG turbulence tile — no network request, no image asset.
+ * Keeps large flat areas from banding and gives surfaces a filmic tooth.
+ */
+export function Grain({ className }: { className?: string }) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-0 opacity-[0.035] mix-blend-overlay dark:opacity-[0.055]',
+        className
+      )}
+      style={{
+        backgroundImage:
+          "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
+      }}
+    />
+  );
+}
+
+/**
+ * Fine engineering grid, masked to fade at the edges so it reads as a substrate
+ * rather than graph paper.
+ */
+export function GridSubstrate({
+  className,
+  size = '64px',
+}: {
+  className?: string;
+  size?: string;
+}) {
+  const mask =
+    'radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 75%)';
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-0 opacity-[0.5] dark:opacity-[0.35]',
+        className
+      )}
+      style={{
+        backgroundImage:
+          'linear-gradient(to right, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 1px)',
+        backgroundSize: `${size} ${size}`,
+        maskImage: mask,
+        WebkitMaskImage: mask,
+      }}
+    />
+  );
+}
+
+interface HeroAtmosphereProps {
+  /** Bloom behind the headline. */
+  primary?: MarketingAccent;
+  /** Cool counterweight in the upper right. */
+  secondary?: MarketingAccent;
+  /** Accent under the product frame. */
+  tertiary?: MarketingAccent;
+  /** Fades the rig into the page background at the bottom edge. */
+  settle?: boolean;
+  className?: string;
+}
+
+/**
+ * The hero light rig: three placed blooms rather than a full-bleed animated
+ * wash, which smears muddy brown across the viewport in dark mode. Each bloom
+ * drifts slowly and independently; all motion stops under
+ * `prefers-reduced-motion`.
+ */
+export function HeroAtmosphere({
+  primary = 'purple',
+  secondary = 'blue',
+  tertiary = 'cyan',
+  settle = true,
+  className,
+}: HeroAtmosphereProps = {}) {
+  const bloom = (accent: MarketingAccent, strength: number) =>
+    `radial-gradient(closest-side,color-mix(in oklab,var(--${accent}) ${strength}%,transparent),transparent)`;
+
+  return (
+    <div
+      aria-hidden
+      className={cn('pointer-events-none absolute inset-0 -z-10', className)}
+    >
+      {/* Primary bloom — sits behind the headline */}
+      <div
+        className="absolute -top-32 left-1/2 h-[30rem] w-[34rem] -translate-x-1/2 rounded-full opacity-45 blur-2xl motion-reduce:animate-none sm:-top-40 sm:h-[42rem] sm:w-[52rem] sm:animate-bloom-drift sm:opacity-50 sm:blur-3xl dark:opacity-55 dark:sm:opacity-60"
+        style={{ backgroundImage: bloom(primary, 34) }}
+      />
+
+      {/* Cool counterweight — upper right */}
+      <div
+        className="absolute -top-20 right-[8%] hidden h-[30rem] w-[34rem] animate-bloom-drift-slow rounded-full opacity-45 blur-3xl motion-reduce:animate-none sm:block dark:opacity-55"
+        style={{ backgroundImage: bloom(secondary, 34) }}
+      />
+
+      {/* Warm-cool accent — under the product frame */}
+      <div
+        className="absolute top-[38%] left-[6%] hidden h-[26rem] w-[30rem] animate-bloom-drift rounded-full opacity-40 blur-3xl [animation-delay:-8s] motion-reduce:animate-none sm:block dark:opacity-50"
+        style={{ backgroundImage: bloom(tertiary, 28) }}
+      />
+
+      {/* Light seam across the top — the horizon of the rig */}
+      <div
+        className="absolute inset-x-0 top-0 h-px motion-reduce:animate-none sm:animate-sheen"
+        style={{
+          backgroundImage: `linear-gradient(90deg,transparent,color-mix(in oklab,var(--${primary}) 55%,transparent) 35%,color-mix(in oklab,var(--${tertiary}) 55%,transparent) 65%,transparent)`,
+        }}
+      />
+
+      <GridSubstrate />
+
+      {settle ? (
+        <div className="absolute inset-x-0 bottom-0 h-64 bg-gradient-to-b from-transparent to-background" />
+      ) : null}
+
+      <Grain />
+    </div>
+  );
+}
+
+/**
+ * Quieter bloom for sections below the fold — keeps colour continuity down the
+ * page without competing with the hero.
+ */
+export function SectionBloom({
+  tone = 'purple',
+  align = 'center',
+}: {
+  tone?: MarketingAccent;
+  align?: 'center' | 'left' | 'right';
+}) {
+  const positions = {
+    center: 'left-1/2 -translate-x-1/2',
+    left: 'left-[-10%]',
+    right: 'right-[-10%]',
+  } as const;
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute top-0 -z-10 h-[28rem] w-[40rem] rounded-full opacity-[0.07] blur-3xl dark:opacity-[0.12]',
+        getMarketingAccent(tone).radial,
+        positions[align]
+      )}
+    />
+  );
+}

package/src/components/ui/marketing/cta.tsx

@@ -0,0 +1,150 @@
+import { cn } from '@tuturuuu/utils/format';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import { getMarketingAccent, type MarketingAccent } from './accents';
+
+type AnchorProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'className' | 'href'
+>;
+
+interface CtaLinkProps extends AnchorProps {
+  href: string;
+  children: ReactNode;
+  /** Opens in a new tab with the matching `rel` hardening. */
+  external?: boolean;
+  /** Stretches to the container on small screens; `auto` never does. */
+  width?: 'responsive' | 'auto';
+  size?: 'md' | 'lg';
+  className?: string;
+}
+
+const sizes = {
+  md: 'h-11 px-6 text-sm',
+  lg: 'h-12 px-8',
+} as const;
+
+function externalProps(external?: boolean) {
+  return external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+}
+
+/**
+ * Filled gradient call to action with a sheen that sweeps on hover.
+ *
+ * The sweep is a translated pseudo-layer rather than an animated
+ * `background-position`, so it composites on the GPU and does not repaint the
+ * button's text on every frame.
+ */
+export function PrimaryCta({
+  href,
+  children,
+  accent = 'purple',
+  external,
+  width = 'responsive',
+  size = 'lg',
+  className,
+  ...props
+}: CtaLinkProps & { accent?: MarketingAccent }) {
+  return (
+    <a
+      className={cn(
+        'group relative inline-flex items-center justify-center overflow-hidden rounded-full bg-gradient-to-r font-medium text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        width === 'responsive' && 'w-full sm:w-auto',
+        sizes[size],
+        getMarketingAccent(accent).gradient,
+        className
+      )}
+      href={href}
+      {...externalProps(external)}
+      {...props}
+    >
+      <span
+        aria-hidden
+        className="absolute inset-0 -translate-x-full bg-[linear-gradient(90deg,transparent,rgb(255_255_255/0.3),transparent)] transition-transform duration-700 group-hover:translate-x-full motion-reduce:hidden"
+      />
+      <span className="relative flex items-center gap-2">{children}</span>
+    </a>
+  );
+}
+
+/** Quiet, glassy counterpart to `PrimaryCta`. */
+export function SecondaryCta({
+  href,
+  children,
+  external,
+  width = 'responsive',
+  size = 'lg',
+  className,
+  ...props
+}: CtaLinkProps) {
+  return (
+    <a
+      className={cn(
+        'inline-flex items-center justify-center gap-2 rounded-full border border-foreground/12 bg-background/40 font-medium text-foreground/75 backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-foreground/25 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        width === 'responsive' && 'w-full sm:w-auto',
+        sizes[size],
+        className
+      )}
+      href={href}
+      {...externalProps(external)}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+/** Rounded pill label used above hero headlines and inside product frames. */
+export function MarketingPill({
+  accent = 'purple',
+  icon: Icon,
+  children,
+  className,
+}: {
+  accent?: MarketingAccent;
+  icon?: React.ComponentType<{ className?: string }>;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-2 rounded-full border border-foreground/10 bg-background/40 py-1.5 pr-4 pl-2.5 font-mono-ui text-[0.65rem] uppercase tracking-[0.2em] backdrop-blur-md',
+        getMarketingAccent(accent).text,
+        className
+      )}
+    >
+      {Icon ? <Icon className="h-3.5 w-3.5" /> : null}
+      {children}
+    </span>
+  );
+}
+
+/**
+ * The marketing nav's filled action button.
+ *
+ * Lives here rather than in `marketing-nav.tsx` so it stays a server component:
+ * the nav itself is `'use client'` (it tracks scroll), but the action is often
+ * rendered inside a `<Suspense>` boundary on the server and passed in as a
+ * slot.
+ */
+export function MarketingNavAction({
+  accent = 'purple',
+  href,
+  label,
+}: {
+  accent?: MarketingAccent;
+  href: string;
+  label: string;
+}) {
+  return (
+    <a
+      className={cn(
+        'inline-flex h-9 items-center justify-center whitespace-nowrap rounded-full bg-gradient-to-r px-4 font-medium text-sm text-white shadow-sm transition-transform duration-300 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        getMarketingAccent(accent).gradient
+      )}
+      href={href}
+    >
+      {label}
+    </a>
+  );
+}

package/src/components/ui/marketing/faq-list.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../accordion';
+
+export interface MarketingFaqItem {
+  /** Stable value for the accordion item; also the React key. */
+  id: string;
+  question: ReactNode;
+  answer: ReactNode;
+}
+
+/**
+ * Marketing FAQ.
+ *
+ * A single-open accordion rather than a static definition list: an FAQ block
+ * long enough to be useful is long enough to bury the closing CTA if every
+ * answer is expanded at once.
+ */
+export function MarketingFaqList({
+  items,
+  className,
+}: {
+  items: MarketingFaqItem[];
+  className?: string;
+}) {
+  return (
+    <Accordion
+      className={cn('mx-auto w-full max-w-3xl', className)}
+      collapsible
+      type="single"
+    >
+      {items.map((item) => (
+        <AccordionItem
+          className="border-foreground/[0.08] border-b"
+          key={item.id}
+          value={item.id}
+        >
+          <AccordionTrigger className="py-5 text-left font-display font-medium text-base tracking-[-0.01em] hover:no-underline sm:text-lg">
+            {item.question}
+          </AccordionTrigger>
+          <AccordionContent className="pb-5 text-foreground/55 text-sm leading-relaxed sm:text-base">
+            {item.answer}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}

package/src/components/ui/marketing/fonts.ts

@@ -0,0 +1,33 @@
+import { Be_Vietnam_Pro, JetBrains_Mono } from 'next/font/google';
+
+/**
+ * Display face for marketing headlines.
+ *
+ * Be Vietnam Pro is drawn for Vietnamese typography, so `vi` headlines keep
+ * their diacritics properly fitted instead of falling back mid-headline — and
+ * it carries far more character than the body face at large sizes.
+ */
+export const marketingDisplayFont = Be_Vietnam_Pro({
+  subsets: ['latin', 'vietnamese'],
+  weight: ['500', '600', '700', '800'],
+  display: 'swap',
+  variable: '--font-be-vietnam-pro',
+});
+
+/**
+ * Micro-label / numeric face: section eyebrows, indices, stat values. Also
+ * covers Vietnamese so translated eyebrows stay in the same voice.
+ */
+export const marketingMonoFont = JetBrains_Mono({
+  subsets: ['latin', 'vietnamese'],
+  weight: ['400', '500', '600'],
+  display: 'swap',
+  variable: '--font-jetbrains-mono',
+});
+
+/**
+ * Apply to the marketing layout's root element. `--font-display` and
+ * `--font-mono-ui` in `globals.css` resolve through these variables and fall
+ * back to the app font wherever the marketing faces are not loaded.
+ */
+export const marketingFontVariables = `${marketingDisplayFont.variable} ${marketingMonoFont.variable}`;

package/src/components/ui/marketing/index.ts

@@ -0,0 +1,37 @@
+export {
+  getMarketingAccent,
+  MARKETING_ACCENTS,
+  type MarketingAccent,
+  type MarketingAccentTokens,
+} from './accents';
+export {
+  Grain,
+  GridSubstrate,
+  HeroAtmosphere,
+  SectionBloom,
+} from './atmosphere';
+export {
+  MarketingNavAction,
+  MarketingPill,
+  PrimaryCta,
+  SecondaryCta,
+} from './cta';
+export { type MarketingFaqItem, MarketingFaqList } from './faq-list';
+export {
+  marketingDisplayFont,
+  marketingFontVariables,
+  marketingMonoFont,
+} from './fonts';
+export {
+  MarketingFooter,
+  type MarketingFooterColumn,
+  type MarketingFooterLink,
+} from './marketing-footer';
+export { MarketingNav, type MarketingNavLink } from './marketing-nav';
+export {
+  SectionEyebrow,
+  SectionShell,
+  type SectionWidth,
+} from './section-shell';
+export { type MarketingStat, MarketingStatBand } from './stat-band';
+export { SurfaceCard } from './surface-card';

package/src/components/ui/marketing/marketing-footer.tsx

@@ -0,0 +1,90 @@
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import { TuturuuLogo } from '../custom/tuturuuu-logo';
+
+export interface MarketingFooterLink {
+  href: string;
+  label: string;
+  external?: boolean;
+}
+
+export interface MarketingFooterColumn {
+  id: string;
+  title: string;
+  links: MarketingFooterLink[];
+}
+
+interface MarketingFooterProps {
+  appName: string;
+  /** One-line positioning statement under the wordmark. */
+  tagline: string;
+  columns: MarketingFooterColumn[];
+  /** Rendered at the bottom left, e.g. "© 2026 Tuturuuu". */
+  legal: ReactNode;
+  /** Locale switcher or social row, supplied by the host app. */
+  utilities?: ReactNode;
+  className?: string;
+}
+
+/** Shared satellite marketing footer: wordmark column plus link columns. */
+export function MarketingFooter({
+  appName,
+  tagline,
+  columns,
+  legal,
+  utilities,
+  className,
+}: MarketingFooterProps) {
+  return (
+    <footer
+      className={cn(
+        'relative border-foreground/[0.08] border-t px-4 py-16 sm:px-6 lg:px-8',
+        className
+      )}
+    >
+      <div className="mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-[1.5fr_repeat(3,1fr)]">
+        <div className="max-w-sm">
+          <div className="flex items-center gap-2.5">
+            <TuturuuLogo className="h-7 w-7" height={28} width={28} />
+            <span className="font-display font-semibold text-[0.95rem] tracking-[-0.01em]">
+              {appName}
+            </span>
+          </div>
+          <p className="mt-4 text-foreground/50 text-sm leading-relaxed">
+            {tagline}
+          </p>
+        </div>
+
+        {columns.map((column) => (
+          <nav aria-label={column.title} key={column.id}>
+            <h3 className="font-mono-ui text-[0.65rem] text-foreground/40 uppercase tracking-[0.2em]">
+              {column.title}
+            </h3>
+            <ul className="mt-4 space-y-2.5">
+              {column.links.map((link) => (
+                <li key={`${column.id}-${link.href}`}>
+                  <a
+                    className="text-foreground/55 text-sm transition-colors hover:text-foreground"
+                    href={link.href}
+                    {...(link.external
+                      ? { target: '_blank', rel: 'noopener noreferrer' }
+                      : {})}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ))}
+      </div>
+
+      <div className="mx-auto mt-14 flex w-full max-w-6xl flex-col items-center justify-between gap-4 border-foreground/[0.06] border-t pt-8 sm:flex-row">
+        <p className="text-foreground/40 text-xs">{legal}</p>
+        {utilities ? (
+          <div className="flex items-center gap-3">{utilities}</div>
+        ) : null}
+      </div>
+    </footer>
+  );
+}

package/src/components/ui/marketing/marketing-nav.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { Menu, X } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import { type ReactNode, useEffect, useState } from 'react';
+import { TuturuuLogo } from '../custom/tuturuuu-logo';
+
+export interface MarketingNavLink {
+  /** In-page anchor (`#pricing`) or absolute URL. */
+  href: string;
+  label: string;
+}
+
+interface MarketingNavProps {
+  /** App name shown next to the logo, e.g. "Forms". */
+  appName: string;
+  /** Where the wordmark links back to. Defaults to the landing root. */
+  homeHref?: string;
+  links: MarketingNavLink[];
+  /**
+   * Primary action button. Taken as a node rather than `{href,label}` so the
+   * host can wrap it in `<Suspense>` and let a session-dependent label stream
+   * in without making the whole marketing page dynamic. Render
+   * `MarketingNavAction` for the standard treatment.
+   */
+  action: ReactNode;
+  /** Secondary text action shown beside the primary on desktop. */
+  secondaryAction?: { href: string; label: string };
+  /** Locale/theme switchers supplied by the host app. */
+  utilities?: ReactNode;
+}
+
+/**
+ * Sticky marketing header.
+ *
+ * Starts transparent over the hero and only fades in its border and blur once
+ * the page scrolls, so the hero light rig is not cropped by a hard bar on load.
+ */
+export function MarketingNav({
+  appName,
+  homeHref = '/',
+  links,
+  action,
+  secondaryAction,
+  utilities,
+}: MarketingNavProps) {
+  const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 12);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  // A menu left open while the viewport grows to desktop would keep the page
+  // scroll-locked behind an invisible panel.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const media = window.matchMedia('(min-width: 768px)');
+    const close = () => media.matches && setMenuOpen(false);
+    close();
+    media.addEventListener('change', close);
+    return () => media.removeEventListener('change', close);
+  }, [menuOpen]);
+
+  return (
+    <header
+      className={cn(
+        'fixed inset-x-0 top-0 z-50 transition-all duration-300',
+        scrolled || menuOpen
+          ? 'border-foreground/[0.08] border-b bg-background/80 backdrop-blur-xl'
+          : 'border-transparent border-b bg-transparent'
+      )}
+    >
+      <nav
+        aria-label={appName}
+        className="mx-auto flex h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8"
+      >
+        <a
+          className="flex shrink-0 items-center gap-2.5 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          href={homeHref}
+        >
+          <TuturuuLogo className="h-7 w-7" height={28} width={28} />
+          <span className="font-display font-semibold text-[0.95rem] tracking-[-0.01em]">
+            {appName}
+          </span>
+        </a>
+
+        <div className="hidden items-center gap-1 md:flex">
+          {links.map((link) => (
+            <a
+              className="rounded-full px-3.5 py-2 text-foreground/55 text-sm transition-colors hover:bg-foreground/[0.04] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              href={link.href}
+              key={link.href}
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {utilities}
+          {secondaryAction ? (
+            <a
+              className="hidden rounded-full px-3.5 py-2 text-foreground/55 text-sm transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:inline-flex"
+              href={secondaryAction.href}
+            >
+              {secondaryAction.label}
+            </a>
+          ) : null}
+          {action}
+          <button
+            aria-expanded={menuOpen}
+            aria-label={appName}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-foreground/10 text-foreground/70 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+            onClick={() => setMenuOpen((open) => !open)}
+            type="button"
+          >
+            {menuOpen ? (
+              <X className="h-4 w-4" />
+            ) : (
+              <Menu className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </nav>
+
+      {menuOpen ? (
+        <div className="border-foreground/[0.06] border-t px-4 pb-4 md:hidden">
+          <div className="flex flex-col py-2">
+            {links.map((link) => (
+              <a
+                className="rounded-lg px-3 py-3 text-foreground/70 text-sm transition-colors hover:bg-foreground/[0.04] hover:text-foreground"
+                href={link.href}
+                key={link.href}
+                onClick={() => setMenuOpen(false)}
+              >
+                {link.label}
+              </a>
+            ))}
+            {secondaryAction ? (
+              <a
+                className="rounded-lg px-3 py-3 text-foreground/70 text-sm transition-colors hover:bg-foreground/[0.04] hover:text-foreground"
+                href={secondaryAction.href}
+                onClick={() => setMenuOpen(false)}
+              >
+                {secondaryAction.label}
+              </a>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </header>
+  );
+}

package/src/components/ui/marketing/section-shell.tsx

@@ -0,0 +1,148 @@
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import type { MarketingAccent } from './accents';
+import { SectionBloom } from './atmosphere';
+
+const widths = {
+  narrow: 'max-w-4xl',
+  default: 'max-w-6xl',
+  wide: 'max-w-7xl',
+  full: 'max-w-none',
+} as const;
+
+export type SectionWidth = keyof typeof widths;
+
+/**
+ * The mono eyebrow, optionally preceded by a two-digit section index sitting in
+ * its own hairline rule. Exported on its own because hero sections want the
+ * label without the surrounding section chrome.
+ */
+export function SectionEyebrow({
+  children,
+  index,
+  className,
+}: {
+  children: ReactNode;
+  index?: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-3 font-mono-ui text-[0.65rem] text-foreground/45 uppercase tracking-[0.24em]',
+        className
+      )}
+    >
+      {index ? (
+        <>
+          <span className="text-foreground/30 tabular-nums">{index}</span>
+          <span aria-hidden className="h-px w-8 bg-foreground/15" />
+        </>
+      ) : null}
+      {children}
+    </span>
+  );
+}
+
+interface SectionShellProps {
+  id?: string;
+  /** Two-digit index rendered in the rule beside the eyebrow, e.g. "02". */
+  index?: string;
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  children: ReactNode;
+  /** Constrains the inner content. Defaults to the 6xl marketing column. */
+  width?: SectionWidth;
+  align?: 'center' | 'start';
+  /** Ambient brand bloom behind the section header. */
+  bloom?: MarketingAccent | 'none';
+  /** Hairline rule across the top of the section. */
+  rule?: boolean;
+  /** Vertical rhythm. `tight` is for stacked sections that read as one unit. */
+  spacing?: 'tight' | 'default';
+  className?: string;
+  headerClassName?: string;
+}
+
+/**
+ * Shared vertical rhythm and header treatment for every marketing section.
+ *
+ * Keeps eyebrow/title/subtitle typography and section padding identical down
+ * the page so sections read as one system instead of N variations.
+ */
+export function SectionShell({
+  id,
+  index,
+  eyebrow,
+  title,
+  subtitle,
+  children,
+  width = 'default',
+  align = 'center',
+  bloom = 'none',
+  rule = true,
+  spacing = 'default',
+  className,
+  headerClassName,
+}: SectionShellProps) {
+  return (
+    <section
+      className={cn(
+        // `isolate` is load-bearing: `SectionBloom` paints at `-z-10`, and
+        // without a local stacking context it slides behind any ancestor that
+        // has its own background and vanishes.
+        'relative isolate scroll-mt-24 px-4 sm:px-6 lg:px-8',
+        spacing === 'tight'
+          ? 'py-14 sm:py-18 lg:py-20'
+          : 'py-20 sm:py-28 lg:py-32',
+        className
+      )}
+      id={id}
+    >
+      {rule ? (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_12%,transparent)_25%,color-mix(in_oklab,var(--foreground)_12%,transparent)_75%,transparent)]"
+        />
+      ) : null}
+      {bloom === 'none' ? null : <SectionBloom tone={bloom} />}
+
+      <div className={cn('relative mx-auto w-full', widths[width])}>
+        <header
+          className={cn(
+            'mb-14 flex flex-col sm:mb-18',
+            align === 'center' ? 'items-center text-center' : 'items-start',
+            headerClassName
+          )}
+        >
+          {eyebrow ? (
+            <SectionEyebrow index={index}>{eyebrow}</SectionEyebrow>
+          ) : null}
+
+          <h2
+            className={cn(
+              'mt-6 max-w-3xl text-balance font-display font-semibold text-4xl tracking-[-0.03em] sm:text-5xl lg:text-[3.5rem] lg:leading-[1.05]',
+              align === 'center' && 'mx-auto'
+            )}
+          >
+            {title}
+          </h2>
+
+          {subtitle ? (
+            <p
+              className={cn(
+                'mt-5 max-w-2xl text-balance text-base text-foreground/55 leading-relaxed sm:text-lg',
+                align === 'center' && 'mx-auto'
+              )}
+            >
+              {subtitle}
+            </p>
+          ) : null}
+        </header>
+
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/components/ui/marketing/stat-band.tsx

@@ -0,0 +1,46 @@
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+
+export interface MarketingStat {
+  id: string;
+  /** The number itself — kept short so the row stays on one line on mobile. */
+  value: ReactNode;
+  label: ReactNode;
+}
+
+/**
+ * Row of headline figures under a hero.
+ *
+ * Values render in the mono face with `tabular-nums` so a band that animates or
+ * re-renders (live counters, locale switches) does not reflow its neighbours.
+ */
+export function MarketingStatBand({
+  stats,
+  className,
+}: {
+  stats: MarketingStat[];
+  className?: string;
+}) {
+  return (
+    <dl
+      className={cn(
+        'grid w-full grid-cols-2 gap-px overflow-hidden rounded-2xl border border-foreground/[0.08] bg-foreground/[0.06] sm:grid-cols-4',
+        className
+      )}
+    >
+      {stats.map((stat) => (
+        <div
+          className="flex flex-col items-center gap-1 bg-background px-4 py-6 text-center"
+          key={stat.id}
+        >
+          <dt className="order-2 text-[0.7rem] text-foreground/45 uppercase tracking-[0.16em]">
+            {stat.label}
+          </dt>
+          <dd className="order-1 font-display font-semibold text-2xl tabular-nums tracking-[-0.02em] sm:text-3xl">
+            {stat.value}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/components/ui/marketing/surface-card.tsx

@@ -0,0 +1,144 @@
+import { ArrowUpRight } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import type { ComponentType, ReactNode } from 'react';
+import { getMarketingAccent, type MarketingAccent } from './accents';
+
+interface SurfaceCardProps {
+  accent: MarketingAccent;
+  icon?: ComponentType<{ className?: string }>;
+  title: ReactNode;
+  description: ReactNode;
+  /** Small mono label above the title (a role, a category). */
+  eyebrow?: ReactNode;
+  /** Renders the card as a link and reveals a corner arrow. */
+  href?: string;
+  /** Opens the link in a new tab — used for apps on their own domain. */
+  external?: boolean;
+  /** `stack` puts the icon above the copy; `inline` places it alongside. */
+  layout?: 'stack' | 'inline';
+  size?: 'md' | 'lg';
+  /** Extra content rendered under the description (a chip row, a mini preview). */
+  footer?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The marketing card surface: border, lit top edge, corner bloom, hover lift.
+ *
+ * Every feature grid, use-case tile and app link on a satellite landing page
+ * routes through this, so a change to the treatment lands everywhere at once
+ * instead of being re-typed per section.
+ */
+export function SurfaceCard({
+  accent,
+  icon: Icon,
+  title,
+  description,
+  eyebrow,
+  href,
+  external,
+  layout = 'stack',
+  size = 'md',
+  footer,
+  className,
+}: SurfaceCardProps) {
+  const styles = getMarketingAccent(accent);
+  const Root = href ? 'a' : 'div';
+  const isLarge = size === 'lg';
+
+  return (
+    <Root
+      {...(href ? { href } : {})}
+      {...(href && external
+        ? { target: '_blank', rel: 'noopener noreferrer' }
+        : {})}
+      className={cn(
+        'group relative flex h-full overflow-hidden rounded-2xl border border-foreground/[0.08] bg-foreground/[0.015] transition-all duration-500',
+        'hover:-translate-y-1 hover:border-foreground/15 hover:bg-foreground/[0.03]',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        layout === 'inline' ? 'items-start gap-3 p-4' : 'flex-col',
+        layout === 'stack' && (isLarge ? 'p-6 sm:p-7' : 'p-5'),
+        className
+      )}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent to-transparent transition-opacity duration-500 group-hover:opacity-100',
+          layout === 'inline' ? 'opacity-0' : 'opacity-40',
+          styles.rule
+        )}
+      />
+      <span
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute -top-16 -right-10 h-40 w-40 rounded-full opacity-0 blur-3xl transition-opacity duration-700 group-hover:opacity-100',
+          styles.bloom
+        )}
+      />
+
+      {Icon ? (
+        layout === 'inline' ? (
+          <span
+            className={cn(
+              'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-foreground/10 bg-foreground/[0.03] transition-transform duration-500 group-hover:scale-105',
+              styles.text
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+          </span>
+        ) : (
+          <Icon
+            className={cn(
+              'relative transition-transform duration-500 group-hover:scale-110',
+              isLarge ? 'h-5 w-5' : 'h-4 w-4',
+              styles.text
+            )}
+          />
+        )
+      ) : null}
+
+      <span className={cn('relative min-w-0', layout === 'inline' && 'flex-1')}>
+        {eyebrow ? (
+          <span
+            className={cn(
+              'block font-mono-ui text-[0.6rem] uppercase tracking-[0.18em]',
+              layout === 'stack' && Icon && 'mt-4',
+              styles.text
+            )}
+          >
+            {eyebrow}
+          </span>
+        ) : null}
+
+        <span
+          className={cn(
+            'flex items-center gap-1.5 font-display font-semibold tracking-[-0.01em]',
+            layout === 'stack' &&
+              !eyebrow &&
+              Icon &&
+              (isLarge ? 'mt-5' : 'mt-4'),
+            eyebrow && 'mt-1.5',
+            isLarge ? 'text-xl sm:text-2xl' : 'text-[0.95rem]'
+          )}
+        >
+          {title}
+          {href ? (
+            <ArrowUpRight className="h-3 w-3 shrink-0 text-foreground/25 transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-foreground/50" />
+          ) : null}
+        </span>
+
+        <span
+          className={cn(
+            'mt-2 block text-foreground/50 leading-relaxed',
+            isLarge ? 'max-w-md text-sm' : 'text-xs'
+          )}
+        >
+          {description}
+        </span>
+
+        {footer ? <span className="relative mt-4 block">{footer}</span> : null}
+      </span>
+    </Root>
+  );
+}