docs: update homepage

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"

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

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

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

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

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

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';