feat(dashboard): compact landing page

Redesign the public homepage with a compact AgentState product layout, inline SVG visuals, scoped landing theme styles, and simplified homepage sections.\n\nCo-Authored-By: Duyet Le <me@duyet.net>\nCo-Authored-By: duyetbot <bot@duyet.net>

Author: duyet

packages/dashboard/public/landing/analytics.svg

@@ -14,7 +14,7 @@ import {
   MotionSection,
 } from "@/components/landing/motion";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
 type Feature = {
   title: string;
@@ -54,7 +54,7 @@ const features: readonly Feature[] = [
 export function Features() {
   return (
     <MotionSection
-      className="max-w-5xl mx-auto px-6 pb-20"
+      className="max-w-5xl mx-auto px-6 pb-14"
       animate="visible"
       initial="hidden"
       variants={landingContainer}
@@ -66,29 +66,29 @@ export function Features() {
             The primitives an agent product needs after the first conversation lands in production.
           </p>
         </MotionDiv>
-        <MotionDiv className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4" variants={landingContainer}>
+        <MotionDiv className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4" variants={landingContainer}>
           {features.map(({ title, badge, icon: Icon, description }) => (
             <MotionDiv
               className="h-full"
               key={title}
               variants={landingCard}
               whileHover={landingHover}
             >
-              <Card className="h-full">
+              <Card className="h-full" size="sm">
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
                     <span className="flex size-8 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                       <Icon aria-hidden="true" />
                     </span>
                     {title}
                   </CardTitle>
-                  <CardDescription>
-                    <Badge variant="secondary">{badge}</Badge>
-                  </CardDescription>
+                  <div className="flex flex-col gap-2">
+                    <Badge className="w-fit" variant="secondary">
+                      {badge}
+                    </Badge>
+                    <CardDescription>{description}</CardDescription>
+                  </div>
                 </CardHeader>
-                <CardContent>
-                  <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
-                </CardContent>
               </Card>
             </MotionDiv>
           ))}

packages/dashboard/public/landing/chatbot.svg

@@ -1,10 +1,4 @@
-import {
-  ArrowRightIcon,
-  DatabaseIcon,
-  HistoryIcon,
-  KeyRoundIcon,
-  MessageSquareIcon,
-} from "lucide-react";
+import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import {
   landingCard,
@@ -14,49 +8,27 @@ import {
   MotionDiv,
   MotionSection,
 } from "@/components/landing/motion";
+import { HeroConsole } from "@/components/landing/visuals";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-
-const overviewRows = [
-  { label: "Ingest", value: "POST /api/v1/conversations" },
-  { label: "Retrieve", value: "GET /api/v1/conversations/:id" },
-  { label: "Analyze", value: "GET /api/v1/analytics/summary" },
-] as const;
-
-const productSignals = [
-  { icon: MessageSquareIcon, label: "Conversation threads" },
-  { icon: DatabaseIcon, label: "D1-backed storage" },
-  { icon: HistoryIcon, label: "Cursor history" },
-  { icon: KeyRoundIcon, label: "API key controls" },
-] as const;
 
 export function Hero() {
   return (
     <MotionSection
       animate="visible"
-      className="max-w-5xl mx-auto px-6 py-16 sm:py-20"
+      className="max-w-5xl mx-auto px-6 py-12 sm:py-16"
       initial="hidden"
       variants={landingContainer}
     >
-      <div className="grid gap-8 lg:grid-cols-[1fr_24rem] lg:items-start">
-        <div className="flex flex-col gap-6">
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_30rem] lg:items-center">
+        <div className="flex flex-col gap-5">
           <MotionDiv className="flex flex-wrap gap-2" variants={landingItem}>
             <Badge variant="outline">REST API</Badge>
             <Badge variant="outline">Cloudflare D1</Badge>
             <Badge variant="outline">Agent memory</Badge>
           </MotionDiv>
           <MotionDiv className="flex flex-col gap-4" variants={landingItem}>
-            <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl md:text-6xl">
+            <h1 className="max-w-3xl text-5xl font-semibold tracking-tight text-balance sm:text-6xl md:text-7xl">
               AgentState
             </h1>
             <p className="max-w-2xl text-lg leading-relaxed text-pretty text-muted-foreground sm:text-xl">
@@ -82,65 +54,10 @@ export function Hero() {
               API reference
             </Button>
           </MotionDiv>
-          <MotionDiv className="grid gap-3 sm:grid-cols-2" variants={landingContainer}>
-            {productSignals.map(({ icon: Icon, label }) => (
-              <MotionDiv key={label} variants={landingCard} whileHover={landingHover}>
-                <Card size="sm">
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2">
-                      <span className="flex size-8 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-                        <Icon aria-hidden="true" />
-                      </span>
-                      {label}
-                    </CardTitle>
-                  </CardHeader>
-                </Card>
-              </MotionDiv>
-            ))}
-          </MotionDiv>
         </div>
 
-        <MotionDiv variants={landingCard} whileHover={landingHover}>
-          <Card>
-            <CardHeader>
-              <CardTitle>Operations overview</CardTitle>
-              <CardDescription>
-                One API surface for runtime memory and audit history.
-              </CardDescription>
-              <CardAction>
-                <Badge variant="secondary">Live</Badge>
-              </CardAction>
-            </CardHeader>
-            <CardContent className="flex flex-col gap-4">
-              {overviewRows.map((row) => (
-                <div key={row.value} className="flex flex-col gap-1">
-                  <div className="flex items-center justify-between gap-3">
-                    <span className="text-sm font-medium">{row.label}</span>
-                    <Badge variant="outline">v1</Badge>
-                  </div>
-                  <code className="truncate rounded-md bg-muted px-3 py-2 font-mono text-sm text-muted-foreground">
-                    {row.value}
-                  </code>
-                </div>
-              ))}
-              <Separator />
-              <div className="grid grid-cols-2 gap-3">
-                <div className="flex flex-col gap-1">
-                  <span className="text-sm font-medium">Memory API</span>
-                  <span className="text-sm text-muted-foreground">Store and retrieve context</span>
-                </div>
-                <div className="flex flex-col gap-1">
-                  <span className="text-sm font-medium">Ops dashboard</span>
-                  <span className="text-sm text-muted-foreground">Monitor usage and exports</span>
-                </div>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <p className="text-sm text-muted-foreground">
-                Built for agents that need stable memory across deploys, sessions, and frameworks.
-              </p>
-            </CardFooter>
-          </Card>
+        <MotionDiv variants={landingCard} whileHover={landingHover} whileTap={{ scale: 0.99 }}>
+          <HeroConsole />
         </MotionDiv>
       </div>
     </MotionSection>