├── .eslintrc.json
├── .github
    └── workflows
    │   └── nextjs.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .vscode
    ├── settings.json
    └── tailwind.json
├── README.md
├── Screenshot.png
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── assets
    │   └── lottie
    │   │   ├── click.lottie
    │   │   ├── stars.lottie
    │   │   └── vroom.lottie
    ├── next.svg
    └── vercel.svg
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── layout.tsx
    │   └── page.tsx
    ├── assets
    │   ├── avatar-1.png
    │   ├── avatar-2.png
    │   ├── avatar-3.png
    │   ├── avatar-4.png
    │   ├── grid-lines.png
    │   ├── icon-click.svg
    │   ├── icon-guage.svg
    │   ├── icon-menu.svg
    │   ├── icon-stars.svg
    │   ├── index.ts
    │   ├── logo-acme.png
    │   ├── logo-apex.png
    │   ├── logo-celestial.png
    │   ├── logo-echo.png
    │   ├── logo-pulse.png
    │   ├── logo-quantum.png
    │   ├── logo.svg
    │   ├── product-image.png
    │   ├── social-instagram.svg
    │   ├── social-x.svg
    │   ├── social-youtube.svg
    │   └── stars.png
    ├── components
    │   ├── .gitkeep
    │   ├── Button.tsx
    │   └── FeatureTab.tsx
    ├── data
    │   └── data.ts
    ├── hooks
    │   └── useRelativeMousePosition.ts
    ├── sections
    │   ├── CallToAction.tsx
    │   ├── Features.tsx
    │   ├── Footer.tsx
    │   ├── Header.tsx
    │   ├── Hero.tsx
    │   ├── LogoTicker.tsx
    │   └── Testimonials.tsx
    └── styles
    │   └── globals.css
├── tailwind.config.ts
├── tsconfig.json
└── yarn.lock


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "extends": ["next/core-web-vitals", "eslint:recommended"],
 4 |   "overrides": [
 5 |     {
 6 |       "files": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
 7 |     }
 8 |   ],
 9 |   "rules": {
10 |     "no-unused-vars": "warn",
11 |     "no-console": "warn",
12 |     "no-debugger": "error",
13 |     "no-alert": "error",
14 |     "no-eval": "error",
15 |     "no-empty": "error",
16 |     "no-undef": "warn",
17 |     "no-var": "error",
18 |     "eqeqeq": ["error", "always"],
19 |     "curly": "error",
20 |     "strict": ["error", "global"]
21 |   },
22 |   "parserOptions": {
23 |     "ecmaVersion": 2020,
24 |     "sourceType": "module"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/.github/workflows/nextjs.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages
 2 | #
 3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started
 4 | #
 5 | name: Deploy Next.js site to Pages
 6 | 
 7 | on:
 8 |   # Runs on pushes targeting the default branch
 9 |   push:
10 |     branches: ["main"]
11 | 
12 |   # Allows you to run this workflow manually from the Actions tab
13 |   workflow_dispatch:
14 | 
15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16 | permissions:
17 |   contents: read
18 |   pages: write
19 |   id-token: write
20 | 
21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
23 | concurrency:
24 |   group: "pages"
25 |   cancel-in-progress: false
26 | 
27 | jobs:
28 |   # Build job
29 |   build:
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - name: Detect package manager
35 |         id: detect-package-manager
36 |         run: |
37 |           if [ -f "${{ github.workspace }}/yarn.lock" ]; then
38 |             echo "manager=yarn" >> $GITHUB_OUTPUT
39 |             echo "command=install" >> $GITHUB_OUTPUT
40 |             echo "runner=yarn" >> $GITHUB_OUTPUT
41 |             exit 0
42 |           elif [ -f "${{ github.workspace }}/package.json" ]; then
43 |             echo "manager=npm" >> $GITHUB_OUTPUT
44 |             echo "command=ci" >> $GITHUB_OUTPUT
45 |             echo "runner=npx --no-install" >> $GITHUB_OUTPUT
46 |             exit 0
47 |           else
48 |             echo "Unable to determine package manager"
49 |             exit 1
50 |           fi
51 |       - name: Setup Node
52 |         uses: actions/setup-node@v4
53 |         with:
54 |           node-version: "20"
55 |           cache: ${{ steps.detect-package-manager.outputs.manager }}
56 |       - name: Setup Pages
57 |         uses: actions/configure-pages@v5
58 |         with:
59 |           # Automatically inject basePath in your Next.js configuration file and disable
60 |           # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
61 |           #
62 |           # You may remove this line if you want to manage the configuration yourself.
63 |           static_site_generator: next
64 |       - name: Restore cache
65 |         uses: actions/cache@v4
66 |         with:
67 |           path: |
68 |             .next/cache
69 |           # Generate a new cache whenever packages or source files change.
70 |           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
71 |           # If source files changed but packages didn't, rebuild from a prior cache.
72 |           restore-keys: |
73 |             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
74 |       - name: Install dependencies
75 |         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
76 |       - name: Build with Next.js
77 |         run: ${{ steps.detect-package-manager.outputs.runner }} next build
78 |       - name: Upload artifact
79 |         uses: actions/upload-pages-artifact@v3
80 |         with:
81 |           path: ./out
82 | 
83 |   # Deployment job
84 |   deploy:
85 |     environment:
86 |       name: github-pages
87 |       url: ${{ steps.deployment.outputs.page_url }}
88 |     runs-on: ubuntu-latest
89 |     needs: build
90 |     steps:
91 |       - name: Deploy to GitHub Pages
92 |         id: deployment
93 |         uses: actions/deploy-pages@v4
94 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | **/.git
2 | **/node_modules
3 | **/package.json
4 | **/package-lock.json


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editorconfig": true,
3 |   "singleQuote": false,
4 |   "jsxSingleQuote": false,
5 |   "trailingComma": "all",
6 |   "quoteProps": "as-needed"
7 | }
8 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "scss.lint.unknownAtRules": "ignore",
3 |   "css.lint.unknownAtRules": "ignore",
4 |   "files.associations": {
5 |     "*.css": "tailwindcss"
6 |   },
7 |   "css.customData": [".vscode/tailwind.json"]
8 | }
9 | 


--------------------------------------------------------------------------------
/.vscode/tailwind.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 1.1,
 3 |   "atDirectives": [
 4 |     {
 5 |       "name": "@tailwind",
 6 |       "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
 7 |       "references": [
 8 |         {
 9 |           "name": "Tailwind Documentation",
10 |           "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
11 |         }
12 |       ]
13 |     },
14 |     {
15 |       "name": "@apply",
16 |       "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
17 |       "references": [
18 |         {
19 |           "name": "Tailwind Documentation",
20 |           "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
21 |         }
22 |       ]
23 |     },
24 |     {
25 |       "name": "@responsive",
26 |       "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
27 |       "references": [
28 |         {
29 |           "name": "Tailwind Documentation",
30 |           "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
31 |         }
32 |       ]
33 |     },
34 |     {
35 |       "name": "@screen",
36 |       "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
37 |       "references": [
38 |         {
39 |           "name": "Tailwind Documentation",
40 |           "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
41 |         }
42 |       ]
43 |     },
44 |     {
45 |       "name": "@variants",
46 |       "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
47 |       "references": [
48 |         {
49 |           "name": "Tailwind Documentation",
50 |           "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
51 |         }
52 |       ]
53 |     }
54 |   ]
55 | }
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AI SEO
 2 | 
 3 | <img src="Screenshot.png" alt="AI SEO screenshot" />
 4 | 
 5 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 6 | 
 7 | ## Features
 8 | 
 9 | - Modern, dark design
