spb/polyllm

1import * as React from "react";2import { cn } from "@/lib/utils";3import { Reveal } from "./reveal";45export function Container({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {6  return <div className={cn("mx-auto w-full max-w-6xl px-5 sm:px-8", className)} {...props} />;7}89export function Section({ id, className, children, tone = "default" }: { id?: string; className?: string; children: React.ReactNode; tone?: "default" | "subtle" }) {10  return (11    <section id={id} className={cn("scroll-mt-16 py-16 sm:py-24", tone === "subtle" && "border-y border-border bg-bg-subtle/60", className)}>12      <Container>{children}</Container>13    </section>14  );15}1617export function Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {18  return (19    <p className={cn("inline-flex items-center gap-2 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-fg-muted", className)}>20      <span className="size-1.5 rounded-full bg-accent" aria-hidden />21      {children}22    </p>23  );24}2526export function SectionHeading({27  eyebrow,28  title,29  description,30  align = "left",31  className,32}: {33  eyebrow?: string;34  title: React.ReactNode;35  description?: React.ReactNode;36  align?: "left" | "center";37  className?: string;38}) {39  return (40    <Reveal className={cn("max-w-2xl", align === "center" && "mx-auto text-center", className)}>41      {eyebrow ? <Eyebrow className={cn(align === "center" && "justify-center")}>{eyebrow}</Eyebrow> : null}42      <h2 className="mt-3 text-balance text-[28px] font-semibold leading-[1.1] tracking-tight sm:text-4xl">{title}</h2>43      {description ? <p className="mt-4 text-pretty text-[15px] leading-7 text-fg-muted sm:text-base">{description}</p> : null}44    </Reveal>45  );46}4748/** Mock application window chrome used across the marketing visuals. */49export function Window({ title, className, children, tone = "elevated" }: { title?: string; className?: string; children: React.ReactNode; tone?: "elevated" | "bg" }) {50  return (51    <div className={cn("overflow-hidden rounded-xl border border-border shadow-lg", tone === "elevated" ? "bg-bg-elevated" : "bg-bg", className)}>52      <div className="flex h-9 items-center gap-2 border-b border-border bg-bg-subtle/80 px-3">53        <span className="flex gap-1.5" aria-hidden>54          <span className="size-2.5 rounded-full bg-border-strong" />55          <span className="size-2.5 rounded-full bg-border-strong" />56          <span className="size-2.5 rounded-full bg-border-strong" />57        </span>58        {title ? <span className="ml-2 truncate font-mono text-[11px] text-fg-subtle">{title}</span> : null}59      </div>60      {children}61    </div>62  );63}6465export function Check({ className }: { className?: string }) {66  return (67    <svg viewBox="0 0 16 16" className={cn("size-4 shrink-0 text-success", className)} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>68      <circle cx="8" cy="8" r="6.5" opacity="0.35" />69      <path d="m5.2 8.2 1.9 1.9 3.8-4.2" />70    </svg>71  );72}73