feat: add sponsors page

app/sponsors/page.tsx

@@ -0,0 +1,87 @@
+import type { Metadata } from "next";
+import { ArrowUpRight } from "lucide-react";
+import { CopyButton } from "@/components/app/copy-button";
+import { PressLink } from "@/components/app/press-link";
+
+export const metadata: Metadata = {
+  title: "Sponsors",
+  description:
+    "Support beUI's development through GitHub Sponsors or directly with crypto.",
+  alternates: { canonical: "/sponsors" },
+  openGraph: {
+    title: "Sponsors · beUI",
+    description:
+      "Support beUI's development through GitHub Sponsors or directly with crypto.",
+    url: "/sponsors",
+    type: "website",
+    siteName: "beUI",
+    images: ["/api/og"],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Sponsors · beUI",
+    images: ["/api/og"],
+  },
+};
+
+const GITHUB_SPONSORS_URL = "https://github.com/sponsors/starc007";
+
+function truncateAddress(address: string) {
+  return address.length > 14
+    ? `${address.slice(0, 6)}...${address.slice(-6)}`
+    : address;
+}
+
+function AddressRow({ label, address }: { label: string; address: string }) {
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-xl border border-border px-4 py-3">
+      <div className="min-w-0">
+        <p className="text-xs font-medium text-muted-foreground">{label}</p>
+        <p className="mt-0.5 truncate font-mono text-sm text-foreground">
+          {truncateAddress(address)}
+        </p>
+      </div>
+      <CopyButton text={address} eventName="copy_sponsor_address" eventLabel={label} />
+    </div>
+  );
+}
+
+export default function SponsorsPage() {
+  const evmAddress = process.env.SPONSOR_EVM_ADDRESS;
+  const solAddress = process.env.SPONSOR_SOL_ADDRESS;
+
+  return (
+    <div className="mx-auto max-w-xl px-4 py-16">
+      <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        Sponsors
+      </p>
+      <h1 className="mt-2 text-3xl font-semibold tracking-tight text-foreground">
+        Support beUI
+      </h1>
+      <p className="mt-3 text-muted-foreground">
+        beUI is free and open source. If it's saved you time, consider
+        supporting its development.
+      </p>
+
+      <PressLink
+        href={GITHUB_SPONSORS_URL}
+        target="_blank"
+        rel="noreferrer noopener"
+        className="group mt-8 inline-flex items-center justify-center gap-2 rounded-full bg-primary px-7 py-3.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+      >
+        Sponsor on GitHub
+        <ArrowUpRight className="h-4 w-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+      </PressLink>
+
+      {evmAddress || solAddress ? (
+        <div className="mt-10 space-y-3">
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Crypto
+          </p>
+          {evmAddress ? <AddressRow label="EVM" address={evmAddress} /> : null}
+          {solAddress ? <AddressRow label="Solana" address={solAddress} /> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

components/app/mobile-nav.tsx

@@ -39,7 +39,7 @@ export function MobileNav() {
         snapPoints={[0.85]}
       >
         <div className="flex flex-col gap-5 pt-2">
-          <nav className="flex gap-1">
+          <nav className="flex flex-wrap gap-1">
             <Link
               href="/components/motion"
               onClick={() => setOpen(false)}
@@ -76,6 +76,18 @@ export function MobileNav() {
             >
               Playground
             </Link>
+            <Link
+              href="/sponsors"
+              onClick={() => setOpen(false)}
+              className={cn(
+                "rounded-md px-3 py-1.5 text-sm transition-colors",
+                pathname.startsWith("/sponsors")
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              Sponsors
+            </Link>
           </nav>
           <SidebarNav onNavigate={() => setOpen(false)} />
         </div>

components/app/site-footer.tsx

@@ -114,6 +114,14 @@ export function SiteFooter() {
                   GitHub
                 </Link>
               </li>
+              <li>
+                <Link
+                  href="/sponsors"
+                  className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  Sponsor
+                </Link>
+              </li>
               <li>
                 <Link
                   href="https://x.com/saurra3h"

components/app/site-header.tsx

@@ -37,6 +37,7 @@ export function SiteHeader({
       !pathname.startsWith("/components/blocks"));
   const isBlocks = pathname.startsWith("/components/blocks");
   const isPlayground = pathname.startsWith("/playground");
+  const isSponsors = pathname.startsWith("/sponsors");
   const formattedStarCount =
     typeof githubStarCount === "number"
       ? formatStarCount(githubStarCount)
@@ -106,6 +107,17 @@ export function SiteHeader({
             >
               Playground
             </Link>
+            <Link
+              href="/sponsors"
+              className={cn(
+                "rounded-md px-3 py-1.5 text-sm transition-colors",
+                isSponsors
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              Sponsors
+            </Link>
           </nav>
         </div>