10 | - Animated with Framer Motion
11 | - Responsive layout
12 | - SEO-optimized
13 | - Cross-Browser Compatibility
14 | - Accessibility
15 | - Easy to Customize
16 | 
17 | ## Getting Started
18 | 
19 | First, To install the project dependencies, run:
20 | 
21 | ```bash
22 | npm install
23 | # or
24 | yarn install
25 | # or
26 | pnpm install
27 | # or
28 | bun install
29 | ```
30 | 
31 | ## Usage
32 | 
33 | After installation, you can start the development server:
34 | 
35 | ```bash
36 | npm run dev
37 | # or
38 | yarn dev
39 | # or
40 | pnpm dev
41 | # or
42 | bun dev
43 | ```
44 | 
45 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
46 | 
47 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
48 | 
49 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load DM_Sans, a custom Google Font.
50 | 
51 | ## Design
52 | 
53 | You can view the design for this project on Figma: [AI Startup Landing Page](https://www.figma.com/design/XpZQogjrnUSWYceMccagvu/AI-Startup-Landing-Page?node-id=4007-684&t=7L89agO6vZJulren-1)
54 | 
55 | ## Contributing
56 | 
57 | Contributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.
58 | 
59 | ## License
60 | 
61 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
62 | 


--------------------------------------------------------------------------------
/Screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/Screenshot.png


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | 
 3 | const nextConfig = {
 4 |   output: "standalone",
 5 |   webpack(config) {
 6 |     // Grab the existing rule that handles SVG imports
 7 |     const fileLoaderRule = config.module.rules.find((rule) =>
 8 |       rule.test?.test?.(".svg"),
 9 |     );
10 | 
11 |     config.module.rules.push(
12 |       // Reapply the existing rule, but only for svg imports ending in ?url
13 |       {
14 |         ...fileLoaderRule,
15 |         test: /\.svg$/i,
16 |         resourceQuery: /url/, // *.svg?url
17 |       },
18 |       // Convert all other *.svg imports to React components
19 |       {
20 |         test: /\.svg$/i,
21 |         issuer: fileLoaderRule.issuer,
22 |         resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
23 |         use: ["@svgr/webpack"],
24 |       },
25 |     );
26 | 
27 |     // Modify the file loader rule to ignore *.svg, since we have it handled now.
28 |     fileLoaderRule.exclude = /\.svg$/i;
29 | 
30 |     return config;
31 |   },
32 | };
33 | 
34 | export default nextConfig;
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-seo",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@dotlottie/react-player": "^1.6.19",
13 |     "@lottiefiles/dotlottie-react": "^0.8.7",
14 |     "framer-motion": "^11.3.28",
15 |     "next": "14.2.5",
16 |     "react": "^18",
17 |     "react-dom": "^18",
18 |     "sharp": "^0.33.4"
19 |   },
20 |   "devDependencies": {
21 |     "@svgr/webpack": "^8.1.0",
22 |     "@types/node": "^20",
23 |     "@types/react": "^18",
24 |     "@types/react-dom": "^18",
25 |     "eslint": "^8",
26 |     "eslint-config-next": "14.2.5",
27 |     "postcss": "^8",
28 |     "tailwind-merge": "^2.5.2",
29 |     "tailwindcss": "^3.4.1",
30 |     "typescript": "^5"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/public/assets/lottie/click.lottie:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/public/assets/lottie/click.lottie


--------------------------------------------------------------------------------
/public/assets/lottie/stars.lottie:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/public/assets/lottie/stars.lottie


--------------------------------------------------------------------------------
/public/assets/lottie/vroom.lottie:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/public/assets/lottie/vroom.lottie


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import type { Metadata } from "next";
 3 | import { Inter } from "next/font/google";
 4 | import { twMerge } from "tailwind-merge";
 5 | import "@/styles/globals.css";
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] });
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: "AI SEO | AI Startup Landing Page",
11 |   description: "A landing page for an AI startup",
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: Readonly<{
17 |   children: React.ReactNode;
18 | }>) {
19 |   return (
20 |     <html lang="en">
21 |       <body
22 |         className={twMerge(inter.className, "bg-black text-white antialiased")}
23 |         suppressHydrationWarning
24 |       >
25 |         {children}
26 |       </body>
27 |     </html>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { CallToAction } from "@/sections/CallToAction";
 2 | import { Features } from "@/sections/Features";
 3 | import { Footer } from "@/sections/Footer";
 4 | import { Header } from "@/sections/Header";
 5 | import { Hero } from "@/sections/Hero";
 6 | import { LogoTicker } from "@/sections/LogoTicker";
 7 | import { Testimonials } from "@/sections/Testimonials";
 8 | 
 9 | export default function Home() {
10 |   return (
11 |     <main>
12 |       <Header />
13 |       <Hero />
14 |       <LogoTicker />
15 |       <Features />
16 |       <Testimonials />
17 |       <CallToAction />
18 |       <Footer />
19 |     </main>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/assets/avatar-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/avatar-1.png


--------------------------------------------------------------------------------
/src/assets/avatar-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/avatar-2.png


--------------------------------------------------------------------------------
/src/assets/avatar-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/avatar-3.png


--------------------------------------------------------------------------------
/src/assets/avatar-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/avatar-4.png


--------------------------------------------------------------------------------
/src/assets/grid-lines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/grid-lines.png


--------------------------------------------------------------------------------
/src/assets/icon-click.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" height="256" width="256" focusable="false" class="h-5 w-5"><path d="M224.15,179.17l-46.82-46.82,37.92-13.51c.26-.09.51-.19.76-.3a20,20,0,0,0-1.76-37.27L54.16,29A20,20,0,0,0,29,54.16L81.27,214.24A20,20,0,0,0,118.54,216c.11-.25.21-.5.3-.76l13.51-37.92,46.83,46.82a20,20,0,0,0,28.28,0l16.69-16.68A20,20,0,0,0,224.15,179.17Zm-30.83,25.17-48.48-48.48A20,20,0,0,0,130.7,150a20.47,20.47,0,0,0-3.73.35A20,20,0,0,0,112.35,162c-.11.25-.2.5-.3.76L100.4,195.5,54.29,54.29,195.5,100.4l-32.71,11.65c-.25.09-.51.19-.76.3a20,20,0,0,0-6.16,32.48h0l48.48,48.48ZM84,16V12a12,12,0,0,1,24,0v4a12,12,0,0,1-24,0ZM12,108a12,12,0,0,1,0-24h4a12,12,0,0,1,0,24ZM120.62,24.21l4-12a12,12,0,0,1,22.77,7.58l-4,12a12,12,0,0,1-22.77-7.58Zm-81.23,104a12,12,0,0,1-7.59,15.17l-12,4a12,12,0,1,1-7.59-22.76l12-4A12,12,0,0,1,39.39,128.21Z" fill="currentColor"></path></svg>


--------------------------------------------------------------------------------
/src/assets/icon-guage.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256" focusable="false" class="h-5 w-5"><path d="M209.88,69.83A115.19,115.19,0,0,0,128,36h-.41C63.85,36.22,12,88.76,12,153.13V176a20,20,0,0,0,20,20H224a20,20,0,0,0,20-20V152A115.25,115.25,0,0,0,209.88,69.83ZM220,172H127.32l46.44-65A12,12,0,1,0,154.24,93L97.82,172H36V153.13c0-1.72,0-3.43.14-5.13H56a12,12,0,0,0,0-24H40.62c10.91-33.39,40-58.52,75.38-63.21V80a12,12,0,0,0,24,0V60.8A92,92,0,0,1,215.66,124H200a12,12,0,0,0,0,24h19.9c.06,1.33.1,2.66.1,4Z" fill="currentColor"></path></svg>


--------------------------------------------------------------------------------
/src/assets/icon-menu.svg:
--------------------------------------------------------------------------------
1 | <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M28.5 16C28.5 16.2652 28.3946 16.5196 28.2071 16.7071C28.0196 16.8946 27.7652 17 27.5 17H5.5C5.23478 17 4.98043 16.8946 4.79289 16.7071C4.60536 16.5196 4.5 16.2652 4.5 16C4.5 15.7348 4.60536 15.4804 4.79289 15.2929C4.98043 15.1054 5.23478 15 5.5 15H27.5C27.7652 15 28.0196 15.1054 28.2071 15.2929C28.3946 15.4804 28.5 15.7348 28.5 16ZM5.5 9H27.5C27.7652 9 28.0196 8.89464 28.2071 8.70711C28.3946 8.51957 28.5 8.26522 28.5 8C28.5 7.73478 28.3946 7.48043 28.2071 7.29289C28.0196 7.10536 27.7652 7 27.5 7H5.5C5.23478 7 4.98043 7.10536 4.79289 7.29289C4.60536 7.48043 4.5 7.73478 4.5 8C4.5 8.26522 4.60536 8.51957 4.79289 8.70711C4.98043 8.89464 5.23478 9 5.5 9ZM27.5 23H5.5C5.23478 23 4.98043 23.1054 4.79289 23.2929C4.60536 23.4804 4.5 23.7348 4.5 24C4.5 24.2652 4.60536 24.5196 4.79289 24.7071C4.98043 24.8946 5.23478 25 5.5 25H27.5C27.7652 25 28.0196 24.8946 28.2071 24.7071C28.3946 24.5196 28.5 24.2652 28.5 24C28.5 23.7348 28.3946 23.4804 28.2071 23.2929C28.0196 23.1054 27.7652 23 27.5 23Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/assets/icon-stars.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" height="256" width="256" focusable="false" class="h-5 w-5"><path d="M199,125.31l-49.88-18.39L130.69,57a19.92,19.92,0,0,0-37.38,0L74.92,106.92,25,125.31a19.92,19.92,0,0,0,0,37.38l49.88,18.39L93.31,231a19.92,19.92,0,0,0,37.38,0l18.39-49.88L199,162.69a19.92,19.92,0,0,0,0-37.38Zm-63.38,35.16a12,12,0,0,0-7.11,7.11L112,212.28l-16.47-44.7a12,12,0,0,0-7.11-7.11L43.72,144l44.7-16.47a12,12,0,0,0,7.11-7.11L112,75.72l16.47,44.7a12,12,0,0,0,7.11,7.11L180.28,144ZM140,40a12,12,0,0,1,12-12h12V16a12,12,0,0,1,24,0V28h12a12,12,0,0,1,0,24H188V64a12,12,0,0,1-24,0V52H152A12,12,0,0,1,140,40ZM252,88a12,12,0,0,1-12,12h-4v4a12,12,0,0,1-24,0v-4h-4a12,12,0,0,1,0-24h4V72a12,12,0,0,1,24,0v4h4A12,12,0,0,1,252,88Z" fill="currentColor"></path></svg>


--------------------------------------------------------------------------------
/src/assets/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Avatar1 } from "@/assets/avatar-1.png";
 2 | export { default as Avatar2 } from "@/assets/avatar-2.png";
 3 | export { default as Avatar3 } from "@/assets/avatar-3.png";
 4 | export { default as Avatar4 } from "@/assets/avatar-4.png";
 5 | export { default as GridLines } from "@/assets/grid-lines.png";
 6 | export { default as ClickIcon } from "@/assets/icon-click.svg";
 7 | export { default as GuageIcon } from "@/assets/icon-guage.svg";
 8 | export { default as MenuIcon } from "@/assets/icon-menu.svg";
 9 | export { default as StarsIcon } from "@/assets/icon-stars.svg";
10 | export { default as AcmeLogo } from "@/assets/logo-acme.png";
11 | export { default as ApexLogo } from "@/assets/logo-apex.png";
12 | export { default as CelestialLogo } from "@/assets/logo-celestial.png";
13 | export { default as EchoLogo } from "@/assets/logo-echo.png";
14 | export { default as PulseLogo } from "@/assets/logo-pulse.png";
15 | export { default as QuantumLogo } from "@/assets/logo-quantum.png";
16 | export { default as Logo } from "@/assets/logo.svg";
17 | export { default as ProductImage } from "@/assets/product-image.png";
18 | export { default as SocialInstagram } from "@/assets/social-instagram.svg";
19 | export { default as SocialX } from "@/assets/social-x.svg";
20 | export { default as SocialYoutube } from "@/assets/social-youtube.svg";
21 | export { default as StarsImage } from "@/assets/stars.png";
22 | 


--------------------------------------------------------------------------------
/src/assets/logo-acme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/logo-acme.png


--------------------------------------------------------------------------------
/src/assets/logo-apex.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/logo-apex.png


--------------------------------------------------------------------------------
/src/assets/logo-celestial.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/logo-celestial.png


--------------------------------------------------------------------------------
/src/assets/logo-echo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/logo-echo.png


--------------------------------------------------------------------------------
/src/assets/logo-pulse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/logo-pulse.png


--------------------------------------------------------------------------------
/src/assets/logo-quantum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/logo-quantum.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M0 60C38.1371 60 60 38.1371 60 0C60 38.1371 81.8629 60 120 60C81.8629 60 60 81.8629 60 120C60 81.8629 38.1371 60 0 60Z" fill="currentColor"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/assets/product-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/product-image.png


--------------------------------------------------------------------------------
/src/assets/social-instagram.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | 
3 | <path d="M16.5 2.75H7.5C6.10807 2.75149 4.77358 3.30509 3.78933 4.28933C2.80509 5.27358 2.25149 6.60807 2.25 8V17C2.25149 18.3919 2.80509 19.7264 3.78933 20.7107C4.77358 21.6949 6.10807 22.2485 7.5 22.25H16.5C17.8919 22.2485 19.2264 21.6949 20.2107 20.7107C21.1949 19.7264 21.7485 18.3919 21.75 17V8C21.7485 6.60807 21.1949 5.27358 20.2107 4.28933C19.2264 3.30509 17.8919 2.75149 16.5 2.75ZM12 17C11.11 17 10.24 16.7361 9.49993 16.2416C8.75991 15.7471 8.18314 15.0443 7.84254 14.2221C7.50195 13.3998 7.41283 12.495 7.58647 11.6221C7.7601 10.7492 8.18868 9.94736 8.81802 9.31802C9.44736 8.68868 10.2492 8.2601 11.1221 8.08647C11.995 7.91283 12.8998 8.00195 13.7221 8.34254C14.5443 8.68314 15.2471 9.25991 15.7416 9.99993C16.2361 10.74 16.5 11.61 16.5 12.5C16.4988 13.6931 16.0243 14.837 15.1806 15.6806C14.337 16.5243 13.1931 16.9988 12 17ZM17.625 8C17.4025 8 17.185 7.93402 17 7.8104C16.815 7.68679 16.6708 7.51109 16.5856 7.30552C16.5005 7.09995 16.4782 6.87375 16.5216 6.65552C16.565 6.43729 16.6722 6.23684 16.8295 6.0795C16.9868 5.92217 17.1873 5.81502 17.4055 5.77162C17.6238 5.72821 17.85 5.75049 18.0555 5.83564C18.2611 5.92078 18.4368 6.06498 18.5604 6.24998C18.684 6.43499 18.75 6.6525 18.75 6.875C18.75 7.17337 18.6315 7.45952 18.4205 7.6705C18.2095 7.88147 17.9234 8 17.625 8ZM15 12.5C15 13.0933 14.8241 13.6734 14.4944 14.1667C14.1648 14.6601 13.6962 15.0446 13.1481 15.2716C12.5999 15.4987 11.9967 15.5581 11.4147 15.4424C10.8328 15.3266 10.2982 15.0409 9.87868 14.6213C9.45912 14.2018 9.1734 13.6672 9.05764 13.0853C8.94189 12.5033 9.0013 11.9001 9.22836 11.3519C9.45542 10.8038 9.83994 10.3352 10.3333 10.0056C10.8266 9.67595 11.4067 9.5 12 9.5C12.7956 9.5 13.5587 9.81607 14.1213 10.3787C14.6839 10.9413 15 11.7044 15 12.5Z" fill="currentColor"/>
4 | 
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/assets/social-x.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M20.1564 21.1109C20.0918 21.2286 19.9968 21.3267 19.8814 21.3951C19.766 21.4636 19.6343 21.4998 19.5001 21.5H15.0001C14.8739 21.5 14.7497 21.4681 14.6391 21.4073C14.5285 21.3465 14.435 21.2587 14.3673 21.1522L10.5714 15.1869L5.05512 21.2544C4.92065 21.3988 4.73466 21.4845 4.53748 21.4927C4.34029 21.5009 4.14781 21.4311 4.00176 21.2984C3.8557 21.1657 3.76785 20.9807 3.75725 20.7836C3.74665 20.5866 3.81415 20.3933 3.94512 20.2456L9.73606 13.8706L3.86731 4.65313C3.79503 4.53973 3.75457 4.40898 3.75016 4.27458C3.74575 4.14018 3.77756 4.00707 3.84226 3.88918C3.90695 3.77129 4.00215 3.67296 4.11789 3.60449C4.23363 3.53603 4.36565 3.49993 4.50012 3.5H9.00012C9.12635 3.50004 9.25052 3.53194 9.36114 3.59274C9.47176 3.65353 9.56524 3.74127 9.63293 3.84781L13.4289 9.81312L18.9451 3.74562C19.0796 3.60117 19.2656 3.51555 19.4628 3.50731C19.6599 3.49907 19.8524 3.56888 19.9985 3.70161C20.1445 3.83435 20.2324 4.01929 20.243 4.21636C20.2536 4.41343 20.1861 4.60674 20.0551 4.75438L14.2642 11.1247L20.1329 20.3478C20.2048 20.4613 20.2449 20.5919 20.249 20.7262C20.2531 20.8604 20.2211 20.9933 20.1564 21.1109Z" fill="currentColor"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/assets/social-youtube.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M21.9684 7.0175C21.8801 6.67189 21.7109 6.35224 21.4747 6.08491C21.2385 5.81758 20.9421 5.61024 20.61 5.48C17.3962 4.23875 12.2812 4.25 12 4.25C11.7188 4.25 6.60375 4.23875 3.39 5.48C3.0579 5.61024 2.76153 5.81758 2.52534 6.08491C2.28915 6.35224 2.1199 6.67189 2.03156 7.0175C1.78875 7.95313 1.5 9.66313 1.5 12.5C1.5 15.3369 1.78875 17.0469 2.03156 17.9825C2.11977 18.3283 2.28895 18.6481 2.52515 18.9156C2.76136 19.1831 3.0578 19.3906 3.39 19.5209C6.46875 20.7088 11.2875 20.75 11.9381 20.75H12.0619C12.7125 20.75 17.5341 20.7088 20.61 19.5209C20.9422 19.3906 21.2386 19.1831 21.4748 18.9156C21.711 18.6481 21.8802 18.3283 21.9684 17.9825C22.2113 17.045 22.5 15.3369 22.5 12.5C22.5 9.66313 22.2113 7.95313 21.9684 7.0175ZM15.0553 13.1113L11.3053 15.7363C11.1931 15.8148 11.0616 15.8612 10.9249 15.8703C10.7883 15.8794 10.6517 15.851 10.5301 15.788C10.4085 15.725 10.3064 15.6299 10.235 15.513C10.1636 15.3962 10.1256 15.262 10.125 15.125V9.875C10.125 9.7378 10.1627 9.60324 10.2339 9.48597C10.3051 9.36869 10.4071 9.27319 10.5289 9.20987C10.6506 9.14655 10.7873 9.11783 10.9242 9.12683C11.0611 9.13584 11.1929 9.18222 11.3053 9.26094L15.0553 11.8859C15.154 11.9551 15.2345 12.047 15.2901 12.1539C15.3457 12.2608 15.3747 12.3795 15.3747 12.5C15.3747 12.6205 15.3457 12.7392 15.2901 12.8461C15.2345 12.953 15.154 13.0449 15.0553 13.1141V13.1113Z" fill="currentColor"/>
3 | </svg>
4 | 
5 | 


--------------------------------------------------------------------------------
/src/assets/stars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/assets/stars.png


--------------------------------------------------------------------------------
/src/components/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faridvatani/ai-seo/cbe2a5060e5b442024be778e067c70d075ab8b39/src/components/.gitkeep


--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, PropsWithChildren } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | interface ButtonProps {
 5 |   classname?: string;
 6 | }
 7 | 
 8 | export const Button: FC<PropsWithChildren<ButtonProps>> = ({
 9 |   children,
10 |   classname,
11 | }) => {
12 |   return (
13 |     <button
14 |       type="button"
15 |       className={twMerge(
16 |         "relative py-2 px-3 text-sm font-medium rounded-lg bg-gradient-to-b from-[#190d2e] to-[#4a208a] shadow-[0px_0px_12px_#8c45ff]",
17 |         classname,
18 |       )}
19 |     >
20 |       <div className="absolute inset-0">
21 |         <div className="absolute border border-white/20 inset-0 rounded-lg [mask-image:linear-gradient(to_bottom,black,transparent)]"></div>
22 |         <div className="absolute border border-white/40 inset-0 rounded-lg [mask-image:linear-gradient(to_top,black,transparent)]"></div>
23 |         <div className="absolute inset-0 shadow-[0_0_10px_rgb(140,69,255,0.7)_inset] rounded-lg"></div>
24 |       </div>
25 |       <span>{children}</span>
26 |     </button>
27 |   );
28 | };
29 | 


--------------------------------------------------------------------------------
/src/components/FeatureTab.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef, useEffect } from "react";
 2 | import {
 3 |   DotLottieCommonPlayer,
 4 |   DotLottiePlayer,
 5 | } from "@dotlottie/react-player";
 6 | import {
 7 |   animate,
 8 |   motion,
 9 |   useMotionTemplate,
10 |   useMotionValue,
11 |   ValueAnimationTransition,
12 | } from "framer-motion";
13 | import { ComponentPropsWithoutRef } from "react";
14 | import { featuresTabs } from "@/data/data";
15 | 
16 | const FeatureTab = (
17 |   props: (typeof featuresTabs)[number] &
18 |     ComponentPropsWithoutRef<"div"> & { selected: boolean },
19 | ) => {
20 |   const tabRef = useRef<HTMLDivElement>(null);
21 |   const dotLottieRef = useRef<DotLottieCommonPlayer>(null);
22 |   const xPercentage = useMotionValue(0);
23 |   const yPercentage = useMotionValue(0);
24 |   const maskImage = useMotionTemplate`radial-gradient(80px 80px at ${xPercentage}% ${yPercentage}%,black,transparent)`;
25 | 
26 |   useEffect(() => {
27 |     if (!tabRef.current || !props.selected) {
28 |       return;
29 |     }
30 |     xPercentage.set(0);
31 |     yPercentage.set(0);
32 | 
33 |     const { height, width } = tabRef.current.getBoundingClientRect();
34 |     const circumference = height * 2 + width * 2;
35 | 
36 |     const times = [
37 |       0,
38 |       width / circumference,
39 |       (width + height) / circumference,
40 |       (width * 2 - height) / circumference,
41 |       1,
42 |     ];
43 | 
44 |     const options: ValueAnimationTransition = {
45 |       times,
46 |       duration: 4,
47 |       repeat: Infinity,
48 |       ease: "linear",
49 |       repeatType: "loop",
50 |     };
51 | 
52 |     animate(xPercentage, [0, 100, 100, 0, 0], options);
53 |     animate(yPercentage, [0, 0, 100, 100, 0], options);
54 |   }, [props.selected, xPercentage, yPercentage]);
55 | 
56 |   const handleTabHover = () => {
57 |     if (dotLottieRef.current === null) {
58 |       return;
59 |     }
60 |     dotLottieRef.current.seek(0);
61 |     dotLottieRef.current?.play();
62 |   };
63 | 
64 |   return (
65 |     <div
66 |       ref={tabRef}
67 |       onMouseEnter={handleTabHover}
68 |       onClick={props.onClick}
69 |       className="relative flex gap-2.5 p-2.5 lg:flex-1 items-center border border-white/15 rounded-xl cursor-pointer"
70 |     >
71 |       {props.selected && (
72 |         <motion.div
73 |           style={{
74 |             maskImage: maskImage,
75 |           }}
76 |           className="absolute inset-0 -m-px border border-[#A369FF] rounded-xl"
77 |         ></motion.div>
78 |       )}
79 |       <div className="inline-flex justify-center items-center size-12 border border-white/15 rounded-lg">
80 |         <DotLottiePlayer
81 |           ref={dotLottieRef}
82 |           src={props.icon}
83 |           className="size-5"
84 |           autoplay
85 |         />
86 |       </div>
87 |       <span className="font-medium">{props.title}</span>
88 |       {props.isNew && (
89 |         <span className="px-2 py-0.5 text-xs bg-[#8c44ff] text-black font-semibold rounded-full">
90 |           new
91 |         </span>
92 |       )}
93 |     </div>
94 |   );
95 | };
96 | 
97 | export default FeatureTab;
98 | 


--------------------------------------------------------------------------------
/src/data/data.ts:
--------------------------------------------------------------------------------
 1 | import { Avatar1, Avatar2, Avatar3, Avatar4 } from "@/assets";
 2 | 
 3 | export const featuresTabs = [
 4 |   {
 5 |     icon: "./assets/lottie/vroom.lottie",
 6 |     title: "User-friendly dashboard",
 7 |     isNew: false,
 8 |     backgroundPositionX: 0,
 9 |     backgroundPositionY: 0,
10 |     backgroundSizeX: 150,
11 |   },
12 |   {
13 |     icon: "./assets/lottie/click.lottie",
14 |     title: "One-click optimization",
15 |     isNew: false,
16 |     backgroundPositionX: 98,
17 |     backgroundPositionY: 100,
18 |     backgroundSizeX: 135,
19 |   },
20 |   {
21 |     icon: "./assets/lottie/stars.lottie",
22 |     title: "Smart keyword generator",
23 |     isNew: true,
24 |     backgroundPositionX: 100,
25 |     backgroundPositionY: 27,
26 |     backgroundSizeX: 177,
27 |   },
28 | ];
29 | 
30 | export const testimonials = [
31 |   {
32 |     text: "“This product has completely transformed how I manage my projects and deadlines”",
33 |     name: "Sophia Perez",
34 |     title: "Director @ Quantum",
35 |     avatarImg: Avatar1,
36 |   },
37 |   {
38 |     text: "“These AI tools have completely revolutionized our SEO entire strategy overnight”",
39 |     name: "Jamie Lee",
40 |     title: "Founder @ Pulse",
41 |     avatarImg: Avatar2,
42 |   },
43 |   {
44 |     text: "“The user interface is so intuitive and easy to use, it has saved us countless hours”",
45 |     name: "Alisa Hester",
46 |     title: "Product @ Innovate",
47 |     avatarImg: Avatar3,
48 |   },
49 |   {
50 |     text: "“Our team's productivity has increased significantly since we started using this tool”",
51 |     name: "Alec Whitten",
52 |     title: "CTO @ Tech Solutions",
53 |     avatarImg: Avatar4,
54 |   },
55 | ];
56 | 


--------------------------------------------------------------------------------
/src/hooks/useRelativeMousePosition.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, RefObject } from "react";
 2 | import { useMotionValue } from "framer-motion";
 3 | 
 4 | const useRelativeMousePosition = (to: RefObject<HTMLElement>) => {
 5 |   const mouseX = useMotionValue(0);
 6 |   const mouseY = useMotionValue(0);
 7 | 
 8 |   const updateMousePosition = (event: MouseEvent) => {
 9 |     if (!to.current) {
10 |       return;
11 |     }
12 |     const { top, left } = to.current.getBoundingClientRect();
13 |     mouseX.set(event.x - left);
14 |     mouseY.set(event.y - top);
15 |   };
16 | 
17 |   useEffect(() => {
18 |     window.addEventListener("mousemove", updateMousePosition);
19 | 
20 |     return () => {
21 |       window.removeEventListener("mousemove", updateMousePosition);
22 |     };
23 |   }, []);
24 | 
25 |   return [mouseX, mouseY];
26 | };
27 | 
28 | export default useRelativeMousePosition;
29 | 


