Modern UI/UX website

Build this project step by step in JavaScript Mastery YouTube Channel.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 📚 What I learned from this project
5. 🚀 Extra features added to this project

🤖 Introduction

Brainwave - Modern UI/UX website, developed using React.js and Tailwind CSS, exemplifies modern UI/UX principles. Its sleek design, seamless animations, and overall user experience set a high standard, serving as a reference or inspiration for future modern applications or websites in general.

⚙️ 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: 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

and many more, including code architecture and reusability

📚 Learn

Header:

• Create an active link for navigation
• Use conditional statements to control the display of elements
• Implement dynamic classes to style elements based on conditions
• Explore new npm packages like scroll-lock
• Build a hamburger menu that toggles visibility of navigation items
• Implement click functionality to navigate to different sections of the website

Hero Section:

• Utilize the react-just-parallax npm package to create a parallax effect
• Explore features like curve and BackgroundCircles for visual enhancements

Benefits Section:

• Create a component to maintain consistency in titles
• Learn design concepts to improve the visual appeal of your project

Collaboration Section:

• Design circular images
• Apply design principles to enhance the layout

Services Section:

• Implement a Bento Box layout for effective content organization

Pricing Section:

• Design a visually appealing pricing table with a left/right orientation

Roadmap Section:

• Utilize advanced grid layouts for a structured design

Footer Section:

• Design a simple footer layout

🚀 Extra features added

Route[/sign up]:

• loading..
• loading..

Route[/sign in]:

• loading..
• loading..

Connect with me!

License

This project is free to use and does not contains any license.