From 5242df0f6e333ec3a66950945176341812411aad Mon Sep 17 00:00:00 2001
From: Vanshika <pahalvanshikaa@gmail.com>
Date: Sat, 27 Jun 2026 23:29:37 +0530
Subject: [PATCH 1/4] feat(website): improve homepage layout, accessibility,
 and visual consistency

- Fix page <title> and meta description (removed placeholder text)
- Add secondary "View on GitHub" CTA button with gap and flex-wrap
- Increase hero padding (5rem desktop, 3rem mobile) for better rhythm
- Add margin-top to buttons group so it breathes below the tagline
- Remove stray `.container_lyt7` leaked CSS module class from custom.css
- Add `scroll-behavior: smooth` to html element
- Add :focus-visible outline for keyboard accessibility
- Add --ifm-navbar-shadow CSS variable for light/dark mode
- Add footer border-top to visually separate it from page content
- Fix footer style from 'dark' to 'light' to match #f8fafc background
- Fix navbar logo alt text from 'My Site Logo' to 'AgentCube Logo'
- Reduce feature SVG size from 200px to 160px for better text balance
- Increase features section padding from 2rem to 4rem
- Add .featureCard wrapper with hover shadow and lift transition
- Add aria-label to feature SVGs for screen reader accessibility
- Add padding-top--md to feature card text area for internal spacing
- Run prettier on all modified files for consistent formatting

Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
---
 docs/agentcube/docusaurus.config.ts           | 108 +++++++++---------
 .../src/components/HomepageFeatures/index.tsx |  54 +++++----
 .../HomepageFeatures/styles.module.css        |  24 +++-
 docs/agentcube/src/css/custom.css             |  27 +++--
 docs/agentcube/src/pages/index.module.css     |   7 +-
 docs/agentcube/src/pages/index.tsx            |  38 +++---
 6 files changed, 151 insertions(+), 107 deletions(-)

diff --git a/docs/agentcube/docusaurus.config.ts b/docs/agentcube/docusaurus.config.ts
index e3d89c4fd..3718962ca 100644
--- a/docs/agentcube/docusaurus.config.ts
+++ b/docs/agentcube/docusaurus.config.ts
@@ -1,13 +1,13 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-  title: 'AgentCube',
-  tagline: 'Native AI Agent Workload Management for Kubernetes',
-  favicon: 'img/favicon.ico',
+  title: "AgentCube",
+  tagline: "Native AI Agent Workload Management for Kubernetes",
+  favicon: "img/favicon.ico",
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
@@ -15,58 +15,56 @@ const config: Config = {
   },
 
   // Set the production url of your site here
-  url: 'https://your-docusaurus-site.example.com',
+  url: "https://your-docusaurus-site.example.com",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  baseUrl: "/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'volcano-sh', // Usually your GitHub org/user name.
-  projectName: 'agentcube', // Usually your repo name.
+  organizationName: "volcano-sh", // Usually your GitHub org/user name.
+  projectName: "agentcube", // Usually your repo name.
 
-  onBrokenLinks: 'throw',
+  onBrokenLinks: "throw",
   markdown: {
     mermaid: true,
   },
-  themes: ['@docusaurus/theme-mermaid'],
+  themes: ["@docusaurus/theme-mermaid"],
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
+    defaultLocale: "en",
+    locales: ["en"],
   },
 
   presets: [
     [
-      'classic',
+      "classic",
       {
         docs: {
-          sidebarPath: './sidebars.ts',
+          sidebarPath: "./sidebars.ts",
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/volcano-sh/agentcube/tree/main/docs',
+          editUrl: "https://github.com/volcano-sh/agentcube/tree/main/docs",
         },
         blog: {
           showReadingTime: true,
           feedOptions: {
-            type: ['rss', 'atom'],
+            type: ["rss", "atom"],
             xslt: true,
           },
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/volcano-sh/agentcube/tree/main/docs',
+          editUrl: "https://github.com/volcano-sh/agentcube/tree/main/docs",
           // Useful options to enforce blogging best practices
-          onInlineTags: 'warn',
-          onInlineAuthors: 'warn',
-          onUntruncatedBlogPosts: 'warn',
+          onInlineTags: "warn",
+          onInlineAuthors: "warn",
+          onUntruncatedBlogPosts: "warn",
         },
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: "./src/css/custom.css",
         },
       } satisfies Preset.Options,
     ],