--------------------------------------------------------------------------------
/src/sections/CallToAction.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Button } from "@/components/Button";
 3 | import { StarsImage, GridLines } from "@/assets";
 4 | import {
 5 |   motion,
 6 |   useMotionTemplate,
 7 |   useScroll,
 8 |   useTransform,
 9 | } from "framer-motion";
10 | import { useRef } from "react";
11 | import useRelativeMousePosition from "@/hooks/useRelativeMousePosition";
12 | 
13 | export const CallToAction = () => {
14 |   const sectionRef = useRef<HTMLElement>(null);
15 |   const borderedDivRef = useRef<HTMLDivElement>(null);
16 |   const { scrollYProgress } = useScroll({
17 |     target: sectionRef,
18 |     offset: ["start end", "end start"],
19 |   });
20 | 
21 |   const backgroundPositionY = useTransform(
22 |     scrollYProgress,
23 |     [0, 1],
24 |     [-300, 300],
25 |   );
26 | 
27 |   const [mouseX, mouseY] = useRelativeMousePosition(borderedDivRef);
28 |   const maskImage = useMotionTemplate`radial-gradient(50% 50% at ${mouseX}px ${mouseY}px, black, transparent)`;
29 | 
30 |   return (
31 |     <section ref={sectionRef} className="py-20 md:py-24">
32 |       <div className="container">
33 |         <motion.div
34 |           ref={borderedDivRef}
35 |           animate={{
36 |             backgroundPositionX: StarsImage.width,
37 |           }}
38 |           transition={{
39 |             repeat: Infinity,
40 |             duration: 60,
41 |             ease: "linear",
42 |           }}
43 |           style={{
44 |             backgroundPositionY,
45 |             backgroundImage: `url(${StarsImage.src})`,
46 |           }}
47 |           className="relative py-24 border border-white/15 rounded-xl overflow-hidden group"
48 |         >
49 |           <div
50 |             className="absolute inset-0 bg-[rgb(74,32,138)] bg-blend-overlay [mask-image:radial-gradient(50%_50%_at_50%_35%,black,transparent)] group-hover:opacity-0 transition duration-700"
51 |             style={{
52 |               backgroundImage: `url(${GridLines.src})`,
53 |             }}
54 |           ></div>
55 |           <motion.div
56 |             className="absolute inset-0 bg-[rgb(74,32,138)] bg-blend-overlay opacity-0 group-hover:opacity-100 transition duration-700"
57 |             style={{
58 |               maskImage,
59 |               backgroundImage: `url(${GridLines.src})`,
60 |             }}
61 |           ></motion.div>
62 |           <div className="relative">
63 |             <h2 className="text-5xl md:text-6xl text-center font-medium tracking-tighter max-w-sm mx-auto">
64 |               AI-driven SEO for everyone.
65 |             </h2>
66 |             <p className="text-lg md:text-xl text-center text-white/70 tracking-tight px-5 mt-5 max-w-xs mx-auto">
67 |               Achieve clear, impactful results without the complexity.
68 |             </p>
69 |             <div className="flex justify-center mt-8">
70 |               <Button>Join waitlist</Button>
71 |             </div>
72 |           </div>
73 |         </motion.div>
74 |       </div>
75 |     </section>
76 |   );
77 | };
78 | 


