https://github.com/abdulrahmanbaiasy/brainwave
This repository showcases a modern UI/UX website built with React.js and Tailwind CSS. It demonstrates contemporary design principles, smooth animations, and a focus on user experience.
https://github.com/abdulrahmanbaiasy/brainwave
css-framework frontend javascript react responsive responsive-design tailwindcss ui-ux vite web-development
Last synced: 2 months ago
JSON representation
This repository showcases a modern UI/UX website built with React.js and Tailwind CSS. It demonstrates contemporary design principles, smooth animations, and a focus on user experience.
- Host: GitHub
- URL: https://github.com/abdulrahmanbaiasy/brainwave
- Owner: AbdulrahmanBaiasy
- Created: 2025-03-24T02:18:15.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-24T02:29:13.000Z (about 1 year ago)
- Last Synced: 2025-03-24T03:26:27.828Z (about 1 year ago)
- Topics: css-framework, frontend, javascript, react, responsive, responsive-design, tailwindcss, ui-ux, vite, web-development
- Language: JavaScript
- Homepage: https://brainwave-three-delta.vercel.app
- Size: 11.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modern UI/UX Website
## 📋 Table of Contents
- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🕸️ Snippets
- 🔗 Links
- 🚀 More
## 🤖 Introduction
This Modern UI/UX website, developed using React.js and Tailwind CSS, exemplifies modern UI/UX principles. It features a sleek design, smooth animations, and an intuitive user experience, making it an excellent reference or inspiration for modern applications or websites.
## ⚙️ Tech Stack
- Vite
- React.js
- Tailwind CSS
## 🔋 Features
- **Beautiful Sections**: Includes hero, services, features, how to use, roadmap, pricing, footer, and header.
- **Parallax Animations**: Engaging effects triggered by mouse movement and scrolling.
- **Complex UI Geometry**: Uses Tailwind CSS for intricate shapes like circular feature displays, grid lines, and side lines.
- **Latest UI Trends**: Incorporates modern design elements such as bento grids.
- **Cool Gradients**: Enhances visuals with stylish gradients using Tailwind CSS for cards, buttons, etc.
- **Responsive**: Ensures seamless functionality and aesthetics across all devices.
- **Code Architecture & Reusability**: Well-structured and modular codebase for maintainability.
## 🤸 Quick Start
Follow these steps to set up the project locally on your machine.
### Prerequisites
Make sure you have the following installed:
- Git
- Node.js
- npm (Node Package Manager)
### Cloning the Repository
```sh
git clone https://github.com/abdulrahmanbaiasy/brainwave.git
cd brainwave
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## 🕸️ Snippets
* `.vscode/settings.json`: Configuration for VS Code.
* `tailwind.config.js`: Tailwind CSS configuration file.
* `index.css`: Main CSS file.
* `constants/index.js`: JavaScript file for storing constants.
* `components/Section.jsx`: React component for a section.
* `components/Roadmap.jsx`: React component for the roadmap section.