Feat/improve website layout

docs/agentcube/docusaurus.config.ts

@@ -1,147 +1,145 @@
-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: {
     v4: true, // Improve compatibility with the upcoming Docusaurus v4
   },
 
   // 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: '/',
+  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,
     ],
   ],
 
   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/discussions",
             },
             {
-              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",
             },
           ],
         },

docs/agentcube/src/components/HomepageFeatures/index.tsx

@@ -1,56 +1,138 @@
-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'>>;
+  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"
+    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" />
+    <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"
+    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" />
+    <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"
+    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" />
+    <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,
+    title: "Low-Latency Agent Scheduling",
+    icon: <LowLatencyIcon />,
     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",
+    icon: <StatefulLifecycleIcon />,
     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",
+    icon: <ResourceUtilizationIcon />,
     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, icon, 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={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>
   );