From ae30de907422f5b5d65a164f68f68f7d4bfcb606 Mon Sep 17 00:00:00 2001 From: mind-apivessa Date: Thu, 3 Sep 2026 18:05:12 -0400 Subject: [PATCH 1/2] Polish homepage, demo cards, and snapshot download box Rename to "Base Developer Console", match vibenet page padding, add demo card icons, tighten section spacing, unify selected-state ring style, and clean up unused Explore section. Co-Authored-By: Claude Opus 4.6 --- app/components/AppShell.tsx | 42 ++++---- app/page.tsx | 101 +++++------------- app/snapshots/SnapshotDownloadBox.tsx | 22 +--- app/vibenet/demos/DemoCard.tsx | 7 +- app/vibenet/demos/_shared/DemoGate.tsx | 6 +- .../account/components/CreateAccountModal.tsx | 8 +- app/vibenet/demos/catalogue.ts | 4 + app/vibenet/page.tsx | 4 +- public/account-illo.svg | 22 ++++ public/token-illo.svg | 20 ++++ 10 files changed, 109 insertions(+), 127 deletions(-) create mode 100644 public/account-illo.svg create mode 100644 public/token-illo.svg diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx index 4a39ba2e..b5cea20f 100644 --- a/app/components/AppShell.tsx +++ b/app/components/AppShell.tsx @@ -93,7 +93,7 @@ const styles: Record = { borderRadius: 999, padding: '1px 6px', }, - // Pinned below the sliding panes so Status/Support/Docs/Upgrades/Blog stay put + // Pinned below the sliding panes so Upgrades/Docs/Status/Support/Blog stay put // when a section sub-nav slides in. The switch sits on the last row beside Blog. sidebarFooter: { display: 'flex', @@ -574,6 +574,16 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC Upgrades + + + + + + + + Docs + + @@ -594,32 +604,18 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC Support - + - - + + - Docs + Blog -
- - - - - - - - Blog - - - {/* `role="switch"` rather than a plain button: the control reports a state - rather than firing an action, so screen readers announce "on"/"off" - against a stable label instead of the label itself changing. The switch - renders bare, so that name comes from `aria-label` — the visible track - is decorative and hidden from the tree. */} +
+ Developer Console
@@ -89,56 +70,22 @@ export default async function Home() { {mainnetSnapshot ? ( -
-
- Sync a Node Faster - - Grab the latest Base Mainnet archive snapshot, or customize your own. - +
+
+
+ Snapshots + + Sync a node from the latest Base Mainnet archive snapshot, or customize your own. + +
+
) : null} -
- Explore -
- {SURFACES.map((surface) => ( - - ))} -
-
); } - -function SurfaceCard({ surface }: { surface: Surface }) { - if (!surface.enabled) { - return ( - -
- {surface.label} - - Soon - -
- - {surface.description} - - - ); - } - - return ( - - {surface.label} - - {surface.description} - - - ); -} diff --git a/app/snapshots/SnapshotDownloadBox.tsx b/app/snapshots/SnapshotDownloadBox.tsx index ca6f7a5b..3344d093 100644 --- a/app/snapshots/SnapshotDownloadBox.tsx +++ b/app/snapshots/SnapshotDownloadBox.tsx @@ -1,4 +1,3 @@ -import { Button } from '../components/ui/Button'; import { Card } from '../components/ui/Card'; import { CommandLine } from '../components/ui/CommandLine'; import { Text } from '../components/ui/Text'; @@ -25,34 +24,23 @@ export function SnapshotDownloadBox({ snapshot }: { snapshot: Snapshot }) {
Mainnet Archive - - Full historical data + + Full Historical Data
{stats.map((stat) => (
- + {stat.label} - {stat.value} + {stat.value}
))}
-
- - -
+ ); } diff --git a/app/vibenet/demos/DemoCard.tsx b/app/vibenet/demos/DemoCard.tsx index 48487e46..38a4ed66 100644 --- a/app/vibenet/demos/DemoCard.tsx +++ b/app/vibenet/demos/DemoCard.tsx @@ -1,3 +1,5 @@ +import Image from 'next/image'; + import { Card, LinkCard } from '../../components/ui/Card'; import { cn } from '../../components/ui/cn'; import { Text } from '../../components/ui/Text'; @@ -33,6 +35,9 @@ export function DemoCard({ demo, className }: { demo: DemoEntry; className?: str function DemoCardBody({ demo }: { demo: DemoEntry }) { return ( <> + {demo.icon && ( + + )}
{demo.title} @@ -42,7 +47,7 @@ function DemoCardBody({ demo }: { demo: DemoEntry }) { ) : null}
- + {demo.summary}
diff --git a/app/vibenet/demos/_shared/DemoGate.tsx b/app/vibenet/demos/_shared/DemoGate.tsx index 9d40b7b8..db5ac81a 100644 --- a/app/vibenet/demos/_shared/DemoGate.tsx +++ b/app/vibenet/demos/_shared/DemoGate.tsx @@ -44,9 +44,9 @@ export function DemoGate({ return (
- - {title} - + + {title} + {description}