@tuturuuu/ui 0.29.2 → 0.30.1

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,91 @@
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import { TuturuuuWordmark, toProductName } from '../custom/tuturuuu-wordmark';
+
+export interface MarketingFooterLink {
+  href: string;
+  label: string;
+  external?: boolean;
+}
+
+export interface MarketingFooterColumn {
+  id: string;
+  title: string;
+  links: MarketingFooterLink[];
+}
+
+interface MarketingFooterProps {
+  appName: string;
+  /** Product line of the lockup; defaults to `appName` minus "Tuturuuu ". */
+  productName?: 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,
+  productName,
+  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">
+          <TuturuuuWordmark
+            product={productName ?? toProductName(appName)}
+            size="sm"
+          />
+          <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,167 @@
+'use client';
+
+import { Menu, X } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import { type ReactNode, useEffect, useState } from 'react';
+import { TuturuuuWordmark, toProductName } from '../custom/tuturuuu-wordmark';
+
+export interface MarketingNavLink {
+  /** In-page anchor (`#pricing`) or absolute URL. */
+  href: string;
+  label: string;
+}
+
+interface MarketingNavProps {
+  /**
+   * The full app name, e.g. "Tuturuuu Forms". Used for the accessible landmark
+   * label, and as the fallback source for `productName`.
+   */
+  appName: string;
+  /**
+   * The product line of the lockup — "Forms", not "Tuturuuu Forms". Defaults
+   * to `appName` with a leading "Tuturuuu " stripped, so callers that already
+   * pass the full name keep working.
+   */
+  productName?: 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,
+  productName,
+  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 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          href={homeHref}
+        >
+          <TuturuuuWordmark
+            product={productName ?? toProductName(appName)}
+            size="sm"
+          />
+        </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>
+  );
+}