Fazel Bot Dashboard

A modern, responsive dashboard website for the Fazel Discord bot. Built with Next.js 15, React 19, Tailwind CSS v4, and Framer Motion.

Note: This is a frontend-only template. No backend or API is included.

Pages

• Landing (/) – Hero section with feature highlights, call-to-action buttons
• Login (/login) – Discord OAuth login screen (mock auth via localStorage)
• Dashboard Overview (/dashboard) – Server stats, activity chart, recent actions
• Configuration (/dashboard/config) – Bot settings with tabs: General, Auto-Moderation, Announcements
• Pricing (/pricing) – Three-tier pricing cards (Free, Pro, Ultra)
• Contact (/contact) – Contact form and support information

Tech Stack

Getting Started

Prerequisites

• Node.js 18+

Installation

npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm start

Lint

npm run lint

Environment Variables

Copy .env.example to .env.local and fill in your Discord application credentials:

• DISCORD_CLIENT_ID – Your Discord application client ID
• DISCORD_CLIENT_SECRET – Your Discord application client secret
• APP_URL – URL where the dashboard is hosted

Project Structure

src/
├── app/
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Landing page
│   ├── globals.css          # Global styles
│   ├── contact/page.tsx     # Contact page
│   ├── dashboard/
│   │   ├── layout.tsx       # Dashboard layout (auth guard + sidebar)
│   │   ├── page.tsx         # Dashboard overview
│   │   └── config/page.tsx  # Bot configuration
│   ├── login/page.tsx       # Login page
│   └── pricing/page.tsx     # Pricing page
├── components/
│   ├── Navbar.tsx           # Navigation bar
│   └── Sidebar.tsx          # Dashboard sidebar
├── hooks/
│   └── use-mobile.ts        # Mobile detection hook
└── lib/
    └── utils.ts             # cn() utility

License

This project is licensed under the terms of the Fazel license. See the LICENSE file for details.