--------------------------------------------------------------------------------
/src/sections/Features.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { ProductImage } from "@/assets";
 3 | import { featuresTabs } from "@/data/data";
 4 | import {
 5 |   animate,
 6 |   motion,
 7 |   useMotionTemplate,
 8 |   useMotionValue,
 9 |   ValueAnimationTransition,
10 | } from "framer-motion";
11 | import { useState } from "react";
12 | import FeatureTab from "@/components/FeatureTab";
13 | 
14 | export const Features = () => {
15 |   const [currentTab, setCurrentTab] = useState<number>(0);
16 |   const backgroundPositionX = useMotionValue(
17 |     featuresTabs[0].backgroundPositionX,
18 |   );
19 |   const backgroundPositionY = useMotionValue(
20 |     featuresTabs[0].backgroundPositionY,
21 |   );
22 |   const backgroundSizeX = useMotionValue(featuresTabs[0].backgroundSizeX);
23 | 
24 |   const backgroundPosition = useMotionTemplate`${backgroundPositionX}% ${backgroundPositionY}%`;
25 |   const backgroundSize = useMotionTemplate`${backgroundSizeX}% auto`;
26 | 
27 |   const handleSelectTab = (tabIndex: number) => {
28 |     setCurrentTab(tabIndex);
29 | 
30 |     const animateOptions: ValueAnimationTransition = {
31 |       duration: 2,
32 |       ease: "easeInOut",
33 |     };
34 | 
35 |     animate(
36 |       backgroundSizeX,
37 |       [backgroundSizeX.get(), 100, featuresTabs[tabIndex].backgroundSizeX],
38 |       animateOptions,
39 |     );
40 | 
41 |     animate(
42 |       backgroundPositionX,
43 |       [backgroundPositionX.get(), featuresTabs[tabIndex].backgroundPositionX],
44 |       animateOptions,
45 |     );
46 | 
47 |     animate(
48 |       backgroundPositionY,
49 |       [backgroundPositionY.get(), featuresTabs[tabIndex].backgroundPositionY],
50 |       animateOptions,
51 |     );
52 |   };
53 | 
54 |   return (
55 |     <section className="py-20 md:py-24">
56 |       <div className="container">
57 |         <h2 className="text-5xl md:text-6xl font-medium text-center tracking-tighter">
58 |           Elevate your SEO efforts.
59 |         </h2>
60 |         <p className="text-lg md:text-xl text-white/70 text-center tracking-tight mt-5 max-w-2xl mx-auto">
61 |           From small startups to large enterprises, our AI-driven tool has
62 |           revolutionized the way businesses approach SEO.
63 |         </p>
64 |         <div className="flex flex-col lg:flex-row gap-3 mt-10">
65 |           {featuresTabs.map((tab, tabIndex) => (
66 |             <FeatureTab
67 |               key={tabIndex}
68 |               {...tab}
69 |               onClick={() => handleSelectTab(tabIndex)}
70 |               selected={currentTab === tabIndex}
71 |             />
72 |           ))}
73 |         </div>
74 |         <div className="p-2.5 border border-white/20 rounded-xl mt-3">
75 |           <motion.div
76 |             className="aspect-video bg-cover border border-white/20 rounded-lg mt-3"
77 |             style={{
78 |               backgroundPosition,
79 |               backgroundSize,
80 |               backgroundImage: `url(${ProductImage.src})`,
81 |             }}
82 |           ></motion.div>
83 |         </div>
84 |       </div>
85 |     </section>
86 |   );
87 | };
88 | 


