.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,
}) => (
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 = () => (
![Project Banner](https://private-user-images.githubusercontent.com/151519281/289158181-557837ce-f612-4530-ab24-189e75133c71.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM3MzUxNjEsIm5iZiI6MTcyMzczNDg2MSwicGF0aCI6Ii8xNTE1MTkyODEvMjg5MTU4MTgxLTU1NzgzN2NlLWY2MTItNDUzMC1hYjI0LTE4OWU3NTEzM2M3MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNVQxNTE0MjFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zMDQ1YTA5Y2M2ZGFjYTllOWY5YjE0ZDlkMTY3ZjMxNjAwNmUzZDIwMTNjM2IyNWY5Yjc3M2UyNzg5YWEyMGVkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.QG8PfPADc7sVDL3imoUYvOVNt5j2DAuUt2q8P58gmvQ)
**Accelerate your professional journey with the Expert Training program** And if you're hungry for more than just a course and want to understand how we learn and tackle tech challenges, hop into our personalized masterclass. We cover best practices, different web skills, and offer mentorship to boost your confidence. Let's learn and grow together!
![Project Banner](https://private-user-images.githubusercontent.com/151519281/289158263-fed352ad-f27b-400d-9b8f-c7fe628acb84.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM3MzUxNjEsIm5iZiI6MTcyMzczNDg2MSwicGF0aCI6Ii8xNTE1MTkyODEvMjg5MTU4MjYzLWZlZDM1MmFkLWYyN2ItNDAwZC05YjhmLWM3ZmU2MjhhY2I4NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxNVQxNTE0MjFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wN2MzOTczNTE0MzgwNTM3ZmYxOWQwNjI4ODUxOGIxMzQ2YjQ4NzNmNWMyZDI2N2UwNWU4NDdlOGQ0MDhlYTFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.aCcUIaxtV4RTPuWW_23-3bys2MLSCoSgl32eIoH_rP4)