@@ -74,74 +72,74 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    image: "img/docusaurus-social-card.jpg",
     colorMode: {
       respectPrefersColorScheme: true,
     },
     navbar: {
-      title: 'AgentCube',
+      title: "AgentCube",
       logo: {
-        alt: 'My Site Logo',
-        src: 'img/logo.svg',
+        alt: "AgentCube Logo",
+        src: "img/logo.svg",
       },
       items: [
         {
-          type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
-          position: 'left',
-          label: 'Documentation',
+          type: "docSidebar",
+          sidebarId: "tutorialSidebar",
+          position: "left",
+          label: "Documentation",
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
+        { to: "/blog", label: "Blog", position: "left" },
         {
-          href: 'https://github.com/volcano-sh/agentcube',
-          label: 'GitHub',
-          position: 'right',
+          href: "https://github.com/volcano-sh/agentcube",
+          label: "GitHub",
+          position: "right",
         },
       ],
     },
     footer: {
-      style: 'dark',
+      style: "light",
       links: [
         {
-          title: 'Docs',
+          title: "Docs",
           items: [
             {
-              label: 'Getting Started',
-              to: '/docs/getting-started',
+              label: "Getting Started",
+              to: "/docs/getting-started",
             },
             {
-              label: 'Developer Guide',
-              to: '/docs/developer-guide/intro',
+              label: "Developer Guide",
+              to: "/docs/developer-guide/intro",
             },
           ],
         },
         {
-          title: 'Community',
+          title: "Community",
           items: [
             {
-              label: 'Issues',
-              href: 'https://github.com/volcano-sh/agentcube/issues',
+              label: "Issues",
+              href: "https://github.com/volcano-sh/agentcube/issues",
             },
             {
-              label: 'Discussions',
-              href: 'https://github.com/volcano-sh/agentcube',
+              label: "Discussions",
+              href: "https://github.com/volcano-sh/agentcube",
             },
             {
-              label: 'Volcano',
-              href: 'https://volcano.sh/en/',
+              label: "Volcano",
+              href: "https://volcano.sh/en/",
             },
           ],
         },
         {
-          title: 'More',
+          title: "More",
           items: [
             {
-              label: 'Blog',
-              to: '/blog',
+              label: "Blog",
+              to: "/blog",
             },
             {
-              label: 'GitHub',
-              href: 'https://github.com/volcano-sh/agentcube',
+              label: "GitHub",
+              href: "https://github.com/volcano-sh/agentcube",
             },
           ],
         },
diff --git a/docs/agentcube/src/components/HomepageFeatures/index.tsx b/docs/agentcube/src/components/HomepageFeatures/index.tsx
index 33033ce42..a48b81bce 100644
--- a/docs/agentcube/src/components/HomepageFeatures/index.tsx
+++ b/docs/agentcube/src/components/HomepageFeatures/index.tsx
@@ -1,56 +1,60 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
-import Heading from '@theme/Heading';
-import styles from './styles.module.css';
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import Heading from "@theme/Heading";
+import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  Svg: React.ComponentType<React.ComponentProps<"svg">>;
   description: ReactNode;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Low-Latency Agent Scheduling',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: "Low-Latency Agent Scheduling",
+    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
     description: (
       <>
-        Fast startup and resume for interactive AI agents.
-        Optimized scheduling paths enable sub-second agent startup and rapid resume from idle states.
+        Fast startup and resume for interactive AI agents. Optimized scheduling
+        paths enable sub-second agent startup and rapid resume from idle states.
       </>
     ),
   },
   {
-    title: 'Stateful Agent Lifecycle',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: "Stateful Agent Lifecycle",
+    Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
     description: (
       <>
-        Built-in state preservation and sleep/resume semantics.
-        Agents retain context across long-running sessions while idle resources are safely released.
+        Built-in state preservation and sleep/resume semantics. Agents retain
+        context across long-running sessions while idle resources are safely
+        released.
       </>
     ),
   },
   {
-    title: 'Efficient Resource Utilization',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: "Efficient Resource Utilization",
+    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
     description: (
       <>
-        High-density placement with performance isolation.
-        Advanced bin-packing maximizes cluster utilization under strict resource and isolation guarantees.
+        High-density placement with performance isolation. Advanced bin-packing
+        maximizes cluster utilization under strict resource and isolation
+        guarantees.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, Svg, description }: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+    <div className={clsx("col col--4")}>
+      <div className={styles.featureCard}>
+        <div className="text--center">
+          <Svg className={styles.featureSvg} role="img" aria-label={title} />
+        </div>
+        <div className="text--center padding-horiz--md padding-top--md">
+          <Heading as="h3">{title}</Heading>
+          <p>{description}</p>
+        </div>
       </div>
     </div>
   );
diff --git a/docs/agentcube/src/components/HomepageFeatures/styles.module.css b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
index b248eb2e5..265889997 100644
--- a/docs/agentcube/src/components/HomepageFeatures/styles.module.css
+++ b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
@@ -1,11 +1,29 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 4rem 0;
   width: 100%;
 }
 
+.featureCard {
+  height: 100%;
+  padding: 1.5rem 1rem 2rem;
+  border-radius: 8px;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.featureCard:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+[data-theme="dark"] .featureCard:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 160px;
+  width: 160px;
 }
diff --git a/docs/agentcube/src/css/custom.css b/docs/agentcube/src/css/custom.css
index 4129a810c..ff1784d5b 100644
--- a/docs/agentcube/src/css/custom.css
+++ b/docs/agentcube/src/css/custom.css
@@ -12,18 +12,20 @@
   --agentcube-accent: #22b8cf;
 
   /* Typography */
-  --ifm-font-family-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --ifm-font-family-base:
+    Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --ifm-code-font-size: 95%;
 
   /* UI */
   --ifm-link-color: var(--ifm-color-primary);
   --ifm-navbar-background-color: #ffffff;
+  --ifm-navbar-shadow: 0 1px 0 0 #e5e7eb;
   --ifm-footer-background-color: #f8fafc;
 
   --docusaurus-highlighted-code-line-bg: rgba(11, 94, 215, 0.08);
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #6ea8fe;
   --ifm-color-primary-dark: #4c8dff;
   --ifm-color-primary-darker: #3b82f6;
@@ -36,13 +38,24 @@
 
   --ifm-background-color: #0b1220;
   --ifm-navbar-background-color: #0b1220;
+  --ifm-navbar-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08);
   --ifm-footer-background-color: #0b1220;
 
   --docusaurus-highlighted-code-line-bg: rgba(110, 168, 254, 0.25);
 }
 
