diff --git a/apps/website/package.json b/apps/website/package.json
index 6ea3e26c..f93d32ae 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -25,6 +25,7 @@
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "gray-matter": "^4.0.3",
+    "lucide-react": "0.541.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/apps/website/src/components/home/FeatureCard.tsx b/apps/website/src/components/home/FeatureCard.tsx
new file mode 100644
index 00000000..da8164d4
--- /dev/null
+++ b/apps/website/src/components/home/FeatureCard.tsx
@@ -0,0 +1,30 @@
+import { LucideIcon } from 'lucide-react';
+import React from 'react';
+
+interface FeatureCardProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  gradient: string;
+  borderColor: string;
+}
+
+export default function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+  gradient,
+  borderColor,
+}: FeatureCardProps): React.JSX.Element {
+  return (
+    <div
+      className={`p-6 rounded-xl bg-gradient-to-br ${gradient} border ${borderColor} hover:shadow-xl group`}
+    >
+      <div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
+        <Icon className="w-6 h-6" />
+      </div>
+      <h3 className="text-lg font-semibold mb-2">{title}</h3>
+      <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
+    </div>
+  );
+}
diff --git a/apps/website/src/components/home/FeaturesSection.tsx b/apps/website/src/components/home/FeaturesSection.tsx
new file mode 100644
index 00000000..6ba7b01b
--- /dev/null
+++ b/apps/website/src/components/home/FeaturesSection.tsx
@@ -0,0 +1,83 @@
+import { Bot, Code, Database, Globe, Terminal, Wrench } from 'lucide-react';
+import React from 'react';
+import FeatureCard from './FeatureCard';
+
+const features = [
+  {
+    icon: Bot,
+    title: 'All Command Types',
+    description:
+      'Slash commands, context menus, and message commands with automatic registration.',
+    gradient:
+      'from-green-50 to-white dark:from-green-900/20 dark:to-gray-900/20',
+    borderColor: 'border-green-200/50 dark:border-green-800/50',
+  },
+  {
+    icon: Globe,
+    title: 'Internationalization',
+    description:
+      'Built-in i18n support with the @commandkit/i18n plugin for global audiences.',
+    gradient:
+      'from-indigo-50 to-white dark:from-indigo-900/20 dark:to-gray-900/20',
+    borderColor: 'border-indigo-200/50 dark:border-indigo-800/50',
+  },
+  {
+    icon: Wrench,
+    title: 'Middleware System',
+    description:
+      'Powerful middleware system for command validation, authentication, and processing.',
+    gradient:
+      'from-orange-50 to-white dark:from-orange-900/20 dark:to-gray-900/20',
+    borderColor: 'border-orange-200/50 dark:border-orange-800/50',
+  },
+  {
+    icon: Code,
+    title: 'JSX Components',
+    description:
+      'Declare Discord interaction components and modals using familiar JSX syntax.',
+    gradient: 'from-cyan-50 to-white dark:from-cyan-900/20 dark:to-gray-900/20',
+    borderColor: 'border-cyan-200/50 dark:border-cyan-800/50',
+  },
+  {
+    icon: Database,
+    title: 'Built-in Caching',
+    description:
+      'Customizable cache system with @commandkit/cache for fast data storage and retrieval.',
+    gradient: 'from-teal-50 to-white dark:from-teal-900/20 dark:to-gray-900/20',
+    borderColor: 'border-teal-200/50 dark:border-teal-800/50',
+  },
+  {
+    icon: Terminal,
+    title: 'CLI Tools',
+    description:
+      'Comprehensive command-line interface for development, deployment, and management.',
+    gradient: 'from-gray-50 to-white dark:from-gray-900/20 dark:to-gray-800/20',
+    borderColor: 'border-gray-200/50 dark:border-gray-700/50',
+  },
+];
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <section className="relative z-10 pb-20">
+      <div className="max-w-6xl mx-auto px-4">
+        <div className="mb-12">
+          <h2 className="text-3xl font-bold text-center mb-2">
+            Everything you need to build amazing Discord bots
+          </h2>
+          <p className="text-center text-gray-600 dark:text-gray-400 mb-8">
+            CommandKit provides a comprehensive set of tools and features for
+            Discord bot development
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-center">
+          {features.map((feature, index) => (
+            <div key={index}>
+              <FeatureCard {...feature} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/home/GetStartedSection.tsx b/apps/website/src/components/home/GetStartedSection.tsx
new file mode 100644
index 00000000..2372b435
--- /dev/null
+++ b/apps/website/src/components/home/GetStartedSection.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Terminal } from 'lucide-react';
+
+export default function GetStartedSection(): React.JSX.Element {
+  return (
+    <section className="relative z-10 py-20">
+      <div className="max-w-4xl mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold mb-4">Ready to get started?</h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400">
+            Create your first CommandKit bot in minutes with our simple setup
+            process
+          </p>
+        </div>
+
+        <div className="bg-gray-900 rounded-xl p-6 mb-8 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-r from-purple-600/10 to-blue-600/10"></div>
+          <div className="relative">
+            <div className="flex items-center gap-2 mb-4">
+              <Terminal className="w-5 h-5 text-green-400" />
+              <span className="text-green-400 font-mono text-sm">Terminal</span>
+            </div>
+            <div className="font-mono text-white">
+              <div className="flex gap-1">
+                <span className="text-gray-400">$</span>
+                <span className="text-cyan-300">
+                  npm create commandkit@next
+                </span>
+              </div>
+              <div className="text-gray-400 mt-2">
+                # Follow the interactive setup
+              </div>
+              <div className="flex gap-1 mt-2">
+                <span className="text-gray-400">$</span>
+                <span className="text-cyan-300">npm run dev</span>
+              </div>
+              <div className="text-green-400 mt-2">
+                Logged in as your_bot_name!
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/home/HeroSection.tsx b/apps/website/src/components/home/HeroSection.tsx
new file mode 100644
index 00000000..889db910
--- /dev/null
+++ b/apps/website/src/components/home/HeroSection.tsx
@@ -0,0 +1,59 @@
+import Link from '@docusaurus/Link';
+import { BookOpen, Code, Github } from 'lucide-react';
+import React from 'react';
+import { themeColors } from './theme';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <section className="relative z-10 w-72 h-96 mx-auto text-center mt-32 mb-48 lg:mb-32 md:mb-16 flex items-center justify-center flex-col md:flex-row-reverse md:gap-2 md:text-left md:mt-12 md:w-[700px] lg:w-[850px]">
+      <img
+        src="/img/logo.png"
+        alt="CommandKit logo"
+        className="md:w-[250px] lg:w-[280px] mb-10 md:mb-0 select-none drop-shadow-2xl"
+        width={250}
+        height={250}
+        draggable={false}
+      />
+
+      <div className="relative">
+        <p className="text-4xl font-bold mb-5 md:text-5xl lg:text-6xl relative">
+          Let{' '}
+          <span
+            className={`text-transparent bg-clip-text bg-gradient-to-r ${themeColors.gradients.primary} relative`}
+          >
+            CommandKit
+          </span>{' '}
+          handle it for you!
+        </p>
+        <p className="lg:text-lg text-gray-600 dark:text-gray-300">
+          The discord.js meta-framework for building powerful, modular, and
+          extensible Discord bots with ease.
+        </p>
+
+        <div className="flex items-center justify-center gap-3 mt-10 md:justify-start [&>a]:text-white [&>a]:hover:text-white">
+          <Link
+            to="/docs/guide/getting-started/introduction"
+            className={`font-semibold bg-gradient-to-r ${themeColors.gradients.purple} hover:from-[#9a60f7] hover:to-[#7e33f6] py-2 px-4 rounded-full shadow-lg hover:shadow-xl flex items-center gap-2`}
+          >
+            <BookOpen className="w-4 h-4" />
+            Guide
+          </Link>
+          <Link
+            to="/docs/api-reference/commandkit/"
+            className={`font-semibold bg-gradient-to-r ${themeColors.gradients.blue} hover:from-blue-600 hover:to-blue-700 py-2 px-4 rounded-full shadow-lg hover:shadow-xl flex items-center gap-2`}
+          >
+            <Code className="w-4 h-4" />
+            API <span className="hidden md:inline">Reference</span>
+          </Link>
+          <Link
+            href="https://github.com/underctrl-io/commandkit"
+            className={`font-semibold bg-gradient-to-r ${themeColors.gradients.pink} hover:from-[#f06292] hover:to-[#e91e63] py-2 px-4 rounded-full shadow-lg hover:shadow-xl flex items-center gap-2`}
+          >
+            <Github className="w-4 h-4" />
+            GitHub
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/home/PluginsSection.tsx b/apps/website/src/components/home/PluginsSection.tsx
new file mode 100644
index 00000000..e7fb74fa
--- /dev/null
+++ b/apps/website/src/components/home/PluginsSection.tsx
@@ -0,0 +1,151 @@
+import Link from '@docusaurus/Link';
+import {
+  BarChart3,
+  Brain,
+  Calendar,
+  Code2,
+  Database,
+  Globe,
+  Server,
+  Wrench,
+} from 'lucide-react';
+import React from 'react';
+
+const plugins = [
+  {
+    icon: Brain,
+    name: '@commandkit/ai',
+    description:
+      'Execute bot commands using large language models with natural language processing.',
+    color: 'purple',
+    docUrl: '/docs/guide/official-plugins/commandkit-ai',
+  },
+  {
+    icon: BarChart3,
+    name: '@commandkit/analytics',
+    description:
+      'Track bot usage, command performance, and user engagement with Posthog and Umami.',
+    color: 'blue',
+    docUrl: '/docs/guide/official-plugins/commandkit-analytics',
+  },
+  {
+    icon: Database,
+    name: '@commandkit/cache',
+    description:
+      'High-performance caching system for speedy data storage and retrieval.',
+    color: 'green',
+    docUrl: '/docs/guide/official-plugins/commandkit-cache',
+  },
+  {
+    icon: Wrench,
+    name: '@commandkit/devtools',
+    description:
+      'Comprehensive development tools with web interface for debugging and monitoring.',
+    color: 'orange',
+    docUrl: '/docs/guide/official-plugins/commandkit-devtools',
+  },
+  {
+    icon: Globe,
+    name: '@commandkit/i18n',
+    description:
+      'Complete internationalization support for building global Discord applications.',
+    color: 'indigo',
+    docUrl: '/docs/guide/official-plugins/commandkit-i18n',
+  },
+  {
+    icon: Code2,
+    name: '@commandkit/legacy',
+    description: 'Support for migrating from CommandKit v0 to CommandKit v1.',
+    color: 'gray',
+    docUrl: '/docs/guide/official-plugins/commandkit-legacy',
+  },
+  {
+    icon: Server,
+    name: '@commandkit/redis',
+    description:
+      'Redis integration for distributed caching and data persistence across bot instances.',
+    color: 'red',
+    docUrl: '/docs/guide/official-plugins/commandkit-redis',
+  },
+  {
+    icon: Calendar,
+    name: '@commandkit/tasks',
+    description:
+      'Scheduled task management and cron job system for automated bot operations.',
+    color: 'pink',
+    docUrl: '/docs/guide/official-plugins/commandkit-tasks',
+  },
+];
+
+const iconColors = {
+  purple: 'from-purple-500 to-purple-600',
+  blue: 'from-blue-500 to-blue-600',
+  green: 'from-green-500 to-green-600',
+  orange: 'from-orange-500 to-orange-600',
+  indigo: 'from-indigo-500 to-indigo-600',
+  pink: 'from-pink-500 to-pink-600',
+  cyan: 'from-cyan-500 to-cyan-600',
+  gray: 'from-gray-500 to-gray-600',
+  yellow: 'from-yellow-500 to-yellow-600',
+  red: 'from-red-500 to-red-600',
+};
+
+export default function PluginsSection(): React.JSX.Element {
+  return (
+    <section className="relative z-10 py-20 bg-gray-50/50 dark:bg-gray-900/20">
+      <div className="max-w-6xl mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold mb-4">Powerful Plugin Ecosystem</h2>
+          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
+            Extend CommandKit with plugins that add specialized functionality to
+            your Discord bots. From AI integration to analytics, CommandKiti has
+            you covered.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {plugins.map((plugin, index) => {
+            const IconComponent = plugin.icon;
+            return (
+              <Link
+                key={index}
+                to={plugin.docUrl}
+                className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-lg border border-gray-200/50 dark:border-gray-700/50 group no-underline hover:no-underline block"
+              >
+                <div className="mb-4">
+                  <div
+                    className={`w-12 h-12 bg-gradient-to-r ${iconColors[plugin.color]} rounded-lg flex items-center justify-center`}
+                  >
+                    <IconComponent className="w-6 h-6 text-white" />
+                  </div>
+                </div>
+
+                <h3 className="text-lg font-semibold mb-2 font-mono text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400">
+                  {plugin.name}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+                  {plugin.description}
+                </p>
+              </Link>
+            );
+          })}
+        </div>
+
+        <div className="text-center mt-12">
+          <div className="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+            <Code2 className="w-5 h-5 text-gray-500" />
+            <span className="text-sm text-gray-600 dark:text-gray-400">
+              Build your own custom plugins!
+              <a
+                href="/docs/guide/creating-plugins/creating-runtime-plugin"
+                className="ml-1 text-purple-600 hover:text-purple-700 dark:text-purple-400"
+              >
+                Learn how to create plugins
+              </a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/home/index.ts b/apps/website/src/components/home/index.ts
new file mode 100644
index 00000000..1605e2f8
--- /dev/null
+++ b/apps/website/src/components/home/index.ts
@@ -0,0 +1,6 @@
+export { default as HeroSection } from './HeroSection';
+export { default as FeaturesSection } from './FeaturesSection';
+export { default as PluginsSection } from './PluginsSection';
+export { default as GetStartedSection } from './GetStartedSection';
+export { default as FeatureCard } from './FeatureCard';
+export { themeColors } from './theme';
diff --git a/apps/website/src/components/home/theme.ts b/apps/website/src/components/home/theme.ts
new file mode 100644
index 00000000..c8c26b37
--- /dev/null
+++ b/apps/website/src/components/home/theme.ts
@@ -0,0 +1,20 @@
+export const themeColors = {
+  primary: {
+    purple: '#b079fc',
+    purpleDark: '#9a60f7',
+    purpleDarker: '#7e33f6',
+  },
+  secondary: {
+    blue: '#3b82f6',
+    blueDark: '#2563eb',
+    pink: '#fc7993',
+    pinkDark: '#f06292',
+    orange: '#ffbc6f',
+  },
+  gradients: {
+    primary: 'from-[#ffbc6f] to-[#b079fc]',
+    purple: 'from-[#b079fc] to-[#9a60f7]',
+    blue: 'from-blue-500 to-blue-600',
+    pink: 'from-[#fc7993] to-[#f06292]',
+  },
+} as const;
diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
index 5e2c64ed..b9d07df5 100644
--- a/apps/website/src/pages/index.tsx
+++ b/apps/website/src/pages/index.tsx
@@ -1,128 +1,17 @@
 import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
+import {
+  FeaturesSection,
+  GetStartedSection,
+  HeroSection,
+  PluginsSection,
+} from '../components/home';
 
-// Floating particles component
-function FloatingParticles() {
-  return (
-    <div className="absolute inset-0 overflow-hidden pointer-events-none">
-      {/* Large floating circles */}
-      <div className="absolute top-20 left-10 w-32 h-32 bg-purple-500/10 rounded-full animate-pulse"></div>
-      <div className="absolute top-40 right-20 w-24 h-24 bg-blue-500/10 rounded-full animate-bounce delay-1000"></div>
-      <div className="absolute bottom-32 left-20 w-20 h-20 bg-pink-500/10 rounded-full animate-pulse delay-500"></div>
-
-      {/* SVG Particles */}
-      <svg
-        className="absolute inset-0 w-full h-full"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        {/* Animated dots */}
-        <circle cx="100" cy="150" r="3" fill="rgba(164, 110, 248, 0.3)">
-          <animate
-            attributeName="cy"
-            values="150;120;150"
-            dur="3s"
-            repeatCount="indefinite"
-          />
-        </circle>
-        <circle cx="200" cy="100" r="2" fill="rgba(126, 51, 246, 0.4)">
-          <animate
-            attributeName="cx"
-            values="200;230;200"
-            dur="4s"
-            repeatCount="indefinite"
-          />
-        </circle>
-        <circle cx="300" cy="200" r="4" fill="rgba(176, 121, 252, 0.2)">
-          <animate
-            attributeName="r"
-            values="4;6;4"
-            dur="2s"
-            repeatCount="indefinite"
-          />
-        </circle>
-        <circle cx="80%" cy="30%" r="2" fill="rgba(164, 110, 248, 0.3)">
-          <animate
-            attributeName="cy"
-            values="30%;25%;30%"
-            dur="5s"
-            repeatCount="indefinite"
-          />
-        </circle>
-        <circle cx="90%" cy="60%" r="3" fill="rgba(204, 138, 250, 0.4)">
-          <animate
-            attributeName="cx"
-            values="90%;85%;90%"
-            dur="3.5s"
-            repeatCount="indefinite"
-          />
-        </circle>
-
-        {/* Animated paths/lines */}
-        <path
-          d="M50,80 Q100,50 150,80"
-          stroke="rgba(164, 110, 248, 0.2)"
-          strokeWidth="1"
-          fill="none"
-        >
-          <animate
-            attributeName="d"
-            values="M50,80 Q100,50 150,80;M50,80 Q100,40 150,80;M50,80 Q100,50 150,80"
-            dur="4s"
-            repeatCount="indefinite"
-          />
-        </path>
-        <path
-          d="M250,150 Q300,120 350,150"
-          stroke="rgba(126, 51, 246, 0.15)"
-          strokeWidth="1"
-          fill="none"
-        >
-          <animate
-            attributeName="d"
-            values="M250,150 Q300,120 350,150;M250,150 Q300,110 350,150;M250,150 Q300,120 350,150"
-            dur="5s"
-            repeatCount="indefinite"
-          />
-        </path>
-
-        {/* Geometric shapes */}
-        <polygon points="70,250 80,230 90,250" fill="rgba(164, 110, 248, 0.2)">
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            values="0 80 240;360 80 240"
-            dur="8s"
-            repeatCount="indefinite"
-          />
-        </polygon>
-        <rect
-          x="75%"
-          y="20%"
-          width="8"
-          height="8"
-          fill="rgba(176, 121, 252, 0.3)"
-          rx="1"
-        >
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            values="0 79% 24%;45 79% 24%"
-            dur="6s"
-            repeatCount="indefinite"
-          />
-        </rect>
-      </svg>
-    </div>
-  );
-}
-
-// Background gradient component
 function BackgroundGradient() {
   return (
     <div className="absolute inset-0 overflow-hidden pointer-events-none">
-      <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-purple-400/20 to-transparent rounded-full blur-3xl animate-pulse"></div>
-      <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-tr from-blue-400/15 to-transparent rounded-full blur-3xl animate-pulse delay-1000"></div>
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-gradient-to-r from-pink-400/10 to-purple-400/10 rounded-full blur-3xl animate-pulse delay-500"></div>
+      <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-purple-400/20 to-transparent rounded-full blur-3xl"></div>
+      <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-tr from-blue-400/15 to-transparent rounded-full blur-3xl"></div>
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-gradient-to-r from-pink-400/10 to-purple-400/10 rounded-full blur-3xl"></div>
     </div>
   );
 }
@@ -132,139 +21,11 @@ export default function Home(): React.JSX.Element {
     <Layout>
       <div className="relative min-h-screen overflow-hidden">
         <BackgroundGradient />
-        <FloatingParticles />
-
-        <section className="relative z-10 w-72 h-96 mx-auto text-center mt-32 mb-48 lg:mb-32 md:mb-16 flex items-center justify-center flex-col md:flex-row-reverse md:gap-2 md:text-left md:mt-12 md:w-[700px] lg:w-[850px]">
-          <img
-            src="/img/logo.png"
-            alt="CommandKit logo"
-            className="md:w-[250px] lg:w-[280px] mb-10 md:mb-0 select-none drop-shadow-2xl hover:drop-shadow-[0_20px_35px_rgba(164,110,248,0.3)] transition-all duration-500"
-            width={250}
-            height={250}
-            draggable={false}
-          />
-
-          <div className="relative">
-            {/* Decorative elements around text */}
-            <div className="absolute -top-4 -left-4 w-8 h-8 border-2 border-purple-400/30 rounded-full animate-spin-slow"></div>
-            <div className="absolute -bottom-4 -right-4 w-6 h-6 bg-gradient-to-r from-purple-400/30 to-pink-400/30 rounded-full animate-pulse"></div>
-
-            <p className="text-4xl font-bold mb-5 md:text-5xl lg:text-6xl relative">
-              Let{' '}
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#ffbc6f] to-[#b079fc] relative">
-                CommandKit
-                {/* Sparkle effect */}
-                <span className="absolute -top-2 -right-2 text-yellow-400 animate-ping text-sm">
-                  ✨
-                </span>
-              </span>{' '}
-              handle it for you!
-            </p>
-            <p className="lg:text-lg text-gray-600 dark:text-gray-300">
-              The discord.js meta-framework for building powerful, modular, and
-              extensible Discord bots with ease.
-            </p>
-
-            <div className="flex items-center justify-center gap-3 mt-10 md:justify-start [&>a]:text-white [&>a]:hover:text-white">
-              <Link
-                to="/docs/guide/getting-started/introduction"
-                className="font-semibold bg-gradient-to-r from-[#b079fc] to-[#9a60f7] hover:from-[#9a60f7] hover:to-[#7e33f6] py-2 px-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"
-              >
-                Guide
-              </Link>
-              <Link
-                to="/docs/api-reference/commandkit/"
-                className="font-semibold bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 py-2 px-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"
-              >
-                API <span className="hidden md:inline">Reference</span>
-              </Link>
-              <Link
-                href="https://github.com/underctrl-io/commandkit"
-                className="font-semibold bg-gradient-to-r from-[#fc7993] to-[#f06292] hover:from-[#f06292] hover:to-[#e91e63] py-2 px-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"
-              >
-                GitHub
-              </Link>
-            </div>
-          </div>
-        </section>
-
-        {/* Additional decorative section */}
-        <section className="relative z-10 pb-20">
-          <div className="max-w-4xl mx-auto px-4">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
-              {/* Feature cards with animated icons */}
-              <div className="p-6 rounded-xl bg-gradient-to-br from-purple-50 to-white dark:from-purple-900/20 dark:to-gray-900/20 border border-purple-200/50 dark:border-purple-800/50 hover:shadow-xl transition-all duration-300 group">
-                <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                  <svg
-                    className="w-6 h-6 text-white"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M13 10V3L4 14h7v7l9-11h-7z"
-                    />
-                  </svg>
-                </div>
-                <h3 className="text-lg font-semibold mb-2">Fast Setup</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Get your bot running in minutes with our streamlined setup
-                  process and powerful CLI tools.
-                </p>
-              </div>
-
-              <div className="p-6 rounded-xl bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-900/20 border border-blue-200/50 dark:border-blue-800/50 hover:shadow-xl transition-all duration-300 group">
-                <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                  <svg
-                    className="w-6 h-6 text-white"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                    />
-                  </svg>
-                </div>
-                <h3 className="text-lg font-semibold mb-2">Straightforward</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Build scalable bots without writing unnecessary, boilerplate
-                  code.
-                </p>
-              </div>
 
-              <div className="p-6 rounded-xl bg-gradient-to-br from-pink-50 to-white dark:from-pink-900/20 dark:to-gray-900/20 border border-pink-200/50 dark:border-pink-800/50 hover:shadow-xl transition-all duration-300 group">
-                <div className="w-12 h-12 mx-auto mb-4 bg-gradient-to-r from-pink-500 to-pink-600 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                  <svg
-                    className="w-6 h-6 text-white"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                    />
-                  </svg>
-                </div>
-                <h3 className="text-lg font-semibold mb-2">
-                  Developer Friendly
-                </h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Intuitive API design with TypeScript support and great DX.
-                </p>
-              </div>
-            </div>
-          </div>
-        </section>
+        <HeroSection />
+        <FeaturesSection />
+        <PluginsSection />
+        <GetStartedSection />
       </div>
     </Layout>
   );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6bb23b9d..2e80f7e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -152,6 +152,9 @@ importers:
       gray-matter:
         specifier: ^4.0.3
         version: 4.0.3
+      lucide-react:
+        specifier: 0.541.0
+        version: 0.541.0(react@19.1.1)
       prism-react-renderer:
         specifier: ^2.3.0
         version: 2.4.1(react@19.1.1)
@@ -13970,7 +13973,7 @@ snapshots:
   '@types/react-router@5.1.20':
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 19.1.8
+      '@types/react': 19.1.11
 
   '@types/react@19.1.10':
     dependencies: