├── .eslintrc.cjs ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── package.json ├── postcss.config.js ├── 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 │ ├── 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 │ ├── openai-symbol-white.svg │ ├── openai.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 │ │ ├── ChatBubbleWing.jsx │ │ ├── ClipPath.jsx │ │ ├── MenuSvg.jsx │ │ ├── PlusSvg.jsx │ │ └── SectionSvg.jsx │ └── yourlogo.svg ├── components │ ├── Button.jsx │ ├── Footer.jsx │ ├── Heading.jsx │ ├── Navbar.jsx │ ├── Notification.jsx │ ├── Section.jsx │ └── Tagline.jsx ├── index.css ├── main.jsx └── sections │ ├── Benefits.jsx │ ├── Collaboration.jsx │ ├── Hero.jsx │ ├── Pricing.jsx │ ├── Roadmap.jsx │ └── Services.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Tobias Scharl 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Modern Startup Website 2 | 3 | ![Showcase Image](https://i.ibb.co/2y7hTzr/Screenshot-2024-05-19-232554.png) 4 | 5 | This is a modern startup website, made with React.js & TailwindCSS. The whole design is made to be modern, simple and eye-catching. You may use this as project as a starting point for your startup, but make sure you give this repo a star :) 6 | 7 | View Website 8 | 9 | 10 | ## Features 11 | 12 | - [x] **Beautiful Sections**: Includes hero, services, features, how to use, roadmap, pricing sections. 13 | 14 | - [x] **Parallax Animations**: Engaging effects triggered by mouse movement and scrolling 15 | 16 | - [x] **Cool Gradients**: Enhances visuals with stylish gradients using Tailwind CSS for cards, buttons, etc. 17 | 18 | - [x] **Responsive**: Ensures seamless functionality and aesthetics across all devices 19 | 20 | - [x] **Best Practices**: Code architecture and reusability 21 | 22 | 23 | ## Getting Started 24 | ### Prerequisites 25 | 26 | - Node.js (version 12 or higher) 27 | 28 | ### Installation 29 | 30 | 1. Clone the repository to your local machine: 31 | 32 | ```bash 33 | 34 | git clone https://github.com/0xBitBuster/startup-website.git 35 | 36 | ``` 37 | 38 | 2. Install the dependencies: 39 | ```bash 40 | 41 | npm install 42 | 43 | ``` 44 | 45 | ### Usage 46 | 47 | To start the server, run: 48 | 49 | ```bash 50 | 51 | npm run dev 52 | 53 | ``` 54 | 55 | By default, the web application runs on `http://localhost:5173` 56 | 57 | ## License 58 | 59 | This project is licensed under the MIT License - see the LICENSE file for details. 60 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OpenAI 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "startup-website", 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 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-just-parallax": "^3.1.16", 16 | "react-router-dom": "^6.22.1", 17 | "scroll-lock": "^2.1.5" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "^18.2.55", 21 | "@types/react-dom": "^18.2.19", 22 | "@vitejs/plugin-react": "^4.2.1", 23 | "autoprefixer": "^10.4.17", 24 | "eslint": "^8.56.0", 25 | "eslint-plugin-react": "^7.33.2", 26 | "eslint-plugin-react-hooks": "^4.6.0", 27 | "eslint-plugin-react-refresh": "^0.4.5", 28 | "postcss": "^8.4.35", 29 | "tailwindcss": "^3.4.1", 30 | "vite": "^5.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import Benefits from "./sections/Benefits"; 2 | import Collaboration from "./sections/Collaboration"; 3 | import Footer from "./components/Footer"; 4 | import Navbar from "./components/Navbar"; 5 | import Hero from "./sections/Hero"; 6 | import Pricing from "./sections/Pricing"; 7 | import Roadmap from "./sections/Roadmap"; 8 | import Services from "./sections/Services"; 9 | 10 | const App = () => { 11 | return ( 12 | <> 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
23 | 24 | ); 25 | }; 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /src/assets/4-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/4-small.png -------------------------------------------------------------------------------- /src/assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/background.jpg -------------------------------------------------------------------------------- /src/assets/benefits/card-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/card-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/card-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/card-4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/card-5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/card-6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/icon-4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/benefits/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/benefits/image-2.png -------------------------------------------------------------------------------- /src/assets/check-02.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/chrome-cast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/collaboration/curve-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/collaboration/curve-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/collaboration/discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/discord.png -------------------------------------------------------------------------------- /src/assets/collaboration/figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/figma.png -------------------------------------------------------------------------------- /src/assets/collaboration/framer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/framer.png -------------------------------------------------------------------------------- /src/assets/collaboration/notion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/notion.png -------------------------------------------------------------------------------- /src/assets/collaboration/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/photoshop.png -------------------------------------------------------------------------------- /src/assets/collaboration/protopie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/protopie.png -------------------------------------------------------------------------------- /src/assets/collaboration/raindrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/raindrop.png -------------------------------------------------------------------------------- /src/assets/collaboration/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/collaboration/slack.png -------------------------------------------------------------------------------- /src/assets/disc-02.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/file-02.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/gradient.png -------------------------------------------------------------------------------- /src/assets/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/grid.png -------------------------------------------------------------------------------- /src/assets/hero/curve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/hero/curve.png -------------------------------------------------------------------------------- /src/assets/hero/hero-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/hero/hero-background.jpg -------------------------------------------------------------------------------- /src/assets/hero/robot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/hero/robot.jpg -------------------------------------------------------------------------------- /src/assets/home-smile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | // Hero Section 2 | export { default as curve } from './hero/curve.png'; 3 | export { default as robot } from './hero/robot.jpg'; 4 | export { default as heroBackground } from './hero/hero-background.jpg'; 5 | 6 | // Collaboration Section 7 | export { default as curve1 } from './collaboration/curve-1.svg'; 8 | export { default as curve2 } from './collaboration/curve-2.svg'; 9 | export { default as discord } from './collaboration/discord.png'; 10 | export { default as figma } from './collaboration/figma.png'; 11 | export { default as framer } from './collaboration/framer.png'; 12 | export { default as notion } from './collaboration/notion.png'; 13 | export { default as photoshop } from './collaboration/photoshop.png'; 14 | export { default as protopie } from './collaboration/protopie.png'; 15 | export { default as raindrop } from './collaboration/raindrop.png'; 16 | export { default as slack } from './collaboration/slack.png'; 17 | 18 | // Services Section 19 | export { default as service1 } from './services/service-1.png'; 20 | export { default as service2 } from './services/service-2.png'; 21 | export { default as service3 } from './services/service-3.png'; 22 | 23 | // Pricing Section 24 | export { default as lines } from './pricing/lines.svg'; 25 | export { default as stars } from './pricing/stars.svg'; 26 | 27 | // Roadmap Section 28 | export { default as coins } from './roadmap/coins.png'; 29 | export { default as done } from './roadmap/done.svg'; 30 | export { default as hero } from './roadmap/hero.png'; 31 | export { default as roadmap1 } from './roadmap/image-1.png'; 32 | export { default as roadmap2 } from './roadmap/image-2.png'; 33 | export { default as roadmap3 } from './roadmap/image-3.png'; 34 | export { default as roadmap4 } from './roadmap/image-4.png'; 35 | export { default as undone } from './roadmap/undone.svg'; 36 | 37 | // Notification Section 38 | export { default as notification1 } from './notification/image-1.png'; 39 | export { default as notification2 } from './notification/image-2.png'; 40 | export { default as notification3 } from './notification/image-3.png'; 41 | export { default as notification4 } from './notification/image-4.png'; 42 | 43 | // Benefits Section 44 | export { default as benefitCard1 } from './benefits/card-1.svg'; 45 | export { default as benefitCard2 } from './benefits/card-2.svg'; 46 | export { default as benefitCard3 } from './benefits/card-3.svg'; 47 | export { default as benefitCard4 } from './benefits/card-4.svg'; 48 | export { default as benefitCard5 } from './benefits/card-5.svg'; 49 | export { default as benefitCard6 } from './benefits/card-6.svg'; 50 | export { default as benefitIcon1 } from './benefits/icon-1.svg'; 51 | export { default as benefitIcon2 } from './benefits/icon-2.svg'; 52 | export { default as benefitIcon3 } from './benefits/icon-3.svg'; 53 | export { default as benefitIcon4 } from './benefits/icon-4.svg'; 54 | export { default as benefitImage2 } from './benefits/image-2.png'; 55 | 56 | // Socials Section 57 | export { default as discordBlack } from './socials/discord.svg'; 58 | export { default as facebook } from './socials/facebook.svg'; 59 | export { default as instagram } from './socials/instagram.svg'; 60 | export { default as telegram } from './socials/telegram.svg'; 61 | export { default as twitter } from './socials/twitter.svg'; 62 | 63 | // General Imports 64 | export { default as openai } from './openai.svg'; 65 | export { default as check } from './check.svg'; 66 | export { default as check2 } from './check-02.svg'; 67 | export { default as loading1 } from './loading-01.svg'; 68 | export { default as openaiWhiteSymbol } from './openai-symbol-white.svg'; 69 | export { default as play } from './play.svg'; 70 | export { default as gradient } from './gradient.png'; 71 | export { default as smallSphere } from './4-small.png'; 72 | export { default as grid } from './grid.png'; 73 | export { default as yourlogo } from './yourlogo.svg'; 74 | export { default as homeSmile } from './home-smile.svg'; 75 | export { default as file02 } from './file-02.svg'; 76 | export { default as searchMd } from './search-md.svg'; 77 | export { default as plusSquare } from './plus-square.svg'; 78 | export { default as recording03 } from './recording-03.svg'; 79 | export { default as recording01 } from './recording-01.svg'; 80 | export { default as disc02 } from './disc-02.svg'; 81 | export { default as chromecast } from './chrome-cast.svg'; 82 | export { default as sliders04 } from './sliders-04.svg'; 83 | export { default as loading } from './loading.png'; 84 | export { default as background } from './background.jpg'; 85 | -------------------------------------------------------------------------------- /src/assets/loading-01.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/loading.png -------------------------------------------------------------------------------- /src/assets/notification/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/notification/image-1.png -------------------------------------------------------------------------------- /src/assets/notification/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/notification/image-2.png -------------------------------------------------------------------------------- /src/assets/notification/image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/notification/image-3.png -------------------------------------------------------------------------------- /src/assets/notification/image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/notification/image-4.png -------------------------------------------------------------------------------- /src/assets/openai-symbol-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/openai.svg: -------------------------------------------------------------------------------- 1 |

