├── .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 |
8 |
9 |
Modern UI/UX website
10 |
11 |
12 | Build this project step by step with our detailed tutorial on
JavaScript Mastery YouTube.
13 |
14 |
92 | .vscode/settings.json
93 |
94 | ```json
95 | {
96 | "editor.defaultFormatter": "esbenp.prettier-vscode",
97 | "editor.formatOnSave": true,
98 | "editor.codeActionsOnSave": {
99 | "source.fixAll.eslint": "explicit",
100 | "source.addMissingImports": "explicit"
101 | },
102 | "prettier.tabWidth": 2,
103 | "prettier.useTabs": false,
104 | "prettier.semi": true,
105 | "prettier.singleQuote": false,
106 | "prettier.jsxSingleQuote": false,
107 | "prettier.trailingComma": "es5",
108 | "prettier.arrowParens": "always",
109 | "[javascriptreact]": {
110 | "editor.defaultFormatter": "esbenp.prettier-vscode"
111 | },
112 | "[css]": {
113 | "editor.defaultFormatter": "vscode.css-language-features"
114 | },
115 | "[svg]": {
116 | "editor.defaultFormatter": "jock.svg"
117 | }
118 | }
119 | ```
120 |
121 |
122 |
123 |
124 | tailwind.config.js
125 |
126 | ```javascript
127 | /** @type {import('tailwindcss').Config} */
128 | import { fontFamily } from "tailwindcss/defaultTheme";
129 | import plugin from "tailwindcss/plugin";
130 |
131 | export default {
132 | content: [
133 | "./index.html",
134 | "./src/**/*.{js,ts,jsx,tsx}",
135 | "./public/assets/**/*.{js,ts,jsx,tsx}",
136 | ],
137 | theme: {
138 | extend: {
139 | colors: {
140 | color: {
141 | 1: "#AC6AFF",
142 | 2: "#FFC876",
143 | 3: "#FF776F",
144 | 4: "#7ADB78",
145 | 5: "#858DFF",
146 | 6: "#FF98E2",
147 | },
148 | stroke: {
149 | 1: "#26242C",
150 | },
151 | n: {
152 | 1: "#FFFFFF",
153 | 2: "#CAC6DD",
154 | 3: "#ADA8C3",
155 | 4: "#757185",
156 | 5: "#3F3A52",
157 | 6: "#252134",
158 | 7: "#15131D",
159 | 8: "#0E0C15",
160 | 9: "#474060",
161 | 10: "#43435C",
162 | 11: "#1B1B2E",
163 | 12: "#2E2A41",
164 | 13: "#6C7275",
165 | },
166 | },
167 | fontFamily: {
168 | sans: ["var(--font-sora)", ...fontFamily.sans],
169 | code: "var(--font-code)",
170 | grotesk: "var(--font-grotesk)",
171 | },
172 | letterSpacing: {
173 | tagline: ".15em",
174 | },
175 | spacing: {
176 | 0.25: "0.0625rem",
177 | 7.5: "1.875rem",
178 | 15: "3.75rem",
179 | },
180 | opacity: {
181 | 15: ".15",
182 | },
183 | transitionDuration: {
184 | DEFAULT: "200ms",
185 | },
186 | transitionTimingFunction: {
187 | DEFAULT: "linear",
188 | },
189 | zIndex: {
190 | 1: "1",
191 | 2: "2",
192 | 3: "3",
193 | 4: "4",
194 | 5: "5",
195 | },
196 | borderWidth: {
197 | DEFAULT: "0.0625rem",
198 | },
199 | backgroundImage: {
200 | "radial-gradient": "radial-gradient(var(--tw-gradient-stops))",
201 | "conic-gradient":
202 | "conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)",
203 | "benefit-card-1": "url(assets/benefits/card-1.svg)",
204 | "benefit-card-2": "url(assets/benefits/card-2.svg)",
205 | "benefit-card-3": "url(assets/benefits/card-3.svg)",
206 | "benefit-card-4": "url(assets/benefits/card-4.svg)",
207 | "benefit-card-5": "url(assets/benefits/card-5.svg)",
208 | "benefit-card-6": "url(assets/benefits/card-6.svg)",
209 | },
210 | },
211 | },
212 | plugins: [
213 | plugin(function ({ addBase, addComponents, addUtilities }) {
214 | addBase({});
215 | addComponents({
216 | ".container": {
217 | "@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]":
218 | {},
219 | },
220 | ".h1": {
221 | "@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]":
222 | {},
223 | },
224 | ".h2": {
225 | "@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":
226 | {},
227 | },
228 | ".h3": {
229 | "@apply text-[2rem] leading-normal md:text-[2.5rem]": {},
230 | },
231 | ".h4": {
232 | "@apply text-[2rem] leading-normal": {},
233 | },
234 | ".h5": {
235 | "@apply text-2xl leading-normal": {},
236 | },
237 | ".h6": {
238 | "@apply font-semibold text-lg leading-8": {},
239 | },
240 | ".body-1": {
241 | "@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
242 | {},
243 | },
244 | ".body-2": {
245 | "@apply font-light text-[0.875rem] leading-6 md:text-base": {},
246 | },
247 | ".caption": {
248 | "@apply text-sm": {},
249 | },
250 | ".tagline": {
251 | "@apply font-grotesk font-light text-xs tracking-tagline uppercase":
252 | {},
253 | },
254 | ".quote": {
255 | "@apply font-code text-lg leading-normal": {},
256 | },
257 | ".button": {
258 | "@apply font-code text-xs font-bold uppercase tracking-wider": {},
259 | },
260 | });
261 | addUtilities({
262 | ".tap-highlight-color": {
263 | "-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)",
264 | },
265 | });
266 | }),
267 | ],
268 | };
269 | ```
270 |
271 |
272 |
273 |
274 | index.css
275 |
276 | ```css
277 | @import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600&display=swap");
278 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap");
279 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap");
280 |
281 | @tailwind base;
282 | @tailwind components;
283 | @tailwind utilities;
284 |
285 | :root {
286 | --font-sora: "Sora", sans-serif;
287 | --font-code: "Source Code Pro", monospace;
288 | --font-grotesk: "Space Grotesk", sans-serif;
289 | }
290 |
291 | * {
292 | scroll-behavior: smooth;
293 | }
294 |
295 | @layer base {
296 | body {
297 | @apply font-sans bg-n-8 text-n-1 text-base;
298 | }
299 | }
300 |
301 | .rotate-45 {
302 | @apply rotate-[45deg];
303 | }
304 |
305 | .rotate-90 {
306 | @apply rotate-[90deg];
307 | }
308 |
309 | .rotate-135 {
310 | @apply rotate-[135deg];
311 | }
312 |
313 | .rotate-180 {
314 | @apply rotate-[180deg];
315 | }
316 |
317 | .rotate-225 {
318 | @apply rotate-[225deg];
319 | }
320 |
321 | .rotate-270 {
322 | @apply rotate-[270deg];
323 | }
324 |
325 | .rotate-315 {
326 | @apply rotate-[315deg];
327 | }
328 |
329 | .rotate-360 {
330 | @apply rotate-[360deg];
331 | }
332 |
333 | .-rotate-45 {
334 | @apply rotate-[-45deg];
335 | }
336 |
337 | .-rotate-90 {
338 | @apply rotate-[-90deg];
339 | }
340 |
341 | .-rotate-135 {
342 | @apply rotate-[-135deg];
343 | }
344 |
345 | .-rotate-180 {
346 | @apply rotate-[-180deg];
347 | }
348 |
349 | .-rotate-225 {
350 | @apply rotate-[-225deg];
351 | }
352 |
353 | .-rotate-270 {
354 | @apply rotate-[-270deg];
355 | }
356 |
357 | .-rotate-315 {
358 | @apply rotate-[-315deg];
359 | }
360 |
361 | .-rotate-360 {
362 | @apply rotate-[-360deg];
363 | }
364 | ```
365 |
366 |
367 |
368 |
369 | constants/index.js
370 |
371 | ```javascript
372 | import {
373 | benefitIcon1,
374 | benefitIcon2,
375 | benefitIcon3,
376 | benefitIcon4,
377 | benefitImage2,
378 | chromecast,
379 | disc02,
380 | discord,
381 | discordBlack,
382 | facebook,
383 | figma,
384 | file02,
385 | framer,
386 | homeSmile,
387 | instagram,
388 | notification2,
389 | notification3,
390 | notification4,
391 | notion,
392 | photoshop,
393 | plusSquare,
394 | protopie,
395 | raindrop,
396 | recording01,
397 | recording03,
398 | roadmap1,
399 | roadmap2,
400 | roadmap3,
401 | roadmap4,
402 | searchMd,
403 | slack,
404 | sliders04,
405 | telegram,
406 | twitter,
407 | yourlogo,
408 | } from "../../public/assets";
409 |
410 | export const navigation = [
411 | {
412 | id: "0",
413 | title: "Features",
414 | url: "#features",
415 | },
416 | {
417 | id: "1",
418 | title: "Pricing",
419 | url: "#pricing",
420 | },
421 | {
422 | id: "2",
423 | title: "How to use",
424 | url: "#how-to-use",
425 | },
426 | {
427 | id: "3",
428 | title: "Roadmap",
429 | url: "#roadmap",
430 | },
431 | {
432 | id: "4",
433 | title: "New account",
434 | url: "#signup",
435 | onlyMobile: true,
436 | },
437 | {
438 | id: "5",
439 | title: "Sign in",
440 | url: "#login",
441 | onlyMobile: true,
442 | },
443 | ];
444 |
445 | export const heroIcons = [homeSmile, file02, searchMd, plusSquare];
446 |
447 | export const notificationImages = [notification4, notification3, notification2];
448 |
449 | export const companyLogos = [yourlogo, yourlogo, yourlogo, yourlogo, yourlogo];
450 |
451 | export const brainwaveServices = [
452 | "Photo generating",
453 | "Photo enhance",
454 | "Seamless Integration",
455 | ];
456 |
457 | export const brainwaveServicesIcons = [
458 | recording03,
459 | recording01,
460 | disc02,
461 | chromecast,
462 | sliders04,
463 | ];
464 |
465 | export const roadmap = [
466 | {
467 | id: "0",
468 | title: "Voice recognition",
469 | text: "Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.",
470 | date: "May 2023",
471 | status: "done",
472 | imageUrl: roadmap1,
473 | colorful: true,
474 | },
475 | {
476 | id: "1",
477 | title: "Gamification",
478 | text: "Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.",
479 | date: "May 2023",
480 | status: "progress",
481 | imageUrl: roadmap2,
482 | },
483 | {
484 | id: "2",
485 | title: "Chatbot customization",
486 | text: "Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.",
487 | date: "May 2023",
488 | status: "done",
489 | imageUrl: roadmap3,
490 | },
491 | {
492 | id: "3",
493 | title: "Integration with APIs",
494 | text: "Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.",
495 | date: "May 2023",
496 | status: "progress",
497 | imageUrl: roadmap4,
498 | },
499 | ];
500 |
501 | export const collabText =
502 | "With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.";
503 |
504 | export const collabContent = [
505 | {
506 | id: "0",
507 | title: "Seamless Integration",
508 | text: collabText,
509 | },
510 | {
511 | id: "1",
512 | title: "Smart Automation",
513 | },
514 | {
515 | id: "2",
516 | title: "Top-notch Security",
517 | },
518 | ];
519 |
520 | export const collabApps = [
521 | {
522 | id: "0",
523 | title: "Figma",
524 | icon: figma,
525 | width: 26,
526 | height: 36,
527 | },
528 | {
529 | id: "1",
530 | title: "Notion",
531 | icon: notion,
532 | width: 34,
533 | height: 36,
534 | },
535 | {
536 | id: "2",
537 | title: "Discord",
538 | icon: discord,
539 | width: 36,
540 | height: 28,
541 | },
542 | {
543 | id: "3",
544 | title: "Slack",
545 | icon: slack,
546 | width: 34,
547 | height: 35,
548 | },
549 | {
550 | id: "4",
551 | title: "Photoshop",
552 | icon: photoshop,
553 | width: 34,
554 | height: 34,
555 | },
556 | {
557 | id: "5",
558 | title: "Protopie",
559 | icon: protopie,
560 | width: 34,
561 | height: 34,
562 | },
563 | {
564 | id: "6",
565 | title: "Framer",
566 | icon: framer,
567 | width: 26,
568 | height: 34,
569 | },
570 | {
571 | id: "7",
572 | title: "Raindrop",
573 | icon: raindrop,
574 | width: 38,
575 | height: 32,
576 | },
577 | ];
578 |
579 | export const pricing = [
580 | {
581 | id: "0",
582 | title: "Basic",
583 | description: "AI chatbot, personalized recommendations",
584 | price: "0",
585 | features: [
586 | "An AI chatbot that can understand your queries",
587 | "Personalized recommendations based on your preferences",
588 | "Ability to explore the app and its features without any cost",
589 | ],
590 | },
591 | {
592 | id: "1",
593 | title: "Premium",
594 | description: "Advanced AI chatbot, priority support, analytics dashboard",
595 | price: "9.99",
596 | features: [
597 | "An advanced AI chatbot that can understand complex queries",
598 | "An analytics dashboard to track your conversations",
599 | "Priority support to solve issues quickly",
600 | ],
601 | },
602 | {
603 | id: "2",
604 | title: "Enterprise",
605 | description: "Custom AI chatbot, advanced analytics, dedicated account",
606 | price: null,
607 | features: [
608 | "An AI chatbot that can understand your queries",
609 | "Personalized recommendations based on your preferences",
610 | "Ability to explore the app and its features without any cost",
611 | ],
612 | },
613 | ];
614 |
615 | export const benefits = [
616 | {
617 | id: "0",
618 | title: "Ask anything",
619 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
620 | backgroundUrl: "assets/benefits/card-1.svg",
621 | iconUrl: benefitIcon1,
622 | imageUrl: benefitImage2,
623 | },
624 | {
625 | id: "1",
626 | title: "Improve everyday",
627 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.",
628 | backgroundUrl: "assets/benefits/card-2.svg",
629 | iconUrl: benefitIcon2,
630 | imageUrl: benefitImage2,
631 | light: true,
632 | },
633 | {
634 | id: "2",
635 | title: "Connect everywhere",
636 | text: "Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.",
637 | backgroundUrl: "assets/benefits/card-3.svg",
638 | iconUrl: benefitIcon3,
639 | imageUrl: benefitImage2,
640 | },
641 | {
642 | id: "3",
643 | title: "Fast responding",
644 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
645 | backgroundUrl: "assets/benefits/card-4.svg",
646 | iconUrl: benefitIcon4,
647 | imageUrl: benefitImage2,
648 | light: true,
649 | },
650 | {
651 | id: "4",
652 | title: "Ask anything",
653 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
654 | backgroundUrl: "assets/benefits/card-5.svg",
655 | iconUrl: benefitIcon1,
656 | imageUrl: benefitImage2,
657 | },
658 | {
659 | id: "5",
660 | title: "Improve everyday",
661 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.",
662 | backgroundUrl: "assets/benefits/card-6.svg",
663 | iconUrl: benefitIcon2,
664 | imageUrl: benefitImage2,
665 | },
666 | ];
667 |
668 | export const socials = [
669 | {
670 | id: "0",
671 | title: "Discord",
672 | iconUrl: discordBlack,
673 | url: "#",
674 | },
675 | {
676 | id: "1",
677 | title: "Twitter",
678 | iconUrl: twitter,
679 | url: "#",
680 | },
681 | {
682 | id: "2",
683 | title: "Instagram",
684 | iconUrl: instagram,
685 | url: "#",
686 | },
687 | {
688 | id: "3",
689 | title: "Telegram",
690 | iconUrl: telegram,
691 | url: "#",
692 | },
693 | {
694 | id: "4",
695 | title: "Facebook",
696 | iconUrl: facebook,
697 | url: "#",
698 | },
699 | ];
700 | ```
701 |
702 |
703 |
704 |
705 | components/Section.jsx
706 |
707 | ```javascript
708 | import SectionSvg from "../../public/assets/svg/SectionSvg";
709 |
710 | const Section = ({
711 | className,
712 | id,
713 | crosses,
714 | crossesOffset,
715 | customPaddings,
716 | children,
717 | }) => (
718 |
726 | {children}
727 |
728 |
729 |
730 |
731 | {crosses && (
732 | <>
733 |
738 |
739 |
740 | )}
741 |
748 |
749 |
750 | components/Roadmap.jsx
751 |
752 | ```javascript
753 | import Button from "./Button";
754 | import Heading from "./Heading";
755 | import Section from "./Section";
756 | import Tagline from "./TagLine";
757 | import { roadmap } from "../constants";
758 | import { check2, grid, loading1 } from "../../public/assets";
759 | import { Gradient } from "./design/Roadmap";
760 |
761 | const Roadmap = () => (
762 |
763 |
764 |
765 |
766 |
767 | {roadmap.map((item) => {
768 | const status = item.status === "done" ? "Done" : "In progress";
769 |
770 | return (
771 |
777 |
778 |
779 |
786 |
787 |
788 |
789 |
{item.date}
790 |
791 |
792 |
799 |
{status}
800 |
801 |
802 |
803 |
804 |
811 |
812 |
{item.title}
813 |
{item.text}
814 |
815 |
816 |
817 | );
818 | })}
819 |
820 |
821 |
822 |
823 |
824 |
825 |
826 |
834 |
835 | #
836 |
--------------------------------------------------------------------------------
/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 |
5 | 
6 | 
7 |