Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aakashsharma7/brainwave
Learn to create modern websites with sleek parallax effects and bento box layouts stylish UI design to mobile-first principles while strengthening your React.js and Tailwind CSS skills.
https://github.com/aakashsharma7/brainwave
parallex-scrolling-effect reactjs tailwindcss vite
Last synced: about 10 hours ago
JSON representation
Learn to create modern websites with sleek parallax effects and bento box layouts stylish UI design to mobile-first principles while strengthening your React.js and Tailwind CSS skills.
- Host: GitHub
- URL: https://github.com/aakashsharma7/brainwave
- Owner: aakashsharma7
- Created: 2024-05-16T09:19:20.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-16T09:52:57.000Z (6 months ago)
- Last Synced: 2024-05-16T10:51:27.115Z (6 months ago)
- Topics: parallex-scrolling-effect, reactjs, tailwindcss, vite
- Language: JavaScript
- Homepage: https://brainwave-three-chi.vercel.app/
- Size: 10.8 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
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Snippets](#snippets)
6. 🔗 [Links](#links)
7. 🚀 [More](#more)
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.
- 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
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/JavaScript-Mastery-Pro/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
```json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.addMissingImports": "explicit"
},
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"prettier.semi": true,
"prettier.singleQuote": false,
"prettier.jsxSingleQuote": false,
"prettier.trailingComma": "es5",
"prettier.arrowParens": "always",
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"[svg]": {
"editor.defaultFormatter": "jock.svg"
}
}
```
tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
import { fontFamily } from "tailwindcss/defaultTheme";
import plugin from "tailwindcss/plugin";
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./public/assets/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
color: {
1: "#AC6AFF",
2: "#FFC876",
3: "#FF776F",
4: "#7ADB78",
5: "#858DFF",
6: "#FF98E2",
},
stroke: {
1: "#26242C",
},
n: {
1: "#FFFFFF",
2: "#CAC6DD",
3: "#ADA8C3",
4: "#757185",
5: "#3F3A52",
6: "#252134",
7: "#15131D",
8: "#0E0C15",
9: "#474060",
10: "#43435C",
11: "#1B1B2E",
12: "#2E2A41",
13: "#6C7275",
},
},
fontFamily: {
sans: ["var(--font-sora)", ...fontFamily.sans],
code: "var(--font-code)",
grotesk: "var(--font-grotesk)",
},
letterSpacing: {
tagline: ".15em",
},
spacing: {
0.25: "0.0625rem",
7.5: "1.875rem",
15: "3.75rem",
},
opacity: {
15: ".15",
},
transitionDuration: {
DEFAULT: "200ms",
},
transitionTimingFunction: {
DEFAULT: "linear",
},
zIndex: {
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
},
borderWidth: {
DEFAULT: "0.0625rem",
},
backgroundImage: {
"radial-gradient": "radial-gradient(var(--tw-gradient-stops))",
"conic-gradient":
"conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)",
"benefit-card-1": "url(assets/benefits/card-1.svg)",
"benefit-card-2": "url(assets/benefits/card-2.svg)",
"benefit-card-3": "url(assets/benefits/card-3.svg)",
"benefit-card-4": "url(assets/benefits/card-4.svg)",
"benefit-card-5": "url(assets/benefits/card-5.svg)",
"benefit-card-6": "url(assets/benefits/card-6.svg)",
},
},
},
plugins: [
plugin(function ({ addBase, addComponents, addUtilities }) {
addBase({});
addComponents({
".container": {
"@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]":
{},
},
".h1": {
"@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]":
{},
},
".h2": {
"@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight":
{},
},
".h3": {
"@apply text-[2rem] leading-normal md:text-[2.5rem]": {},
},
".h4": {
"@apply text-[2rem] leading-normal": {},
},
".h5": {
"@apply text-2xl leading-normal": {},
},
".h6": {
"@apply font-semibold text-lg leading-8": {},
},
".body-1": {
"@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
{},
},
".body-2": {
"@apply font-light text-[0.875rem] leading-6 md:text-base": {},
},
".caption": {
"@apply text-sm": {},
},
".tagline": {
"@apply font-grotesk font-light text-xs tracking-tagline uppercase":
{},
},
".quote": {
"@apply font-code text-lg leading-normal": {},
},
".button": {
"@apply font-code text-xs font-bold uppercase tracking-wider": {},
},
});
addUtilities({
".tap-highlight-color": {
"-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)",
},
});
}),
],
};
```
index.css
```css
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--font-sora: "Sora", sans-serif;
--font-code: "Source Code Pro", monospace;
--font-grotesk: "Space Grotesk", sans-serif;
}
* {
scroll-behavior: smooth;
}
@layer base {
body {
@apply font-sans bg-n-8 text-n-1 text-base;
}
}
.rotate-45 {
@apply rotate-[45deg];
}
.rotate-90 {
@apply rotate-[90deg];
}
.rotate-135 {
@apply rotate-[135deg];
}
.rotate-180 {
@apply rotate-[180deg];
}
.rotate-225 {
@apply rotate-[225deg];
}
.rotate-270 {
@apply rotate-[270deg];
}
.rotate-315 {
@apply rotate-[315deg];
}
.rotate-360 {
@apply rotate-[360deg];
}
.-rotate-45 {
@apply rotate-[-45deg];
}
.-rotate-90 {
@apply rotate-[-90deg];
}
.-rotate-135 {
@apply rotate-[-135deg];
}
.-rotate-180 {
@apply rotate-[-180deg];
}
.-rotate-225 {
@apply rotate-[-225deg];
}
.-rotate-270 {
@apply rotate-[-270deg];
}
.-rotate-315 {
@apply rotate-[-315deg];
}
.-rotate-360 {
@apply rotate-[-360deg];
}
```
constants/index.js
```javascript
import {
benefitIcon1,
benefitIcon2,
benefitIcon3,
benefitIcon4,
benefitImage2,
chromecast,
disc02,
discord,
discordBlack,
facebook,
figma,
file02,
framer,
homeSmile,
instagram,
notification2,
notification3,
notification4,
notion,
photoshop,
plusSquare,
protopie,
raindrop,
recording01,
recording03,
roadmap1,
roadmap2,
roadmap3,
roadmap4,
searchMd,
slack,
sliders04,
telegram,
twitter,
yourlogo,
} from "../../public/assets";
export const navigation = [
{
id: "0",
title: "Features",
url: "#features",
},
{
id: "1",
title: "Pricing",
url: "#pricing",
},
{
id: "2",
title: "How to use",
url: "#how-to-use",
},
{
id: "3",
title: "Roadmap",
url: "#roadmap",
},
{
id: "4",
title: "New account",
url: "#signup",
onlyMobile: true,
},
{
id: "5",
title: "Sign in",
url: "#login",
onlyMobile: true,
},
];
export const heroIcons = [homeSmile, file02, searchMd, plusSquare];
export const notificationImages = [notification4, notification3, notification2];
export const companyLogos = [yourlogo, yourlogo, yourlogo, yourlogo, yourlogo];
export const brainwaveServices = [
"Photo generating",
"Photo enhance",
"Seamless Integration",
];
export const brainwaveServicesIcons = [
recording03,
recording01,
disc02,
chromecast,
sliders04,
];
export const roadmap = [
{
id: "0",
title: "Voice recognition",
text: "Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.",
date: "May 2023",
status: "done",
imageUrl: roadmap1,
colorful: true,
},
{
id: "1",
title: "Gamification",
text: "Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.",
date: "May 2023",
status: "progress",
imageUrl: roadmap2,
},
{
id: "2",
title: "Chatbot customization",
text: "Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.",
date: "May 2023",
status: "done",
imageUrl: roadmap3,
},
{
id: "3",
title: "Integration with APIs",
text: "Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.",
date: "May 2023",
status: "progress",
imageUrl: roadmap4,
},
];
export const collabText =
"With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.";
export const collabContent = [
{
id: "0",
title: "Seamless Integration",
text: collabText,
},
{
id: "1",
title: "Smart Automation",
},
{
id: "2",
title: "Top-notch Security",
},
];
export const collabApps = [
{
id: "0",
title: "Figma",
icon: figma,
width: 26,
height: 36,
},
{
id: "1",
title: "Notion",
icon: notion,
width: 34,
height: 36,
},
{
id: "2",
title: "Discord",
icon: discord,
width: 36,
height: 28,
},
{
id: "3",
title: "Slack",
icon: slack,
width: 34,
height: 35,
},
{
id: "4",
title: "Photoshop",
icon: photoshop,
width: 34,
height: 34,
},
{
id: "5",
title: "Protopie",
icon: protopie,
width: 34,
height: 34,
},
{
id: "6",
title: "Framer",
icon: framer,
width: 26,
height: 34,
},
{
id: "7",
title: "Raindrop",
icon: raindrop,
width: 38,
height: 32,
},
];
export const pricing = [
{
id: "0",
title: "Basic",
description: "AI chatbot, personalized recommendations",
price: "0",
features: [
"An AI chatbot that can understand your queries",
"Personalized recommendations based on your preferences",
"Ability to explore the app and its features without any cost",
],
},
{
id: "1",
title: "Premium",
description: "Advanced AI chatbot, priority support, analytics dashboard",
price: "9.99",
features: [
"An advanced AI chatbot that can understand complex queries",
"An analytics dashboard to track your conversations",
"Priority support to solve issues quickly",
],
},
{
id: "2",
title: "Enterprise",
description: "Custom AI chatbot, advanced analytics, dedicated account",
price: null,
features: [
"An AI chatbot that can understand your queries",
"Personalized recommendations based on your preferences",
"Ability to explore the app and its features without any cost",
],
},
];
export const benefits = [
{
id: "0",
title: "Ask anything",
text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
backgroundUrl: "assets/benefits/card-1.svg",
iconUrl: benefitIcon1,
imageUrl: benefitImage2,
},
{
id: "1",
title: "Improve everyday",
text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.",
backgroundUrl: "assets/benefits/card-2.svg",
iconUrl: benefitIcon2,
imageUrl: benefitImage2,
light: true,
},
{
id: "2",
title: "Connect everywhere",
text: "Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.",
backgroundUrl: "assets/benefits/card-3.svg",
iconUrl: benefitIcon3,
imageUrl: benefitImage2,
},
{
id: "3",
title: "Fast responding",
text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
backgroundUrl: "assets/benefits/card-4.svg",
iconUrl: benefitIcon4,
imageUrl: benefitImage2,
light: true,
},
{
id: "4",
title: "Ask anything",
text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
backgroundUrl: "assets/benefits/card-5.svg",
iconUrl: benefitIcon1,
imageUrl: benefitImage2,
},
{
id: "5",
title: "Improve everyday",
text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.",
backgroundUrl: "assets/benefits/card-6.svg",
iconUrl: benefitIcon2,
imageUrl: benefitImage2,
},
];
export const socials = [
{
id: "0",
title: "Discord",
iconUrl: discordBlack,
url: "#",
},
{
id: "1",
title: "Twitter",
iconUrl: twitter,
url: "#",
},
{
id: "2",
title: "Instagram",
iconUrl: instagram,
url: "#",
},
{
id: "3",
title: "Telegram",
iconUrl: telegram,
url: "#",
},
{
id: "4",
title: "Facebook",
iconUrl: facebook,
url: "#",
},
];
```
components/Section.jsx
```javascript
import SectionSvg from "../../public/assets/svg/SectionSvg";
const Section = ({
className,
id,
crosses,
crossesOffset,
customPaddings,
children,
}) => (
{children}
{crosses && (
<>
>
)}
);
export default Section;
```
components/Roadmap.jsx
```javascript
import Button from "./Button";
import Heading from "./Heading";
import Section from "./Section";
import Tagline from "./TagLine";
import { roadmap } from "../constants";
import { check2, grid, loading1 } from "../../public/assets";
import { Gradient } from "./design/Roadmap";
const Roadmap = () => (
{roadmap.map((item) => {
const status = item.status === "done" ? "Done" : "In progress";
return (
{item.date}
{status}
{item.title}
{item.text}
);
})}
Our roadmap
);
export default Roadmap;
```
#