From 827eb1488903ad867d866f16562fe433f2884dd9 Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 14 Jan 2026 15:49:02 +0300
Subject: [PATCH 1/8] feat: add home page documentation and navigation updates

---
 website/docs/home.md                          |  11 ++
 website/sidebars.ts                           |   5 +
 website/src/components/doc-navbar/index.tsx   |  22 ++-
 .../src/components/docs-widgets/DocsHome.tsx  | 184 ++++++++++++++++++
 website/src/components/navbar/index.tsx       |  37 +++-
 website/src/css/custom.css                    |  88 +++++++++
 6 files changed, 336 insertions(+), 11 deletions(-)
 create mode 100644 website/docs/home.md
 create mode 100644 website/src/components/docs-widgets/DocsHome.tsx

diff --git a/website/docs/home.md b/website/docs/home.md
new file mode 100644
index 000000000..30fda8649
--- /dev/null
+++ b/website/docs/home.md
@@ -0,0 +1,11 @@
+---
+sidebar_label: Home
+slug: /home
+hide_table_of_contents: true
+hide_title: true
+custom_edit_url: null
+---
+
+import DocsHome from '@site/src/components/docs-widgets/DocsHome';
+
+<DocsHome />
diff --git a/website/sidebars.ts b/website/sidebars.ts
index 16ccd3952..1014b2f49 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -12,6 +12,11 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
  */
 const sidebars: SidebarsConfig = {
   docs: [
+    {
+      type: "doc",
+      id: "home",
+      label: "Home",
+    },
     {
       type: "category",
       label: "Get Started",
diff --git a/website/src/components/doc-navbar/index.tsx b/website/src/components/doc-navbar/index.tsx
index 6dbac3348..3990d1285 100644
--- a/website/src/components/doc-navbar/index.tsx
+++ b/website/src/components/doc-navbar/index.tsx
@@ -18,11 +18,17 @@ type TabConfig = {
 };
 
 const tabs: TabConfig[] = [
+  {
+    id: "home",
+    label: "Home",
+    href: "/docs/home/",
+    match: (pathname) => pathname === "/docs/home/" || pathname === "/docs/home",
+  },
   {
     id: "voltagent",
-    label: "VoltAgent Docs",
+    label: "VoltAgent",
     href: "/docs/",
-    match: (pathname) => pathname.startsWith("/docs/"),
+    match: (pathname) => pathname.startsWith("/docs/") && !pathname.startsWith("/docs/home"),
   },
   {
     id: "observability",
@@ -136,6 +142,16 @@ export default function DocNavbar() {
           <NavbarMobileSidebarSecondaryMenu />
           <div className={styles.mobileDivider} />
           <div className={styles.mobileLinks}>
+            <Link
+              to="/docs/home/"
+              className={clsx(
+                styles.mobileNavLink,
+                activeTab === "home" && styles.mobileNavLinkActive,
+              )}
+              onClick={() => setIsMenuOpen(false)}
+            >
+              Home
+            </Link>
             <Link
               to="/docs/"
               className={clsx(
@@ -144,7 +160,7 @@ export default function DocNavbar() {
               )}
               onClick={() => setIsMenuOpen(false)}
             >
-              VoltAgent Docs
+              VoltAgent
             </Link>
             <Link
               to="/observability-docs/"
diff --git a/website/src/components/docs-widgets/DocsHome.tsx b/website/src/components/docs-widgets/DocsHome.tsx
new file mode 100644
index 000000000..36bf390bb
--- /dev/null
+++ b/website/src/components/docs-widgets/DocsHome.tsx
@@ -0,0 +1,184 @@
+import Link from "@docusaurus/Link";
+import {
+  ArrowRightIcon,
+  BoltIcon,
+  ChartBarIcon,
+  DocumentTextIcon,
+  MagnifyingGlassIcon,
+  RocketLaunchIcon,
+  ShieldCheckIcon,
+} from "@heroicons/react/24/outline";
+// @ts-expect-error - Docusaurus theme component
+import CodeBlock from "@theme/CodeBlock";
+
+const codeExample = `import { VoltAgent, Agent } from "@voltagent/core";
+import { honoServer } from "@voltagent/server-hono";
+import { openai } from "@ai-sdk/openai";
+
+const agent = new Agent({
+  name: "my-voltagent-app",
+  instructions: "A helpful assistant that answers questions",
+  model: openai("gpt-4o-mini"),
+});
+
+new VoltAgent({
+  agents: { agent },
+  server: honoServer(),
+});`;
+
+const coreFeatures = ["Memory", "RAG", "Guardrails", "Tools", "MCP", "Voice", "Workflow"];
+
+const voltOpsFeatures = [
+  {
+    title: "Observability",
+    description:
+      "Debug agent behavior with detailed traces. See every tool call, LLM request, and decision path.",
+    href: "/observability-docs/",
+    icon: MagnifyingGlassIcon,
+  },
+  {
+    title: "Evaluation",
+    description:
+      "Score agent outputs against test datasets. Catch regressions before they hit production.",
+    href: "/evaluation-docs/",
+    icon: ChartBarIcon,
+  },
+  {
+    title: "Prompt Management",
+    description: "Version control your prompts. A/B test changes and rollback when needed.",
+    href: "/prompt-engineering-docs/",
+    icon: DocumentTextIcon,
+  },
+  {
+    title: "Deployment",
+    description: "Ship agents with one click. Connect your GitHub repo and deploy automatically.",
+    href: "/deployment-docs/",
+    icon: RocketLaunchIcon,
+  },
+  {
+    title: "Automation",
+    description: "Trigger workflows based on events. Build complex pipelines without extra code.",
+    href: "/actions-triggers-docs/",
+    icon: BoltIcon,
+  },
+  {
+    title: "Guardrails",
+    description: "Validate inputs and outputs. Block harmful content and enforce safety rules.",
+    href: "/docs/guardrails/overview/",
+    icon: ShieldCheckIcon,
+  },
+];
+
+const quickLinks = [
+  { title: "Quick Start Guide", href: "/docs/quick-start/" },
+  { title: "Recipes & Guides", href: "/recipes-and-guides/" },
+  { title: "API Reference", href: "/docs/api/overview/" },
+  {
+    title: "Examples on GitHub",
+    href: "https://github.com/voltagent/voltagent/tree/main/examples",
+    external: true,
+  },
+];
+
+export default function DocsHome() {
+  return (
+    <div className="docs-home -mt-8  ">
+      {/* Hero Section - Centered */}
+      <div className="text-center pt-16 pb-12 mb-8 overflow-visible">
+        <div
+          className="text-4xl md:text-6xl font-semibold mb-6 leading-normal pb-2"
+          style={{
+            background: "linear-gradient(to right, #ffffff, #a1a1aa)",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            backgroundClip: "text",
+          }}
+        >
+          Build · Observe · Ship
+          <br />
+          AI Agents
+        </div>
+        <div className="text-lg text-white max-w-xl mx-auto">
+          AI Agent Engineering Platform for <span className="text-[#b2b2b2]">development</span>,{" "}
+          <span className="text-[#b2b2b2]">observability</span>,{" "}
+          <span className="text-[#b2b2b2]">evaluation</span>, and{" "}
+          <span className="text-[#b2b2b2]">deployment</span> in one place.
+        </div>
+      </div>
+
+      {/* VoltAgent Core Section */}
+      <div className="mb-12">
+        <div className="flex items-center gap-3 mb-4">
+          <span className="text-2xl font-semibold">Core</span>
+          <span className="text-lg text-[#b2b2b2]">Open Source TypeScript Framework</span>
+        </div>
+
+        {/* Feature Badges */}
+        <div className="flex flex-wrap gap-2 mb-6">
+          {coreFeatures.map((feature) => (
+            <span
+              key={feature}
+              className="px-3 py-1 text-sm rounded-full bg-zinc-800/50 text-zinc-300 border border-zinc-700/50"
+            >
+              {feature}
+            </span>
+          ))}
+          <span className="px-3 py-1 text-sm rounded-full bg-zinc-800/50 text-zinc-500 border border-zinc-700/50">
+            and more...
+          </span>
+        </div>
+
+        {/* Code Block */}
+        <CodeBlock language="typescript">{codeExample}</CodeBlock>
+      </div>
+
+      {/* VoltOps Console Section */}
+      <div className="mb-12 bg-black">
+        <div className="flex items-center gap-3 mb-4">
+          <span className="text-2xl font-semibold">VoltOps Console</span>
+          <span className="text-lg text-[#b2b2b2]">Cloud / Self-Hosted Platform</span>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {voltOpsFeatures.map((feature) => (
+            <Link to={feature.href} className="no-underline hover:no-underline">
+              <div
+                key={feature.title}
+                className="group p-5 cursor-pointer rounded-lg border border-solid border-zinc-800 hover:border-zinc-700 transition-all duration-200"
+              >
+                <div className="flex items-center gap-2 mb-2">
+                  <feature.icon className="w-5 h-5 text-[#00d992]" />
+                  <span className=" text-white">{feature.title}</span>
+                </div>
+
+                <p className="text-sm text-zinc-400 mb-4 leading-relaxed">{feature.description}</p>
+                <span className="inline-flex items-center gap-1 text-zinc-400 group-hover:text-white text-sm transition-all">
+                  Learn more <ArrowRightIcon className="w-3 h-3" />
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      <hr className="border-zinc-800 my-10" />
+
+      {/* Quick Links Section */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold mb-4 text-zinc-400">Quick Links</h2>
+        <div className="flex flex-wrap gap-6">
+          {quickLinks.map((link) => (
+            <Link
+              key={link.title}
+              to={link.href}
+              target={link.external ? "_blank" : undefined}
+              rel={link.external ? "noopener noreferrer" : undefined}
+              className="text-emerald-500 hover:text-emerald-400 font-medium flex items-center gap-1 transition-colors"
+            >
+              {link.title} <ArrowRightIcon className="w-3 h-3" />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx
index 0a8dc1b47..fd5eeb3a9 100644
--- a/website/src/components/navbar/index.tsx
+++ b/website/src/components/navbar/index.tsx
@@ -43,21 +43,42 @@ import styles from "./styles.module.css";
 
 // Docs page tab configuration
 const docTabs = [
-  { label: "VoltAgent", href: "/docs/", match: "/docs/" },
-  { label: "Observability", href: "/observability-docs/", match: "/observability-docs/" },
+  { label: "Home", href: "/docs/home/", match: (path: string) => path.startsWith("/docs/home") },
+  {
+    label: "VoltAgent",
+    href: "/docs/",
+    match: (path: string) => path.startsWith("/docs/") && !path.startsWith("/docs/home"),
+  },
+  {
+    label: "Observability",
+    href: "/observability-docs/",
+    match: (path: string) => path.startsWith("/observability-docs/"),
+  },
   {
     label: "Actions & Triggers",
     href: "/actions-triggers-docs/",
-    match: "/actions-triggers-docs/",
+    match: (path: string) => path.startsWith("/actions-triggers-docs/"),
+  },
+  {
+    label: "Evaluation",
+    href: "/evaluation-docs/",
+    match: (path: string) => path.startsWith("/evaluation-docs/"),
   },
-  { label: "Evaluation", href: "/evaluation-docs/", match: "/evaluation-docs/" },
   {
     label: "Prompt Engineering",
     href: "/prompt-engineering-docs/",
-    match: "/prompt-engineering-docs/",
+    match: (path: string) => path.startsWith("/prompt-engineering-docs/"),
+  },
+  {
+    label: "Deployment",
+    href: "/deployment-docs/",
+    match: (path: string) => path.startsWith("/deployment-docs/"),
+  },
+  {
+    label: "Recipes & Guides",
+    href: "/recipes-and-guides/",
+    match: (path: string) => path.startsWith("/recipes-and-guides/"),
   },
-  { label: "Deployment", href: "/deployment-docs/", match: "/deployment-docs/" },
-  { label: "Recipes & Guides", href: "/recipes-and-guides/", match: "/recipes-and-guides/" },
 ];
 
 export default function Navbar() {
@@ -201,7 +222,7 @@ export default function Navbar() {
                 to={tab.href}
                 className={clsx(
                   styles.docsTab,
-                  location.pathname.startsWith(tab.match) && styles.docsTabActive,
+                  tab.match(location.pathname) && styles.docsTabActive,
                 )}
               >
                 {tab.label}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e9156d457..727775404 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -5877,3 +5877,91 @@ html[data-theme="dark"] .three-columns .card p {
 .showcase-code-block [class*="codeBlockTitle"] {
   display: none !important;
 }
+
+/* ========================================
+   Docs Home Page Styles
+   ======================================== */
+
+/* Hide sidebar on docs home page */
+.docs-home-page-wrapper aside.theme-doc-sidebar-container {
+  display: none !important;
+}
+
+/* Make main content full width on home page */
+.docs-home-page-wrapper main {
+  max-width: 100% !important;
+}
+
+.docs-home-page-wrapper .col--3 {
+  display: none !important;
+}
+
+.docs-home-page-wrapper [class*="docMainContainer"] {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+/* Center the home page content */
+.docs-home-page {
+  max-width: 960px !important;
+  margin: 0 auto !important;
+  padding: 2rem 1.5rem !important;
+}
+
+/* Home page hero section */
+.docs-home-page h1 {
+  font-size: 2.5rem !important;
+  font-weight: 700 !important;
+  margin-bottom: 1rem !important;
+  text-align: center !important;
+}
+
+.docs-home-page > p:first-of-type {
+  font-size: 1.125rem !important;
+  text-align: center !important;
+  opacity: 0.9;
+  max-width: 700px;
+  margin: 0 auto 1.5rem auto !important;
+}
+
+/* Center hero buttons */
+.docs-home-page .home-hero-buttons {
+  justify-content: center !important;
+}
+
+/* Section headings */
+.docs-home-page h2 {
+  font-size: 1.5rem !important;
+  font-weight: 600 !important;
+  margin-top: 2rem !important;
+  margin-bottom: 0.75rem !important;
+}
+
+/* Feature cards hover effect */
+.home-feature-link:hover {
+  border-color: var(--ifm-color-emphasis-500) !important;
+  transform: translateY(-2px);
+  transition: all 0.2s ease;
+}
+
+.home-feature-link {
+  transition: all 0.2s ease;
+}
+
+/* Hide copy-page dropdown on docs home page */
+.docs-home .copy-page-dropdown-wrapper {
+  display: none !important;
+}
+
+/* Alternative selector for docs home page */
+.docs-home ~ .copy-page-dropdown-wrapper,
+.docs-home + .copy-page-dropdown-wrapper,
+article:has(.docs-home) .copy-page-dropdown-wrapper,
+[class*="docItemContainer"]:has(.docs-home) .copy-page-dropdown-wrapper {
+  display: none !important;
+}
+
+/* Remove border-bottom from docs-home links */
+.docs-home a.no-underline {
+  border-bottom: none !important;
+}

From 64828e3670aa732e213b7f446b191cce87b819b7 Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Wed, 14 Jan 2026 16:23:43 +0300
Subject: [PATCH 2/8] feat: enhance DocsHome layout and styling with full-width
 background and centered content

---
 .../src/components/docs-widgets/DocsHome.tsx  |  4 +-
 website/src/css/custom.css                    | 54 +++++++++++++++++++
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/website/src/components/docs-widgets/DocsHome.tsx b/website/src/components/docs-widgets/DocsHome.tsx
index 36bf390bb..457466cef 100644
--- a/website/src/components/docs-widgets/DocsHome.tsx
+++ b/website/src/components/docs-widgets/DocsHome.tsx
@@ -82,7 +82,7 @@ const quickLinks = [
 
 export default function DocsHome() {
   return (
-    <div className="docs-home -mt-8  ">
+    <div className="docs-home -mt-8 max-w-5xl mx-auto px-4">
       {/* Hero Section - Centered */}
       <div className="text-center pt-16 pb-12 mb-8 overflow-visible">
         <div
@@ -160,8 +160,6 @@ export default function DocsHome() {
         </div>
       </div>
 
-      <hr className="border-zinc-800 my-10" />
-
       {/* Quick Links Section */}
       <div className="mb-8">
         <h2 className="text-xl font-semibold mb-4 text-zinc-400">Quick Links</h2>
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 727775404..be1c1e0eb 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -5965,3 +5965,57 @@ article:has(.docs-home) .copy-page-dropdown-wrapper,
 .docs-home a.no-underline {
   border-bottom: none !important;
 }
+
+/* Docs home page background */
+.docs-home {
+  background-color: #000000 !important;
+}
+
+/* Docs home page full background black */
+article:has(.docs-home),
+article:has(.docs-home) .theme-doc-markdown,
+[class*="docItemContainer"]:has(.docs-home) {
+  background-color: #000000 !important;
+}
+
+/* Also target the main container */
+main:has(.docs-home) {
+  background-color: #000000 !important;
+}
+
+/* Docs home page - target docItemWrapper */
+[class*="docItemWrapper"]:has(.docs-home),
+[class*="docMainContainer"]:has(.docs-home),
+[class*="docRoot"]:has(.docs-home) {
+  background-color: #000000 !important;
+}
+
+/* Hide sidebar on docs home page */
+[class*="docSidebarContainer"]:has(~ [class*="docMainContainer"] .docs-home),
+aside:has(~ main .docs-home) {
+  display: none !important;
+}
+
+/* Make content full width when sidebar is hidden */
+[class*="docMainContainer"]:has(.docs-home) {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* Center content on docs home page */
+[class*="docMainContainer"]:has(.docs-home) [class*="docItemContainer"] {
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+  padding: 0 2rem !important;
+}
+
+/* Fix docs home centering */
+[class*="docItemContainer"]:has(.docs-home) {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+[class*="docMainContainer"]:has(.docs-home) > div {
+  display: flex !important;
+  justify-content: center !important;
+}

From 4bf842f3897960c379b6a224a53206ca6a0dd84d Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Thu, 15 Jan 2026 00:42:51 +0300
Subject: [PATCH 3/8] feat: update DocsHome layout and styling, enhance
 FeatureShowcase

---
 .../src/components/docs-widgets/DocsHome.tsx  | 139 +++++++++---------
 .../src/components/feature-showcase/index.tsx |  12 +-
 .../components/feature-showcase/mock-data.ts  |   4 +-
 website/src/css/custom.css                    |  18 ++-
 4 files changed, 94 insertions(+), 79 deletions(-)

diff --git a/website/src/components/docs-widgets/DocsHome.tsx b/website/src/components/docs-widgets/DocsHome.tsx
index 457466cef..7146228ec 100644
--- a/website/src/components/docs-widgets/DocsHome.tsx
+++ b/website/src/components/docs-widgets/DocsHome.tsx
@@ -1,15 +1,19 @@
 import Link from "@docusaurus/Link";
 import {
-  ArrowRightIcon,
   BoltIcon,
+  BookOpenIcon,
   ChartBarIcon,
+  ChatBubbleLeftRightIcon,
   DocumentTextIcon,
+  ListBulletIcon,
   MagnifyingGlassIcon,
   RocketLaunchIcon,
   ShieldCheckIcon,
 } from "@heroicons/react/24/outline";
 // @ts-expect-error - Docusaurus theme component
 import CodeBlock from "@theme/CodeBlock";
+import { FeatureShowcase } from "../feature-showcase";
+import { DotPattern } from "../ui/dot-pattern";
 
 const codeExample = `import { VoltAgent, Agent } from "@voltagent/core";
 import { honoServer } from "@voltagent/server-hono";
@@ -28,77 +32,50 @@ new VoltAgent({
 
 const coreFeatures = ["Memory", "RAG", "Guardrails", "Tools", "MCP", "Voice", "Workflow"];
 
-const voltOpsFeatures = [
-  {
-    title: "Observability",
-    description:
-      "Debug agent behavior with detailed traces. See every tool call, LLM request, and decision path.",
-    href: "/observability-docs/",
-    icon: MagnifyingGlassIcon,
-  },
-  {
-    title: "Evaluation",
-    description:
-      "Score agent outputs against test datasets. Catch regressions before they hit production.",
-    href: "/evaluation-docs/",
-    icon: ChartBarIcon,
-  },
-  {
-    title: "Prompt Management",
-    description: "Version control your prompts. A/B test changes and rollback when needed.",
-    href: "/prompt-engineering-docs/",
-    icon: DocumentTextIcon,
-  },
+const quickLinks = [
   {
-    title: "Deployment",
-    description: "Ship agents with one click. Connect your GitHub repo and deploy automatically.",
-    href: "/deployment-docs/",
+    title: "Quick Start",
+    description: "Get up and running with VoltAgent in minutes.",
+    href: "/docs/quick-start/",
     icon: RocketLaunchIcon,
   },
+
   {
-    title: "Automation",
-    description: "Trigger workflows based on events. Build complex pipelines without extra code.",
-    href: "/actions-triggers-docs/",
-    icon: BoltIcon,
-  },
-  {
-    title: "Guardrails",
-    description: "Validate inputs and outputs. Block harmful content and enforce safety rules.",
-    href: "/docs/guardrails/overview/",
-    icon: ShieldCheckIcon,
+    title: "Recipes & Guides",
+    description: "Ready-to-use patterns and best practices.",
+    href: "/recipes-and-guides/",
+    icon: BookOpenIcon,
   },
-];
 
-const quickLinks = [
-  { title: "Quick Start Guide", href: "/docs/quick-start/" },
-  { title: "Recipes & Guides", href: "/recipes-and-guides/" },
-  { title: "API Reference", href: "/docs/api/overview/" },
   {
-    title: "Examples on GitHub",
-    href: "https://github.com/voltagent/voltagent/tree/main/examples",
-    external: true,
+    title: "5 Steps Tutorial",
+    description: "Learn the fundamentals with hands-on examples.",
+    href: "/docs/getting-started/tutorial/",
+    icon: ListBulletIcon,
   },
 ];
 
 export default function DocsHome() {
   return (
-    <div className="docs-home -mt-8 max-w-5xl mx-auto px-4">
+    <div className="docs-home -mt-8 max-w-7xl mx-auto md:px-4">
+      <DotPattern dotColor="#94a3b8" dotSize={1.2} spacing={20} />
       {/* Hero Section - Centered */}
-      <div className="text-center pt-16 pb-12 mb-8 overflow-visible">
+      <div className="text-center pt-8 md:pt-16 pb-8 md:pb-12 mb-4 md:mb-8 overflow-visible">
         <div
-          className="text-4xl md:text-6xl font-semibold mb-6 leading-normal pb-2"
+          className="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-semibold mb-4 md:mb-6 leading-normal pb-2"
           style={{
             background: "linear-gradient(to right, #ffffff, #a1a1aa)",
             WebkitBackgroundClip: "text",
             WebkitTextFillColor: "transparent",
             backgroundClip: "text",
+            lineHeight: 1.2,
           }}
         >
-          Build · Observe · Ship
+          Build · Observe · Automate · Ship
           <br />
           AI Agents
         </div>
-        <div className="text-lg text-white max-w-xl mx-auto">
+        <div className="text-sm sm:text-base md:text-lg text-white max-w-xl mx-auto px-2">
           AI Agent Engineering Platform for <span className="text-[#b2b2b2]">development</span>,{" "}
           <span className="text-[#b2b2b2]">observability</span>,{" "}
           <span className="text-[#b2b2b2]">evaluation</span>, and{" "}
@@ -107,23 +84,28 @@ export default function DocsHome() {
       </div>
 
       {/* VoltAgent Core Section */}
-      <div className="mb-12">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="text-2xl font-semibold">Core</span>
-          <span className="text-lg text-[#b2b2b2]">Open Source TypeScript Framework</span>
+      <div className="mb-8 md:mb-12">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mb-2">
+          <span className="text-xl md:text-2xl font-semibold">Core</span>
+          <span className="text-sm md:text-lg text-[#b2b2b2]">
+            Open Source TypeScript Framework
+          </span>
         </div>
+        <p className="docs-home-description text-sm md:text-base mb-4">
+          Everything you need to build production-ready AI agents in TypeScript.
+        </p>
 
         {/* Feature Badges */}
-        <div className="flex flex-wrap gap-2 mb-6">
+        <div className="flex flex-wrap gap-1.5 md:gap-2 mb-4 md:mb-6">
           {coreFeatures.map((feature) => (
             <span
               key={feature}
-              className="px-3 py-1 text-sm rounded-full bg-zinc-800/50 text-zinc-300 border border-zinc-700/50"
+              className="px-2 md:px-3 py-0.5 md:py-1 text-xs md:text-sm rounded-full bg-zinc-800/50 text-zinc-300 border border-zinc-700/50"
             >
               {feature}
             </span>
           ))}
-          <span className="px-3 py-1 text-sm rounded-full bg-zinc-800/50 text-zinc-500 border border-zinc-700/50">
+          <span className="px-2 md:px-3 py-0.5 md:py-1 text-xs md:text-sm rounded-full bg-zinc-800/50 text-zinc-500 border border-zinc-700/50">
             and more...
           </span>
         </div>
@@ -133,12 +115,19 @@ export default function DocsHome() {
       </div>
 
       {/* VoltOps Console Section */}
-      <div className="mb-12 bg-black">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="text-2xl font-semibold">VoltOps Console</span>
-          <span className="text-lg text-[#b2b2b2]">Cloud / Self-Hosted Platform</span>
+      <div className="mb-8 md:mb-12 bg-black">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mb-2">
+          <span className="text-xl md:text-2xl font-semibold">VoltOps Console</span>
+          <span className="text-sm md:text-lg text-[#b2b2b2]">Cloud / Self-Hosted Platform</span>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <p className="docs-home-description text-sm md:text-base mb-4">
+          Enterprise-grade platform to take AI agents from development to production.
+        </p>
+        {/* Feature Showcase - Full Width */}
+        <div className="my-6 md:my-12 relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen max-w-none px-2 md:px-8">
+          <FeatureShowcase />
+        </div>
+        {/*   <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {voltOpsFeatures.map((feature) => (
             <Link to={feature.href} className="no-underline hover:no-underline">
               <div
@@ -157,23 +146,33 @@ export default function DocsHome() {
               </div>
             </Link>
           ))}
-        </div>
+        </div> */}
       </div>
 
       {/* Quick Links Section */}
       <div className="mb-8">
-        <h2 className="text-xl font-semibold mb-4 text-zinc-400">Quick Links</h2>
-        <div className="flex flex-wrap gap-6">
+        <h2 className="text-lg md:text-xl font-semibold mb-3 md:mb-4 text-white">Get Started</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
           {quickLinks.map((link) => (
-            <Link
+            <div
               key={link.title}
-              to={link.href}
-              target={link.external ? "_blank" : undefined}
-              rel={link.external ? "noopener noreferrer" : undefined}
-              className="text-emerald-500 hover:text-emerald-400 font-medium flex items-center gap-1 transition-colors"
+              className="group p-3 md:p-4 rounded-lg !border !border-solid !border-zinc-800 transition-all duration-200"
             >
-              {link.title} <ArrowRightIcon className="w-3 h-3" />
-            </Link>
+              <div className="flex items-start gap-2 md:gap-3">
+                <link.icon className="w-4 h-4 md:w-5 md:h-5 text-[#00d992] flex-shrink-0 mt-0.5" />
+                <Link
+                  to={link.href}
+                  className="text-white font-medium hover:text-emerald-400 transition-colors no-underline hover:no-underline"
+                >
+                  <div className="flex text-white flex-col">
+                    <span className="text-sm md:text-base">{link.title}</span>
+                    <span className="text-[#b2b2b2] text-xs md:text-sm mt-1">
+                      {link.description}
+                    </span>
+                  </div>
+                </Link>
+              </div>
+            </div>
           ))}
         </div>
       </div>
diff --git a/website/src/components/feature-showcase/index.tsx b/website/src/components/feature-showcase/index.tsx
index df73fdd51..b0670398d 100644
--- a/website/src/components/feature-showcase/index.tsx
+++ b/website/src/components/feature-showcase/index.tsx
@@ -69,12 +69,12 @@ export function FeatureShowcase() {
   }, [activeTab]);
 
   return (
-    <section className="relative z-10  px-4 md:px-6">
+    <section className="feature-showcase relative z-10 px-4 md:px-6">
       <div className="max-w-7xl mx-auto">
         {/* Main Container */}
-        <div className="overflow-hidden border border-solid border-zinc-800 rounded-lg">
+        <div className="overflow-hidden !border !border-solid !border-zinc-800 rounded-lg">
           {/* Tab Bar + Description (unified) */}
-          <div className=" border-b border-solid border-t-0 border-l-0 border-r-0 border-zinc-800">
+          <div className="!border-b !border-solid !border-t-0 !border-l-0 !border-r-0 !border-zinc-800">
             {/* Tabs */}
             <div
               ref={tabsContainerRef}
@@ -131,7 +131,7 @@ export function FeatureShowcase() {
               }`}
             >
               <p
-                className={`text-xs md:text-sm m-0 flex-1 transition-colors duration-700 ${
+                className={`text-xs md:text-sm !m-0 flex-1 transition-colors duration-700 ${
                   hoveredTab || activeTab ? "" : "text-zinc-100"
                 }`}
               >
@@ -199,11 +199,11 @@ export function FeatureShowcase() {
                 </div>
 
                 {/* Code Panel - Bottom on mobile, Left on desktop */}
-                <div className="h-[250px] sm:h-[350px] md:h-[600px] overflow-auto showcase-code-block lg:border-r border-solid border-t-0 border-b-0 border-l-0 border-zinc-700 order-2 lg:order-1">
+                <div className="h-[250px] sm:h-[350px] md:h-[600px] overflow-auto showcase-code-block lg:!border-r !border-solid !border-t-0 !border-b-0 !border-l-0 !border-zinc-700 order-2 lg:order-1">
                   {displayTabData?.triggerCode && displayTabData?.actionCode ? (
                     <div className="flex flex-col h-full">
                       {/* Code Tabs */}
-                      <div className="flex border-b border-solid border-t-0 border-l-0 border-r-0 border-zinc-800 bg-black">
+                      <div className="flex !border-b !border-solid !border-t-0 !border-l-0 !border-r-0 !border-zinc-800 bg-black">
                         <button
                           onClick={() => setActiveCodeTab("trigger")}
                           className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer border-0 outline-none ${
diff --git a/website/src/components/feature-showcase/mock-data.ts b/website/src/components/feature-showcase/mock-data.ts
index ae51b745e..9b2d52e28 100644
--- a/website/src/components/feature-showcase/mock-data.ts
+++ b/website/src/components/feature-showcase/mock-data.ts
@@ -296,7 +296,7 @@ const agent = new Agent({
     ],
   },
 });`,
-    footerText: "Block harmful content, mask PII, and enforce topic boundaries automatically",
+    footerText: "Validate inputs and outputs. Block harmful content and enforce safety rules.",
     docLink: "/docs/guardrails/overview",
   },
   {
@@ -305,7 +305,7 @@ const agent = new Agent({
     icon: "zap",
     image: "https://cdn.voltagent.dev/website/feature-showcase/deployment-4.png",
     fullImage: true,
-    footerText: "Deploy agents to production with one click — no infrastructure to manage",
+    footerText: "Deploy agents to production with one click,no infrastructure to manage",
     docLink: "/deployment-docs/",
   },
 ];
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index be1c1e0eb..5ad0ebf71 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -6006,7 +6006,7 @@ aside:has(~ main .docs-home) {
 [class*="docMainContainer"]:has(.docs-home) [class*="docItemContainer"] {
   max-width: 1200px !important;
   margin: 0 auto !important;
-  padding: 0 2rem !important;
+  padding: 0 !important;
 }
 
 /* Fix docs home centering */
@@ -6019,3 +6019,19 @@ aside:has(~ main .docs-home) {
   display: flex !important;
   justify-content: center !important;
 }
+
+/* Override markdown img styles for FeatureShowcase in docs */
+.markdown .feature-showcase img,
+.theme-doc-markdown .feature-showcase img,
+[data-theme="dark"] .markdown .feature-showcase img,
+[data-theme="dark"] .theme-doc-markdown .feature-showcase img {
+  border: none !important;
+  background-color: transparent !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+}
+
+/* Override paragraph color in docs-home */
+html[data-theme="dark"] .theme-doc-markdown .docs-home p.docs-home-description {
+  color: #f2f2f2 !important;
+}

From f0762adf3226300ac96aa81c7a18cc0c5be632c7 Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Thu, 15 Jan 2026 15:44:19 +0300
Subject: [PATCH 4/8] feat: update tutorial link in DocsHome and adjust
 FeatureShowcase styles

---
 website/src/components/docs-widgets/DocsHome.tsx  |  2 +-
 website/src/components/feature-showcase/index.tsx |  8 ++++----
 website/src/css/custom.css                        | 12 ++++++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/website/src/components/docs-widgets/DocsHome.tsx b/website/src/components/docs-widgets/DocsHome.tsx
index 7146228ec..f45d9ee97 100644
--- a/website/src/components/docs-widgets/DocsHome.tsx
+++ b/website/src/components/docs-widgets/DocsHome.tsx
@@ -50,7 +50,7 @@ const quickLinks = [
   {
     title: "5 Steps Tutorial",
     description: "Learn the fundamentals with hands-on examples.",
-    href: "/docs/getting-started/tutorial/",
+    href: "/tutorial/introduction/",
     icon: ListBulletIcon,
   },
 ];
diff --git a/website/src/components/feature-showcase/index.tsx b/website/src/components/feature-showcase/index.tsx
index b0670398d..89bbcd3d0 100644
--- a/website/src/components/feature-showcase/index.tsx
+++ b/website/src/components/feature-showcase/index.tsx
@@ -111,7 +111,7 @@ export function FeatureShowcase() {
                   >
                     {Icon && (
                       <Icon
-                        className={`w-5 h-5 transition-colors duration-700 ease-in-out ${
+                        className={`w-3.5 h-3.5 md:w-5 md:h-5 transition-colors duration-700 ease-in-out ${
                           isHighlighted ? "text-emerald-400" : ""
                         }`}
                       />
@@ -130,14 +130,14 @@ export function FeatureShowcase() {
                 hoveredTab ? "bg-zinc-800/40" : activeTab ? "bg-zinc-800/60" : "bg-zinc-800/40"
               }`}
             >
-              <p
-                className={`text-xs md:text-sm !m-0 flex-1 transition-colors duration-700 ${
+              <span
+                className={`text-xs md:text-sm flex-1 transition-colors duration-700 ${
                   hoveredTab || activeTab ? "" : "text-zinc-100"
                 }`}
               >
                 {displayTabData?.footerText ||
                   "Start building production-ready AI agents in minutes"}
-              </p>
+              </span>
               <a
                 href={displayTabData?.docLink || "/docs"}
                 target="_blank"
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 5ad0ebf71..3b952f40c 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -6035,3 +6035,15 @@ aside:has(~ main .docs-home) {
 html[data-theme="dark"] .theme-doc-markdown .docs-home p.docs-home-description {
   color: #f2f2f2 !important;
 }
+
+/* Override markdown p styles for FeatureShowcase in docs */
+.markdown .feature-showcase p,
+.theme-doc-markdown .feature-showcase p,
+article .markdown .feature-showcase p,
+[data-theme="dark"] .markdown .feature-showcase p,
+[data-theme="dark"] .theme-doc-markdown .feature-showcase p {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  margin-bottom: 0 !important;
+}

From ce728ec87f8c87ab15752d9c0b81435a21bd87df Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Thu, 15 Jan 2026 16:27:19 +0300
Subject: [PATCH 5/8] feat: enhance navbar and DocsHome styling with updated
 icons and improved layout

---
 website/src/components/doc-navbar/index.tsx   |  4 +--
 .../src/components/docs-widgets/DocsHome.tsx  | 32 +++++++++++--------
 .../src/components/navbar/styles.module.css   |  7 ++--
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/website/src/components/doc-navbar/index.tsx b/website/src/components/doc-navbar/index.tsx
index 3990d1285..15f51b40b 100644
--- a/website/src/components/doc-navbar/index.tsx
+++ b/website/src/components/doc-navbar/index.tsx
@@ -84,8 +84,8 @@ export default function DocNavbar() {
       <nav className={styles.docNavbar} aria-label="Documentation navigation">
         <div className={styles.topRow}>
           <Link to="/" className={styles.brandLink} aria-label="VoltAgent home">
-            <span className={styles.brandMark}>
-              <BoltIcon className={styles.brandIcon} />
+            <span className="flex items-center justify-center w-8 h-8 rounded-full border-2 border-solid border-[#00d992] bg-[rgba(0,217,146,0.08)]">
+              <BoltIcon className="w-4 h-4 text-[#00d992]" />
             </span>
           </Link>
           <div className={styles.actions}>
diff --git a/website/src/components/docs-widgets/DocsHome.tsx b/website/src/components/docs-widgets/DocsHome.tsx
index f45d9ee97..112a2e6f1 100644
--- a/website/src/components/docs-widgets/DocsHome.tsx
+++ b/website/src/components/docs-widgets/DocsHome.tsx
@@ -1,14 +1,10 @@
 import Link from "@docusaurus/Link";
 import {
-  BoltIcon,
   BookOpenIcon,
-  ChartBarIcon,
-  ChatBubbleLeftRightIcon,
-  DocumentTextIcon,
+  CodeBracketIcon,
   ListBulletIcon,
-  MagnifyingGlassIcon,
   RocketLaunchIcon,
-  ShieldCheckIcon,
+  Squares2X2Icon,
 } from "@heroicons/react/24/outline";
 // @ts-expect-error - Docusaurus theme component
 import CodeBlock from "@theme/CodeBlock";
@@ -85,13 +81,16 @@ export default function DocsHome() {
 
       {/* VoltAgent Core Section */}
       <div className="mb-8 md:mb-12">
-        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mb-2">
-          <span className="text-xl md:text-2xl font-semibold">Core</span>
-          <span className="text-sm md:text-lg text-[#b2b2b2]">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-3">
+          <div className="flex items-center gap-2">
+            <CodeBracketIcon className="w-5 h-5 md:w-6 md:h-6 text-[#00d992]" />
+            <span className="text-xl md:text-2xl font-semibold text-white">Core</span>
+          </div>
+          <span className="px-2 py-0.5 text-xs md:text-sm rounded-full bg-zinc-800/80 text-zinc-300 border border-zinc-700/50">
             Open Source TypeScript Framework
           </span>
         </div>
-        <p className="docs-home-description text-sm md:text-base mb-4">
+        <p className="docs-home-description text-sm md:text-base mb-4 text-zinc-400">
           Everything you need to build production-ready AI agents in TypeScript.
         </p>
 
@@ -116,11 +115,16 @@ export default function DocsHome() {
 
       {/* VoltOps Console Section */}
       <div className="mb-8 md:mb-12 bg-black">
-        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mb-2">
-          <span className="text-xl md:text-2xl font-semibold">VoltOps Console</span>
-          <span className="text-sm md:text-lg text-[#b2b2b2]">Cloud / Self-Hosted Platform</span>
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-3">
+          <div className="flex items-center gap-2">
+            <Squares2X2Icon className="w-5 h-5 md:w-6 md:h-6 text-[#00d992]" />
+            <span className="text-xl md:text-2xl font-semibold text-white">VoltOps Console</span>
+          </div>
+          <span className="px-2 py-0.5 text-xs md:text-sm rounded-full bg-zinc-800/80 text-zinc-300 border border-zinc-700/50">
+            Cloud / Self-Hosted Platform
+          </span>
         </div>
-        <p className="docs-home-description text-sm md:text-base mb-4">
+        <p className="docs-home-description text-sm md:text-base mb-4 text-zinc-400">
           Enterprise-grade platform to take AI agents from development to production.
         </p>
         {/* Feature Showcase - Full Width */}
diff --git a/website/src/components/navbar/styles.module.css b/website/src/components/navbar/styles.module.css
index a829b885f..5d5d9ca39 100644
--- a/website/src/components/navbar/styles.module.css
+++ b/website/src/components/navbar/styles.module.css
@@ -369,10 +369,13 @@
 }
 
 .docsLogoIcon {
-  width: 1.1rem;
-  height: 1.1rem;
+  width: 1.5rem;
+  height: 1.5rem  ;
   flex-shrink: 0;
   align-self: center;
+  border: 1px solid #00d992;
+  border-radius: 50%;
+  padding: 3px;
 }
 
 .docsLogoText {

From 7223308851a22a47b58d52421c4438e474f29ff5 Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Thu, 15 Jan 2026 16:50:10 +0300
Subject: [PATCH 6/8] feat: update sidebar link styles for improved readability
 and consistency

---
 website/src/css/custom.css | 40 +++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 3b952f40c..f2a95f75b 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -4666,13 +4666,13 @@ code .token.coord {
   background-color: transparent !important;
 }
 
-/* Root level section headers (GETTING STARTED, AGENTS, etc.) */
+/* Root level section headers (Getting Started, Agents, etc.) */
 .menu__list-item-collapsible .menu__link {
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   color: #ffffff !important; /* Default white, emerald will only override for root level */
-  font-size: 0.75rem !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
+  font-size: 0.875rem !important;
+  text-transform: capitalize !important;
+  letter-spacing: 0.02em !important;
   background-color: transparent !important;
   border-left: 3px solid transparent !important;
   position: relative !important;
@@ -4721,19 +4721,19 @@ code .token.coord {
   > .menu__list-item-collapsible
   .menu__link {
   color: #ffffff !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
 }
 
 /* Level 2 category headers (Storage Adapters, SCORERS, etc.) - same size as level 1 */
 .theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible .menu__link {
   font-size: 0.875rem !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   color: #ffffff !important;
 }
 
 .theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible > .menu__link {
   font-size: 0.875rem !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   color: #ffffff !important;
 }
 
@@ -4758,7 +4758,7 @@ code .token.coord {
 .menu__list .menu__list .menu__link {
   padding: 0.4rem 0.75rem !important;
   padding-left: 2rem !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   color: rgb(156, 163, 175) !important;
   font-size: 0.875rem !important;
   width: 100% !important;
@@ -4804,8 +4804,8 @@ code .token.coord {
 .menu__list .menu__list .menu__list-item-collapsible .menu__link {
   padding-left: 1rem !important;
   color: #ffffff !important;
-  font-size: 12px !important;
-  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
 }
 
 [data-theme="dark"] .menu__list .menu__list .menu__list-item-collapsible .menu__link {
@@ -4830,11 +4830,11 @@ code .token.coord {
 }
 
 [data-theme="dark"] .menu__list-item-collapsible .menu__link {
-  font-weight: 700 !important;
+  font-weight: 500 !important;
   color: #ffffff !important; /* Default beyaz */
-  font-size: 0.75rem !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
+  font-size: 0.875rem !important;
+  text-transform: capitalize !important;
+  letter-spacing: 0.02em !important;
   background-color: transparent !important;
   border-left: none !important;
   padding-left: 0.75rem !important;
@@ -4962,7 +4962,7 @@ aside.theme-doc-sidebar-container .menu {
 .menu__list .menu__list .menu__link {
   padding: 0.4rem 0.75rem !important;
   padding-left: 1rem !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   color: rgb(156, 163, 175) !important;
   font-size: 0.875rem !important;
   width: 100% !important;
@@ -5416,10 +5416,10 @@ nav.table-of-contents .table-of-contents__link--active,
 
 /* Level 1 link items (Evals, Triggers, Actions, etc.) - same style as category headers */
 .theme-doc-sidebar-item-link-level-1 > .menu__link {
-  font-size: 0.75rem !important;
-  font-weight: 700 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  text-transform: capitalize !important;
+  letter-spacing: 0.02em !important;
   color: #ffffff !important;
 }
 

From 93b30d38ac4a64176e144143aec429c7624c09f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Necati=20=C3=96zmen?= <necatiozmn@gmail.com>
Date: Thu, 15 Jan 2026 17:11:14 +0300
Subject: [PATCH 7/8] docs: update
 website/src/components/feature-showcase/mock-data.ts

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---
 website/src/components/feature-showcase/mock-data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/feature-showcase/mock-data.ts b/website/src/components/feature-showcase/mock-data.ts
index 9b2d52e28..08816c773 100644
--- a/website/src/components/feature-showcase/mock-data.ts
+++ b/website/src/components/feature-showcase/mock-data.ts
@@ -305,7 +305,7 @@ const agent = new Agent({
     icon: "zap",
     image: "https://cdn.voltagent.dev/website/feature-showcase/deployment-4.png",
     fullImage: true,
-    footerText: "Deploy agents to production with one click,no infrastructure to manage",
+    footerText: "Deploy agents to production with one click, no infrastructure to manage",
     docLink: "/deployment-docs/",
   },
 ];

From 4cb7e490d5c934c416381a4f36a014f18e52da16 Mon Sep 17 00:00:00 2001
From: Necati Ozmen <necatiozmn@gmail.com>
Date: Thu, 15 Jan 2026 17:13:54 +0300
Subject: [PATCH 8/8] fix: correct spacing in footerText for improved
 readability

---
 website/docs/home.md                                 | 1 +
 website/src/components/feature-showcase/mock-data.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/docs/home.md b/website/docs/home.md
index 30fda8649..1ebfcebe5 100644
--- a/website/docs/home.md
+++ b/website/docs/home.md
@@ -1,4 +1,5 @@
 ---
+title: Home
 sidebar_label: Home
 slug: /home
 hide_table_of_contents: true
diff --git a/website/src/components/feature-showcase/mock-data.ts b/website/src/components/feature-showcase/mock-data.ts
index 9b2d52e28..08816c773 100644
--- a/website/src/components/feature-showcase/mock-data.ts
+++ b/website/src/components/feature-showcase/mock-data.ts
@@ -305,7 +305,7 @@ const agent = new Agent({
     icon: "zap",
     image: "https://cdn.voltagent.dev/website/feature-showcase/deployment-4.png",
     fullImage: true,
-    footerText: "Deploy agents to production with one click,no infrastructure to manage",
+    footerText: "Deploy agents to production with one click, no infrastructure to manage",
     docLink: "/deployment-docs/",
   },
 ];