Docs landing & product-page rework

box/overall/quickstart.mdx

@@ -2,11 +2,13 @@
 title: "Quickstart"
 ---
 
+import { Catalog } from "/snippets/catalog.jsx";
+
 **Upstash Box lets you give your AI agents a computer.**
 
 Every Upstash Box is a **secure, isolated cloud container with an AI Agent built-in**. Spin up as many as you want in parallel. Each one includes a full environment with a filesystem, shell, git, and a runtime. Your agent can read files, write code, and execute tasks inside it.
 
-<Note>Upstash Box is in developer preview — APIs and pricing may change.</Note>
+<Note>Upstash Box is in developer preview. APIs and pricing may change.</Note>
 
 ### 1. Get your API key
 
@@ -244,3 +246,11 @@ Great example use cases:
     Boxes have Claude Code, Codex or OpenCode built-in.
   </Card>
 </CardGroup>
+
+## SDKs
+
+<Catalog product="box" type="sdk" cols={3} />
+
+## Guides
+
+<Catalog product="box" type="guide" cols={3} />

introduction.mdx

@@ -1,52 +1,24 @@
 ---
 title: Get Started
+description: "Serverless data and messaging for developers: Redis, Vector, QStash, Workflow, Search, and Box, with SDKs, integrations, and a full-featured console."
+mode: frame
 ---
 
-<CardGroup cols={2}>
-  <Card title="Serverless Redis" href="/redis/overall/getstarted">
-    Create a Redis Database within seconds
-  </Card>
-  <Card title="Serverless Vector" href="/vector/overall/getstarted">
-    Create a Vector Database for AI & LLMs
-  </Card>
-  <Card title="QStash" href="/qstash/overall/getstarted">
-    Publish your first message
-  </Card>
-  <Card title="Upstash Workflow" href="/workflow/getstarted">
-    Write durable serverless functions
-  </Card>
-  <Card title="Upstash Box" href="/box/overall/quickstart">
-    Run AI agents and code in secure sandboxes
-  </Card>
-</CardGroup>
+import { Hero, SectionHead, ProductGrid, AgentResources, Concepts, Community } from "/snippets/landing.jsx";
 
-## Concepts
+<Hero />
 
-<CardGroup cols={2}>
-  <Card title="Serverless" href="/common/concepts/serverless">
-    Upstash is serverless. You don't need to provision any infrastructure. Just
-    create a database and start using it.
-  </Card>
-  <Card title="Scale to Zero" href="/common/concepts/scale-to-zero">
-    Price scales to zero. You don't pay for idle or unused resources. You pay
-    only for what you use.
-  </Card>
-  <Card title="Global Replication" href="/common/concepts/global-replication">
-    Upstash Redis replicates your data for the best latency all over the world.
-  </Card>
-  <Card title="Access Anywhere" href="/common/concepts/access-anywhere">
-    Upstash REST APIs enable access from all types of runtimes.
-  </Card>
-</CardGroup>
+<div className="u-wrap">
+  <div id="products" />
+  <SectionHead eyebrow="Products" title="Pick a product and start building" />
+  <ProductGrid />
 
-## Get In touch
+  <SectionHead eyebrow="Agent Resources" title="Build with AI agents" sub="Tools to manage and build on Upstash from coding agents and LLMs." />
+  <AgentResources />
 
-<CardGroup cols={2}>
-  <Card title="X" icon="x-twitter" href="https://x.com/upstash">
-    Follow us on X for the latest news and updates.
-  </Card>
-  <Card title="Discord" icon="discord" href="https://upstash.com/discord">
-    Join our Discord Community and ask your questions to the team and other
-    developers.
-  </Card>
-</CardGroup>
+  <SectionHead eyebrow="Concepts" title="How Upstash works" />
+  <Concepts />
+
+  <SectionHead eyebrow="Community" title="Get in touch" />
+  <Community />
+</div>