{"id":18990610,"url":"https://github.com/aakashsharma7/brainwave","last_synced_at":"2026-04-12T15:53:15.371Z","repository":{"id":240029004,"uuid":"801460454","full_name":"aakashsharma7/BrainWave","owner":"aakashsharma7","description":"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.","archived":false,"fork":false,"pushed_at":"2024-05-16T09:52:57.000Z","size":11318,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T11:16:30.555Z","etag":null,"topics":["parallex-scrolling-effect","reactjs","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://brainwave-three-chi.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aakashsharma7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-16T09:19:20.000Z","updated_at":"2024-05-16T09:53:01.000Z","dependencies_parsed_at":"2024-05-16T10:51:30.284Z","dependency_job_id":"7577a274-a46a-4fcc-bd7e-6621998913b5","html_url":"https://github.com/aakashsharma7/BrainWave","commit_stats":null,"previous_names":["aakashsharma7/brainwave"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aakashsharma7/BrainWave","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashsharma7%2FBrainWave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashsharma7%2FBrainWave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashsharma7%2FBrainWave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashsharma7%2FBrainWave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aakashsharma7","download_url":"https://codeload.github.com/aakashsharma7/BrainWave/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aakashsharma7%2FBrainWave/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270011172,"owners_count":24511896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["parallex-scrolling-effect","reactjs","tailwindcss","vite"],"created_at":"2024-11-08T17:10:35.323Z","updated_at":"2026-04-12T15:53:10.344Z","avatar_url":"https://github.com/aakashsharma7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n    \u003ca href=\"https://youtu.be/B91wc5dCEBA\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://i.ibb.co/Kqdv8j1/Image-from.png\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n  \u003cdiv\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Vite-black?style=for-the-badge\u0026logoColor=white\u0026logo=vite\u0026color=646CFF\" alt=\"vite\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-React_JS-black?style=for-the-badge\u0026logoColor=white\u0026logo=react\u0026color=61DAFB\" alt=\"react.js\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge\u0026logoColor=white\u0026logo=tailwindcss\u0026color=06B6D4\" alt=\"tailwindcss\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch3 align=\"center\"\u003eModern UI/UX website\u003c/h3\u003e\n\n## 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets](#snippets)\n6. 🔗 [Links](#links)\n7. 🚀 [More](#more)\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nBrainwave - 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.\n\n\n## \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- Vite\n- React.js\n- Tailwind CSS\n\n## \u003ca name=\"features\"\u003e🔋 Features\u003c/a\u003e\n\n👉 **Beautiful Sections**: Includes hero, services, features, how to use, roadmap, pricing, footer, and header.\n\n👉 **Parallax Animations**: Engaging effects triggered by mouse movement and scrolling\n\n👉 **Complex UI Geometry**: Utilizes tailwindcss for intricate shapes like circular feature displays, grid lines, and side lines.\n\n👉 **Latest UI Trends**: Incorporates modern design elements such as bento grids.\n\n👉 **Cool Gradients**: Enhances visuals with stylish gradients using Tailwind CSS for cards, buttons, etc.\n\n👉 **Responsive**: Ensures seamless functionality and aesthetics across all devices\n\nand many more, including code architecture and reusability\n\n## \u003ca name=\"quick-start\"\u003e🤸 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https://github.com/JavaScript-Mastery-Pro/brainwave.git\ncd brainwave\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser to view the project.\n\n## \u003ca name=\"snippets\"\u003e🕸️ Snippets\u003c/a\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003e.vscode/settings.json\u003c/code\u003e\u003c/summary\u003e\n\n```json\n{\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  \"editor.formatOnSave\": true,\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\",\n    \"source.addMissingImports\": \"explicit\"\n  },\n  \"prettier.tabWidth\": 2,\n  \"prettier.useTabs\": false,\n  \"prettier.semi\": true,\n  \"prettier.singleQuote\": false,\n  \"prettier.jsxSingleQuote\": false,\n  \"prettier.trailingComma\": \"es5\",\n  \"prettier.arrowParens\": \"always\",\n  \"[javascriptreact]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[css]\": {\n    \"editor.defaultFormatter\": \"vscode.css-language-features\"\n  },\n  \"[svg]\": {\n    \"editor.defaultFormatter\": \"jock.svg\"\n  }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003etailwind.config.js\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\n/** @type {import('tailwindcss').Config} */\nimport { fontFamily } from \"tailwindcss/defaultTheme\";\nimport plugin from \"tailwindcss/plugin\";\n\nexport default {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n    \"./public/assets/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      colors: {\n        color: {\n          1: \"#AC6AFF\",\n          2: \"#FFC876\",\n          3: \"#FF776F\",\n          4: \"#7ADB78\",\n          5: \"#858DFF\",\n          6: \"#FF98E2\",\n        },\n        stroke: {\n          1: \"#26242C\",\n        },\n        n: {\n          1: \"#FFFFFF\",\n          2: \"#CAC6DD\",\n          3: \"#ADA8C3\",\n          4: \"#757185\",\n          5: \"#3F3A52\",\n          6: \"#252134\",\n          7: \"#15131D\",\n          8: \"#0E0C15\",\n          9: \"#474060\",\n          10: \"#43435C\",\n          11: \"#1B1B2E\",\n          12: \"#2E2A41\",\n          13: \"#6C7275\",\n        },\n      },\n      fontFamily: {\n        sans: [\"var(--font-sora)\", ...fontFamily.sans],\n        code: \"var(--font-code)\",\n        grotesk: \"var(--font-grotesk)\",\n      },\n      letterSpacing: {\n        tagline: \".15em\",\n      },\n      spacing: {\n        0.25: \"0.0625rem\",\n        7.5: \"1.875rem\",\n        15: \"3.75rem\",\n      },\n      opacity: {\n        15: \".15\",\n      },\n      transitionDuration: {\n        DEFAULT: \"200ms\",\n      },\n      transitionTimingFunction: {\n        DEFAULT: \"linear\",\n      },\n      zIndex: {\n        1: \"1\",\n        2: \"2\",\n        3: \"3\",\n        4: \"4\",\n        5: \"5\",\n      },\n      borderWidth: {\n        DEFAULT: \"0.0625rem\",\n      },\n      backgroundImage: {\n        \"radial-gradient\": \"radial-gradient(var(--tw-gradient-stops))\",\n        \"conic-gradient\":\n          \"conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)\",\n        \"benefit-card-1\": \"url(assets/benefits/card-1.svg)\",\n        \"benefit-card-2\": \"url(assets/benefits/card-2.svg)\",\n        \"benefit-card-3\": \"url(assets/benefits/card-3.svg)\",\n        \"benefit-card-4\": \"url(assets/benefits/card-4.svg)\",\n        \"benefit-card-5\": \"url(assets/benefits/card-5.svg)\",\n        \"benefit-card-6\": \"url(assets/benefits/card-6.svg)\",\n      },\n    },\n  },\n  plugins: [\n    plugin(function ({ addBase, addComponents, addUtilities }) {\n      addBase({});\n      addComponents({\n        \".container\": {\n          \"@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]\":\n            {},\n        },\n        \".h1\": {\n          \"@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]\":\n            {},\n        },\n        \".h2\": {\n          \"@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\":\n            {},\n        },\n        \".h3\": {\n          \"@apply text-[2rem] leading-normal md:text-[2.5rem]\": {},\n        },\n        \".h4\": {\n          \"@apply text-[2rem] leading-normal\": {},\n        },\n        \".h5\": {\n          \"@apply text-2xl leading-normal\": {},\n        },\n        \".h6\": {\n          \"@apply font-semibold text-lg leading-8\": {},\n        },\n        \".body-1\": {\n          \"@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8\":\n            {},\n        },\n        \".body-2\": {\n          \"@apply font-light text-[0.875rem] leading-6 md:text-base\": {},\n        },\n        \".caption\": {\n          \"@apply text-sm\": {},\n        },\n        \".tagline\": {\n          \"@apply font-grotesk font-light text-xs tracking-tagline uppercase\":\n            {},\n        },\n        \".quote\": {\n          \"@apply font-code text-lg leading-normal\": {},\n        },\n        \".button\": {\n          \"@apply font-code text-xs font-bold uppercase tracking-wider\": {},\n        },\n      });\n      addUtilities({\n        \".tap-highlight-color\": {\n          \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n        },\n      });\n    }),\n  ],\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003eindex.css\u003c/code\u003e\u003c/summary\u003e\n\n```css\n@import url(\"https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600\u0026display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700\u0026display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300\u0026display=swap\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n  --font-sora: \"Sora\", sans-serif;\n  --font-code: \"Source Code Pro\", monospace;\n  --font-grotesk: \"Space Grotesk\", sans-serif;\n}\n\n* {\n  scroll-behavior: smooth;\n}\n\n@layer base {\n  body {\n    @apply font-sans bg-n-8 text-n-1 text-base;\n  }\n}\n\n.rotate-45 {\n  @apply rotate-[45deg];\n}\n\n.rotate-90 {\n  @apply rotate-[90deg];\n}\n\n.rotate-135 {\n  @apply rotate-[135deg];\n}\n\n.rotate-180 {\n  @apply rotate-[180deg];\n}\n\n.rotate-225 {\n  @apply rotate-[225deg];\n}\n\n.rotate-270 {\n  @apply rotate-[270deg];\n}\n\n.rotate-315 {\n  @apply rotate-[315deg];\n}\n\n.rotate-360 {\n  @apply rotate-[360deg];\n}\n\n.-rotate-45 {\n  @apply rotate-[-45deg];\n}\n\n.-rotate-90 {\n  @apply rotate-[-90deg];\n}\n\n.-rotate-135 {\n  @apply rotate-[-135deg];\n}\n\n.-rotate-180 {\n  @apply rotate-[-180deg];\n}\n\n.-rotate-225 {\n  @apply rotate-[-225deg];\n}\n\n.-rotate-270 {\n  @apply rotate-[-270deg];\n}\n\n.-rotate-315 {\n  @apply rotate-[-315deg];\n}\n\n.-rotate-360 {\n  @apply rotate-[-360deg];\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003econstants/index.js\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\nimport {\n  benefitIcon1,\n  benefitIcon2,\n  benefitIcon3,\n  benefitIcon4,\n  benefitImage2,\n  chromecast,\n  disc02,\n  discord,\n  discordBlack,\n  facebook,\n  figma,\n  file02,\n  framer,\n  homeSmile,\n  instagram,\n  notification2,\n  notification3,\n  notification4,\n  notion,\n  photoshop,\n  plusSquare,\n  protopie,\n  raindrop,\n  recording01,\n  recording03,\n  roadmap1,\n  roadmap2,\n  roadmap3,\n  roadmap4,\n  searchMd,\n  slack,\n  sliders04,\n  telegram,\n  twitter,\n  yourlogo,\n} from \"../../public/assets\";\n\nexport const navigation = [\n  {\n    id: \"0\",\n    title: \"Features\",\n    url: \"#features\",\n  },\n  {\n    id: \"1\",\n    title: \"Pricing\",\n    url: \"#pricing\",\n  },\n  {\n    id: \"2\",\n    title: \"How to use\",\n    url: \"#how-to-use\",\n  },\n  {\n    id: \"3\",\n    title: \"Roadmap\",\n    url: \"#roadmap\",\n  },\n  {\n    id: \"4\",\n    title: \"New account\",\n    url: \"#signup\",\n    onlyMobile: true,\n  },\n  {\n    id: \"5\",\n    title: \"Sign in\",\n    url: \"#login\",\n    onlyMobile: true,\n  },\n];\n\nexport const heroIcons = [homeSmile, file02, searchMd, plusSquare];\n\nexport const notificationImages = [notification4, notification3, notification2];\n\nexport const companyLogos = [yourlogo, yourlogo, yourlogo, yourlogo, yourlogo];\n\nexport const brainwaveServices = [\n  \"Photo generating\",\n  \"Photo enhance\",\n  \"Seamless Integration\",\n];\n\nexport const brainwaveServicesIcons = [\n  recording03,\n  recording01,\n  disc02,\n  chromecast,\n  sliders04,\n];\n\nexport const roadmap = [\n  {\n    id: \"0\",\n    title: \"Voice recognition\",\n    text: \"Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.\",\n    date: \"May 2023\",\n    status: \"done\",\n    imageUrl: roadmap1,\n    colorful: true,\n  },\n  {\n    id: \"1\",\n    title: \"Gamification\",\n    text: \"Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.\",\n    date: \"May 2023\",\n    status: \"progress\",\n    imageUrl: roadmap2,\n  },\n  {\n    id: \"2\",\n    title: \"Chatbot customization\",\n    text: \"Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.\",\n    date: \"May 2023\",\n    status: \"done\",\n    imageUrl: roadmap3,\n  },\n  {\n    id: \"3\",\n    title: \"Integration with APIs\",\n    text: \"Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.\",\n    date: \"May 2023\",\n    status: \"progress\",\n    imageUrl: roadmap4,\n  },\n];\n\nexport const collabText =\n  \"With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.\";\n\nexport const collabContent = [\n  {\n    id: \"0\",\n    title: \"Seamless Integration\",\n    text: collabText,\n  },\n  {\n    id: \"1\",\n    title: \"Smart Automation\",\n  },\n  {\n    id: \"2\",\n    title: \"Top-notch Security\",\n  },\n];\n\nexport const collabApps = [\n  {\n    id: \"0\",\n    title: \"Figma\",\n    icon: figma,\n    width: 26,\n    height: 36,\n  },\n  {\n    id: \"1\",\n    title: \"Notion\",\n    icon: notion,\n    width: 34,\n    height: 36,\n  },\n  {\n    id: \"2\",\n    title: \"Discord\",\n    icon: discord,\n    width: 36,\n    height: 28,\n  },\n  {\n    id: \"3\",\n    title: \"Slack\",\n    icon: slack,\n    width: 34,\n    height: 35,\n  },\n  {\n    id: \"4\",\n    title: \"Photoshop\",\n    icon: photoshop,\n    width: 34,\n    height: 34,\n  },\n  {\n    id: \"5\",\n    title: \"Protopie\",\n    icon: protopie,\n    width: 34,\n    height: 34,\n  },\n  {\n    id: \"6\",\n    title: \"Framer\",\n    icon: framer,\n    width: 26,\n    height: 34,\n  },\n  {\n    id: \"7\",\n    title: \"Raindrop\",\n    icon: raindrop,\n    width: 38,\n    height: 32,\n  },\n];\n\nexport const pricing = [\n  {\n    id: \"0\",\n    title: \"Basic\",\n    description: \"AI chatbot, personalized recommendations\",\n    price: \"0\",\n    features: [\n      \"An AI chatbot that can understand your queries\",\n      \"Personalized recommendations based on your preferences\",\n      \"Ability to explore the app and its features without any cost\",\n    ],\n  },\n  {\n    id: \"1\",\n    title: \"Premium\",\n    description: \"Advanced AI chatbot, priority support, analytics dashboard\",\n    price: \"9.99\",\n    features: [\n      \"An advanced AI chatbot that can understand complex queries\",\n      \"An analytics dashboard to track your conversations\",\n      \"Priority support to solve issues quickly\",\n    ],\n  },\n  {\n    id: \"2\",\n    title: \"Enterprise\",\n    description: \"Custom AI chatbot, advanced analytics, dedicated account\",\n    price: null,\n    features: [\n      \"An AI chatbot that can understand your queries\",\n      \"Personalized recommendations based on your preferences\",\n      \"Ability to explore the app and its features without any cost\",\n    ],\n  },\n];\n\nexport const benefits = [\n  {\n    id: \"0\",\n    title: \"Ask anything\",\n    text: \"Lets users quickly find answers to their questions without having to search through multiple sources.\",\n    backgroundUrl: \"assets/benefits/card-1.svg\",\n    iconUrl: benefitIcon1,\n    imageUrl: benefitImage2,\n  },\n  {\n    id: \"1\",\n    title: \"Improve everyday\",\n    text: \"The app uses natural language processing to understand user queries and provide accurate and relevant responses.\",\n    backgroundUrl: \"assets/benefits/card-2.svg\",\n    iconUrl: benefitIcon2,\n    imageUrl: benefitImage2,\n    light: true,\n  },\n  {\n    id: \"2\",\n    title: \"Connect everywhere\",\n    text: \"Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.\",\n    backgroundUrl: \"assets/benefits/card-3.svg\",\n    iconUrl: benefitIcon3,\n    imageUrl: benefitImage2,\n  },\n  {\n    id: \"3\",\n    title: \"Fast responding\",\n    text: \"Lets users quickly find answers to their questions without having to search through multiple sources.\",\n    backgroundUrl: \"assets/benefits/card-4.svg\",\n    iconUrl: benefitIcon4,\n    imageUrl: benefitImage2,\n    light: true,\n  },\n  {\n    id: \"4\",\n    title: \"Ask anything\",\n    text: \"Lets users quickly find answers to their questions without having to search through multiple sources.\",\n    backgroundUrl: \"assets/benefits/card-5.svg\",\n    iconUrl: benefitIcon1,\n    imageUrl: benefitImage2,\n  },\n  {\n    id: \"5\",\n    title: \"Improve everyday\",\n    text: \"The app uses natural language processing to understand user queries and provide accurate and relevant responses.\",\n    backgroundUrl: \"assets/benefits/card-6.svg\",\n    iconUrl: benefitIcon2,\n    imageUrl: benefitImage2,\n  },\n];\n\nexport const socials = [\n  {\n    id: \"0\",\n    title: \"Discord\",\n    iconUrl: discordBlack,\n    url: \"#\",\n  },\n  {\n    id: \"1\",\n    title: \"Twitter\",\n    iconUrl: twitter,\n    url: \"#\",\n  },\n  {\n    id: \"2\",\n    title: \"Instagram\",\n    iconUrl: instagram,\n    url: \"#\",\n  },\n  {\n    id: \"3\",\n    title: \"Telegram\",\n    iconUrl: telegram,\n    url: \"#\",\n  },\n  {\n    id: \"4\",\n    title: \"Facebook\",\n    iconUrl: facebook,\n    url: \"#\",\n  },\n];\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ecomponents/Section.jsx\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\nimport SectionSvg from \"../../public/assets/svg/SectionSvg\";\n\nconst Section = ({\n  className,\n  id,\n  crosses,\n  crossesOffset,\n  customPaddings,\n  children,\n}) =\u003e (\n  \u003cdiv\n    id={id}\n    className={`relative \n    ${\n      customPaddings ||\n      `py-10 lg:py-16 xl:py-20 ${crosses ? \"lg:py-32 xl:py-40\" : \"\"}`\n    } ${className || \"\"}`}\n  \u003e\n    {children}\n\n    \u003cdiv className=\"hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10\" /\u003e\n    \u003cdiv className=\"hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10\" /\u003e\n\n    {crosses \u0026\u0026 (\n      \u003c\u003e\n        \u003cdiv\n          className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${\n            crossesOffset \u0026\u0026 crossesOffset\n          } pointer-events-none lg:block xl:left-10 right-10`}\n        /\u003e\n        \u003cSectionSvg crossesOffset={crossesOffset} /\u003e\n      \u003c/\u003e\n    )}\n  \u003c/div\u003e\n);\n\nexport default Section;\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ccode\u003ecomponents/Roadmap.jsx\u003c/code\u003e\u003c/summary\u003e\n\n```javascript\nimport Button from \"./Button\";\nimport Heading from \"./Heading\";\nimport Section from \"./Section\";\nimport Tagline from \"./TagLine\";\nimport { roadmap } from \"../constants\";\nimport { check2, grid, loading1 } from \"../../public/assets\";\nimport { Gradient } from \"./design/Roadmap\";\n\nconst Roadmap = () =\u003e (\n  \u003cSection className=\"overflow-hidden\" id=\"roadmap\"\u003e\n    \u003cdiv className=\"container md:pb-10\"\u003e\n      \u003cHeading tag=\"Ready to get started\" title=\"What we’re working on\" /\u003e\n\n      \u003cdiv className=\"relative grid gap-6 md:grid-cols-2 md:gap-4 md:pb-[7rem]\"\u003e\n        {roadmap.map((item) =\u003e {\n          const status = item.status === \"done\" ? \"Done\" : \"In progress\";\n\n          return (\n            \u003cdiv\n              className={`md:flex even:md:translate-y-[7rem] p-0.25 rounded-[2.5rem] ${\n                item.colorful ? \"bg-conic-gradient\" : \"bg-n-6\"\n              }`}\n              key={item.id}\n            \u003e\n              \u003cdiv className=\"relative p-8 bg-n-8 rounded-[2.4375rem] overflow-hidden xl:p-15\"\u003e\n                \u003cdiv className=\"absolute top-0 left-0 max-w-full\"\u003e\n                  \u003cimg\n                    className=\"w-full\"\n                    src={grid}\n                    width={550}\n                    height={550}\n                    alt=\"Grid\"\n                  /\u003e\n                \u003c/div\u003e\n                \u003cdiv className=\"relative z-1\"\u003e\n                  \u003cdiv className=\"flex items-center justify-between max-w-[27rem] mb-8 md:mb-20\"\u003e\n                    \u003cTagline\u003e{item.date}\u003c/Tagline\u003e\n\n                    \u003cdiv className=\"flex items-center px-4 py-1 bg-n-1 rounded text-n-8\"\u003e\n                      \u003cimg\n                        className=\"mr-2.5\"\n                        src={item.status === \"done\" ? check2 : loading1}\n                        width={16}\n                        height={16}\n                        alt={status}\n                      /\u003e\n                      \u003cdiv className=\"tagline\"\u003e{status}\u003c/div\u003e\n                    \u003c/div\u003e\n                  \u003c/div\u003e\n\n                  \u003cdiv className=\"mb-10 -my-10 -mx-15\"\u003e\n                    \u003cimg\n                      className=\"w-full\"\n                      src={item.imageUrl}\n                      width={628}\n                      height={426}\n                      alt={item.title}\n                    /\u003e\n                  \u003c/div\u003e\n                  \u003ch4 className=\"h4 mb-4\"\u003e{item.title}\u003c/h4\u003e\n                  \u003cp className=\"body-2 text-n-4\"\u003e{item.text}\u003c/p\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          );\n        })}\n\n        \u003cGradient /\u003e\n      \u003c/div\u003e\n\n      \u003cdiv className=\"flex justify-center mt-12 md:mt-15 xl:mt-20\"\u003e\n        \u003cButton href=\"/roadmap\"\u003eOur roadmap\u003c/Button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/Section\u003e\n);\n\nexport default Roadmap;\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n#\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faakashsharma7%2Fbrainwave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faakashsharma7%2Fbrainwave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faakashsharma7%2Fbrainwave/lists"}