@tuturuuu/ui 0.29.2 → 0.30.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.30.1](https://github.com/tutur3u/platform/compare/ui-v0.30.0...ui-v0.30.1) (2026-08-27)
+
+
+### Bug Fixes
+
+* **forms:** repair the landing demo, the brand lockup and two analytics labels ([3f16968](https://github.com/tutur3u/platform/commit/3f16968f5802ebbd518ee27025c61a759839fd4e))
+* **forms:** repair the landing demo, the brand lockup and two analytics labels ([#5164](https://github.com/tutur3u/platform/issues/5164)) ([56d7f62](https://github.com/tutur3u/platform/commit/56d7f62325a8ec0caa5bb3ccd76b050dd66b1e53))
+
+## [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.1",
   "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.27.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",
@@ -312,6 +313,10 @@
       "types": "./src/components/ui/custom/system-language-wrapper.tsx",
       "import": "./src/components/ui/custom/system-language-wrapper.tsx"
     },
+    "./custom/tuturuuu-wordmark": {
+      "types": "./src/components/ui/custom/tuturuuu-wordmark.tsx",
+      "import": "./src/components/ui/custom/tuturuuu-wordmark.tsx"
+    },
     "./custom/tuturuuu-logo": {
       "types": "./src/components/ui/custom/tuturuuu-logo.tsx",
       "import": "./src/components/ui/custom/tuturuuu-logo.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/custom/__tests__/tuturuuu-wordmark.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { toProductName } from '../tuturuuu-wordmark';
+
+describe('toProductName', () => {
+  it('strips the company name from a full app name', () => {
+    expect(toProductName('Tuturuuu Forms')).toBe('Forms');
+    expect(toProductName('Tuturuuu Calendar')).toBe('Calendar');
+  });
+
+  it('is case-insensitive and tolerates extra spacing', () => {
+    expect(toProductName('TUTURUUU  Forms')).toBe('Forms');
+  });
+
+  it('leaves a bare product name alone', () => {
+    expect(toProductName('Forms')).toBe('Forms');
+  });
+
+  it('returns the name unchanged when stripping would empty it', () => {
+    // Otherwise the lockup renders with a blank second line.
+    expect(toProductName('Tuturuuu')).toBe('Tuturuuu');
+  });
+});

package/src/components/ui/custom/tuturuuu-wordmark.tsx

@@ -0,0 +1,72 @@
+import { cn } from '@tuturuuu/utils/format';
+import { TuturuuLogo } from './tuturuuu-logo';
+
+/**
+ * The Tuturuuu product lockup: mark, then "Tuturuuu" over the product name.
+ *
+ * Two lines rather than one string. "Tuturuuu Forms" set on a single line reads
+ * as one long product name; stacking it says what it is — a Tuturuuu product
+ * called Forms — and keeps the company name consistent across products while
+ * only the second line changes.
+ *
+ * The logo deliberately does not take a local `src`. Satellites are served from
+ * their own domains and do not carry `/media`, so a local path 404s there; the
+ * component's default is the absolute URL for exactly that reason.
+ */
+export function TuturuuuWordmark({
+  className,
+  product,
+  size = 'md',
+}: {
+  className?: string;
+  /** The second line — the product name, without "Tuturuuu" in front of it. */
+  product: string;
+  size?: 'sm' | 'md';
+}) {
+  const dimension = size === 'sm' ? 28 : 32;
+
+  return (
+    <span className={cn('flex items-center gap-2.5', className)}>
+      <TuturuuLogo
+        alt=""
+        aria-hidden
+        className={cn('object-contain', size === 'sm' ? 'h-7 w-7' : 'h-8 w-8')}
+        height={dimension}
+        width={dimension}
+      />
+      <span className="flex flex-col text-left leading-none">
+        <span
+          className={cn(
+            'uppercase tracking-[0.24em] opacity-70',
+            size === 'sm' ? 'text-[9px]' : 'text-[10px]'
+          )}
+        >
+          Tuturuuu
+        </span>
+        <span
+          className={cn(
+            'font-display font-semibold uppercase tracking-[0.08em]',
+            size === 'sm' ? 'text-sm' : 'text-lg'
+          )}
+        >
+          {product}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+/**
+ * The product line of a full app name: "Tuturuuu Forms" -> "Forms".
+ *
+ * Exists so the nav and the footer cannot disagree. They derive the same label
+ * from the same prop, and two copies of one regex is exactly the kind of
+ * duplication that drifts when only one of them is updated.
+ *
+ * A name that is only "Tuturuuu" is returned unchanged rather than reduced to
+ * an empty string, which would render a lockup with a blank second line.
+ */
+export function toProductName(appName: string): string {
+  const stripped = appName.replace(/^Tuturuuu\s+/i, '').trim();
+  return stripped || appName;
+}

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>
+  );
+}