├── .eslintrc.cjs ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── dependabot.yml └── images │ ├── img1.png │ ├── img2.png │ ├── img3.png │ ├── img4.png │ ├── img_main.png │ └── stats.svg ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── apple-icon.png ├── favicon.ico ├── favicon1.png └── favicon2.png ├── 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 │ ├── pause.svg │ ├── 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 ├── config │ └── index.js ├── 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 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [sanidhyy] 4 | patreon: sanidhy 5 | custom: https://www.buymeacoffee.com/sanidhy 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" 9 | directory: "/" 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /.github/images/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/.github/images/img1.png -------------------------------------------------------------------------------- /.github/images/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/.github/images/img2.png -------------------------------------------------------------------------------- /.github/images/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/.github/images/img3.png -------------------------------------------------------------------------------- /.github/images/img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/.github/images/img4.png -------------------------------------------------------------------------------- /.github/images/img_main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/.github/images/img_main.png -------------------------------------------------------------------------------- /.github/images/stats.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 122 | 123 | 124 | 125 | 87 126 | Performance 127 | 128 | 129 | 130 | 131 | 91 132 | Accessibility 133 | 134 | 135 | 136 | 137 | 93 138 | Best Practices 139 | 140 | 141 | 142 | 143 | 100 144 | SEO 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | Progressive 211 | Web App 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 0-49 227 | 50-89 228 | 90-100 229 | 230 | 231 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct - Brainwave 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to a positive environment for our 15 | community include: 16 | 17 | * Demonstrating empathy and kindness toward other people 18 | * Being respectful of differing opinions, viewpoints, and experiences 19 | * Giving and gracefully accepting constructive feedback 20 | * Accepting responsibility and apologizing to those affected by our mistakes, 21 | and learning from the experience 22 | * Focusing on what is best not just for us as individuals, but for the 23 | overall community 24 | 25 | Examples of unacceptable behavior include: 26 | 27 | * The use of sexualized language or imagery, and sexual attention or 28 | advances 29 | * Trolling, insulting or derogatory comments, and personal or political attacks 30 | * Public or private harassment 31 | * Publishing others' private information, such as a physical or email 32 | address, without their explicit permission 33 | * Other conduct which could reasonably be considered inappropriate in a 34 | professional setting 35 | 36 | ## Our Responsibilities 37 | 38 | Project maintainers are responsible for clarifying and enforcing our standards of 39 | acceptable behavior and will take appropriate and fair corrective action in 40 | response to any behavior that they deem inappropriate, 41 | threatening, offensive, or harmful. 42 | 43 | Project maintainers have the right and responsibility to remove, edit, or reject 44 | comments, commits, code, wiki edits, issues, and other contributions that are 45 | not aligned to this Code of Conduct, and will 46 | communicate reasons for moderation decisions when appropriate. 47 | 48 | ## Scope 49 | 50 | This Code of Conduct applies within all community spaces, and also applies when 51 | an individual is officially representing the community in public spaces. 52 | Examples of representing our community include using an official e-mail address, 53 | posting via an official social media account, or acting as an appointed 54 | representative at an online or offline event. 55 | 56 | ## Enforcement 57 | 58 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 59 | reported to the community leaders responsible for enforcement at . 60 | All complaints will be reviewed and investigated promptly and fairly. 61 | 62 | All community leaders are obligated to respect the privacy and security of the 63 | reporter of any incident. 64 | 65 | ## Enforcement Guidelines 66 | 67 | Community leaders will follow these Community Impact Guidelines in determining 68 | the consequences for any action they deem in violation of this Code of Conduct: 69 | 70 | ### 1. Correction 71 | 72 | **Community Impact**: Use of inappropriate language or other behavior deemed 73 | unprofessional or unwelcome in the community. 74 | 75 | **Consequence**: A private, written warning from community leaders, providing 76 | clarity around the nature of the violation and an explanation of why the 77 | behavior was inappropriate. A public apology may be requested. 78 | 79 | ### 2. Warning 80 | 81 | **Community Impact**: A violation through a single incident or series 82 | of actions. 83 | 84 | **Consequence**: A warning with consequences for continued behavior. No 85 | interaction with the people involved, including unsolicited interaction with 86 | those enforcing the Code of Conduct, for a specified period of time. This 87 | includes avoiding interactions in community spaces as well as external channels 88 | like social media. Violating these terms may lead to a temporary or 89 | permanent ban. 90 | 91 | ### 3. Temporary Ban 92 | 93 | **Community Impact**: A serious violation of community standards, including 94 | sustained inappropriate behavior. 95 | 96 | **Consequence**: A temporary ban from any sort of interaction or public 97 | communication with the community for a specified period of time. No public or 98 | private interaction with the people involved, including unsolicited interaction 99 | with those enforcing the Code of Conduct, is allowed during this period. 100 | Violating these terms may lead to a permanent ban. 101 | 102 | ### 4. Permanent Ban 103 | 104 | **Community Impact**: Demonstrating a pattern of violation of community 105 | standards, including sustained inappropriate behavior, harassment of an 106 | individual, or aggression toward or disparagement of classes of individuals. 107 | 108 | **Consequence**: A permanent ban from any sort of public interaction within 109 | the community. 110 | 111 | ## Attribution 112 | 113 | This Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org/), version 114 | [1.4](https://www.contributor-covenant.org/version/1/4/code-of-conduct/code_of_conduct.md) and 115 | [2.0](https://www.contributor-covenant.org/version/2/0/code_of_conduct/code_of_conduct.md), 116 | and was generated by [contributing-gen](https://github.com/bttger/contributing-gen). 117 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributing to Brainwave 3 | 4 | First off, thanks for taking the time to contribute! ❤️ 5 | 6 | All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉 7 | 8 | > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about: 9 | > - Star the project 10 | > - Tweet about it 11 | > - Refer this project in your project's readme 12 | > - Mention the project at local meetups and tell your friends/colleagues 13 | 14 | 15 | ## Table of Contents 16 | 17 | - [Code of Conduct](#code-of-conduct) 18 | - [I Have a Question](#i-have-a-question) 19 | - [I Want To Contribute](#i-want-to-contribute) 20 | - [Reporting Bugs](#reporting-bugs) 21 | - [Suggesting Enhancements](#suggesting-enhancements) 22 | - [Your First Code Contribution](#your-first-code-contribution) 23 | - [Improving The Documentation](#improving-the-documentation) 24 | - [Styleguides](#styleguides) 25 | - [Commit Messages](#commit-messages) 26 | - [Join The Project Team](#join-the-project-team) 27 | 28 | 29 | ## Code of Conduct 30 | 31 | This project and everyone participating in it is governed by the 32 | [Brainwave Code of Conduct](https://github.com/sanidhyy/brainwaveblob/master/CODE_OF_CONDUCT.md). 33 | By participating, you are expected to uphold this code. Please report unacceptable behavior 34 | to . 35 | 36 | 37 | ## I Have a Question 38 | 39 | > If you want to ask a question, we assume that you have read the available [Documentation](https://github.com/sanidhyy/brainwave/wiki). 40 | 41 | Before you ask a question, it is best to search for existing [Issues](https://github.com/sanidhyy/brainwave/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first. 42 | 43 | If you then still feel the need to ask a question and need clarification, we recommend the following: 44 | 45 | - Open an [Issue](https://github.com/sanidhyy/brainwave/issues/new). 46 | - Provide as much context as you can about what you're running into. 47 | - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant. 48 | 49 | We will then take care of the issue as soon as possible. 50 | 51 | ## I Want To Contribute 52 | 53 | > ### Legal Notice 54 | > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. 55 | 56 | ### Reporting Bugs 57 | 58 | #### Before Submitting a Bug Report 59 | 60 | A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible. 61 | 62 | - Make sure that you are using the latest version. 63 | - Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://github.com/sanidhyy/brainwave/wiki). If you are looking for support, you might want to check [this section](#i-have-a-question)). 64 | - To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/sanidhyy/brainwaveissues?q=label%3Abug). 65 | - Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue. 66 | - Collect information about the bug: 67 | - Stack trace (Traceback) 68 | - OS, Platform and Version (Windows, Linux, macOS, x86, ARM) 69 | - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant. 70 | - Possibly your input and the output 71 | - Can you reliably reproduce the issue? And can you also reproduce it with older versions? 72 | 73 | #### How Do I Submit a Good Bug Report? 74 | 75 | > You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to . 76 | 77 | We use GitHub issues to track bugs and errors. If you run into an issue with the project: 78 | 79 | - Open an [Issue](https://github.com/sanidhyy/brainwave/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.) 80 | - Explain the behavior you would expect and the actual behavior. 81 | - Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case. 82 | - Provide the information you collected in the previous section. 83 | 84 | Once it's filed: 85 | 86 | - The project team will label the issue accordingly. 87 | - A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced. 88 | - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution). 89 | 90 | ### Suggesting Enhancements 91 | 92 | This section guides you through submitting an enhancement suggestion for Brainwave, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions. 93 | 94 | 95 | #### Before Submitting an Enhancement 96 | 97 | - Make sure that you are using the latest version. 98 | - Read the [documentation](https://github.com/sanidhyy/brainwave/wiki) carefully and find out if the functionality is already covered, maybe by an individual configuration. 99 | - Perform a [search](https://github.com/sanidhyy/brainwave/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one. 100 | - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library. 101 | 102 | 103 | #### How Do I Submit a Good Enhancement Suggestion? 104 | 105 | Enhancement suggestions are tracked as [GitHub issues](https://github.com/sanidhyy/brainwave/issues). 106 | 107 | - Use a **clear and descriptive title** for the issue to identify the suggestion. 108 | - Provide a **step-by-step description of the suggested enhancement** in as many details as possible. 109 | - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you. 110 | - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. 111 | - **Explain why this enhancement would be useful** to most Brainwave users. You may also want to point out the other projects that solved it better and which could serve as inspiration. 112 | 113 | ## Attribution 114 | This guide is based on the **contributing-gen**. [Make your own](https://github.com/bttger/contributing-gen)! 115 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Sanidhya Kumar Verma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Brainwave - Modern Animated SaaS Generative AI Landing Page 4 | 5 | ![Brainwave - Modern Animated SaaS Generative AI Landing Page](/.github/images/img_main.png "Brainwave - Modern Animated SaaS Generative AI Landing Page") 6 | 7 | [![Ask Me Anything!](https://flat.badgen.net/static/Ask%20me/anything?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy "Ask Me Anything!") 8 | [![GitHub license](https://flat.badgen.net/github/license/sanidhyy/brainwave?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/brainwave/blob/main/LICENSE "GitHub license") 9 | [![Maintenance](https://flat.badgen.net/static/Maintained/yes?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/brainwave/commits/main "Maintenance") 10 | [![GitHub branches](https://flat.badgen.net/github/branches/sanidhyy/brainwave?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/brainwave/branches "GitHub branches") 11 | [![Github commits](https://flat.badgen.net/github/commits/sanidhyy/brainwave?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/brainwave/commits "Github commits") 12 | [![GitHub issues](https://flat.badgen.net/github/issues/sanidhyy/brainwave?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/brainwave/issues "GitHub issues") 13 | [![GitHub pull requests](https://flat.badgen.net/github/prs/sanidhyy/brainwave?icon=github&color=black&scale=1.01)](https://github.com/sanidhyy/brainwave/pulls "GitHub pull requests") 14 | [![Netlify Status](https://api.netlify.com/api/v1/badges/12f8872e-e503-44e8-aaee-9d024f8cba55/deploy-status)](https://app-brainwave.netlify.app/ "Netlify Status") 15 | 16 | 17 |
18 | 19 | 20 | 21 | # :notebook_with_decorative_cover: Table of Contents 22 | 23 | 24 | 25 | - [Folder Structure](#bangbang-folder-structure) 26 | - [Getting Started](#toolbox-getting-started) 27 | - [Screenshots](#camera-screenshots) 28 | - [Tech Stack](#gear-tech-stack) 29 | - [Stats](#wrench-stats) 30 | - [Contribute](#raised_hands-contribute) 31 | - [Acknowledgements](#gem-acknowledgements) 32 | - [Buy Me a Coffee](#coffee-buy-me-a-coffee) 33 | - [Follow Me](#rocket-follow-me) 34 | - [Learn More](#books-learn-more) 35 | - [Deploy on Netlify](#page_with_curl-deploy-on-netlify) 36 | - [Give A Star](#star-give-a-star) 37 | - [Star History](#star2-star-history) 38 | - [Give A Star](#star-give-a-star) 39 | 40 |
41 | 42 | ## :bangbang: Folder Structure 43 | 44 | Here is the folder structure of this app. 45 | 46 | ```bash 47 | brainwave/ 48 | |- public/ 49 | |-- apple-icon.png 50 | |-- favicon.ico 51 | |-- favicon1.png 52 | |-- favicon2.png 53 | |- src/ 54 | |-- assets/ 55 | |--- benefits/ 56 | |--- collaboration/ 57 | |--- hero/ 58 | |--- notification/ 59 | |--- pricing/ 60 | |--- roadmap/ 61 | |--- services/ 62 | |--- socials/ 63 | |--- svg/ 64 | |--- index.js 65 | |-- components/ 66 | |--- design/ 67 | |--- Benefits.jsx 68 | |--- Button.jsx 69 | |--- Collaboration.jsx 70 | |--- CompanyLogos.jsx 71 | |--- Footer.jsx 72 | |--- Generating.jsx 73 | |--- Header.jsx 74 | |--- Heading.jsx 75 | |--- Hero.jsx 76 | |--- Notification.jsx 77 | |--- Pricing.jsx 78 | |--- PricingList.jsx 79 | |--- Roadmap.jsx 80 | |--- Section.jsx 81 | |--- Services.jsx 82 | |--- Tagline.jsx 83 | |-- config/ 84 | |--- index.js 85 | |-- constants/ 86 | |--- index.js 87 | |-- App.jsx 88 | |-- index.css 89 | |-- main.jsx 90 | |- .eslintrc.cjs 91 | |- .gitignore 92 | |- index.html 93 | |- package-lock.json 94 | |- package.json 95 | |- postcss.config.js 96 | |- tailwind.config.js 97 | |- vite.config.js 98 | ``` 99 | 100 |
101 | 102 | ## :toolbox: Getting Started 103 | 104 | 1. Make sure **Git** and **NodeJS** is installed. 105 | 2. Clone this repository to your local computer. 106 | 3. Install project dependencies using `npm install --legacy-peer-deps` or `yarn install --legacy-peer-deps` 107 | 4. Now app is fully configured 👍 and you can start using this app using either one of `npm run dev` or `yarn dev`. 108 | 109 | **NOTE:** Please make sure to keep your API keys and configuration values secure and do not expose them publicly. 110 | 111 | ## :camera: Screenshots 112 | 113 | ![AI ChatBot App](/.github/images/img1.png "AI ChatBot App") 114 | 115 | ![Generative AI](/.github/images/img2.png "Generative AI") 116 | 117 | ![Modern Animations](/.github/images/img3.png "Modern Animations") 118 | 119 | ![Onboarding Section](/.github/images/img4.png "Onboarding Section") 120 | 121 | ## :gear: Tech Stack 122 | 123 | [![React JS](https://skillicons.dev/icons?i=react "React JS")](https://react.dev/ "React JS") [![Vite JS](https://skillicons.dev/icons?i=vite "Vite JS")](https://vitejs.dev/ "Vite JS") [![Javascript](https://skillicons.dev/icons?i=js "Javascript")](https://developer.mozilla.org/en-US/docs/Web/JavaScript "Javascript") [![Tailwind CSS](https://skillicons.dev/icons?i=tailwind "Tailwind CSS")](https://tailwindcss.com/ "Tailwind CSS") [![Netlify](https://skillicons.dev/icons?i=netlify "Netlify")](https://netlify.app/ "Netlify") 124 | 125 | ## :wrench: Stats 126 | 127 | [![Stats for Brainwave](/.github/images/stats.svg "Stats for Brainwave")](https://pagespeed.web.dev/analysis?url=https://app-brainwave.netlify.app/ "Stats for Brainwave") 128 | 129 | ## :raised_hands: Contribute 130 | 131 | You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines. 132 | 133 | ## :gem: Acknowledgements 134 | 135 | Useful resources and dependencies that are used in Brainwave. 136 | 137 | - [framer-motion](https://www.npmjs.com/package/framer-motion): ^11.0.12 138 | - [react](https://www.npmjs.com/package/react): ^18.2.0 139 | - [react-dom](https://www.npmjs.com/package/react-dom): ^18.2.0 140 | - [react-just-parallax](https://www.npmjs.com/package/react-just-parallax): ^3.1.16 141 | - [react-router-dom](https://www.npmjs.com/package/react-router-dom): ^6.22.3 142 | - [scroll-lock](https://www.npmjs.com/package/scroll-lock): ^2.1.5 143 | - [typewriter-effect](https://www.npmjs.com/package/typewriter-effect): ^2.21.0 144 | - [@types/react](https://www.npmjs.com/package/@types/react): ^18.2.56 145 | - [@types/react-dom](https://www.npmjs.com/package/@types/react-dom): ^18.2.19 146 | - [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react): ^4.2.1 147 | - [autoprefixer](https://www.npmjs.com/package/autoprefixer): ^10.4.18 148 | - [eslint](https://www.npmjs.com/package/eslint): ^8.56.0 149 | - [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react): ^7.33.2 150 | - [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks): ^4.6.0 151 | - [eslint-plugin-react-refresh](https://www.npmjs.com/package/eslint-plugin-react-refresh): ^0.4.5 152 | - [postcss](https://www.npmjs.com/package/postcss): ^8.4.35 153 | - [tailwindcss](https://www.npmjs.com/package/tailwindcss): ^3.4.1 154 | - [vite](https://www.npmjs.com/package/vite): ^5.1.4 155 | 156 | ## :coffee: Buy Me a Coffee 157 | 158 | [](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee") 159 | 160 | ## :rocket: Follow Me 161 | 162 | [![Follow Me](https://img.shields.io/github/followers/sanidhyy?style=social&label=Follow&maxAge=2592000)](https://github.com/sanidhyy "Follow Me") 163 | [![Tweet about this project](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2FTechnicalShubam)](https://twitter.com/intent/tweet?text=Check+out+this+amazing+app:&url=https%3A%2F%2Fgithub.com%2Fsanidhyy%2Fbrainwave "Tweet about this project") 164 | [![Subscribe to my YouTube Channel](https://img.shields.io/youtube/channel/subscribers/UCNAz_hUVBG2ZUN8TVm0bmYw)](https://www.youtube.com/@OPGAMER./?sub_confirmation=1 "Subscribe to my YouTube Channel") 165 | 166 | ## :books: Learn More 167 | 168 | To deepen your understanding of React.js and Netlify, explore the following resources: 169 | 170 | - [React.js Documentation](https://reactjs.org/docs) - delve into React.js features, concepts, and API. 171 | - [React Official Tutorial](https://reactjs.org/tutorial) - an interactive tutorial to get hands-on experience with React. 172 | 173 | For Netlify-specific information: 174 | 175 | - [Netlify Documentation](https://docs.netlify.com) - learn about Netlify's features, deployment options, and more. 176 | - [Getting Started with Netlify and React](https://docs.netlify.com/frameworks/react) - a guide on deploying React applications on Netlify. 177 | 178 | You're encouraged to contribute and provide feedback on [Netlify's GitHub repository](https://github.com/netlify/netlify). 179 | 180 | ## :page_with_curl: Deploy on Netlify 181 | 182 | The simplest way to deploy your React.js app is to use the [Netlify Platform](https://app.netlify.com/start) - a powerful platform for modern web projects. 183 | 184 | Explore the [Netlify deployment documentation](https://docs.netlify.com/site-deploys/create-deploys) for step-by-step instructions on deploying your React.js app on Netlify. 185 | 186 | Happy coding, and feel free to share your thoughts and improvements with the [Netlify community](https://community.netlify.com)! 187 | 188 | ## :star: Give A Star 189 | 190 | You can also give this repository a star to show more people and they can use this repository. 191 | 192 | ## :star2: Star History 193 | 194 | 195 | 196 | 197 | 198 | Star History Chart 199 | 200 | 201 | 202 |
203 |

