diff --git a/app/components/CommandSnippet.tsx b/app/components/CommandSnippet.tsx
new file mode 100644
index 0000000..6d2633f
--- /dev/null
+++ b/app/components/CommandSnippet.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useState } from "react";
+
+type CommandSnippetProps = {
+  command: string;
+  label?: string;
+};
+
+export default function CommandSnippet({ command, label = "Command" }: CommandSnippetProps) {
+  const [copied, setCopied] = useState(false);
+
+  const copyCommand = async () => {
+    await navigator.clipboard.writeText(command);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="w-full max-w-full overflow-hidden rounded-lg border border-neutral-700 bg-black">
+      <div className="flex items-center justify-between border-b border-neutral-700 px-3 py-2">
+        <span className="text-xs font-medium uppercase tracking-wide text-gray-400">
+          {label}
+        </span>
+        <button
+          type="button"
+          onClick={copyCommand}
+          className="rounded border border-neutral-600 px-2 py-1 text-xs font-medium text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
+        >
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <div className="w-full max-w-full overflow-x-auto overscroll-x-contain px-3 py-3 [scrollbar-gutter:stable]">
+        <pre className="m-0 w-full whitespace-pre text-xs leading-relaxed text-green-400">
+          <code>{command}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 8d04c4c..048c031 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,4 +1,6 @@
+import Image from "next/image";
 import Link from "next/link";
+import { withBasePath } from "../services/sitePath";
 export default function Navbar() {
   return (
     <nav className="bg-neutral-900 shadow-sm border-b border-neutral-700 sticky top-0 z-50">
@@ -9,10 +11,13 @@ export default function Navbar() {
               href="/"
               className="text-2xl font-bold text-white flex items-center gap-2"
             >
-              <img
-                src="/images/DocumentDB Logo - background removed.png"
+              <Image
+                src={withBasePath("/images/DocumentDB Logo - background removed.png")}
                 alt="DocumentDB Logo"
-                className="w-12 h-12"
+                width={48}
+                height={48}
+                unoptimized
+                className="h-12 w-12"
               />
               DocumentDB
             </Link>
@@ -68,7 +73,7 @@ export default function Navbar() {
               href="/packages"
               className="text-gray-300 hover:text-blue-400 transition-colors duration-200 font-medium"
             >
-              Packages
+              Download
             </Link>
             <Link
               href="/blogs"
diff --git a/app/docs/[section]/[[...slug]]/page.tsx b/app/docs/[section]/[[...slug]]/page.tsx
index ab4780f..13a5482 100644
--- a/app/docs/[section]/[[...slug]]/page.tsx
+++ b/app/docs/[section]/[[...slug]]/page.tsx
@@ -1,10 +1,17 @@
 import Link from "next/link";
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { capitalCase } from 'change-case';
 import { getAllArticlePaths, getArticleByPath } from "../../../services/articleService";
 import ComingSoon from "../../../components/ComingSoon";
+import CommandSnippet from "../../../components/CommandSnippet";
 import Markdown from "../../../components/Markdown";
 
+const dockerQuickRunCommand = `docker run -dt --name documentdb \\
+  -p 10260:10260 \\
+  ghcr.io/documentdb/documentdb/documentdb-local:latest \\
+  --username <YOUR_USERNAME> \\
+  --password <YOUR_PASSWORD>`;
+
 export async function generateStaticParams() {
     const paths = getAllArticlePaths();
 
@@ -43,6 +50,11 @@ export async function generateMetadata({ params }: PageProps) {
 
 export default async function ArticlePage({ params }: PageProps) {
     const { section, slug = [] } = await params;
+
+    if (section === 'getting-started' && slug[slug.length - 1] === 'prebuilt-packages') {
+        redirect('/docs/getting-started/packages');
+    }
+
     const articleData = getArticleByPath(section, slug);
 
     if (!articleData) {
@@ -56,6 +68,7 @@ export default async function ArticlePage({ params }: PageProps) {
 
     // Use title from frontmatter if available, otherwise fall back to navigation title or section name
     const pageTitle = frontmatter.title || selectedNavItem?.title || section;
+    const showInstallPrimer = section === "getting-started" && file === "index";
 
     return (
         <div className="min-h-screen bg-neutral-900 relative overflow-hidden">
@@ -138,6 +151,47 @@ export default async function ArticlePage({ params }: PageProps) {
                         {/* Coming Soon Component for coming-soon layout */}
                         {frontmatter.layout === 'coming-soon' && <ComingSoon />}
 
+                        {showInstallPrimer && (
+                            <section className="mb-8 rounded-xl border border-blue-500/30 bg-blue-500/5 p-5">
+                                <h2 className="text-xl font-semibold text-white">Install DocumentDB first</h2>
+                                <p className="mt-2 text-sm text-gray-300">
+                                    Start with Docker for the fastest setup, or choose Linux packages for persistent servers.
+                                </p>
+                                <div className="mt-4 grid gap-4 lg:grid-cols-2">
+                                    <div className="rounded-lg border border-neutral-700 bg-neutral-900/60 p-4">
+                                        <p className="mb-3 text-sm font-semibold text-white">Quick run with Docker</p>
+                                        <CommandSnippet command={dockerQuickRunCommand} label="Docker" />
+                                    </div>
+                                    <div className="rounded-lg border border-neutral-700 bg-neutral-900/60 p-4">
+                                        <p className="text-sm font-semibold text-white">Install from Linux packages</p>
+                                        <p className="mt-2 text-sm text-gray-400">
+                                            Use the package finder to generate the exact apt/rpm command for your distro, architecture, and PostgreSQL version.
+                                        </p>
+                                        <div className="mt-4 flex flex-wrap gap-3">
+                                            <Link
+                                                href="/docs/getting-started/docker"
+                                                className="inline-flex items-center justify-center rounded-md border border-neutral-600 px-4 py-2 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
+                                            >
+                                                Docker guide
+                                            </Link>
+                                            <Link
+                                                href="/packages"
+                                                className="inline-flex items-center justify-center rounded-md bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-400"
+                                            >
+                                                Open package finder
+                                            </Link>
+                                            <Link
+                                                href="/docs/getting-started/packages"
+                                                className="inline-flex items-center justify-center rounded-md border border-neutral-600 px-4 py-2 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
+                                            >
+                                                Linux packages docs
+                                            </Link>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                        )}
+
                         {/* Markdown Content */}
                         <Markdown content={content} />
                     </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 883e80f..b13b0c4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,7 +8,7 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = getMetadata({
   title: 'DocumentDB - Open Source Document Database', 
-  description: 'A powerful, scalable open-source document database solution. Built on the principles of transparency, developer freedom, and standardization, our mission is to build a MongoDB compatible open source document database based on PostgreSQL.',
+  description: 'A powerful, scalable open-source document database solution built on PostgreSQL for modern applications.',
 });
 
 export default function RootLayout({
@@ -34,4 +34,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/app/packages/page.tsx b/app/packages/page.tsx
index 92d04d7..4c796a2 100644
--- a/app/packages/page.tsx
+++ b/app/packages/page.tsx
@@ -1,226 +1,480 @@
+"use client";
+
 import Link from "next/link";
+import { useState } from "react";
+import CommandSnippet from "../components/CommandSnippet";
+
+type InstallMethod = "docker" | "packages";
+type PackageFamily = "apt" | "rpm";
+type AptDistro = "ubuntu22" | "ubuntu24" | "deb11" | "deb12" | "deb13";
+type RpmDistro = "rhel8" | "rhel9";
+type AptArch = "amd64" | "arm64";
+type RpmArch = "x86_64" | "aarch64";
+type AptPgVersion = "16" | "17";
+type RpmPgVersion = "16" | "17";
+
+const dockerCommand = `docker run -dt --name documentdb \\
+  -p 10260:10260 \\
+  ghcr.io/documentdb/documentdb/documentdb-local:latest \\
+  --username <YOUR_USERNAME> \\
+  --password <YOUR_PASSWORD>`;
+
+const aptTargetLabels: Record<AptDistro, string> = {
+  ubuntu22: "Ubuntu 22.04 (Jammy)",
+  ubuntu24: "Ubuntu 24.04 (Noble)",
+  deb11: "Debian 11 (Bullseye)",
+  deb12: "Debian 12 (Bookworm)",
+  deb13: "Debian 13 (Trixie)",
+};
+
+const rpmTargetLabels: Record<RpmDistro, string> = {
+  rhel8: "RHEL 8 / Rocky 8 / AlmaLinux 8 / CentOS Stream 8",
+  rhel9: "RHEL 9 / Rocky 9 / AlmaLinux 9 / CentOS Stream 9",
+};
+
+const nextGuides = [
+  {
+    title: "Getting started",
+    description: "See the full setup flow and choose the guide that fits your environment.",
+    href: "/docs/getting-started",
+  },
+  {
+    title: "Python",
+    description: "Install PyMongo and connect to your local DocumentDB instance.",
+    href: "/docs/getting-started/python-setup",
+  },
+  {
+    title: "Node.js",
+    description: "Use the Node.js driver and run your first queries locally.",
+    href: "/docs/getting-started/nodejs-setup",
+  },
+  {
+    title: "VS Code",
+    description: "Connect through the VS Code extension for a guided local workflow.",
+    href: "/docs/getting-started/vscode-quickstart",
+  },
+] as const;
+
+const allReleasesUrl = "https://github.com/documentdb/documentdb/releases";
 
 export default function PackagesPage() {
+  const [method, setMethod] = useState<InstallMethod>("docker");
+  const [packageFamily, setPackageFamily] = useState<PackageFamily>("apt");
+  const [aptTarget, setAptTarget] = useState<AptDistro>("ubuntu22");
+  const [rpmTarget, setRpmTarget] = useState<RpmDistro>("rhel9");
+  const [aptArch, setAptArch] = useState<AptArch>("amd64");
+  const [rpmArch, setRpmArch] = useState<RpmArch>("x86_64");
+  const [aptPgVersion, setAptPgVersion] = useState<AptPgVersion>("16");
+  const [rpmPgVersion, setRpmPgVersion] = useState<RpmPgVersion>("16");
+
+  const aptCommand = `curl -fsSL https://documentdb.io/documentdb-archive-keyring.gpg | sudo gpg --dearmor -o /usr/share/keyrings/documentdb-archive-keyring.gpg && \\
+echo "deb [arch=${aptArch} signed-by=/usr/share/keyrings/documentdb-archive-keyring.gpg] https://documentdb.io/deb stable ${aptTarget}" | sudo tee /etc/apt/sources.list.d/documentdb.list && \\
+sudo apt update && \\
+sudo apt install postgresql-${aptPgVersion}-documentdb`;
+  const rpmCommand = `sudo dnf install -y dnf-plugins-core && \\
+sudo dnf config-manager --set-enabled crb && \\
+sudo rpm --import https://documentdb.io/documentdb-archive-keyring.gpg && \\
+printf '%s\\n' \\
+  '[documentdb]' \\
+  'name=DocumentDB Repository' \\
+  'baseurl=https://documentdb.io/rpm/${rpmTarget}' \\
+  'enabled=1' \\
+  'gpgcheck=1' \\
+  'gpgkey=https://documentdb.io/documentdb-archive-keyring.gpg' | sudo tee /etc/yum.repos.d/documentdb.repo >/dev/null && \\
+sudo dnf install postgresql${rpmPgVersion}-documentdb`;
+  const selectedPackageName =
+    packageFamily === "apt"
+      ? `postgresql-${aptPgVersion}-documentdb`
+      : `postgresql${rpmPgVersion}-documentdb`;
+  const selectedTargetText =
+    packageFamily === "apt" ? aptTargetLabels[aptTarget] : rpmTargetLabels[rpmTarget];
+  const selectedArchText = packageFamily === "apt" ? aptArch : rpmArch;
+
   return (
     <div className="min-h-screen bg-neutral-900 py-12">
-      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-white mb-4">
-            📦 DocumentDB Package Repository
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-10 text-center">
+          <h1 className="mb-3 text-4xl font-extrabold text-white sm:text-5xl">
+            Download DocumentDB
           </h1>
-          <p className="text-xl text-gray-400 mb-4">
-            Official APT and YUM repositories for DocumentDB packages
+          <p className="mx-auto max-w-3xl text-lg text-gray-300">
+            Choose Docker for the fastest local setup, or Linux packages for managed host
+            installations. All packages are GPG-signed and served from the official DocumentDB
+            repository.
           </p>
-          <div className="flex flex-wrap justify-center gap-4 text-sm">
-            <span className="bg-green-500/20 text-green-400 px-3 py-1 rounded-full border border-green-500/30">
-              🔐 GPG Signed
+          <div className="mt-4 flex flex-wrap justify-center gap-3 text-sm">
+            <span className="rounded-full border border-green-500/30 bg-green-500/20 px-3 py-1 text-green-300">
+              GPG Signed Packages
             </span>
-            <span className="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-full border border-blue-500/30">
-              🐧 Multi-Distribution
+            <span className="rounded-full border border-blue-500/30 bg-blue-500/20 px-3 py-1 text-blue-300">
+              Docker + Linux Packages
             </span>
-            <span className="bg-purple-500/20 text-purple-400 px-3 py-1 rounded-full border border-purple-500/30">
-              🔄 Auto-Updates
+            <span className="rounded-full border border-purple-500/30 bg-purple-500/20 px-3 py-1 text-purple-300">
+              AMD64 + ARM64
             </span>
           </div>
         </div>
 
-        {/* Quick Install Cards */}
-        <div className="space-y-6 mb-12">
-          {/* Debian/Ubuntu Card */}
-          <div className="bg-neutral-800 rounded-lg p-6 border border-neutral-700">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mr-4">
-                <svg className="w-6 h-6 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                </svg>
-              </div>
-              <h3 className="text-2xl font-bold text-white">Debian/Ubuntu</h3>
-            </div>
-            <div className="bg-neutral-900 rounded p-4 mb-4">
-              <code className="text-sm text-green-400 break-all">
-                # Add repository with GPG verification
-                <br />
-                curl -fsSL https://documentdb.io/documentdb-archive-keyring.gpg | sudo gpg --dearmor -o /usr/share/keyrings/documentdb-archive-keyring.gpg
-                <br />
-                echo &quot;deb [arch=amd64,arm64 signed-by=/usr/share/keyrings/documentdb-archive-keyring.gpg] https://documentdb.io/deb stable main&quot; | sudo tee /etc/apt/sources.list.d/documentdb.list
-                <br />
-                <br />
-                # Install packages
-                <br />
-                sudo apt update &amp;&amp; sudo apt install postgresql-16-documentdb
-              </code>
-            </div>
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-400">
-                <strong>Supports:</strong> Debian 11/12, Ubuntu 22.04/24.04
-              </span>
-              <span className="text-blue-400">
-                AMD64 + ARM64
-              </span>
-            </div>
+        <section className="mb-6 rounded-xl border border-neutral-700 bg-neutral-800/70 p-6">
+          <h2 className="mb-4 text-2xl font-bold text-white">1. Choose your install method</h2>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <button
+              type="button"
+              onClick={() => setMethod("docker")}
+              className={`rounded-lg border px-4 py-4 text-left transition-colors ${
+                method === "docker"
+                  ? "border-blue-400 bg-blue-500/15"
+                  : "border-neutral-700 bg-neutral-800 hover:bg-neutral-700/70"
+              }`}
+            >
+              <p className="text-lg font-semibold text-white">Docker</p>
+              <p className="text-sm text-gray-300">Best for: quick local setup and evaluation. No PostgreSQL installation required.</p>
+            </button>
+            <button
+              type="button"
+              onClick={() => setMethod("packages")}
+              className={`rounded-lg border px-4 py-4 text-left transition-colors ${
+                method === "packages"
+                  ? "border-blue-400 bg-blue-500/15"
+                  : "border-neutral-700 bg-neutral-800 hover:bg-neutral-700/70"
+              }`}
+            >
+              <p className="text-lg font-semibold text-white">Linux Packages</p>
+              <p className="text-sm text-gray-300">
+                Best for: persistent Linux VM or server environments. Debian/Ubuntu and RHEL family.
+              </p>
+            </button>
           </div>
+        </section>
+
+        <section className="mb-8 rounded-xl border border-neutral-700 bg-neutral-800/70 p-6">
+          <h2 className="mb-4 text-2xl font-bold text-white">
+            2. Copy and run this command
+          </h2>
 
-          {/* RHEL/CentOS/Fedora Card */}
-          <div className="bg-neutral-800 rounded-lg p-6 border border-neutral-700">
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center mr-4">
-                <svg className="w-6 h-6 text-red-400" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                </svg>
+          {method === "docker" ? (
+            <>
+              <CommandSnippet command={dockerCommand} label="Docker" />
+              <p className="mt-3 text-sm text-gray-400">
+                Starts DocumentDB locally on port 10260 for quick evaluation and development.
+              </p>
+              <div className="mt-4">
+                <Link
+                  href="/docs/getting-started/docker"
+                  className="inline-flex items-center justify-center rounded-md border border-blue-400 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-200 transition-colors hover:bg-blue-500/20"
+                >
+                  Open Docker quick start →
+                </Link>
               </div>
-              <h3 className="text-2xl font-bold text-white">RHEL/CentOS</h3>
-            </div>
+            </>
+          ) : (
+            <>
+              <div className="mb-5 rounded-lg border border-neutral-700 bg-neutral-900/60 p-4">
+                <p className="mb-3 text-sm font-semibold text-white">Package Finder</p>
+                <div className="grid gap-3 md:grid-cols-2">
+                  <label className="text-xs font-medium text-gray-300">
+                    Package format
+                    <select
+                      value={packageFamily}
+                      onChange={(event) => setPackageFamily(event.target.value as PackageFamily)}
+                      className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
+                    >
+                      <option value="apt">APT (Debian / Ubuntu)</option>
+                      <option value="rpm">RPM (RHEL family)</option>
+                    </select>
+                  </label>
 
-            <div className="bg-neutral-900 rounded p-4 mb-4">
-              <code className="text-sm text-green-400 break-all">
-                # Enable CRB repo (for dependencies)
-                <br />
-                sudo dnf install -y dnf-plugins-core
-                <br />
-                sudo dnf config-manager --set-enabled crb
-                <br />
-                <br />
-                # Add repository with GPG verification
-                <br />
-                sudo rpm --import https://documentdb.io/documentdb-archive-keyring.gpg
-                <br />
-                echo &apos;[documentdb]
-                <br />
-                name=DocumentDB Repository
-                <br />
-                baseurl=https://documentdb.io/rpm/rhel9
-                <br />
-                enabled=1
-                <br />
-                gpgcheck=1
-                <br />
-                gpgkey=https://documentdb.io/documentdb-archive-keyring.gpg&apos; | sudo tee /etc/yum.repos.d/documentdb.repo
-                <br />
-                <br />
-                # Install packages
-                <br />
-                sudo dnf install postgresql16-documentdb
-              </code>
-            </div>
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-400">
-                <strong>Supports:</strong> RHEL 8/9, Rocky, AlmaLinux, CentOS Stream
-              </span>
-              <span className="text-red-400">
-                x86_64 + aarch64
-              </span>
-            </div>
-          </div>
-        </div>
+                  {packageFamily === "apt" ? (
+                    <label className="text-xs font-medium text-gray-300">
+                      Distribution
+                      <select
+                        value={aptTarget}
+                        onChange={(event) => setAptTarget(event.target.value as AptDistro)}
+                        className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
+                      >
+                        {Object.entries(aptTargetLabels).map(([value, label]) => (
+                          <option key={value} value={value}>
+                            {label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : (
+                    <label className="text-xs font-medium text-gray-300">
+                      Distribution
+                      <select
+                        value={rpmTarget}
+                        onChange={(event) => setRpmTarget(event.target.value as RpmDistro)}
+                        className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
+                      >
+                        {Object.entries(rpmTargetLabels).map(([value, label]) => (
+                          <option key={value} value={value}>
+                            {label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  )}
 
-        {/* Installation Guide Link */}
-        <div className="bg-gradient-to-r from-blue-500/20 to-green-500/20 rounded-lg p-6 border border-blue-500/30 mb-8">
-          <div className="flex items-center justify-between">
-            <div>
-              <h2 className="text-2xl font-bold text-white mb-2">📖 Complete Installation Guide</h2>
-              <p className="text-gray-400">
-                Detailed instructions for all distributions, GPG verification, troubleshooting, etc
-              </p>
-            </div>
-            <Link 
-              href="https://github.com/documentdb/documentdb.github.io/blob/main/PACKAGE-INSTALL.md" 
-              className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
-              target="_blank"
-            >
-              View Guide
-            </Link>
-          </div>
-        </div>
+                  {packageFamily === "apt" ? (
+                    <label className="text-xs font-medium text-gray-300">
+                      Architecture
+                      <select
+                        value={aptArch}
+                        onChange={(event) => setAptArch(event.target.value as AptArch)}
+                        className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
+                      >
+                        <option value="amd64">amd64</option>
+                        <option value="arm64">arm64</option>
+                      </select>
+                    </label>
+                  ) : (
+                    <label className="text-xs font-medium text-gray-300">
+                      Architecture
+                      <select
+                        value={rpmArch}
+                        onChange={(event) => setRpmArch(event.target.value as RpmArch)}
+                        className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
+                      >
+                        <option value="x86_64">x86_64</option>
+                        <option value="aarch64">aarch64</option>
+                      </select>
+                    </label>
+                  )}
 
-        {/* Alternative Installation Methods */}
-        <div className="bg-neutral-800 rounded-lg p-8 border border-neutral-700 mb-8">
-          <h2 className="text-2xl font-bold text-white mb-6">Alternative Installation Methods</h2>
-          
-          {/* Direct Downloads */}
-          <div className="mb-6">
-            <h3 className="text-xl font-semibold text-purple-400 mb-3">
-              Direct Package Downloads
-            </h3>
-            <p className="text-gray-400 mb-4">
-              Browse and download individual packages without setting up repositories.
-            </p>
-          </div>
+                  {packageFamily === "apt" ? (
+                    <label className="text-xs font-medium text-gray-300">
+                      PostgreSQL version
+                      <select
+                        value={aptPgVersion}
+                        onChange={(event) => setAptPgVersion(event.target.value as AptPgVersion)}
+                        className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
+                      >
+                        <option value="16">16</option>
+                        <option value="17">17</option>
+                      </select>
+                    </label>
+                  ) : (
+                    <label className="text-xs font-medium text-gray-300">
+                      PostgreSQL version
+                      <select
+                        value={rpmPgVersion}
+                        onChange={(event) => setRpmPgVersion(event.target.value as RpmPgVersion)}
+                        className="mt-1 w-full rounded-md border border-neutral-700 bg-neutral-800 px-3 py-2 text-sm text-gray-100"
+                      >
+                        <option value="16">16</option>
+                        <option value="17">17</option>
+                      </select>
+                    </label>
+                  )}
+                </div>
+              </div>
 
-          {/* Manual Installation */}
-          <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
-            <h4 className="text-lg font-semibold text-blue-400 mb-2">Manual Installation</h4>
-            <p className="text-gray-300 text-sm">
-              For one-time installations, you can download and install packages manually:
-            </p>
-            <div className="bg-neutral-900 rounded p-3 mt-3">
-              <code className="text-xs text-green-400">
-                # Example: Direct .deb installation<br/>
-                wget https://documentdb.io/packages/ubuntu22.04-postgresql-16-documentdb_0.107-0_amd64.deb<br/>
-                sudo dpkg -i ubuntu22.04-postgresql-16-documentdb_0.107-0_amd64.deb<br/>
-                <br/>
-                # Example: Direct .rpm installation<br/>
-                wget https://documentdb.io/packages/rhel8-postgresql16-documentdb-0.107.0-1.el8.x86_64.rpm<br/>
-                sudo rpm -i rhel8-postgresql16-documentdb-0.107.0-1.el8.x86_64.rpm
-              </code>
+              <CommandSnippet
+                command={packageFamily === "apt" ? aptCommand : rpmCommand}
+                label={packageFamily === "apt" ? "APT" : "RPM"}
+              />
+              <p className="mt-3 text-sm text-gray-400">
+                Target: {selectedTargetText} · Architecture: {selectedArchText} · package name{" "}
+                <code className="text-gray-300">{selectedPackageName}</code>
+              </p>
+              <div className="mt-4">
+                <Link
+                  href="/docs/getting-started/packages"
+                  className="inline-flex items-center justify-center rounded-md border border-blue-400 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-200 transition-colors hover:bg-blue-500/20"
+                >
+                  Full package install guide →
+                </Link>
+              </div>
+            </>
+          )}
+        </section>
+
+        <section className="space-y-4">
+          <details className="rounded-lg border border-neutral-700 bg-neutral-800/60 p-5">
+            <summary className="cursor-pointer text-lg font-semibold text-white">
+              Full package catalog (all supported combinations)
+            </summary>
+            <div className="mt-4 overflow-x-auto">
+              <table className="w-full min-w-[720px] border-collapse text-left text-sm">
+                <thead>
+                  <tr className="border-b border-neutral-700 text-gray-300">
+                    <th className="px-3 py-2 font-semibold">Format</th>
+                    <th className="px-3 py-2 font-semibold">Distributions</th>
+                    <th className="px-3 py-2 font-semibold">Architectures</th>
+                    <th className="px-3 py-2 font-semibold">PostgreSQL versions</th>
+                    <th className="px-3 py-2 font-semibold">Package naming</th>
+                  </tr>
+                </thead>
+                <tbody className="text-gray-300">
+                  <tr className="border-b border-neutral-800">
+                    <td className="px-3 py-3 font-semibold text-blue-300">APT</td>
+                    <td className="px-3 py-3">Ubuntu 22.04/24.04, Debian 11/12/13</td>
+                    <td className="px-3 py-3">amd64, arm64</td>
+                    <td className="px-3 py-3">16, 17</td>
+                    <td className="px-3 py-3">
+                      <code className="text-gray-200">postgresql-&lt;pg&gt;-documentdb</code>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="px-3 py-3 font-semibold text-red-300">RPM</td>
+                    <td className="px-3 py-3">
+                      RHEL 8/9, Rocky, AlmaLinux, CentOS Stream
+                    </td>
+                    <td className="px-3 py-3">x86_64, aarch64</td>
+                    <td className="px-3 py-3">16, 17</td>
+                    <td className="px-3 py-3">
+                      <code className="text-gray-200">postgresql&lt;pg&gt;-documentdb</code>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <p className="mt-3 text-xs text-gray-400">
+                Use Package Finder above to generate the exact command for your selected
+                target instead of scanning all combinations manually.
+              </p>
             </div>
-          </div>
-        </div>
+          </details>
 
-        {/* Package Information */}
-        <div className="bg-neutral-800 rounded-lg p-8 border border-neutral-700 mb-8">
-          <h2 className="text-2xl font-bold text-white mb-4">Available Packages</h2>
-          
-          <div className="grid md:grid-cols-2 gap-6 mb-6">
-            <div>
-              <h3 className="text-lg font-semibold text-blue-400 mb-3 flex items-center">
-                <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                </svg>
-                APT Packages
-              </h3>
-              <div className="text-sm text-gray-400 mb-2">
-                Debian 11/12, Ubuntu 22.04/24.04
+          <details className="rounded-lg border border-neutral-700 bg-neutral-800/60 p-5">
+            <summary className="cursor-pointer text-lg font-semibold text-white">
+              Version pinning and listing available versions
+            </summary>
+            <div className="mt-4 space-y-4">
+              <p className="text-sm text-gray-400">
+                Use the commands below to discover available versions before pinning. Replace{" "}
+                <code className="text-gray-300">&lt;VERSION&gt;</code> with the version string
+                shown by the list command (e.g.{" "}
+                <code className="text-gray-300">0.108-0</code> for APT,{" "}
+                <code className="text-gray-300">0.108.0-1.el9</code> for RPM).
+              </p>
+              <div>
+                <p className="mb-1 text-xs font-semibold text-gray-400">APT — list then pin</p>
+                <div className="rounded-md border border-neutral-700 bg-black p-3">
+                  <code className="text-xs text-green-400 sm:text-sm">
+                    apt-cache madison postgresql-16-documentdb
+                  </code>
+                </div>
+                <div className="mt-2 rounded-md border border-neutral-700 bg-black p-3">
+                  <code className="text-xs text-green-400 sm:text-sm">
+                    sudo apt install postgresql-16-documentdb=&lt;VERSION&gt;
+                  </code>
+                </div>
               </div>
-              <ul className="space-y-2 text-gray-300 text-sm">
-                <li>• postgresql-15-documentdb</li>
-                <li>• postgresql-16-documentdb</li>
-                <li>• postgresql-17-documentdb</li>
-              </ul>
+              <div>
+                <p className="mb-1 text-xs font-semibold text-gray-400">RPM — list then pin</p>
+                <div className="rounded-md border border-neutral-700 bg-black p-3">
+                  <code className="text-xs text-green-400 sm:text-sm">
+                    dnf --showduplicates list postgresql16-documentdb
+                  </code>
+                </div>
+                <div className="mt-2 rounded-md border border-neutral-700 bg-black p-3">
+                  <code className="text-xs text-green-400 sm:text-sm">
+                    sudo dnf install postgresql16-documentdb-&lt;VERSION&gt;
+                  </code>
+                </div>
+              </div>
+              <p className="text-xs text-gray-500">
+                See all releases and release notes on{" "}
+                <a
+                  href={allReleasesUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-400 underline hover:text-blue-300"
+                >
+                  GitHub Releases
+                </a>
+                .
+              </p>
             </div>
-            
-            <div>
-              <h3 className="text-lg font-semibold text-red-400 mb-3 flex items-center">
-                <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                </svg>
-                RPM Packages  
-              </h3>
-              <div className="text-sm text-gray-400 mb-2">
-                RHEL 8/9, CentOS, Fedora
+          </details>
+
+          <details className="rounded-lg border border-neutral-700 bg-neutral-800/60 p-5">
+            <summary className="cursor-pointer text-lg font-semibold text-white">
+              Direct package downloads
+            </summary>
+            <div className="mt-4 space-y-3">
+              <p className="text-sm text-gray-400">
+                Individual <code className="text-gray-300">.deb</code> and{" "}
+                <code className="text-gray-300">.rpm</code> files are attached to each release on
+                GitHub. Package names follow the convention:
+              </p>
+              <div className="rounded-md border border-neutral-700 bg-black p-3 text-xs text-green-400 sm:text-sm">
+                <div>ubuntu22.04-postgresql-16-documentdb_&lt;VERSION&gt;_amd64.deb</div>
+                <div className="mt-1">rhel9-postgresql16-documentdb-&lt;VERSION&gt;.el9.x86_64.rpm</div>
               </div>
-              <ul className="space-y-2 text-gray-300 text-sm">
-                <li>• postgresql16-documentdb</li>
-                <li>• postgresql17-documentdb</li>
-              </ul>
+              <a
+                href={allReleasesUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center rounded-md border border-blue-400 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-200 transition-colors hover:bg-blue-500/20"
+              >
+                Browse releases on GitHub →
+              </a>
             </div>
-          </div>
+          </details>
 
-          <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-4">
-            <div className="flex items-start">
-              <svg className="w-5 h-5 text-green-400 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-              </svg>
-              <div>
-                <p className="text-green-300 font-semibold mb-1">Multi-Architecture Support</p>
-                <p className="text-green-200 text-sm">
-                  All packages support both AMD64 and ARM64 architectures (including Apple Silicon, AWS Graviton, etc.)
-                </p>
+          <details className="rounded-lg border border-neutral-700 bg-neutral-800/60 p-5">
+            <summary className="cursor-pointer text-lg font-semibold text-white">
+              Troubleshooting quick checks
+            </summary>
+            <div className="mt-4 space-y-3">
+              <div className="rounded-md border border-neutral-700 bg-black p-3">
+                <code className="text-xs text-green-400 sm:text-sm">
+                  sudo apt update && apt search documentdb && apt-cache policy
+                  postgresql-16-documentdb
+                </code>
+              </div>
+              <div className="rounded-md border border-neutral-700 bg-black p-3">
+                <code className="text-xs text-green-400 sm:text-sm">
+                  sudo dnf clean all && dnf search documentdb && rpm -qi postgresql16-documentdb
+                </code>
               </div>
             </div>
+          </details>
+        </section>
+
+        <section className="mt-8 rounded-xl border border-neutral-700 bg-neutral-800/70 p-5 sm:p-6">
+          <div className="mb-5 max-w-2xl">
+            <h2 className="mb-4 text-2xl font-bold text-white">
+              3. Connect and try it
+            </h2>
+            <p className="text-sm leading-6 text-gray-400">
+              Once DocumentDB is running, use port 10260 and follow one of these guides to make
+              your first connection.
+            </p>
           </div>
-        </div>
 
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+            {nextGuides.map((guide) => (
+              <Link
+                key={guide.href}
+                href={guide.href}
+                className="group rounded-xl border border-neutral-700 bg-neutral-900/70 p-4 transition hover:border-blue-400/40 hover:bg-neutral-900"
+              >
+                <h3 className="text-lg font-semibold text-white transition group-hover:text-blue-200">
+                  {guide.title}
+                </h3>
+                <p className="mt-2 text-sm leading-6 text-gray-400">{guide.description}</p>
+              </Link>
+            ))}
+          </div>
+
+          <div className="mt-4 flex flex-wrap gap-3">
+            <Link
+              href="/docs/getting-started/packages"
+              className="inline-flex items-center justify-center rounded-md border border-neutral-600 px-4 py-2 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
+            >
+              Linux package guide
+            </Link>
+            <Link
+              href="/docs"
+              className="inline-flex items-center justify-center rounded-md border border-neutral-600 px-4 py-2 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
+            >
+              All docs
+            </Link>
+          </div>
+        </section>
       </div>
     </div>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 331923c..df1f88b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,491 +1,505 @@
+import Image from "next/image";
+import Link from "next/link";
+import CommandSnippet from "./components/CommandSnippet";
+import { withBasePath } from "./services/sitePath";
+
+type CapabilityIconName =
+  | "foundation"
+  | "index"
+  | "vector"
+  | "platform";
+
+const quickRunCommand = `docker run -dt --name documentdb \\
+  -p 10260:10260 \\
+  ghcr.io/documentdb/documentdb/documentdb-local:latest \\
+  --username <YOUR_USERNAME> \\
+  --password <YOUR_PASSWORD>`;
+
+const quickStartSteps = [
+  {
+    step: "01",
+    description: "Run DocumentDB Local with Docker.",
+  },
+  {
+    step: "02",
+    description: "Connect on port 10260 with your app, shell, or client.",
+  },
+  {
+    step: "03",
+    description: "Continue with the docs or prebuilt packages.",
+  },
+];
+
+const whyDocumentDB = [
+  {
+    title: "Native BSON",
+    description:
+      "Built for document flexibility on PostgreSQL.",
+  },
+  {
+    title: "PostgreSQL foundation",
+    description:
+      "Use advanced SQL, proven operations, and rich indexing when you need them.",
+  },
+  {
+    title: "Open and portable",
+    description:
+      "MIT licensed, runs locally with Docker, and fits your own infrastructure or cloud.",
+  },
+];
+
+const capabilities = [
+  {
+    eyebrow: "Foundation",
+    title: "Document + SQL",
+    description:
+      "Native BSON support with full PostgreSQL compatibility when you need advanced SQL.",
+    highlights: ["Native BSON", "Advanced SQL"],
+    icon: "foundation" as const,
+  },
+  {
+    eyebrow: "Indexing",
+    title: "Rich indexing",
+    description:
+      "Single-field, multi-key, compound, text, and geospatial indexes, including nested fields.",
+    highlights: ["Nested fields", "Text + geo"],
+    icon: "index" as const,
+  },
+  {
+    eyebrow: "AI",
+    title: "Vector search",
+    description:
+      "Embeddings and similarity search powered by pg_vector.",
+    highlights: ["Embeddings", "Similarity"],
+    icon: "vector" as const,
+  },
+  {
+    eyebrow: "Open source",
+    title: "Open and secure",
+    description:
+      "MIT licensed with SCRAM authentication and a lightweight local runtime for development and testing.",
+    highlights: ["MIT licensed", "SCRAM auth"],
+    icon: "platform" as const,
+  },
+];
+
+const trustBadges = [
+  "Built on PostgreSQL",
+  "Native BSON",
+  "MIT licensed",
+  "Runs locally with Docker",
+];
+
+const credibilityPoints = [
+  {
+    value: "3.2k+",
+    label: "GitHub stars",
+    detail: "on documentdb/documentdb",
+  },
+  {
+    value: "200+",
+    label: "Public forks",
+    detail: "public on GitHub",
+  },
+  {
+    value: "11",
+    label: "TSC members",
+    detail: "representing 5 organizations",
+  },
+];
+
+const contributorLogos = [
+  {
+    name: "Microsoft",
+    src: "/images/AzureLogo.png",
+  },
+  {
+    name: "Amazon",
+    src: "/images/AWS%20Logo.png",
+  },
+  {
+    name: "Rippling",
+    src: "/images/Rippling%20Logo%20no%20background.png",
+  },
+  {
+    name: "YugabyteDB",
+    src: "/images/YugabyteLogo.png",
+  },
+  {
+    name: "AB InBev",
+    src: "/images/AB%20InBev%20transparent%20logo.png",
+  },
+];
+
+function CapabilityIcon({ name }: { name: CapabilityIconName }) {
+  switch (name) {
+    case "foundation":
+      return (
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="M4 7.5C4 5.567 7.582 4 12 4s8 1.567 8 3.5S16.418 11 12 11 4 9.433 4 7.5Z"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="M4 12c0 1.933 3.582 3.5 8 3.5s8-1.567 8-3.5"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="M4 16.5C4 18.433 7.582 20 12 20s8-1.567 8-3.5"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="M4 7.5v9M20 7.5v9"
+          />
+        </svg>
+      );
+    case "index":
+      return (
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="M4 7h10M4 12h7M4 17h7M17.5 17.5 20 20M15 18a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+          />
+        </svg>
+      );
+    case "vector":
+      return (
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <circle cx="6" cy="12" r="2.25" strokeWidth={1.8} />
+          <circle cx="18" cy="6" r="2.25" strokeWidth={1.8} />
+          <circle cx="18" cy="18" r="2.25" strokeWidth={1.8} />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="M8 11l7.5-4M8 13l7.5 4"
+          />
+        </svg>
+      );
+    case "platform":
+      return (
+        <svg
+          className="h-5 w-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="M12 3l7 3v5c0 4.2-2.6 8-7 10-4.4-2-7-5.8-7-10V6l7-3Z"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.8}
+            d="m9.5 12 1.7 1.7 3.3-3.7"
+          />
+        </svg>
+      );
+  }
+}
+
 export default function Home() {
   return (
     <div className="min-h-screen bg-neutral-900">
-      {/* Hero Banner */}
-      <section className="relative overflow-hidden bg-gradient-to-r from-neutral-800 via-neutral-900 to-black">
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20"></div>
-        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
-          <div className="text-center">
-            <h1 className="text-4xl sm:text-6xl font-bold text-white mb-6">
-              DocumentDB
-            </h1>
-            <p className="text-xl sm:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
-              A powerful, scalable, MongoDB compatible open-source document database built for modern applications
-            </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <a 
-                href="https://github.com/documentdb/documentdb" 
-                target="_blank" 
-                rel="noopener noreferrer"
-                className="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-white hover:bg-gray-100 transition-colors duration-200"
-              >
-                Get Started
-              </a>
-              <a 
-                href="/packages"
-                className="inline-flex items-center px-8 py-3 border-2 border-blue-500 text-base font-medium rounded-md text-white bg-blue-500/10 hover:bg-blue-500 transition-colors duration-200"
-              >
-                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-                Download Packages
-              </a>
-              <a 
-                href="/docs"
-                className="inline-flex items-center px-8 py-3 border-2 border-white text-base font-medium rounded-md text-white hover:bg-white hover:text-black transition-colors duration-200"
-              >
-                View Docs
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* Mission Statement Section */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
-              Our Mission
-            </h2>
-            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
-              Built on the principles of transparency, developer freedom, and
-              standardization, our mission is to build a MongoDB compatible open
-              source document database based on PostgreSQL
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="bg-neutral-800 rounded-full shadow-lg p-8 hover:shadow-xl hover:bg-neutral-700 transition-all duration-300 text-center aspect-square flex flex-col justify-center border border-neutral-700">
-              <div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
-                <svg className="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                </svg>
-              </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Transparency</h3>
-              <p className="text-gray-400">
-                We want to ensure developers have full transparency into the underlying architecture of the engine
+      <section className="relative overflow-hidden border-b border-neutral-800 bg-gradient-to-b from-neutral-800 via-neutral-900 to-black">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(59,130,246,0.2),_transparent_45%),radial-gradient(circle_at_bottom_left,_rgba(16,185,129,0.18),_transparent_45%)]" />
+        <div className="relative mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
+          <div className="grid items-center gap-8 lg:gap-10 xl:grid-cols-[1.15fr_0.85fr]">
+            <div className="min-w-0">
+              <p className="mb-3 text-xs font-semibold uppercase tracking-[0.24em] text-blue-300">
+                Open source document database
               </p>
-            </div>
-
-            <div className="bg-neutral-800 rounded-full shadow-lg p-8 hover:shadow-xl hover:bg-neutral-700 transition-all duration-300 text-center aspect-square flex flex-col justify-center border border-neutral-700">
-              <div className="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
-                <svg className="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                </svg>
-              </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Developer Freedom</h3>
-              <p className="text-gray-400">
-                With the MIT license, users have complete freedom to use the project as they please with no restrictions
+              <h1 className="mb-5 text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl">
+                DocumentDB
+              </h1>
+              <p className="mb-4 max-w-3xl text-2xl font-semibold tracking-tight text-white sm:text-3xl">
+                Built for document workloads. Powered by PostgreSQL.
+              </p>
+              <p className="mb-7 max-w-xl text-base leading-7 text-gray-300 sm:text-lg">
+                Open source and MIT licensed, with native BSON, advanced
+                indexing, and vector search on PostgreSQL.
               </p>
+              <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+                <Link
+                  href="/docs/getting-started"
+                  className="inline-flex w-full items-center justify-center rounded-md bg-blue-500 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blue-400 sm:w-auto"
+                >
+                  Get Started
+                </Link>
+                <Link
+                  href="/packages"
+                  className="inline-flex w-full items-center justify-center rounded-md border border-blue-400 bg-blue-500/10 px-6 py-3 text-sm font-semibold text-blue-200 transition-colors hover:bg-blue-500/20 sm:w-auto"
+                >
+                  Download
+                </Link>
+                <Link
+                  href="/docs"
+                  className="inline-flex w-full items-center justify-center rounded-md border border-neutral-600 bg-neutral-800/40 px-6 py-3 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800 sm:w-auto"
+                >
+                  View Docs
+                </Link>
+              </div>
+              <div className="mt-7 flex flex-wrap gap-2.5">
+                {trustBadges.map((badge) => (
+                  <span
+                    key={badge}
+                    className="rounded-full border border-neutral-700 bg-neutral-800/80 px-3.5 py-1.5 text-xs text-gray-200 sm:text-sm"
+                  >
+                    {badge}
+                  </span>
+                ))}
+              </div>
             </div>
 
-            <div className="bg-neutral-800 rounded-full shadow-lg p-8 hover:shadow-xl hover:bg-neutral-700 transition-all duration-300 text-center aspect-square flex flex-col justify-center border border-neutral-700">
-              <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
-                <svg className="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-                </svg>
+            <div
+              id="run-with-docker"
+              className="min-w-0 scroll-mt-24 rounded-2xl border border-white/10 bg-neutral-900/90 p-5 shadow-[0_24px_80px_-40px_rgba(59,130,246,0.55)] sm:rounded-3xl sm:p-6"
+            >
+              <div className="mb-4">
+                <span className="inline-flex rounded-full border border-blue-400/30 bg-blue-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-blue-200">
+                  Quick start
+                </span>
+                <h2 className="mt-4 text-xl font-semibold text-white sm:text-2xl">
+                  Run locally with Docker
+                </h2>
+                <p className="mt-2 text-sm leading-6 text-gray-400">
+                  Start DocumentDB Local with Docker, then connect on port
+                  10260.
+                </p>
+              </div>
+              <CommandSnippet command={quickRunCommand} label="Docker" />
+              <ol className="mt-5 overflow-hidden rounded-2xl border border-neutral-800/80 bg-neutral-900/50">
+                {quickStartSteps.map((item) => (
+                  <li
+                    key={item.step}
+                    className="grid grid-cols-[auto_1fr] items-center gap-3 border-t border-neutral-800/80 px-4 py-3.5 first:border-t-0"
+                  >
+                    <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-blue-400/30 bg-blue-500/10 text-[11px] font-semibold text-blue-200">
+                      {item.step}
+                    </span>
+                    <p className="text-sm leading-6 text-gray-300">
+                      {item.description}
+                    </p>
+                  </li>
+                ))}
+              </ol>
+              <div className="mt-4 flex flex-col gap-2 text-sm sm:flex-row sm:flex-wrap sm:items-center sm:gap-4">
+                <Link
+                  href="/docs/getting-started/docker"
+                  className="font-semibold text-blue-300 transition-colors hover:text-blue-200"
+                >
+                  Docker quick start
+                </Link>
+                <Link
+                  href="/packages"
+                  className="font-semibold text-gray-300 transition-colors hover:text-white"
+                >
+                  Download packages
+                </Link>
               </div>
-              <h3 className="text-xl font-semibold text-white mb-4">Open Standard</h3>
-              <p className="text-gray-400">
-                Eventually, we want to create an open standard for document databases for a universally accepted implementation standard
-              </p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* In the Press Section */}
-      <section className="py-20 bg-neutral-800/50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
-              In the Press
+      <section className="relative overflow-hidden border-b border-neutral-800 bg-[radial-gradient(circle_at_top_left,_rgba(59,130,246,0.16),_transparent_38%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.12),_transparent_34%)] py-14 sm:py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-8 max-w-3xl sm:mb-10">
+            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.24em] text-blue-300">
+              Capabilities
+            </p>
+            <h2 className="mb-4 text-3xl font-bold text-white sm:text-4xl lg:text-5xl">
+              Core features for document workloads
             </h2>
-            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
-              What the industry is saying about DocumentDB
+            <p className="text-base leading-7 text-gray-400 sm:text-lg">
+              From CRUD to vector search, all on PostgreSQL.
             </p>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {/* The Register Article */}
-            <a
-              href="https://www.theregister.com/2025/01/27/microsoft_builds_open_source_document/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group"
-            >
-              <div className="bg-neutral-800 rounded-lg shadow-lg p-4 hover:shadow-xl hover:bg-neutral-700 transition-all duration-300 border border-neutral-700 h-full">
-                <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-red-600 rounded-lg flex items-center justify-center mb-4">
-                    <img
-                      src="/images/The Register Logo v2.png"
-                      alt="The Register"
-                      className="w-12 h-4 group-hover:scale-110 transition-transform"
-                    />
-                  </div>
-                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-600/20 text-red-500 mb-3">
-                    The Register
-                  </span>
-                  <h3 className="text-sm font-semibold text-white mb-2 group-hover:text-red-500 transition-colors line-clamp-3">
-                    Microsoft builds open source document database
-                  </h3>
-                  <p className="text-gray-400 text-xs mb-3 line-clamp-2">
-                    PostgreSQL-powered platform
-                  </p>
-                  <div className="flex items-center text-red-500 group-hover:text-red-400 transition-colors mt-auto">
-                    <span className="text-xs font-medium">Read</span>
-                    <svg
-                      className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M17 8l4 4m0 0l-4 4m4-4H3"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </a>
-
-            {/* Hacker News Discussion */}
-            <a
-              href="https://news.ycombinator.com/item?id=42807210"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group"
-            >
-              <div className="bg-neutral-800 rounded-lg shadow-lg p-4 hover:shadow-xl hover:bg-neutral-700 transition-all duration-300 border border-neutral-700 h-full">
-                <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-orange-600 rounded-lg flex items-center justify-center mb-4">
-                    <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none">
-                      <rect width="24" height="24" fill="#FF6600" rx="2" />
-                      <text
-                        x="12"
-                        y="16"
-                        fontFamily="Verdana, sans-serif"
-                        fontSize="12"
-                        fontWeight="bold"
-                        fill="white"
-                        textAnchor="middle"
-                      >
-                        Y
-                      </text>
-                    </svg>
-                  </div>
-                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-500/20 text-orange-400 mb-3">
-                    Hacker News
-                  </span>
-                  <h3 className="text-sm font-semibold text-white mb-2 group-hover:text-orange-400 transition-colors line-clamp-3">
-                    DocumentDB Open-Source Discussion
-                  </h3>
-                  <p className="text-gray-400 text-xs mb-3 line-clamp-2">
-                    Community discussion
-                  </p>
-                  <div className="flex items-center text-orange-400 group-hover:text-orange-300 transition-colors mt-auto">
-                    <span className="text-xs font-medium">Join</span>
-                    <svg
-                      className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M17 8l4 4m0 0l-4 4m4-4H3"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </a>
-
-            {/* Phoronix Article */}
-            <a
-              href="https://www.phoronix.com/news/Microsoft-OpenSource-DocumentDB"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group"
-            >
-              <div className="bg-neutral-800 rounded-lg shadow-lg p-4 hover:shadow-xl hover:bg-neutral-700 transition-all duration-300 border border-neutral-700 h-full">
-                <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-green-800 rounded-lg flex items-center justify-center mb-4">
-                    <img
-                      src="/images/Phoronix Logo.jpg"
-                      alt="Phoronix"
-                      className="w-7 h-6 group-hover:scale-110 transition-transform"
-                    />
-                  </div>
-                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 mb-3">
-                    Phoronix
-                  </span>
-                  <h3 className="text-sm font-semibold text-white mb-2 group-hover:text-green-400 transition-colors line-clamp-3">
-                    Microsoft Announces Open-Source DocumentDB
-                  </h3>
-                  <p className="text-gray-400 text-xs mb-3 line-clamp-2">
-                    NoSQL database on PostgreSQL
-                  </p>
-                  <div className="flex items-center text-green-400 group-hover:text-green-300 transition-colors mt-auto">
-                    <span className="text-xs font-medium">Read</span>
-                    <svg
-                      className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M17 8l4 4m0 0l-4 4m4-4H3"
-                      />
-                    </svg>
-                  </div>
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {capabilities.map((item) => (
+              <article
+                key={item.title}
+                className="group flex h-full flex-col rounded-2xl border border-neutral-800 bg-neutral-900/80 p-5 transition hover:-translate-y-0.5 hover:border-blue-400/30 hover:bg-neutral-900 sm:p-6"
+              >
+                <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl border border-neutral-700 bg-neutral-800 text-blue-200">
+                  <CapabilityIcon name={item.icon} />
                 </div>
-              </div>
-            </a>
-
-            {/* Business Wire Article */}
-            <a
-              href="https://www.businesswire.com/news/home/20250520124276/en/YugabyteDB-Extends-Support-for-Document-Databases-With-Postgres-Extension-DocumentDB"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group"
-            >
-              <div className="bg-neutral-800 rounded-lg shadow-lg p-4 hover:shadow-xl hover:bg-neutral-700 transition-all duration-300 border border-neutral-700 h-full">
-                <div className="flex flex-col items-center text-center">
-                  <div className="w-12 h-12 bg-blue-700 rounded-lg flex items-center justify-center mb-4">
-                    <img
-                      src="/images/BusinessWire.png"
-                      alt="Business Wire"
-                      className="w-9 h-7 group-hover:scale-110 transition-transform"
-                    />
-                  </div>
-                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-indigo-500/20 text-indigo-400 mb-3">
-                    Business Wire
-                  </span>
-                  <h3 className="text-sm font-semibold text-white mb-2 group-hover:text-indigo-400 transition-colors line-clamp-3">
-                    YugabyteDB Extends Support for DocumentDB
-                  </h3>
-                  <p className="text-gray-400 text-xs mb-3 line-clamp-2">
-                    PostgreSQL extension integration
-                  </p>
-                  <div className="flex items-center text-indigo-400 group-hover:text-indigo-300 transition-colors mt-auto">
-                    <span className="text-xs font-medium">Read</span>
-                    <svg
-                      className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
+                <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-blue-300">
+                  {item.eyebrow}
+                </p>
+                <h3 className="mb-2 text-xl font-semibold text-white">
+                  {item.title}
+                </h3>
+                <p className="text-sm leading-6 text-gray-400">
+                  {item.description}
+                </p>
+                <div className="mt-auto flex flex-wrap gap-1.5 pt-5">
+                  {item.highlights.map((highlight) => (
+                    <span
+                      key={highlight}
+                      className="rounded-full border border-neutral-700 bg-neutral-800/90 px-3 py-1 text-[11px] font-medium text-gray-200"
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M17 8l4 4m0 0l-4 4m4-4H3"
-                      />
-                    </svg>
-                  </div>
+                      {highlight}
+                    </span>
+                  ))}
                 </div>
-              </div>
-            </a>
+              </article>
+            ))}
           </div>
         </div>
       </section>
 
-      {/* Our Trusted Partners Section */}
-      <section className="py-20 relative overflow-hidden">
-        {/* Artistic background elements */}
-        <div className="absolute inset-0 bg-gradient-to-br from-neutral-900 via-neutral-800 to-black"></div>
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-10 left-10 w-32 h-32 bg-blue-500 rounded-full blur-3xl"></div>
-          <div className="absolute bottom-20 right-20 w-40 h-40 bg-purple-500 rounded-full blur-3xl"></div>
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-60 h-60 bg-green-500 rounded-full blur-3xl"></div>
-        </div>
-
-        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
-              Our Contributors
+      <section className="border-b border-neutral-800 bg-black py-12 sm:py-14">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-6 max-w-2xl">
+            <h2 className="mb-3 text-2xl font-bold text-white sm:text-3xl">
+              Why DocumentDB
             </h2>
-            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
-              Collaborating with industry leaders to advance the document
-              database ecosystem
+            <p className="text-sm leading-6 text-gray-400 sm:text-base">
+              Document flexibility, PostgreSQL confidence, and open-source control.
             </p>
-            <div className="mt-6 w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-5 lg:grid-cols-5 gap-4 items-center">
-            {/* Microsoft Azure */}
-            <div className="group relative">
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
-              <div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
-                <div className="w-20 h-20 flex items-center justify-center mb-4">
-                  <img
-                    src="/images/AzureLogo.png"
-                    alt="Microsoft Azure"
-                    className="w-12 h-12 group-hover:scale-110 transition-transform"
-                  />
-                </div>
-                <div className="text-center">
-                  <h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
-                    Microsoft
-                  </h3>
-                </div>
-              </div>
-            </div>
-
-            {/* Amazon DocumentDB */}
-            <div className="group relative">
-              <div className="absolute inset-0 bg-gradient-to-r from-orange-500/20 to-yellow-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
-              <div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-orange-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
-                <div className="w-20 h-20 flex items-center justify-center mb-4">
-                  <img
-                    src="/images/AWS Logo.png"
-                    alt="Amazon Web Services"
-                    className="w-12 h-12 group-hover:scale-110 transition-transform"
-                  />
-                </div>
-                <div className="text-center">
-                  <h3 className="text-sm font-bold text-white group-hover:text-orange-300 transition-colors mb-1">
-                    Amazon
-                  </h3>
-                </div>
-              </div>
-            </div>
-
-            {/* Rippling */}
-            <div className="group relative">
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
-              <div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
-                <div className="w-60 h-20 flex items-center justify-center mb-4">
-                  <img
-                    src="/images/Rippling Logo no background.png"
-                    alt="Rippling"
-                    className="w-12 h-12 group-hover:scale-110 transition-transform"
-                  />
-                </div>
-                <div className="text-center">
-                  <h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
-                    Rippling
-                  </h3>
-                </div>
-              </div>
-            </div>
+          <div className="grid gap-3 md:grid-cols-3">
+            {whyDocumentDB.map((item) => (
+              <article
+                key={item.title}
+                className="rounded-2xl border border-neutral-800 bg-neutral-900/70 p-4 sm:p-5"
+              >
+                <h3 className="mb-2 text-lg font-semibold text-white">
+                  {item.title}
+                </h3>
+                <p className="text-sm leading-6 text-gray-400">
+                  {item.description}
+                </p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
 
-            {/* YugabyteDB */}
-            <div className="group relative">
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
-              <div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
-                <div className="w-20 h-20 flex items-center justify-center mb-4">
-                  <img
-                    src="/images/YugabyteLogo.png"
-                    alt="YugabyteDB"
-                    className="w-9 h-9 group-hover:scale-110 transition-transform"
-                  />
-                </div>
-                <div className="text-center">
-                  <h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
-                    YugabyteDB
-                  </h3>
-                </div>
-              </div>
-            </div>
+      <section className="border-b border-neutral-800 bg-neutral-900/60 py-14 sm:py-16 lg:py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-8 max-w-3xl">
+            <p className="mb-3 text-xs font-semibold uppercase tracking-[0.24em] text-blue-300">
+              Community
+            </p>
+            <h2 className="mb-4 text-3xl font-bold text-white sm:text-4xl">
+              Built in the open
+            </h2>
+            <p className="text-base leading-7 text-gray-400 sm:text-lg">
+              MIT licensed, active on GitHub, and guided by a technical
+              steering committee that spans five organizations.
+            </p>
+          </div>
 
-            {/* AB InBev */}
-            <div className="group relative">
-              <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-xl blur-lg group-hover:blur-xl transition-all duration-300 opacity-0 group-hover:opacity-100"></div>
-              <div className="relative flex flex-col items-center justify-center p-8 bg-neutral-800/80 backdrop-blur-sm rounded-xl border border-neutral-700/50 hover:border-blue-500/50 transition-all duration-300 group-hover:transform group-hover:scale-105">
-                <div className="w-21 h-20 flex items-center justify-center mb-4">
-                  <img
-                    src="/images/AB InBev transparent logo.png"
-                    alt="AB InBev"
-                    className="w-15 h-12 group-hover:scale-110 transition-transform"
-                  />
-                </div>
-                <div className="text-center">
-                  <h3 className="text-sm font-bold text-white group-hover:text-blue-300 transition-colors mb-1">
-                    AB InBev
-                  </h3>
-                </div>
+          <div className="mb-6 grid gap-3 md:grid-cols-3">
+            {credibilityPoints.map((item) => (
+              <div
+                key={item.label}
+                className="rounded-2xl border border-neutral-800 bg-neutral-900/70 p-5"
+              >
+                <p className="text-3xl font-bold tracking-tight text-white">
+                  {item.value}
+                </p>
+                <p className="mt-2 text-sm font-semibold uppercase tracking-[0.18em] text-blue-300">
+                  {item.label}
+                </p>
+                <p className="mt-2 text-sm leading-6 text-gray-400">
+                  {item.detail}
+                </p>
               </div>
-            </div>
+            ))}
           </div>
 
-          {/* Artistic connection lines */}
-          <div className="hidden lg:block absolute inset-0 pointer-events-none">
-            <svg className="w-full h-full opacity-20" viewBox="0 0 800 400">
-              <path
-                d="M150 200 Q400 100 650 200"
-                stroke="url(#gradient1)"
-                strokeWidth="1"
-                fill="none"
-              />
-              <path
-                d="M150 200 Q400 300 650 200"
-                stroke="url(#gradient2)"
-                strokeWidth="1"
-                fill="none"
-              />
-              <defs>
-                <linearGradient
-                  id="gradient1"
-                  x1="0%"
-                  y1="0%"
-                  x2="100%"
-                  y2="0%"
-                >
-                  <stop offset="0%" stopColor="#3B82F6" stopOpacity="0" />
-                  <stop offset="50%" stopColor="#8B5CF6" stopOpacity="1" />
-                  <stop offset="100%" stopColor="#EF4444" stopOpacity="0" />
-                </linearGradient>
-                <linearGradient
-                  id="gradient2"
-                  x1="0%"
-                  y1="0%"
-                  x2="100%"
-                  y2="0%"
+          <div className="rounded-3xl border border-neutral-800 bg-neutral-900/70 p-4 sm:p-6">
+            <p className="mb-4 text-sm text-gray-400">
+              Current TSC representation includes Microsoft, Amazon, AB InBev,
+              Rippling, and YugabyteDB.
+            </p>
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-5">
+              {contributorLogos.map((organization, index) => (
+                <div
+                  key={organization.name}
+                  title={organization.name}
+                  className={`flex h-24 items-center justify-center rounded-2xl border border-neutral-800 bg-neutral-900/80 px-4 py-4 sm:h-28 ${
+                    index === contributorLogos.length - 1
+                      ? "col-span-2 sm:col-span-1"
+                      : ""
+                  }`}
                 >
-                  <stop offset="0%" stopColor="#10B981" stopOpacity="0" />
-                  <stop offset="50%" stopColor="#F59E0B" stopOpacity="1" />
-                  <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0" />
-                </linearGradient>
-              </defs>
-            </svg>
+                  <div className="relative h-8 w-full max-w-[128px] sm:h-10 sm:max-w-[136px]">
+                     <Image
+                      src={withBasePath(organization.src)}
+                      alt={organization.name}
+                      fill
+                      unoptimized
+                      className="object-contain"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       </section>
 
-      {/* CTA Section */}
-      <section className="bg-black py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-6">
-            Ready to Get Started?
+      <section className="border-t border-neutral-800 bg-black py-12 sm:py-14">
+        <div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
+          <h2 className="mb-3 text-2xl font-bold text-white sm:text-3xl">
+            Ready to try DocumentDB?
           </h2>
-          <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
-            Join us as we build the future of document databases together
+          <p className="mb-6 text-sm text-gray-400 sm:text-base">
+            Start locally with Docker, then explore the project on GitHub.
           </p>
-          <a 
-            href="https://github.com/documentdb/documentdb" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            className="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-white hover:bg-gray-100 transition-colors duration-200"
-          >
-            <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
-            </svg>
-            View on GitHub
-          </a>
+          <div className="flex flex-col justify-center gap-3 sm:flex-row">
+            <Link
+              href="/docs/getting-started"
+              className="inline-flex w-full items-center justify-center rounded-md bg-white px-5 py-2.5 text-sm font-semibold text-black transition-colors hover:bg-gray-100 sm:w-auto"
+            >
+              Get Started
+            </Link>
+            <a
+              href="https://github.com/documentdb/documentdb"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex w-full items-center justify-center rounded-md border border-neutral-600 px-5 py-2.5 text-sm font-semibold text-gray-200 transition-colors hover:border-neutral-500 hover:bg-neutral-800 sm:w-auto"
+            >
+              GitHub
+            </a>
+          </div>
         </div>
       </section>
-
     </div>
-  )
+  );
 }
diff --git a/app/services/articleService.ts b/app/services/articleService.ts
index 0da835a..d64c7ee 100644
--- a/app/services/articleService.ts
+++ b/app/services/articleService.ts
@@ -6,6 +6,104 @@ import { Article } from '../types/Article';
 import { Link } from '../types/Link';
 
 const articlesDirectory = path.join(process.cwd(), 'articles');
+const dockerGuideContent = `# Docker
+
+Run DocumentDB locally in minutes using Docker.
+
+## Start DocumentDB
+
+\`\`\`bash
+docker run -dt --name documentdb \\
+  -p 10260:10260 \\
+  ghcr.io/documentdb/documentdb/documentdb-local:latest \\
+  --username <YOUR_USERNAME> \\
+  --password <YOUR_PASSWORD>
+\`\`\`
+
+> Replace \`<YOUR_USERNAME>\` and \`<YOUR_PASSWORD>\` with your own credentials.
+
+## Verify the container
+
+\`\`\`bash
+docker ps --filter "name=documentdb"
+\`\`\`
+
+## Next steps
+
+- [Node.js Setup Guide](/docs/getting-started/nodejs-setup)
+- [Python Setup Guide](/docs/getting-started/python-setup)
+- [Linux Packages Guide](/docs/getting-started/packages)
+- [Package Finder](/packages)
+`;
+
+const linuxPackagesGuideContent = `# Linux Packages
+
+Install DocumentDB on Linux hosts with apt/rpm packages.
+
+## Fastest path
+
+Use the [Package Finder](/packages) to generate the exact install command for your distro, architecture, and PostgreSQL version.
+
+## APT example
+
+\`\`\`bash
+curl -fsSL https://documentdb.io/documentdb-archive-keyring.gpg | sudo gpg --dearmor -o /usr/share/keyrings/documentdb-archive-keyring.gpg && \\
+echo "deb [arch=amd64 signed-by=/usr/share/keyrings/documentdb-archive-keyring.gpg] https://documentdb.io/deb stable ubuntu24" | sudo tee /etc/apt/sources.list.d/documentdb.list && \\
+sudo apt update && \\
+sudo apt install postgresql-16-documentdb
+\`\`\`
+
+## RPM example
+
+\`\`\`bash
+sudo dnf install -y dnf-plugins-core && \\
+sudo dnf config-manager --set-enabled crb && \\
+sudo rpm --import https://documentdb.io/documentdb-archive-keyring.gpg && \\
+printf '%s\\n' '[documentdb]' 'name=DocumentDB Repository' 'baseurl=https://documentdb.io/rpm/rhel9' 'enabled=1' 'gpgcheck=1' 'gpgkey=https://documentdb.io/documentdb-archive-keyring.gpg' | sudo tee /etc/yum.repos.d/documentdb.repo >/dev/null && \\
+sudo dnf install postgresql16-documentdb
+\`\`\`
+
+## Next steps
+
+- [Docker Quick Start](/docs/getting-started/docker)
+- [Node.js Setup Guide](/docs/getting-started/nodejs-setup)
+- [Python Setup Guide](/docs/getting-started/python-setup)
+`;
+
+function splitPrebuiltNavigation(section: string, links: Link[]): Link[] {
+  if (section !== 'getting-started') {
+    return links;
+  }
+
+  const isPrebuiltPackages = (link: Link) =>
+    link.link.includes('prebuilt-packages') || /pre-built packages/i.test(link.title);
+  const dockerAndLinuxLinks: Link[] = [
+    {
+      title: 'Docker',
+      link: '/docs/getting-started/docker',
+    },
+    {
+      title: 'Linux Packages',
+      link: '/docs/getting-started/packages',
+    },
+  ];
+  const filteredLinks = links.filter((link) => !isPrebuiltPackages(link));
+  const gettingStartedIndex = filteredLinks.find((link) => link.link === 'index.md');
+
+  if (!gettingStartedIndex) {
+    return [...dockerAndLinuxLinks, ...filteredLinks];
+  }
+
+  const remainingLinks = filteredLinks.filter((link) => link !== gettingStartedIndex);
+  return [gettingStartedIndex, ...dockerAndLinuxLinks, ...remainingLinks];
+}
+
+function updateGettingStartedIndexContent(content: string): string {
+  return content.replace(
+    /- \[Pre-built Packages\]\([^)]+\) - [^\n]+/i,
+    '- [Docker](/docs/getting-started/docker) - Start DocumentDB locally with Docker\n- [Linux Packages](/docs/getting-started/packages) - Install via apt/rpm repositories'
+  );
+}
 
 export function getArticleContent(): Article {
   const contentPath = path.join(articlesDirectory, 'content.yml');
@@ -22,9 +120,10 @@ export function getArticleNavigation(section: string): Link[] {
 
   const fileContents = fs.readFileSync(navPath, 'utf8');
   const rawLinks = yaml.load(fileContents) as Link[];
+  const normalizedLinks = splitPrebuiltNavigation(section, rawLinks);
   
   // Transform Markdown file links to published relative URIs
-  return rawLinks.map(link => {
+  return normalizedLinks.map(link => {
     // Convert .md file references to proper URIs
     // e.g., "index.md" -> "/docs/section"
     // e.g., "nodejs-setup.md" -> "/docs/section/nodejs-setup"
@@ -89,9 +188,20 @@ export function getAllArticlePaths(): { section: string; slug: string[] }[] {
         paths.push({ section, slug: [file] });
       }
     });
+
+    if (section === 'getting-started') {
+      paths.push({ section, slug: ['docker'] });
+      paths.push({ section, slug: ['packages'] });
+    }
+  });
+
+  const uniquePaths = new Map<string, { section: string; slug: string[] }>();
+  paths.forEach((entry) => {
+    const key = `${entry.section}/${entry.slug.join('/')}`;
+    uniquePaths.set(key, entry);
   });
 
-  return paths;
+  return Array.from(uniquePaths.values());
 }
 
 export function getArticleByPath(section: string, slug: string[] = []): {
@@ -105,6 +215,34 @@ export function getArticleByPath(section: string, slug: string[] = []): {
   file: string;
 } | null {
   const file = slug.length > 0 ? slug[slug.length - 1] : 'index';
+  const navigation = getArticleNavigation(section);
+
+  if (section === 'getting-started' && file === 'docker') {
+    return {
+      content: dockerGuideContent,
+      frontmatter: {
+        title: 'Docker',
+        description: 'Run DocumentDB locally using Docker.',
+      },
+      navigation,
+      section,
+      file,
+    };
+  }
+
+  if (section === 'getting-started' && file === 'packages') {
+    return {
+      content: linuxPackagesGuideContent,
+      frontmatter: {
+        title: 'Linux Packages',
+        description: 'Install DocumentDB via apt and rpm packages.',
+      },
+      navigation,
+      section,
+      file,
+    };
+  }
+
   const rawContent = getMarkdownContent(section, file);
   
   if (!rawContent) {
@@ -113,11 +251,13 @@ export function getArticleByPath(section: string, slug: string[] = []): {
 
   // Parse front matter
   const { data: frontmatter, content } = matter(rawContent);
-
-  const navigation = getArticleNavigation(section);
+  const normalizedContent =
+    section === 'getting-started' && file === 'index'
+      ? updateGettingStartedIndexContent(content)
+      : content;
 
   return {
-    content,
+    content: normalizedContent,
     frontmatter,
     navigation,
     section,
diff --git a/app/services/metadataService.ts b/app/services/metadataService.ts
index b645edf..2d83ee8 100644
--- a/app/services/metadataService.ts
+++ b/app/services/metadataService.ts
@@ -52,11 +52,9 @@ const getBaseKeywords = (): string[] => [
   'open source',
   'NoSQL',
   'database',
-  'MongoDB compatible',
   'PostgreSQL',
-  'MQL',
-  'MongoDB Query Language',
+  'document data API',
   'JSON documents',
   'scalable database',
   'distributed database',
-];
\ No newline at end of file
+];
diff --git a/app/services/sitePath.ts b/app/services/sitePath.ts
new file mode 100644
index 0000000..befab1f
--- /dev/null
+++ b/app/services/sitePath.ts
@@ -0,0 +1,12 @@
+const rawBasePath = process.env.NEXT_BASE_PATH?.trim();
+const normalizedBasePath = rawBasePath
+  ? `/${rawBasePath.replace(/^\/+|\/+$/g, "")}`
+  : "";
+
+export function withBasePath(path: string): string {
+  if (!normalizedBasePath || !path.startsWith("/")) {
+    return path;
+  }
+
+  return `${normalizedBasePath}${path}`;
+}
diff --git a/next.config.ts b/next.config.ts
index d07c0cb..76115b0 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,18 @@
 import type { NextConfig } from "next";
 
+const rawBasePath = process.env.NEXT_BASE_PATH?.trim();
+const normalizedBasePath = rawBasePath
+  ? `/${rawBasePath.replace(/^\/+|\/+$/g, "")}`
+  : undefined;
+
 const nextConfig: NextConfig = {
-  output: 'export'
+  output: "export",
+  ...(normalizedBasePath
+    ? {
+        basePath: normalizedBasePath,
+        assetPrefix: normalizedBasePath,
+      }
+    : {}),
 };
 
-export default nextConfig;
\ No newline at end of file
+export default nextConfig;