import { useEffect, useState, FormEvent } from "react"; import { Toaster, toast } from "sonner"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; import { ArrowRight, Check, Clock, Mail as MailIcon, Menu, Shield, Star, Users, X, } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; const WAITLIST_KEY = "northline-waitlist"; const NAV = [ { href: "#features", label: "Features" }, { href: "#pricing", label: "Pricing" }, { href: "#voices", label: "Voices" }, { href: "#waitlist", label: "Waitlist" }, ] as const; const FEATURES = [ { mono: "01 · ROUTING", title: "Intent-aware orchestration", body: "Route each request to the right model and tool chain without hand-written glue for every path.", icon: Shield, span: "md:col-span-2", }, { mono: "02 · MEMORY", title: "Scoped working memory", body: "Keep session context tight and auditable so agents stay on task across long threads.", icon: Clock, span: "md:col-span-1", }, { mono: "03 · GUARDS", title: "Policy before action", body: "Approve, redact, or block steps with rules your team owns—not buried in prompts.", icon: Users, span: "md:col-span-1", }, { mono: "04 · OBSERVE", title: "Trace every hop", body: "Inspect prompts, tool calls, and latency in one timeline when something drifts.", icon: Star, span: "md:col-span-2", }, ] as const; const TIERS = [ { id: "explorer", name: "Explorer", price: "$0", period: "while in preview", blurb: "Local experiments and solo prototypes.", features: ["1 workspace", "Community models", "Basic traces", "Email support"], cta: "Join free tier", highlighted: false, }, { id: "studio", name: "Studio", price: "$49", period: "per seat / mo", blurb: "Small teams shipping agent workflows.", features: [ "Unlimited workspaces", "Policy guards", "Shared memory stores", "Priority support", ], cta: "Request Studio", highlighted: true, }, { id: "fleet", name: "Fleet", price: "Custom", period: "annual", blurb: "Org-wide controls and dedicated routing.", features: [ "SSO & SCIM", "VPC / private link", "Custom retention", "Named success partner", ], cta: "Talk to us", highlighted: false, }, ] as const; const VOICES = [ { quote: "We replaced a tangle of scripts with one orchestration graph. Reviews got shorter because traces show the full path.", name: "Maya Chen", role: "Staff engineer, internal tools", }, { quote: "Policy guards finally sit in front of tool calls. That is the difference between a demo and something we can run on customer data.", name: "Jonas Berg", role: "Head of platform", }, { quote: "Onboarding a new agent pattern used to take a week. With scoped memory and clear routing, the same work fits in an afternoon.", name: "Priya Nair", role: "Product lead, ops AI", }, ] as const; function loadWaitlist(): string[] { try { const raw = localStorage.getItem(WAITLIST_KEY); if (!raw) return []; const parsed = JSON.parse(raw) as unknown; if (!Array.isArray(parsed)) return []; return parsed.filter((e): e is string => typeof e === "string"); } catch { return []; } } function saveWaitlist(emails: string[]) { localStorage.setItem(WAITLIST_KEY, JSON.stringify(emails)); } function NoiseLayer() { return (

); } function Reveal({ children, className, delay = 0, }: { children: React.ReactNode; className?: string; delay?: number; }) { const reduce = useReducedMotion(); if (reduce) { return

{children}

; } return ( {children} ); } export default function App() { const [mobileOpen, setMobileOpen] = useState(false); const [email, setEmail] = useState(""); const [error, setError] = useState(null); const [count, setCount] = useState(0); const reduce = useReducedMotion(); useEffect(() => { setCount(loadWaitlist().length); }, []); useEffect(() => { const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@600;700;800&display=swap"; document.head.appendChild(link); return () => { document.head.removeChild(link); }; }, []); const scrollTo = (href: string) => { setMobileOpen(false); const el = document.querySelector(href); el?.scrollIntoView({ behavior: reduce ? "auto" : "smooth" }); }; const onSubmit = (e: FormEvent) => { e.preventDefault(); setError(null); const trimmed = email.trim().toLowerCase(); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed); if (!valid) { setError("Enter a valid email address."); return; } const list = loadWaitlist(); if (list.includes(trimmed)) { setError("That email is already on the waitlist on this device."); return; } const next = [...list, trimmed]; saveWaitlist(next); setCount(next.length); setEmail(""); toast.success("You’re on the waitlist", { description: "Saved in this browser until we open broader access.", }); }; return (

{ e.preventDefault(); scrollTo("#top"); }} > Northline

{mobileOpen && (

{NAV.map((item) => ( ))}

)}

{/* Hero — marquee / bold */}

Agent infrastructure · private preview

Ship agents that stay inside the lines.

Northline is orchestration for production AI—routing, memory, and policy in one cool control plane your team can actually operate.

Live readout

route tools → reason → act
guard policy.pass
memory session:scoped
status ready

{[ "Routing graphs", "Tool contracts", "Human gates", "Trace timelines", "Scoped memory", "Model fallbacks", "Routing graphs", "Tool contracts", "Human gates", "Trace timelines", "Scoped memory", "Model fallbacks", ].map((label, i) => ( {label} ))}

{/* Features — uneven grid, not three equal cards */}

Capabilities

Built for operators, not slide decks.

A compact surface for the work that actually ships: decide the path, constrain the tools, and read the trace when it matters.

{FEATURES.map((f, i) => { const Icon = f.icon; return (

{f.mono}

{f.title}

{f.body}

); })}

{/* Pricing */}

Pricing

Three tiers. Clear seats.

Preview pricing for planning—confirm details when your workspace opens. No fabricated discounts or usage claims.

{TIERS.map((tier, i) => (

{tier.name} {tier.highlighted && ( Popular )}

{tier.blurb}

{tier.price} {tier.period}

{feat}

))}

{/* Testimonials carousel — labeled as early voices, not fake metrics */}

Early voices

From teams in private design partners.

Composite notes from partner interviews—illustrative of the product direction, not public case studies.

{VOICES.map((v) => (

“{v.quote}”

{v.name}

{v.role}

))}

{/* Waitlist */}

Waitlist

Get in line for the preview.

Emails stay in this browser only—no server yet. We’ll use a real backend when you connect one.

Work email

{ setEmail(e.target.value); if (error) setError(null); }} aria-invalid={!!error} aria-describedby={error ? "waitlist-error" : "waitlist-hint"} className="min-h-11 border-slate-800 bg-slate-950 pl-10 text-slate-50 placeholder:text-slate-500 focus-visible:ring-cyan-300" />

{error ? (

{error}

) : (

{count === 0 ? "No signups stored on this device yet." : `${count} signup${count === 1 ? "" : "s"} stored on this device.`}

)}

); }