Refresh homepage and download experience

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>
+  );
+}

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"

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>

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>
   );
-}
+}

app/lib/packageInstall.ts

@@ -0,0 +1,79 @@
+export type AptDistro = "ubuntu22" | "ubuntu24" | "deb11" | "deb12";
+export type RpmDistro = "rhel8" | "rhel9";
+export type AptArch = "amd64" | "arm64";
+export type RpmArch = "x86_64" | "aarch64";
+export type AptPgVersion = "16" | "17" | "18";
+export type RpmPgVersion = "16" | "17" | "18";
+
+export const aptTargetLabels: Record<AptDistro, string> = {
+  ubuntu22: "Ubuntu 22.04 (Jammy)",
+  ubuntu24: "Ubuntu 24.04 (Noble)",
+  deb11: "Debian 11 (Bullseye)",
+  deb12: "Debian 12 (Bookworm)",
+};
+
+export 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",
+};
+
+export const aptTargetPgVersions: Record<AptDistro, AptPgVersion[]> = {
+  ubuntu22: ["16", "17", "18"],
+  ubuntu24: ["16", "17", "18"],
+  deb11: ["16", "17"],
+  deb12: ["16", "17", "18"],
+};
+
+const aptPgdgSuites: Record<AptDistro, string> = {
+  ubuntu22: "jammy",
+  ubuntu24: "noble",
+  deb11: "bullseye",
+  deb12: "bookworm",
+};
+
+const rpmMajorVersions: Record<RpmDistro, "8" | "9"> = {
+  rhel8: "8",
+  rhel9: "9",
+};
+
+export function buildAptInstallCommand(
+  aptTarget: AptDistro,
+  aptArch: AptArch,
+  aptPgVersion: AptPgVersion,
+): string {
+  const pgdgSuite = aptPgdgSuites[aptTarget];
+
+  return `sudo apt update && \\
+sudo apt install -y curl ca-certificates gnupg && \\
+curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo gpg --dearmor --yes -o /usr/share/keyrings/postgresql.gpg && \\
+echo "deb [signed-by=/usr/share/keyrings/postgresql.gpg] https://apt.postgresql.org/pub/repos/apt ${pgdgSuite}-pgdg main" | sudo tee /etc/apt/sources.list.d/pgdg.list >/dev/null && \\
+curl -fsSL https://documentdb.io/documentdb-archive-keyring.gpg | sudo gpg --dearmor --yes -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 >/dev/null && \\
+sudo apt update && \\
+sudo apt install -y postgresql-${aptPgVersion}-documentdb`;
+}
+
+export function buildRpmInstallCommand(
+  rpmTarget: RpmDistro,
+  rpmArch: RpmArch,
+  rpmPgVersion: RpmPgVersion,
+): string {
+  const rhelMajorVersion = rpmMajorVersions[rpmTarget];
+
+  return `sudo dnf install -y https://dl.fedoraproject.org/pub/epel/epel-release-latest-${rhelMajorVersion}.noarch.rpm && \\
+sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-${rhelMajorVersion}-${rpmArch}/pgdg-redhat-repo-latest.noarch.rpm && \\
+sudo dnf -qy module disable postgresql && \\
+sudo dnf install -y dnf-plugins-core && \\
+(sudo dnf config-manager --set-enabled crb || \\
+ sudo dnf config-manager --set-enabled powertools || \\
+ sudo dnf config-manager --set-enabled codeready-builder-for-rhel-${rhelMajorVersion}-${rpmArch}-rpms) && \\
+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 -y postgresql${rpmPgVersion}-documentdb`;
+}