website: Add Electric Agents app landing page

website/.vitepress/theme/components/MegaNav.vue

@@ -89,6 +89,14 @@ const NAV = [
     },
   },
   '|',
+  // App sits in its own visual group between the infra products
+  // (Agents / Streams / Sync) and the cloud / pricing cluster, with a
+  // divider on each side. It's neither an infra primitive nor cloud
+  // infrastructure — it's the desktop + mobile client surface for the
+  // whole platform, so it gets its own slot in the bar. Plain link
+  // (no dropdown) because the page is self-contained.
+  { id: 'app', label: 'App', link: '/app' },
+  '|',
   {
     id: 'cloud',
     label: 'Cloud',
@@ -173,6 +181,7 @@ const activeId = computed(() => {
   if (p.startsWith('/agents') || p.startsWith('/docs/agents')) return 'agents'
   if (p.startsWith('/streams') || p.startsWith('/docs/streams')) return 'streams'
   if (p.startsWith('/sync') || p.startsWith('/docs/sync')) return 'sync'
+  if (p.startsWith('/app')) return 'app'
   if (p.startsWith('/cloud')) return 'cloud'
   if (p.startsWith('/pricing')) return 'pricing'
   if (p.startsWith('/blog')) return 'blog'

website/.vitepress/theme/components/MegaNavMobile.vue

@@ -39,6 +39,8 @@ const NAV = [
     ],
   },
   '|',
+  { id: 'app', label: 'App', link: '/app' },
+  '|',
   {
     id: 'cloud',
     label: 'Cloud',

website/package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "@electric-sql/pglite": "0.4.5",
     "@electric-sql/pglite-repl": "0.3.5",
+    "lucide-vue-next": "^0.561.0",
     "posthog-js": "^1.236.4"
   }
 }

website/src/components/app-download/AdPlaceholder.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/* Placeholder block for the /app page rewrite.
+
+   Drops a styled, dashed-border rectangle into a section as a stand-in
+   for content (text + cards + screenshots) that lands in later phases
+   of the rewrite. Mirrors the visual language of the rest of the
+   landing pages (rounded border, soft bg, mono label) so that
+   placeholders read as deliberate scaffolding rather than as broken
+   content if a reviewer browses the page mid-PR.
+
+   Each placeholder carries a `data-placeholder` attribute that names
+   the section / asset slot — useful both for reviewers reading the
+   diff and for grepping later when assets land. Swap each placeholder
+   for the real content one section at a time; the surrounding chrome
+   doesn't change. */
+defineProps<{
+  /** Short label rendered inside the placeholder and written to the
+   *  `data-placeholder` attribute. Two conventions in use today:
+   *  - **Section slot** — e.g. `§3 — Three ways to use it`. Use when
+   *    the placeholder stands in for an entire section's content
+   *    (cards, copy, scenario grid, etc.) that lands in a later
+   *    phase.
+   *  - **Asset filename** — e.g. `desktop-hero.png`. Use when the
+   *    placeholder stands in for a specific image / SVG slot that
+   *    will be filled by a captured asset. The filename matches the
+   *    final asset path under `website/public/img/app/`. */
+  name: string
+  /** Optional CSS aspect-ratio (e.g. "16/9", "21/9"). When omitted,
+   *  the placeholder uses its content's intrinsic height with the
+   *  shared `min-height` floor. */
+  aspect?: string
+  /** Optional second-line caption explaining what eventually lives
+   *  in this slot. Kept short — full intent lives in the plan doc. */
+  sublabel?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="ad-placeholder"
+    :data-placeholder="name"
+    :style="aspect ? { aspectRatio: aspect } : undefined"
+  >
+    <span class="ad-placeholder-label mono">{{ name }}</span>
+    <span v-if="sublabel" class="ad-placeholder-sublabel">{{ sublabel }}</span>
+  </div>
+</template>
+
+<style scoped>
+.ad-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 40px 24px;
+  min-height: 200px;
+  width: 100%;
+  border: 1.5px dashed
+    color-mix(in srgb, var(--vp-c-text-3) 45%, var(--vp-c-divider));
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--vp-c-bg-soft) 55%, transparent);
+  color: var(--vp-c-text-3);
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.ad-placeholder-label {
+  font-size: 13px;
+  letter-spacing: 0.02em;
+  color: var(--vp-c-text-2);
+  word-break: break-word;
+  max-width: 640px;
+}
+
+.ad-placeholder-sublabel {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--vp-c-text-3);
+  max-width: 520px;
+}
+</style>