--------------------------------------------------------------------------------
/src/sections/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { Logo, SocialX, SocialInstagram, SocialYoutube } from "@/assets";
 2 | import Link from "next/link";
 3 | 
 4 | const navItems = [
 5 |   { href: "#", title: "Features" },
 6 |   { href: "#", title: "Developers" },
 7 |   { href: "#", title: "Company" },
 8 |   { href: "#", title: "Blog" },
 9 |   { href: "#", title: "Changelog" },
10 | ];
11 | 
12 | export const Footer = () => {
13 |   return (
14 |     <footer className="py-5 border-t border-white/15">
15 |       <div className="container">
16 |         <div className="flex flex-col lg:flex-row lg:items-center gap-8">
17 |           <div className="flex gap-2 items-center lg:flex-1">
18 |             <Logo className="size-6" />
19 |             <span className="font-medium">AI Startup Landing Page</span>
20 |           </div>
21 |           <nav className="flex flex-col lg:flex-row gap-5 lg:gap-7 lg:flex-1 lg:justify-center">
22 |             {navItems.map((link, index) => (
23 |               <Link
24 |                 key={index}
25 |                 href={link.href}
26 |                 className="text-white/70 hover:text-white text-xs md:text-sm transition"
27 |               >
28 |                 {link.title}
29 |               </Link>
30 |             ))}
31 |           </nav>
32 |           <div className="flex gap-5 lg:flex-1 lg:justify-end">
33 |             <SocialX className="text-white/40 hover:text-white transition" />
34 |             <SocialInstagram className="text-white/40 hover:text-white transition" />
35 |             <SocialYoutube className="text-white/40 hover:text-white transition" />
36 |           </div>
37 |         </div>
38 |       </div>
39 |     </footer>
40 |   );
41 | };
42 | 