-.container_lyt7 {
-    max-width: 100%;
-    display: flex;
-    justify-content: space-evenly;
-}
\ No newline at end of file
+html {
+  scroll-behavior: smooth;
+}
+
+/* Keyboard focus ring — visible only for keyboard navigation */
+:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Footer border-top to visually separate from page content */
+.footer {
+  border-top: 1px solid var(--ifm-toc-border-color);
+}
diff --git a/docs/agentcube/src/pages/index.module.css b/docs/agentcube/src/pages/index.module.css
index 9f71a5da7..a39c02561 100644
--- a/docs/agentcube/src/pages/index.module.css
+++ b/docs/agentcube/src/pages/index.module.css
@@ -4,7 +4,7 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 5rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -12,7 +12,7 @@
 
 @media screen and (max-width: 996px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 3rem 1.5rem;
   }
 }
 
@@ -20,4 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2rem;
 }
diff --git a/docs/agentcube/src/pages/index.tsx b/docs/agentcube/src/pages/index.tsx
index c2e659369..2ec38e611 100644
--- a/docs/agentcube/src/pages/index.tsx
+++ b/docs/agentcube/src/pages/index.tsx
@@ -1,17 +1,17 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Heading from "@theme/Heading";
 
-import styles from './index.module.css';
+import styles from "./index.module.css";
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
@@ -20,8 +20,15 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
-            Get Started with AgentCube
+            to="/docs/intro"
+          >
+            Get Started
+          </Link>
+          <Link
+            className="button button--outline button--secondary button--lg"
+            href="https://github.com/volcano-sh/agentcube"
+          >
+            View on GitHub
           </Link>
         </div>
       </div>
