{"id":19817132,"url":"https://github.com/mujeebsulayman/brain3-dapp-ui","last_synced_at":"2026-05-08T03:05:43.718Z","repository":{"id":248223727,"uuid":"828118829","full_name":"MujeebSulayman/Brain3-Dapp-UI","owner":"MujeebSulayman","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-29T16:56:00.000Z","size":11729,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T08:08:51.332Z","etag":null,"topics":["tailwindcss","vite","vitejs"],"latest_commit_sha":null,"homepage":"https://brain3-dapp-ui.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/MujeebSulayman.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-07-13T07:09:33.000Z","updated_at":"2024-07-29T16:56:04.000Z","dependencies_parsed_at":"2024-11-12T10:11:47.642Z","dependency_job_id":"d527ee17-98ac-45b0-9001-a29f997fff23","html_url":"https://github.com/MujeebSulayman/Brain3-Dapp-UI","commit_stats":null,"previous_names":["mujeebsulayman/brain3-dapp-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MujeebSulayman%2FBrain3-Dapp-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MujeebSulayman%2FBrain3-Dapp-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MujeebSulayman%2FBrain3-Dapp-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MujeebSulayman%2FBrain3-Dapp-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MujeebSulayman","download_url":"https://codeload.github.com/MujeebSulayman/Brain3-Dapp-UI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241170290,"owners_count":19921574,"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","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":["tailwindcss","vite","vitejs"],"created_at":"2024-11-12T10:11:43.276Z","updated_at":"2026-05-08T03:05:43.650Z","avatar_url":"https://github.com/MujeebSulayman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003ch3 align=\"center\"\u003eWeb3 Dapp UI website\u003c/h3\u003e\n\n\u003c/div\u003e\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nBrain3 - Modern UI/ website, developed using React.js and Tailwind CSS, exemplifies modern UI/ 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/MujeebSulayman/Brain3-UI-design.git\ncd Brain3\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\t\"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n\t\"editor.formatOnSave\": true,\n\t\"editor.codeActionsOnSave\": {\n\t\t\"source.fixAll.eslint\": \"explicit\",\n\t\t\"source.addMissingImports\": \"explicit\"\n\t},\n\t\"prettier.tabWidth\": 2,\n\t\"prettier.useTabs\": false,\n\t\"prettier.semi\": true,\n\t\"prettier.singleQuote\": false,\n\t\"prettier.jsxSingleQuote\": false,\n\t\"prettier.trailingComma\": \"es5\",\n\t\"prettier.arrowParens\": \"always\",\n\t\"[javascriptreact]\": {\n\t\t\"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n\t},\n\t\"[css]\": {\n\t\t\"editor.defaultFormatter\": \"vscode.css-language-features\"\n\t},\n\t\"[svg]\": {\n\t\t\"editor.defaultFormatter\": \"jock.svg\"\n\t}\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\tcontent: [\n\t\t'./index.html',\n\t\t'./src/**/*.{js,ts,jsx,tsx}',\n\t\t'./public/assets/**/*.{js,ts,jsx,tsx}',\n\t],\n\ttheme: {\n\t\textend: {\n\t\t\tcolors: {\n\t\t\t\tcolor: {\n\t\t\t\t\t1: '#AC6AFF',\n\t\t\t\t\t2: '#FFC876',\n\t\t\t\t\t3: '#FF776F',\n\t\t\t\t\t4: '#7ADB78',\n\t\t\t\t\t5: '#858DFF',\n\t\t\t\t\t6: '#FF98E2',\n\t\t\t\t},\n\t\t\t\tstroke: {\n\t\t\t\t\t1: '#26242C',\n\t\t\t\t},\n\t\t\t\tn: {\n\t\t\t\t\t1: '#FFFFFF',\n\t\t\t\t\t2: '#CAC6DD',\n\t\t\t\t\t3: '#ADA8C3',\n\t\t\t\t\t4: '#757185',\n\t\t\t\t\t5: '#3F3A52',\n\t\t\t\t\t6: '#252134',\n\t\t\t\t\t7: '#15131D',\n\t\t\t\t\t8: '#0E0C15',\n\t\t\t\t\t9: '#474060',\n\t\t\t\t\t10: '#43435C',\n\t\t\t\t\t11: '#1B1B2E',\n\t\t\t\t\t12: '#2E2A41',\n\t\t\t\t\t13: '#6C7275',\n\t\t\t\t},\n\t\t\t},\n\t\t\tfontFamily: {\n\t\t\t\tsans: ['var(--font-sora)', ...fontFamily.sans],\n\t\t\t\tcode: 'var(--font-code)',\n\t\t\t\tgrotesk: 'var(--font-grotesk)',\n\t\t\t},\n\t\t\tletterSpacing: {\n\t\t\t\ttagline: '.15em',\n\t\t\t},\n\t\t\tspacing: {\n\t\t\t\t0.25: '0.0625rem',\n\t\t\t\t7.5: '1.875rem',\n\t\t\t\t15: '3.75rem',\n\t\t\t},\n\t\t\topacity: {\n\t\t\t\t15: '.15',\n\t\t\t},\n\t\t\ttransitionDuration: {\n\t\t\t\tDEFAULT: '200ms',\n\t\t\t},\n\t\t\ttransitionTimingFunction: {\n\t\t\t\tDEFAULT: 'linear',\n\t\t\t},\n\t\t\tzIndex: {\n\t\t\t\t1: '1',\n\t\t\t\t2: '2',\n\t\t\t\t3: '3',\n\t\t\t\t4: '4',\n\t\t\t\t5: '5',\n\t\t\t},\n\t\t\tborderWidth: {\n\t\t\t\tDEFAULT: '0.0625rem',\n\t\t\t},\n\t\t\tbackgroundImage: {\n\t\t\t\t'radial-gradient': 'radial-gradient(var(--tw-gradient-stops))',\n\t\t\t\t'conic-gradient':\n\t\t\t\t\t'conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)',\n\t\t\t\t'benefit-card-1': 'url(assets/benefits/card-1.svg)',\n\t\t\t\t'benefit-card-2': 'url(assets/benefits/card-2.svg)',\n\t\t\t\t'benefit-card-3': 'url(assets/benefits/card-3.svg)',\n\t\t\t\t'benefit-card-4': 'url(assets/benefits/card-4.svg)',\n\t\t\t\t'benefit-card-5': 'url(assets/benefits/card-5.svg)',\n\t\t\t\t'benefit-card-6': 'url(assets/benefits/card-6.svg)',\n\t\t\t},\n\t\t},\n\t},\n\tplugins: [\n\t\tplugin(function ({ addBase, addComponents, addUtilities }) {\n\t\t\taddBase({});\n\t\t\taddComponents({\n\t\t\t\t'.container': {\n\t\t\t\t\t'@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]':\n\t\t\t\t\t\t{},\n\t\t\t\t},\n\t\t\t\t'.h1': {\n\t\t\t\t\t'@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\t\t\t\t\t\t{},\n\t\t\t\t},\n\t\t\t\t'.h2': {\n\t\t\t\t\t'@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\t\t\t\t\t\t{},\n\t\t\t\t},\n\t\t\t\t'.h3': {\n\t\t\t\t\t'@apply text-[2rem] leading-normal md:text-[2.5rem]': {},\n\t\t\t\t},\n\t\t\t\t'.h4': {\n\t\t\t\t\t'@apply text-[2rem] leading-normal': {},\n\t\t\t\t},\n\t\t\t\t'.h5': {\n\t\t\t\t\t'@apply text-2xl leading-normal': {},\n\t\t\t\t},\n\t\t\t\t'.h6': {\n\t\t\t\t\t'@apply font-semibold text-lg leading-8': {},\n\t\t\t\t},\n\t\t\t\t'.body-1': {\n\t\t\t\t\t'@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8':\n\t\t\t\t\t\t{},\n\t\t\t\t},\n\t\t\t\t'.body-2': {\n\t\t\t\t\t'@apply font-light text-[0.875rem] leading-6 md:text-base': {},\n\t\t\t\t},\n\t\t\t\t'.caption': {\n\t\t\t\t\t'@apply text-sm': {},\n\t\t\t\t},\n\t\t\t\t'.tagline': {\n\t\t\t\t\t'@apply font-grotesk font-light text-xs tracking-tagline uppercase':\n\t\t\t\t\t\t{},\n\t\t\t\t},\n\t\t\t\t'.quote': {\n\t\t\t\t\t'@apply font-code text-lg leading-normal': {},\n\t\t\t\t},\n\t\t\t\t'.button': {\n\t\t\t\t\t'@apply font-code text-xs font-bold uppercase tracking-wider': {},\n\t\t\t\t},\n\t\t\t});\n\t\t\taddUtilities({\n\t\t\t\t'.tap-highlight-color': {\n\t\t\t\t\t'-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',\n\t\t\t\t},\n\t\t\t});\n\t\t}),\n\t],\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\t--font-sora: 'Sora', sans-serif;\n\t--font-code: 'Source Code Pro', monospace;\n\t--font-grotesk: 'Space Grotesk', sans-serif;\n}\n\n* {\n\tscroll-behavior: smooth;\n}\n\n@layer base {\n\tbody {\n\t\t@apply font-sans bg-n-8 text-n-1 text-base;\n\t}\n}\n\n.rotate-45 {\n\t@apply rotate-[45deg];\n}\n\n.rotate-90 {\n\t@apply rotate-[90deg];\n}\n\n.rotate-135 {\n\t@apply rotate-[135deg];\n}\n\n.rotate-180 {\n\t@apply rotate-[180deg];\n}\n\n.rotate-225 {\n\t@apply rotate-[225deg];\n}\n\n.rotate-270 {\n\t@apply rotate-[270deg];\n}\n\n.rotate-315 {\n\t@apply rotate-[315deg];\n}\n\n.rotate-360 {\n\t@apply rotate-[360deg];\n}\n\n.-rotate-45 {\n\t@apply rotate-[-45deg];\n}\n\n.-rotate-90 {\n\t@apply rotate-[-90deg];\n}\n\n.-rotate-135 {\n\t@apply rotate-[-135deg];\n}\n\n.-rotate-180 {\n\t@apply rotate-[-180deg];\n}\n\n.-rotate-225 {\n\t@apply rotate-[-225deg];\n}\n\n.-rotate-270 {\n\t@apply rotate-[-270deg];\n}\n\n.-rotate-315 {\n\t@apply rotate-[-315deg];\n}\n\n.-rotate-360 {\n\t@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\tbenefitIcon1,\n\tbenefitIcon2,\n\tbenefitIcon3,\n\tbenefitIcon4,\n\tbenefitImage2,\n\tchromecast,\n\tdisc02,\n\tdiscord,\n\tdiscordBlack,\n\tfacebook,\n\tfigma,\n\tfile02,\n\tframer,\n\thomeSmile,\n\tinstagram,\n\tnotification2,\n\tnotification3,\n\tnotification4,\n\tnotion,\n\tphotoshop,\n\tplusSquare,\n\tprotopie,\n\traindrop,\n\trecording01,\n\trecording03,\n\troadmap1,\n\troadmap2,\n\troadmap3,\n\troadmap4,\n\tsearchMd,\n\tslack,\n\tsliders04,\n\ttelegram,\n\ttwitter,\n\tyourlogo,\n} from '../../public/assets';\n\nexport const navigation = [\n\t{\n\t\tid: '0',\n\t\ttitle: 'Features',\n\t\turl: '#features',\n\t},\n\t{\n\t\tid: '1',\n\t\ttitle: 'Pricing',\n\t\turl: '#pricing',\n\t},\n\t{\n\t\tid: '2',\n\t\ttitle: 'How to use',\n\t\turl: '#how-to-use',\n\t},\n\t{\n\t\tid: '3',\n\t\ttitle: 'Roadmap',\n\t\turl: '#roadmap',\n\t},\n\t{\n\t\tid: '4',\n\t\ttitle: 'New account',\n\t\turl: '#signup',\n\t\tonlyMobile: true,\n\t},\n\t{\n\t\tid: '5',\n\t\ttitle: 'Sign in',\n\t\turl: '#login',\n\t\tonlyMobile: true,\n\t},\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 Brain3Services = [\n\t'Photo generating',\n\t'Photo enhance',\n\t'Seamless Integration',\n];\n\nexport const Brain3ServicesIcons = [\n\trecording03,\n\trecording01,\n\tdisc02,\n\tchromecast,\n\tsliders04,\n];\n\nexport const roadmap = [\n\t{\n\t\tid: '0',\n\t\ttitle: 'Voice recognition',\n\t\ttext: 'Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.',\n\t\tdate: 'May 2023',\n\t\tstatus: 'done',\n\t\timageUrl: roadmap1,\n\t\tcolorful: true,\n\t},\n\t{\n\t\tid: '1',\n\t\ttitle: 'Gamification',\n\t\ttext: 'Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.',\n\t\tdate: 'May 2023',\n\t\tstatus: 'progress',\n\t\timageUrl: roadmap2,\n\t},\n\t{\n\t\tid: '2',\n\t\ttitle: 'Chatbot customization',\n\t\ttext: \"Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.\",\n\t\tdate: 'May 2023',\n\t\tstatus: 'done',\n\t\timageUrl: roadmap3,\n\t},\n\t{\n\t\tid: '3',\n\t\ttitle: 'Integration with APIs',\n\t\ttext: 'Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.',\n\t\tdate: 'May 2023',\n\t\tstatus: 'progress',\n\t\timageUrl: roadmap4,\n\t},\n];\n\nexport const collabText =\n\t\"With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.\";\n\nexport const collabContent = [\n\t{\n\t\tid: '0',\n\t\ttitle: 'Seamless Integration',\n\t\ttext: collabText,\n\t},\n\t{\n\t\tid: '1',\n\t\ttitle: 'Smart Automation',\n\t},\n\t{\n\t\tid: '2',\n\t\ttitle: 'Top-notch Security',\n\t},\n];\n\nexport const collabApps = [\n\t{\n\t\tid: '0',\n\t\ttitle: 'Figma',\n\t\ticon: figma,\n\t\twidth: 26,\n\t\theight: 36,\n\t},\n\t{\n\t\tid: '1',\n\t\ttitle: 'Notion',\n\t\ticon: notion,\n\t\twidth: 34,\n\t\theight: 36,\n\t},\n\t{\n\t\tid: '2',\n\t\ttitle: 'Discord',\n\t\ticon: discord,\n\t\twidth: 36,\n\t\theight: 28,\n\t},\n\t{\n\t\tid: '3',\n\t\ttitle: 'Slack',\n\t\ticon: slack,\n\t\twidth: 34,\n\t\theight: 35,\n\t},\n\t{\n\t\tid: '4',\n\t\ttitle: 'Photoshop',\n\t\ticon: photoshop,\n\t\twidth: 34,\n\t\theight: 34,\n\t},\n\t{\n\t\tid: '5',\n\t\ttitle: 'Protopie',\n\t\ticon: protopie,\n\t\twidth: 34,\n\t\theight: 34,\n\t},\n\t{\n\t\tid: '6',\n\t\ttitle: 'Framer',\n\t\ticon: framer,\n\t\twidth: 26,\n\t\theight: 34,\n\t},\n\t{\n\t\tid: '7',\n\t\ttitle: 'Raindrop',\n\t\ticon: raindrop,\n\t\twidth: 38,\n\t\theight: 32,\n\t},\n];\n\nexport const pricing = [\n\t{\n\t\tid: '0',\n\t\ttitle: 'Basic',\n\t\tdescription: 'AI chatbot, personalized recommendations',\n\t\tprice: '0',\n\t\tfeatures: [\n\t\t\t'An AI chatbot that can understand your queries',\n\t\t\t'Personalized recommendations based on your preferences',\n\t\t\t'Ability to explore the app and its features without any cost',\n\t\t],\n\t},\n\t{\n\t\tid: '1',\n\t\ttitle: 'Premium',\n\t\tdescription: 'Advanced AI chatbot, priority support, analytics dashboard',\n\t\tprice: '9.99',\n\t\tfeatures: [\n\t\t\t'An advanced AI chatbot that can understand complex queries',\n\t\t\t'An analytics dashboard to track your conversations',\n\t\t\t'Priority support to solve issues quickly',\n\t\t],\n\t},\n\t{\n\t\tid: '2',\n\t\ttitle: 'Enterprise',\n\t\tdescription: 'Custom AI chatbot, advanced analytics, dedicated account',\n\t\tprice: null,\n\t\tfeatures: [\n\t\t\t'An AI chatbot that can understand your queries',\n\t\t\t'Personalized recommendations based on your preferences',\n\t\t\t'Ability to explore the app and its features without any cost',\n\t\t],\n\t},\n];\n\nexport const benefits = [\n\t{\n\t\tid: '0',\n\t\ttitle: 'Ask anything',\n\t\ttext: 'Lets users quickly find answers to their questions without having to search through multiple sources.',\n\t\tbackgroundUrl: 'assets/benefits/card-1.svg',\n\t\ticonUrl: benefitIcon1,\n\t\timageUrl: benefitImage2,\n\t},\n\t{\n\t\tid: '1',\n\t\ttitle: 'Improve everyday',\n\t\ttext: 'The app uses natural language processing to understand user queries and provide accurate and relevant responses.',\n\t\tbackgroundUrl: 'assets/benefits/card-2.svg',\n\t\ticonUrl: benefitIcon2,\n\t\timageUrl: benefitImage2,\n\t\tlight: true,\n\t},\n\t{\n\t\tid: '2',\n\t\ttitle: 'Connect everywhere',\n\t\ttext: 'Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.',\n\t\tbackgroundUrl: 'assets/benefits/card-3.svg',\n\t\ticonUrl: benefitIcon3,\n\t\timageUrl: benefitImage2,\n\t},\n\t{\n\t\tid: '3',\n\t\ttitle: 'Fast responding',\n\t\ttext: 'Lets users quickly find answers to their questions without having to search through multiple sources.',\n\t\tbackgroundUrl: 'assets/benefits/card-4.svg',\n\t\ticonUrl: benefitIcon4,\n\t\timageUrl: benefitImage2,\n\t\tlight: true,\n\t},\n\t{\n\t\tid: '4',\n\t\ttitle: 'Ask anything',\n\t\ttext: 'Lets users quickly find answers to their questions without having to search through multiple sources.',\n\t\tbackgroundUrl: 'assets/benefits/card-5.svg',\n\t\ticonUrl: benefitIcon1,\n\t\timageUrl: benefitImage2,\n\t},\n\t{\n\t\tid: '5',\n\t\ttitle: 'Improve everyday',\n\t\ttext: 'The app uses natural language processing to understand user queries and provide accurate and relevant responses.',\n\t\tbackgroundUrl: 'assets/benefits/card-6.svg',\n\t\ticonUrl: benefitIcon2,\n\t\timageUrl: benefitImage2,\n\t},\n];\n\nexport const socials = [\n\t{\n\t\tid: '0',\n\t\ttitle: 'Discord',\n\t\ticonUrl: discordBlack,\n\t\turl: '#',\n\t},\n\t{\n\t\tid: '1',\n\t\ttitle: 'Twitter',\n\t\ticonUrl: twitter,\n\t\turl: '#',\n\t},\n\t{\n\t\tid: '2',\n\t\ttitle: 'Instagram',\n\t\ticonUrl: instagram,\n\t\turl: '#',\n\t},\n\t{\n\t\tid: '3',\n\t\ttitle: 'Telegram',\n\t\ticonUrl: telegram,\n\t\turl: '#',\n\t},\n\t{\n\t\tid: '4',\n\t\ttitle: 'Facebook',\n\t\ticonUrl: facebook,\n\t\turl: '#',\n\t},\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\tclassName,\n\tid,\n\tcrosses,\n\tcrossesOffset,\n\tcustomPaddings,\n\tchildren,\n}) =\u003e (\n\t\u003cdiv\n\t\tid={id}\n\t\tclassName={`relative \n    ${\n\t\t\tcustomPaddings ||\n\t\t\t`py-10 lg:py-16 xl:py-20 ${crosses ? 'lg:py-32 xl:py-40' : ''}`\n\t\t} ${className || ''}`}\u003e\n\t\t{children}\n\n\t\t\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\t\t\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\t\t{crosses \u0026\u0026 (\n\t\t\t\u003c\u003e\n\t\t\t\t\u003cdiv\n\t\t\t\t\tclassName={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${\n\t\t\t\t\t\tcrossesOffset \u0026\u0026 crossesOffset\n\t\t\t\t\t} pointer-events-none lg:block xl:left-10 right-10`}\n\t\t\t\t/\u003e\n\t\t\t\t\u003cSectionSvg crossesOffset={crossesOffset} /\u003e\n\t\t\t\u003c/\u003e\n\t\t)}\n\t\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\t\u003cSection\n\t\tclassName='overflow-hidden'\n\t\tid='roadmap'\u003e\n\t\t\u003cdiv className='container md:pb-10'\u003e\n\t\t\t\u003cHeading\n\t\t\t\ttag='Ready to get started'\n\t\t\t\ttitle='What we’re working on'\n\t\t\t/\u003e\n\n\t\t\t\u003cdiv className='relative grid gap-6 md:grid-cols-2 md:gap-4 md:pb-[7rem]'\u003e\n\t\t\t\t{roadmap.map((item) =\u003e {\n\t\t\t\t\tconst status = item.status === 'done' ? 'Done' : 'In progress';\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t\u003cdiv\n\t\t\t\t\t\t\tclassName={`md:flex even:md:translate-y-[7rem] p-0.25 rounded-[2.5rem] ${\n\t\t\t\t\t\t\t\titem.colorful ? 'bg-conic-gradient' : 'bg-n-6'\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tkey={item.id}\u003e\n\t\t\t\t\t\t\t\u003cdiv className='relative p-8 bg-n-8 rounded-[2.4375rem] overflow-hidden xl:p-15'\u003e\n\t\t\t\t\t\t\t\t\u003cdiv className='absolute top-0 left-0 max-w-full'\u003e\n\t\t\t\t\t\t\t\t\t\u003cimg\n\t\t\t\t\t\t\t\t\t\tclassName='w-full'\n\t\t\t\t\t\t\t\t\t\tsrc={grid}\n\t\t\t\t\t\t\t\t\t\twidth={550}\n\t\t\t\t\t\t\t\t\t\theight={550}\n\t\t\t\t\t\t\t\t\t\talt='Grid'\n\t\t\t\t\t\t\t\t\t/\u003e\n\t\t\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\t\t\t\u003cdiv className='relative z-1'\u003e\n\t\t\t\t\t\t\t\t\t\u003cdiv className='flex items-center justify-between max-w-[27rem] mb-8 md:mb-20'\u003e\n\t\t\t\t\t\t\t\t\t\t\u003cTagline\u003e{item.date}\u003c/Tagline\u003e\n\n\t\t\t\t\t\t\t\t\t\t\u003cdiv className='flex items-center px-4 py-1 bg-n-1 rounded text-n-8'\u003e\n\t\t\t\t\t\t\t\t\t\t\t\u003cimg\n\t\t\t\t\t\t\t\t\t\t\t\tclassName='mr-2.5'\n\t\t\t\t\t\t\t\t\t\t\t\tsrc={item.status === 'done' ? check2 : loading1}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\talt={status}\n\t\t\t\t\t\t\t\t\t\t\t/\u003e\n\t\t\t\t\t\t\t\t\t\t\t\u003cdiv className='tagline'\u003e{status}\u003c/div\u003e\n\t\t\t\t\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\t\t\t\t\u003c/div\u003e\n\n\t\t\t\t\t\t\t\t\t\u003cdiv className='mb-10 -my-10 -mx-15'\u003e\n\t\t\t\t\t\t\t\t\t\t\u003cimg\n\t\t\t\t\t\t\t\t\t\t\tclassName='w-full'\n\t\t\t\t\t\t\t\t\t\t\tsrc={item.imageUrl}\n\t\t\t\t\t\t\t\t\t\t\twidth={628}\n\t\t\t\t\t\t\t\t\t\t\theight={426}\n\t\t\t\t\t\t\t\t\t\t\talt={item.title}\n\t\t\t\t\t\t\t\t\t\t/\u003e\n\t\t\t\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\t\t\t\t\u003ch4 className='h4 mb-4'\u003e{item.title}\u003c/h4\u003e\n\t\t\t\t\t\t\t\t\t\u003cp className='body-2 text-n-4'\u003e{item.text}\u003c/p\u003e\n\t\t\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t);\n\t\t\t\t})}\n\n\t\t\t\t\u003cGradient /\u003e\n\t\t\t\u003c/div\u003e\n\n\t\t\t\u003cdiv className='flex justify-center mt-12 md:mt-15 xl:mt-20'\u003e\n\t\t\t\t\u003cButton href='/roadmap'\u003eOur roadmap\u003c/Button\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/Section\u003e\n);\n\nexport default Roadmap;\n```\n\n\u003c/details\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmujeebsulayman%2Fbrain3-dapp-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmujeebsulayman%2Fbrain3-dapp-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmujeebsulayman%2Fbrain3-dapp-ui/lists"}