--------------------------------------------------------------------------------
/src/sections/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { Logo, MenuIcon } from "@/assets";
 2 | import { Button } from "@/components/Button";
 3 | import Link from "next/link";
 4 | 
 5 | const navItems = [
 6 |   { href: "#", title: "Features" },
 7 |   { href: "#", title: "Developers" },
 8 |   { href: "#", title: "Pricing" },
 9 |   { href: "#", title: "Changelog" },
10 | ];
11 | 
12 | export const Header = () => {
13 |   return (
14 |     <header className="sticky top-0 py-4 border-b border-white/15 md:border-none z-10">
15 |       <div className="absolute inset-0 backdrop-blur -z-10 md:hidden"></div>
16 |       <div className="container">
17 |         <div className="relative flex justify-between items-center md:border border-white/15 md:p-2.5 rounded-xl max-w-2xl mx-auto">
18 |           <div className="absolute inset-0 backdrop-blur -z-10 hidden md:block"></div>
19 |           <div>
20 |             <div className="inline-flex items-center justify-center size-10 border border-white/15 rounded-lg">
21 |               <Logo className="size-8" />
22 |             </div>
23 |           </div>
24 |           <div className="hidden md:block">
25 |             <nav className="flex gap-8 text-sm">
26 |               {navItems.map((link, index) => (
27 |                 <Link
28 |                   key={index}
29 |                   href={link.href}
30 |                   className="text-white/70 hover:text-white transition"
31 |                 >
32 |                   {link.title}
33 |                 </Link>
34 |               ))}
35 |             </nav>
36 |           </div>
37 |           <div className="flex items-center gap-4">
38 |             <Button>Join waitlist</Button>
39 |             <MenuIcon className="md:hidden" />
40 |           </div>
41 |         </div>
42 |       </div>
43 |     </header>
44 |   );
45 | };
46 | 


