spb/polyllm

1import Link from "next/link";2import { ArrowRight, Swords } from "lucide-react";3import { Button } from "@/components/ui/button";4import { ProviderIcon } from "@/components/brand/provider-icon";5import { PROVIDER_ORDER } from "@/lib/client/providers";6import { Container } from "./section";7import { Reveal } from "./reveal";8import { HeroVisual } from "./hero-visual";9import { PROVIDER_LABEL } from "./mock-data";1011export function Hero() {12  return (13    <section className="relative overflow-hidden">14      {/* Backdrop: dot grid fading out + a single restrained accent glow */}15      <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-70 [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,black_30%,transparent_100%)] dark:opacity-50" />16      <div aria-hidden className="pointer-events-none absolute left-1/2 top-[-12rem] h-[28rem] w-[46rem] -translate-x-1/2 rounded-full bg-accent/15 blur-[110px] dark:bg-accent/10" />1718      <Container className="relative pb-14 pt-12 sm:pb-24 sm:pt-24">19        <div className="mx-auto max-w-3xl text-center">20          <Reveal>21            <p className="inline-flex items-center gap-2 rounded-full border border-border bg-bg-elevated/80 px-3 py-1 text-xs text-fg-muted shadow-xs">22              <span className="size-1.5 rounded-full bg-success" aria-hidden />23              Free. Bring your own API keys. Nine providers, one workspace.24            </p>25          </Reveal>26          <Reveal delay={0.05}>27            <h1 className="mt-6 text-balance text-5xl font-semibold tracking-[-0.03em]">28              One interface.29              <br />30              <span className="text-gradient">Every model.</span>31            </h1>32          </Reveal>33          <Reveal delay={0.1}>34            <p className="mx-auto mt-5 max-w-xl text-pretty text-base leading-7 text-fg-muted sm:text-lg sm:leading-8">Bring your own keys. Compare models. Control every parameter. Track every token.</p>35          </Reveal>36          <Reveal delay={0.15} className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">37            <Button asChild size="lg" className="w-full sm:w-auto">38              <Link href="/signup">39                Start using PolyLLM40                <ArrowRight />41              </Link>42            </Button>43            <Button asChild size="lg" variant="outline" className="w-full sm:w-auto">44              <Link href="/app/arena">45                <Swords />46                Try Arena47              </Link>48            </Button>49          </Reveal>50          <Reveal delay={0.2}>51            <ul className="mt-7 flex flex-wrap items-center justify-center gap-x-4 gap-y-2" aria-label="Supported providers">52              {PROVIDER_ORDER.map((p) => (53                <li key={p} className="inline-flex items-center gap-1.5 text-[12.5px] text-fg-muted">54                  <ProviderIcon provider={p} size={14} />55                  {PROVIDER_LABEL[p]}56                </li>57              ))}58            </ul>59          </Reveal>60        </div>6162        {/* The real product, animated */}63        <Reveal delay={0.25} y={24} className="mx-auto mt-12 w-full max-w-5xl sm:mt-16">64          <HeroVisual />65        </Reveal>66      </Container>67    </section>68  );69}70