├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
└── vite.svg
├── src
├── App.jsx
├── assets
│ ├── 4-small.png
│ ├── background.jpg
│ ├── benefits
│ │ ├── card-1.svg
│ │ ├── card-2.svg
│ │ ├── card-3.svg
│ │ ├── card-4.svg
│ │ ├── card-5.svg
│ │ ├── card-6.svg
│ │ ├── icon-1.svg
│ │ ├── icon-2.svg
│ │ ├── icon-3.svg
│ │ ├── icon-4.svg
│ │ └── image-2.png
│ ├── brainwave-symbol-white.svg
│ ├── brainwave-symbol.svg
│ ├── brainwave.svg
│ ├── check-02.svg
│ ├── check.svg
│ ├── chrome-cast.svg
│ ├── collaboration
│ │ ├── curve-1.svg
│ │ ├── curve-2.svg
│ │ ├── discord.png
│ │ ├── figma.png
│ │ ├── framer.png
│ │ ├── notion.png
│ │ ├── photoshop.png
│ │ ├── protopie.png
│ │ ├── raindrop.png
│ │ └── slack.png
│ ├── disc-02.svg
│ ├── file-02.svg
│ ├── gradient.png
│ ├── grid.png
│ ├── hero
│ │ ├── curve.png
│ │ ├── hero-background.jpg
│ │ └── robot.jpg
│ ├── home-smile.svg
│ ├── index.js
│ ├── loading-01.svg
│ ├── loading.png
│ ├── notification
│ │ ├── image-1.png
│ │ ├── image-2.png
│ │ ├── image-3.png
│ │ └── image-4.png
│ ├── play.svg
│ ├── plus-square.svg
│ ├── pricing
│ │ ├── lines.svg
│ │ └── stars.svg
│ ├── react.svg
│ ├── recording-01.svg
│ ├── recording-03.svg
│ ├── roadmap
│ │ ├── coins.png
│ │ ├── done.svg
│ │ ├── hero.png
│ │ ├── image-1.png
│ │ ├── image-2.png
│ │ ├── image-3.png
│ │ ├── image-4.png
│ │ └── undone.svg
│ ├── search-md.svg
│ ├── services
│ │ ├── service-1.png
│ │ ├── service-2.png
│ │ └── service-3.png
│ ├── sliders-04.svg
│ ├── socials
│ │ ├── discord.svg
│ │ ├── facebook.svg
│ │ ├── instagram.svg
│ │ ├── telegram.svg
│ │ └── twitter.svg
│ ├── svg
│ │ ├── Arrow.jsx
│ │ ├── Brackets.jsx
│ │ ├── ButtonGradient.jsx
│ │ ├── ButtonSvg.jsx
│ │ ├── ChatBubbleWing.jsx
│ │ ├── ClipPath.jsx
│ │ ├── MenuSvg.jsx
│ │ ├── PlusSvg.jsx
│ │ └── SectionSvg.jsx
│ └── yourlogo.svg
├── components
│ ├── Benefits.jsx
│ ├── Button.jsx
│ ├── Collaboration.jsx
│ ├── CompanyLogos.jsx
│ ├── Footer.jsx
│ ├── Generating.jsx
│ ├── Header.jsx
│ ├── Heading.jsx
│ ├── Hero.jsx
│ ├── Notification.jsx
│ ├── Pricing.jsx
│ ├── PricingList.jsx
│ ├── Roadmap.jsx
│ ├── Section.jsx
│ ├── Services.jsx
│ ├── Tagline.jsx
│ └── design
│ │ ├── Benefits.jsx
│ │ ├── Collaboration.jsx
│ │ ├── Header.jsx
│ │ ├── Hero.jsx
│ │ ├── Pricing.jsx
│ │ ├── Roadmap.jsx
│ │ └── Services.jsx
├── constants
│ └── index.js
├── index.css
└── main.jsx
├── tailwind.config.js
└── vite.config.js
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | "eslint:recommended",
6 | "plugin:react/recommended",
7 | "plugin:react/jsx-runtime",
8 | "plugin:react-hooks/recommended",
9 | ],
10 | ignorePatterns: ["dist", ".eslintrc.cjs"],
11 | parserOptions: { ecmaVersion: "latest", sourceType: "module" },
12 | settings: { react: { version: "18.2" } },
13 | plugins: ["react-refresh"],
14 | rules: {
15 | "react/jsx-no-target-blank": "off",
16 | "react-refresh/only-export-components": [
17 | "warn",
18 | { allowConstantExport: true },
19 | ],
20 | "react/prop-types": "off",
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
5 |
6 |
7 |
8 |
13 |
14 |
Modern UI/UX website
15 |
16 |
17 | Build this project step by step with our detailed tutorial on
JavaScript Mastery YouTube.
18 |
19 |
38 |
39 | ## 🤖 Introduction
40 |
41 | 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.
42 |
43 | If you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.
44 |
45 | 
46 |
47 | ## ⚙️ Tech Stack
48 |
49 | - Vite
50 | - React.js
51 | - Tailwind CSS
52 |
53 | ## 🔋 Features
54 |
55 | 👉 **Beautiful Sections**: Includes hero, services, features, how to use, roadmap, pricing, footer, and header.
56 |
57 | 👉 **Parallax Animations**: Engaging effects triggered by mouse movement and scrolling
58 |
59 | 👉 **Complex UI Geometry**: Utilizes tailwindcss for intricate shapes like circular feature displays, grid lines, and side lines.
60 |
61 | 👉 **Latest UI Trends**: Incorporates modern design elements such as bento grids.
62 |
63 | 👉 **Cool Gradients**: Enhances visuals with stylish gradients using Tailwind CSS for cards, buttons, etc.
64 |
65 | 👉 **Responsive**: Ensures seamless functionality and aesthetics across all devices
66 |
67 | and many more, including code architecture and reusability
68 |
69 | ## 🤸 Quick Start
70 |
71 | Follow these steps to set up the project locally on your machine.
72 |
73 | **Prerequisites**
74 |
75 | Make sure you have the following installed on your machine:
76 |
77 | - [Git](https://git-scm.com/)
78 | - [Node.js](https://nodejs.org/en)
79 | - [npm](https://www.npmjs.com/) (Node Package Manager)
80 |
81 | **Cloning the Repository**
82 |
83 | ```bash
84 | git clone https://github.com/JavaScript-Mastery-Pro/brainwave.git
85 | cd brainwave
86 | ```
87 |
88 | **Installation**
89 |
90 | Install the project dependencies using npm:
91 |
92 | ```bash
93 | npm install
94 | ```
95 |
96 | **Running the Project**
97 |
98 | ```bash
99 | npm run dev
100 | ```
101 |
102 | Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
103 |
104 | ## 🕸️ Snippets
105 |
106 |
107 | .vscode/settings.json
108 |
109 | ```json
110 | {
111 | "editor.defaultFormatter": "esbenp.prettier-vscode",
112 | "editor.formatOnSave": true,
113 | "editor.codeActionsOnSave": {
114 | "source.fixAll.eslint": "explicit",
115 | "source.addMissingImports": "explicit"
116 | },
117 | "prettier.tabWidth": 2,
118 | "prettier.useTabs": false,
119 | "prettier.semi": true,
120 | "prettier.singleQuote": false,
121 | "prettier.jsxSingleQuote": false,
122 | "prettier.trailingComma": "es5",
123 | "prettier.arrowParens": "always",
124 | "[javascriptreact]": {
125 | "editor.defaultFormatter": "esbenp.prettier-vscode"
126 | },
127 | "[css]": {
128 | "editor.defaultFormatter": "vscode.css-language-features"
129 | },
130 | "[svg]": {
131 | "editor.defaultFormatter": "jock.svg"
132 | }
133 | }
134 | ```
135 |
136 |
137 |
138 |
139 | tailwind.config.js
140 |
141 | ```javascript
142 | /** @type {import('tailwindcss').Config} */
143 | import { fontFamily } from "tailwindcss/defaultTheme";
144 | import plugin from "tailwindcss/plugin";
145 |
146 | export default {
147 | content: [
148 | "./index.html",
149 | "./src/**/*.{js,ts,jsx,tsx}",
150 | "./public/assets/**/*.{js,ts,jsx,tsx}",
151 | ],
152 | theme: {
153 | extend: {
154 | colors: {
155 | color: {
156 | 1: "#AC6AFF",
157 | 2: "#FFC876",
158 | 3: "#FF776F",
159 | 4: "#7ADB78",
160 | 5: "#858DFF",
161 | 6: "#FF98E2",
162 | },
163 | stroke: {
164 | 1: "#26242C",
165 | },
166 | n: {
167 | 1: "#FFFFFF",
168 | 2: "#CAC6DD",
169 | 3: "#ADA8C3",
170 | 4: "#757185",
171 | 5: "#3F3A52",
172 | 6: "#252134",
173 | 7: "#15131D",
174 | 8: "#0E0C15",
175 | 9: "#474060",
176 | 10: "#43435C",
177 | 11: "#1B1B2E",
178 | 12: "#2E2A41",
179 | 13: "#6C7275",
180 | },
181 | },
182 | fontFamily: {
183 | sans: ["var(--font-sora)", ...fontFamily.sans],
184 | code: "var(--font-code)",
185 | grotesk: "var(--font-grotesk)",
186 | },
187 | letterSpacing: {
188 | tagline: ".15em",
189 | },
190 | spacing: {
191 | 0.25: "0.0625rem",
192 | 7.5: "1.875rem",
193 | 15: "3.75rem",
194 | },
195 | opacity: {
196 | 15: ".15",
197 | },
198 | transitionDuration: {
199 | DEFAULT: "200ms",
200 | },
201 | transitionTimingFunction: {
202 | DEFAULT: "linear",
203 | },
204 | zIndex: {
205 | 1: "1",
206 | 2: "2",
207 | 3: "3",
208 | 4: "4",
209 | 5: "5",
210 | },
211 | borderWidth: {
212 | DEFAULT: "0.0625rem",
213 | },
214 | backgroundImage: {
215 | "radial-gradient": "radial-gradient(var(--tw-gradient-stops))",
216 | "conic-gradient":
217 | "conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)",
218 | "benefit-card-1": "url(assets/benefits/card-1.svg)",
219 | "benefit-card-2": "url(assets/benefits/card-2.svg)",
220 | "benefit-card-3": "url(assets/benefits/card-3.svg)",
221 | "benefit-card-4": "url(assets/benefits/card-4.svg)",
222 | "benefit-card-5": "url(assets/benefits/card-5.svg)",
223 | "benefit-card-6": "url(assets/benefits/card-6.svg)",
224 | },
225 | },
226 | },
227 | plugins: [
228 | plugin(function ({ addBase, addComponents, addUtilities }) {
229 | addBase({});
230 | addComponents({
231 | ".container": {
232 | "@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]":
233 | {},
234 | },
235 | ".h1": {
236 | "@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]":
237 | {},
238 | },
239 | ".h2": {
240 | "@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":
241 | {},
242 | },
243 | ".h3": {
244 | "@apply text-[2rem] leading-normal md:text-[2.5rem]": {},
245 | },
246 | ".h4": {
247 | "@apply text-[2rem] leading-normal": {},
248 | },
249 | ".h5": {
250 | "@apply text-2xl leading-normal": {},
251 | },
252 | ".h6": {
253 | "@apply font-semibold text-lg leading-8": {},
254 | },
255 | ".body-1": {
256 | "@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
257 | {},
258 | },
259 | ".body-2": {
260 | "@apply font-light text-[0.875rem] leading-6 md:text-base": {},
261 | },
262 | ".caption": {
263 | "@apply text-sm": {},
264 | },
265 | ".tagline": {
266 | "@apply font-grotesk font-light text-xs tracking-tagline uppercase":
267 | {},
268 | },
269 | ".quote": {
270 | "@apply font-code text-lg leading-normal": {},
271 | },
272 | ".button": {
273 | "@apply font-code text-xs font-bold uppercase tracking-wider": {},
274 | },
275 | });
276 | addUtilities({
277 | ".tap-highlight-color": {
278 | "-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)",
279 | },
280 | });
281 | }),
282 | ],
283 | };
284 | ```
285 |
286 |
287 |
288 |
289 | index.css
290 |
291 | ```css
292 | @import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600&display=swap");
293 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap");
294 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap");
295 |
296 | @tailwind base;
297 | @tailwind components;
298 | @tailwind utilities;
299 |
300 | :root {
301 | --font-sora: "Sora", sans-serif;
302 | --font-code: "Source Code Pro", monospace;
303 | --font-grotesk: "Space Grotesk", sans-serif;
304 | }
305 |
306 | * {
307 | scroll-behavior: smooth;
308 | }
309 |
310 | @layer base {
311 | body {
312 | @apply font-sans bg-n-8 text-n-1 text-base;
313 | }
314 | }
315 |
316 | .rotate-45 {
317 | @apply rotate-[45deg];
318 | }
319 |
320 | .rotate-90 {
321 | @apply rotate-[90deg];
322 | }
323 |
324 | .rotate-135 {
325 | @apply rotate-[135deg];
326 | }
327 |
328 | .rotate-180 {
329 | @apply rotate-[180deg];
330 | }
331 |
332 | .rotate-225 {
333 | @apply rotate-[225deg];
334 | }
335 |
336 | .rotate-270 {
337 | @apply rotate-[270deg];
338 | }
339 |
340 | .rotate-315 {
341 | @apply rotate-[315deg];
342 | }
343 |
344 | .rotate-360 {
345 | @apply rotate-[360deg];
346 | }
347 |
348 | .-rotate-45 {
349 | @apply rotate-[-45deg];
350 | }
351 |
352 | .-rotate-90 {
353 | @apply rotate-[-90deg];
354 | }
355 |
356 | .-rotate-135 {
357 | @apply rotate-[-135deg];
358 | }
359 |
360 | .-rotate-180 {
361 | @apply rotate-[-180deg];
362 | }
363 |
364 | .-rotate-225 {
365 | @apply rotate-[-225deg];
366 | }
367 |
368 | .-rotate-270 {
369 | @apply rotate-[-270deg];
370 | }
371 |
372 | .-rotate-315 {
373 | @apply rotate-[-315deg];
374 | }
375 |
376 | .-rotate-360 {
377 | @apply rotate-[-360deg];
378 | }
379 | ```
380 |
381 |
382 |
383 |
384 | constants/index.js
385 |
386 | ```javascript
387 | import {
388 | benefitIcon1,
389 | benefitIcon2,
390 | benefitIcon3,
391 | benefitIcon4,
392 | benefitImage2,
393 | chromecast,
394 | disc02,
395 | discord,
396 | discordBlack,
397 | facebook,
398 | figma,
399 | file02,
400 | framer,
401 | homeSmile,
402 | instagram,
403 | notification2,
404 | notification3,
405 | notification4,
406 | notion,
407 | photoshop,
408 | plusSquare,
409 | protopie,
410 | raindrop,
411 | recording01,
412 | recording03,
413 | roadmap1,
414 | roadmap2,
415 | roadmap3,
416 | roadmap4,
417 | searchMd,
418 | slack,
419 | sliders04,
420 | telegram,
421 | twitter,
422 | yourlogo,
423 | } from "../../public/assets";
424 |
425 | export const navigation = [
426 | {
427 | id: "0",
428 | title: "Features",
429 | url: "#features",
430 | },
431 | {
432 | id: "1",
433 | title: "Pricing",
434 | url: "#pricing",
435 | },
436 | {
437 | id: "2",
438 | title: "How to use",
439 | url: "#how-to-use",
440 | },
441 | {
442 | id: "3",
443 | title: "Roadmap",
444 | url: "#roadmap",
445 | },
446 | {
447 | id: "4",
448 | title: "New account",
449 | url: "#signup",
450 | onlyMobile: true,
451 | },
452 | {
453 | id: "5",
454 | title: "Sign in",
455 | url: "#login",
456 | onlyMobile: true,
457 | },
458 | ];
459 |
460 | export const heroIcons = [homeSmile, file02, searchMd, plusSquare];
461 |
462 | export const notificationImages = [notification4, notification3, notification2];
463 |
464 | export const companyLogos = [yourlogo, yourlogo, yourlogo, yourlogo, yourlogo];
465 |
466 | export const brainwaveServices = [
467 | "Photo generating",
468 | "Photo enhance",
469 | "Seamless Integration",
470 | ];
471 |
472 | export const brainwaveServicesIcons = [
473 | recording03,
474 | recording01,
475 | disc02,
476 | chromecast,
477 | sliders04,
478 | ];
479 |
480 | export const roadmap = [
481 | {
482 | id: "0",
483 | title: "Voice recognition",
484 | text: "Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.",
485 | date: "May 2023",
486 | status: "done",
487 | imageUrl: roadmap1,
488 | colorful: true,
489 | },
490 | {
491 | id: "1",
492 | title: "Gamification",
493 | text: "Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.",
494 | date: "May 2023",
495 | status: "progress",
496 | imageUrl: roadmap2,
497 | },
498 | {
499 | id: "2",
500 | title: "Chatbot customization",
501 | text: "Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.",
502 | date: "May 2023",
503 | status: "done",
504 | imageUrl: roadmap3,
505 | },
506 | {
507 | id: "3",
508 | title: "Integration with APIs",
509 | text: "Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.",
510 | date: "May 2023",
511 | status: "progress",
512 | imageUrl: roadmap4,
513 | },
514 | ];
515 |
516 | export const collabText =
517 | "With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.";
518 |
519 | export const collabContent = [
520 | {
521 | id: "0",
522 | title: "Seamless Integration",
523 | text: collabText,
524 | },
525 | {
526 | id: "1",
527 | title: "Smart Automation",
528 | },
529 | {
530 | id: "2",
531 | title: "Top-notch Security",
532 | },
533 | ];
534 |
535 | export const collabApps = [
536 | {
537 | id: "0",
538 | title: "Figma",
539 | icon: figma,
540 | width: 26,
541 | height: 36,
542 | },
543 | {
544 | id: "1",
545 | title: "Notion",
546 | icon: notion,
547 | width: 34,
548 | height: 36,
549 | },
550 | {
551 | id: "2",
552 | title: "Discord",
553 | icon: discord,
554 | width: 36,
555 | height: 28,
556 | },
557 | {
558 | id: "3",
559 | title: "Slack",
560 | icon: slack,
561 | width: 34,
562 | height: 35,
563 | },
564 | {
565 | id: "4",
566 | title: "Photoshop",
567 | icon: photoshop,
568 | width: 34,
569 | height: 34,
570 | },
571 | {
572 | id: "5",
573 | title: "Protopie",
574 | icon: protopie,
575 | width: 34,
576 | height: 34,
577 | },
578 | {
579 | id: "6",
580 | title: "Framer",
581 | icon: framer,
582 | width: 26,
583 | height: 34,
584 | },
585 | {
586 | id: "7",
587 | title: "Raindrop",
588 | icon: raindrop,
589 | width: 38,
590 | height: 32,
591 | },
592 | ];
593 |
594 | export const pricing = [
595 | {
596 | id: "0",
597 | title: "Basic",
598 | description: "AI chatbot, personalized recommendations",
599 | price: "0",
600 | features: [
601 | "An AI chatbot that can understand your queries",
602 | "Personalized recommendations based on your preferences",
603 | "Ability to explore the app and its features without any cost",
604 | ],
605 | },
606 | {
607 | id: "1",
608 | title: "Premium",
609 | description: "Advanced AI chatbot, priority support, analytics dashboard",
610 | price: "9.99",
611 | features: [
612 | "An advanced AI chatbot that can understand complex queries",
613 | "An analytics dashboard to track your conversations",
614 | "Priority support to solve issues quickly",
615 | ],
616 | },
617 | {
618 | id: "2",
619 | title: "Enterprise",
620 | description: "Custom AI chatbot, advanced analytics, dedicated account",
621 | price: null,
622 | features: [
623 | "An AI chatbot that can understand your queries",
624 | "Personalized recommendations based on your preferences",
625 | "Ability to explore the app and its features without any cost",
626 | ],
627 | },
628 | ];
629 |
630 | export const benefits = [
631 | {
632 | id: "0",
633 | title: "Ask anything",
634 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
635 | backgroundUrl: "assets/benefits/card-1.svg",
636 | iconUrl: benefitIcon1,
637 | imageUrl: benefitImage2,
638 | },
639 | {
640 | id: "1",
641 | title: "Improve everyday",
642 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.",
643 | backgroundUrl: "assets/benefits/card-2.svg",
644 | iconUrl: benefitIcon2,
645 | imageUrl: benefitImage2,
646 | light: true,
647 | },
648 | {
649 | id: "2",
650 | title: "Connect everywhere",
651 | text: "Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.",
652 | backgroundUrl: "assets/benefits/card-3.svg",
653 | iconUrl: benefitIcon3,
654 | imageUrl: benefitImage2,
655 | },
656 | {
657 | id: "3",
658 | title: "Fast responding",
659 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
660 | backgroundUrl: "assets/benefits/card-4.svg",
661 | iconUrl: benefitIcon4,
662 | imageUrl: benefitImage2,
663 | light: true,
664 | },
665 | {
666 | id: "4",
667 | title: "Ask anything",
668 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
669 | backgroundUrl: "assets/benefits/card-5.svg",
670 | iconUrl: benefitIcon1,
671 | imageUrl: benefitImage2,
672 | },
673 | {
674 | id: "5",
675 | title: "Improve everyday",
676 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.",
677 | backgroundUrl: "assets/benefits/card-6.svg",
678 | iconUrl: benefitIcon2,
679 | imageUrl: benefitImage2,
680 | },
681 | ];
682 |
683 | export const socials = [
684 | {
685 | id: "0",
686 | title: "Discord",
687 | iconUrl: discordBlack,
688 | url: "#",
689 | },
690 | {
691 | id: "1",
692 | title: "Twitter",
693 | iconUrl: twitter,
694 | url: "#",
695 | },
696 | {
697 | id: "2",
698 | title: "Instagram",
699 | iconUrl: instagram,
700 | url: "#",
701 | },
702 | {
703 | id: "3",
704 | title: "Telegram",
705 | iconUrl: telegram,
706 | url: "#",
707 | },
708 | {
709 | id: "4",
710 | title: "Facebook",
711 | iconUrl: facebook,
712 | url: "#",
713 | },
714 | ];
715 | ```
716 |
717 |
718 |
719 |
720 | components/Section.jsx
721 |
722 | ```javascript
723 | import SectionSvg from "../../public/assets/svg/SectionSvg";
724 |
725 | const Section = ({
726 | className,
727 | id,
728 | crosses,
729 | crossesOffset,
730 | customPaddings,
731 | children,
732 | }) => (
733 |
741 | {children}
742 |
743 |
744 |
745 |
746 | {crosses && (
747 | <>
748 |
753 |
754 |
755 | )}
756 |
763 |
764 |
765 | components/Roadmap.jsx
766 |
767 | ```javascript
768 | import Button from "./Button";
769 | import Heading from "./Heading";
770 | import Section from "./Section";
771 | import Tagline from "./TagLine";
772 | import { roadmap } from "../constants";
773 | import { check2, grid, loading1 } from "../../public/assets";
774 | import { Gradient } from "./design/Roadmap";
775 |
776 | const Roadmap = () => (
777 |
778 |
779 |
780 |
781 |
782 | {roadmap.map((item) => {
783 | const status = item.status === "done" ? "Done" : "In progress";
784 |
785 | return (
786 |
792 |
793 |
794 |
801 |
802 |
803 |
804 |
{item.date}
805 |
806 |
807 |
814 |
{status}
815 |
816 |
817 |
818 |
819 |
826 |
827 |
{item.title}
828 |
{item.text}
829 |
830 |
831 |
832 | );
833 | })}
834 |
835 |
836 |
837 |
838 |
839 |
840 |
841 |
849 |
850 | ## 🔗 Links
851 |
852 | - [Assets](https://drive.google.com/file/d/1JKzwPl_hnpjIlNbwfjMagb4HosxnyXbf/view?usp=sharing)
853 | - [Design](https://drive.google.com/file/d/15WJMOchujvaQ7Kg9e0nGeGR7G7JOeX1K/view?usp=sharing)
854 | - [Absolute Relative Positioning](https://css-tricks.com/absolute-positioning-inside-relative-positioning/)
855 | - [Live Website](https://jsm-brainwave.com/)
856 |
857 | ## 🚀 More
858 |
859 | **Advance your skills with Next.js Pro Course**
860 |
861 | Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning experience. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
862 |
863 |
864 | 
865 |
866 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 | Brainwave
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "brainwave",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-just-parallax": "^3.1.16",
16 | "react-router-dom": "^6.22.1",
17 | "scroll-lock": "^2.1.5"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^18.2.55",
21 | "@types/react-dom": "^18.2.19",
22 | "@vitejs/plugin-react": "^4.2.1",
23 | "autoprefixer": "^10.4.17",
24 | "eslint": "^8.56.0",
25 | "eslint-plugin-react": "^7.33.2",
26 | "eslint-plugin-react-hooks": "^4.6.0",
27 | "eslint-plugin-react-refresh": "^0.4.5",
28 | "postcss": "^8.4.35",
29 | "tailwindcss": "^3.4.1",
30 | "vite": "^5.1.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import ButtonGradient from "./assets/svg/ButtonGradient";
2 | import Benefits from "./components/Benefits";
3 | import Collaboration from "./components/Collaboration";
4 | import Footer from "./components/Footer";
5 | import Header from "./components/Header";
6 | import Hero from "./components/Hero";
7 | import Pricing from "./components/Pricing";
8 | import Roadmap from "./components/Roadmap";
9 | import Services from "./components/Services";
10 |
11 | const App = () => {
12 | return (
13 | <>
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
12 |
16 |
17 |
18 | {benefits.map((item) => (
19 |
26 |
27 |
{item.title}
28 |
{item.text}
29 |
30 |
36 |
37 | Explore more
38 |
39 |
40 |
41 |
42 |
43 | {item.light &&
}
44 |
45 |
49 |
50 | {item.imageUrl && (
51 |
58 | )}
59 |
60 |
61 |
62 |
63 |
64 | ))}
65 |
66 |
11 |
12 |
13 | AI Chat App for seamless collaboration
14 |
15 |
16 |
17 | {collabContent.map((item) => (
18 | -
19 |
20 |
21 |
{item.title}
22 |
{item.text}
25 | )}
26 |
27 | ))}
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | {collabText}
36 |
37 |
38 |
39 |
40 |
41 |
42 |
48 |
49 |
50 |
51 |
52 |
53 | {collabApps.map((app, index) => (
54 | -
60 |
65 |
72 |
74 | ))}
75 |
76 |
77 |
78 |
79 |
80 |
81 |
6 |
7 | Helping people create beautiful content at
8 |
9 |
10 | {companyLogos.map((logo, index) => (
11 | -
15 |
16 |
17 | ))}
18 |
19 |
9 |
10 | © {new Date().getFullYear()}. All rights reserved.
11 |
12 |
13 |
14 | {socials.map((item) => (
15 |
21 |
22 |
23 | ))}
24 |
25 |
10 |
11 | AI is generating
12 |
8 | {tag &&
{tag}}
9 | {title &&
{title}
}
10 | {text &&
{text}
}
11 |
24 |
25 |
26 | Explore the Possibilities of AI Chatting with {` `}
27 |
28 | Brainwave{" "}
29 | 
36 |
37 |
38 |
39 | Unleash the power of AI within Brainwave. Upgrade your productivity
40 | with Brainwave, the open AI chat app.
41 |
42 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
59 |
60 |
61 |
62 |
63 |
64 | {heroIcons.map((icon, index) => (
65 | -
66 |
67 |
68 | ))}
69 |
70 |
71 |
72 |
73 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
11 |
18 |
19 |
20 |
{title}
21 |
22 |
23 |
24 | {notificationImages.map((item, index) => (
25 | -
29 |
36 |
37 | ))}
38 |
39 |
1m ago
40 |
41 |
42 |
11 |
12 |
19 |
20 |
27 |
28 |
29 |
30 |
34 |
35 |
40 |
41 |
49 |
8 | {pricing.map((item) => (
9 |
13 |
{item.title}
14 |
15 |
16 | {item.description}
17 |
18 |
19 |
20 | {item.price && (
21 | <>
22 |
$
23 |
24 | {item.price}
25 |
26 |
27 | )}
28 |
29 |
30 |
37 |
38 |
39 | {item.features.map((feature, index) => (
40 | -
44 |
45 |
{feature}
46 |
47 | ))}
48 |
49 |
50 | ))}
51 |
12 |
13 |
14 |
15 | {roadmap.map((item) => {
16 | const status = item.status === "done" ? "Done" : "In progress";
17 |
18 | return (
19 |
25 |
26 |
27 |
34 |
35 |
36 |
37 |
{item.date}
38 |
39 |
40 |
47 |
{status}
48 |
49 |
50 |
51 |
52 |
59 |
60 |
{item.title}
61 |
{item.text}
62 |
63 |
64 |
65 | );
66 | })}
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
22 | {children}
23 |
24 |
25 |
26 |
27 | {crosses && (
28 | <>
29 |
34 |
35 |
36 | )}
37 |
18 |
22 |
23 |
24 |
25 |
26 |
33 |
34 |
35 |
36 |
Smartest AI
37 |
38 | Brainwave unlocks the potential of AI-powered applications
39 |
40 |
41 | {brainwaveServices.map((item, index) => (
42 | -
46 |
47 |
{item}
48 |
49 | ))}
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
66 |
67 |
68 |
69 |
Photo editing
70 |
71 | Automatically enhance your photos using our AI app's
72 | photo editing feature. Try it now!
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
Video generation
82 |
83 | The world’s most powerful AI photo and video art generation
84 | engine. What will you create?
85 |
86 |
87 |
88 | {brainwaveServicesIcons.map((item, index) => (
89 | -
97 |
104 |
105 |
107 | ))}
108 |
109 |
110 |
111 |
112 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
6 | {brackets("left")}
7 |
{children}
8 | {brackets("right")}
9 |
6 |
7 |
14 |
15 |
34 |
35 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
47 |
48 |
49 | {/* Moving background colored circle balls */}
50 |
51 |
58 |
59 |
66 |
67 |
74 |
75 |
82 |
83 |
90 |
91 |
98 |
99 |
6 |
13 |
20 |
27 |
6 |
7 |
14 |
15 |
7 |
14 |
21 | Hey Brainwave, enhance this photo
22 |
23 |
24 | );
25 | };
26 |
27 | export const VideoChatMessage = () => {
28 | return (
29 |
30 | Video generated!
31 |
32 |
38 |
39 |
40 | just now
41 |
42 |
46 |
53 |
60 |
61 |
64 |
10 | 
11 | 
12 |