CodeboltAI Website

A futuristic, modern website for CodeboltAI - the AI-powered code editor that enables developers to create custom AI agents and automate workflows through powerful APIs and MCP integration.

🚀 Features

• Next.js 15 with App Router and TypeScript
• Static Site Generation for optimal performance
• Tailwind CSS for modern, responsive design
• Framer Motion for smooth animations
• Isometric Design Elements for a futuristic look
• Light Mode with clean, modern aesthetics
• Fully Responsive across all devices

🎨 Design Highlights

• Futuristic & Modern: Bold, edgy design with isometric elements
• Gradient Accents: Purple, blue, and cyan color scheme
• Smooth Animations: Framer Motion powered interactions
• Isometric Shadows: Custom shadow utilities for depth
• Glass Effects: Subtle backdrop blur effects
• Responsive Grid: Mobile-first responsive design

🛠️ Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Deployment: Static Export Ready

📦 Installation

1. Clone the repository
2. Install dependencies:

   npm install

🏃‍♂️ Development

Start the development server:

npm run dev

Open http://localhost:3000 to view the website.

🏗️ Build

Build for production:

npm run build

Export static files:

npm run export

📁 Project Structure

src/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── layout/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   └── sections/
│       ├── Hero.tsx
│       ├── Features.tsx
│       └── Showcase.tsx

🎯 Key Components

Header

• Animated navigation with mobile menu
• Isometric logo with gradient effects
• Responsive design with backdrop blur

Hero Section

• Animated hero text with gradient effects
• Floating isometric elements
• Interactive 3D code editor mockup
• Call-to-action buttons with hover effects

Features Section

• Grid layout with isometric cards
• Hover animations and transforms
• Comprehensive feature showcase
• Additional capabilities section

Showcase Section

• Isometric 3D editor interface
• Animated floating components
• SVG path animations
• Feature highlights grid

Footer

• Comprehensive link sections
• Social media integration
• Animated elements on scroll
• Responsive layout

🎨 Custom Utilities

• .gradient-primary: Purple to cyan gradient
• .gradient-secondary: Orange to pink gradient
• .text-gradient: Gradient text effect
• .isometric-shadow: Custom isometric shadow
• .isometric-shadow-lg: Larger isometric shadow
• .glass-effect: Backdrop blur with transparency

🌟 Features Highlighted

1. AI Agent Creation: Visual agent builder
2. Editor API Access: Comprehensive REST APIs
3. MCP Integration: Model Context Protocol support
4. Workflow Automation: Intelligent automation tools
5. Command Interface: Powerful CLI integration
6. Smart Processing: Code analysis and optimization

📱 Responsive Design

• Mobile-first approach
• Breakpoint-specific layouts
• Touch-friendly interactions
• Optimized performance across devices

🚀 Deployment

The website is configured for static export and can be deployed to:

• Vercel
• Netlify
• GitHub Pages
• Any static hosting service

📄 License

This project is created for CodeboltAI and follows modern web development best practices.

🤝 Contributing

This is a showcase project demonstrating modern web development techniques for AI-powered development tools.