Skip to content

Commit 90242e8

Browse files
notunderctrlnotunderctrl
committed
docs: update homepage
1 parent 5e5d500 commit 90242e8

File tree

10 files changed

+413
-253
lines changed

10 files changed

+413
-253
lines changed

‎apps/website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@mdx-js/react": "^3.0.0",
2626
"clsx": "^2.0.0",
2727
"gray-matter": "^4.0.3",
28+
"lucide-react": "0.541.0",
2829
"prism-react-renderer": "^2.3.0",
2930
"react": "^19.0.0",
3031
"react-dom": "^19.0.0"

‎apps/website/src/components/home/FeatureCard.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { LucideIcon } from 'lucide-react';
2+
import React from 'react';
3+
4+
interface FeatureCardProps {
5+
icon: LucideIcon;
6+
title: string;
7+
description: string;
8+
gradient: string;
9+
borderColor: string;
10+
}
11+
12+
export default function FeatureCard({
13+
icon: Icon,
14+
title,
15+
description,
16+
gradient,
17+
borderColor,
18+
}: FeatureCardProps): React.JSX.Element {
19+
return (
20+
<div
21+
className={`p-6 rounded-xl bg-gradient-to-br ${gradient} border ${borderColor} hover:shadow-xl group`}
22+
>
23+
<div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
24+
<Icon className="w-6 h-6" />
25+
</div>
26+
<h3 className="text-lg font-semibold mb-2">{title}</h3>
27+
<p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
28+
</div>
29+
);
30+
}

‎apps/website/src/components/home/FeaturesSection.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Bot, Code, Database, Globe, Terminal, Wrench } from 'lucide-react';
2+
import React from 'react';
3+
import FeatureCard from './FeatureCard';
4+
5+
const features = [
6+
{
7+
icon: Bot,
8+
title: 'All Command Types',
9+
description:
10+
'Slash commands, context menus, and message commands with automatic registration.',
11+
gradient:
12+
'from-green-50 to-white dark:from-green-900/20 dark:to-gray-900/20',
13+
borderColor: 'border-green-200/50 dark:border-green-800/50',
14+
},
15+
{
16+
icon: Globe,
17+
title: 'Internationalization',
18+
description:
19+
'Built-in i18n support with the @commandkit/i18n plugin for global audiences.',
20+
gradient:
21+
'from-indigo-50 to-white dark:from-indigo-900/20 dark:to-gray-900/20',
22+
borderColor: 'border-indigo-200/50 dark:border-indigo-800/50',
23+
},
24+
{
25+
icon: Wrench,
26+
title: 'Middleware System',
27+
description:
28+
'Powerful middleware system for command validation, authentication, and processing.',
29+
gradient:
30+
'from-orange-50 to-white dark:from-orange-900/20 dark:to-gray-900/20',
31+
borderColor: 'border-orange-200/50 dark:border-orange-800/50',
32+
},
33+
{
34+
icon: Code,
35+
title: 'JSX Components',
36+
description:
37+
'Declare Discord interaction components and modals using familiar JSX syntax.',
38+
gradient: 'from-cyan-50 to-white dark:from-cyan-900/20 dark:to-gray-900/20',
39+
borderColor: 'border-cyan-200/50 dark:border-cyan-800/50',
40+
},
41+
{
42+
icon: Database,
43+
title: 'Built-in Caching',
44+
description:
45+
'Customizable cache system with @commandkit/cache for fast data storage and retrieval.',
46+
gradient: 'from-teal-50 to-white dark:from-teal-900/20 dark:to-gray-900/20',
47+
borderColor: 'border-teal-200/50 dark:border-teal-800/50',
48+
},
49+
{
50+
icon: Terminal,
51+
title: 'CLI Tools',
52+
description:
53+
'Comprehensive command-line interface for development, deployment, and management.',
54+
gradient: 'from-gray-50 to-white dark:from-gray-900/20 dark:to-gray-800/20',
55+
borderColor: 'border-gray-200/50 dark:border-gray-700/50',
56+
},
57+
];
58+
59+
export default function FeaturesSection(): React.JSX.Element {
60+
return (
61+
<section className="relative z-10 pb-20">
62+
<div className="max-w-6xl mx-auto px-4">
63+
<div className="mb-12">
64+
<h2 className="text-3xl font-bold text-center mb-2">
65+
Everything you need to build amazing Discord bots
66+
</h2>
67+
<p className="text-center text-gray-600 dark:text-gray-400 mb-8">
68+
CommandKit provides a comprehensive set of tools and features for
69+
Discord bot development
70+
</p>
71+
</div>
72+
73+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-center">
74+
{features.map((feature, index) => (
75+
<div key={index}>
76+
<FeatureCard {...feature} />
77+
</div>
78+
))}
79+
</div>
80+
</div>
81+
</section>
82+
);
83+
}