(back to top)

204 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 | 30 | 36 | 37 | 38 | Brainwave 39 | 40 | 41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /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 | "framer-motion": "^12.12.2", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-just-parallax": "^3.1.16", 17 | "react-router-dom": "^7.6.1", 18 | "scroll-lock": "^2.1.5", 19 | "typewriter-effect": "^2.22.0" 20 | }, 21 | "devDependencies": { 22 | "@types/react": "^18.3.12", 23 | "@types/react-dom": "^18.3.1", 24 | "@vitejs/plugin-react": "^4.5.0", 25 | "autoprefixer": "^10.4.21", 26 | "eslint-plugin-react-hooks": "^5.2.0", 27 | "eslint-plugin-react-refresh": "^0.4.20", 28 | "postcss": "^8.5.3", 29 | "tailwindcss": "^3.4.17", 30 | "vite": "^6.3.5" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/public/favicon1.png -------------------------------------------------------------------------------- /public/favicon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/public/favicon2.png -------------------------------------------------------------------------------- /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 |
24 | 25 | 26 | ); 27 | }; 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /src/assets/4-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/4-small.png -------------------------------------------------------------------------------- /src/assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/background.jpg -------------------------------------------------------------------------------- /src/assets/benefits/card-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/benefits/card-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/benefits/card-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/benefits/card-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/benefits/card-5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/benefits/card-6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/benefits/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/benefits/image-2.png -------------------------------------------------------------------------------- /src/assets/brainwave-symbol-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/brainwave-symbol.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/brainwave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/check-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/chrome-cast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/collaboration/curve-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/collaboration/curve-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/collaboration/discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/discord.png -------------------------------------------------------------------------------- /src/assets/collaboration/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/figma.png -------------------------------------------------------------------------------- /src/assets/collaboration/framer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/framer.png -------------------------------------------------------------------------------- /src/assets/collaboration/notion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/notion.png -------------------------------------------------------------------------------- /src/assets/collaboration/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/photoshop.png -------------------------------------------------------------------------------- /src/assets/collaboration/protopie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/protopie.png -------------------------------------------------------------------------------- /src/assets/collaboration/raindrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/raindrop.png -------------------------------------------------------------------------------- /src/assets/collaboration/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/collaboration/slack.png -------------------------------------------------------------------------------- /src/assets/disc-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/file-02.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/gradient.png -------------------------------------------------------------------------------- /src/assets/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/grid.png -------------------------------------------------------------------------------- /src/assets/hero/curve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/hero/curve.png -------------------------------------------------------------------------------- /src/assets/hero/hero-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/hero/hero-background.jpg -------------------------------------------------------------------------------- /src/assets/hero/robot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/hero/robot.jpg -------------------------------------------------------------------------------- /src/assets/home-smile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | import brainwave from "./brainwave.svg"; 2 | import check from "./check.svg"; 3 | import brainwaveSymbol from "./brainwave-symbol.svg"; 4 | import brainwaveWhiteSymbol from "./brainwave-symbol-white.svg"; 5 | import play from "./play.svg"; 6 | import pause from "./pause.svg"; 7 | import gradient from "./gradient.png"; 8 | import smallSphere from "./4-small.png"; 9 | import grid from "./grid.png"; 10 | import check2 from "./check-02.svg"; 11 | import loading1 from "./loading-01.svg"; 12 | import yourlogo from "./yourlogo.svg"; 13 | import homeSmile from "./home-smile.svg"; 14 | import file02 from "./file-02.svg"; 15 | import searchMd from "./search-md.svg"; 16 | import plusSquare from "./plus-square.svg"; 17 | import recording03 from "./recording-03.svg"; 18 | import recording01 from "./recording-01.svg"; 19 | import disc02 from "./disc-02.svg"; 20 | import chromecast from "./chrome-cast.svg"; 21 | import sliders04 from "./sliders-04.svg"; 22 | import loading from "./loading.png"; 23 | import background from "./background.jpg"; 24 | 25 | import curve from "./hero/curve.png"; 26 | import robot from "./hero/robot.jpg"; 27 | import heroBackground from "./hero/hero-background.jpg"; 28 | 29 | import curve1 from "./collaboration/curve-1.svg"; 30 | import curve2 from "./collaboration/curve-2.svg"; 31 | import discord from "./collaboration/discord.png"; 32 | import figma from "./collaboration/figma.png"; 33 | import framer from "./collaboration/framer.png"; 34 | import notion from "./collaboration/notion.png"; 35 | import photoshop from "./collaboration/photoshop.png"; 36 | import protopie from "./collaboration/protopie.png"; 37 | import raindrop from "./collaboration/raindrop.png"; 38 | import slack from "./collaboration/slack.png"; 39 | 40 | import service1 from "./services/service-1.png"; 41 | import service2 from "./services/service-2.png"; 42 | import service3 from "./services/service-3.png"; 43 | 44 | import lines from "./pricing/lines.svg"; 45 | import stars from "./pricing/stars.svg"; 46 | 47 | import coins from "./roadmap/coins.png"; 48 | import done from "./roadmap/done.svg"; 49 | import hero from "./roadmap/hero.png"; 50 | import roadmap1 from "./roadmap/image-1.png"; 51 | import roadmap2 from "./roadmap/image-2.png"; 52 | import roadmap3 from "./roadmap/image-3.png"; 53 | import roadmap4 from "./roadmap/image-4.png"; 54 | import undone from "./roadmap/undone.svg"; 55 | 56 | import notification1 from "./notification/image-1.png"; 57 | import notification2 from "./notification/image-2.png"; 58 | import notification3 from "./notification/image-3.png"; 59 | import notification4 from "./notification/image-4.png"; 60 | 61 | import benefitCard1 from "./benefits/card-1.svg"; 62 | import benefitCard2 from "./benefits/card-2.svg"; 63 | import benefitCard3 from "./benefits/card-3.svg"; 64 | import benefitCard4 from "./benefits/card-4.svg"; 65 | import benefitCard5 from "./benefits/card-5.svg"; 66 | import benefitCard6 from "./benefits/card-6.svg"; 67 | import benefitIcon1 from "./benefits/icon-1.svg"; 68 | import benefitIcon2 from "./benefits/icon-2.svg"; 69 | import benefitIcon3 from "./benefits/icon-3.svg"; 70 | import benefitIcon4 from "./benefits/icon-4.svg"; 71 | import benefitImage2 from "./benefits/image-2.png"; 72 | 73 | import discordBlack from "./socials/discord.svg"; 74 | import facebook from "./socials/facebook.svg"; 75 | import instagram from "./socials/instagram.svg"; 76 | import telegram from "./socials/telegram.svg"; 77 | import twitter from "./socials/twitter.svg"; 78 | 79 | export { 80 | brainwave, 81 | check, 82 | check2, 83 | loading1, 84 | brainwaveSymbol, 85 | brainwaveWhiteSymbol, 86 | play, 87 | pause, 88 | gradient, 89 | smallSphere, 90 | grid, 91 | yourlogo, 92 | homeSmile, 93 | file02, 94 | searchMd, 95 | plusSquare, 96 | recording03, 97 | recording01, 98 | disc02, 99 | chromecast, 100 | sliders04, 101 | loading, 102 | background, 103 | curve, 104 | robot, 105 | heroBackground, 106 | curve1, 107 | curve2, 108 | discord, 109 | figma, 110 | framer, 111 | notion, 112 | photoshop, 113 | protopie, 114 | raindrop, 115 | slack, 116 | service1, 117 | service2, 118 | service3, 119 | lines, 120 | stars, 121 | coins, 122 | done, 123 | hero, 124 | roadmap1, 125 | roadmap2, 126 | roadmap3, 127 | roadmap4, 128 | undone, 129 | notification1, 130 | notification2, 131 | notification3, 132 | notification4, 133 | benefitCard1, 134 | benefitCard2, 135 | benefitCard3, 136 | benefitCard4, 137 | benefitCard5, 138 | benefitCard6, 139 | benefitIcon1, 140 | benefitIcon2, 141 | benefitIcon3, 142 | benefitIcon4, 143 | benefitImage2, 144 | discordBlack, 145 | facebook, 146 | instagram, 147 | telegram, 148 | twitter, 149 | }; 150 | -------------------------------------------------------------------------------- /src/assets/loading-01.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/loading.png -------------------------------------------------------------------------------- /src/assets/notification/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/notification/image-1.png -------------------------------------------------------------------------------- /src/assets/notification/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/notification/image-2.png -------------------------------------------------------------------------------- /src/assets/notification/image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/notification/image-3.png -------------------------------------------------------------------------------- /src/assets/notification/image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/notification/image-4.png -------------------------------------------------------------------------------- /src/assets/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /src/assets/plus-square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/pricing/lines.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/pricing/stars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/recording-01.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/recording-03.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/roadmap/coins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/roadmap/coins.png -------------------------------------------------------------------------------- /src/assets/roadmap/done.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/roadmap/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/roadmap/hero.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/roadmap/image-1.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/roadmap/image-2.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/roadmap/image-3.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/roadmap/image-4.png -------------------------------------------------------------------------------- /src/assets/roadmap/undone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/search-md.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/services/service-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/services/service-1.png -------------------------------------------------------------------------------- /src/assets/services/service-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/services/service-2.png -------------------------------------------------------------------------------- /src/assets/services/service-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanidhyy/brainwave/a0056ad22021a45c5a2fe325bbca2fec4d043324/src/assets/services/service-3.png -------------------------------------------------------------------------------- /src/assets/sliders-04.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/socials/discord.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/socials/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/socials/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/socials/telegram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/socials/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/svg/Arrow.jsx: -------------------------------------------------------------------------------- 1 | const Arrow = () => { 2 | return ( 3 | 4 | 5 | 6 | ); 7 | }; 8 | 9 | export default Arrow; 10 | -------------------------------------------------------------------------------- /src/assets/svg/Brackets.jsx: -------------------------------------------------------------------------------- 1 | const brackets = (position) => 2 | position === "left" ? ( 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ) : ( 19 | 26 | 30 | 31 | 38 | 39 | 40 | 41 | 42 | 43 | ); 44 | 45 | export default brackets; 46 | -------------------------------------------------------------------------------- /src/assets/svg/ButtonGradient.jsx: -------------------------------------------------------------------------------- 1 | const ButtonGradient = () => { 2 | return ( 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default ButtonGradient; 33 | -------------------------------------------------------------------------------- /src/assets/svg/ButtonSvg.jsx: -------------------------------------------------------------------------------- 1 | const ButtonSvg = (white) => ( 2 | <> 3 | 9 | 15 | 16 | 23 | {white ? ( 24 | 29 | ) : ( 30 | <> 31 | 36 | 41 | 42 | )} 43 | 44 | 50 | 56 | 57 | 58 | ); 59 | 60 | export default ButtonSvg; 61 | -------------------------------------------------------------------------------- /src/assets/svg/ChatBubbleWing.jsx: -------------------------------------------------------------------------------- 1 | const ChatBubbleWing = ({ className, pathClassName }) => { 2 | return ( 3 | 9 | 13 | 14 | ); 15 | }; 16 | 17 | export default ChatBubbleWing; 18 | -------------------------------------------------------------------------------- /src/assets/svg/ClipPath.jsx: -------------------------------------------------------------------------------- 1 | const ClipPath = () => { 2 | return ( 3 | 4 | 5 | 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default ClipPath; 12 | -------------------------------------------------------------------------------- /src/assets/svg/MenuSvg.jsx: -------------------------------------------------------------------------------- 1 | const MenuSvg = ({ openNavigation }) => { 2 | return ( 3 | 9 | 18 | 27 | 28 | ); 29 | }; 30 | 31 | export default MenuSvg; 32 | -------------------------------------------------------------------------------- /src/assets/svg/PlusSvg.jsx: -------------------------------------------------------------------------------- 1 | const PlusSvg = ({ className = "" }) => { 2 | return ( 3 | 4 | 8 | 9 | ); 10 | }; 11 | 12 | export default PlusSvg; 13 | -------------------------------------------------------------------------------- /src/assets/svg/SectionSvg.jsx: -------------------------------------------------------------------------------- 1 | import PlusSvg from "./PlusSvg"; 2 | 3 | const SectionSvg = ({ crossesOffset }) => { 4 | return ( 5 | <> 6 | 11 | 12 | 17 | 18 | ); 19 | }; 20 | 21 | export default SectionSvg; 22 | -------------------------------------------------------------------------------- /src/assets/yourlogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Benefits.jsx: -------------------------------------------------------------------------------- 1 | import Arrow from "../assets/svg/Arrow"; 2 | import ClipPath from "../assets/svg/ClipPath"; 3 | import { benefits } from "../constants"; 4 | import { GradientLight } from "./design/Benefits"; 5 | import Heading from "./Heading"; 6 | import Section from "./Section"; 7 | import { curve } from "../assets"; 8 | 9 | const Benefits = () => { 10 | return ( 11 |
12 |
13 | 17 | Chat Smarter, Not Harder with{" "} 18 | 19 | Brainwave 20 | Curve 27 | 28 | 29 | } 30 | /> 31 | 32 |
33 | {benefits.map((benefit) => ( 34 |
41 |
42 |
{benefit.title}
43 |

{benefit.text}

44 |
45 | {benefit.title} 51 | 52 |

53 | Explore more 54 |

55 | 56 |
57 |
58 | 59 | {benefit.light && } 60 | 61 |
65 |
66 | {benefit.imageUrl && ( 67 | {benefit.title} 74 | )} 75 |
76 |
77 | 78 | 79 |
80 | ))} 81 |
82 |
83 |
84 | ); 85 | }; 86 | 87 | export default Benefits; 88 | -------------------------------------------------------------------------------- /src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import ButtonSvg from "../assets/svg/ButtonSvg"; 2 | 3 | const Button = ({ 4 | className, 5 | href, 6 | onClick, 7 | children, 8 | px, 9 | white, 10 | external, 11 | }) => { 12 | const classes = `button relative inline-flex items-center justify-center h-11 transition-colors hover:text-color-1 ${ 13 | px || "px-7" 14 | } ${white ? "text-n-8" : "text-n-1"} ${className || ""}`; 15 | 16 | const spanClasses = "relative z-10"; 17 | 18 | const renderButton = () => ( 19 | 23 | ); 24 | 25 | const renderLink = () => ( 26 | 32 | {children} 33 | {ButtonSvg(white)} 34 | 35 | ); 36 | 37 | return href ? renderLink() : renderButton(); 38 | }; 39 | 40 | export default Button; 41 | -------------------------------------------------------------------------------- /src/components/Collaboration.jsx: -------------------------------------------------------------------------------- 1 | import { brainwaveSymbol, check, curve } from "../assets"; 2 | import { collabApps, collabContent, collabText } from "../constants"; 3 | import Button from "./Button"; 4 | import { LeftCurve, RightCurve } from "./design/Collaboration"; 5 | import Section from "./Section"; 6 | 7 | const Collaboration = () => { 8 | return ( 9 |
10 |
11 |
12 |

13 | AI Chat App for seemless 14 | 15 | collaboration 16 | Curve 23 | 24 |

25 | 26 |
    27 | {collabContent.map((item) => ( 28 |
  • 29 |
    30 | check 37 |
    {item.title}
    38 |
    39 | 40 | {item.text && ( 41 |

    {item.text}

    42 | )} 43 |
    • 44 | ))} 45 |
46 | 47 | 48 |
49 | 50 |
51 |

52 | {collabText} 53 |

54 | 55 |
56 |
57 |
58 |
59 | brainwave 65 |
66 |
67 |
68 | 69 |
    70 | {collabApps.map((app, i) => ( 71 |
  • 77 |
    82 | {app.title} 89 |
    90 |
    • 91 | ))} 92 |
93 | 94 | 95 | 96 |
97 |
98 |
99 |
100 | ); 101 | }; 102 | 103 | export default Collaboration; 104 | -------------------------------------------------------------------------------- /src/components/CompanyLogos.jsx: -------------------------------------------------------------------------------- 1 | import { companyLogos } from "../constants"; 2 | 3 | const CompanyLogos = ({ className }) => { 4 | return ( 5 |
6 |
7 | Helping people create beutiful content at 8 |
9 |
    10 | {companyLogos.map((logo, i) => ( 11 |
  • 15 | {`Logo-${i}`} 16 |
    • 17 | ))} 18 |
19 |
20 | ); 21 | }; 22 | 23 | export default CompanyLogos; 24 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { socials } from "../constants"; 2 | import Section from "./Section"; 3 | 4 | const Footer = () => { 5 | return ( 6 |
7 |
8 |

9 | ©{" "} 10 | Brainwave{" "} 11 | {new Date().getFullYear()}. All rights reserved. 12 |

13 | 14 |
    15 | {socials.map((social) => ( 16 | 23 | {social.title} 29 | 30 | ))} 31 |
32 |
33 |
34 | ); 35 | }; 36 | 37 | export default Footer; 38 | -------------------------------------------------------------------------------- /src/components/Generating.jsx: -------------------------------------------------------------------------------- 1 | import { loading } from "../assets"; 2 | 3 | const Generating = ({ className }) => { 4 | return ( 5 |
10 | Loading 15 | AI is generating... 16 |
17 | ); 18 | }; 19 | 20 | export default Generating; 21 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { useLocation } from "react-router-dom"; 3 | import { disablePageScroll, enablePageScroll } from "scroll-lock"; 4 | 5 | import { brainwave } from "../assets"; 6 | import MenuSvg from "../assets/svg/MenuSvg"; 7 | import { links } from "../config"; 8 | import { navigation } from "../constants"; 9 | import Button from "./Button"; 10 | import { HambugerMenu } from "./design/Header"; 11 | 12 | const Header = () => { 13 | const pathname = useLocation(); 14 | const [openNavigation, setOpenNavigation] = useState(false); 15 | 16 | const toggleNavigation = () => { 17 | if (openNavigation) { 18 | setOpenNavigation(false); 19 | enablePageScroll(); 20 | } else { 21 | setOpenNavigation(true); 22 | disablePageScroll(); 23 | } 24 | }; 25 | 26 | const handleClick = () => { 27 | if (!openNavigation) return; 28 | 29 | enablePageScroll(); 30 | setOpenNavigation(false); 31 | }; 32 | 33 | return ( 34 |
39 |
40 | 41 | Brainwave 48 | 49 | 50 | 78 | 79 | 82 | 83 | 90 |
91 |
92 | ); 93 | }; 94 | 95 | export default Header; 96 | -------------------------------------------------------------------------------- /src/components/Heading.jsx: -------------------------------------------------------------------------------- 1 | import Tagline from "./Tagline"; 2 | 3 | const Heading = ({ className, title, text, tag }) => { 4 | return ( 5 |
10 | {tag && {tag}} 11 | {title &&

{title}

} 12 | {text &&

{text}

} 13 |
14 | ); 15 | }; 16 | 17 | export default Heading; 18 | -------------------------------------------------------------------------------- /src/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | import { ScrollParallax } from "react-just-parallax"; 3 | import Typewriter from "typewriter-effect"; 4 | 5 | import { curve, heroBackground, robot } from "../assets"; 6 | import { heroIcons } from "../constants"; 7 | import Button from "./Button"; 8 | import CompanyLogos from "./CompanyLogos"; 9 | import { BackgroundCircles, BottomLine, Gradient } from "./design/Hero"; 10 | import Generating from "./Generating"; 11 | import Notification from "./Notification"; 12 | import Section from "./Section"; 13 | 14 | const Hero = () => { 15 | const parallaxRef = useRef(null); 16 | 17 | return ( 18 |
25 |
26 |
27 |

28 | Explore the Possibilities of 29 |
30 | 43 |

44 | 45 |

46 | Unleast the power of AI within Brainwave. Upgrade your productivity 47 | with{" "} 48 | 49 | Brainwave 50 | Curve 57 | 58 | , the open AI chat app. 59 |

60 | 61 | 64 |
65 | 66 |
67 |
68 |
69 |
70 | 71 |
72 | AI 79 | 80 | 81 | 82 | 83 |
    84 | {heroIcons.map((icon, index) => ( 85 |
  • 86 | {icon} 87 |
    • 88 | ))} 89 |
90 | 91 | 92 | 93 | 97 | 98 |
99 |
100 | 101 | 102 |
103 | 104 |
105 | Hero 112 |
113 | 114 | 115 |
116 | 117 | 118 |
119 | 120 | 121 |
122 | ); 123 | }; 124 | 125 | export default Hero; 126 | -------------------------------------------------------------------------------- /src/components/Notification.jsx: -------------------------------------------------------------------------------- 1 | import { notification1 } from "../assets"; 2 | import { notificationImages } from "../constants"; 3 | 4 | const Notification = ({ className, title }) => { 5 | return ( 6 |
11 | generating 18 | 19 |
20 |
{title}
21 | 22 |
23 |
    24 | {notificationImages.map((item, i) => ( 25 |
  • 29 | {`image-${i}`} 36 |
    • 37 | ))} 38 |
39 | 40 |
1m ago
41 |
42 |
43 |
44 | ); 45 | }; 46 | 47 | export default Notification; 48 | -------------------------------------------------------------------------------- /src/components/Pricing.jsx: -------------------------------------------------------------------------------- 1 | import { smallSphere, stars } from "../assets"; 2 | import { LeftLine, RightLine } from "./design/Pricing"; 3 | import Heading from "./Heading"; 4 | import PricingList from "./PricingList"; 5 | import Section from "./Section"; 6 | 7 | const Pricing = () => { 8 | return ( 9 |
10 |
11 |
12 | Sphere 19 | 20 |
21 | Stars 28 |
29 |
30 | 31 | 35 | 36 |
37 | 38 | 39 | 40 |
41 | 42 | 50 |
51 |
52 | ); 53 | }; 54 | 55 | export default Pricing; 56 | -------------------------------------------------------------------------------- /src/components/PricingList.jsx: -------------------------------------------------------------------------------- 1 | import { check } from "../assets"; 2 | import { pricing } from "../constants"; 3 | import Button from "./Button"; 4 | 5 | const PricingList = () => { 6 | return ( 7 |
8 | {pricing.map((plan, i) => ( 9 |
13 |

{plan.title}

14 |

15 | {plan.description} 16 |

17 | 18 |
19 | {plan.price && ( 20 | <> 21 |
$
22 |
23 | {plan.price} 24 |
25 | 26 | )} 27 |
28 | 29 | 36 | 37 |
    38 | {plan.features.map((feature, j) => ( 39 |
  • 43 | Check 50 |

    {feature}

    51 |
    • 52 | ))} 53 |
54 |
55 | ))} 56 |
57 | ); 58 | }; 59 | 60 | export default PricingList; 61 | -------------------------------------------------------------------------------- /src/components/Roadmap.jsx: -------------------------------------------------------------------------------- 1 | import { check2, grid, loading1 } from "../assets"; 2 | import { roadmap } from "../constants"; 3 | import Button from "./Button"; 4 | import Heading from "./Heading"; 5 | import Section from "./Section"; 6 | import Tagline from "./Tagline"; 7 | import { Gradient } from "./design/Roadmap"; 8 | 9 | const Roadmap = () => ( 10 |
11 |
12 | 13 | 14 |
15 | {roadmap.map((item) => { 16 | const status = item.status === "done" ? "Done" : "In progress"; 17 | 18 | return ( 19 |
25 |
26 |
27 | Grid 34 |
35 |
36 |
37 | {item.date} 38 | 39 |
40 | {status} 49 |
{status}
50 |
51 |
52 | 53 |
54 | {item.title} 63 |
64 |

{item.title}

65 |

{item.text}

66 |
67 |
68 |
69 | ); 70 | })} 71 | 72 | 73 |
74 | 75 |
76 | 77 |
78 |
79 |
80 | ); 81 | 82 | export default Roadmap; 83 | -------------------------------------------------------------------------------- /src/components/Section.jsx: -------------------------------------------------------------------------------- 1 | import { motion } from "framer-motion"; 2 | 3 | import SectionSvg from "../assets/svg/SectionSvg"; 4 | 5 | const Section = ({ 6 | className, 7 | id, 8 | crosses, 9 | crossesOffset, 10 | customPaddings, 11 | children, 12 | }) => { 13 | return ( 14 | 29 | {children} 30 | 31 |
35 |
39 | 40 | {crosses && ( 41 | <> 42 |
48 | 49 | 50 | 51 | )} 52 | 53 | ); 54 | }; 55 | 56 | export default Section; 57 | -------------------------------------------------------------------------------- /src/components/Services.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { service1, service2, service3, check } from "../assets"; 3 | import { brainwaveServices, brainwaveServicesIcons } from "../constants"; 4 | import Generating from "./Generating"; 5 | import Heading from "./Heading"; 6 | import Section from "./Section"; 7 | import { curve } from "../assets"; 8 | import { 9 | Gradient, 10 | PhotoChatMessage, 11 | VideoBar, 12 | VideoChatMessage, 13 | } from "./design/Services"; 14 | 15 | const Services = () => { 16 | const [isPlaying, setIsPlaying] = useState(true); 17 | 18 | return ( 19 |
20 |
21 | 24 | Generative AI made for{" "} 25 | 26 | creators 27 | Curve 34 | 35 | 36 | } 37 | text="Brainwave unlocks the potential of AI-powered applications." 38 | /> 39 | 40 |
41 | {/* Service 1 */} 42 |
43 |
44 | Smartest AI 51 |
52 | 53 |
54 |

Smartest AI

55 |

56 | Brainwave unlocks the potential of AI-powered applications. 57 |

58 |
    59 | {brainwaveServices.map((item, i) => ( 60 |
  • 64 | check 71 |

    {item}

    72 |
    • 73 | ))} 74 |
75 |
76 | 77 | 78 |
79 | 80 | {/* Service 2 & 3 */} 81 |
82 |
83 |
84 | Robot 91 |
92 | 93 |
94 |

Photo editing

95 |

96 | Automatically enhance your photos using our AI app's 97 | photo editing feature. Try it now! 98 |

99 |
100 | 101 | 102 |
103 | 104 |
105 |
106 |

Video generation

107 |

108 | The world's most powerful AI photo and video art 109 | generation engine. What will you create? 110 |

111 | 112 |
    113 | {brainwaveServicesIcons.map((icon, i) => ( 114 |
  • 122 |
    129 | {`icon-${i}`} 135 |
    136 |
    • 137 | ))} 138 |
139 |
140 | 141 |
142 | Scary Robot 151 | 152 | 153 | 154 |
155 |
156 |
157 | 158 | 159 |
160 |
161 |
162 | ); 163 | }; 164 | 165 | export default Services; 166 | -------------------------------------------------------------------------------- /src/components/Tagline.jsx: -------------------------------------------------------------------------------- 1 | import brackets from "../assets/svg/Brackets"; 2 | 3 | const Tagline = ({ className, children }) => { 4 | return ( 5 |
6 | {brackets("left")} 7 |
{children}
8 | {brackets("right")} 9 |
10 | ); 11 | }; 12 | 13 | export default Tagline; 14 | -------------------------------------------------------------------------------- /src/components/design/Benefits.jsx: -------------------------------------------------------------------------------- 1 | export const GradientLight = () => { 2 | return ( 3 |
4 | ); 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/design/Collaboration.jsx: -------------------------------------------------------------------------------- 1 | import { curve1, curve2 } from "../../assets"; 2 | 3 | export const RightCurve = () => { 4 | return ( 5 |
6 | Curve 2 7 |
8 | ); 9 | }; 10 | 11 | export const LeftCurve = () => { 12 | return ( 13 |
14 | Curve 1 15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/design/Header.jsx: -------------------------------------------------------------------------------- 1 | import { background } from "../../assets"; 2 | 3 | export const Rings = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 | ); 10 | }; 11 | 12 | export const SideLines = () => { 13 | return ( 14 | <> 15 |
16 |
17 | 18 | ); 19 | }; 20 | 21 | export const BackgroundCircles = () => { 22 | return ( 23 | <> 24 |
25 |
26 |
27 | 28 | ); 29 | }; 30 | 31 | export const HambugerMenu = () => { 32 | return ( 33 |
34 |
35 | Background 42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | ); 51 | }; 52 | -------------------------------------------------------------------------------- /src/components/design/Hero.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { MouseParallax } from "react-just-parallax"; 3 | 4 | import PlusSvg from "../../assets/svg/PlusSvg"; 5 | 6 | export const Gradient = () => { 7 | return ( 8 | <> 9 |
10 |
11 | 12 | ); 13 | }; 14 | 15 | export const BottomLine = () => { 16 | return ( 17 | <> 18 |
19 | 20 | 21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | const Rings = () => { 28 | return ( 29 | <> 30 |
31 |
32 |
33 |
34 | 35 | ); 36 | }; 37 | 38 | export const BackgroundCircles = ({ parallaxRef }) => { 39 | const [mounted, setMounted] = useState(false); 40 | 41 | useEffect(() => { 42 | setMounted(true); 43 | }, []); 44 | 45 | return ( 46 |
47 | 48 | 49 | {/* Moving background colored circle balls */} 50 | 51 |
52 |
57 |
58 | 59 |
60 |
65 |
66 | 67 |
68 |
73 |
74 | 75 |
76 |
81 |
82 | 83 |
84 |
89 |
90 | 91 |
92 |
97 |
98 | 99 |
100 | ); 101 | }; 102 | -------------------------------------------------------------------------------- /src/components/design/Pricing.jsx: -------------------------------------------------------------------------------- 1 | import { lines } from "../../assets"; 2 | 3 | export const LeftLine = () => { 4 | return ( 5 |
6 | Lines 13 |
14 | ); 15 | }; 16 | 17 | export const RightLine = () => { 18 | return ( 19 |
20 | Lines 27 |
28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /src/components/design/Roadmap.jsx: -------------------------------------------------------------------------------- 1 | import { gradient } from "../../assets"; 2 | 3 | export const Gradient = () => { 4 | return ( 5 |
6 |
7 | Gradient 14 |
15 |
16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/design/Services.jsx: -------------------------------------------------------------------------------- 1 | import Typewriter from "typewriter-effect"; 2 | 3 | import { 4 | brainwaveWhiteSymbol, 5 | gradient, 6 | loading, 7 | pause, 8 | play, 9 | } from "../../assets"; 10 | import ChatBubbleWing from "../../assets/svg/ChatBubbleWing"; 11 | import { useEffect, useRef, useState } from "react"; 12 | 13 | export const Gradient = () => { 14 | return ( 15 |
16 | Gradient 23 |
24 | ); 25 | }; 26 | 27 | export const PhotoChatMessage = () => { 28 | return ( 29 |
30 | 43 | 44 |
45 | ); 46 | }; 47 | 48 | export const VideoChatMessage = ({ isPlaying }) => { 49 | return ( 50 |
51 | 60 |
61 | Brainwave 67 |
68 |
69 | {isPlaying ? ( 70 | Loading 75 | ) : ( 76 | just now 77 | )} 78 |
79 | 83 |
84 | ); 85 | }; 86 | 87 | export const VideoBar = ({ isPlaying, setIsPlaying }) => { 88 | const [counter, setCounter] = useState(0); 89 | const progressRef = useRef(null); 90 | 91 | useEffect(() => { 92 | const interval = setInterval(() => { 93 | if (counter >= 100) setCounter(0); 94 | if (!isPlaying) return clearInterval(interval); 95 | 96 | progressRef.current.style.width = `${counter}%`; 97 | setCounter((oldCounter) => oldCounter + 0.5); 98 | }, 100); 99 | 100 | return () => clearInterval(interval); 101 | }, [counter, isPlaying]); 102 | 103 | return ( 104 |
105 | Play setIsPlaying(!isPlaying)} 112 | /> 113 | 114 |
115 |
116 |
117 |
118 | ); 119 | }; 120 | -------------------------------------------------------------------------------- /src/config/index.js: -------------------------------------------------------------------------------- 1 | export const links = { 2 | sourceCode: "https://github.com/sanidhyy/brainwave", 3 | }; 4 | -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | benefitIcon1, 3 | benefitIcon2, 4 | benefitIcon3, 5 | benefitIcon4, 6 | benefitImage2, 7 | chromecast, 8 | disc02, 9 | discord, 10 | discordBlack, 11 | facebook, 12 | figma, 13 | file02, 14 | framer, 15 | homeSmile, 16 | instagram, 17 | notification2, 18 | notification3, 19 | notification4, 20 | notion, 21 | photoshop, 22 | plusSquare, 23 | protopie, 24 | raindrop, 25 | recording01, 26 | recording03, 27 | roadmap1, 28 | roadmap2, 29 | roadmap3, 30 | roadmap4, 31 | searchMd, 32 | slack, 33 | sliders04, 34 | telegram, 35 | twitter, 36 | yourlogo, 37 | } from "../assets"; 38 | import { links } from "../config"; 39 | 40 | export const navigation = [ 41 | { 42 | id: "0", 43 | title: "Features", 44 | url: "#features", 45 | }, 46 | { 47 | id: "1", 48 | title: "Pricing", 49 | url: "#pricing", 50 | }, 51 | { 52 | id: "2", 53 | title: "How to use", 54 | url: "#how-to-use", 55 | }, 56 | { 57 | id: "3", 58 | title: "Roadmap", 59 | url: "#roadmap", 60 | }, 61 | { 62 | id: "4", 63 | title: "Source Code", 64 | url: links.sourceCode, 65 | onlyMobile: true, 66 | external: true, 67 | }, 68 | ]; 69 | 70 | export const heroIcons = [homeSmile, file02, searchMd, plusSquare]; 71 | 72 | export const notificationImages = [notification4, notification3, notification2]; 73 | 74 | export const companyLogos = [yourlogo, yourlogo, yourlogo, yourlogo, yourlogo]; 75 | 76 | export const brainwaveServices = [ 77 | "Photo generating", 78 | "Photo enhance", 79 | "Seamless Integration", 80 | ]; 81 | 82 | export const brainwaveServicesIcons = [ 83 | recording03, 84 | recording01, 85 | disc02, 86 | chromecast, 87 | sliders04, 88 | ]; 89 | 90 | export const roadmap = [ 91 | { 92 | id: "0", 93 | title: "Voice recognition", 94 | text: "Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.", 95 | date: "May 2023", 96 | status: "done", 97 | imageUrl: roadmap1, 98 | colorful: true, 99 | }, 100 | { 101 | id: "1", 102 | title: "Gamification", 103 | text: "Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.", 104 | date: "May 2023", 105 | status: "progress", 106 | imageUrl: roadmap2, 107 | }, 108 | { 109 | id: "2", 110 | title: "Chatbot customization", 111 | text: "Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.", 112 | date: "May 2023", 113 | status: "done", 114 | imageUrl: roadmap3, 115 | }, 116 | { 117 | id: "3", 118 | title: "Integration with APIs", 119 | text: "Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.", 120 | date: "May 2023", 121 | status: "progress", 122 | imageUrl: roadmap4, 123 | }, 124 | ]; 125 | 126 | export const collabText = 127 | "With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter."; 128 | 129 | export const collabContent = [ 130 | { 131 | id: "0", 132 | title: "Seamless Integration", 133 | text: collabText, 134 | }, 135 | { 136 | id: "1", 137 | title: "Smart Automation", 138 | }, 139 | { 140 | id: "2", 141 | title: "Top-notch Security", 142 | }, 143 | ]; 144 | 145 | export const collabApps = [ 146 | { 147 | id: "0", 148 | title: "Figma", 149 | icon: figma, 150 | width: 26, 151 | height: 36, 152 | }, 153 | { 154 | id: "1", 155 | title: "Notion", 156 | icon: notion, 157 | width: 34, 158 | height: 36, 159 | }, 160 | { 161 | id: "2", 162 | title: "Discord", 163 | icon: discord, 164 | width: 36, 165 | height: 28, 166 | }, 167 | { 168 | id: "3", 169 | title: "Slack", 170 | icon: slack, 171 | width: 34, 172 | height: 35, 173 | }, 174 | { 175 | id: "4", 176 | title: "Photoshop", 177 | icon: photoshop, 178 | width: 34, 179 | height: 34, 180 | }, 181 | { 182 | id: "5", 183 | title: "Protopie", 184 | icon: protopie, 185 | width: 34, 186 | height: 34, 187 | }, 188 | { 189 | id: "6", 190 | title: "Framer", 191 | icon: framer, 192 | width: 26, 193 | height: 34, 194 | }, 195 | { 196 | id: "7", 197 | title: "Raindrop", 198 | icon: raindrop, 199 | width: 38, 200 | height: 32, 201 | }, 202 | ]; 203 | 204 | export const pricing = [ 205 | { 206 | id: "0", 207 | title: "Basic", 208 | description: "AI chatbot, personalized recommendations", 209 | price: "0", 210 | features: [ 211 | "An AI chatbot that can understand your queries", 212 | "Personalized recommendations based on your preferences", 213 | "Ability to explore the app and its features without any cost", 214 | ], 215 | premium: false, 216 | }, 217 | { 218 | id: "1", 219 | title: "Premium", 220 | description: "Advanced AI chatbot, priority support, analytics dashboard", 221 | price: "9.99", 222 | features: [ 223 | "An advanced AI chatbot that can understand complex queries", 224 | "An analytics dashboard to track your conversations", 225 | "Priority support to solve issues quickly", 226 | ], 227 | premium: true, 228 | }, 229 | { 230 | id: "2", 231 | title: "Enterprise", 232 | description: "Custom AI chatbot, advanced analytics, dedicated account", 233 | price: null, 234 | features: [ 235 | "An AI chatbot that can understand your queries", 236 | "Personalized recommendations based on your preferences", 237 | "Ability to explore the app and its features without any cost", 238 | ], 239 | premium: false, 240 | }, 241 | ]; 242 | 243 | export const benefits = [ 244 | { 245 | id: "0", 246 | title: "Ask anything", 247 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.", 248 | backgroundUrl: "/src/assets/benefits/card-1.svg", 249 | iconUrl: benefitIcon1, 250 | imageUrl: benefitImage2, 251 | }, 252 | { 253 | id: "1", 254 | title: "Improve everyday", 255 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.", 256 | backgroundUrl: "/src/assets/benefits/card-2.svg", 257 | iconUrl: benefitIcon2, 258 | imageUrl: benefitImage2, 259 | light: true, 260 | }, 261 | { 262 | id: "2", 263 | title: "Connect everywhere", 264 | text: "Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.", 265 | backgroundUrl: "/src/assets/benefits/card-3.svg", 266 | iconUrl: benefitIcon3, 267 | imageUrl: benefitImage2, 268 | }, 269 | { 270 | id: "3", 271 | title: "Fast responding", 272 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.", 273 | backgroundUrl: "/src/assets/benefits/card-4.svg", 274 | iconUrl: benefitIcon4, 275 | imageUrl: benefitImage2, 276 | light: true, 277 | }, 278 | { 279 | id: "4", 280 | title: "Ask anything", 281 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.", 282 | backgroundUrl: "/src/assets/benefits/card-5.svg", 283 | iconUrl: benefitIcon1, 284 | imageUrl: benefitImage2, 285 | }, 286 | { 287 | id: "5", 288 | title: "Improve everyday", 289 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.", 290 | backgroundUrl: "/src/assets/benefits/card-6.svg", 291 | iconUrl: benefitIcon2, 292 | imageUrl: benefitImage2, 293 | }, 294 | ]; 295 | 296 | export const socials = [ 297 | { 298 | id: "0", 299 | title: "Discord", 300 | iconUrl: discordBlack, 301 | url: "#", 302 | }, 303 | { 304 | id: "1", 305 | title: "Twitter", 306 | iconUrl: twitter, 307 | url: "#", 308 | }, 309 | { 310 | id: "2", 311 | title: "Instagram", 312 | iconUrl: instagram, 313 | url: "#", 314 | }, 315 | { 316 | id: "3", 317 | title: "Telegram", 318 | iconUrl: telegram, 319 | url: "#", 320 | }, 321 | { 322 | id: "4", 323 | title: "Facebook", 324 | iconUrl: facebook, 325 | url: "#", 326 | }, 327 | ]; 328 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap"); 3 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap"); 4 | 5 | @tailwind base; 6 | @tailwind components; 7 | @tailwind utilities; 8 | 9 | :root { 10 | --font-sora: "Sora", sans-serif; 11 | --font-code: "Source Code Pro", monospace; 12 | --font-grotesk: "Space Grotesk", sans-serif; 13 | color-scheme: dark; 14 | } 15 | 16 | * { 17 | scroll-behavior: smooth; 18 | } 19 | 20 | @layer base { 21 | body { 22 | @apply font-sans bg-n-8 text-n-1 text-base; 23 | } 24 | } 25 | 26 | .rotate-45 { 27 | @apply rotate-[45deg]; 28 | } 29 | 30 | .rotate-90 { 31 | @apply rotate-[90deg]; 32 | } 33 | 34 | .rotate-135 { 35 | @apply rotate-[135deg]; 36 | } 37 | 38 | .rotate-180 { 39 | @apply rotate-[180deg]; 40 | } 41 | 42 | .rotate-225 { 43 | @apply rotate-[225deg]; 44 | } 45 | 46 | .rotate-270 { 47 | @apply rotate-[270deg]; 48 | } 49 | 50 | .rotate-315 { 51 | @apply rotate-[315deg]; 52 | } 53 | 54 | .rotate-360 { 55 | @apply rotate-[360deg]; 56 | } 57 | 58 | .-rotate-45 { 59 | @apply rotate-[-45deg]; 60 | } 61 | 62 | .-rotate-90 { 63 | @apply rotate-[-90deg]; 64 | } 65 | 66 | .-rotate-135 { 67 | @apply rotate-[-135deg]; 68 | } 69 | 70 | .-rotate-180 { 71 | @apply rotate-[-180deg]; 72 | } 73 | 74 | .-rotate-225 { 75 | @apply rotate-[-225deg]; 76 | } 77 | 78 | .-rotate-270 { 79 | @apply rotate-[-270deg]; 80 | } 81 | 82 | .-rotate-315 { 83 | @apply rotate-[-315deg]; 84 | } 85 | 86 | .-rotate-360 { 87 | @apply rotate-[-360deg]; 88 | } 89 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { BrowserRouter as Router } from "react-router-dom"; 4 | 5 | import App from "./App.jsx"; 6 | 7 | import "./index.css"; 8 | 9 | ReactDOM.createRoot(document.getElementById("root")).render( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | import { fontFamily } from "tailwindcss/defaultTheme"; 3 | import plugin from "tailwindcss/plugin"; 4 | 5 | export default { 6 | content: [ 7 | "./index.html", 8 | "./src/**/*.{js,ts,jsx,tsx}", 9 | "./public/assets/**/*.{js,ts,jsx,tsx}", 10 | ], 11 | theme: { 12 | extend: { 13 | colors: { 14 | color: { 15 | 1: "#AC6AFF", 16 | 2: "#FFC876", 17 | 3: "#FF776F", 18 | 4: "#7ADB78", 19 | 5: "#858DFF", 20 | 6: "#FF98E2", 21 | }, 22 | stroke: { 23 | 1: "#26242C", 24 | }, 25 | n: { 26 | 1: "#FFFFFF", 27 | 2: "#CAC6DD", 28 | 3: "#ADA8C3", 29 | 4: "#757185", 30 | 5: "#3F3A52", 31 | 6: "#252134", 32 | 7: "#15131D", 33 | 8: "#0E0C15", 34 | 9: "#474060", 35 | 10: "#43435C", 36 | 11: "#1B1B2E", 37 | 12: "#2E2A41", 38 | 13: "#6C7275", 39 | }, 40 | }, 41 | fontFamily: { 42 | sans: ["var(--font-sora)", ...fontFamily.sans], 43 | code: "var(--font-code)", 44 | grotesk: "var(--font-grotesk)", 45 | }, 46 | letterSpacing: { 47 | tagline: ".15em", 48 | }, 49 | spacing: { 50 | 0.25: "0.0625rem", 51 | 7.5: "1.875rem", 52 | 15: "3.75rem", 53 | }, 54 | opacity: { 55 | 15: ".15", 56 | }, 57 | transitionDuration: { 58 | DEFAULT: "200ms", 59 | }, 60 | transitionTimingFunction: { 61 | DEFAULT: "linear", 62 | }, 63 | zIndex: { 64 | 1: "1", 65 | 2: "2", 66 | 3: "3", 67 | 4: "4", 68 | 5: "5", 69 | }, 70 | borderWidth: { 71 | DEFAULT: "0.0625rem", 72 | }, 73 | backgroundImage: { 74 | "radial-gradient": "radial-gradient(var(--tw-gradient-stops))", 75 | "conic-gradient": 76 | "conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)", 77 | "benefit-card-1": "url(assets/benefits/card-1.svg)", 78 | "benefit-card-2": "url(assets/benefits/card-2.svg)", 79 | "benefit-card-3": "url(assets/benefits/card-3.svg)", 80 | "benefit-card-4": "url(assets/benefits/card-4.svg)", 81 | "benefit-card-5": "url(assets/benefits/card-5.svg)", 82 | "benefit-card-6": "url(assets/benefits/card-6.svg)", 83 | }, 84 | }, 85 | }, 86 | plugins: [ 87 | plugin(function ({ addBase, addComponents, addUtilities }) { 88 | addBase({}); 89 | addComponents({ 90 | ".container": { 91 | "@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]": 92 | {}, 93 | }, 94 | ".h1": { 95 | "@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]": 96 | {}, 97 | }, 98 | ".h2": { 99 | "@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": 100 | {}, 101 | }, 102 | ".h3": { 103 | "@apply text-[2rem] leading-normal md:text-[2.5rem]": {}, 104 | }, 105 | ".h4": { 106 | "@apply text-[2rem] leading-normal": {}, 107 | }, 108 | ".h5": { 109 | "@apply text-2xl leading-normal": {}, 110 | }, 111 | ".h6": { 112 | "@apply font-semibold text-lg leading-8": {}, 113 | }, 114 | ".body-1": { 115 | "@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8": 116 | {}, 117 | }, 118 | ".body-2": { 119 | "@apply font-light text-[0.875rem] leading-6 md:text-base": {}, 120 | }, 121 | ".caption": { 122 | "@apply text-sm": {}, 123 | }, 124 | ".tagline": { 125 | "@apply font-grotesk font-light text-xs tracking-tagline uppercase": 126 | {}, 127 | }, 128 | ".quote": { 129 | "@apply font-code text-lg leading-normal": {}, 130 | }, 131 | ".button": { 132 | "@apply font-code text-xs font-bold uppercase tracking-wider": {}, 133 | }, 134 | }); 135 | addUtilities({ 136 | ".tap-highlight-color": { 137 | "-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)", 138 | }, 139 | }); 140 | }), 141 | ], 142 | }; 143 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------