Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/syeddhassan/brainwave

A modern UI/UX website built with React.js and Tailwind CSS. It features sleek parallax effects, bento box layouts, and mobile-first principles. It serves as a stylish reference for future applications, enhancing design and development skills in modern web technologies.
https://github.com/syeddhassan/brainwave

figma frontend parallax reactjs tailwindcss ui-ux vite web-design

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/syeddhassan/brainwave
Owner: SyeddHassan
Created: 2024-08-16T21:52:46.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-09-17T13:27:04.000Z (3 months ago)
Last Synced: 2024-11-16T00:44:47.044Z (about 1 month ago)
Topics: figma, frontend, parallax, reactjs, tailwindcss, ui-ux, vite, web-design
Language: JavaScript
Homepage: https://brainwave-livid-two.vercel.app
Size: 10.9 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Brainwave: Modern UI Interface

![Brainwave - How to use section](https://media.licdn.com/dms/image/D4E22AQHLOP1WSsSMCw/feedshare-shrink_2048_1536/0/1724009976794?e=1726704000&v=beta&t=7R-bvOpacnnf2nxGOOU9uQLuPQ8uR7mIxVwP_J6Q_3g)

## Introduction

Brainwave is a modern UI/UX project designed to showcase sleek and responsive frontend skills. This project represents the frontend interface for an AI chatbot, built with cutting-edge web technologies such as React.js and Tailwind CSS. With a focus on mobile-first principles, Brainwave integrates stylish elements like parallax effects and bento box layouts to create an immersive user experience. This project serves as a reference for future applications, demonstrating proficiency in modern design and development practices.

## Languages, Frameworks, and Libraries

- ![React.js](https://img.shields.io/badge/React.js-61DAFB?style=for-the-badge&logo=react&logoColor=black) **React.js**: A JavaScript library for building user interfaces.
- ![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) **Tailwind CSS**: A utility-first CSS framework for creating custom designs.
- ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) **Vite**: A fast build tool and development server.
- ![react-just-parallax](https://img.shields.io/badge/react--just--parallax-FF4081?style=for-the-badge&logo=react&logoColor=white) **react-just-parallax**: For implementing smooth parallax effects.
- ![react-router-dom](https://img.shields.io/badge/react--router--dom-CA4245?style=for-the-badge&logo=react&logoColor=white) **react-router-dom**: For handling client-side routing.
- ![scroll-lock](https://img.shields.io/badge/scroll--lock-FF6F61?style=for-the-badge&logo=react&logoColor=white) **scroll-lock**: To manage scroll locking within modals or specific components.

## Screenshots

### Figma Design

![Figma Design](https://media.licdn.com/dms/image/D4E22AQEfFZUgteWkwg/feedshare-shrink_1280/0/1724009977281?e=1726704000&v=beta&t=3fqDGnqEQP3VsBZ9pYeXM9AEHhQ-xOaBhZbo1i_-SNk)

### Figms Design Conversion

![Brainwave - Landing page (desktop view)](https://media.licdn.com/dms/image/D4E22AQG4X9HBQ8aHsA/feedshare-shrink_2048_1536/0/1724009977390?e=1726704000&v=beta&t=lS_Flynm2nYnQKE9ok6XnUEc5MAwKxnxiONGsy-vU0M)
![Brainwave - Pricing section](https://media.licdn.com/dms/image/v2/D4E22AQGnY-miF9OkMg/feedshare-shrink_2048_1536/feedshare-shrink_2048_1536/0/1724009976577?e=1726704000&v=beta&t=ldxqSYEqxXI08GerKeTXDXTHIODhNscbYSpkGnnRYx8)

### Responsive Design

![Brainwave - Landing page (mobile view)](https://media.licdn.com/dms/image/v2/D4E22AQG4DhOiGf_BVA/feedshare-shrink_800/feedshare-shrink_800/0/1724009975706?e=1726704000&v=beta&t=-jinZ-biAHAVkIbKT6XUA4b_Fj0NwoBORwayYctMXQQ)

## Features

- **Sleek Parallax Effects**: Create depth and engagement through smooth scrolling visuals.
- **Bento Box Layouts**: Offer a clean and organized presentation of information, optimizing space.
- **Mobile-First Design**: Ensures seamless performance and appearance across all devices.

---

## Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.