Update OG / Twitter metadata and image to read/compute/write framing

Old description ('Lit is a key management network for decentralized
signing and encryption…') and the static og-image.png / twitter-image.png
both pushed the previous positioning, so Slack and Twitter unfurls were
still selling the old network.

Replace the description with the new framing and serve a dynamic OG
image via an edge route handler at /api/og. Tried the file-based
opengraph-image.tsx convention first but it inherits the app layout's
Mantine import, which doesn't compile under edge runtime. The /api/og
route doesn't bundle the layout, so the edge ImageResponse renders
cleanly. Added metadataBase so relative URLs resolve in production.

Deleted the stale static PNGs.

Author: glitch003

public/og-image.png

@@ -0,0 +1,111 @@
+import { ImageResponse } from 'next/server';
+
+export const runtime = 'edge';
+
+export async function GET() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          padding: '80px',
+          background:
+            'linear-gradient(135deg, #0a1226 0%, #1a2347 45%, #0e1a2e 100%)',
+          color: 'white',
+          position: 'relative',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: -200,
+            right: -200,
+            width: 700,
+            height: 700,
+            background:
+              'radial-gradient(circle, rgba(167,243,208,0.18) 0%, transparent 65%)',
+            display: 'flex',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: -200,
+            left: -200,
+            width: 600,
+            height: 600,
+            background:
+              'radial-gradient(circle, rgba(255,66,5,0.16) 0%, transparent 65%)',
+            display: 'flex',
+          }}
+        />
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 14,
+            fontSize: 24,
+            color: 'rgba(255,255,255,0.65)',
+            letterSpacing: '0.2em',
+            marginBottom: 36,
+            fontFamily: 'monospace',
+          }}
+        >
+          <span
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 999,
+              background: '#a7f3d0',
+              display: 'flex',
+            }}
+          />
+          LIT PROTOCOL · TEE-SECURED COMPUTE
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            fontSize: 80,
+            lineHeight: 1.05,
+            fontWeight: 500,
+            letterSpacing: '-0.02em',
+          }}
+        >
+          <div style={{ display: 'flex' }}>Read anywhere.</div>
+          <div style={{ display: 'flex' }}>
+            <span style={{ color: '#a7f3d0' }}>Compute</span>
+            <span style={{ marginLeft: '0.3em' }}>in a TEE.</span>
+          </div>
+          <div style={{ display: 'flex' }}>Write to any chain or API.</div>
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 56,
+            color: 'rgba(255,255,255,0.55)',
+            fontSize: 24,
+            fontFamily: 'monospace',
+            letterSpacing: '0.15em',
+          }}
+        >
+          <span>litprotocol.com</span>
+          <span>READ · COMPUTE · WRITE</span>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+}

public/twitter-image.png

@@ -11,30 +11,35 @@ import {
   mantineHtmlProps,
 } from '@mantine/core';
 
+const DESCRIPTION =
+  'Read anywhere. Compute in a TEE. Write to any chain or API. Lit is a programmable runtime that pulls data from any source, runs your logic in a chain-secured TEE, and signs on any chain or API.';
+
 export const metadata: Metadata = {
+  metadataBase: new URL('https://litprotocol.com'),
   title: 'Lit Protocol',
-  description:
-    'Lit is a key management network for decentralized signing and encryption. Create apps and wallets that use secrets without single points of failure.',
+  description: DESCRIPTION,
   openGraph: {
     title: 'Lit Protocol',
-    description:
-      'Lit is a key management network for decentralized signing and encryption. Create apps and wallets that use secrets without single points of failure.',
+    description: DESCRIPTION,
     url: 'https://litprotocol.com',
     siteName: 'Lit Protocol',
     images: {
-      url: '/og-image.png',
-      alt: 'Description of Lit Protocol over a blue and orange gradient background',
+      url: '/api/og',
+      width: 1200,
+      height: 630,
+      alt: 'Lit Protocol — Read anywhere. Compute in a TEE. Write to any chain or API.',
     },
   },
   twitter: {
     card: 'summary_large_image',
     title: 'Lit Protocol',
-    description:
-      'Lit is a key management network for decentralized signing and encryption. Create apps and wallets that use secrets without single points of failure.',
+    description: DESCRIPTION,
     creator: '@LitProtocol',
     images: {
-      url: '/twitter-image.png',
-      alt: 'Description of Lit Protocol over a blue and orange gradient background',
+      url: '/api/og',
+      width: 1200,
+      height: 630,
+      alt: 'Lit Protocol — Read anywhere. Compute in a TEE. Write to any chain or API.',
     },
   },
 };