@@ -30,11 +37,12 @@ function HomepageHeader() {
 }
 
 export default function Home(): ReactNode {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={siteConfig.title}
+      description="Native AI Agent Workload Management for Kubernetes. Fast scheduling, stateful lifecycle, and efficient resource utilization for AI agents."
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />

From b85e39e21eee3b5e4cea70a556c4114d5115c481 Mon Sep 17 00:00:00 2001
From: Vanshika <pahalvanshikaa@gmail.com>
Date: Sun, 28 Jun 2026 01:36:23 +0530
Subject: [PATCH 2/4] feat(website): redesign homepage with Volcano ecosystem
 visual language

- Replace default Docusaurus hero--primary with a custom branded hero
  component implemented via CSS modules
- Define CSS variables for Volcano brand red and blue palette, hero
  background, card backgrounds, borders, shadows, and navbar/footer
  colors, covering both light and dark modes
- Audit existing theme overrides; preserve all variables still in use
  to keep dark mode intact
- Restyle navbar with a thin bottom border, clean spacing, and
  hover accent color using the brand palette
- Restyle footer with a top border, improved typography hierarchy,
  letter-spaced section titles, and hover link accent color
- Add custom button classes (brand-primary, brand-secondary) with
  rounded corners, transition, and hover shadow lift
- Replace undraw template illustration SVGs with original, minimal
  inline vector icons inspired by Kubernetes / cloud infrastructure:
    - Low-Latency Scheduling: clock/speed icon
    - Stateful Lifecycle: isometric cube / layers icon
    - Efficient Resource Utilization: cluster / nodes icon
- Redesign feature cards with rounded corners, light border, subtle
  box-shadow, equal flex heights, and 220ms cubic-bezier hover lift
- Icon container sized at 96px, colored with brand blue accent
- Fix hero title color variable in dark mode so the AgentCube heading
  is fully readable against the dark background
- Run prettier on all modified files

Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
---
 .../src/components/HomepageFeatures/index.tsx |  97 ++++++++-
 .../HomepageFeatures/styles.module.css        |  77 +++++--
 docs/agentcube/src/css/custom.css             | 192 +++++++++++++++---
 docs/agentcube/src/pages/index.module.css     |  47 ++++-
 docs/agentcube/src/pages/index.tsx            |  10 +-
 5 files changed, 358 insertions(+), 65 deletions(-)

diff --git a/docs/agentcube/src/components/HomepageFeatures/index.tsx b/docs/agentcube/src/components/HomepageFeatures/index.tsx
index a48b81bce..9e5646d9a 100644
--- a/docs/agentcube/src/components/HomepageFeatures/index.tsx
+++ b/docs/agentcube/src/components/HomepageFeatures/index.tsx
@@ -5,14 +5,89 @@ import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<"svg">>;
+  icon: ReactNode;
   description: ReactNode;
 };
 
