2f6adf4382
Introduce public /landing and /pricing pages for the SBMTR brand with bento features, convoy product demo, motion reveals, and scoped marketing tokens. Unauthenticated visitors route to the landing page. Co-authored-by: Cursor <cursoragent@cursor.com>
75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
import { DotField } from "@/components/marketing/dot-field";
|
|
import { ProductDemo } from "@/components/marketing/product-demo";
|
|
import { Reveal } from "@/components/marketing/reveal";
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-[hsl(var(--hero))] text-[hsl(var(--hero-foreground))]">
|
|
<DotField />
|
|
<div
|
|
className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_60%_50%_at_70%_20%,hsl(var(--matter)/0.08),transparent_60%)]"
|
|
aria-hidden
|
|
/>
|
|
|
|
<div className="relative mx-auto grid max-w-6xl gap-12 px-4 pb-20 pt-12 sm:px-6 lg:grid-cols-2 lg:items-center lg:gap-16 lg:pb-28 lg:pt-16">
|
|
<div className="space-y-8">
|
|
<Reveal>
|
|
<p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-[hsl(var(--hero-muted))]">
|
|
Agent-native workspace
|
|
</p>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.05}>
|
|
<h1 className="max-w-xl font-marketing text-[2.75rem] font-semibold leading-[1.02] tracking-[-0.03em] sm:text-6xl lg:text-[4.25rem]">
|
|
The matter beneath{" "}
|
|
<span className="font-display font-extrabold uppercase tracking-[0.08em] text-[hsl(var(--matter))]">
|
|
SBMTR
|
|
</span>
|
|
</h1>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.1}>
|
|
<p className="max-w-lg font-marketing text-lg leading-relaxed text-[hsl(var(--hero-muted))]">
|
|
Submatter syncs your <span className="font-mono-brand text-[hsl(var(--hero-foreground))]">plans/</span>{" "}
|
|
backlog to a real workspace, then lets Cursor subagents claim tasks through MCP — with convoy gates
|
|
humans actually approve.
|
|
</p>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.15}>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Link
|
|
href="/sign-up"
|
|
className="group inline-flex h-12 items-center gap-2 border-b-2 border-[hsl(var(--matter))] bg-transparent pb-0.5 font-marketing text-sm font-medium text-[hsl(var(--hero-foreground))] transition-colors hover:text-[hsl(var(--matter))]"
|
|
>
|
|
Start free
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" aria-hidden />
|
|
</Link>
|
|
<Link
|
|
href="/landing#pipeline"
|
|
className="inline-flex h-12 items-center px-1 font-marketing text-sm text-[hsl(var(--hero-muted))] transition-colors hover:text-[hsl(var(--hero-foreground))]"
|
|
>
|
|
See the pipeline
|
|
</Link>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.2}>
|
|
<p className="font-mono-brand text-[11px] text-[hsl(var(--hero-muted))]">
|
|
subagents · frontmatter · one workspace
|
|
</p>
|
|
</Reveal>
|
|
</div>
|
|
|
|
<Reveal delay={0.12} y={32} className="lg:translate-y-4">
|
|
<ProductDemo />
|
|
</Reveal>
|
|
</div>
|
|
|
|
<div className="h-1 bg-[hsl(var(--matter))]" aria-hidden />
|
|
</section>
|
|
);
|
|
}
|