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