update landing page with hero and features showcase, update waitlist avatars, update unauthenticated state on lexicons page to include banner

deno.lock

···
   "version": "5",
   "specifiers": {
     "jsr:@shikijs/shiki@*": "3.7.0",
+    "jsr:@std/cli@^1.0.21": "1.0.22",
     "jsr:@std/cli@^1.0.22": "1.0.22",
+    "jsr:@std/encoding@^1.0.10": "1.0.10",
     "jsr:@std/fmt@^1.0.2": "1.0.8",
+    "jsr:@std/fmt@^1.0.8": "1.0.8",
+    "jsr:@std/fs@^1.0.19": "1.0.19",
     "jsr:@std/fs@^1.0.4": "1.0.19",
+    "jsr:@std/html@^1.0.4": "1.0.4",
     "jsr:@std/http@^1.0.20": "1.0.20",
     "jsr:@std/internal@^1.0.10": "1.0.10",
     "jsr:@std/internal@^1.0.9": "1.0.10",
+    "jsr:@std/media-types@^1.1.0": "1.1.0",
+    "jsr:@std/net@^1.0.4": "1.0.5",
     "jsr:@std/path@^1.0.6": "1.1.2",
     "jsr:@std/path@^1.1.1": "1.1.2",
+    "jsr:@std/streams@^1.0.10": "1.0.11",
     "npm:@shikijs/core@^3.7.0": "3.13.0",
     "npm:@shikijs/engine-oniguruma@^3.7.0": "3.13.0",
+    "npm:@shikijs/types@^3.7.0": "3.13.0",
+    "npm:@takumi-rs/core@~0.29.8": "0.29.8",
+    "npm:@takumi-rs/helpers@~0.29.8": "0.29.8",
     "npm:@types/node@*": "22.15.15",
     "npm:clsx@^2.1.1": "2.1.1",
     "npm:lucide-preact@0.544": "0.544.0_preact@10.27.1",
···
     "@std/cli@1.0.22": {
       "integrity": "50d1e4f87887cb8a8afa29b88505ab5081188f5cad3985460c3b471fa49ff21a"
     },
+    "@std/encoding@1.0.10": {
+      "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1"
+    },
     "@std/fmt@1.0.8": {
       "integrity": "71e1fc498787e4434d213647a6e43e794af4fd393ef8f52062246e06f7e372b7"
     },
···
         "jsr:@std/path@^1.1.1"
       ]
     },
+    "@std/html@1.0.4": {
+      "integrity": "eff3497c08164e6ada49b7f81a28b5108087033823153d065e3f89467dd3d50e"
+    },
     "@std/http@1.0.20": {
-      "integrity": "b5cc33fc001bccce65ed4c51815668c9891c69ccd908295997e983d8f56070a1"
+      "integrity": "b5cc33fc001bccce65ed4c51815668c9891c69ccd908295997e983d8f56070a1",
+      "dependencies": [
+        "jsr:@std/cli@^1.0.21",
+        "jsr:@std/encoding",
+        "jsr:@std/fmt@^1.0.8",
+        "jsr:@std/fs@^1.0.19",
+        "jsr:@std/html",
+        "jsr:@std/media-types",
+        "jsr:@std/net",
+        "jsr:@std/path@^1.1.1",
+        "jsr:@std/streams"
+      ]
     },
     "@std/internal@1.0.10": {
       "integrity": "e3be62ce42cab0e177c27698e5d9800122f67b766a0bea6ca4867886cbde8cf7"
     },
