Compare commits
No commits in common. "9c27a8619b42ff8f7ab3b581533d8252fcec97b4" and "cb14b699a579a1757bcb3261bbd4f37f988496e5" have entirely different histories.
9c27a8619b
...
cb14b699a5
19 changed files with 21 additions and 1035 deletions
64
package-lock.json
generated
64
package-lock.json
generated
|
|
@ -15,7 +15,6 @@
|
||||||
"@tailwindcss/vite": "^4.1.13",
|
"@tailwindcss/vite": "^4.1.13",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"framer-motion": "^12.23.22",
|
|
||||||
"lucide-react": "^0.544.0",
|
"lucide-react": "^0.544.0",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
"react-dom": "^19.1.1",
|
"react-dom": "^19.1.1",
|
||||||
|
|
@ -74,6 +73,7 @@
|
||||||
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/code-frame": "^7.27.1",
|
"@babel/code-frame": "^7.27.1",
|
||||||
"@babel/generator": "^7.28.3",
|
"@babel/generator": "^7.28.3",
|
||||||
|
|
@ -2308,6 +2308,7 @@
|
||||||
"integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==",
|
"integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"undici-types": "~7.12.0"
|
"undici-types": "~7.12.0"
|
||||||
}
|
}
|
||||||
|
|
@ -2318,6 +2319,7 @@
|
||||||
"integrity": "sha512-+kLxJpaJzXybyDyFXYADyP1cznTO8HSuBpenGlnKOAkH4hyNINiywvXS/tGJhsrGGP/gM185RA3xpjY0Yg4erA==",
|
"integrity": "sha512-+kLxJpaJzXybyDyFXYADyP1cznTO8HSuBpenGlnKOAkH4hyNINiywvXS/tGJhsrGGP/gM185RA3xpjY0Yg4erA==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
|
|
@ -2328,6 +2330,7 @@
|
||||||
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
|
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "^19.0.0"
|
"@types/react": "^19.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -2384,6 +2387,7 @@
|
||||||
"integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
|
"integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@typescript-eslint/scope-manager": "8.44.1",
|
"@typescript-eslint/scope-manager": "8.44.1",
|
||||||
"@typescript-eslint/types": "8.44.1",
|
"@typescript-eslint/types": "8.44.1",
|
||||||
|
|
@ -2636,6 +2640,7 @@
|
||||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
|
|
@ -2766,6 +2771,7 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"baseline-browser-mapping": "^2.8.3",
|
"baseline-browser-mapping": "^2.8.3",
|
||||||
"caniuse-lite": "^1.0.30001741",
|
"caniuse-lite": "^1.0.30001741",
|
||||||
|
|
@ -2920,7 +2926,8 @@
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||||
"license": "MIT"
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
},
|
},
|
||||||
"node_modules/d3-array": {
|
"node_modules/d3-array": {
|
||||||
"version": "3.2.4",
|
"version": "3.2.4",
|
||||||
|
|
@ -3189,6 +3196,7 @@
|
||||||
"integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
|
"integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/eslint-utils": "^4.8.0",
|
"@eslint-community/eslint-utils": "^4.8.0",
|
||||||
"@eslint-community/regexpp": "^4.12.1",
|
"@eslint-community/regexpp": "^4.12.1",
|
||||||
|
|
@ -3492,33 +3500,6 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
},
|
},
|
||||||
"node_modules/framer-motion": {
|
|
||||||
"version": "12.23.22",
|
|
||||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
|
|
||||||
"integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"motion-dom": "^12.23.21",
|
|
||||||
"motion-utils": "^12.23.6",
|
|
||||||
"tslib": "^2.4.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@emotion/is-prop-valid": "*",
|
|
||||||
"react": "^18.0.0 || ^19.0.0",
|
|
||||||
"react-dom": "^18.0.0 || ^19.0.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"@emotion/is-prop-valid": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"react": {
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"react-dom": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/fsevents": {
|
"node_modules/fsevents": {
|
||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
|
|
@ -4143,21 +4124,6 @@
|
||||||
"node": ">= 18"
|
"node": ">= 18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/motion-dom": {
|
|
||||||
"version": "12.23.21",
|
|
||||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
|
|
||||||
"integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"motion-utils": "^12.23.6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/motion-utils": {
|
|
||||||
"version": "12.23.6",
|
|
||||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
|
|
||||||
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/ms": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
|
|
@ -4373,6 +4339,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
|
||||||
"integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
|
"integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
|
|
@ -4382,6 +4349,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
|
||||||
"integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
|
"integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"scheduler": "^0.26.0"
|
"scheduler": "^0.26.0"
|
||||||
},
|
},
|
||||||
|
|
@ -4418,6 +4386,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/use-sync-external-store": "^0.0.6",
|
"@types/use-sync-external-store": "^0.0.6",
|
||||||
"use-sync-external-store": "^1.4.0"
|
"use-sync-external-store": "^1.4.0"
|
||||||
|
|
@ -4584,7 +4553,8 @@
|
||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||||
"license": "MIT"
|
"license": "MIT",
|
||||||
|
"peer": true
|
||||||
},
|
},
|
||||||
"node_modules/redux-thunk": {
|
"node_modules/redux-thunk": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
|
|
@ -4865,6 +4835,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
},
|
},
|
||||||
|
|
@ -4933,6 +4904,7 @@
|
||||||
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
|
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"tsc": "bin/tsc",
|
"tsc": "bin/tsc",
|
||||||
"tsserver": "bin/tsserver"
|
"tsserver": "bin/tsserver"
|
||||||
|
|
@ -5092,6 +5064,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
|
||||||
"integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
|
"integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.25.0",
|
"esbuild": "^0.25.0",
|
||||||
"fdir": "^6.5.0",
|
"fdir": "^6.5.0",
|
||||||
|
|
@ -5183,6 +5156,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,6 @@
|
||||||
"@tailwindcss/vite": "^4.1.13",
|
"@tailwindcss/vite": "^4.1.13",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"framer-motion": "^12.23.22",
|
|
||||||
"lucide-react": "^0.544.0",
|
"lucide-react": "^0.544.0",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
"react-dom": "^19.1.1",
|
"react-dom": "^19.1.1",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { BrowserRouter, Routes, Route} from "react-router-dom";
|
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||||
import Login from "./pages/Login";
|
import Login from "./pages/Login";
|
||||||
import Signup from "./pages/Signup";
|
import Signup from "./pages/Signup";
|
||||||
import DashboardLayout from "./components/layouts/DashboardLayouts";
|
import DashboardLayout from "./components/layouts/DashboardLayouts";
|
||||||
|
|
@ -7,16 +7,14 @@ import Overview from "./pages/Overview";
|
||||||
import Referrals from "./pages/Referrals";
|
import Referrals from "./pages/Referrals";
|
||||||
import Earnings from "./pages/Earnings";
|
import Earnings from "./pages/Earnings";
|
||||||
import { Toaster } from "react-hot-toast";
|
import { Toaster } from "react-hot-toast";
|
||||||
import Landing from "./pages/Landing";
|
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
|
<Route path="/" element={<Navigate to="/login" />} />
|
||||||
<Route path="/login" element={<Login />} />
|
<Route path="/login" element={<Login />} />
|
||||||
<Route path="/signup" element={<Signup />} />
|
<Route path="/signup" element={<Signup />} />
|
||||||
<Route path="/" element={<Landing/>} />
|
|
||||||
|
|
||||||
<Route element={<DashboardLayout />}>
|
<Route element={<DashboardLayout />}>
|
||||||
<Route path="/dashboard/overview" element={<Overview />} />
|
<Route path="/dashboard/overview" element={<Overview />} />
|
||||||
|
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
import { DollarSign, Clock, Activity, Layout, Headphones, Calendar } from "lucide-react"
|
|
||||||
|
|
||||||
export function Benefits() {
|
|
||||||
const benefits = [
|
|
||||||
{
|
|
||||||
title: "High Commission Rate",
|
|
||||||
description: "Earn 30% recurring commission on every sale you refer. The more you refer, the more you earn.",
|
|
||||||
icon: <DollarSign className="w-12 h-12 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "90-Day Cookie Duration",
|
|
||||||
description:
|
|
||||||
"Your referrals are tracked for 90 days, giving you plenty of time to earn commissions from your traffic.",
|
|
||||||
icon: <Clock className="w-12 h-12 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Real-Time Tracking",
|
|
||||||
description:
|
|
||||||
"Monitor your earnings, clicks, and conversions in real-time with our comprehensive affiliate dashboard.",
|
|
||||||
icon: <Activity className="w-12 h-12 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Marketing Materials",
|
|
||||||
description:
|
|
||||||
"Access professionally designed banners, landing pages, and promotional content to maximize conversions.",
|
|
||||||
icon: <Layout className="w-12 h-12 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Dedicated Support",
|
|
||||||
description: "Get help from our dedicated affiliate support team whenever you need assistance or have questions.",
|
|
||||||
icon: <Headphones className="w-12 h-12 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Monthly Payouts",
|
|
||||||
description: "Receive your commissions monthly via PayPal or bank transfer with no minimum payout threshold.",
|
|
||||||
icon: <Calendar className="w-12 h-12 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="py-24 px-6">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-white">
|
|
||||||
Why join our affiliate program?
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-white max-w-2xl mx-auto">
|
|
||||||
We provide everything you need to succeed as an Planpost AI affiliate partner.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
||||||
{benefits.map((benefit, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="p-8 rounded-2xl bg-white border border-[#7a60fa]/20 hover:border-[#7a60fa]/50 transition-all hover:shadow-lg hover:shadow-[#7a60fa]/20 transform hover:scale-105"
|
|
||||||
>
|
|
||||||
<div className="mb-5 inline-flex p-3 rounded-full bg-[#f0f0ff]">
|
|
||||||
{benefit.icon}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold mb-3 text-[#7a60fa]">{benefit.title}</h3>
|
|
||||||
<p className="text-gray-700 leading-relaxed">{benefit.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
export default function CommissionDetails() {
|
|
||||||
return (
|
|
||||||
<section className="py-24 px-6 bg-white">
|
|
||||||
<div className="max-w-5xl mx-auto">
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
|
||||||
Maximize Your Earnings
|
|
||||||
</h2>
|
|
||||||
<p className="text-xl text-gray-700 max-w-3xl mx-auto">
|
|
||||||
Our commission structure is designed to reward your efforts with recurring revenue
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
title: "Lifetime Recurring",
|
|
||||||
description:
|
|
||||||
"Earn 30% commission on all subscription payments from your referrals, including renewals, for up to 12 months.",
|
|
||||||
iconPath:
|
|
||||||
"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Automatic Discount",
|
|
||||||
description:
|
|
||||||
"Your referrals automatically get 20% off at checkout - an exclusive offer only available through affiliates.",
|
|
||||||
iconPath: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Scale Your Income",
|
|
||||||
description:
|
|
||||||
"The more you refer, the more you earn. With just 5 Diamond plan referrals, earn $290 per month passively.",
|
|
||||||
iconPath: "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Easy Payouts",
|
|
||||||
description:
|
|
||||||
"Get paid monthly via PayPal. Your rewards are calculated at the end of each month and ready for cash-out.",
|
|
||||||
iconPath: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z",
|
|
||||||
},
|
|
||||||
].map((item, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="bg-gradient-to-br from-[#7a60fa]/10 to-[#6e55f7]/10 border border-[#7a60fa]/30 rounded-2xl p-8 hover:border-[#7a60fa]/50 hover:shadow-lg hover:shadow-[#7a60fa]/20 transition-all"
|
|
||||||
>
|
|
||||||
<div className="w-12 h-12 bg-gradient-to-br from-[#7a60fa] to-[#6e55f7] rounded-lg flex items-center justify-center mb-6">
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6 text-white"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d={item.iconPath}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">{item.title}</h3>
|
|
||||||
<p className="text-gray-700 leading-relaxed">{item.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
import { useState } from "react"
|
|
||||||
import { motion, AnimatePresence } from "framer-motion"
|
|
||||||
|
|
||||||
interface FAQItem {
|
|
||||||
question: string
|
|
||||||
answer: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FAQ() {
|
|
||||||
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
|
||||||
|
|
||||||
const faqs: FAQItem[] = [
|
|
||||||
{
|
|
||||||
question: "What is my commission?",
|
|
||||||
answer:
|
|
||||||
"You will receive 30% commission on all future sales from any user you refer to Planpost AI Affiliates until they unsubscribe. For example, if you refer 100 users who purchase the monthly Silver plan, that's $1,176 pm to your pocket (after the 20% auto-applied discount)! Note: If a referral disputes a transaction, we reserve the right to delete the commission due for that payment.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "What discount do my referrals get?",
|
|
||||||
answer:
|
|
||||||
"All users you refer will automatically receive 20% off at checkout. This is unique to the Planpost AI Affiliates program and we don't offer this discount anywhere else, so make sure you use this in your promotional campaigns!",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "How long do the cookies last for?",
|
|
||||||
answer:
|
|
||||||
"We use cookies to track your referrals. The cookies last for 60 days after someone clicks the link. If they click again, the 60 days start again.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Can I use the affiliate link to make a purchase for myself?",
|
|
||||||
answer:
|
|
||||||
"No. Our provider incorporates protection mechanisms that monitor all purchases, IP addresses, and cookies. Planpost AI Affiliates also cross-checks accounts associated with a subscription to ensure they match the affiliate program account. Any misuse may result in account suspension and withheld payouts.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Can I bid on 'Planpost AI' and other related keywords?",
|
|
||||||
answer:
|
|
||||||
"No, we do not permit bidding on our brand keywords on platforms such as Google Ads. Feel free to bid on any other search terms, including our competitors! Note: we reserve the right to disable affiliate accounts if they are found to be bidding on the 'Planpost AI' keyword.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "How do I get paid?",
|
|
||||||
answer: "Your rewards are calculated and available for cash-out via PayPal at the end of each month.",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const toggleFAQ = (index: number) => {
|
|
||||||
setOpenIndex(openIndex === index ? null : index)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="relative py-28 px-6 bg-white overflow-hidden">
|
|
||||||
<div className="max-w-4xl mx-auto">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-extrabold mb-6 text-[#5e4bbf]">
|
|
||||||
Affiliate FAQ
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-gray-700 max-w-2xl mx-auto">
|
|
||||||
Everything you need to know about Planpost AI Affiliates.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* FAQ Items */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
{faqs.map((faq, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={index}
|
|
||||||
className="rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-all"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() => toggleFAQ(index)}
|
|
||||||
className="w-full flex items-center justify-between p-6 text-left text-gray-900 bg-white hover:bg-gray-50 transition-colors duration-300"
|
|
||||||
>
|
|
||||||
<h3 className="text-lg md:text-xl font-semibold pr-4">{faq.question}</h3>
|
|
||||||
<span
|
|
||||||
className="w-8 h-8 flex items-center justify-center text-white font-bold rounded-full transition-all"
|
|
||||||
style={{ backgroundColor: "#5e4bbf" }}
|
|
||||||
>
|
|
||||||
{openIndex === index ? "-" : "+"}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<AnimatePresence initial={false}>
|
|
||||||
{openIndex === index && (
|
|
||||||
<motion.div
|
|
||||||
key="content"
|
|
||||||
initial={{ opacity: 0, height: 0 }}
|
|
||||||
animate={{ opacity: 1, height: "auto" }}
|
|
||||||
exit={{ opacity: 0, height: 0 }}
|
|
||||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
|
||||||
className="px-6 pb-6 text-gray-700 leading-relaxed bg-white/50 backdrop-blur-md"
|
|
||||||
>
|
|
||||||
<p>{faq.answer}</p>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
export function FinalCTA() {
|
|
||||||
return (
|
|
||||||
<section className="relative py-16 px-6 ">
|
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
|
||||||
{/* Title */}
|
|
||||||
<h2 className="text-5xl md:text-6xl font-bold mb-6 text-white">
|
|
||||||
Ready to start earning?
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<p className="text-xl text-gray-300 mb-10 leading-relaxed">
|
|
||||||
Join our affiliate program today and start earning 30% recurring commissions on every referral.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Button */}
|
|
||||||
<button className="px-10 py-4 text-[#6351c0] rounded-lg font-semibold text-lg hover:opacity-90 transition-all">
|
|
||||||
Start Earning
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
export function Footer() {
|
|
||||||
const footerLinks = {
|
|
||||||
Product: ["Features", "Integrations", "Pricing", "Changelog", "API"],
|
|
||||||
Company: ["About", "Blog", "Careers", "Press", "Partners"],
|
|
||||||
Resources: ["Community", "Contact", "Support", "Documentation", "Guides"],
|
|
||||||
Legal: ["Privacy", "Terms", "Security", "Cookies", "Licenses"],
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<footer className="border-t border-[#5442af]/20 py-16 px-6 bg-white">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
|
|
||||||
<div className="col-span-2 md:col-span-1">
|
|
||||||
<div className="flex items-center gap-2 mb-4">
|
|
||||||
<div className="w-8 h-8 bg-gradient-to-br from-[#7e1ce0] to-[#a62fc1] rounded-lg flex items-center justify-center">
|
|
||||||
<span className="text-white font-bold text-sm">P</span>
|
|
||||||
</div>
|
|
||||||
<span className="font-semibold text-lg text-[#5442af]">Planpost AI Affiliates</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-[#5442af]/150 text-sm mb-6">
|
|
||||||
AI-powered social media management platform
|
|
||||||
</p>
|
|
||||||
<div className="flex gap-4">
|
|
||||||
{/* Social Icons */}
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="text-[#5442af] hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-br hover:from-[#7e1ce0] hover:to-[#a62fc1] transition-all"
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="text-[#5442af] hover:text-[#a62fc1] transition-colors">
|
|
||||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="text-[#5442af] hover:text-[#7e1ce0] transition-colors">
|
|
||||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{Object.entries(footerLinks).map(([category, links]) => (
|
|
||||||
<div key={category}>
|
|
||||||
<h3 className="font-semibold mb-4 text-[#5442af]">{category}</h3>
|
|
||||||
<ul className="space-y-3">
|
|
||||||
{links.map((link) => (
|
|
||||||
<li key={link}>
|
|
||||||
<a href="#" className="text-[#5442af]/80 hover:text-[#a62fc1] transition-colors text-sm">
|
|
||||||
{link}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-8 border-t border-[#5442af]/20 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
||||||
<p className="text-[#5442af]/810 text-sm">© 2025 Planpost AI Affiliates. All rights reserved.</p>
|
|
||||||
<div className="flex gap-6 text-sm">
|
|
||||||
<a href="#" className="text-[#5442af]/80 hover:text-[#a62fc1] transition-colors">
|
|
||||||
Privacy Policy
|
|
||||||
</a>
|
|
||||||
<a href="#" className="text-[#5442af]/80 hover:text-[#a62fc1] transition-colors">
|
|
||||||
Terms of Service
|
|
||||||
</a>
|
|
||||||
<a href="#" className="text-[#5442af]/80 hover:text-[#a62fc1] transition-colors">
|
|
||||||
Cookie Policy
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
import { motion } from "framer-motion"
|
|
||||||
|
|
||||||
export function HeroSection() {
|
|
||||||
return (
|
|
||||||
<section className="relative flex min-h-screen items-center justify-center overflow-hidden px-10 md:px-20 py-24 text-white">
|
|
||||||
{/* Overlay */}
|
|
||||||
<div className="absolute inset-0 bg-black/30 backdrop-blur-[1px]" />
|
|
||||||
|
|
||||||
<div className="relative z-10 mx-auto flex w-full max-w-7xl flex-col items-center justify-between gap-16 md:flex-row">
|
|
||||||
{/* Left Text Content */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: -40 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
||||||
className="max-w-xl text-center md:text-left"
|
|
||||||
>
|
|
||||||
{/* Badge */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.9 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ delay: 0.2, duration: 0.6 }}
|
|
||||||
className="mb-6 inline-flex items-center justify-center md:justify-start"
|
|
||||||
>
|
|
||||||
<span className="rounded-full border border-white/20 bg-white/10 px-5 py-1.5 text-xs font-medium uppercase tracking-wider backdrop-blur-sm">
|
|
||||||
Affiliate Program
|
|
||||||
</span>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Headline */}
|
|
||||||
<h1 className="mb-6 text-5xl font-extrabold leading-tight tracking-tight md:text-6xl lg:text-7xl">
|
|
||||||
Earn <span className="text-white/90">50% Commissions</span> for Every Referral
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<p className="mb-10 text-lg leading-relaxed text-white/80 md:text-xl">
|
|
||||||
Turn your influence into income. Join Planpost AI’s affiliate program and earn recurring rewards — every month,
|
|
||||||
automatically.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Single CTA Button */}
|
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.97 }}
|
|
||||||
className="rounded-lg bg-white px-10 py-4 text-base font-semibold text-[#5543af] shadow-lg transition-all hover:shadow-xl"
|
|
||||||
>
|
|
||||||
Start Earning
|
|
||||||
</motion.button>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Right Side Image */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 40 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.8, ease: 'easeOut', delay: 0.3 }}
|
|
||||||
className="max-w-xl w-full flex justify-center"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="https://media.istockphoto.com/id/948339996/photo/trading-business-the-affiliate-offers-a-profit-model-to-adapt-the-current-competitive-strategy.jpg?s=1024x1024&w=is&k=20&c=zv1JlvtgyiYhEjdLCHB0zsvx435q_VmnG-yYqMXNe50="
|
|
||||||
alt="Affiliate Program Illustration"
|
|
||||||
className="w-full rounded-2xl shadow-2xl object-cover"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
import { motion } from "framer-motion"
|
|
||||||
|
|
||||||
export function HowItWorks() {
|
|
||||||
return (
|
|
||||||
<section className="relative py-28 px-8 text-white">
|
|
||||||
{/* Decorative Glow Effects */}
|
|
||||||
<div className="absolute -top-40 left-0 h-96 w-96 rounded-full bg-white/10 blur-3xl" />
|
|
||||||
<div className="absolute bottom-0 right-0 h-80 w-80 rounded-full bg-white/10 blur-3xl" />
|
|
||||||
|
|
||||||
<div className="relative z-10 mx-auto max-w-7xl">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
||||||
{/* Left Content */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: -40 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="max-w-xl"
|
|
||||||
>
|
|
||||||
<h2 className="text-4xl md:text-5xl font-extrabold mb-6 text-white drop-shadow-lg">
|
|
||||||
How does it work?
|
|
||||||
</h2>
|
|
||||||
<p className="text-white/90 text-lg leading-relaxed mb-10">
|
|
||||||
Our partnership program is a powerful collaboration between Planpost AI and our partners.
|
|
||||||
Share our tools with your audience — and earn <span className="font-semibold text-white">30% recurring commissions</span> for every active subscriber.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Steps Section */}
|
|
||||||
<div className="space-y-5">
|
|
||||||
{[
|
|
||||||
{ icon: "💼", text: "Join our affiliate network in one simple step" },
|
|
||||||
{ icon: "🔗", text: "Share your referral link anywhere — web, email, or social" },
|
|
||||||
{ icon: "💰", text: "Earn recurring 30% commissions every month" },
|
|
||||||
].map((step, i) => (
|
|
||||||
<motion.div
|
|
||||||
key={i}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.2 * i }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="flex items-center gap-4 rounded-2xl bg-white/10 border border-white/20 px-6 py-4 backdrop-blur-md hover:bg-white/20 transition-all"
|
|
||||||
>
|
|
||||||
<span className="text-2xl">{step.icon}</span>
|
|
||||||
<p className="text-base text-white/90 font-medium">{step.text}</p>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Right Image */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 40 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="flex justify-center"
|
|
||||||
>
|
|
||||||
<div className="relative group">
|
|
||||||
<div className="absolute -inset-1 rounded-3xl group-hover:opacity-80 transition-all duration-500" />
|
|
||||||
<img
|
|
||||||
src="https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/643fe8fecb809e1c8a3e2e33_How%20does%20it%20work.png"
|
|
||||||
alt="How it works"
|
|
||||||
className="relative w-full max-w-md rounded-3xl transition-transform duration-500 group-hover:scale-[1.03]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import { useEffect, useState } from "react"
|
|
||||||
import { Link } from "react-router-dom"
|
|
||||||
|
|
||||||
export function Navigation() {
|
|
||||||
const [scrolled, setScrolled] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleScroll = () => {
|
|
||||||
if (window.scrollY > 30) {
|
|
||||||
setScrolled(true)
|
|
||||||
} else {
|
|
||||||
setScrolled(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.addEventListener("scroll", handleScroll)
|
|
||||||
return () => window.removeEventListener("scroll", handleScroll)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav
|
|
||||||
className={`fixed top-3 left-1/2 z-50 -translate-x-1/2 transition-all duration-500 ease-in-out rounded-2xl border border-white/10 backdrop-blur-md shadow-lg ${
|
|
||||||
scrolled
|
|
||||||
? "bg-[#5543af]/90 w-[50%] max-w-4xl py-2"
|
|
||||||
: "bg-[#5543af]/80 w-[90%] max-w-7xl py-3"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between px-8 transition-all duration-300">
|
|
||||||
{/* Logo */}
|
|
||||||
<Link to="/" className="flex items-center gap-2">
|
|
||||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#8529e0] to-[#9d2ec8]">
|
|
||||||
<span className="text-sm font-bold text-white">P</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-lg font-semibold text-white">Planpost Affiliate</span>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<Link
|
|
||||||
to="/login"
|
|
||||||
className="rounded-lg border border-white/40 px-4 py-2 text-sm font-medium text-white hover:bg-white/20 transition-all"
|
|
||||||
style={{color:"white"}}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link
|
|
||||||
to="/signup"
|
|
||||||
className="rounded-lg bg-white px-4 py-2 text-sm font-semibold hover:opacity-90 transition-opacity"
|
|
||||||
style={{color:"#5d4ab2"}}
|
|
||||||
>
|
|
||||||
Try Free
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import { Users, PenTool, FileText, Users2, Briefcase, BookOpen } from "lucide-react"
|
|
||||||
|
|
||||||
export default function PartnerTypes() {
|
|
||||||
const partnerTypes = [
|
|
||||||
{
|
|
||||||
title: "Marketing Agencies",
|
|
||||||
description: "Help your clients grow their social media presence with Planpost AI powerful tools",
|
|
||||||
icon: <Users className="w-8 h-8 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Content Creators",
|
|
||||||
description: "Share your experience with Planpost AI and earn from your engaged audience",
|
|
||||||
icon: <PenTool className="w-8 h-8 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Bloggers & Writers",
|
|
||||||
description: "Write about social media marketing and monetize your content effectively",
|
|
||||||
icon: <FileText className="w-8 h-8 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Social Media Influencers",
|
|
||||||
description: "Leverage your following to promote the best content marketing platform",
|
|
||||||
icon: <Users2 className="w-8 h-8 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Marketing Consultants",
|
|
||||||
description: "Recommend Planpost AI to your clients and earn recurring commissions",
|
|
||||||
icon: <Briefcase className="w-8 h-8 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Course Creators",
|
|
||||||
description: "Include Planpost AI in your marketing courses and training programs",
|
|
||||||
icon: <BookOpen className="w-8 h-8 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="py-24 px-6">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Perfect for Every Creator</h2>
|
|
||||||
<p className="text-xl text-white max-w-3xl mx-auto">
|
|
||||||
Whether you're an agency, influencer, <br /> or consultant, our affiliate program is designed for you
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{partnerTypes.map((type, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="bg-white border border-[#7a60fa]/30 rounded-2xl p-8 hover:border-[#7a60fa]/50 hover:shadow-lg hover:shadow-[#7a60fa]/20 transition-all transform hover:scale-105"
|
|
||||||
>
|
|
||||||
<div className="mb-4">{type.icon}</div>
|
|
||||||
<h3 className="text-xl font-bold text-[#7a60fa] mb-3">{type.title}</h3>
|
|
||||||
<p className="text-gray-700 leading-relaxed">{type.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
export function PricingTable() {
|
|
||||||
const rows = [
|
|
||||||
{ referrals: "1 Referral", order: "1 monthly Gold Subscription", earn: "$24 / month" },
|
|
||||||
{ referrals: "1 Referral", order: "1 monthly Diamond Subscription", earn: "$58 / month" },
|
|
||||||
{ referrals: "2 Referrals", order: "2 monthly Gold Subscriptions", earn: "$48 / month" },
|
|
||||||
{ referrals: "5 Referrals", order: "5 monthly Diamond Subscriptions", earn: "$290 / month" },
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="relative py-28 px-8 ">
|
|
||||||
{/* Decorative Glow */}
|
|
||||||
<div className="absolute -top-40 left-0 h-96 w-96 bg-white/10 blur-3xl" />
|
|
||||||
<div className="absolute bottom-0 right-0 h-80 w-80 bg-white/10 blur-3xl" />
|
|
||||||
|
|
||||||
<div className="relative z-10 max-w-5xl mx-auto">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-12 text-center text-white drop-shadow-lg">
|
|
||||||
How much can you get paid?
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full border-collapse ">
|
|
||||||
<thead>
|
|
||||||
<tr className="bg-white/10 backdrop-blur-md border-b border-white/30">
|
|
||||||
<th className="text-left py-4 px-6 text-white font-medium">Referrals:</th>
|
|
||||||
<th className="text-left py-4 px-6 text-white font-medium">They order:</th>
|
|
||||||
<th className="text-left py-4 px-6 text-white font-medium">You earn:</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{rows.map((row, index) => (
|
|
||||||
<tr
|
|
||||||
key={index}
|
|
||||||
className=" shadow-lg hover:bg-white/10 transition-all "
|
|
||||||
>
|
|
||||||
<td className="py-4 px-6 text-white">{row.referrals}</td>
|
|
||||||
<td className="py-4 px-6 text-white">{row.order}</td>
|
|
||||||
<td className="py-4 px-6 font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#ffffff] via-[#f0f0ff] to-[#b28eff]">
|
|
||||||
{row.earn}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
<tr>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
import { DollarSign, Clock, Activity, Layout, Headphones, Calendar } from "lucide-react"
|
|
||||||
|
|
||||||
export default function Resources() {
|
|
||||||
const resources = [
|
|
||||||
{
|
|
||||||
title: "Marketing Materials",
|
|
||||||
description: "Access banners, graphics, and promotional content",
|
|
||||||
icon: <Layout className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Tracking Dashboard",
|
|
||||||
description: "Monitor clicks, conversions, and earnings in real-time",
|
|
||||||
icon: <Activity className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Dedicated Support",
|
|
||||||
description: "Get help from our affiliate success team",
|
|
||||||
icon: <Headphones className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Email Templates",
|
|
||||||
description: "Pre-written emails to share with your audience",
|
|
||||||
icon: <DollarSign className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Social Media Kit",
|
|
||||||
description: "Ready-to-post content for all platforms",
|
|
||||||
icon: <Clock className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Performance Tips",
|
|
||||||
description: "Best practices to maximize your conversions",
|
|
||||||
icon: <Calendar className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="py-24 px-6 bg-white">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-[#7a60fa] mb-6">Everything You Need to Succeed</h2>
|
|
||||||
<p className="text-xl text-gray-700 max-w-3xl mx-auto">
|
|
||||||
We provide all the tools and resources to help you promote Planpost AI effectively
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{resources.map((resource, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="bg-white border border-[#7a60fa]/20 rounded-xl p-6 hover:border-[#7a60fa]/50 hover:shadow-lg hover:shadow-[#7a60fa]/20 transition-all transform hover:scale-105"
|
|
||||||
>
|
|
||||||
<div className="w-12 h-12 bg-[#f0f0ff] rounded-lg flex items-center justify-center mb-4">
|
|
||||||
{resource.icon}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-bold text-[#7a60fa] mb-2">{resource.title}</h3>
|
|
||||||
<p className="text-gray-700 text-sm leading-relaxed">{resource.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
export default function Stats() {
|
|
||||||
return (
|
|
||||||
<section className="px-6 bg-white py-16">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#7a60fa] to-[#6e55f7]">
|
|
||||||
30%
|
|
||||||
</div>
|
|
||||||
<div className="text-xl text-gray-800 font-semibold">Recurring Commission</div>
|
|
||||||
<p className="text-sm text-gray-600">Earn up to 12 months from each referral</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#7a60fa] to-[#6e55f7]">
|
|
||||||
20%
|
|
||||||
</div>
|
|
||||||
<div className="text-xl text-gray-800 font-semibold">Referral Discount</div>
|
|
||||||
<p className="text-sm text-gray-600">Automatic discount applied at checkout</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#7a60fa] to-[#6e55f7]">
|
|
||||||
60
|
|
||||||
</div>
|
|
||||||
<div className="text-xl text-gray-800 font-semibold">Days Cookie Duration</div>
|
|
||||||
<p className="text-sm text-gray-600">Extended tracking window for conversions</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
import { motion } from "framer-motion"
|
|
||||||
|
|
||||||
export function Testimonials() {
|
|
||||||
const testimonials = [
|
|
||||||
{
|
|
||||||
quote:
|
|
||||||
"The Planpost AI affiliate program has been a game-changer for my business. The 30% commission and excellent support make it easy to recommend.",
|
|
||||||
author: "Sarah Johnson",
|
|
||||||
role: "Digital Marketing Consultant",
|
|
||||||
avatar: "https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quote:
|
|
||||||
"I've tried many affiliate programs, but Planpost AI stands out with its generous commission structure and reliable tracking system.",
|
|
||||||
author: "Michael Chen",
|
|
||||||
role: "Content Creator",
|
|
||||||
avatar: "https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
quote:
|
|
||||||
"The marketing materials and support provided make it incredibly easy to promote Planpost AI. My earnings have grown consistently month over month.",
|
|
||||||
author: "Emma Williams",
|
|
||||||
role: "Social Media Manager",
|
|
||||||
avatar: "https://images.pexels.com/photos/30767574/pexels-photo-30767574.jpeg",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="relative py-28 px-8 bg-gradient-to-br from-[#6e55f7]/20 via-[#8d6fff]/20 to-[#6e55f7]/20 overflow-hidden text-white">
|
|
||||||
{/* Decorative glow */}
|
|
||||||
<div className="absolute -top-32 -left-32 h-96 w-96 rounded-full bg-white/10 blur-3xl" />
|
|
||||||
<div className="absolute bottom-0 right-0 h-80 w-80 rounded-full bg-white/10 blur-3xl" />
|
|
||||||
|
|
||||||
<div className="relative z-10 max-w-7xl mx-auto">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-extrabold text-white mb-4 drop-shadow-lg">
|
|
||||||
What our affiliates say
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-white/80 max-w-2xl mx-auto leading-relaxed">
|
|
||||||
Join thousands of successful affiliates earning with Planpost AI
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Testimonials Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
||||||
{testimonials.map((testimonial, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={index}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.15 * index }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="p-8 rounded-3xl bg-white/10 backdrop-blur-md border border-white/20 shadow-lg hover:shadow-[#7a60fa]/30 transition-all transform hover:scale-105"
|
|
||||||
>
|
|
||||||
<div className="mb-6">
|
|
||||||
<svg className="w-10 h-10 text-[#ffffff]" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-white/90 mb-6 leading-relaxed">{testimonial.quote}</p>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<img
|
|
||||||
src={testimonial.avatar || "/placeholder.svg"}
|
|
||||||
alt={testimonial.author}
|
|
||||||
className="w-12 h-12 rounded-full object-cover"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<div className="font-semibold text-white">{testimonial.author}</div>
|
|
||||||
<div className="text-sm text-white/70">{testimonial.role}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
export function ThreeSteps() {
|
|
||||||
const steps = [
|
|
||||||
{
|
|
||||||
image: "https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/643fe73e6c78251cc7c6de1e_Join.png",
|
|
||||||
title: "Join",
|
|
||||||
description: "It's super simple to join! Just one approval to join the best marketing solution team around.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image:
|
|
||||||
"https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/644b84254bdda05bc535bb94_Advertise%20(1)-2.png",
|
|
||||||
title: "Advertise",
|
|
||||||
description: "Share why you use Planpost AI with your audience or customers.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: "https://cdn.prod.website-files.com/605dd4e52b25d325bdc4370e/643fe76acb809e0f993e160d_Earn.png",
|
|
||||||
title: "Earn",
|
|
||||||
description: "Earn lifetime recurring commission, including renewals.",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="py-16 px-6 bg-white">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8">
|
|
||||||
{steps.map((step, index) => (
|
|
||||||
<div key={index} className="flex flex-col items-center text-center">
|
|
||||||
<div className="w-32 h-32 mb-6 flex items-center justify-center rounded-full p-1 bg-gradient-to-br from-[#7a60fa] to-[#6e55f7]">
|
|
||||||
<div className="w-full h-full rounded-full flex items-center justify-center bg-black p-4">
|
|
||||||
<img src={step.image || "/placeholder.svg"} alt={step.title} className="w-20 h-20 object-contain" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-2xl font-bold mb-3 text-gray-900">{step.title}</h3>
|
|
||||||
<p className="text-gray-600 leading-relaxed max-w-xs">{step.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
import { Users, PenTool, FileText, Users2, Briefcase, BookOpen } from "lucide-react"
|
|
||||||
import { motion } from "framer-motion"
|
|
||||||
|
|
||||||
export function WhoCanJoin() {
|
|
||||||
const types = [
|
|
||||||
{
|
|
||||||
title: "Marketing Agencies",
|
|
||||||
description: "Help clients grow social media presence using Planpost AI tools.",
|
|
||||||
benefit: "Earn recurring revenue from multiple clients.",
|
|
||||||
icon: <Users className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Content Creators",
|
|
||||||
description: "Share your experience and earn from your audience.",
|
|
||||||
benefit: "Monetize your engagement and influence.",
|
|
||||||
icon: <PenTool className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Bloggers & Writers",
|
|
||||||
description: "Write about social media marketing and monetize your content.",
|
|
||||||
benefit: "Generate passive income through referrals.",
|
|
||||||
icon: <FileText className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Social Media Influencers",
|
|
||||||
description: "Promote Planpost AI to your followers.",
|
|
||||||
benefit: "Earn recurring commissions from every subscription.",
|
|
||||||
icon: <Users2 className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Marketing Consultants",
|
|
||||||
description: "Recommend Planpost AI to clients.",
|
|
||||||
benefit: "Boost your revenue through trusted recommendations.",
|
|
||||||
icon: <Briefcase className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Course Creators",
|
|
||||||
description: "Include Planpost AI in your training programs.",
|
|
||||||
benefit: "Provide added value and earn extra income.",
|
|
||||||
icon: <BookOpen className="w-6 h-6 text-[#7a60fa]" />,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="py-28 px-8 bg-white">
|
|
||||||
<div className="max-w-7xl mx-auto text-center mb-16">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-extrabold text-[#5644af] mb-4">
|
|
||||||
Who can become our Partner?
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-700 text-lg md:text-xl max-w-3xl mx-auto leading-relaxed">
|
|
||||||
Whether you’re an agency, influencer, blogger, or consultant, our affiliate program is designed for you.
|
|
||||||
Help your audience grow while earning recurring commissions with ease.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
||||||
{types.map((type, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={index}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1 * index }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="bg-gray-50 border border-gray-200 rounded-3xl p-8 shadow-md hover:shadow-lg transition-transform transform hover:scale-105"
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-center w-12 h-12 rounded-full mb-4" >
|
|
||||||
{type.icon}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-bold text-gray-900 mb-2">{type.title}</h3>
|
|
||||||
<p className="text-gray-700 mb-3">{type.description}</p>
|
|
||||||
<p className="text-gray-600 font-medium italic">Benefit: {type.benefit}</p>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
|
|
||||||
import { Benefits } from "@/components/landing/Benefits";
|
|
||||||
import CommissionDetails from "@/components/landing/CommissionDetails";
|
|
||||||
import { FAQ } from "@/components/landing/FAQ";
|
|
||||||
import { FinalCTA } from "@/components/landing/FinalCTA";
|
|
||||||
import { Footer } from "@/components/landing/Footer";
|
|
||||||
import { HeroSection } from "@/components/landing/HeroSection";
|
|
||||||
import { HowItWorks } from "@/components/landing/HowItWorks";
|
|
||||||
import { Navigation } from "@/components/landing/Navigation";
|
|
||||||
import PartnerTypes from "@/components/landing/PartnerTypes";
|
|
||||||
|
|
||||||
import { PricingTable } from "@/components/landing/PricingTable";
|
|
||||||
import Resources from "@/components/landing/Resources";
|
|
||||||
import Stats from "@/components/landing/Stats";
|
|
||||||
import { Testimonials } from "@/components/landing/Testimonials";
|
|
||||||
import { ThreeSteps } from "@/components/landing/ThreeSteps";
|
|
||||||
import { WhoCanJoin } from "@/components/landing/WhoCanJoin";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
const Landing: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<main className="min-h-screen bg-gradient-to-br from-[#4e3cad] via-[#614db2] to-[#4e3cad]">
|
|
||||||
<Navigation/>
|
|
||||||
<HeroSection/>
|
|
||||||
<Stats/>
|
|
||||||
<ThreeSteps/>
|
|
||||||
<HowItWorks/>
|
|
||||||
<CommissionDetails/>
|
|
||||||
<PricingTable/>
|
|
||||||
<WhoCanJoin/>
|
|
||||||
<PartnerTypes/>
|
|
||||||
<Benefits/>
|
|
||||||
<Resources/>
|
|
||||||
<Testimonials/>
|
|
||||||
|
|
||||||
<FAQ/>
|
|
||||||
<FinalCTA/>
|
|
||||||
<Footer/>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Landing;
|
|
||||||
Loading…
Add table
Reference in a new issue