--------------------------------------------------------------------------------
/src/sections/Hero.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { Button } from "@/components/Button";
  3 | import { StarsImage } from "@/assets";
  4 | import { motion, useScroll, useTransform } from "framer-motion";
  5 | import { useRef } from "react";
  6 | 
  7 | export const Hero = () => {
  8 |   const sectionRef = useRef<HTMLElement>(null);
  9 |   const { scrollYProgress } = useScroll({
 10 |     target: sectionRef,
 11 |     offset: ["start end", "end start"],
 12 |   });
 13 | 
 14 |   const backgroundPositionY = useTransform(
 15 |     scrollYProgress,
 16 |     [0, 1],
 17 |     [-300, 300],
 18 |   );
 19 | 
 20 |   return (
 21 |     <motion.section
 22 |       ref={sectionRef}
 23 |       className="h-[492px] md:h-[800px] flex items-center overflow-hidden relative [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]"
 24 |       style={{ backgroundImage: `url(${StarsImage.src})`, backgroundPositionY }}
 25 |       animate={{
 26 |         backgroundPositionX: StarsImage.width,
 27 |       }}
 28 |       transition={{
 29 |         repeat: Infinity,
 30 |         duration: 100,
 31 |         ease: "linear",
 32 |       }}
 33 |     >
 34 |       <div className="absolute inset-0 bg-[radial-gradient(75%_75%_at_center_center,rgb(140,69,255,0.5)_15%,rgb(14,0,36,0.5)_78%,transparent)]"></div>
 35 |       {/* Start Planet */}
 36 |       <div className="absolute size-64 md:size-96 bg-purple-500 border border-white/20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(50%_50%_at_16.8%_18.3%,white,rgb(184,148,255)_37.7%,rgb(24,0,66))] shadow-[-20px_-20px_50px_rgb(255,255,255,0.5),-20px_-20px_80px_rgb(255,255,255,0.1),0_0_50px_rgb(140,69,255)] rounded-full"></div>
 37 |       {/* End Planet */}
 38 |       {/* Start Ring 1 */}
 39 |       <motion.div
 40 |         style={{
 41 |           translateY: "-50%",
 42 |           translateX: "-50%",
 43 |         }}
 44 |         animate={{
 45 |           rotate: "1turn",
 46 |         }}
 47 |         transition={{
 48 |           repeat: Infinity,
 49 |           duration: 60,
 50 |           ease: "linear",
 51 |         }}
 52 |         className="absolute size-[344px] md:size-[580px] border border-white opacity-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
 53 |       >
 54 |         <div className="absolute size-2 bg-white top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
 55 |         <div className="absolute size-2 bg-white top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
 56 |         <div className="absolute size-5 border border-white top-1/2 left-full -translate-x-1/2 -translate-y-1/2 rounded-full inline-flex justify-center items-center">
 57 |           <div className="size-2 bg-white rounded-full"></div>
 58 |         </div>
 59 |       </motion.div>
 60 |       {/* End Ring 1 */}
 61 |       {/* Start Ring 2 */}
 62 |       <motion.div
 63 |         style={{
 64 |           translateY: "-50%",
 65 |           translateX: "-50%",
 66 |         }}
 67 |         animate={{
 68 |           rotate: "-1turn",
 69 |         }}
 70 |         transition={{
 71 |           repeat: Infinity,
 72 |           duration: 60,
 73 |           ease: "linear",
 74 |         }}
 75 |         className="absolute size-[444px] md:size-[780px] border border-dashed border-white/20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
 76 |       ></motion.div>
 77 |       {/* End Ring 2 */}
 78 |       {/* Start Ring 3 */}
 79 |       <motion.div
 80 |         style={{
 81 |           translateY: "-50%",
 82 |           translateX: "-50%",
 83 |         }}
 84 |         animate={{
 85 |           rotate: "1turn",
 86 |         }}
 87 |         transition={{
 88 |           repeat: Infinity,
 89 |           duration: 90,
 90 |           ease: "linear",
 91 |         }}
 92 |         className="absolute size-[544px] md:size-[980px] border border-white opacity-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
 93 |       >
 94 |         <div className="absolute size-2 bg-white top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
 95 |         <div className="absolute size-2 bg-white top-1/2 left-full -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
 96 |       </motion.div>
 97 |       {/* End Ring 3 */}
 98 |       <div className="container relative mt-16">
 99 |         <h1 className="text-8xl md:text-[168px] md:leading-none font-semibold tracking-tighter text-center bg-white bg-[radial-gradient(100%_100%_at_top_left,white,white,rgb(74,32,138,0.5))] text-transparent bg-clip-text">
100 |           AI SEO
101 |         </h1>
102 |         <p className="text-lg md:text-xl text-white/70 mt-5 text-center max-w-xl mx-auto">
103 |           Elevate your site&apos;s visibility effortlessly with AI, where smart
104 |           technology meets user-friendly SEO tools.
105 |         </p>
106 |         <div className="flex justify-center mt-5">
107 |           <Button>Join waitlist</Button>
108 |         </div>
109 |       </div>
110 |     </motion.section>
111 |   );
112 | };
113 | 