+    "@std/media-types@1.1.0": {
+      "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
+    },
+    "@std/net@1.0.5": {
+      "integrity": "b759d8c5e17d997e164af6379d57764668c6714f30109685eec0fd5e194d501a"
+    },
     "@std/path@1.1.2": {
       "integrity": "c0b13b97dfe06546d5e16bf3966b1cadf92e1cc83e56ba5476ad8b498d9e3038",
       "dependencies": [
         "jsr:@std/internal@^1.0.10"
       ]
+    },
+    "@std/streams@1.0.11": {
+      "integrity": "db583d27e28d133f389f1eec318cffdf4998305e5134c1d4b1c56b361cee6018"
     }
   },
   "npm": {
···
     },
     "@shikijs/vscode-textmate@10.0.2": {
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="
+    },
+    "@takumi-rs/core-darwin-arm64@0.29.8": {
+      "integrity": "sha512-hvDjiKkxClqzV0j03xaSYJ3q7a76zJ4d0SCyI8x4qhZ/5IJzXTKoYMcnr8D3dO9uMrw20CRvwawLh6AD85Auig==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@takumi-rs/core-linux-arm64-gnu@0.29.8": {
+      "integrity": "sha512-uRPnK6etEK7pCd3mUZvGjKfpXfggJjNFLkCVytJFFUcPDFmWQz8XZUhoVe12S2hP5W1jwfatdTAxHwxCMUFytg==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@takumi-rs/core-linux-arm64-musl@0.29.8": {
+      "integrity": "sha512-6h+ZahJ33gfxM0zHlyXaoMc6nPEP/r0EOlU69UN2LO85SEG9xbY/BiETPkW+5uNv/99hPmS8KHVt1M5KPaYjNQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@takumi-rs/core-linux-x64-gnu@0.29.8": {
+      "integrity": "sha512-Z8vMKjuP8DIcb6+XGzcxdeeyTD17RZ+HY3e46zBIySe2D3pd7wNGyDeXMSjn1yCjgOv0FFbec8PojNSlWQI2kw==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@takumi-rs/core-linux-x64-musl@0.29.8": {
+      "integrity": "sha512-kd13wXY0YMr+kSxENZZB+1EK1uJbfqccEG2+Osc0Jvm+6d2/urksFPAOqQs/SIXVbd4O4yEhxTe5TSQ8IDdKrw==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@takumi-rs/core-win32-arm64-msvc@0.29.8": {
+      "integrity": "sha512-mALGz9A8VLX25AtaDv/bAxbGYGiHKWFN2tCCCkUxX5njs1Hwn7znFRVoouwlD93A2KRVpTXQSE74bmRiCD4VuA==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@takumi-rs/core-win32-x64-msvc@0.29.8": {
+      "integrity": "sha512-t236EXR/DsBWbWpSnZYoR7xgWPU4xZtrCyzbtxiDQhIrLGPzgZ3ZOgkEvhf7ipXGZUv3SGqR1VBzBSHwTPfrTw==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@takumi-rs/core@0.29.8": {
+      "integrity": "sha512-kCzDirdGu0namxZPn9ul6B0Lt5a4BI4EuRsV2Zj2dTzfFRTGIl/Cwi8by+lnxuuhZ7s++GpB6z7M3kPBEugOww==",
+      "optionalDependencies": [
+        "@takumi-rs/core-darwin-arm64",
+        "@takumi-rs/core-linux-arm64-gnu",
+        "@takumi-rs/core-linux-arm64-musl",
+        "@takumi-rs/core-linux-x64-gnu",
+        "@takumi-rs/core-linux-x64-musl",
+        "@takumi-rs/core-win32-arm64-msvc",
+        "@takumi-rs/core-win32-x64-msvc"
+      ]
+    },
+    "@takumi-rs/helpers@0.29.8": {
+      "integrity": "sha512-a9jfiqcjaUVkTaMN9IKtCJtJzWZdv9LXSFWtaOM8EwTruyjk7sSJVjlYKM26a1XRPPZaWZGBN+4EQT4EgCAsUA=="
     },
     "@ts-morph/common@0.27.0": {
       "integrity": "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==",
···
           "jsr:@slices/client@~0.1.0-alpha.3",
           "jsr:@std/assert@^1.0.14",
           "jsr:@std/http@^1.0.20",
+          "npm:@takumi-rs/core@~0.29.8",
+          "npm:@takumi-rs/helpers@~0.29.8",
           "npm:clsx@^2.1.1",
           "npm:lucide-preact@0.544",
           "npm:preact-render-to-string@^6.5.13",

frontend/deno.json

···
     "dev": "deno run -A --env-file=.env --watch src/main.ts"
   },
   "compilerOptions": {
-    "jsx": "precompile",
+    "jsx": "react-jsx",
     "jsxImportSource": "preact"
   },
   "imports": {
···
     "@std/http": "jsr:@std/http@^1.0.20",
     "clsx": "npm:clsx@^2.1.1",
     "tailwind-merge": "npm:tailwind-merge@^2.5.5",
-    "lucide-preact": "npm:lucide-preact@^0.544.0"
+    "lucide-preact": "npm:lucide-preact@^0.544.0",
+    "@takumi-rs/helpers": "npm:@takumi-rs/helpers@^0.29.8",
+    "@takumi-rs/core": "npm:@takumi-rs/core@^0.29.8"
   }
 }

frontend/src/features/landing/handlers.tsx

···
 import { renderHTML } from "../../utils/render.tsx";
 import { withAuth } from "../../routes/middleware.ts";
 import { LandingPage } from "./templates/LandingPage.tsx";
+import { LandingOGImage } from "./templates/fragments/LandingOGImage.tsx";
 import { publicClient } from "../../config.ts";
 import { getTimeline } from "../../lib/api.ts";
+import { fromJsx } from "@takumi-rs/helpers/jsx";
+import { Renderer } from "@takumi-rs/core";
 
 async function handleLandingPage(req: Request): Promise<Response> {
   const context = await withAuth(req);
+  const url = new URL(req.url);
 
   // Fetch timeline slices
   const slices = await getTimeline(publicClient, 20);
 
+  // Build OG image URL
+  const ogImageUrl = `${url.origin}/og-image`;
+
   return renderHTML(
-    <LandingPage
-      currentUser={context.currentUser}
-      slices={slices}
-    />,
+    await LandingPage({
+      currentUser: context.currentUser,
+      slices: slices,
+      ogImage: ogImageUrl,
+    }),
     {
-      title: "Slice - AT Protocol Data Management Platform",
+      title: "Slice - Build AT Protocol AppViews in minutes, not months",
       description:
-        "Build, manage, and integrate with AT Protocol data effortlessly. Create custom lexicons, sync records, and generate TypeScript clients.",
+        "The complete backend platform for AT Protocol developers. Deploy schemas, query indexed data, authenticate users. Everything you need to ship your AppView.",
     },
   );
 }
 
+async function handleLandingOGImage(req: Request): Promise<Response> {
+  try {
+    // Set up fonts for Takumi
+    const fontBuffer = await Deno.readFile("./src/fonts/InterVariable.ttf");
+
+    const fonts = [
+      {
+        name: "Inter",
+        data: fontBuffer,
+        style: "normal" as const,
+        weight: 400,
+      },
+    ];
+
+    const renderer = new Renderer({
+      //@ts-ignore Takumi types are wrong for some reason
+      fonts,
+    });
+
+    // Generate landing page OG image using Takumi
+    const node = await fromJsx(<LandingOGImage />);
+
+    // Render to PNG using Takumi
+    const pngBuffer = await renderer.renderAsync(node, {
+      width: 1200,
+      height: 630,
+      format: "png",
+    });
+
+    return new Response(pngBuffer, {
+      headers: {
+        "Content-Type": "image/png",
+        "Cache-Control": "public, max-age=3600",
+      },
+    });
+  } catch (error) {
+    return new Response(`Error generating image: ${error.message}`, { status: 500 });
+  }
+}
+
 export const landingRoutes: Route[] = [
   {
     pattern: new URLPattern({ pathname: "/" }),
     handler: handleLandingPage,
+  },
+  {
+    pattern: new URLPattern({ pathname: "/og-image" }),
+    handler: handleLandingOGImage,
   },
 ];

frontend/src/features/landing/templates/LandingPage.tsx

···
 import { Layout } from "../../../shared/fragments/Layout.tsx";
 import { PageHeader } from "../../../shared/fragments/PageHeader.tsx";
 import { SliceCard } from "../../../shared/fragments/SliceCard.tsx";
+import { Button } from "../../../shared/fragments/Button.tsx";
+import { Text } from "../../../shared/fragments/Text.tsx";
+import { codeToHtml } from "jsr:@shikijs/shiki";
 import type { AuthenticatedUser } from "../../../routes/middleware.ts";
 import type { NetworkSlicesSliceDefsSliceView } from "../../../client.ts";
+import { BarChart3, RotateCcw, Users, Search } from "lucide-preact";
 
 interface LandingPageProps {
   currentUser?: AuthenticatedUser;
   slices?: NetworkSlicesSliceDefsSliceView[];
+  ogImage?: string;
 }
 
-export function LandingPage({
+export async function LandingPage({
   currentUser,
   slices = [],
+  ogImage,
 }: LandingPageProps = {}) {
+  // Generate code example for Type-Safe APIs feature
+  const codeExample = `// Generated from your lexicon
+import { client } from './generated-client';
+
+// Type-safe queries with IntelliSense
+const resp = await client.com.recordcollector.album.getRecords({
+  where: {
+    artist: { eq: "Nirvana" },
+    genre: { contains: "grunge" },
+    condition: { in: ["Mint", "Near Mint"] }
+  },
+  sortBy: [{ field: "releaseDate", direction: "desc" }],
+  limit: 50
+});
+
+// Fully typed response
+resp.records.forEach(album => {
+  console.log(album.value.title); // ✅ TypeScript knows this exists
+  console.log(album.value.artist); // ✅ Autocomplete works
+  console.log(album.value.invalidField); // ❌ Type error!
+});`;
+
+  const highlightedCode = await codeToHtml(codeExample, {
+    lang: "typescript",
+    themes: {
+      light: "github-light",
+      dark: "github-dark",
+    },
+  });
   return (
     <Layout
-      title="Slice - AT Protocol Data Management Platform"
-      description="Build, manage, and integrate with AT Protocol data effortlessly. Create custom lexicons, sync records, and generate TypeScript clients."
+      title="Slice - Build AT Protocol AppViews in minutes, not months"
+      description="The complete backend platform for AT Protocol developers. Deploy schemas, query indexed data, authenticate users. Everything you need to ship your AppView."
+      ogImage={ogImage}
       currentUser={currentUser}
     >
       <div className="px-4 py-8">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <Text as="h1" size="3xl" className="text-4xl md:text-6xl font-bold text-zinc-900 dark:text-white mb-6">
+            Build AT Protocol AppViews<a href="https://bsky.app/profile/pfrazee.com/post/3lyucxfxq622w" className="text-blue-600 dark:text-blue-400 text-4xl align-super no-underline hover:underline" target="_blank" rel="noopener noreferrer">*</a><br />
+            <span className="text-blue-600 dark:text-blue-400">in minutes, not months.</span>
+          </Text>
+          <Text as="p" size="xl" variant="secondary" className="mb-8 max-w-2xl mx-auto">
+            The complete backend platform for{" "}
+            <a href="https://atproto.com" className="text-blue-600 dark:text-blue-400 underline">AT Protocol</a> developers.
+            Deploy schemas, query indexed data, authenticate users.
+          </Text>
+          <Text as="p" size="lg" variant="muted" className="mb-8 max-w-3xl mx-auto">
+            Skip the infrastructure. Focus on your app logic. Everything you need
+            to ship production AppViews with type-safe APIs and automatic indexing.
+          </Text>
+          <Button variant="blue" size="lg" href="/waitlist">
+            Ship your AppView →
+          </Button>
+        </div>
+
+        {/* Features Section */}
+        <div className="mb-16">
+          <div className="max-w-6xl mx-auto">
+
+            {/* Feature 1: Auto-Indexing Engine */}
+            <div className="grid md:grid-cols-2 gap-12 items-center mb-20">
+              <div>
+                <Text as="h2" size="3xl" className="font-bold text-zinc-900 dark:text-white mb-4">
+                  Auto-Indexing Engine
+                </Text>
+                <Text as="p" size="xl" className="text-blue-600 dark:text-blue-400 mb-6">
+                  Real-time data sync from the AT Protocol network.
+                </Text>
+                <Text as="p" size="lg" variant="muted" className="leading-relaxed">
+                  Automatically discover and index records matching your lexicons. Connected to the firehose
+                  to keep your data fresh.
+                </Text>
+              </div>
+              <div className="bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700">
+                <img
+                  src="/static/grain-dashboard-web.png?v=2"
+                  alt="Grain dashboard showing auto-indexing features with 4,400 records, 8 collections, and 254 actors"
+                  className="w-full h-auto block dark:hidden"
+                />
+                <img
+                  src="/static/grain-dashboard-dark-web.png?v=2"
+                  alt="Grain dashboard showing auto-indexing features with 4,400 records, 8 collections, and 254 actors"
+                  className="w-full h-auto hidden dark:block"
+                />
+              </div>
+            </div>
+
+            {/* Feature 2: Type-Safe Collection APIs */}
+            <div className="grid md:grid-cols-2 gap-12 items-center mb-20">
+              <div className="bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 md:order-first overflow-hidden">
+                <div
+                  className="text-sm overflow-x-auto [&_pre]:p-4 [&_pre]:m-0 [&_pre]:min-w-full [&_pre]:w-max"
+                  dangerouslySetInnerHTML={{ __html: highlightedCode }}
+                />
+              </div>
+              <div>
+                <Text as="h2" size="3xl" className="font-bold text-zinc-900 dark:text-white mb-4">
+                  Type-Safe APIs
+                </Text>
+                <Text as="p" size="xl" className="text-blue-600 dark:text-blue-400 mb-6">
+                  Generated clients with collection methods.
+                </Text>
+                <Text as="p" size="lg" variant="muted" className="leading-relaxed">
+                  From lexicon to production code in seconds. Get fully-typed getRecords(), createRecord(),
+                  updateRecord(), and deleteRecord() methods with filtering, sorting, and pagination.
+                  Complete with project templates for popular frameworks and CLI tools to scaffold your AppView.
+                  Complex infrastructure made simple.
+                </Text>
+              </div>
+            </div>
+
+            {/* Feature 3: Lexicon Management */}
+            <div className="grid md:grid-cols-2 gap-12 items-center mb-20">
+              <div>
+                <Text as="h2" size="3xl" className="font-bold text-zinc-900 dark:text-white mb-4">
+                  Schema Management
+                </Text>
+                <Text as="p" size="xl" className="text-blue-600 dark:text-blue-400 mb-6">
+                  Define once, query everywhere.
+                </Text>
+                <Text as="p" size="lg" variant="muted" className="leading-relaxed">
+                  Configure lexicons that instantly become queryable collections. Built-in
+                  validation ensures your schemas work correctly from day one. Deploy and
+                  start querying immediately.
+                </Text>
+              </div>
+              <div className="bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700">
+                <img
+                  src="/static/grain-lexicon-web.png?v=2"
+                  alt="Grain lexicon editor showing schema definitions and validation"
+                  className="w-full h-auto block dark:hidden"
+                />
+                <img
+                  src="/static/grain-lexicon-dark-web.png?v=2"
+                  alt="Grain lexicon editor showing schema definitions and validation"
+                  className="w-full h-auto hidden dark:block"
+                />
+              </div>
+            </div>
+
+            {/* Feature 4: OAuth Integration */}
+            <div className="grid md:grid-cols-2 gap-12 items-center mb-20">
+              <div className="bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700 md:order-first">
+                <img
+                  src="/static/grain-oauth-web.png?v=2"
+                  alt="Grain OAuth client configuration showing token management and authentication flows"
+                  className="w-full h-auto block dark:hidden"
+                />
+                <img
+                  src="/static/grain-oauth-dark-web.png?v=2"
+                  alt="Grain OAuth client configuration showing token management and authentication flows"
+                  className="w-full h-auto hidden dark:block"
+                />
+              </div>
+              <div>
+                <Text as="h2" size="3xl" className="font-bold text-zinc-900 dark:text-white mb-4">
+                  User Authentication
+                </Text>
+                <Text as="p" size="xl" className="text-blue-600 dark:text-blue-400 mb-6">
+                  OAuth flows that just work.
+                </Text>
+                <Text as="p" size="lg" variant="muted" className="leading-relaxed">
+                  Production-ready authentication with OAuth 2.0 PKCE for web apps and
+                  Device Code Auth for CLI tools. Automatic token management, refresh handling,
+                  and secure session storage. Focus on features, not auth infrastructure.
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        {/* Production-Ready Operations */}
+        <div className="mb-16">
+          <div className="text-center mb-12">
+            <Text as="h2" size="2xl" className="font-bold text-zinc-900 dark:text-white mb-4">
+              Production-Ready Operations
+            </Text>
+            <Text as="p" size="lg" variant="secondary" className="max-w-2xl mx-auto">
+              Everything you need to monitor, manage, and scale your AppView in production.
+            </Text>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+            {/* Jetstream Logs */}
+            <div className="bg-white dark:bg-zinc-800 rounded-lg p-6 border border-zinc-200 dark:border-zinc-700">
+              <div className="w-8 h-8 text-blue-600 dark:text-blue-400 mb-3">
+                <BarChart3 size={32} />
+              </div>
+              <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+                Jetstream Logs
+              </Text>
+              <Text variant="muted" size="sm">
+                Real-time connection monitoring and detailed event logs for debugging and observability.
+              </Text>
+            </div>
+
+            {/* Data Backfill */}
+            <div className="bg-white dark:bg-zinc-800 rounded-lg p-6 border border-zinc-200 dark:border-zinc-700">
+              <div className="w-8 h-8 text-green-600 dark:text-green-400 mb-3">
+                <RotateCcw size={32} />
+              </div>
+              <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+                Data Backfill
+              </Text>
+              <Text variant="muted" size="sm">
+                Historical data synchronization and migration tools to populate your AppView from scratch.
+              </Text>
+            </div>
+
+            {/* Waitlist Management */}
+            <div className="bg-white dark:bg-zinc-800 rounded-lg p-6 border border-zinc-200 dark:border-zinc-700">
+              <div className="w-8 h-8 text-orange-600 dark:text-orange-400 mb-3">
+                <Users size={32} />
+              </div>
+              <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+                Waitlist Management
+              </Text>
+              <Text variant="muted" size="sm">
+                User onboarding and access control workflows for managing early access and beta testing.
+              </Text>
+            </div>
+
+            {/* Record Explorer */}
+            <div className="bg-white dark:bg-zinc-800 rounded-lg p-6 border border-zinc-200 dark:border-zinc-700">
+              <div className="w-8 h-8 text-purple-600 dark:text-purple-400 mb-3">
+                <Search size={32} />
+              </div>
+              <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+                Record Explorer
+              </Text>
+              <Text variant="muted" size="sm">
+                Visual query interface with advanced filtering, search, and data exploration capabilities.
+              </Text>
+            </div>
+
+          </div>
+        </div>
+
+        {/* Social Platform Section */}
+        <div className="mb-16">
+          <div className="text-center mb-12">
+            <Text as="h2" size="2xl" className="font-bold text-zinc-900 dark:text-white mb-4">
+              Built for Collaboration
+            </Text>
+            <Text as="p" size="lg" variant="secondary" className="max-w-2xl mx-auto">
+              Share lexicons, discover AppViews, and learn from the community timeline.
+            </Text>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+            {/* Community Timeline */}
+            <div className="text-center">
+              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <div className="w-6 h-6 text-blue-600 dark:text-blue-400">
+                  <BarChart3 size={24} />
+                </div>
+              </div>
+              <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+                Community Timeline
+              </Text>
+              <Text variant="muted" size="sm">
+                See what other developers are building. Get inspired by new lexicons and AppView implementations.
+              </Text>
+            </div>
+
+            {/* Lexicon Sharing */}
+            <div className="text-center">
+              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <div className="w-6 h-6 text-green-600 dark:text-green-400">
+                  <Users size={24} />
+                </div>
+              </div>
+              <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+                Lexicon Discovery
+              </Text>
+              <Text variant="muted" size="sm">
+                Browse and fork community lexicons. Build on proven schemas instead of starting from scratch.
+              </Text>
+            </div>
+
+            {/* Knowledge Sharing */}
+            <div className="text-center">
+              <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <div className="w-6 h-6 text-purple-600 dark:text-purple-400">
+                  <Search size={24} />
+                </div>
+              </div>
+              <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+                Learn & Share
+              </Text>
+              <Text variant="muted" size="sm">
+                Documentation, tutorials, and best practices shared by the community. Level up your AT Protocol skills.
+              </Text>
+            </div>
+          </div>
+        </div>
+
         <PageHeader title="Timeline" />
 
         {slices.length > 0 ? (

frontend/src/features/landing/templates/fragments/LandingOGImage.tsx

···
+// @ts-nocheck
+interface LandingOGImageProps {
+  title?: string;
+  subtitle?: string;
+}
+
+export const LandingOGImage = ({
+  title = "Build AT Protocol AppViews",
+  subtitle = "in minutes, not months.",
+}: LandingOGImageProps) => (
+  <div
+    style={{
+      width: "100%",
+      height: "100%",
+      backgroundColor: "#18181b", // zinc-900 (dark mode background)
+      display: "flex",
+      flexDirection: "column",
+      padding: "80px",
+      fontFamily: "Inter",
+      color: "#ffffff",
+      justifyContent: "center",
+    }}
+  >
+    {/* Slices logo */}
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "16px",
+        marginBottom: "48px",
+      }}
+    >
+      <svg
+        viewBox="0 0 60 60"
+        style={{ width: "48px", height: "48px" }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <linearGradient id="board1" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style={{ stopColor: "#FF6347", stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: "#FF4500", stopOpacity: 1 }} />
+          </linearGradient>
+          <linearGradient id="board2" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style={{ stopColor: "#00CED1", stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: "#4682B4", stopOpacity: 1 }} />
+          </linearGradient>
+        </defs>
+        <g transform="translate(30, 30)">
+          <ellipse cx="0" cy="-12" rx="25" ry="8" fill="url(#board1)" />
+          <ellipse cx="0" cy="0" rx="28" ry="8" fill="url(#board2)" />
+          <ellipse cx="0" cy="12" rx="22" ry="8" fill="#32CD32" />
+        </g>
+      </svg>
+      <div
+        style={{
+          color: "#60a5fa", // blue-400 (dark mode blue)
+          fontSize: "28px",
+          fontWeight: "bold",
+          letterSpacing: "2px",
+        }}
+      >
+        Slices
+      </div>
+    </div>
+
+    {/* Main headline */}
+    <div
+      style={{
+        fontSize: "64px",
+        fontWeight: "bold",
+        color: "#ffffff",
+        lineHeight: 1.1,
+        marginBottom: "24px",
+      }}
+    >
+      {title}
+    </div>
+
+    {/* Subtitle */}
+    <div
+      style={{
+        fontSize: "48px",
+        fontWeight: "bold",
+        color: "#60a5fa", // blue-400 (dark mode blue)
+        marginBottom: "64px",
+      }}
+    >
+      {subtitle}
+    </div>
+
+    {/* Feature highlights */}
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "48px",
+        fontSize: "18px",
+        color: "#a1a1aa", // zinc-400
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <div
+          style={{
+            width: "8px",
+            height: "8px",
+            backgroundColor: "#10b981", // emerald-500
+            borderRadius: "50%",
+          }}
+        />
+        <span>Auto-Indexing</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <div
+          style={{
+            width: "8px",
+            height: "8px",
+            backgroundColor: "#f59e0b", // amber-500
+            borderRadius: "50%",
+          }}
+        />
+        <span>Type-Safe APIs</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <div
+          style={{
+            width: "8px",
+            height: "8px",
+            backgroundColor: "#8b5cf6", // violet-500
+            borderRadius: "50%",
+          }}
+        />
+        <span>OAuth Integration</span>
+      </div>
+    </div>
+
+    {/* URL */}
+    <div
+      style={{
+        position: "absolute",
+        bottom: "40px",
+        right: "80px",
+        fontSize: "16px",
+        color: "#71717a", // zinc-500
+        fontFamily: "Inter",
+      }}
+    >
+      @slices.network
+    </div>
+  </div>
+);

frontend/src/features/slices/lexicon/templates/SliceLexiconPage.tsx

···
 import { EmptyState } from "../../../../shared/fragments/EmptyState.tsx";
 import { Button } from "../../../../shared/fragments/Button.tsx";
 import { Card } from "../../../../shared/fragments/Card.tsx";
+import { Text } from "../../../../shared/fragments/Text.tsx";
 import { LexiconsList } from "./fragments/LexiconsList.tsx";
-import { FileCode } from "lucide-preact";
+import { FileCode, Info } from "lucide-preact";
 import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 import type {
   NetworkSlicesSliceDefsSliceView,
···
   currentUser,
   hasSliceAccess,
 }: SliceLexiconPageProps) {
+  const banner = !hasSliceAccess ? (
+    <div className="mb-6 bg-white dark:bg-zinc-800 rounded-lg p-6 border border-zinc-200 dark:border-zinc-700">
+      <div className="w-8 h-8 text-blue-600 dark:text-blue-400 mb-3">
+        <Info size={32} />
+      </div>
+      <Text as="h3" size="lg" className="font-semibold text-zinc-900 dark:text-white mb-2">
+        Full Slice Profiles Coming Soon
+      </Text>
+      <Text as="p" variant="muted" size="sm" className="mb-4">
+        Want to see metrics, sync status, and API endpoints? Get early access when they launch.
+      </Text>
+      <Button variant="blue" size="sm" href="/waitlist">
+        Join waitlist
+      </Button>
+    </div>
+  ) : null;
+
   return (
     <SlicePage
       slice={slice}
···
       currentUser={currentUser}
       hasSliceAccess={hasSliceAccess}
       title={`${slice.name} - Lexicons`}
+      banner={banner}
     >
       <div>
         {hasSliceAccess && (
···
             )}
           </Card.Content>
         </Card>
+
       </div>
 
       <div id="modal-container"></div>

frontend/src/features/slices/shared/fragments/SlicePage.tsx

···
   hasSliceAccess?: boolean;
   title?: string;
   headerActions?: preact.ComponentChildren;
+  banner?: preact.ComponentChildren;
   children: preact.ComponentChildren;
 }
 
···
   hasSliceAccess,
   title,
   headerActions,
+  banner,
   children,
 }: SlicePageProps) {
   const pageTitle = title || slice.name;
···
         <PageHeader title={slice.name}>
           {headerActions}
         </PageHeader>
+
+        {banner}
 
         {currentTab && (
           <SliceTabs

frontend/src/features/waitlist/handlers.tsx

···
   if (SLICE_URI) {
     try {
       recentRequests = await getHydratedWaitlistRequests(publicClient, SLICE_URI);
-      // Limit to most recent 50 and reverse to show newest first
-      recentRequests = recentRequests.slice(0, 50);
+      // Limit to most recent 10 and reverse to show newest first
+      recentRequests = recentRequests.slice(0, 10);
     } catch (error) {
       console.error("Failed to fetch recent waitlist requests:", error);
       // Continue without recent requests if fetch fails

frontend/src/features/waitlist/templates/fragments/WaitlistForm.tsx

···
 import { Card } from "../../../../shared/fragments/Card.tsx";
 import { Text } from "../../../../shared/fragments/Text.tsx";
 import { FlashMessage } from "../../../../shared/fragments/FlashMessage.tsx";
-import { ActorAvatar } from "../../../../shared/fragments/ActorAvatar.tsx";
+import { AvatarStack } from "../../../../shared/fragments/AvatarStack.tsx";
 import type { NetworkSlicesWaitlistDefsRequestView } from "../../../../client.ts";
 
 interface WaitlistFormProps {
···
           <Text as="p" size="sm" variant="muted" className="mb-3">
             Join {recentRequests.length} others who are waiting
           </Text>
-          <div className="flex flex-wrap justify-center gap-1">
-            {recentRequests.slice(0, 20).map((request, index) => (
-              <div key={index} className="relative">
-                <ActorAvatar
-                  profile={request.profile || { handle: "user" }}
-                  size={24}
-                  className="border border-white dark:border-zinc-800"
-                />
-              </div>
-            ))}
-            {recentRequests.length > 20 && (
-              <div className="w-6 h-6 bg-zinc-100 dark:bg-zinc-800 border border-white dark:border-zinc-800 rounded-full flex items-center justify-center">
-                <Text size="xs" variant="muted">
-                  +{recentRequests.length - 20}
-                </Text>
-              </div>
-            )}
-          </div>
+          <AvatarStack requests={recentRequests} maxDisplay={20} size={24} />
         </div>
       )}
 

frontend/src/features/waitlist/templates/fragments/WaitlistSuccess.tsx

···
 import { Card } from "../../../../shared/fragments/Card.tsx";
 import { Text } from "../../../../shared/fragments/Text.tsx";
 import { Link } from "../../../../shared/fragments/Link.tsx";
-import { ActorAvatar } from "../../../../shared/fragments/ActorAvatar.tsx";
+import { AvatarStack } from "../../../../shared/fragments/AvatarStack.tsx";
 import { Check } from "lucide-preact";
 import type { NetworkSlicesWaitlistDefsRequestView } from "../../../../client.ts";
 
···
           <Text as="p" size="sm" variant="muted" className="mb-3">
             You've joined {recentRequests.length} others
           </Text>
-          <div className="flex flex-wrap justify-center gap-1">
-            {recentRequests.slice(0, 30).map((request, index) => (
-              <div key={index} className="relative">
-                <ActorAvatar
-                  profile={request.profile || { handle: "user" }}
-                  size={32}
-                  className="border border-white dark:border-zinc-800"
-                />
-              </div>
-            ))}
-            {recentRequests.length > 30 && (
-              <div className="w-8 h-8 bg-zinc-100 dark:bg-zinc-800 border border-white dark:border-zinc-800 rounded-full flex items-center justify-center">
-                <Text size="xs" variant="muted">
-                  +{recentRequests.length - 30}
-                </Text>
-              </div>
-            )}
-          </div>
+          <AvatarStack requests={recentRequests} maxDisplay={30} size={32} />
         </div>
       )}
 

frontend/src/routes/mod.ts

···
 } from "../features/slices/mod.ts";
 import { settingsRoutes } from "../features/settings/handlers.tsx";
 import { docsRoutes } from "../features/docs/handlers.tsx";
+import { staticRoutes } from "./static.ts";
 
 export const allRoutes: Route[] = [
+  // Static file serving (must come first to avoid conflicts)
+  ...staticRoutes,
+
   // Landing page (public, no auth required)
   ...landingRoutes,
 

frontend/src/routes/static.ts

···
+import type { Route } from "@std/http/unstable-route";
+import { serveDir } from "@std/http/file-server";
+
+async function handleStatic(req: Request): Promise<Response> {
+  const { pathname } = new URL(req.url);
+
+  if (pathname.startsWith("/static/")) {
+    return serveDir(req, {
+      fsRoot: "./src/assets",
+      urlRoot: "static",
+    });
+  }
+
+  return new Response("Not Found", { status: 404 });
+}
+
+export const staticRoutes: Route[] = [
+  {
+    pattern: new URLPattern({ pathname: "/static/*" }),
+    handler: handleStatic,
+  },
+];

frontend/src/shared/fragments/AvatarStack.tsx

···
+import { ActorAvatar } from "./ActorAvatar.tsx";
+import { Text } from "./Text.tsx";
+import { cn } from "../../utils/cn.ts";
+import type { NetworkSlicesWaitlistDefsRequestView } from "../../client.ts";
+
+interface AvatarStackProps {
+  requests: NetworkSlicesWaitlistDefsRequestView[];
+  maxDisplay?: number;
+  size?: number;
+  className?: string;
+}
+
+export function AvatarStack({
+  requests,
+  maxDisplay = 20,
+  size = 24,
+  className,
+}: AvatarStackProps) {
+  const displayedRequests = requests.slice(0, maxDisplay);
+  const remainingCount = requests.length - maxDisplay;
+  const overlapClass = size === 32 ? "-ml-2.5" : "-ml-2";
+
+  return (
+    <div className={cn("flex justify-center", className)}>
+      {displayedRequests.map((request, index) => (
+        <div
+          key={index}
+          className={cn(
+            "relative transition-transform duration-200 hover:scale-110 hover:z-10",
+            index > 0 && overlapClass
+          )}
+        >
+          <ActorAvatar
+            profile={request.profile || { handle: "user" }}
+            size={size}
+            className="border-2 border-white dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400 transition-colors duration-200"
+          />
+        </div>
+      ))}
+      {remainingCount > 0 && (
+        <div
+          className={cn(
+            "bg-zinc-100 dark:bg-zinc-800 border-2 border-white dark:border-zinc-800 rounded-full flex items-center justify-center transition-transform duration-200 hover:scale-110 hover:z-10",
+            size === 32 ? "w-8 h-8 -ml-2.5" : "w-6 h-6 -ml-2"
+          )}
+        >
+          <Text size="xs" variant="muted">
+            +{remainingCount}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/shared/fragments/Layout.tsx

···
 interface LayoutProps {
   title?: string;
   description?: string;
+  ogImage?: string;
   children: JSX.Element | JSX.Element[];
   currentUser?: AuthenticatedUser;
   showNavigation?: boolean;
···
 export function Layout({
   title = "Slices",
   description = "AT Protocol data management platform",
+  ogImage,
   children,
   currentUser,
   showNavigation = true,
···
         <meta property="og:type" content="website" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
+        {ogImage && <meta property="og:image" content={ogImage} />}
 
         {/* Twitter */}
         <meta property="twitter:card" content="summary_large_image" />
         <meta property="twitter:title" content={title} />
         <meta property="twitter:description" content={description} />
+        {ogImage && <meta property="twitter:image" content={ogImage} />}
         <script src="https://unpkg.com/htmx.org@1.9.10"></script>
         <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
         <script src="https://cdn.tailwindcss.com/3.4.1"></script>