add /og preview page and OG image metadata

landing/src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import './globals.css';
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://voicebox.sh'),
   title: 'Voicebox - Open Source Voice Cloning Desktop App',
   description:
     'Near-perfect voice cloning with multiple TTS engines. Desktop app for Mac, Windows, and Linux. Multi-sample support, smart caching, local or remote inference.',
@@ -26,6 +27,13 @@ export const metadata: Metadata = {
     description: 'Open source voice cloning. Local-first. Free forever.',
     type: 'website',
     url: 'https://voicebox.sh',
+    images: [{ url: '/og.webp', width: 1200, height: 630 }],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Voicebox',
+    description: 'Open source voice cloning. Local-first. Free forever.',
+    images: ['/og.webp'],
   },
 };
 

landing/src/app/og/page.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+export default function OgPreview() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[#0a0a09] p-10">
+      {/* The card — standard OG image dimensions */}
+      <div
+        id="og"
+        className="relative flex items-center overflow-hidden"
+        style={{
+          width: 1200,
+          height: 630,
+          background:
+            'radial-gradient(ellipse 80% 70% at 50% 45%, hsla(43,60%,50%,0.12) 0%, hsla(43,60%,50%,0.04) 40%, transparent 70%), linear-gradient(180deg, hsl(30,4%,6%) 0%, hsl(30,4%,4%) 100%)',
+        }}
+      >
+        {/* Logo + text — left-justified, horizontal */}
+        <div className="relative z-10 flex items-center" style={{ paddingLeft: 20 }}>
+          {/* Glow behind logo */}
+          <div
+            className="pointer-events-none absolute rounded-full blur-[100px]"
+            style={{
+              width: 300,
+              height: 300,
+              top: '50%',
+              left: 0,
+              transform: 'translateY(-50%)',
+              background: 'hsla(43, 60%, 50%, 0.15)',
+            }}
+          />
+          <img
+            src="/voicebox-logo-app.webp"
+            alt=""
+            className="relative shrink-0 object-contain"
+            style={{ width: 260, height: 260 }}
+            draggable={false}
+          />
+          <div className="flex flex-col" style={{ marginLeft: -8 }}>
+            <h1
+              className="font-bold tracking-tight"
+              style={{
+                fontSize: 72,
+                lineHeight: 1,
+                color: 'hsl(30, 10%, 94%)',
+              }}
+            >
+              Voicebox
+            </h1>
+            <p
+              style={{
+                fontSize: 24,
+                lineHeight: 1.4,
+                marginTop: 16,
+                color: 'hsl(30, 5%, 55%)',
+              }}
+            >
+              Open source voice cloning.
+              <br />
+              Local-first. Free forever.
+            </p>
+          </div>
+        </div>
+
+        {/* App screenshot — right, overflowing */}
+        <img
+          src="/assets/app-screenshot-1.webp"
+          alt=""
+          className="pointer-events-none absolute top-1/2 -translate-y-1/2 z-10"
+          style={{
+            right: -300,
+            width: 900,
+          }}
+          draggable={false}
+        />
+
+        {/* Border overlay */}
+        <div className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/[0.06]" />
+      </div>
+
+      {/* Helper text */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 text-xs text-white/30">
+        1200 &times; 630 &mdash; Right-click the card or screenshot at 1:1 zoom
+      </div>
+    </div>
+  );
+}