Brainwave - AI Chat UI/UX

Brainwave is a sleek UI/UX template for an AI chat platform, featuring animated sections and responsive layouts — built with React, Vite, and TailwindCSS.

---

🛠 Built With

---

🧠 Overview

Brainwave is a fully responsive and animated UI project for an AI-powered chat platform.
It features sleek components, interactive effects, chat sections, pricing pages, and a clean and scalable code structure.

Inspired by JavaScript Mastery, this project is ideal for frontend developers and UI designers who want to explore modern React-based interface development.

---

📸 Demo

---

🌐 Live Demo

---

🔍 Highlights

• ✅ Responsive design
• ✅ Smooth animations and transitions
• ✅ Reusable UI components
• ✅ Content-managed sections
• ✅ Scalable, modular codebase
• ✅ Beautiful visuals and interactive elements

---

🚀 Features

• 💬 Responsive and sleek chat interface
• 🤖 AI-powered UI components for seamless interaction
• 🎨 Designed using TailwindCSS for modern styling
• ⚡ Built with Vite for fast development and optimized performance
• 🧩 Includes buttons, chat bubbles, pricing sections, and more

---

📦 Project Structure

brainwave/
├── public/             # Static assets
├── src/
│   ├── assets/         # Images, SVGs, and static resources
│   ├── components/     # React components (Header, Hero, Footer, etc.)
│   │   ├── design/     # Specialized design elements (backgrounds, effects)
│   ├── constants/      # Static data and configuration
│   ├── App.jsx         # Root App component
│   ├── index.css       # Global styles
│   ├── main.jsx        # Entry point for React
│   └── README.md       # Project documentation
├── package.json        # Project metadata and dependencies
├── .gitignore          # Git ignore rules
├── vite.config.js      # Vite configuration
└── README.md           # Main README file

---

🛠️ Technologies Used

• React – Frontend framework
• react-just-parallax – For smooth parallax scrolling effects
• Vite – Fast build tool
• TailwindCSS – Styling
• React Router – For navigation

---

📦 Installation & Setup

1. Clone the repository:

   git clone https://github.com/Oran01/brainwave.git
   cd brainwave

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open [http://localhost:5173] (http://localhost:5173) in your browser.

---

📺 Based on JavaScript Mastery

This project was built following the JavaScript Mastery tutorial: 🔗 YouTube Video

---

🤝 Contributing

Feel free to fork this repository and submit pull requests to improve the project!

⭐ If you enjoyed this project, please consider giving it a star!