{"id":31158088,"url":"https://github.com/arnobt78/brainwave-modern-ui--react-frontend","last_synced_at":"2025-09-18T23:30:56.971Z","repository":{"id":307292817,"uuid":"1029007845","full_name":"arnobt78/Brainwave-Modern-UI--React-Frontend","owner":"arnobt78","description":"Brainwave is a modern landing page built with React-Vite, Tailwind CSS. It showcases advanced design principles, smooth animations, a modular architecture, making it an ideal reference for building visually stunning, highly interactive web projects. It is structured for easy learning, extension, reusability, with a focus on clean code, practices","archived":false,"fork":false,"pushed_at":"2025-07-30T12:10:20.000Z","size":11318,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-30T14:50:03.495Z","etag":null,"topics":["bento-grid","brainwave-modern-ui","complex-ui-geometry","frontend-design","frontend-website","landing-page","landing-page-design","landing-page-template","latest-ui-trends","modern-ui","modern-ui-design","modern-ui-ux","open-soucre","parallax","react-vite-tailwindcss","responsive-design","reusable-template","roadmap","scalable","smooth-animations-and-transitions"],"latest_commit_sha":null,"homepage":"https://brainwave-modern-ui.netlify.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/arnobt78.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,"zenodo":null}},"created_at":"2025-07-30T11:39:00.000Z","updated_at":"2025-07-30T12:11:46.000Z","dependencies_parsed_at":"2025-07-30T14:50:09.629Z","dependency_job_id":"52b837e9-aac0-4188-86c4-5eaa0d9855e3","html_url":"https://github.com/arnobt78/Brainwave-Modern-UI--React-Frontend","commit_stats":null,"previous_names":["arnobt78/brainwave-modern-ui--react-frontend"],"tags_count":null,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Brainwave-Modern-UI--React-Frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBrainwave-Modern-UI--React-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBrainwave-Modern-UI--React-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBrainwave-Modern-UI--React-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBrainwave-Modern-UI--React-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Brainwave-Modern-UI--React-Frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBrainwave-Modern-UI--React-Frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275852061,"owners_count":25540136,"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-09-18T02:00:09.552Z","response_time":77,"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":["bento-grid","brainwave-modern-ui","complex-ui-geometry","frontend-design","frontend-website","landing-page","landing-page-design","landing-page-template","latest-ui-trends","modern-ui","modern-ui-design","modern-ui-ux","open-soucre","parallax","react-vite-tailwindcss","responsive-design","reusable-template","roadmap","scalable","smooth-animations-and-transitions"],"created_at":"2025-09-18T23:30:54.265Z","updated_at":"2025-09-18T23:30:56.912Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","readme":"\n# 🧠 Brainwave – Modern UI/UX Landing Page React Website\n\n![Screenshot 2025-07-30 at 13 26 23](https://github.com/user-attachments/assets/56060732-b01f-4ed0-955c-76247b9d1ebe)\n![Screenshot 2025-07-30 at 13 26 45](https://github.com/user-attachments/assets/577eca3a-a04e-46c5-b0b9-7c2e0ab7de94)\n![Screenshot 2025-07-30 at 13 27 01](https://github.com/user-attachments/assets/2a80408e-cd8c-4d54-ac3f-5d32eb5a1f0b)\n![Screenshot 2025-07-30 at 13 27 16](https://github.com/user-attachments/assets/502cb83d-bb2d-48c5-a439-98ba2c5eba6f)\n![Screenshot 2025-07-30 at 13 27 30](https://github.com/user-attachments/assets/9853f330-d763-44f3-b345-814832e9f3fd)\n![Screenshot 2025-07-30 at 13 27 41](https://github.com/user-attachments/assets/546e4b4c-4ca5-4ce3-a39b-fe0a46a5444c)\n![Screenshot 2025-07-30 at 13 27 52](https://github.com/user-attachments/assets/71d45c5e-7355-49cf-a40f-18afa17ffa1c)\n![Screenshot 2025-07-30 at 13 28 14](https://github.com/user-attachments/assets/a784062c-f38e-447d-b89b-7313feac3af7)\n![Screenshot 2025-07-30 at 13 28 40](https://github.com/user-attachments/assets/ae17bea4-fbf7-4122-93d2-c46878b62d5a)\n![Screenshot 2025-07-30 at 13 28 54](https://github.com/user-attachments/assets/4bebed12-23d5-45e1-a01e-40756087869e)\n![Screenshot 2025-07-30 at 13 29 08](https://github.com/user-attachments/assets/328d9c8a-da42-4c13-a12e-f02059c842fd)\n\n---\n\n## 🧩 Project Summary\n\nBrainwave is a modern UI/UX web application built with React.js, Vite, and Tailwind CSS. It showcases advanced design principles, smooth animations, and a modular architecture, making it an ideal reference for building visually stunning and highly interactive web projects. The project is structured for easy learning, extension, and reusability, with a focus on clean code and best practices.\n\n- **Live-Demo:** [https://brainwave-modern-ui.netlify.app/](https://brainwave-modern-ui.netlify.app/)\n\n---\n\n## 📋 Table of Contents\n\n1. [Project Summary](#%F0%9F%A7%A9-project-summary)\n2. [Tech Stack](#tech-stack)\n3. [Features](#features)\n4. [Project Structure](#project-structure)\n5. [Components Overview](#components-overview)\n6. [How to Run](#how-to-run)\n7. [Walkthrough \u0026 Usage](#walkthrough--usage)\n8. [Code Snippets \u0026 Examples](#code-snippets--examples)\n9. [Reusability \u0026 Extension](#reusability--extension)\n10. [Useful Links](#useful-links)\n11. [Keywords](#keywords)\n12. [Conclusion](#conclusion)\n\n---\n\n## ⚙️ Tech Stack\n\n- **Vite**: Fast build tool for modern web projects.\n- **React.js**: Component-based UI library.\n- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.\n\n---\n\n## 🔋 Features\n\n- **Beautiful Sections**: Hero, services, features, how to use, roadmap, pricing, footer, header.\n- **Parallax Animations**: Mouse and scroll-triggered effects.\n- **Complex UI Geometry**: Intricate shapes, grids, and lines using Tailwind CSS.\n- **Latest UI Trends**: Bento grids, gradients, and modern layouts.\n- **Responsive Design**: Works seamlessly across all devices.\n- **Reusable Components**: Modular and easy to extend.\n- **Code Architecture**: Clean, maintainable, and scalable.\n\n---\n\n## 🗂️ Project Structure\n\n```bash\nbrainwave/\n│\n├── index.html\n├── package.json\n├── postcss.config.js\n├── tailwind.config.js\n├── vite.config.js\n├── public/\n│   └── assets/\n│       └── [images, svgs, icons, etc.]\n├── src/\n│   ├── App.jsx\n│   ├── index.css\n│   ├── main.jsx\n│   ├── assets/\n│   ├── components/\n│   │   ├── [UI Components]\n│   │   └── design/\n│   └── constants/\n│       └── index.js\n└── README.md\n```\n\n- **public/assets/**: All static images, SVGs, and icons.\n- **src/components/**: Main React components and design subcomponents.\n- **src/constants/**: Centralized constants for navigation, features, roadmap, etc.\n\n---\n\n## 🧩 Components Overview\n\n- **Section.jsx**: Layout wrapper for each section, handles padding and decorative elements.\n- **Roadmap.jsx**: Displays project roadmap with status, images, and progress.\n- **Button.jsx, Heading.jsx, Tagline.jsx**: UI primitives for consistent design.\n- **Design Components**: Specialized visuals for each section (e.g., Hero, Pricing).\n- **Constants**: All static data (features, roadmap, benefits, etc.) for easy updates.\n\nEach component is designed for reusability and can be imported into other projects.\n\n---\n\n## 🚀 How to Run\n\n### Prerequisites\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/)\n\n### Setup\n\n```bash\ngit clone https://github.com/arnobt78/Brainwave-Modern-UI--React-Frontend.git\ncd brainwave\nnpm install\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser.\n\n---\n\n## 🏃 Walkthrough \u0026 Usage\n\n1. **Clone \u0026 Install**: Follow the setup instructions above.\n2. **Explore Components**: All UI sections are in `src/components/`. Each is self-contained and documented.\n3. **Customize Constants**: Update `src/constants/index.js` to change navigation, features, roadmap, etc.\n4. **Styling**: Tailwind CSS is used throughout. Modify `tailwind.config.js` and `index.css` for custom styles.\n5. **Assets**: Add or replace images/SVGs in `public/assets/`.\n6. **Routing**: The project uses anchor links for navigation. For advanced routing, integrate React Router.\n\n---\n\n## 💻 Code Snippets \u0026 Examples\n\n### Example: Using a Component\n\n```jsx\n// Import Section component\nimport Section from './components/Section';\n\nconst MySection = () =\u003e (\n  \u003cSection id=\"custom-section\" crosses\u003e\n    \u003ch2\u003eCustom Content\u003c/h2\u003e\n    \u003cp\u003eThis is a reusable section.\u003c/p\u003e\n  \u003c/Section\u003e\n);\n```\n\n### Example: Adding a New Feature\n\n1. Add feature details in `src/constants/index.js`.\n2. Create a new component in `src/components/`.\n3. Import and use it in `App.jsx`.\n\n---\n\n## 🔄 Reusability \u0026 Extension\n\n- **Modular Components**: Copy any component from `src/components/` into your own project.\n- **Constants**: Centralized data makes it easy to update or extend features.\n- **Design System**: Tailwind utility classes and custom config for rapid prototyping.\n- **Assets**: Organized for easy replacement and extension.\n\n**To reuse a component:**\n\n- Import the component and its required assets/constants.\n- Pass props as needed for customization.\n\n---\n\n## 🔗 Useful Links\n\n- [Assets](https://drive.google.com/file/d/1JKzwPl_hnpjIlNbwfjMagb4HosxnyXbf/view?usp=sharing)\n- [Design](https://drive.google.com/file/d/15WJMOchujvaQ7Kg9e0nGeGR7G7JOeX1K/view?usp=sharing)\n- [Absolute Relative Positioning](https://css-tricks.com/absolute-positioning-inside-relative-positioning/)\n- [Live Website](https://jsm-brainwave.com/)\n- [YouTube Tutorial](https://www.youtube.com/@javascriptmastery/videos)\n- [Discord Community](https://discord.com/invite/n6EdbFJ)\n\n---\n\n## 🏷️ Keywords\n\nReact, Vite, Tailwind CSS, UI/UX, Modern Web, Parallax, Responsive, Components, Design System, Roadmap, Features, Tutorial, Reusable, Scalable, Open Source\n\n---\n\n## 📝 Conclusion\n\nBrainwave is a showcase of modern web design and development, built for learning, inspiration, and extension. Whether you’re a beginner or a pro, you’ll find the codebase clean, modular, and easy to adapt. Dive into the components, experiment with the design, and make it your own!\n\n---\n\n## Happy Coding! 🎉\n\nFeel free to use this Project Repository and extend this project further!  \n\nIf you have any questions or want to share your work, reach out via GitHub or my portfolio [https://arnob-mahmud.vercel.app/](https://arnob-mahmud.vercel.app/).\n\n**Enjoy building and learning!** 🚀\n\nThank you! 😊\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fbrainwave-modern-ui--react-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fbrainwave-modern-ui--react-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fbrainwave-modern-ui--react-frontend/lists"}