spb/polyllm

1import Link from "next/link";2import { ExternalLink, Mail } from "lucide-react";3import { Logo } from "@/components/brand/logo";4import { ProviderIcon } from "@/components/brand/provider-icon";5import { PROVIDER_ORDER } from "@/lib/client/providers";6import { PROVIDER_LABEL } from "./mock-data";7import { InstallHint } from "./install-hint";89const COLUMNS: { title: string; links: { label: string; href: string; external?: boolean }[] }[] = [10  {11    title: "Product",12    links: [13      { label: "Features", href: "/#features" },14      { label: "Arena", href: "/#arena" },15      { label: "Interactive demo", href: "/#demo" },16      { label: "Security", href: "/security" },17      { label: "FAQ", href: "/#faq" },18    ],19  },20  {21    title: "Models",22    links: [23      { label: "Model catalog", href: "/models" },24      { label: "Live model API (JSON)", href: "/api/public/models" },25      { label: "Try the Arena", href: "/app/arena" },26    ],27  },28  {29    title: "Account",30    links: [31      { label: "Sign in", href: "/login" },32      { label: "Create account", href: "/signup" },33      { label: "Forgot password", href: "/forgot-password" },34      { label: "Open the app", href: "/app/chat" },35    ],36  },37  {38    title: "Legal",39    links: [40      { label: "Privacy", href: "/privacy" },41      { label: "Terms", href: "/terms" },42      { label: "Contact", href: "/contact" },43    ],44  },45];4647export function MarketingFooter() {48  return (49    <footer className="border-t border-border bg-bg-subtle/60">50      <div className="mx-auto w-full max-w-6xl px-5 py-12 sm:px-8 sm:py-16">51        <div className="grid gap-10 lg:grid-cols-[1.5fr_repeat(4,1fr)]">52          <div className="max-w-xs">53            <Logo size={24} />54            <p className="mt-3 text-sm leading-6 text-fg-muted">One interface. Every model. Bring your own keys.</p>55            <ul className="mt-5 flex flex-wrap gap-x-3.5 gap-y-2" aria-label="Supported providers">56              {PROVIDER_ORDER.map((p) => (57                <li key={p} className="inline-flex items-center gap-1.5 text-xs text-fg-subtle">58                  <ProviderIcon provider={p} size={13} />59                  {PROVIDER_LABEL[p]}60                </li>61              ))}62            </ul>63            <InstallHint className="mt-6" compact />64          </div>65          <div className="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-4">66            {COLUMNS.map((col) => (67              <div key={col.title}>68                <h3 className="text-[13px] font-semibold text-fg">{col.title}</h3>69                <ul className="mt-3 space-y-2">70                  {col.links.map((l) => (71                    <li key={l.href}>72                      <Link href={l.href} className="inline-flex min-h-[28px] items-center text-sm text-fg-muted transition-colors hover:text-fg">73                        {l.label}74                      </Link>75                    </li>76                  ))}77                </ul>78              </div>79            ))}80          </div>81        </div>8283        {/* Made by */}84        <div className="mt-12 grid gap-6 border-t border-border pt-8 sm:grid-cols-3">85          <div>86            <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-fg-subtle">Made by</p>87            <p className="mt-1.5 text-sm font-medium text-fg">Simon-Pierre Boucher</p>88            <a href="mailto:contact@spboucher.ai" className="mt-1 inline-flex items-center gap-1.5 text-sm text-fg-muted transition-colors hover:text-fg">89              <Mail className="size-3.5" aria-hidden /> contact@spboucher.ai90            </a>91          </div>92          <div>93            <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-fg-subtle">Hosted on</p>94            <a href="https://www.maclustr.io" target="_blank" rel="noreferrer noopener" className="mt-1.5 inline-flex items-center gap-1.5 text-sm font-medium text-fg transition-colors hover:text-accent">95              MacLustr — www.maclustr.io <ExternalLink className="size-3.5 text-fg-subtle" aria-hidden />96            </a>97            <p className="mt-1 text-sm text-fg-muted">A private cluster of Apple silicon Macs in Québec.</p>98          </div>99          <div>100            <p className="text-[11px] font-medium uppercase tracking-[0.12em] text-fg-subtle">Contact</p>101            <p className="mt-1.5 text-sm text-fg-muted">102              Questions, bugs, security reports:{" "}103              <Link href="/contact" className="font-medium text-fg underline-offset-4 hover:underline">104                contact page105              </Link>106              .107            </p>108          </div>109        </div>110111        <div className="mt-8 flex flex-col gap-3 border-t border-border pt-6 text-xs text-fg-subtle sm:flex-row sm:items-start sm:justify-between">112          <p>© {new Date().getFullYear()} PolyLLM · Simon-Pierre Boucher. All rights reserved.</p>113          <p className="max-w-lg leading-5 sm:text-right">114            OpenAI, Anthropic, Google Gemini, xAI, Mistral AI, DeepSeek, Moonshot AI (Kimi), OpenRouter and Cerebras are trademarks of their respective owners. PolyLLM is an independent product and is not affiliated with or endorsed by any provider.115          </p>116        </div>117      </div>118    </footer>119  );120}121