https://github.com/arnobt78/brainwave-modern-ui--react-frontend
Brainwave is a modern landing page built with React-Vite, Tailwind CSS. It showcases advanced design principles, smooth animations, a modular architecture, making it an ideal reference for building visually stunning, highly interactive web projects. It is structured for easy learning, extension, reusability, with a focus on clean code, practices
https://github.com/arnobt78/brainwave-modern-ui--react-frontend
bento-grid brainwave-modern-ui complex-ui-geometry frontend-design frontend-website landing-page landing-page-design landing-page-template latest-ui-trends modern-ui modern-ui-design modern-ui-ux open-soucre parallax react-vite-tailwindcss responsive-design reusable-template roadmap scalable smooth-animations-and-transitions
Last synced: 7 months ago
JSON representation
Brainwave is a modern landing page built with React-Vite, Tailwind CSS. It showcases advanced design principles, smooth animations, a modular architecture, making it an ideal reference for building visually stunning, highly interactive web projects. It is structured for easy learning, extension, reusability, with a focus on clean code, practices
- Host: GitHub
- URL: https://github.com/arnobt78/brainwave-modern-ui--react-frontend
- Owner: arnobt78
- Created: 2025-07-30T11:39:00.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-30T12:10:20.000Z (9 months ago)
- Last Synced: 2025-07-30T14:50:03.495Z (9 months ago)
- Topics: bento-grid, brainwave-modern-ui, complex-ui-geometry, frontend-design, frontend-website, landing-page, landing-page-design, landing-page-template, latest-ui-trends, modern-ui, modern-ui-design, modern-ui-ux, open-soucre, parallax, react-vite-tailwindcss, responsive-design, reusable-template, roadmap, scalable, smooth-animations-and-transitions
- Language: JavaScript
- Homepage: https://brainwave-modern-ui.netlify.app/
- Size: 10.8 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧠 Brainwave – Modern UI/UX Landing Page React Website
---
## 🧩 Project Summary
Brainwave is a modern UI/UX web application built with React.js, Vite, and Tailwind CSS. It showcases advanced design principles, smooth animations, and a modular architecture, making it an ideal reference for building visually stunning and highly interactive web projects. The project is structured for easy learning, extension, and reusability, with a focus on clean code and best practices.
- **Live-Demo:** [https://brainwave-modern-ui.netlify.app/](https://brainwave-modern-ui.netlify.app/)
---
## 📋 Table of Contents
1. [Project Summary](#%F0%9F%A7%A9-project-summary)
2. [Tech Stack](#tech-stack)
3. [Features](#features)
4. [Project Structure](#project-structure)
5. [Components Overview](#components-overview)
6. [How to Run](#how-to-run)
7. [Walkthrough & Usage](#walkthrough--usage)
8. [Code Snippets & Examples](#code-snippets--examples)
9. [Reusability & Extension](#reusability--extension)
10. [Useful Links](#useful-links)
11. [Keywords](#keywords)
12. [Conclusion](#conclusion)
---
## ⚙️ Tech Stack
- **Vite**: Fast build tool for modern web projects.
- **React.js**: Component-based UI library.
- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.
---
## 🔋 Features
- **Beautiful Sections**: Hero, services, features, how to use, roadmap, pricing, footer, header.
- **Parallax Animations**: Mouse and scroll-triggered effects.
- **Complex UI Geometry**: Intricate shapes, grids, and lines using Tailwind CSS.
- **Latest UI Trends**: Bento grids, gradients, and modern layouts.
- **Responsive Design**: Works seamlessly across all devices.
- **Reusable Components**: Modular and easy to extend.
- **Code Architecture**: Clean, maintainable, and scalable.
---
## 🗂️ Project Structure
```bash
brainwave/
│
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
├── public/
│ └── assets/
│ └── [images, svgs, icons, etc.]
├── src/
│ ├── App.jsx
│ ├── index.css
│ ├── main.jsx
│ ├── assets/
│ ├── components/
│ │ ├── [UI Components]
│ │ └── design/
│ └── constants/
│ └── index.js
└── README.md
```
- **public/assets/**: All static images, SVGs, and icons.
- **src/components/**: Main React components and design subcomponents.
- **src/constants/**: Centralized constants for navigation, features, roadmap, etc.
---
## 🧩 Components Overview
- **Section.jsx**: Layout wrapper for each section, handles padding and decorative elements.
- **Roadmap.jsx**: Displays project roadmap with status, images, and progress.
- **Button.jsx, Heading.jsx, Tagline.jsx**: UI primitives for consistent design.
- **Design Components**: Specialized visuals for each section (e.g., Hero, Pricing).
- **Constants**: All static data (features, roadmap, benefits, etc.) for easy updates.
Each component is designed for reusability and can be imported into other projects.
---
## 🚀 How to Run
### Prerequisites
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/)
### Setup
```bash
git clone https://github.com/arnobt78/Brainwave-Modern-UI--React-Frontend.git
cd brainwave
npm install
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser.
---
## 🏃 Walkthrough & Usage
1. **Clone & Install**: Follow the setup instructions above.
2. **Explore Components**: All UI sections are in `src/components/`. Each is self-contained and documented.
3. **Customize Constants**: Update `src/constants/index.js` to change navigation, features, roadmap, etc.
4. **Styling**: Tailwind CSS is used throughout. Modify `tailwind.config.js` and `index.css` for custom styles.
5. **Assets**: Add or replace images/SVGs in `public/assets/`.
6. **Routing**: The project uses anchor links for navigation. For advanced routing, integrate React Router.
---
## 💻 Code Snippets & Examples
### Example: Using a Component
```jsx
// Import Section component
import Section from './components/Section';
const MySection = () => (
Custom Content
This is a reusable section.
);
```
### Example: Adding a New Feature
1. Add feature details in `src/constants/index.js`.
2. Create a new component in `src/components/`.
3. Import and use it in `App.jsx`.
---
## 🔄 Reusability & Extension
- **Modular Components**: Copy any component from `src/components/` into your own project.
- **Constants**: Centralized data makes it easy to update or extend features.
- **Design System**: Tailwind utility classes and custom config for rapid prototyping.
- **Assets**: Organized for easy replacement and extension.
**To reuse a component:**
- Import the component and its required assets/constants.
- Pass props as needed for customization.
---
## 🔗 Useful Links
- [Assets](https://drive.google.com/file/d/1JKzwPl_hnpjIlNbwfjMagb4HosxnyXbf/view?usp=sharing)
- [Design](https://drive.google.com/file/d/15WJMOchujvaQ7Kg9e0nGeGR7G7JOeX1K/view?usp=sharing)
- [Absolute Relative Positioning](https://css-tricks.com/absolute-positioning-inside-relative-positioning/)
- [Live Website](https://jsm-brainwave.com/)
- [YouTube Tutorial](https://www.youtube.com/@javascriptmastery/videos)
- [Discord Community](https://discord.com/invite/n6EdbFJ)
---
## 🏷️ Keywords
React, Vite, Tailwind CSS, UI/UX, Modern Web, Parallax, Responsive, Components, Design System, Roadmap, Features, Tutorial, Reusable, Scalable, Open Source
---
## 📝 Conclusion
Brainwave is a showcase of modern web design and development, built for learning, inspiration, and extension. Whether you’re a beginner or a pro, you’ll find the codebase clean, modular, and easy to adapt. Dive into the components, experiment with the design, and make it your own!
---
## Happy Coding! 🎉
Feel free to use this Project Repository and extend this project further!
If you have any questions or want to share your work, reach out via GitHub or my portfolio [https://arnob-mahmud.vercel.app/](https://arnob-mahmud.vercel.app/).
**Enjoy building and learning!** 🚀
Thank you! 😊
---