+const LowLatencyIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    className={styles.featureSvg}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 2a10 10 0 0 1 10 10" strokeDasharray="2 2" />
+    <path d="M22 12a10 10 0 0 1-18 6" />
+    <path d="M12 2a10 10 0 0 0-8 4" />
+    <circle cx="12" cy="12" r="6" />
+    <polyline points="12 9 12 12 14.5 13.5" />
+    <line x1="2" y1="8" x2="6" y2="8" />
+    <line x1="1" y1="12" x2="4" y2="12" />
+    <line x1="3" y1="16" x2="7" y2="16" />
+  </svg>
+);
+
+const StatefulLifecycleIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    className={styles.featureSvg}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polygon points="12 2 22 7 12 12 2 7" />
+    <polygon points="2 7 12 12 12 22 2 17" />
+    <polygon points="12 12 22 7 22 17 12 22" />
+    <line x1="12" y1="12" x2="12" y2="22" />
+    <line x1="12" y1="7" x2="2" y2="12" />
+    <line x1="12" y1="7" x2="22" y2="12" />
+    <path d="M4 11.5 L12 15.5 M12 15.5 L20 11.5" />
+    <path d="M6 16.5 L12 19.5 M12 19.5 L18 16.5" />
+  </svg>
+);
+
+const ResourceUtilizationIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    className={styles.featureSvg}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="3" fill="currentColor" fillOpacity="0.1" />
+    <circle cx="12" cy="4" r="2" />
+    <circle cx="4" cy="18" r="2" />
+    <circle cx="20" cy="18" r="2" />
+    <line x1="12" y1="6" x2="12" y2="9" />
+    <line x1="5.5" y1="16.5" x2="10" y2="13.5" />
+    <line x1="18.5" y1="16.5" x2="14" y2="13.5" />
+    <path d="M12 2 L22 17 L2 17 Z" strokeDasharray="2 2" />
+    <line x1="8" y1="21" x2="16" y2="21" strokeWidth="2" />
+    <line
+      x1="10"
+      y1="21"
+      x2="14"
+      y2="21"
+      stroke="var(--brand-red)"
+      strokeWidth="2"
+    />
+  </svg>
+);
+
 const FeatureList: FeatureItem[] = [
   {
     title: "Low-Latency Agent Scheduling",
-    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+    icon: <LowLatencyIcon />,
     description: (
       <>
         Fast startup and resume for interactive AI agents. Optimized scheduling
@@ -22,7 +97,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: "Stateful Agent Lifecycle",
-    Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
+    icon: <StatefulLifecycleIcon />,
     description: (
       <>
         Built-in state preservation and sleep/resume semantics. Agents retain
@@ -33,7 +108,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: "Efficient Resource Utilization",
-    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+    icon: <ResourceUtilizationIcon />,
     description: (
       <>
         High-density placement with performance isolation. Advanced bin-packing
@@ -44,16 +119,16 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-function Feature({ title, Svg, description }: FeatureItem) {
+function Feature({ title, icon, description }: FeatureItem) {
   return (
     <div className={clsx("col col--4")}>
       <div className={styles.featureCard}>
-        <div className="text--center">
-          <Svg className={styles.featureSvg} role="img" aria-label={title} />
-        </div>
-        <div className="text--center padding-horiz--md padding-top--md">
-          <Heading as="h3">{title}</Heading>
-          <p>{description}</p>
+        <div className={styles.featureIconContainer}>{icon}</div>
+        <div className={styles.featureContent}>
+          <Heading as="h3" className={styles.featureCardTitle}>
+            {title}
+          </Heading>
+          <p className={styles.featureCardDescription}>{description}</p>
         </div>
       </div>
     </div>
diff --git a/docs/agentcube/src/components/HomepageFeatures/styles.module.css b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
index 265889997..663ee4037 100644
--- a/docs/agentcube/src/components/HomepageFeatures/styles.module.css
+++ b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
@@ -1,29 +1,78 @@
 .features {
-  display: flex;
-  align-items: center;
-  padding: 4rem 0;
-  width: 100%;
+  padding: 6rem 0;
+  background-color: var(--hero-bg);
+  transition: background-color 0.25s ease;
 }
 
 .featureCard {
+  display: flex;
+  flex-direction: column;
   height: 100%;
-  padding: 1.5rem 1rem 2rem;
-  border-radius: 8px;
+  padding: 2.5rem 2rem;
+  background-color: var(--card-bg);
+  border: 1px solid var(--card-border-color);
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
   transition:
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
+    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.25s ease;
 }
 
 .featureCard:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
+  transform: translateY(-4px);
+  box-shadow: var(--card-shadow-hover);
+  border-color: var(--card-hover-border-color);
 }
 
-[data-theme="dark"] .featureCard:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+.featureIconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+  color: var(--brand-blue);
+  transition: color 0.25s ease;
 }
 
 .featureSvg {
-  height: 160px;
-  width: 160px;
+  height: 96px;
+  width: 96px;
+  transition: transform 0.22s ease;
+}
+
+.featureCard:hover .featureSvg {
+  transform: scale(1.05);
+}
+
+.featureContent {
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.featureCardTitle {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: var(--card-title-color);
+  line-height: 1.4;
+}
+
+.featureCardDescription {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--card-text-color);
+  margin: 0;
+}
+
+@media screen and (max-width: 996px) {
+  .features {
+    padding: 4rem 0;
+  }
+  .featureCard {
+    padding: 2rem 1.5rem;
+    margin-bottom: 1.5rem;
+  }
 }
diff --git a/docs/agentcube/src/css/custom.css b/docs/agentcube/src/css/custom.css
index ff1784d5b..2729d51fd 100644
--- a/docs/agentcube/src/css/custom.css
+++ b/docs/agentcube/src/css/custom.css
@@ -1,15 +1,39 @@
 :root {
-  /* AgentCube Primary (CNCF-style Infra Blue) */
-  --ifm-color-primary: #0b5ed7;
-  --ifm-color-primary-dark: #0a54c1;
-  --ifm-color-primary-darker: #094fb6;
-  --ifm-color-primary-darkest: #073f93;
-  --ifm-color-primary-light: #2b73e0;
-  --ifm-color-primary-lighter: #4d8be7;
-  --ifm-color-primary-lightest: #8cb4f2;
-
-  /* Subtle Agent Accent */
-  --agentcube-accent: #22b8cf;
+  /* Brand colors */
+  --brand-red: #d94841;
+  --brand-blue: #2563eb;
+
+  /* Theme-wide styles */
+  --hero-bg: #ffffff;
+  --hero-title-color: #0f172a;
+  --hero-subtitle-color: #475569;
+
+  --card-bg: #ffffff;
+  --card-border-color: #e2e8f0;
+  --card-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --card-shadow-hover:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --card-hover-border-color: #cbd5e1;
+
+  --nav-border-color: #e2e8f0;
+  --nav-hover-color: var(--brand-red);
+
+  --footer-bg: #f8fafc;
+  --footer-border-color: #e2e8f0;
+  --footer-text-color: #475569;
+  --footer-link-hover-color: var(--brand-red);
+
+  /* Audited Theme Overrides - preserve existing typography and primary values */
+  --ifm-color-primary: var(--brand-blue);
+  --ifm-color-primary-dark: #1d4ed8;
+  --ifm-color-primary-darker: #1e40af;
+  --ifm-color-primary-darkest: #1e3a8a;
+  --ifm-color-primary-light: #3b82f6;
+  --ifm-color-primary-lighter: #60a5fa;
+  --ifm-color-primary-lightest: #93c5fd;
+
+  --agentcube-accent: var(--brand-red);
 
   /* Typography */
   --ifm-font-family-base:
@@ -19,29 +43,49 @@
   /* UI */
   --ifm-link-color: var(--ifm-color-primary);
   --ifm-navbar-background-color: #ffffff;
-  --ifm-navbar-shadow: 0 1px 0 0 #e5e7eb;
-  --ifm-footer-background-color: #f8fafc;
+  --ifm-navbar-shadow: 0 1px 0 0 var(--nav-border-color);
+  --ifm-footer-background-color: var(--footer-bg);
 
-  --docusaurus-highlighted-code-line-bg: rgba(11, 94, 215, 0.08);
+  --docusaurus-highlighted-code-line-bg: rgba(37, 99, 235, 0.08);
 }
 
 [data-theme="dark"] {
-  --ifm-color-primary: #6ea8fe;
-  --ifm-color-primary-dark: #4c8dff;
-  --ifm-color-primary-darker: #3b82f6;
-  --ifm-color-primary-darkest: #2563eb;
-  --ifm-color-primary-light: #8bbcff;
-  --ifm-color-primary-lighter: #b6d1ff;
-  --ifm-color-primary-lightest: #dbe7ff;
+  --brand-red: #f87171; /* lighter red/coral for dark mode readability */
+  --brand-blue: #60a5fa;
+
+  --hero-bg: #0b1220;
+  --hero-title-color: #f8fafc;
+  --hero-subtitle-color: #94a3b8;
+
+  --card-bg: #0f172a;
+  --card-border-color: rgba(255, 255, 255, 0.08);
+  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --card-hover-border-color: rgba(255, 255, 255, 0.15);
+
+  --nav-border-color: rgba(255, 255, 255, 0.08);
+  --nav-hover-color: var(--brand-red);
+
+  --footer-bg: #0b1220;
+  --footer-border-color: rgba(255, 255, 255, 0.08);
+  --footer-text-color: #94a3b8;
 
-  --agentcube-accent: #22d3ee;
+  --ifm-color-primary: #60a5fa;
+  --ifm-color-primary-dark: #3b82f6;
+  --ifm-color-primary-darker: #2563eb;
+  --ifm-color-primary-darkest: #1d4ed8;
+  --ifm-color-primary-light: #93c5fd;
+  --ifm-color-primary-lighter: #c084fc;
+  --ifm-color-primary-lightest: #e9d5ff;
+
+  --agentcube-accent: var(--brand-red);
 
   --ifm-background-color: #0b1220;
   --ifm-navbar-background-color: #0b1220;
-  --ifm-navbar-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08);
-  --ifm-footer-background-color: #0b1220;
+  --ifm-navbar-shadow: 0 1px 0 0 var(--nav-border-color);
+  --ifm-footer-background-color: var(--footer-bg);
 
-  --docusaurus-highlighted-code-line-bg: rgba(110, 168, 254, 0.25);
+  --docusaurus-highlighted-code-line-bg: rgba(96, 165, 250, 0.25);
 }
 
 html {
@@ -55,7 +99,101 @@ html {
   border-radius: 2px;
 }
 
-/* Footer border-top to visually separate from page content */
+/* Navbar refinements */
+.navbar {
+  border-bottom: 1px solid var(--nav-border-color) !important;
+  box-shadow: var(--ifm-navbar-shadow) !important;
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease;
+}
+
+.navbar__link {
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.navbar__link:hover,
+.navbar__link--active {
+  color: var(--nav-hover-color) !important;
+}
+
+/* Footer refinements */
 .footer {
-  border-top: 1px solid var(--ifm-toc-border-color);
+  border-top: 1px solid var(--footer-border-color) !important;
+  background-color: var(--footer-bg) !important;
+  padding: 4rem 2rem 3rem !important;
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease;
+}
+
+.footer__title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 1rem;
+  color: var(--ifm-font-color-base);
+}
+
+.footer__link-item {
+  color: var(--footer-text-color) !important;
+  transition: color 0.2s ease;
+}
+
+.footer__link-item:hover {
+  color: var(--footer-link-hover-color) !important;
+  text-decoration: none;
+}
+
+.footer__copyright {
+  margin-top: 2rem;
+  font-size: 0.8rem;
+  color: var(--footer-text-color);
+  opacity: 0.7;
+}
+
+/* Custom Button Styles */
+.button--brand-primary {
+  background-color: var(--brand-red) !important;
+  color: #ffffff !important;
+  border: 1px solid var(--brand-red) !important;
+  font-weight: 600;
+  border-radius: 6px;
+  transition: all 0.2s ease-in-out;
+}
+
+.button--brand-primary:hover {
+  background-color: #c53c35 !important;
+  border-color: #c53c35 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(217, 72, 65, 0.25);
+  text-decoration: none;
+}
+
+.button--brand-secondary {
+  background-color: transparent !important;
+  color: var(--brand-blue) !important;
+  border: 1px solid var(--brand-blue) !important;
+  font-weight: 500;
+  border-radius: 6px;
+  transition: all 0.2s ease-in-out;
+}
+
+.button--brand-secondary:hover {
+  background-color: rgba(37, 99, 235, 0.04) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .button--brand-secondary {
+  color: var(--brand-blue) !important;
+  border-color: var(--brand-blue) !important;
+}
+
+[data-theme="dark"] .button--brand-secondary:hover {
+  background-color: rgba(96, 165, 250, 0.06) !important;
+  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.12);
 }
diff --git a/docs/agentcube/src/pages/index.module.css b/docs/agentcube/src/pages/index.module.css
index a39c02561..8176fc4d2 100644
--- a/docs/agentcube/src/pages/index.module.css
+++ b/docs/agentcube/src/pages/index.module.css
@@ -3,17 +3,36 @@
  * and scoped locally.
  */
 
-.heroBanner {
-  padding: 5rem 0;
+.heroSection {
+  background-color: var(--hero-bg);
+  padding: 6.5rem 0 5.5rem;
   text-align: center;
   position: relative;
   overflow: hidden;
+  border-bottom: 1px solid var(--nav-border-color);
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 3rem 1.5rem;
-  }
+.heroTitle {
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--hero-title-color);
+  margin-bottom: 1.25rem;
+  font-family: var(--ifm-font-family-base);
+}
+
+.heroSubtitle {
+  font-size: 1.35rem;
+  font-weight: 400;
+  line-height: 1.6;
+  max-width: 720px;
+  margin: 0 auto 2.5rem;
+  color: var(--hero-subtitle-color);
+  font-family: var(--ifm-font-family-base);
 }
 
 .buttons {
@@ -21,6 +40,18 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 2rem;
+  gap: 1.25rem;
+}
+
+@media screen and (max-width: 996px) {
+  .heroSection {
+    padding: 4.5rem 1.5rem 4rem;
+  }
+  .heroTitle {
+    font-size: 2.5rem;
+  }
+  .heroSubtitle {
+    font-size: 1.15rem;
+    margin-bottom: 2rem;
+  }
 }
diff --git a/docs/agentcube/src/pages/index.tsx b/docs/agentcube/src/pages/index.tsx
index 2ec38e611..fee464fb5 100644
--- a/docs/agentcube/src/pages/index.tsx
+++ b/docs/agentcube/src/pages/index.tsx
@@ -11,21 +11,21 @@ import styles from "./index.module.css";
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={styles.heroSection}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <Heading as="h1" className={styles.heroTitle}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
-            className="button button--secondary button--lg"
+            className="button button--brand-primary button--lg"
             to="/docs/intro"
           >
             Get Started
           </Link>
           <Link
-            className="button button--outline button--secondary button--lg"
+            className="button button--brand-secondary button--lg"
             href="https://github.com/volcano-sh/agentcube"
           >
             View on GitHub

From d7a2f07046c00e43fd3118410a6449191a3ea42c Mon Sep 17 00:00:00 2001
From: Vanshika <pahalvanshikaa@gmail.com>
Date: Sun, 28 Jun 2026 01:56:42 +0530
Subject: [PATCH 3/4] Improve homepage accessibility and website layout

Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
---
 docs/agentcube/docusaurus.config.ts                    |  2 +-
 .../src/components/HomepageFeatures/styles.module.css  |  4 ++--
 docs/agentcube/src/css/custom.css                      | 10 ++++++++--
 docs/agentcube/src/pages/index.tsx                     |  3 +--
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/docs/agentcube/docusaurus.config.ts b/docs/agentcube/docusaurus.config.ts
index 3718962ca..cbe328f41 100644
--- a/docs/agentcube/docusaurus.config.ts
+++ b/docs/agentcube/docusaurus.config.ts
@@ -122,7 +122,7 @@ const config: Config = {
             },
             {
               label: "Discussions",
-              href: "https://github.com/volcano-sh/agentcube",
+              href: "https://github.com/volcano-sh/agentcube/discussions",
             },
             {
               label: "Volcano",
diff --git a/docs/agentcube/src/components/HomepageFeatures/styles.module.css b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
index 663ee4037..541c1f603 100644
--- a/docs/agentcube/src/components/HomepageFeatures/styles.module.css
+++ b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
@@ -56,14 +56,14 @@
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 1rem;
-  color: var(--card-title-color);
+  color: var(--card-title-color, var(--ifm-font-color-base));
   line-height: 1.4;
 }
 
 .featureCardDescription {
   font-size: 0.95rem;
   line-height: 1.6;
-  color: var(--card-text-color);
+  color: var(--card-text-color, var(--ifm-color-emphasis-700));
   margin: 0;
 }
 
diff --git a/docs/agentcube/src/css/custom.css b/docs/agentcube/src/css/custom.css
index 2729d51fd..a2a9e46d3 100644
--- a/docs/agentcube/src/css/custom.css
+++ b/docs/agentcube/src/css/custom.css
@@ -75,8 +75,8 @@
   --ifm-color-primary-darker: #2563eb;
   --ifm-color-primary-darkest: #1d4ed8;
   --ifm-color-primary-light: #93c5fd;
-  --ifm-color-primary-lighter: #c084fc;
-  --ifm-color-primary-lightest: #e9d5ff;
+  --ifm-color-primary-lighter: #bfdbfe;
+  --ifm-color-primary-lightest: #dbeafe;
 
   --agentcube-accent: var(--brand-red);
 
@@ -92,6 +92,12 @@ html {
   scroll-behavior: smooth;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
 /* Keyboard focus ring — visible only for keyboard navigation */
 :focus-visible {
   outline: 2px solid var(--ifm-color-primary);
diff --git a/docs/agentcube/src/pages/index.tsx b/docs/agentcube/src/pages/index.tsx
index fee464fb5..896bca490 100644
--- a/docs/agentcube/src/pages/index.tsx
+++ b/docs/agentcube/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
@@ -40,7 +39,7 @@ export default function Home(): ReactNode {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={siteConfig.title}
+      title="Native AI Agent Workload Management"
       description="Native AI Agent Workload Management for Kubernetes. Fast scheduling, stateful lifecycle, and efficient resource utilization for AI agents."
     >
       <HomepageHeader />

From 34c450a847d23154750d78d6c226ba2e085eca67 Mon Sep 17 00:00:00 2001
From: Vanshika <pahalvanshikaa@gmail.com>
Date: Sun, 28 Jun 2026 02:14:07 +0530
Subject: [PATCH 4/4] fix(website): address review bot feedback on
 accessibility and config

- Replace aria-hidden="true" with role="img" + aria-label on all three
  feature section SVG icons so screen readers can announce their purpose
- Fix placeholder production URL to https://agentcube.volcano.sh for
  correct canonical links and sitemap generation

Signed-off-by: Vanshika <pahalvanshikaa@gmail.com>
---
 docs/agentcube/docusaurus.config.ts                      | 2 +-
 docs/agentcube/src/components/HomepageFeatures/index.tsx | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/agentcube/docusaurus.config.ts b/docs/agentcube/docusaurus.config.ts
index cbe328f41..ac840c6b1 100644
--- a/docs/agentcube/docusaurus.config.ts
+++ b/docs/agentcube/docusaurus.config.ts
@@ -15,7 +15,7 @@ const config: Config = {
   },
 
   // Set the production url of your site here
-  url: "https://your-docusaurus-site.example.com",
+  url: "https://agentcube.volcano.sh",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: "/",
diff --git a/docs/agentcube/src/components/HomepageFeatures/index.tsx b/docs/agentcube/src/components/HomepageFeatures/index.tsx
index 9e5646d9a..327c022f8 100644
--- a/docs/agentcube/src/components/HomepageFeatures/index.tsx
+++ b/docs/agentcube/src/components/HomepageFeatures/index.tsx
@@ -18,7 +18,8 @@ const LowLatencyIcon = () => (
     strokeWidth="1.5"
     strokeLinecap="round"
     strokeLinejoin="round"
-    aria-hidden="true"
+    role="img"
+    aria-label="Low-latency agent scheduling icon"
   >
     <path d="M12 2a10 10 0 0 1 10 10" strokeDasharray="2 2" />
     <path d="M22 12a10 10 0 0 1-18 6" />
@@ -40,7 +41,8 @@ const StatefulLifecycleIcon = () => (
     strokeWidth="1.5"
     strokeLinecap="round"
     strokeLinejoin="round"
-    aria-hidden="true"
+    role="img"
+    aria-label="Stateful agent lifecycle icon"
   >
     <polygon points="12 2 22 7 12 12 2 7" />
     <polygon points="2 7 12 12 12 22 2 17" />
@@ -62,7 +64,8 @@ const ResourceUtilizationIcon = () => (
     strokeWidth="1.5"
     strokeLinecap="round"
     strokeLinejoin="round"
-    aria-hidden="true"
+    role="img"
+    aria-label="Efficient resource utilization icon"
   >
     <circle cx="12" cy="12" r="3" fill="currentColor" fillOpacity="0.1" />
     <circle cx="12" cy="4" r="2" />