Brainwave UI Design

📋 Table of Contents

• ✨ Introduction
• ⚙️ Tech Stack
• 📝 Features
• 🚀 Quick Start

✨ Introduction

[EN] Brainwave is a modern UI/UX website built using React.js and Tailwind CSS, designed with contemporary principles in mind. It features smooth parallax effects and bento box layouts, offering a stylish UI that adapts well from desktop to mobile devices. With polished animations and a user-friendly experience, Brainwave sets a high standard while providing inspiration for modern applications and websites.

[FR] Brainwave est un site web UI/UX moderne créé avec React.js et Tailwind CSS, qui incarne les principes actuels du design. Il présente des effets de parallaxe fluides et des mises en page bento box, offrant une interface élégante adaptée aussi bien aux ordinateurs de bureau qu'aux appareils mobiles. Avec des animations soignées et une expérience utilisateur exceptionnelle, Brainwave se distingue comme une source d'inspiration pour les applications et sites web contemporains.

⚙️ Tech Stack

• React is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain. Its virtual DOM enhances performance by minimizing direct interactions with the browser's DOM.

• Tailwind is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.

• Vite is a modern frontend build tool known for fast ES Module imports, efficient bundling, and quick development server startup times. It supports frameworks like Vue.js and React, optimizing workflow and performance compared to traditional bundlers.

📝 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: Utilizes tailwindcss 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.

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone {git remote URL}

Installation

Let's install the project dependencies, from your terminal, run:

npm install
# or
yarn install

Running the Project

Installation will take a minute or two, but once that's done, you should be able to run the following command:

npm run dev
# or
yarn dev

Open http://localhost:5173 in your browser to view the project.