OpenAI

 -------------------------------------------------------------------------------- /src/assets/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/plus-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/pricing/lines.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/pricing/stars.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/recording-01.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/recording-03.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/roadmap/coins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/roadmap/coins.png -------------------------------------------------------------------------------- /src/assets/roadmap/done.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/roadmap/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/roadmap/hero.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/roadmap/image-1.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/roadmap/image-2.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/roadmap/image-3.png -------------------------------------------------------------------------------- /src/assets/roadmap/image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/roadmap/image-4.png -------------------------------------------------------------------------------- /src/assets/roadmap/undone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/search-md.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/services/service-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/services/service-1.png -------------------------------------------------------------------------------- /src/assets/services/service-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/services/service-2.png -------------------------------------------------------------------------------- /src/assets/services/service-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xBitBuster/startup-website/be1d0e7f3e4c0e52afaf593f36a779fb935d96d6/src/assets/services/service-3.png -------------------------------------------------------------------------------- /src/assets/sliders-04.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/socials/discord.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/socials/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/socials/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/socials/telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/socials/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ) : ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | export default brackets; 25 | -------------------------------------------------------------------------------- /src/assets/svg/ChatBubbleWing.jsx: -------------------------------------------------------------------------------- 1 | const ChatBubbleWing = ({ className, pathClassName }) => { 2 | return ( 3 | 4 | 5 | 6 | ); 7 | }; 8 | 9 | export default ChatBubbleWing; 10 | -------------------------------------------------------------------------------- /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 | 4 | 5 | 6 | 7 | ); 8 | }; 9 | 10 | export default MenuSvg; 11 | -------------------------------------------------------------------------------- /src/assets/svg/PlusSvg.jsx: -------------------------------------------------------------------------------- 1 | const PlusSvg = ({ className = "" }) => { 2 | return ( 3 | 4 | 5 | 6 | ); 7 | }; 8 | 9 | export default PlusSvg; 10 | -------------------------------------------------------------------------------- /src/assets/svg/SectionSvg.jsx: -------------------------------------------------------------------------------- 1 | import PlusSvg from "./PlusSvg"; 2 | 3 | const SectionSvg = ({ crossesOffset }) => { 4 | return ( 5 | <> 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default SectionSvg; 13 | -------------------------------------------------------------------------------- /src/assets/yourlogo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | 2 | const Button = ({ className, href, onClick, children, white }) => { 3 | const classes = `button text-center relative inline-flex items-center justify-center py-0.5 overflow-hidden rounded-lg group transition-colors px-0.5 ${white ? "text-n-8 bg-white" : "text-white bg-gradient-to-br"} hover:text-color-1 from-purple-500 to-pink-500 ${className || ""}`; 4 | 5 | const renderedButton = ( 6 | 9 | ); 10 | 11 | const renderedLink = ( 12 | 13 | {children} 14 | 15 | ); 16 | 17 | return href ? renderedLink : renderedButton; 18 | }; 19 | 20 | export default Button; 21 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Section from "./Section"; 3 | import { discordBlack, facebook, instagram, telegram, twitter } from "../assets"; 4 | 5 | const socials = [ 6 | { 7 | title: "Discord", 8 | iconUrl: discordBlack, 9 | url: "#", 10 | }, 11 | { 12 | title: "Twitter", 13 | iconUrl: twitter, 14 | url: "#", 15 | }, 16 | { 17 | title: "Instagram", 18 | iconUrl: instagram, 19 | url: "#", 20 | }, 21 | { 22 | title: "Telegram", 23 | iconUrl: telegram, 24 | url: "#", 25 | }, 26 | { 27 | title: "Facebook", 28 | iconUrl: facebook, 29 | url: "#", 30 | }, 31 | ]; 32 | 33 | const Footer = () => { 34 | return ( 35 |
36 |
37 |

© {new Date().getFullYear()}. All rights reserved.

38 | 39 |
    40 | {socials.map((item, i) => ( 41 | 42 | {item.title} 43 | 44 | ))} 45 |
46 |
47 |
48 | ); 49 | }; 50 | 51 | export default Footer; 52 | -------------------------------------------------------------------------------- /src/components/Heading.jsx: -------------------------------------------------------------------------------- 1 | import TagLine from "./Tagline"; 2 | 3 | const Heading = ({ className, title, text, tag }) => { 4 | return ( 5 |
6 | {tag && {tag}} 7 | {title &&

{title}

} 8 | {text &&

{text}

} 9 |
10 | ); 11 | }; 12 | 13 | export default Heading; 14 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { useLocation } from "react-router-dom"; 2 | import { disablePageScroll, enablePageScroll } from "scroll-lock"; 3 | 4 | import { background, openai } from "../assets"; 5 | import Button from "./Button"; 6 | import MenuSvg from "../assets/svg/MenuSvg"; 7 | import { useState } from "react"; 8 | 9 | const navigation = [ 10 | { 11 | id: "0", 12 | title: "Features", 13 | url: "#features", 14 | }, 15 | { 16 | id: "1", 17 | title: "Pricing", 18 | url: "#pricing", 19 | }, 20 | { 21 | id: "2", 22 | title: "How to use", 23 | url: "#how-to-use", 24 | }, 25 | { 26 | id: "3", 27 | title: "Roadmap", 28 | url: "#roadmap", 29 | }, 30 | { 31 | id: "4", 32 | title: "New account", 33 | url: "#signup", 34 | onlyMobile: true, 35 | }, 36 | { 37 | id: "5", 38 | title: "Sign in", 39 | url: "#login", 40 | onlyMobile: true, 41 | }, 42 | ]; 43 | 44 | const Header = () => { 45 | const pathname = useLocation(); 46 | const [openNavigation, setOpenNavigation] = useState(false); 47 | 48 | const toggleNavigation = () => { 49 | if (openNavigation) { 50 | setOpenNavigation(false); 51 | enablePageScroll(); 52 | } else { 53 | setOpenNavigation(true); 54 | disablePageScroll(); 55 | } 56 | }; 57 | 58 | const handleClick = () => { 59 | if (!openNavigation) return; 60 | 61 | enablePageScroll(); 62 | setOpenNavigation(false); 63 | }; 64 | 65 | return ( 66 |
67 |
68 | 69 | OpenAI 70 | 71 | 72 | 106 | 107 | 108 | New account 109 | 110 | 113 | 114 | 117 |
118 |
119 | ); 120 | }; 121 | 122 | export default Header; 123 | -------------------------------------------------------------------------------- /src/components/Notification.jsx: -------------------------------------------------------------------------------- 1 | import { notification1, notification2, notification3, notification4 } from "../assets"; 2 | 3 | const Notification = ({ className, title }) => { 4 | return ( 5 |
6 | 7 | 8 |
9 |
{title}
10 | 11 |
12 |
    13 |
  • 14 | 15 |
    • 16 |
  • 17 | 18 |
    • 19 |
  • 20 | 21 |
    • 22 |
23 |
1m ago
24 |
25 |
26 |
27 | ); 28 | }; 29 | 30 | export default Notification; 31 | -------------------------------------------------------------------------------- /src/components/Section.jsx: -------------------------------------------------------------------------------- 1 | import SectionSvg from "../assets/svg/SectionSvg"; 2 | 3 | const Section = ({ className, id, crosses, crossesOffset, customPaddings, children }) => { 4 | return ( 5 |
6 | {children} 7 | 8 |
9 |
10 | 11 | {crosses && ( 12 | <> 13 |
14 | 15 | 16 | )} 17 |
18 | ); 19 | }; 20 | 21 | export default Section; 22 | -------------------------------------------------------------------------------- /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/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 | html { 17 | scroll-behavior: smooth; 18 | } 19 | 20 | @layer base { 21 | body { 22 | @apply font-sans bg-n-8 text-white text-base; 23 | } 24 | } 25 | 26 | .container { 27 | @apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]; 28 | } 29 | 30 | .h1 { 31 | @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]; 32 | } 33 | .h2 { 34 | @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; 35 | } 36 | .h3 { 37 | @apply text-[2rem] leading-normal md:text-[2.5rem]; 38 | } 39 | .h4 { 40 | @apply text-[2rem] leading-normal; 41 | } 42 | .h5 { 43 | @apply text-2xl leading-normal; 44 | } 45 | .h6 { 46 | @apply font-semibold text-lg leading-8; 47 | } 48 | 49 | .body-1 { 50 | @apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8; 51 | } 52 | .body-2 { 53 | @apply font-light text-[0.875rem] leading-6 md:text-base; 54 | } 55 | 56 | .caption { 57 | @apply text-sm; 58 | } 59 | 60 | .tagline { 61 | @apply font-grotesk font-light text-xs tracking-tagline uppercase; 62 | } 63 | 64 | .quote { 65 | @apply font-code text-lg leading-normal; 66 | } 67 | 68 | .button { 69 | @apply font-code text-xs font-bold uppercase tracking-wider; 70 | } 71 | 72 | .tap-highlight-color { 73 | -webkit-tap-highlight-color: "rgba(0, 0, 0, 0)" 74 | } -------------------------------------------------------------------------------- /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 | import "./index.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")).render( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /src/sections/Benefits.jsx: -------------------------------------------------------------------------------- 1 | import Heading from "../components/Heading"; 2 | import Section from "../components/Section"; 3 | import Arrow from "../assets/svg/Arrow"; 4 | import ClipPath from "../assets/svg/ClipPath"; 5 | import { benefitIcon1, benefitIcon2, benefitIcon3, benefitIcon4, benefitImage2 } from "../assets"; 6 | 7 | const benefits = [ 8 | { 9 | title: "Ask anything", 10 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.", 11 | backgroundUrl: "./src/assets/benefits/card-1.svg", 12 | iconUrl: benefitIcon1, 13 | imageUrl: benefitImage2, 14 | }, 15 | { 16 | title: "Improve everyday", 17 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.", 18 | backgroundUrl: "./src/assets/benefits/card-2.svg", 19 | iconUrl: benefitIcon2, 20 | imageUrl: benefitImage2, 21 | light: true, 22 | }, 23 | { 24 | title: "Connect everywhere", 25 | text: "Connect with the AI chatbot from anywhere, on any device, making it more accessible and convenient.", 26 | backgroundUrl: "./src/assets/benefits/card-3.svg", 27 | iconUrl: benefitIcon3, 28 | imageUrl: benefitImage2, 29 | }, 30 | { 31 | title: "Fast responding", 32 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.", 33 | backgroundUrl: "./src/assets/benefits/card-4.svg", 34 | iconUrl: benefitIcon4, 35 | imageUrl: benefitImage2, 36 | light: true, 37 | }, 38 | { 39 | title: "Ask anything", 40 | text: "Lets users quickly find answers to their questions without having to search through multiple sources.", 41 | backgroundUrl: "./src/assets/benefits/card-5.svg", 42 | iconUrl: benefitIcon1, 43 | imageUrl: benefitImage2, 44 | }, 45 | { 46 | title: "Improve everyday", 47 | text: "The app uses natural language processing to understand user queries and provide accurate and relevant responses.", 48 | backgroundUrl: "./src/assets/benefits/card-6.svg", 49 | iconUrl: benefitIcon2, 50 | imageUrl: benefitImage2, 51 | }, 52 | ]; 53 | 54 | const Benefits = () => { 55 | return ( 56 |
57 |
58 | 59 | 60 |
61 | {benefits.map((item, i) => ( 62 |
69 |
70 |
{item.title}
71 |

{item.text}

72 |
73 | {item.title} 74 |

Explore more

75 | 76 |
77 |
78 | 79 | {item.light &&
} 80 | 81 |
82 |
{item.imageUrl && {item.title}}
83 |
84 | 85 | 86 |
87 | ))} 88 |
89 |
90 |
91 | ); 92 | }; 93 | 94 | export default Benefits; 95 | -------------------------------------------------------------------------------- /src/sections/Collaboration.jsx: -------------------------------------------------------------------------------- 1 | import { openai, check, curve1, curve2, discord, figma, framer, notion, photoshop, protopie, raindrop, slack } from "../assets"; 2 | import Button from "../components/Button"; 3 | import Section from "../components/Section"; 4 | 5 | const collabContent = [ 6 | { 7 | title: "Seamless Integration", 8 | text: "With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.", 9 | }, 10 | { title: "Smart Automation" }, 11 | { title: "Top-notch Security" }, 12 | ]; 13 | 14 | const collabApps = [ 15 | { 16 | title: "Figma", 17 | icon: figma, 18 | width: 26, 19 | height: 36, 20 | }, 21 | { 22 | title: "Notion", 23 | icon: notion, 24 | width: 34, 25 | height: 36, 26 | }, 27 | { 28 | title: "Discord", 29 | icon: discord, 30 | width: 36, 31 | height: 28, 32 | }, 33 | { 34 | title: "Slack", 35 | icon: slack, 36 | width: 34, 37 | height: 35, 38 | }, 39 | { 40 | title: "Photoshop", 41 | icon: photoshop, 42 | width: 34, 43 | height: 34, 44 | }, 45 | { 46 | title: "Protopie", 47 | icon: protopie, 48 | width: 34, 49 | height: 34, 50 | }, 51 | { 52 | title: "Framer", 53 | icon: framer, 54 | width: 26, 55 | height: 34, 56 | }, 57 | { 58 | title: "Raindrop", 59 | icon: raindrop, 60 | width: 38, 61 | height: 32, 62 | }, 63 | ]; 64 | 65 | const Collaboration = () => { 66 | return ( 67 |
68 |
69 |
70 |

AI Chat App for seamless collaboration

71 | 72 |
    73 | {collabContent.map((item, i) => ( 74 |
  • 75 |
    76 | 77 |
    {item.title}
    78 |
    79 | {item.text &&

    {item.text}

    } 80 |
    • 81 | ))} 82 |
83 | 84 | 87 | 88 |
89 | 90 |
91 |

With smart automation and top-notch security, it's the perfect solution for teams looking to work smarter.

92 | 93 |
94 |
95 |
96 |
97 | OpenAI 98 |
99 |
100 |
101 | 102 |
    103 | {collabApps.map((app, index) => ( 104 |
  • 105 |
    106 | {app.title} 107 |
    108 |
    • 109 | ))} 110 |
111 | 112 |
113 | 114 |
115 |
116 | 117 |
118 |
119 |
120 |
121 |
122 | ); 123 | }; 124 | 125 | export default Collaboration; 126 | -------------------------------------------------------------------------------- /src/sections/Hero.jsx: -------------------------------------------------------------------------------- 1 | import { curve, file02, heroBackground, homeSmile, loading, plusSquare, robot, searchMd, yourlogo } from "../assets"; 2 | import Button from "../components/Button"; 3 | import Section from "../components/Section"; 4 | import { MouseParallax, ScrollParallax } from "react-just-parallax"; 5 | import { useEffect, useRef, useState } from "react"; 6 | import Notification from "../components/Notification"; 7 | import PlusSvg from "../assets/svg/PlusSvg"; 8 | 9 | const BackgroundCircles = ({ parallaxRef }) => { 10 | const [mounted, setMounted] = useState(false); 11 | 12 | useEffect(() => { 13 | setMounted(true); 14 | }, []); 15 | 16 | return ( 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 | 32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 | 48 |
49 | ); 50 | }; 51 | 52 | const Hero = () => { 53 | const parallaxRef = useRef(null); 54 | 55 | return ( 56 |
57 |
58 |
59 |

60 | Explore the Possibilities of AI Chatting with {` `} 61 | 62 | OpenAI 63 | 64 |

65 |

Unleash the power of AI within OpenAI. Upgrade your productivity with OpenAI, the open AI chat app.

66 | 69 |
70 |
71 |
72 |
73 |
74 | 75 |
76 | 77 | 78 |
79 | 80 | AI is generating 81 |
82 | 83 | 84 |
    85 |
  • 86 | 87 |
    • 88 |
  • 89 | 90 |
    • 91 |
  • 92 | 93 |
    • 94 |
  • 95 | 96 |
    • 97 |
98 | 99 | 100 | 101 | 102 | 103 |
104 |
105 | 106 |
107 |
108 |
109 |
110 | hero 111 |
112 | 113 | 114 |
115 | 116 |
117 |
Helping people create beautiful content at
118 |
    119 |
  • 120 | 121 |
    • 122 |
  • 123 | 124 |
    • 125 |
  • 126 | 127 |
    • 128 |
  • 129 | 130 |
    • 131 |
132 |
133 |
134 | 135 |
136 | 137 | 138 |
139 | ); 140 | }; 141 | 142 | export default Hero; 143 | -------------------------------------------------------------------------------- /src/sections/Pricing.jsx: -------------------------------------------------------------------------------- 1 | import Section from "../components/Section"; 2 | import { smallSphere, stars, lines, check } from "../assets"; 3 | import Heading from "../components/Heading"; 4 | import Button from "../components/Button"; 5 | 6 | const pricing = [ 7 | { 8 | title: "Basic", 9 | description: "AI chatbot, personalized recommendations", 10 | price: "0", 11 | features: ["An AI chatbot that can understand your queries", "Personalized recommendations based on your preferences", "Ability to explore the app and its features without any cost"], 12 | }, 13 | { 14 | title: "Premium", 15 | description: "Advanced AI chatbot, priority support, analytics dashboard", 16 | price: "9.99", 17 | features: ["An advanced AI chatbot that can understand complex queries", "An analytics dashboard to track your conversations", "Priority support to solve issues quickly"], 18 | }, 19 | { 20 | title: "Enterprise", 21 | description: "Custom AI chatbot, advanced analytics, dedicated account", 22 | price: null, 23 | features: ["An AI chatbot that can understand your queries", "Personalized recommendations based on your preferences", "Ability to explore the app and its features without any cost"], 24 | }, 25 | ]; 26 | 27 | const Pricing = () => { 28 | return ( 29 |
30 |
31 |
32 | 33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 |
41 |
42 | {pricing.map((item, i) => ( 43 |
44 |

{item.title}

45 | 46 |

{item.description}

47 | 48 |
49 | {item.price && ( 50 | <> 51 |
$
52 |
{item.price}
53 | 54 | )} 55 |
56 | 57 | 60 | 61 |
    62 | {item.features.map((feature, index) => ( 63 |
  • 64 | 65 |

    {feature}

    66 |
    • 67 | ))} 68 |
69 |
70 | ))} 71 |
72 | 73 |
74 | 75 |
76 |
77 | 78 |
79 |
80 | 81 | 86 |
87 |
88 | ); 89 | }; 90 | 91 | export default Pricing; 92 | -------------------------------------------------------------------------------- /src/sections/Roadmap.jsx: -------------------------------------------------------------------------------- 1 | import Button from "../components/Button"; 2 | import Heading from "../components/Heading"; 3 | import Section from "../components/Section"; 4 | import Tagline from "../components/Tagline"; 5 | import { check2, grid, loading1, gradient, roadmap1, roadmap2, roadmap3, roadmap4 } from "../assets"; 6 | 7 | const roadmap = [ 8 | { 9 | id: "0", 10 | title: "Voice recognition", 11 | text: "Enable the chatbot to understand and respond to voice commands, making it easier for users to interact with the app hands-free.", 12 | date: "May 2023", 13 | status: "done", 14 | imageUrl: roadmap1, 15 | colorful: true, 16 | }, 17 | { 18 | id: "1", 19 | title: "Gamification", 20 | text: "Add game-like elements, such as badges or leaderboards, to incentivize users to engage with the chatbot more frequently.", 21 | date: "May 2023", 22 | status: "progress", 23 | imageUrl: roadmap2, 24 | }, 25 | { 26 | id: "2", 27 | title: "Chatbot customization", 28 | text: "Allow users to customize the chatbot's appearance and behavior, making it more engaging and fun to interact with.", 29 | date: "May 2023", 30 | status: "done", 31 | imageUrl: roadmap3, 32 | }, 33 | { 34 | id: "3", 35 | title: "Integration with APIs", 36 | text: "Allow the chatbot to access external data sources, such as weather APIs or news APIs, to provide more relevant recommendations.", 37 | date: "May 2023", 38 | status: "progress", 39 | imageUrl: roadmap4, 40 | } 41 | ]; 42 | 43 | const Roadmap = () => ( 44 |
45 |
46 | 47 | 48 |
49 | {roadmap.map((item) => { 50 | const status = item.status === "done" ? "Done" : "In progress"; 51 | 52 | return ( 53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 | {item.date} 61 | 62 |
63 | {status} 64 |
{status}
65 |
66 |
67 | 68 |
69 | {item.title} 70 |
71 |

{item.title}

72 |

{item.text}

73 |
74 |
75 |
76 | ); 77 | })} 78 | 79 |
80 |
81 | 82 |
83 |
84 |
85 | 86 |
87 | 88 |
89 |
90 |
91 | ); 92 | 93 | export default Roadmap; 94 | -------------------------------------------------------------------------------- /src/sections/Services.jsx: -------------------------------------------------------------------------------- 1 | import Section from "../components/Section"; 2 | import Heading from "../components/Heading"; 3 | import { service1, service2, service3, check, openaiWhiteSymbol, gradient, play, loading, recording03, recording01, disc02, chromecast, sliders04 } from "../assets"; 4 | import ChatBubbleWing from "../assets/svg/ChatBubbleWing" 5 | 6 | const openaiServicesIcons = [recording03, recording01, disc02, chromecast, sliders04]; 7 | 8 | const Services = () => { 9 | return ( 10 |
11 |
12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 | 20 |
21 |

Smartest AI

22 |

OpenAI unlocks the potential of AI-powered applications

23 |
    24 |
  • 25 | 26 |

    Photo generating

    27 |
    • 28 |
  • 29 | 30 |

    Photo enhance

    31 |
    • 32 |
  • 33 | 34 |

    Seamless Integration

    35 |
    • 36 |
37 |
38 | 39 |
40 | 41 | AI is generating 42 |
43 |
44 | 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 |

Photo editing

53 |

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

54 |
55 | 56 |
57 | Hey OpenAI, enhance this photo 58 | 59 |
60 |
61 | 62 |
63 |
64 |

Video generation

65 |

The world’s most powerful AI photo and video art generation engine. What will you create?

66 | 67 |
    68 | {openaiServicesIcons.map((item, index) => ( 69 |
  • 70 |
    71 | 72 |
    73 |
    • 74 | ))} 75 |
76 |
77 | 78 |
79 | 80 | 81 |
82 | Video generated! 83 |
84 | OpenAI 85 |
86 |

just now

87 | 88 |
89 |
90 | 91 | 92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | 100 |
101 | 102 |
103 |
104 |
105 |
106 | ); 107 | }; 108 | 109 | export default Services; 110 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | import { fontFamily } from "tailwindcss/defaultTheme"; 3 | 4 | export default { 5 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 6 | safelist: [{ pattern: /rotate-/ }], 7 | theme: { 8 | extend: { 9 | colors: { 10 | color: { 11 | 1: "#AC6AFF", 12 | 2: "#FFC876", 13 | 3: "#FF776F", 14 | 4: "#7ADB78", 15 | 5: "#858DFF", 16 | 6: "#FF98E2", 17 | }, 18 | n: { 19 | 2: "#CAC6DD", 20 | 3: "#ADA8C3", 21 | 4: "#757185", 22 | 6: "#252134", 23 | 8: "#0E0C15" 24 | }, 25 | }, 26 | fontFamily: { 27 | sans: ["var(--font-sora)", ...fontFamily.sans], 28 | code: "var(--font-code)", 29 | grotesk: "var(--font-grotesk)", 30 | }, 31 | letterSpacing: { 32 | tagline: ".15em", 33 | }, 34 | spacing: { 35 | 0.25: "0.0625rem", 36 | 7.5: "1.875rem", 37 | 15: "3.75rem", 38 | }, 39 | transitionDuration: { 40 | DEFAULT: "200ms", 41 | }, 42 | transitionTimingFunction: { 43 | DEFAULT: "linear", 44 | }, 45 | backgroundImage: { 46 | "radial-gradient": "radial-gradient(var(--tw-gradient-stops))", 47 | "conic-gradient": "conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)", 48 | }, 49 | zIndex: { 50 | 1: "1", 51 | 2: "2", 52 | 3: "3", 53 | 4: "4", 54 | 5: "5" 55 | }, 56 | rotate: { 57 | 135: '135deg', 58 | 225: '225deg', 59 | 270: '270deg', 60 | 315: '315deg' 61 | } 62 | } 63 | } 64 | }; 65 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------