import React, { useMemo, useState } from "react"; import { motion } from "framer-motion"; import { Bot, ShieldCheck, Zap, Server, Globe, Activity, CheckCircle2, Cpu, Cloud, Lock, Terminal, Menu, X, } from "lucide-react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; const plans = [ { name: "Starter", price: "$5/mo", desc: "Great for small community bots and testing.", features: ["1 bot", "512MB RAM", "24/7 uptime", "Basic logs"], }, { name: "Pro", price: "$12/mo", desc: "Best for growing Discord bots with more commands.", features: ["3 bots", "2GB RAM", "Auto restarts", "Live console"], featured: true, }, { name: "Scale", price: "$25/mo", desc: "For larger bots with more users and activity.", features: ["10 bots", "4GB RAM", "Priority resources", "Advanced monitoring"], }, ]; const stats = [ { label: "Uptime", value: "99.9%", icon: Activity }, { label: "Deploy Time", value: "< 2 min", icon: Zap }, { label: "Bot Instances", value: "1,200+", icon: Bot }, { label: "Regions", value: "8", icon: Globe }, ]; const features = [ { icon: Server, title: "24/7 Bot Hosting", text: "Keep your Discord bot online all day with automatic restarts and health monitoring.", }, { icon: Terminal, title: "Live Console", text: "Watch logs in real time, troubleshoot issues fast, and restart your bot with one click.", }, { icon: ShieldCheck, title: "Secure Environment", text: "Protected bot variables, token masking, and isolated runtime containers.", }, { icon: Cpu, title: "Scalable Resources", text: "Choose the right RAM and CPU level for moderation bots, music bots, and utility bots.", }, { icon: Cloud, title: "Easy Deployments", text: "Upload bot files, connect GitHub, or deploy from a zip in minutes.", }, { icon: Lock, title: "Env Variable Support", text: "Store sensitive keys like your Discord token without exposing them in code.", }, ]; function NavBar() { const [open, setOpen] = useState(false); return ( ); } function Hero() { return (

Fast Discord Bot Hosting

Host your Discord bot with a clean, simple control panel.

Launch, monitor, and scale your Discord bot on a modern hosting platform built for uptime, speed, and easy deployments.

Start Hosting View Demo

One-click deploy

Uptime monitoring

Secure env vars

Bot Control Panel

Overview of your hosted Discord bot

Online

{stats.map((item) => { const Icon = item.icon; return (

{item.label}

{item.value}

); })}

Resource usage Updated just now

{[ ["CPU", 42], ["RAM", 67], ["Storage", 28], ].map(([label, value]) => (

{label} {value}%

))}

); } function FeatureGrid() { return (

Everything needed to keep your bot online

Built for Discord bot developers who want simple hosting without a messy control panel.

{features.map((feature, index) => { const Icon = feature.icon; return (

{feature.title}

{feature.text}

); })}

); } function Pricing() { return (

Simple pricing

Choose a plan based on how much power your Discord bot needs.

{plans.map((plan) => ( {plan.featured && ( Most Popular )}

{plan.name}

{plan.price}

{plan.desc}

{plan.features.map((feature) => (

{feature}

))}

Choose {plan.name} ))}

); } function DeploySection() { const [projectName, setProjectName] = useState("My Moderation Bot"); const previewSlug = useMemo( () => projectName .toLowerCase() .trim() .replace(/[^a-z0-9]+/g, "-") .replace(/^-+|-+$/g, "") || "my-bot", [projectName] ); return (

Deploy your bot

Start a new hosting instance by naming your project and connecting your bot files.

Project name setProjectName(e.target.value)} className="h-12 rounded-2xl border-white/10 bg-slate-950/60 text-white placeholder:text-slate-500" placeholder="Enter bot project name" />

{[ { title: "1. Upload bot", text: "Drop your files or connect a repository." }, { title: "2. Add token", text: "Set your Discord token in environment variables." }, { title: "3. Launch", text: "Start the container and monitor logs live." }, ].map((step) => (

{step.title}

{step.text}

))}

Create Instance Connect GitHub

Preview instance

Example project details

Node.js 20

Project

{projectName}

botforge.app/apps/{previewSlug}

Environment Variables

DISCORD_TOKEN ••••••••••••

CLIENT_ID ••••••••

Your Discord bot environment is ready for a secure deploy.

); } function Footer() { return ( ); } export default function DiscordBotHostingSite() { return ( ); }