‎apps/website/src/components/home/GetStartedSection.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { Terminal } from 'lucide-react';
3+
4+
export default function GetStartedSection(): React.JSX.Element {
5+
return (
6+
<section className="relative z-10 py-20">
7+
<div className="max-w-4xl mx-auto px-4">
8+
<div className="text-center mb-12">
9+
<h2 className="text-3xl font-bold mb-4">Ready to get started?</h2>
10+
<p className="text-lg text-gray-600 dark:text-gray-400">
11+
Create your first CommandKit bot in minutes with our simple setup
12+
process
13+
</p>
14+
</div>
15+
16+
<div className="bg-gray-900 rounded-xl p-6 mb-8 relative overflow-hidden">
17+
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/10 to-blue-600/10"></div>
18+
<div className="relative">
19+
<div className="flex items-center gap-2 mb-4">
20+
<Terminal className="w-5 h-5 text-green-400" />
21+
<span className="text-green-400 font-mono text-sm">Terminal</span>
22+
</div>
23+
<div className="font-mono text-white">
24+
<div className="flex gap-1">
25+
<span className="text-gray-400">$</span>
26+
<span className="text-cyan-300">
27+
npm create commandkit@next
28+
</span>
29+
</div>
30+
<div className="text-gray-400 mt-2">
31+
# Follow the interactive setup
32+
</div>
33+
<div className="flex gap-1 mt-2">
34+
<span className="text-gray-400">$</span>
35+
<span className="text-cyan-300">npm run dev</span>
36+
</div>
37+
<div className="text-green-400 mt-2">
38+
Logged in as your_bot_name!
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</section>
45+
);
46+
}

