Submatter/apps/web/components/marketing/hero-section.tsx

import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { MarqueeStrip } from "@/components/marketing/marquee-strip";
import { ProductDemo } from "@/components/marketing/product-demo";
import { Reveal } from "@/components/marketing/reveal";
import { ScrambleText } from "@/components/marketing/scramble-text";

export function HeroSection() {
  return (
    <section className="marketing-aurora marketing-grid-field relative min-h-[92vh] overflow-hidden text-[hsl(var(--hero-foreground))]">
      <div className="relative mx-auto flex min-h-[92vh] max-w-6xl flex-col justify-between px-4 pb-0 pt-10 sm:px-6">
        <div className="flex flex-1 flex-col justify-center py-12 lg:py-20">
          <Reveal>
            <p className="font-mono-brand text-[11px] uppercase tracking-[0.28em] text-[hsl(var(--hero-muted))]">
              Submatter · agent-native workspace
            </p>
          </Reveal>

          <Reveal delay={0.05} className="mt-8">
            <h1 className="font-display text-[clamp(4.5rem,16vw,11rem)] font-extrabold leading-[0.85] tracking-[0.06em]">
              <ScrambleText text="SBMTR" durationMs={1400} />
            </h1>
          </Reveal>

          <Reveal delay={0.12} className="mt-10 max-w-2xl">
            <p className="font-marketing text-xl leading-snug tracking-[-0.02em] text-[hsl(var(--hero-foreground))] sm:text-2xl">
              The coordination plane between{" "}
              <span className="font-mono-brand text-[hsl(var(--matter))]">plans/</span>, your team, and
              Cursor subagents.
            </p>
            <p className="mt-4 font-marketing text-base leading-relaxed text-[hsl(var(--hero-muted))]">
              Markdown frontmatter is the contract. MCP is the handshake. Convoys are how work ships.
            </p>
          </Reveal>

          <Reveal delay={0.18} className="mt-10 flex flex-wrap items-center gap-8">
            <Link
              href="/sign-up"
              className="group inline-flex items-center gap-3 font-marketing text-sm font-medium uppercase tracking-[0.12em] text-[hsl(var(--hero-foreground))]"
            >
              <span className="border-b-2 border-[hsl(var(--matter))] pb-1 transition-colors group-hover:text-[hsl(var(--matter))]">
                Start free
              </span>
              <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" aria-hidden />
            </Link>
            <Link
              href="#manifest"
              className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-[hsl(var(--hero-muted))] transition-colors hover:text-[hsl(var(--hero-foreground))]"
            >
              Read the manifest
            </Link>
          </Reveal>
        </div>

        <Reveal delay={0.22} y={40} className="pb-8">
          <ProductDemo className="border-[hsl(var(--hero-border))]" />
        </Reveal>
      </div>

      <MarqueeStrip />
    </section>
  );
}