spb/polyllm

1import Link from "next/link";2import { Check } from "lucide-react";3import { Logo, LogoMark, Wordmark } from "@/components/brand/logo";4import { ProviderIcon } from "@/components/brand/provider-icon";5import { ThemeToggle } from "@/components/marketing/theme-toggle";6import { PROVIDER_ORDER } from "@/lib/client/providers";78const POINTS = ["Bring your own keys — encrypted with AES-256-GCM, never sent to the browser", "Chat, Arena, model catalog, projects and usage analytics in one workspace", "Free to use; you pay providers directly at list price"];910/**11 * Auth shell. Phones: full-height, brand mark on top, the form fills the width, safe areas12 * respected. Desktop (≥ lg): a quiet brand panel on the left, the form centered on the right.13 */14export default function AuthLayout({ children }: { children: React.ReactNode }) {15  return (16    <div className="relative flex min-h-dvh flex-col overflow-x-clip lg:grid lg:grid-cols-[1.05fr_1fr]">17      {/* Brand panel — desktop only */}18      <aside className="relative hidden flex-col justify-between overflow-hidden border-r border-border bg-bg-subtle px-12 py-10 lg:flex" aria-label="About PolyLLM">19        <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-70 [mask-image:radial-gradient(ellipse_70%_60%_at_30%_20%,black_20%,transparent_100%)] dark:opacity-40" />20        <div aria-hidden className="pointer-events-none absolute -left-24 top-1/3 h-[24rem] w-[30rem] rounded-full bg-accent/15 blur-[110px] dark:bg-accent/10" />21        <Link href="/" className="relative inline-flex w-fit rounded-md" aria-label="PolyLLM home">22          <Logo size={26} />23        </Link>24        <div className="relative max-w-md">25          <h2 className="text-balance text-4xl font-semibold tracking-[-0.03em]">26            One interface.27            <br />28            <span className="text-gradient">Every model.</span>29          </h2>30          <ul className="mt-7 space-y-3">31            {POINTS.map((p) => (32              <li key={p} className="flex items-start gap-2.5 text-[15px] leading-6 text-fg-muted">33                <span className="mt-1 flex size-4 shrink-0 items-center justify-center rounded-full bg-success-soft text-success">34                  <Check className="size-2.5" strokeWidth={3} />35                </span>36                {p}37              </li>38            ))}39          </ul>40          <ul className="mt-8 flex flex-wrap gap-x-4 gap-y-2" aria-label="Supported providers">41            {PROVIDER_ORDER.map((p) => (42              <li key={p} className="inline-flex items-center text-fg-subtle">43                <ProviderIcon provider={p} size={16} />44              </li>45            ))}46          </ul>47        </div>48        <p className="relative text-xs text-fg-subtle">Hosted on MacLustr · Made by Simon-Pierre Boucher</p>49      </aside>5051      {/* Form column */}52      <div className="relative flex min-h-dvh flex-col lg:min-h-0">53        <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(ellipse_80%_55%_at_50%_0%,black_20%,transparent_100%)] dark:opacity-40 lg:hidden" />54        <header className="relative z-10 flex h-14 shrink-0 items-center justify-between px-5 pt-safe sm:px-8">55          <Link href="/" className="rounded-md lg:invisible" aria-label="PolyLLM home">56            <Logo size={24} />57          </Link>58          <ThemeToggle />59        </header>60        <main className="relative z-10 flex flex-1 flex-col justify-start px-4 pb-8 pt-2 sm:justify-center sm:px-8 sm:pb-12 sm:pt-0">61          <div className="mx-auto w-full max-w-[420px]">62            <div className="mb-6 flex items-center gap-2.5 sm:hidden">63              <LogoMark size={36} className="shadow-md" />64              <Wordmark className="text-[20px]" />65            </div>66            {children}67          </div>68        </main>69        <footer className="relative z-10 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 px-4 pb-[max(20px,var(--sab))] text-xs text-fg-subtle">70          <span>© {new Date().getFullYear()} PolyLLM</span>71          <Link href="/privacy" className="inline-flex min-h-[28px] items-center hover:text-fg">72            Privacy73          </Link>74          <Link href="/terms" className="inline-flex min-h-[28px] items-center hover:text-fg">75            Terms76          </Link>77          <Link href="/security" className="inline-flex min-h-[28px] items-center hover:text-fg">78            Security79          </Link>80          <Link href="/contact" className="inline-flex min-h-[28px] items-center hover:text-fg">81            Help82          </Link>83        </footer>84      </div>85    </div>86  );87}88