‎apps/website/src/components/home/HeroSection.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import Link from '@docusaurus/Link';
2+
import { BookOpen, Code, Github } from 'lucide-react';
3+
import React from 'react';
4+
import { themeColors } from './theme';
5+
6+
export default function HeroSection(): React.JSX.Element {
7+
return (
8+
<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]">
9+
<img
10+
src="/img/logo.png"
11+
alt="CommandKit logo"
12+
className="md:w-[250px] lg:w-[280px] mb-10 md:mb-0 select-none drop-shadow-2xl"
13+
width={250}
14+
height={250}
15+
draggable={false}
16+
/>
17+
18+
<div className="relative">
19+
<p className="text-4xl font-bold mb-5 md:text-5xl lg:text-6xl relative">
20+
Let{' '}
21+
<span
22+
className={`text-transparent bg-clip-text bg-gradient-to-r ${themeColors.gradients.primary} relative`}
23+
>
24+
CommandKit
25+
</span>{' '}
26+
handle it for you!
27+
</p>
28+
<p className="lg:text-lg text-gray-600 dark:text-gray-300">
29+
The discord.js meta-framework for building powerful, modular, and
30+
extensible Discord bots with ease.
31+
</p>
32+
33+
<div className="flex items-center justify-center gap-3 mt-10 md:justify-start [&>a]:text-white [&>a]:hover:text-white">
34+
<Link
35+
to="/docs/guide/getting-started/introduction"
36+
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`}
37+
>
38+
<BookOpen className="w-4 h-4" />
39+
Guide
40+
</Link>
41+
<Link
42+
to="/docs/api-reference/commandkit/"
43+
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`}
44+
>
45+
<Code className="w-4 h-4" />
46+
API <span className="hidden md:inline">Reference</span>
47+
</Link>
48+
<Link
49+
href="https://github.com/underctrl-io/commandkit"
50+
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`}
51+
>
52+
<Github className="w-4 h-4" />
53+
GitHub
54+
</Link>
55+
</div>
56+
</div>
57+
</section>
58+
);
59+
}

‎apps/website/src/components/home/PluginsSection.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import Link from '@docusaurus/Link';
2+
import {
3+
BarChart3,
4+
Brain,
5+
Calendar,
6+
Code2,
7+
Database,
8+
Globe,
9+
Server,
10+
Wrench,
11+
} from 'lucide-react';
12+
import React from 'react';
13+
14+
const plugins = [
15+
{
16+
icon: Brain,
17+
name: '@commandkit/ai',
18+
description:
19+
'Execute bot commands using large language models with natural language processing.',
20+
color: 'purple',
21+
docUrl: '/docs/guide/official-plugins/commandkit-ai',
22+
},
23+
{
24+
icon: BarChart3,
25+
name: '@commandkit/analytics',
26+
description:
27+
'Track bot usage, command performance, and user engagement with Posthog and Umami.',
28+
color: 'blue',
29+
docUrl: '/docs/guide/official-plugins/commandkit-analytics',
30+
},
31+
{
32+
icon: Database,
33+
name: '@commandkit/cache',
34+
description:
35+
'High-performance caching system for speedy data storage and retrieval.',
36+
color: 'green',
37+
docUrl: '/docs/guide/official-plugins/commandkit-cache',
38+
},
39+
{
40+
icon: Wrench,
41+
name: '@commandkit/devtools',
42+
description:
43+
'Comprehensive development tools with web interface for debugging and monitoring.',
44+
color: 'orange',
45+
docUrl: '/docs/guide/official-plugins/commandkit-devtools',
46+
},
47+
{
48+
icon: Globe,
49+
name: '@commandkit/i18n',
50+
description:
51+
'Complete internationalization support for building global Discord applications.',
52+
color: 'indigo',
53+
docUrl: '/docs/guide/official-plugins/commandkit-i18n',
54+
},
55+
{
56+
icon: Code2,
57+
name: '@commandkit/legacy',
58+
description: 'Support for migrating from CommandKit v0 to CommandKit v1.',
59+
color: 'gray',
60+
docUrl: '/docs/guide/official-plugins/commandkit-legacy',
61+
},
62+
{
63+
icon: Server,
64+
name: '@commandkit/redis',
65+
description:
66+
'Redis integration for distributed caching and data persistence across bot instances.',
67+
color: 'red',
68+
docUrl: '/docs/guide/official-plugins/commandkit-redis',
69+
},
70+
{
71+
icon: Calendar,
72+
name: '@commandkit/tasks',
73+
description:
74+
'Scheduled task management and cron job system for automated bot operations.',
75+
color: 'pink',
76+
docUrl: '/docs/guide/official-plugins/commandkit-tasks',
77+
},
78+
];
79+
80+
const iconColors = {
81+
purple: 'from-purple-500 to-purple-600',
82+
blue: 'from-blue-500 to-blue-600',
83+
green: 'from-green-500 to-green-600',
84+
orange: 'from-orange-500 to-orange-600',
85+
indigo: 'from-indigo-500 to-indigo-600',
86+
pink: 'from-pink-500 to-pink-600',
87+
cyan: 'from-cyan-500 to-cyan-600',
88+
gray: 'from-gray-500 to-gray-600',
89+
yellow: 'from-yellow-500 to-yellow-600',
90+
red: 'from-red-500 to-red-600',
91+
};
92+
93+
export default function PluginsSection(): React.JSX.Element {
94+
return (
95+
<section className="relative z-10 py-20 bg-gray-50/50 dark:bg-gray-900/20">
96+
<div className="max-w-6xl mx-auto px-4">
97+
<div className="text-center mb-12">
98+
<h2 className="text-3xl font-bold mb-4">Powerful Plugin Ecosystem</h2>
99+
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
100+
Extend CommandKit with plugins that add specialized functionality to
101+
your Discord bots. From AI integration to analytics, CommandKiti has
102+
you covered.
103+
</p>
104+
</div>
105+
106+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
107+
{plugins.map((plugin, index) => {
108+
const IconComponent = plugin.icon;
109+
return (
110+
<Link
111+
key={index}
112+
to={plugin.docUrl}
113+
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"
114+
>
115+
<div className="mb-4">
116+
<div
117+
className={`w-12 h-12 bg-gradient-to-r ${iconColors[plugin.color]} rounded-lg flex items-center justify-center`}
118+
>
119+
<IconComponent className="w-6 h-6 text-white" />
120+
</div>
121+
</div>
122+
123+
<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">
124+
{plugin.name}
125+
</h3>
126+
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
127+
{plugin.description}
128+
</p>
129+
</Link>
130+
);
131+
})}
132+
</div>
133+
134+
<div className="text-center mt-12">
135+
<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">
136+
<Code2 className="w-5 h-5 text-gray-500" />
137+
<span className="text-sm text-gray-600 dark:text-gray-400">
138+
Build your own custom plugins!
139+
<a
140+
href="/docs/guide/creating-plugins/creating-runtime-plugin"
141+
className="ml-1 text-purple-600 hover:text-purple-700 dark:text-purple-400"
142+
>
143+
Learn how to create plugins
144+
</a>
145+
</span>
146+
</div>
147+
</div>
148+
</div>
149+
</section>
150+
);
151+
}

‎apps/website/src/components/home/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export { default as HeroSection } from './HeroSection';
2+
export { default as FeaturesSection } from './FeaturesSection';
3+
export { default as PluginsSection } from './PluginsSection';
4+
export { default as GetStartedSection } from './GetStartedSection';
5+
export { default as FeatureCard } from './FeatureCard';
6+
export { themeColors } from './theme';

0 commit comments

Comments
 (0)