--------------------------------------------------------------------------------
/src/sections/LogoTicker.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import {
 3 |   AcmeLogo,
 4 |   ApexLogo,
 5 |   CelestialLogo,
 6 |   QuantumLogo,
 7 |   PulseLogo,
 8 |   EchoLogo,
 9 | } from "@/assets";
10 | import { motion } from "framer-motion";
11 | import Image from "next/image";
12 | 
13 | const logos = [
14 |   AcmeLogo,
15 |   PulseLogo,
16 |   EchoLogo,
17 |   CelestialLogo,
18 |   ApexLogo,
19 |   QuantumLogo,
20 | ];
21 | 
22 | export const LogoTicker = () => {
23 |   return (
24 |     <section className="py-20 md:py-24">
25 |       <div className="container">
26 |         <div className="flex items-center gap-5">
27 |           <div className="flex-1 md:flex-none">
28 |             <h2>Trusted by top innovative teams</h2>
29 |           </div>
30 |           <div className="flex flex-1 overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)]">
31 |             <motion.div
32 |               initial={{ translateX: "-50%" }}
33 |               animate={{ translateX: "0" }}
34 |               transition={{
35 |                 duration: 30,
36 |                 repeat: Infinity,
37 |                 ease: "linear",
38 |               }}
39 |               className="flex flex-none gap-14 pr-14 -translate-x-1/2"
40 |             >
41 |               {[...logos, ...logos].map((logo, index) => (
42 |                 <Image
43 |                   key={index}
44 |                   src={logo.src}
45 |                   width={logo.width}
46 |                   height={logo.height}
47 |                   alt="Logo Ticker"
48 |                   className="h-6 w-auto"
49 |                 />
50 |               ))}
51 |             </motion.div>
52 |           </div>
53 |         </div>
54 |       </div>
55 |     </section>
56 |   );
57 | };
58 | 


--------------------------------------------------------------------------------
/src/sections/Testimonials.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { testimonials } from "@/data/data";
 3 | import { motion } from "framer-motion";
 4 | import Image from "next/image";
 5 | 
 6 | export const Testimonials = () => {
 7 |   return (
 8 |     <section className="py-20 md:py-24">
 9 |       <div className="container">
10 |         <h2 className="text-5xl md:text-6xl text-center font-medium tracking-tighter">
11 |           Beyond Expectations.
12 |         </h2>
13 |         <p className="text-lg md:text-xl text-center text-white/70 tracking-tight mt-5 max-w-sm mx-auto">
14 |           Our revolutionary AI SEO tools have transformed our clients&apos;
15 |           strategies.
16 |         </p>
17 |         <div className="flex overflow-hidden mt-10 [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)]">
18 |           <motion.div
19 |             initial={{
20 |               translateX: "-50%",
21 |             }}
22 |             animate={{
23 |               translateX: "0",
24 |             }}
25 |             transition={{
26 |               duration: 30,
27 |               repeat: Infinity,
28 |               ease: "linear",
29 |             }}
30 |             className="flex gap-5 pr-5 flex-none"
31 |           >
32 |             {[...testimonials, ...testimonials].map((testimonial, index) => (
33 |               <div
34 |                 key={index}
35 |                 className="p-6 md:p-10 border border-white/15 rounded-xl bg-[linear-gradient(to_bottom_left,rgb(140,69,255,0.3),black)] max-w-xs md:max-w-md flex-none"
36 |               >
37 |                 <span className="text-lg md:text-2xl tracking-tight">
38 |                   {testimonial.text}
39 |                 </span>
40 |                 <div className="flex items-center gap-3 mt-5">
41 |                   <div className="relative after:content-[''] before:content-[''] after:absolute before:absolute after:inset-0 before:inset-0 after:bg-[rgb(140,69,255)] after:mix-blend-soft-light before:border before:border-white/30 before:z-10 before:rounded-lg">
42 |                     <Image
43 |                       src={testimonial.avatarImg}
44 |                       alt={`Avatar for ${testimonial.name}`}
45 |                       className="size-11 rounded-lg grayscale"
46 |                     />
47 |                   </div>
48 |                   <div className="flex flex-col">
49 |                     <span>{testimonial.name}</span>
50 |                     <span className="text-sm text-white/50">
51 |                       {testimonial.title}
52 |                     </span>
53 |                   </div>
54 |                 </div>
55 |               </div>
56 |             ))}
57 |           </motion.div>
58 |         </div>
59 |       </div>
60 |     </section>
61 |   );
62 | };
63 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./src/sections/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     container: {
11 |       center: true,
12 |       padding: {
13 |         DEFAULT: "20px",
14 |         lg: "80px",
15 |       },
16 |       screens: {
17 |         sm: "375px",
18 |         md: "768px",
19 |         lg: "1200px",
20 |       },
21 |     },
22 |     screens: {
23 |       sm: "375px",
24 |       md: "768px",
25 |       lg: "1200px",
26 |     },
27 |     extend: {},
28 |   },
29 |   plugins: [],
30 | };
31 | export default config;
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------