Landing Template (Dark SaaS)

// Landing Template (Dark SaaS) — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-06.tsx, export TemplateLandingSaas.
// Needs React 18+ and Tailwind CSS v4. The classes below include this site's
// token utilities (bg-panel, text-ink-dim, chip …); their values are served as
// CSS custom properties at /api/exports/tokens.json. The reduced-motion branch
// is part of the source, not an afterthought.

import { useRef, useState } from "react";

export function TemplateLandingSaas() {
  const scroller = useRef<HTMLDivElement>(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const go = (id: string) => {
    setMenuOpen(false);
    scroller.current?.querySelector(`[data-sec="${id}"]`)?.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <div className="flex h-full w-full flex-col bg-[#0a0c13]">
      <div className="flex items-center justify-between border-b border-white/6 px-4 py-2">
        <span className="text-[11px] font-black tracking-tight text-white">
          motif<span className="text-violet-300">/</span>ui
        </span>
        <nav className="hidden items-center gap-3 sm:flex" aria-label="Landing nav">
          {["features", "pricing", "faq"].map((n) => (
            <button key={n} type="button" onClick={() => go(n)} className="text-[10px] font-bold text-ink-dim hover:text-white">
              {n}
            </button>
          ))}
          <button type="button" onClick={() => go("cta")} className="rounded-lg bg-white px-3 py-1 text-[10px] font-black text-[#0b0c12]">
            Start free
          </button>
        </nav>
        <button
          type="button"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((m) => !m)}
          className="rounded-lg border border-white/10 px-2.5 py-1 text-[11px] sm:hidden"
        >
          {menuOpen ? "✕" : "☰"}
        </button>
      </div>
      {menuOpen && (
        <div className="flex flex-col gap-2 border-b border-white/6 bg-black/40 px-4 py-3 sm:hidden" style={{ animation: "mf-fade .15s ease-out both" }}>
          {["features", "pricing", "faq"].map((n) => (
            <button key={n} type="button" onClick={() => go(n)} className="rounded-lg px-2 py-1.5 text-left text-[11px] font-bold text-ink-dim hover:bg-white/5">
              {n}
            </button>
          ))}
        </div>
      )}
      <div ref={scroller} className="min-h-0 flex-1 overflow-y-auto">
        <section data-sec="hero" className="px-5 pb-8 pt-8 text-center" style={{ background: "radial-gradient(70% 100% at 50% 0%, rgba(139,92,246,.22), transparent 60%)" }}>
          <div className="mx-auto max-w-sm">
            <span className="rounded-full border border-violet-300/25 bg-violet-300/10 px-3 py-1 text-[9px] font-black uppercase tracking-[0.2em] text-violet-200">
              dark SaaS template
            </span>
            <div className="mt-3 text-2xl font-black leading-tight tracking-tight text-white" data-demo-heading="h2">
              The component library your roadmap <span className="text-violet-300">kept promising</span>
            </div>
            <p className="mx-auto mt-2 max-w-[300px] text-[11px] leading-relaxed text-ink-dim">
              Original assets, honest a11y and a motion language — assembled from the same sections on this page.
            </p>
            <div className="mt-4 flex justify-center gap-2">
              <button type="button" onClick={() => go("features")} className="rounded-lg bg-white px-4 py-2 text-[11px] font-black text-[#0b0c12]">
                See features
              </button>
              <button type="button" onClick={() => go("pricing")} className="rounded-lg border border-white/15 px-4 py-2 text-[11px] font-bold text-white/85">
                View pricing
              </button>
            </div>
            <div className="mt-5 flex flex-wrap items-center justify-center gap-2 text-[9px] text-ink-faint">
              {["northwind", "arclight", "hazel&co", "plainday", "solidpine"].map((l) => (
                <span key={l} className="rounded-full border border-white/8 bg-white/3 px-2.5 py-1 font-mono opacity-80 hover:opacity-100">
                  {l}
                </span>
              ))}
            </div>
          </div>
        </section>
        <section data-sec="features" className="border-t border-white/6 px-5 py-6">
          <div className="mx-auto grid max-w-sm grid-cols-3 gap-2">
            {[
              ["tokens", "one source of truth"],
              ["motion", "budgeted animation"],
              ["a11y", "tested, not bolted"],
            ].map(([t, b]) => (
              <div key={t} className="rounded-xl border border-white/6 bg-white/3 p-3">
                <span className="text-lg text-violet-300">◈</span>
                <p className="mt-1 text-[10px] font-black capitalize text-white">{t}</p>
                <p className="mt-0.5 text-[8.5px] leading-snug text-ink-dim">{b}</p>
              </div>
            ))}
          </div>
        </section>
        <section data-sec="pricing" className="border-t border-white/6 px-5 py-6">
          <div className="mx-auto grid max-w-sm grid-cols-3 gap-2">
            {[
              ["Studio", "$0"],
              ["Team", "$24"],
              ["Agency", "$64"],
            ].map(([n, p], i) => (
              <div key={n} className={`rounded-xl border p-3 text-center ${i === 1 ? "border-emerald-300/35 bg-emerald-300/8" : "border-white/8 bg-white/3"}`}>
                <p className="text-[10px] font-black text-white">{n}</p>
                <p className="mt-1 text-base font-black text-white">
                  {p}
                  <span className="text-[8px] text-ink-faint">/mo</span>
                </p>
                <button type="button" className={`mt-2 w-full rounded-lg px-2 py-1 text-[9px] font-black ${i === 1 ? "bg-emerald-300 text-[#06120c]" : "bg-white/10 text-white"}`}>
                  {i === 0 ? "Free" : "Choose"}
                </button>
              </div>
            ))}
          </div>
        </section>
        <section data-sec="faq" className="border-t border-white/6 px-5 py-6">
          <div className="mx-auto max-w-sm space-y-1.5">
            {[
              ["Original?", "Every asset is authored in-house."],
              ["Licence?", "MIT, including client work."],
              ["Fast?", "Zero runtime on your page."],
            ].map(([q, a]) => (
              <div key={q} className="flex items-baseline gap-2 rounded-lg border border-white/6 bg-white/2 px-3 py-2">
                <span className="shrink-0 text-[10px] font-black text-white">{q}</span>
                <span className="text-[9.5px] text-ink-dim">{a}</span>
              </div>
            ))}
          </div>
        </section>
        <section data-sec="cta" className="border-t border-white/6 px-5 py-6 text-center" style={{ background: "linear-gradient(180deg, transparent, rgba(52,211,153,.08))" }}>
          <p className="text-sm font-black text-white">Stop promising the library. Ship it.</p>
          <button type="button" onClick={() => go("hero")} className="mt-3 rounded-lg bg-emerald-300 px-5 py-2 text-[11px] font-black text-[#06120c]">
            Start building free
          </button>
        </section>
        <p className="border-t border-white/6 px-5 py-3 text-center text-[8px] text-ink-faint">
          assembled from shipped sections · hero → logos → features → pricing → faq → cta
        </p>
      </div>
    </div>
  );
}