Initial commit: Multi-page React website for CrawlerX
This commit is contained in:
metatroncubeswdev
commit
e781cbbbcb
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
8
.oxlintrc.json
Normal file
8
.oxlintrc.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
|
"plugins": ["react", "oxc"],
|
||||||
|
"rules": {
|
||||||
|
"react/rules-of-hooks": "error",
|
||||||
|
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||||
|
}
|
||||||
|
}
|
||||||
70
README.md
Normal file
70
README.md
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
# CrawlerX — Official Brand & Operations Platform Website
|
||||||
|
|
||||||
|
The official multi-page marketing and product website for **CrawlerX**, the unified SEO operations platform built for modern agencies and search professionals.
|
||||||
|
|
||||||
|
> **Find it. Fix it. Prove it.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🌟 Key Architecture & Highlights
|
||||||
|
|
||||||
|
- **Multi-Page Routing**: Powered by `react-router-dom` with smooth scroll restoration:
|
||||||
|
- `/` — Platform Overview, Live Interactive Audit Simulator, CMS Webhook Push, & ROI Calculator
|
||||||
|
- `/features` — Deep dive into all 6 platform engines with live diagnostic mocks
|
||||||
|
- `/pricing` — Multi-currency switcher (INR ₹, USD $, CAD $), Annual/Monthly toggle (2 months free discount), and detailed plan matrix
|
||||||
|
- `/agencies` — Purpose-built Agency OS page with multi-client portfolio switcher and retainer economics
|
||||||
|
- `/compare` — Honest comparison against legacy platforms (Semrush, Ahrefs, SE Ranking)
|
||||||
|
- `/blog` — Filterable field notes, technical guides, and agency playbooks
|
||||||
|
- `/contact` — 15-minute agency consultation & demo scheduling
|
||||||
|
- **Dual-Theme Design System**: Obsidian dark mode and high-contrast light mode with glassmorphic top navigation.
|
||||||
|
- **Brand Lockup**: Minimalist, integrated logo mark directly alongside the typography without enclosing container boxes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Quick Start
|
||||||
|
|
||||||
|
### 1. Install Dependencies
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Run Local Development Server
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
The application will launch on `http://localhost:5173`.
|
||||||
|
|
||||||
|
### 3. Production Build
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
Generates an optimized static bundle in the `dist/` folder ready for deployment on Cloudflare Pages, Vercel, Netlify, or AWS Amplify.
|
||||||
|
|
||||||
|
### 4. Local Build Preview
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
crawlerx-react/
|
||||||
|
├── public/ # Favicons and static assets
|
||||||
|
├── src/
|
||||||
|
│ ├── components/ # Shared Header, Footer, BrandLogo, ScrollToTop
|
||||||
|
│ ├── pages/ # Multi-page views (Home, Features, Pricing, Agencies, Compare, Blog, Contact)
|
||||||
|
│ ├── assets/ # Brand SVGs and symbols
|
||||||
|
│ ├── App.jsx # Main Router and layout root
|
||||||
|
│ ├── main.jsx # React root with BrowserRouter
|
||||||
|
│ └── index.css # Design tokens, themes, and layout rules
|
||||||
|
├── package.json
|
||||||
|
└── vite.config.js
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏢 Organization
|
||||||
|
A product of **Metatroncube Software Solutions**.
|
||||||
|
- Production Web App: [app.crawlerx.co](https://app.crawlerx.co)
|
||||||
17
index.html
Normal file
17
index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>CrawlerX — The SEO Operations Platform for Agencies | Find it. Fix it. Prove it.</title>
|
||||||
|
<meta name="description" content="Connect technical site audits with reviewable AI fixes and automated client proof. Built for agencies with disruptive pricing: 10 sites for ₹2,499/mo ($29/mo)." />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1336
package-lock.json
generated
Normal file
1336
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
package.json
Normal file
25
package.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "crawlerx-react",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "oxlint",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^1.59.0",
|
||||||
|
"react": "^19.2.8",
|
||||||
|
"react-dom": "^19.2.8",
|
||||||
|
"react-router-dom": "^7.18.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^19.2.18",
|
||||||
|
"@types/react-dom": "^19.2.7",
|
||||||
|
"@vitejs/plugin-react": "^6.1.1",
|
||||||
|
"oxlint": "^1.81.0",
|
||||||
|
"vite": "^8.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/_redirects
Normal file
1
public/_redirects
Normal file
@ -0,0 +1 @@
|
|||||||
|
/* /index.html 200
|
||||||
7
public/crawlerx-symbol.svg
Normal file
7
public/crawlerx-symbol.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
|
||||||
|
<g fill="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="18">
|
||||||
|
<path d="M 18 106 L 60 64" stroke="#0E6E6A"/>
|
||||||
|
<path d="M 60 64 L 106 106" stroke="#0E6E6A"/>
|
||||||
|
<path d="M 38 42 L 60 64 L 104 16" stroke="#C8811F"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 342 B |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
1
public/favicon.svg
Normal file
1
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
public/icons.svg
Normal file
24
public/icons.svg
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
184
src/App.css
Normal file
184
src/App.css
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
52
src/App.jsx
Normal file
52
src/App.jsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Routes, Route } from 'react-router-dom';
|
||||||
|
import Header from './components/Header';
|
||||||
|
import Footer from './components/Footer';
|
||||||
|
import ScrollToTop from './components/ScrollToTop';
|
||||||
|
|
||||||
|
// Page components
|
||||||
|
import HomePage from './pages/HomePage';
|
||||||
|
import FeaturesPage from './pages/FeaturesPage';
|
||||||
|
import PricingPage from './pages/PricingPage';
|
||||||
|
import AgenciesPage from './pages/AgenciesPage';
|
||||||
|
import ComparePage from './pages/ComparePage';
|
||||||
|
import BlogPage from './pages/BlogPage';
|
||||||
|
import ContactPage from './pages/ContactPage';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [theme, setTheme] = useState(() => {
|
||||||
|
return localStorage.getItem('crawlerx-theme') ||
|
||||||
|
(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
|
localStorage.setItem('crawlerx-theme', theme);
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
const toggleTheme = () => {
|
||||||
|
setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="site-wrapper">
|
||||||
|
<ScrollToTop />
|
||||||
|
<Header theme={theme} toggleTheme={toggleTheme} />
|
||||||
|
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<HomePage />} />
|
||||||
|
<Route path="/features" element={<FeaturesPage />} />
|
||||||
|
<Route path="/pricing" element={<PricingPage />} />
|
||||||
|
<Route path="/agencies" element={<AgenciesPage />} />
|
||||||
|
<Route path="/compare" element={<ComparePage />} />
|
||||||
|
<Route path="/compare/semrush-alternative" element={<ComparePage />} />
|
||||||
|
<Route path="/blog" element={<BlogPage />} />
|
||||||
|
<Route path="/contact" element={<ContactPage />} />
|
||||||
|
{/* Fallback route */}
|
||||||
|
<Route path="*" element={<HomePage />} />
|
||||||
|
</Routes>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/assets/vite.svg
Normal file
1
src/assets/vite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
50
src/components/BrandLogo.jsx
Normal file
50
src/components/BrandLogo.jsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function BrandLogo({ size = 'default', showLink = true }) {
|
||||||
|
const isLarge = size === 'large';
|
||||||
|
const iconSize = isLarge ? 42 : 36;
|
||||||
|
|
||||||
|
const content = (
|
||||||
|
<>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
width={iconSize}
|
||||||
|
height={iconSize}
|
||||||
|
fill="none"
|
||||||
|
className="brand-icon-svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{/* Teal Chevron Base */}
|
||||||
|
<polyline
|
||||||
|
points="14,86 50,50 86,86"
|
||||||
|
stroke="var(--teal-vibrant)"
|
||||||
|
strokeWidth="15"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
{/* Amber Check Tick */}
|
||||||
|
<polyline
|
||||||
|
points="33.8,33.8 50,50 86,14"
|
||||||
|
stroke="var(--amber-vibrant)"
|
||||||
|
strokeWidth="15"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="brand-text" style={{ fontSize: isLarge ? '28px' : '26px' }}>
|
||||||
|
Crawler<span>X</span>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!showLink) {
|
||||||
|
return <div className="brand" aria-label="CrawlerX">{content}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link to="/" className="brand" aria-label="CrawlerX Home">
|
||||||
|
{content}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
52
src/components/Footer.jsx
Normal file
52
src/components/Footer.jsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import BrandLogo from './BrandLogo';
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="site-footer">
|
||||||
|
<div className="footer-inner">
|
||||||
|
<div className="footer-brand">
|
||||||
|
<BrandLogo />
|
||||||
|
<p>The SEO operations platform built for modern agencies. Find it. Fix it. Prove it.</p>
|
||||||
|
<small>A product of Metatroncube Software Solutions.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-col">
|
||||||
|
<h4>PRODUCT</h4>
|
||||||
|
<ul>
|
||||||
|
<li><Link to="/">Overview</Link></li>
|
||||||
|
<li><Link to="/features">Platform Features</Link></li>
|
||||||
|
<li><Link to="/agencies">For Agencies</Link></li>
|
||||||
|
<li><Link to="/pricing">Pricing & Plans</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-col">
|
||||||
|
<h4>SOLUTIONS</h4>
|
||||||
|
<ul>
|
||||||
|
<li><Link to="/compare">Semrush Alternative</Link></li>
|
||||||
|
<li><Link to="/blog">Engineering Journal</Link></li>
|
||||||
|
<li><Link to="/contact">Contact & Support</Link></li>
|
||||||
|
<li><a href="https://app.crawlerx.co/sign-in">Agency Login</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-col">
|
||||||
|
<h4>LEGAL & SECURITY</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/privacy/">Privacy Policy</a></li>
|
||||||
|
<li><a href="/terms/">Terms of Service</a></li>
|
||||||
|
<li><a href="/refund-policy/">Refund Policy</a></li>
|
||||||
|
<li><a href="/data-processing/">Data Processing (DPA)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-bottom">
|
||||||
|
<span>© 2026 CrawlerX · Metatroncube Software Solutions. All rights reserved.</span>
|
||||||
|
<span>App: app.crawlerx.co · Status: All Systems Operational</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
101
src/components/Header.jsx
Normal file
101
src/components/Header.jsx
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { NavLink, Link } from 'react-router-dom';
|
||||||
|
import { Sun, Moon, Menu, X, ArrowUpRight } from 'lucide-react';
|
||||||
|
import BrandLogo from './BrandLogo';
|
||||||
|
|
||||||
|
export default function Header({ theme, toggleTheme }) {
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
const closeMenu = () => setMobileMenuOpen(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="site-header">
|
||||||
|
<div className="header-inner">
|
||||||
|
<BrandLogo />
|
||||||
|
|
||||||
|
<nav className="desktop-nav" aria-label="Primary Navigation">
|
||||||
|
<NavLink
|
||||||
|
to="/"
|
||||||
|
end
|
||||||
|
className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
Overview
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/features"
|
||||||
|
className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
Features
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/pricing"
|
||||||
|
className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
Pricing
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/agencies"
|
||||||
|
className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
For Agencies <span className="nav-badge-agency">AGENCY OS</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/compare"
|
||||||
|
className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
Compare
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/blog"
|
||||||
|
className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
|
||||||
|
>
|
||||||
|
Insights
|
||||||
|
</NavLink>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="header-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="theme-toggle-btn"
|
||||||
|
onClick={toggleTheme}
|
||||||
|
aria-label={theme === 'light' ? 'Switch to dark theme' : 'Switch to light theme'}
|
||||||
|
title={theme === 'light' ? 'Switch to dark theme' : 'Switch to light theme'}
|
||||||
|
>
|
||||||
|
{theme === 'light' ? <Moon size={17} /> : <Sun size={17} />}
|
||||||
|
</button>
|
||||||
|
<a className="signin" href="https://app.crawlerx.co/sign-in">Sign in</a>
|
||||||
|
<a className="btn btn-primary" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Start Free <ArrowUpRight size={15} />
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
className="menu-btn"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||||
|
>
|
||||||
|
{mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Drawer */}
|
||||||
|
{mobileMenuOpen && (
|
||||||
|
<div className="mobile-menu open">
|
||||||
|
<NavLink to="/" end onClick={closeMenu}>Overview</NavLink>
|
||||||
|
<NavLink to="/features" onClick={closeMenu}>Features</NavLink>
|
||||||
|
<NavLink to="/pricing" onClick={closeMenu}>Pricing & Plans</NavLink>
|
||||||
|
<NavLink to="/agencies" onClick={closeMenu}>For Agencies & Freelancers</NavLink>
|
||||||
|
<NavLink to="/compare" onClick={closeMenu}>Compare Semrush</NavLink>
|
||||||
|
<NavLink to="/blog" onClick={closeMenu}>Insights & Guides</NavLink>
|
||||||
|
<NavLink to="/contact" onClick={closeMenu}>Contact & Demo</NavLink>
|
||||||
|
<a
|
||||||
|
href="https://app.crawlerx.co/sign-in"
|
||||||
|
onClick={closeMenu}
|
||||||
|
style={{ color: 'var(--teal-vibrant)', marginTop: '8px' }}
|
||||||
|
>
|
||||||
|
Sign In to Dashboard →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
12
src/components/ScrollToTop.jsx
Normal file
12
src/components/ScrollToTop.jsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function ScrollToTop() {
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
3393
src/index.css
Normal file
3393
src/index.css
Normal file
File diff suppressed because it is too large
Load Diff
13
src/main.jsx
Normal file
13
src/main.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.jsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
312
src/pages/AgenciesPage.jsx
Normal file
312
src/pages/AgenciesPage.jsx
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { CheckCircle2, ArrowUpRight, ShieldCheck, Users, Globe, ExternalLink, Zap } from 'lucide-react';
|
||||||
|
|
||||||
|
const AGENCY_CLIENTS = [
|
||||||
|
{ domain: 'smileline-dental.in', health: 81, status: 'Fixes Approved', pages: 1420, keywords: 124, trend: '+14%' },
|
||||||
|
{ domain: 'speedyplumbing.com', health: 64, status: 'Patch Ready', pages: 890, keywords: 78, trend: '+8%' },
|
||||||
|
{ domain: 'fashiondirect.in', health: 83, status: 'Indexed 100%', pages: 3200, keywords: 410, trend: '+22%' },
|
||||||
|
{ domain: 'apexlegaladvisors.com', health: 91, status: 'All Clean', pages: 420, keywords: 65, trend: '+19%' },
|
||||||
|
{ domain: 'zenithcrossfit.co', health: 76, status: 'Review Pending', pages: 610, keywords: 92, trend: '+11%' }
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function AgenciesPage() {
|
||||||
|
const [selectedClient, setSelectedClient] = useState(AGENCY_CLIENTS[0]);
|
||||||
|
const [clientCount, setClientCount] = useState(15);
|
||||||
|
|
||||||
|
const formatMoney = (n) => n.toLocaleString('en-US');
|
||||||
|
|
||||||
|
const calculateSavings = () => {
|
||||||
|
let semrushUSD = 250;
|
||||||
|
if (clientCount <= 5) semrushUSD = 140;
|
||||||
|
else if (clientCount <= 15) semrushUSD = 350;
|
||||||
|
else if (clientCount <= 30) semrushUSD = 500;
|
||||||
|
else semrushUSD = 900;
|
||||||
|
|
||||||
|
let crawlerxINR = 2499;
|
||||||
|
if (clientCount <= 3) crawlerxINR = 999;
|
||||||
|
else if (clientCount <= 10) crawlerxINR = 2499;
|
||||||
|
else if (clientCount <= 30) crawlerxINR = 7499;
|
||||||
|
else crawlerxINR = 9999;
|
||||||
|
|
||||||
|
const semrushINR = semrushUSD * 86;
|
||||||
|
return {
|
||||||
|
semrush: `₹${formatMoney(semrushINR)}/mo`,
|
||||||
|
crawlerx: `₹${formatMoney(crawlerxINR)}/mo`,
|
||||||
|
annualSavings: `₹${formatMoney((semrushINR - crawlerxINR) * 12)}`
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const savings = calculateSavings();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="agencies-page">
|
||||||
|
{/* Agency Hero */}
|
||||||
|
<section className="hero" style={{ paddingBottom: '32px' }}>
|
||||||
|
<div className="hero-copy">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>THE AGENCY OPERATING SYSTEM</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
Stop losing margin on <em>legacy tool fees.</em>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Managing 10–30 client retainers shouldn't cost you $600–$1,000 every month in software seat licenses.
|
||||||
|
CrawlerX gives agencies a unified multi-client operations hub: automated audits, CMS-ready code patches,
|
||||||
|
and white-label client approval portals — at an honest flat price.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="hero-pain-callout">
|
||||||
|
<span className="pain-tag">PROVEN ARITHMETIC</span>
|
||||||
|
<p>30 client sites on CrawlerX costs <strong>₹7,499/mo</strong> ($79/mo). On Semrush Business, that same portfolio costs over <strong>$499/mo</strong> (~₹42,500/mo).</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', marginTop: '12px' }}>
|
||||||
|
<a className="btn btn-amber btn-lg" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Start Agency Trial <ArrowUpRight size={16} />
|
||||||
|
</a>
|
||||||
|
<a className="btn btn-outline btn-lg" href="#roi-calc">
|
||||||
|
Calculate Your Margin
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Agency Multi-Site Dashboard Visual */}
|
||||||
|
<div className="hero-visual">
|
||||||
|
<div className="product-ui-frame">
|
||||||
|
<div className="ui-window-bar">
|
||||||
|
<div className="ui-window-controls">
|
||||||
|
<span className="ui-dot red"></span>
|
||||||
|
<span className="ui-dot yellow"></span>
|
||||||
|
<span className="ui-dot green"></span>
|
||||||
|
</div>
|
||||||
|
<div className="ui-url-badge">
|
||||||
|
<Users size={13} style={{ marginRight: '6px' }} />
|
||||||
|
<span>AGENCY WORKSPACE (5 ACTIVE CLIENTS)</span>
|
||||||
|
</div>
|
||||||
|
<span className="ui-status-tag">ALL ACTIVE</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ padding: '20px', background: 'var(--bg-card)' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||||
|
<span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--ink-muted)' }}>CLIENT SITES PORTFOLIO</span>
|
||||||
|
<span style={{ fontSize: '12px', color: 'var(--teal-vibrant)' }}>✓ 0 Per-Seat Fees</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Client List */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
{AGENCY_CLIENTS.map((client, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
onClick={() => setSelectedClient(client)}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
padding: '12px 14px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
background: selectedClient.domain === client.domain ? 'rgba(63, 182, 174, 0.12)' : 'rgba(255, 255, 255, 0.03)',
|
||||||
|
border: selectedClient.domain === client.domain ? '1px solid var(--teal-vibrant)' : '1px solid var(--border-subtle)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.15s ease'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||||
|
<Globe size={16} color={selectedClient.domain === client.domain ? 'var(--teal-vibrant)' : 'var(--ink-muted)'} />
|
||||||
|
<div>
|
||||||
|
<div style={{ fontWeight: 600, fontSize: '13.5px', color: '#FFFFFF' }}>{client.domain}</div>
|
||||||
|
<div style={{ fontSize: '11px', color: 'var(--ink-muted)' }}>{client.pages} pages · {client.keywords} keywords</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ textAlign: 'right' }}>
|
||||||
|
<div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: '13px', color: client.health >= 80 ? 'var(--teal-vibrant)' : '#E3A44A' }}>
|
||||||
|
{client.health}/100
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '11px', color: '#27C93F' }}>{client.trend}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ marginTop: '16px', paddingTop: '14px', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '12px', color: 'var(--ink-muted)' }}>
|
||||||
|
<span>White-label client approvals: <strong>Enabled</strong></span>
|
||||||
|
<span style={{ color: 'var(--teal-vibrant)' }}>1-Click Sign-Off Link ↗</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 3 Agency Killers */}
|
||||||
|
<section className="section agency-pain-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>AGENCY PROFITABILITY AUDIT</span>
|
||||||
|
</div>
|
||||||
|
<h2>The 3 hidden leaks eroding your retainer margins.</h2>
|
||||||
|
<p>Traditional SEO suites were built to maximize enterprise software revenue, not protect boutique and growth agency margins.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="agency-pain-grid">
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">LEAK 01: THE SEAT TAX</span>
|
||||||
|
<h3>$80/Month Per User Penalty</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>How Legacy Tools Trap You:</strong> Every time you hire an SEO specialist, content strategist, or account manager, your monthly bill jumps by $45–$80 per person.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX Rule:</strong> Unlimited seats on all team plans. Invite your entire agency team and freelance contributors without paying an extra dime.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">LEAK 02: THE PDF DUMP CHASM</span>
|
||||||
|
<h3>Clients Don't Read 80-Page Reports</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>How Retainers Churn:</strong> Handing clients a massive PDF list of 400 warnings creates anxiety rather than confidence. Clients question what they are paying for.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX Proof Link:</strong> Send clients an interactive, branded 1-click approval link showing before-and-after SERP impact and exact code fixes.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">LEAK 03: DEVELOPER BOTTLENECKS</span>
|
||||||
|
<h3>Audits Sit Unimplemented in Jira</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>Where ROI Dies:</strong> Telling a client their schema is broken accomplishes nothing if their developer takes 6 weeks to write the JSON-LD snippet.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX AI Patches:</strong> Generates verified JSON-LD, title tags, and meta descriptions ready to push directly into WordPress, Shopify, or Webflow.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Interactive Agency ROI Calculator */}
|
||||||
|
<section className="section calculator-section" id="roi-calc">
|
||||||
|
<div className="calculator-container">
|
||||||
|
<div className="calc-header">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>AGENCY MARGIN CALCULATOR</span>
|
||||||
|
</div>
|
||||||
|
<h2>Calculate your agency's annual savings.</h2>
|
||||||
|
<p>Slide to your agency's active client portfolio to see exact monthly software savings and annual margin gains.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calc-grid">
|
||||||
|
<div className="calc-controls-side">
|
||||||
|
<div className="slider-group">
|
||||||
|
<div className="slider-label-row">
|
||||||
|
<label htmlFor="agency-client-slider">Active Client Retainers Managed:</label>
|
||||||
|
<span className="client-count-display">{clientCount} Clients</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="agency-client-slider"
|
||||||
|
min="3"
|
||||||
|
max="50"
|
||||||
|
value={clientCount}
|
||||||
|
onChange={(e) => setClientCount(Number(e.target.value))}
|
||||||
|
className="agency-slider"
|
||||||
|
/>
|
||||||
|
<div className="slider-markers">
|
||||||
|
<span>3 Clients</span>
|
||||||
|
<span>10 Clients</span>
|
||||||
|
<span>25 Clients</span>
|
||||||
|
<span>50 Clients</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ marginTop: '20px', fontSize: '13.5px', color: 'var(--ink-secondary)' }}>
|
||||||
|
Unlike legacy suites that charge $80 per user seat, CrawlerX includes <strong>unlimited agency team members</strong> in every plan.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calc-results-box">
|
||||||
|
<div className="compare-row">
|
||||||
|
<span className="tool-name">Legacy Enterprise (Semrush / Ahrefs):</span>
|
||||||
|
<span className="tool-price">{savings.semrush}</span>
|
||||||
|
</div>
|
||||||
|
<div className="compare-row crawlerx-highlight">
|
||||||
|
<span className="tool-name">CrawlerX Agency Equivalent:</span>
|
||||||
|
<span className="tool-price">{savings.crawlerx}</span>
|
||||||
|
</div>
|
||||||
|
<div className="savings-total-banner">
|
||||||
|
<small>YOUR ESTIMATED ANNUAL AGENCY SAVINGS</small>
|
||||||
|
<div className="savings-number">{savings.annualSavings}</div>
|
||||||
|
<span>Direct margin recaptured to hire talent or increase agency profits.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Agency Workflow Features */}
|
||||||
|
<section className="section bento-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>BUILT FOR AGENCY TEAMS</span>
|
||||||
|
</div>
|
||||||
|
<h2>Everything needed to run 30+ retainers smoothly.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bento-grid">
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box"><ShieldCheck size={20} /></div>
|
||||||
|
<span className="bento-index">WHITE-LABEL</span>
|
||||||
|
</div>
|
||||||
|
<h3>Custom Domain Client Portals</h3>
|
||||||
|
<p>Give each client a clean, view-only URL on your own domain (e.g. <code>seo.youragency.com</code>) featuring your agency logo and colors.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box"><Zap size={20} /></div>
|
||||||
|
<span className="bento-index">AUTOMATION</span>
|
||||||
|
</div>
|
||||||
|
<h3>1-Click Client Approvals</h3>
|
||||||
|
<p>Clients click a single button to sign off on meta tag changes and schema patches before they are automatically deployed to their CMS.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box"><Users size={20} /></div>
|
||||||
|
<span className="bento-index">COLLABORATION</span>
|
||||||
|
</div>
|
||||||
|
<h3>Unlimited Team & Freelancer Seats</h3>
|
||||||
|
<p>Grant role-based access to junior SEOs, copywriters, and developers without paying monthly per-user licensing taxes.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Agency Plans Callout */}
|
||||||
|
<section className="pre-footer-cta">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>14-DAY AGENCY PILOT</span>
|
||||||
|
</div>
|
||||||
|
<h2>Scale your agency retainers on CrawlerX.</h2>
|
||||||
|
<p>10 client sites for ₹2,499/mo ($29) or 30 client sites for ₹7,499/mo ($79). Unlimited seats. Zero risk.</p>
|
||||||
|
<div className="cta-buttons">
|
||||||
|
<a className="btn btn-amber btn-lg" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Start 14-Day Agency Pilot <ArrowUpRight size={16} />
|
||||||
|
</a>
|
||||||
|
<Link className="btn btn-outline btn-lg" to="/pricing">
|
||||||
|
View All Plan Entitlements
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
233
src/pages/BlogPage.jsx
Normal file
233
src/pages/BlogPage.jsx
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { ArrowUpRight, BookOpen, Clock, Tag, Search, Sparkles } from 'lucide-react';
|
||||||
|
|
||||||
|
const ARTICLES = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
category: 'Technical SEO',
|
||||||
|
title: 'A Practical Way to Prioritize Technical Fixes: Revenue Impact First',
|
||||||
|
excerpt: 'How to turn a 4,000-line crawl dump into a razor-sharp, 5-task sprint that clients immediately approve and developers can actually deploy.',
|
||||||
|
readTime: '6 min read',
|
||||||
|
date: 'Oct 14, 2026',
|
||||||
|
author: 'CrawlerX Engineering',
|
||||||
|
tag: 'Field Notes',
|
||||||
|
badge: 'Popular',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
category: 'Agency Growth',
|
||||||
|
title: 'The Weekly SEO Operating Rhythm That Stops Client Churn',
|
||||||
|
excerpt: 'Audit on Monday, execute CMS push on Wednesday, send 1-page visual proof on Friday. The exact sequence 120+ boutique agencies use to lock in retainers.',
|
||||||
|
readTime: '8 min read',
|
||||||
|
date: 'Oct 08, 2026',
|
||||||
|
author: 'Agency OS Team',
|
||||||
|
tag: 'Playbook',
|
||||||
|
badge: 'Growth',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
category: 'AI Search',
|
||||||
|
title: 'How to Audit and Optimize for Google AI Overviews in 2026',
|
||||||
|
excerpt: 'Focus on query fan-out, citation-density patterns, and structured entity authority rather than guessing keywords in LLM summaries.',
|
||||||
|
readTime: '7 min read',
|
||||||
|
date: 'Sep 29, 2026',
|
||||||
|
author: 'AI Research Lab',
|
||||||
|
tag: 'Strategy',
|
||||||
|
badge: 'New',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
category: 'Local SEO',
|
||||||
|
title: 'Geo-Grid Tracking Without Overpaying: The 13x13 Radius Playbook',
|
||||||
|
excerpt: 'Why traditional rank trackers fail multi-location clients and how proximity heatmaps turn local SEO pitches into closed contracts.',
|
||||||
|
readTime: '5 min read',
|
||||||
|
date: 'Sep 19, 2026',
|
||||||
|
author: 'CrawlerX Local',
|
||||||
|
tag: 'Guide',
|
||||||
|
badge: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
category: 'Technical SEO',
|
||||||
|
title: 'Client CMS Permissions: How to Fix Metadata Without Waiting on Web Devs',
|
||||||
|
excerpt: 'Setting up safe, sandboxed WordPress & Shopify webhook integrations so your SEO analysts can deploy fixes directly with audit logging.',
|
||||||
|
readTime: '9 min read',
|
||||||
|
date: 'Sep 12, 2026',
|
||||||
|
author: 'Engineering',
|
||||||
|
tag: 'Automation',
|
||||||
|
badge: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
category: 'Agency Growth',
|
||||||
|
title: 'Why $2,400/yr Semrush Accounts Bleed Agency Profit Margins',
|
||||||
|
excerpt: 'A financial breakdown of seat-add costs, report limits, and API markup—and how switching to a flat agency model restores 35% net margin.',
|
||||||
|
readTime: '6 min read',
|
||||||
|
date: 'Aug 28, 2026',
|
||||||
|
author: 'Operations',
|
||||||
|
tag: 'Economics',
|
||||||
|
badge: 'Finance',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const CATEGORIES = ['All Topics', 'Technical SEO', 'Agency Growth', 'AI Search', 'Local SEO'];
|
||||||
|
|
||||||
|
export default function BlogPage() {
|
||||||
|
const [activeCategory, setActiveCategory] = useState('All Topics');
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
|
||||||
|
const filteredArticles = ARTICLES.filter((article) => {
|
||||||
|
const matchesCategory = activeCategory === 'All Topics' || article.category === activeCategory;
|
||||||
|
const matchesSearch = article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
article.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
|
return matchesCategory && matchesSearch;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="page-wrapper" id="main">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="pricing-section" style={{ paddingBottom: '32px' }}>
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<Sparkles size={13} className="text-teal" />
|
||||||
|
<span>CRAWLERX JOURNAL & FIELD NOTES</span>
|
||||||
|
</div>
|
||||||
|
<h2>Useful ideas. Zero noise.</h2>
|
||||||
|
<p>
|
||||||
|
Battle-tested frameworks, agency blueprints, and technical SEO architecture for teams who would rather ship fixes than admire warnings.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Filter and Search Bar */}
|
||||||
|
<section className="section" style={{ paddingTop: '0' }}>
|
||||||
|
<div className="section-container">
|
||||||
|
<div className="blog-controls-bar">
|
||||||
|
<div className="category-pills" role="tablist">
|
||||||
|
{CATEGORIES.map((cat) => (
|
||||||
|
<button
|
||||||
|
key={cat}
|
||||||
|
type="button"
|
||||||
|
className={`category-pill ${activeCategory === cat ? 'active' : ''}`}
|
||||||
|
onClick={() => setActiveCategory(cat)}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="search-input-wrapper">
|
||||||
|
<Search size={16} className="search-icon" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search guides, strategies..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="blog-search-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Featured Article */}
|
||||||
|
{activeCategory === 'All Topics' && !searchQuery && (
|
||||||
|
<div className="featured-article-card mb-8">
|
||||||
|
<div className="featured-badge">Featured Blueprint</div>
|
||||||
|
<div className="featured-content">
|
||||||
|
<div className="article-meta">
|
||||||
|
<span className="article-category">Agency Operations</span>
|
||||||
|
<span className="meta-separator">•</span>
|
||||||
|
<span className="article-read-time"><Clock size={13} /> 10 min read</span>
|
||||||
|
<span className="meta-separator">•</span>
|
||||||
|
<span>Oct 18, 2026</span>
|
||||||
|
</div>
|
||||||
|
<h2>The 2026 Agency Playbook: Automating the Find → Fix → Prove Cycle</h2>
|
||||||
|
<p>
|
||||||
|
Most agencies lose clients not because rankings dropped, but because the client never saw what was actually done. Here is the operational architecture to link technical audits directly to CMS deployment and automated weekly ROI proofs.
|
||||||
|
</p>
|
||||||
|
<div className="featured-footer">
|
||||||
|
<div className="author-info">
|
||||||
|
<div className="author-avatar">CX</div>
|
||||||
|
<div>
|
||||||
|
<strong>CrawlerX Core Team</strong>
|
||||||
|
<small>Operations Architecture</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://app.crawlerx.co/sign-up" className="btn btn-primary btn-sm">
|
||||||
|
Read Blueprint <ArrowUpRight size={14} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Articles Grid */}
|
||||||
|
<div className="articles-grid">
|
||||||
|
{filteredArticles.length > 0 ? (
|
||||||
|
filteredArticles.map((article) => (
|
||||||
|
<article key={article.id} className="article-card-modern">
|
||||||
|
<div className="article-card-top">
|
||||||
|
<div className="article-card-tag">
|
||||||
|
<Tag size={12} /> {article.category}
|
||||||
|
</div>
|
||||||
|
{article.badge && (
|
||||||
|
<span className="article-badge-pill">{article.badge}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="article-card-title">{article.title}</h3>
|
||||||
|
<p className="article-card-excerpt">{article.excerpt}</p>
|
||||||
|
|
||||||
|
<div className="article-card-bottom">
|
||||||
|
<div className="article-card-meta">
|
||||||
|
<span><Clock size={12} /> {article.readTime}</span>
|
||||||
|
<span>{article.date}</span>
|
||||||
|
</div>
|
||||||
|
<a href="https://app.crawlerx.co/sign-up" className="read-more-link">
|
||||||
|
Read Guide <ArrowUpRight size={14} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="no-articles-found">
|
||||||
|
<BookOpen size={36} className="text-muted" />
|
||||||
|
<p>No guides found matching "{searchQuery}".</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary btn-sm"
|
||||||
|
onClick={() => { setActiveCategory('All Topics'); setSearchQuery(''); }}
|
||||||
|
>
|
||||||
|
Reset Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Newsletter / CTA */}
|
||||||
|
<section className="section bg-card-alt">
|
||||||
|
<div className="section-container text-center max-w-2xl mx-auto">
|
||||||
|
<h2 className="section-title">Get weekly field notes in your inbox</h2>
|
||||||
|
<p className="section-subtitle">
|
||||||
|
Zero marketing fluff. Just technical fixes, agency operating templates, and algorithm tracking.
|
||||||
|
</p>
|
||||||
|
<div className="newsletter-form">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="agency@domain.com"
|
||||||
|
className="newsletter-input"
|
||||||
|
/>
|
||||||
|
<button type="button" className="btn btn-primary">
|
||||||
|
Subscribe Free
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<small className="text-muted" style={{ display: 'block', marginTop: '12px' }}>
|
||||||
|
No spam. One actionable email every Thursday. Unsubscribe anytime.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
167
src/pages/ComparePage.jsx
Normal file
167
src/pages/ComparePage.jsx
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { CheckCircle2, XCircle, ArrowUpRight, Zap, ShieldCheck, DollarSign } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function ComparePage() {
|
||||||
|
return (
|
||||||
|
<div className="compare-page">
|
||||||
|
{/* Compare Hero */}
|
||||||
|
<section className="pricing-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>OBJECTIVE COMPARISON</span>
|
||||||
|
</div>
|
||||||
|
<h2>CrawlerX vs. Semrush & Ahrefs.</h2>
|
||||||
|
<p>A transparent breakdown of agency economics, actionable execution workflows, and client retention.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* The 3 Core Differences */}
|
||||||
|
<div className="agency-pain-grid" style={{ marginBottom: '64px' }}>
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">DIFFERENCE 01: PRICING</span>
|
||||||
|
<h3>No $80/Month User Seat Taxes</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>Semrush / Ahrefs:</strong> Guru ($249/mo) and Standard ($249/mo) only cover 1 user. Adding a team member or client manager costs an extra $45–$80/mo per person.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX:</strong> Unlimited seats on all team tiers. 10 client sites for ₹2,499/mo ($29) or 30 sites for ₹7,499/mo ($79).</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">DIFFERENCE 02: CODE PATCHES</span>
|
||||||
|
<h3>Fixes vs. 400-Page PDF Dumps</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>Legacy Suites:</strong> Hand you a massive spreadsheet of 400 issues without writing a single line of code. Clients panic and retainers churn.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX AI Patches:</strong> Generates ready-to-deploy JSON-LD schema, title tags, and meta descriptions with 1-click CMS webhooks.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">DIFFERENCE 03: CLIENT PROOF</span>
|
||||||
|
<h3>1-Click Client Sign-Off Links</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>Legacy Suites:</strong> You spend 4 hours each month manually compiling PDF reports and chasing clients over email for approval.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX Portals:</strong> Send clients an executive, white-label link on your domain where they approve changes with one tap.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detailed Side-by-Side Table */}
|
||||||
|
<div className="comparison-table-wrapper">
|
||||||
|
<table className="compare-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Evaluation Factor</th>
|
||||||
|
<th className="col-crawlerx">CrawlerX Operations</th>
|
||||||
|
<th>Semrush (Guru)</th>
|
||||||
|
<th>Ahrefs (Standard)</th>
|
||||||
|
<th>SE Ranking (Pro)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Primary Philosophy</strong></td>
|
||||||
|
<td className="col-crawlerx"><strong>Find it. Fix it. Prove it.</strong><br/><small>Audit directly into CMS code patches and client sign-off</small></td>
|
||||||
|
<td>Data database suite<br/><small>PPC & historical backlink index</small></td>
|
||||||
|
<td>Data database suite<br/><small>Link index & content explorer</small></td>
|
||||||
|
<td>Mid-market tracker<br/><small>Keyword tracking & audits</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Price for 10 Client Sites</strong></td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)', fontSize: '18px' }}>₹2,499/mo ($29)</strong></td>
|
||||||
|
<td>$249.95/mo (~₹21,500)</td>
|
||||||
|
<td>$249.00/mo (~₹21,400)</td>
|
||||||
|
<td>$109.00/mo (~₹9,300)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Price for 30 Client Sites</strong></td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)', fontSize: '18px' }}>₹7,499/mo ($79)</strong></td>
|
||||||
|
<td>$499.95/mo (~₹42,500)</td>
|
||||||
|
<td>$499.00/mo (~₹42,500)</td>
|
||||||
|
<td>$239.00/mo (~₹20,500)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Extra Team Member Seats</strong></td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
|
||||||
|
<td>+$80/mo per seat</td>
|
||||||
|
<td>+$75/mo per seat</td>
|
||||||
|
<td>+$40/mo per seat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>AI Code & Tag Patches</strong></td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Built-in (CMS Ready)</strong></td>
|
||||||
|
<td>✗ Audit warnings only</td>
|
||||||
|
<td>✗ Audit warnings only</td>
|
||||||
|
<td>✗ Audit warnings only</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Client 1-Click Approval Link</strong></td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Included</strong></td>
|
||||||
|
<td>✗ PDF exports only</td>
|
||||||
|
<td>✗ PDF exports only</td>
|
||||||
|
<td>✗ PDF exports only</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>AI Search Visibility (Perplexity/ChatGPT)</strong></td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Included</strong></td>
|
||||||
|
<td>+$199/mo add-on</td>
|
||||||
|
<td>✗ Not supported</td>
|
||||||
|
<td>✗ Not supported</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3-Minute Migration Guarantee */}
|
||||||
|
<div style={{
|
||||||
|
marginTop: '64px',
|
||||||
|
background: 'linear-gradient(135deg, rgba(63, 182, 174, 0.1) 0%, rgba(200, 129, 31, 0.08) 100%)',
|
||||||
|
border: '1px solid rgba(63, 182, 174, 0.3)',
|
||||||
|
borderRadius: 'var(--radius-lg)',
|
||||||
|
padding: '36px',
|
||||||
|
textAlign: 'center',
|
||||||
|
maxWidth: '850px',
|
||||||
|
margin: '64px auto 0'
|
||||||
|
}}>
|
||||||
|
<h3 style={{ fontSize: '22px', marginBottom: '12px', color: '#FFFFFF' }}>
|
||||||
|
Zero-Downtime 3-Minute Agency Migration
|
||||||
|
</h3>
|
||||||
|
<p style={{ color: 'var(--ink-secondary)', fontSize: '15px', lineHeight: '1.6', marginBottom: '20px' }}>
|
||||||
|
Moving from Semrush or Ahrefs? Simply enter your client URLs or upload a CSV.
|
||||||
|
CrawlerX automatically imports your project history, keywords, and schedules in under 3 minutes.
|
||||||
|
</p>
|
||||||
|
<a className="btn btn-primary" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Migrate Your Agency in 3 Minutes <ArrowUpRight size={15} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Pre-footer CTA */}
|
||||||
|
<section className="pre-footer-cta">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>TRY CRAWLERX RISK-FREE</span>
|
||||||
|
</div>
|
||||||
|
<h2>Ready to cut your SEO software bill by 90%?</h2>
|
||||||
|
<p>Start a 7-day trial of CrawlerX Pro. See why modern agencies are migrating their entire client portfolios today.</p>
|
||||||
|
<div className="cta-buttons">
|
||||||
|
<a className="btn btn-primary btn-lg" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Start Free Pro Trial <ArrowUpRight size={16} />
|
||||||
|
</a>
|
||||||
|
<Link className="btn btn-outline btn-lg" to="/pricing">
|
||||||
|
View All Plans
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
207
src/pages/ContactPage.jsx
Normal file
207
src/pages/ContactPage.jsx
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { ArrowUpRight, Mail, MessageSquare, ShieldCheck, CheckCircle2, Clock, Sparkles } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
agencyName: '',
|
||||||
|
clientCount: '5-15',
|
||||||
|
topic: 'Agency Workflow & Migration Demo',
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
const [submitted, setSubmitted] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSubmitted(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="page-wrapper" id="main">
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="pricing-section" style={{ paddingBottom: '32px' }}>
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<Sparkles size={13} className="text-teal" />
|
||||||
|
<span>AGENCY CONSULTATION & DEMO</span>
|
||||||
|
</div>
|
||||||
|
<h2>Talk to the engineers behind CrawlerX.</h2>
|
||||||
|
<p>
|
||||||
|
Need a personalized walkthrough for your agency? Migrating 20+ client domains from Semrush or Ahrefs? We'll set up your workspace and import your historical rankings.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Main Grid */}
|
||||||
|
<section className="section" style={{ paddingTop: '0' }}>
|
||||||
|
<div className="section-container">
|
||||||
|
<div className="contact-layout-grid">
|
||||||
|
{/* Form */}
|
||||||
|
<div className="contact-form-card">
|
||||||
|
{submitted ? (
|
||||||
|
<div className="contact-success-state">
|
||||||
|
<div className="success-icon-badge">
|
||||||
|
<CheckCircle2 size={40} className="text-teal" />
|
||||||
|
</div>
|
||||||
|
<h3>Demo Request Received</h3>
|
||||||
|
<p>
|
||||||
|
Thank you, <strong>{formData.name}</strong>. An agency solutions engineer will reach out to <code>{formData.email}</code> within 4 business hours with your private sandbox credentials.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-secondary btn-sm mt-4"
|
||||||
|
onClick={() => setSubmitted(false)}
|
||||||
|
>
|
||||||
|
Submit Another Request
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="contact-interactive-form">
|
||||||
|
<h3 className="form-heading">Schedule a 15-Minute Agency Walkthrough</h3>
|
||||||
|
<p className="form-subheading">See how CrawlerX cuts client reporting time by 75%.</p>
|
||||||
|
|
||||||
|
<div className="form-row">
|
||||||
|
<div className="form-field">
|
||||||
|
<label htmlFor="name">Your Name</label>
|
||||||
|
<input
|
||||||
|
id="name"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
placeholder="Alex Morgan"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-field">
|
||||||
|
<label htmlFor="email">Work Email</label>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
placeholder="alex@youragency.com"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-row">
|
||||||
|
<div className="form-field">
|
||||||
|
<label htmlFor="agencyName">Agency / Company</label>
|
||||||
|
<input
|
||||||
|
id="agencyName"
|
||||||
|
type="text"
|
||||||
|
placeholder="Nexus Digital Growth"
|
||||||
|
value={formData.agencyName}
|
||||||
|
onChange={(e) => setFormData({ ...formData, agencyName: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-field">
|
||||||
|
<label htmlFor="clientCount">Active Client Domains</label>
|
||||||
|
<select
|
||||||
|
id="clientCount"
|
||||||
|
value={formData.clientCount}
|
||||||
|
onChange={(e) => setFormData({ ...formData, clientCount: e.target.value })}
|
||||||
|
>
|
||||||
|
<option value="1-4">1 – 4 Clients (Freelancer)</option>
|
||||||
|
<option value="5-15">5 – 15 Clients (Boutique Agency)</option>
|
||||||
|
<option value="16-50">16 – 50 Clients (Growth Agency)</option>
|
||||||
|
<option value="50+">50+ Clients (Enterprise Agency)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-field">
|
||||||
|
<label htmlFor="topic">What are you looking to achieve?</label>
|
||||||
|
<select
|
||||||
|
id="topic"
|
||||||
|
value={formData.topic}
|
||||||
|
onChange={(e) => setFormData({ ...formData, topic: e.target.value })}
|
||||||
|
>
|
||||||
|
<option value="Agency Workflow & Migration Demo">Agency Workflow & Migration Demo (from Semrush/Ahrefs)</option>
|
||||||
|
<option value="Automated Client Reporting Setup">Automated White-Label Client Reporting</option>
|
||||||
|
<option value="WordPress/Shopify Direct Push">Direct CMS Integration (One-Click Fixes)</option>
|
||||||
|
<option value="Custom Enterprise Plan">Custom Multi-Seat Enterprise Plan</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-field">
|
||||||
|
<label htmlFor="message">Project Notes / Existing Tool Pain Points</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
rows={4}
|
||||||
|
placeholder="Tell us what current tool limits you're running into (e.g. seat costs, crawl credits, PDF report headaches)..."
|
||||||
|
value={formData.message}
|
||||||
|
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="btn btn-primary btn-block">
|
||||||
|
Request Agency Walkthrough <ArrowUpRight size={16} />
|
||||||
|
</button>
|
||||||
|
<small className="form-disclaimer">
|
||||||
|
<ShieldCheck size={14} className="text-teal inline mr-1" />
|
||||||
|
Strict privacy. We never share client metrics or domain details.
|
||||||
|
</small>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar Info */}
|
||||||
|
<div className="contact-sidebar">
|
||||||
|
<div className="contact-info-card">
|
||||||
|
<div className="info-card-header">
|
||||||
|
<Clock size={20} className="text-teal" />
|
||||||
|
<h4>Fast Response Guarantee</h4>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Every consultation is handled by a practicing technical SEO engineer, not a scripted SDR.
|
||||||
|
</p>
|
||||||
|
<div className="stat-pill-row">
|
||||||
|
<div className="stat-pill">
|
||||||
|
<strong>< 4 hrs</strong>
|
||||||
|
<span>Avg. Response Time</span>
|
||||||
|
</div>
|
||||||
|
<div className="stat-pill">
|
||||||
|
<strong>100% Free</strong>
|
||||||
|
<span>Migration Audit</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contact-info-card">
|
||||||
|
<div className="info-card-header">
|
||||||
|
<Mail size={20} className="text-teal" />
|
||||||
|
<h4>Direct Channels</h4>
|
||||||
|
</div>
|
||||||
|
<div className="channel-list">
|
||||||
|
<div className="channel-item">
|
||||||
|
<span className="channel-label">Agency Sales & Migration:</span>
|
||||||
|
<strong>support@crawlerx.co</strong>
|
||||||
|
</div>
|
||||||
|
<div className="channel-item">
|
||||||
|
<span className="channel-label">Web App Portal:</span>
|
||||||
|
<a href="https://app.crawlerx.co" target="_blank" rel="noopener noreferrer">
|
||||||
|
app.crawlerx.co ↗
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contact-info-card highlighted-card">
|
||||||
|
<div className="info-card-header">
|
||||||
|
<MessageSquare size={20} className="text-amber" />
|
||||||
|
<h4>Already on Semrush or Ahrefs?</h4>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
We offer <strong>concierge project migration</strong>. Send us your project CSV or keyword export and we'll import your client setup before your live demo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
296
src/pages/FeaturesPage.jsx
Normal file
296
src/pages/FeaturesPage.jsx
Normal file
@ -0,0 +1,296 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Layers,
|
||||||
|
Zap,
|
||||||
|
BarChart3,
|
||||||
|
Search,
|
||||||
|
MapPin,
|
||||||
|
Sparkles,
|
||||||
|
CheckCircle2,
|
||||||
|
ArrowUpRight
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
const ENGINES = [
|
||||||
|
{
|
||||||
|
id: 'audit',
|
||||||
|
num: '01',
|
||||||
|
name: 'Technical Site Audit',
|
||||||
|
icon: Layers,
|
||||||
|
badge: 'CRAWL HEALTH ENGINE',
|
||||||
|
summary: 'Full DOM crawl and Core Web Vitals diagnostic that isolates indexation blockers without 400 pages of false-positive noise.',
|
||||||
|
features: [
|
||||||
|
'Automated DOM & JavaScript-rendered crawl up to 5,000 pages per audit',
|
||||||
|
'Core Web Vitals diagnostic (LCP, FID, CLS, TTFB) with field data sync',
|
||||||
|
'Canonical loops, infinite redirect chains, and 404 broken link detection',
|
||||||
|
'Duplicate content, thin pages, and hreflang tag validation',
|
||||||
|
'Grouping by template type so you fix 100 pages with one template patch'
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
type: 'audit',
|
||||||
|
title: 'DOM CRAWL DIAGNOSTIC',
|
||||||
|
metric: '1,420 URLs Analyzed',
|
||||||
|
items: [
|
||||||
|
{ label: 'Canonical loop on /products/category', status: 'CRITICAL', color: '#E53E3E' },
|
||||||
|
{ label: 'Missing meta description on 14 articles', status: 'HIGH', color: '#E3A44A' },
|
||||||
|
{ label: 'Viewport meta tag unoptimized for mobile', status: 'FIX READY', color: 'var(--teal-vibrant)' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'fixes',
|
||||||
|
num: '02',
|
||||||
|
name: 'AI-Powered CMS Patches',
|
||||||
|
icon: Zap,
|
||||||
|
badge: 'EXECUTION AUTOMATION',
|
||||||
|
summary: 'Turn audit findings into copy-paste code snippets or push directly via WordPress REST API and Shopify webhooks.',
|
||||||
|
features: [
|
||||||
|
'Click-optimized title tags and meta descriptions tested against search intent',
|
||||||
|
'Automatic JSON-LD Schema generation (LocalBusiness, Article, FAQPage, Product)',
|
||||||
|
'1-Click CMS review and approve portal for clients',
|
||||||
|
'WordPress REST API integration and Shopify Storefront webhooks',
|
||||||
|
'Automated pull request creation for Next.js, Nuxt, and static sites'
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
type: 'code',
|
||||||
|
title: 'SCHEMA PATCH: LocalBusiness JSON-LD',
|
||||||
|
metric: 'Valid Schema.org 2026',
|
||||||
|
items: [
|
||||||
|
{ label: 'Target URL', val: 'https://speedyplumbing.com/locations/chicago' },
|
||||||
|
{ label: 'Patch Type', val: 'JSON-LD Structured Data' },
|
||||||
|
{ label: 'CMS Status', val: 'Ready to Deploy via Webhook' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rank',
|
||||||
|
num: '03',
|
||||||
|
name: 'Precision Rank Tracking',
|
||||||
|
icon: BarChart3,
|
||||||
|
badge: 'SERP INTEL',
|
||||||
|
summary: 'Daily updated search engine position monitoring across Google, Bing, and mobile devices at granular city-level coordinates.',
|
||||||
|
features: [
|
||||||
|
'Daily mobile and desktop position refresh across Google & Bing',
|
||||||
|
'Hyper-local geo-coordinate tracking (city, state, zip code level)',
|
||||||
|
'SERP feature tracking (Featured Snippets, People Also Ask, Local Pack, Video)',
|
||||||
|
'Historical volatility and competitor ranking overlay',
|
||||||
|
'Automated weekly email summary reports with agency white-labeling'
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
type: 'rank',
|
||||||
|
title: 'GEO SERP RANK TRACKER',
|
||||||
|
metric: '+14 Positions (7 Days)',
|
||||||
|
items: [
|
||||||
|
{ label: 'emergency plumber chicago', val: '#2 (↑3)', status: 'TOP 3' },
|
||||||
|
{ label: 'plumbing repair 24/7', val: '#4 (↑5)', status: 'PAGE 1' },
|
||||||
|
{ label: 'commercial drain cleaning', val: '#7 (↑2)', status: 'PAGE 1' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'keyword',
|
||||||
|
num: '04',
|
||||||
|
name: 'Intent Keyword Research',
|
||||||
|
icon: Search,
|
||||||
|
badge: 'DISCOVERY ENGINE',
|
||||||
|
summary: 'Discover commercial keywords with high click potential, real intent classifications, and low competitor saturation.',
|
||||||
|
features: [
|
||||||
|
'Search volume and keyword difficulty metrics tailored to real clicks',
|
||||||
|
'Search intent categorization (Commercial, Transactional, Informational, Navigational)',
|
||||||
|
'Competitor keyword gap analysis comparing your domain against up to 4 rivals',
|
||||||
|
'Related questions and long-tail query discovery',
|
||||||
|
'Estimated monthly organic traffic potential and commercial CPC value'
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
type: 'keyword',
|
||||||
|
title: 'KEYWORD OPPORTUNITY MATRIX',
|
||||||
|
metric: '8,200 Monthly Search Volume',
|
||||||
|
items: [
|
||||||
|
{ label: 'affordable family dentist', val: 'KD 22 · $4.50 CPC', status: 'HIGH INTENT' },
|
||||||
|
{ label: 'dental implants cost pune', val: 'KD 19 · $6.20 CPC', status: 'TRANSACTIONAL' },
|
||||||
|
{ label: 'invisalign vs braces cost', val: 'KD 27 · $3.10 CPC', status: 'COMMERCIAL' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'local',
|
||||||
|
num: '05',
|
||||||
|
name: 'Local Map Pack SEO',
|
||||||
|
icon: MapPin,
|
||||||
|
badge: 'LOCAL ENGINE',
|
||||||
|
summary: 'Track Google Business Profile performance across a 7x7 geo-grid to expand your local search visibility radius.',
|
||||||
|
features: [
|
||||||
|
'Granular 7x7 and 9x9 geo-grid local map pack ranking scans',
|
||||||
|
'Google Business Profile audit (categories, descriptions, NAP consistency)',
|
||||||
|
'Local citation tracker and inconsistency alerts',
|
||||||
|
'Review velocity tracking and automated review generation links',
|
||||||
|
'White-label local map reports demonstrating geographic expansion'
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
type: 'local',
|
||||||
|
title: '7x7 GEO GRID HEATMAP',
|
||||||
|
metric: 'Radius: 5 Miles (Expanded)',
|
||||||
|
items: [
|
||||||
|
{ label: 'Central Business District', val: 'Rank #1', status: 'GREEN' },
|
||||||
|
{ label: 'North Suburbs (2.5 mi)', val: 'Rank #2', status: 'GREEN' },
|
||||||
|
{ label: 'West Industrial Park (4 mi)', val: 'Rank #3', status: 'GREEN' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'ai',
|
||||||
|
num: '06',
|
||||||
|
name: 'AI Search Visibility',
|
||||||
|
icon: Sparkles,
|
||||||
|
badge: 'NEXT-GEN SERPS',
|
||||||
|
summary: 'Monitor brand mentions, sources, and citations inside OpenAI ChatGPT, Perplexity AI, and Google AI Overviews.',
|
||||||
|
features: [
|
||||||
|
'Automated prompt monitoring across ChatGPT, Perplexity, and Google AI Overviews',
|
||||||
|
'Citation frequency tracking and competitor brand comparison in AI answers',
|
||||||
|
'Sentiment analysis and factual accuracy check of AI-generated answers',
|
||||||
|
'Recommended content optimizations to win inclusion in AI search summaries',
|
||||||
|
'Weekly AI citation growth tracking report'
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
type: 'ai',
|
||||||
|
title: 'AI CITATION MONITOR',
|
||||||
|
metric: 'Cited in 42% of Perplexity Queries',
|
||||||
|
items: [
|
||||||
|
{ label: 'Perplexity: "best seo agency in pune"', status: 'CITED AS PRIMARY SOURCE' },
|
||||||
|
{ label: 'ChatGPT: "top technical seo tools 2026"', status: 'RECOMMENDED TOOL' },
|
||||||
|
{ label: 'Google AI Overview: "how to fix canonical loops"', status: 'SNIPPET CITATION' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FeaturesPage() {
|
||||||
|
const [activeEngine, setActiveEngine] = useState(ENGINES[0]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="features-page">
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="pricing-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>PLATFORM CAPABILITIES</span>
|
||||||
|
</div>
|
||||||
|
<h2>From first crawl to final client report.</h2>
|
||||||
|
<p>Six connected engines built to eliminate disconnected spreadsheets, manual copy-pasting, and expensive multi-tool subscriptions.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Engine selector tabs */}
|
||||||
|
<div className="pricing-controls" style={{ marginBottom: '32px' }}>
|
||||||
|
<div className="toggle-group" style={{ flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||||
|
{ENGINES.map((engine) => (
|
||||||
|
<button
|
||||||
|
key={engine.id}
|
||||||
|
type="button"
|
||||||
|
className={`toggle-btn ${activeEngine.id === engine.id ? 'active' : ''}`}
|
||||||
|
onClick={() => setActiveEngine(engine)}
|
||||||
|
>
|
||||||
|
{engine.num} {engine.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Selected Engine Deep Dive */}
|
||||||
|
<div className="loop-display-card" style={{ maxWidth: '1100px', margin: '0 auto 64px' }}>
|
||||||
|
<div className="loop-copy-side">
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
|
||||||
|
<span className="step-tagline">{activeEngine.badge}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{activeEngine.name}</h3>
|
||||||
|
<p style={{ fontSize: '16px', lineHeight: '1.6' }}>{activeEngine.summary}</p>
|
||||||
|
<ul className="loop-bullets" style={{ marginTop: '20px' }}>
|
||||||
|
{activeEngine.features.map((feat, i) => (
|
||||||
|
<li key={i}><CheckCircle2 size={16} color="var(--teal-vibrant)" /> {feat}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="loop-preview-side">
|
||||||
|
<div className="metric-box-highlight">
|
||||||
|
<span className="metric-desc" style={{ textTransform: 'uppercase' }}>{activeEngine.preview.title}</span>
|
||||||
|
<span className="metric-big" style={{ fontSize: '20px', marginTop: '6px', color: 'var(--teal-vibrant)' }}>
|
||||||
|
{activeEngine.preview.metric}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="loop-ui-mockup" style={{ marginTop: '16px' }}>
|
||||||
|
{activeEngine.preview.items.map((item, idx) => (
|
||||||
|
<div key={idx} className="mockup-line" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div>
|
||||||
|
<strong>{item.label}</strong>
|
||||||
|
{item.val && <div style={{ fontSize: '11.5px', color: 'var(--ink-secondary)' }}>{item.val}</div>}
|
||||||
|
</div>
|
||||||
|
{item.status && (
|
||||||
|
<span style={{
|
||||||
|
fontFamily: 'var(--font-mono)',
|
||||||
|
fontSize: '11px',
|
||||||
|
fontWeight: 700,
|
||||||
|
padding: '3px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
background: 'rgba(63, 182, 174, 0.1)',
|
||||||
|
color: item.color || 'var(--teal-vibrant)',
|
||||||
|
border: '1px solid rgba(63, 182, 174, 0.25)'
|
||||||
|
}}>
|
||||||
|
{item.status}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 6 Engine Bento Grid */}
|
||||||
|
<div className="bento-grid">
|
||||||
|
{ENGINES.map((engine) => {
|
||||||
|
const Icon = engine.icon;
|
||||||
|
return (
|
||||||
|
<article
|
||||||
|
key={engine.id}
|
||||||
|
className="bento-card"
|
||||||
|
onClick={() => {
|
||||||
|
setActiveEngine(engine);
|
||||||
|
window.scrollTo({ top: 200, behavior: 'smooth' });
|
||||||
|
}}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box"><Icon size={18} /></div>
|
||||||
|
<span className="bento-index">{engine.badge}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{engine.name}</h3>
|
||||||
|
<p>{engine.summary}</p>
|
||||||
|
<div style={{ marginTop: '16px', display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--teal-vibrant)', fontSize: '13px', fontWeight: 600 }}>
|
||||||
|
<span>View Engine Details</span> <ArrowUpRight size={14} />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Pre-footer CTA */}
|
||||||
|
<section className="pre-footer-cta">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>TRY CRAWLERX LIVE</span>
|
||||||
|
</div>
|
||||||
|
<h2>Test all six engines on your client sites.</h2>
|
||||||
|
<p>Run a full technical audit and explore AI-generated schema fixes without paying a rupee.</p>
|
||||||
|
<div className="cta-buttons">
|
||||||
|
<a className="btn btn-primary btn-lg" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Start Free Trial <ArrowUpRight size={16} />
|
||||||
|
</a>
|
||||||
|
<Link className="btn btn-outline btn-lg" to="/pricing">
|
||||||
|
View Plans & Pricing
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
795
src/pages/HomePage.jsx
Normal file
795
src/pages/HomePage.jsx
Normal file
@ -0,0 +1,795 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
CheckCircle2,
|
||||||
|
ArrowUpRight,
|
||||||
|
Search,
|
||||||
|
Layers,
|
||||||
|
Zap,
|
||||||
|
BarChart3,
|
||||||
|
ShieldCheck,
|
||||||
|
ChevronDown
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
const PRESETS = {
|
||||||
|
'smileline-dental.in': {
|
||||||
|
domain: 'smileline-dental.in',
|
||||||
|
score: 81,
|
||||||
|
action: 'Fix your title tags',
|
||||||
|
issue: 'Title tags too long on 14 pages (Truncated in SERPs)',
|
||||||
|
priority: 'High Priority',
|
||||||
|
current: 'Smileline Dental Clinic | Complete Family Dental Services and Orthodontics Treatment Clinic in Pune, Maharashtra',
|
||||||
|
suggested: 'Family Dentist in Pune | Smileline Dental Clinic',
|
||||||
|
cms: 'WordPress 6.4 API'
|
||||||
|
},
|
||||||
|
'speedyplumbing.com': {
|
||||||
|
domain: 'speedyplumbing.com',
|
||||||
|
score: 64,
|
||||||
|
action: 'Add LocalBusiness Schema',
|
||||||
|
issue: 'Missing LocalBusiness structured data on 3 location pages',
|
||||||
|
priority: 'Critical Impact',
|
||||||
|
current: '<!-- No JSON-LD Schema detected on /locations/chicago -->',
|
||||||
|
suggested: '{\n "@type": "PlumbingService",\n "name": "Speedy Plumbing",\n "geo": { "latitude": 41.8781, "longitude": -87.6298 }\n}',
|
||||||
|
cms: 'Webflow Webhook'
|
||||||
|
},
|
||||||
|
'fashiondirect.in': {
|
||||||
|
domain: 'fashiondirect.in',
|
||||||
|
score: 83,
|
||||||
|
action: 'Resolve Canonical Duplicates',
|
||||||
|
issue: 'Category pagination creating duplicate canonical URLs',
|
||||||
|
priority: 'High Priority',
|
||||||
|
current: '<link rel="canonical" href="https://fashiondirect.in/collections/all?page=2" />',
|
||||||
|
suggested: '<link rel="canonical" href="https://fashiondirect.in/collections/all" />',
|
||||||
|
cms: 'Shopify Storefront'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const FAQS = [
|
||||||
|
{
|
||||||
|
q: 'Why is CrawlerX so much more affordable than Semrush or Ahrefs?',
|
||||||
|
a: 'Legacy tools maintain massive legacy crawler infrastructure with bloated databases and high enterprise sales overhead that small agencies subsidize. CrawlerX is built with a modern, high-efficiency cloud crawler architecture and passes those savings directly to agencies with transparent site-based plans and zero per-seat fees.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: 'Does CrawlerX publish changes to client sites automatically?',
|
||||||
|
a: 'Only when you approve them. CrawlerX generates exact code diffs and CMS patches. You can review them internally, send a 1-click approval link to your client contact, and push directly via WordPress REST API, Shopify webhooks, or GitHub PRs.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: 'Can I provide my clients with their own view-only login portal?',
|
||||||
|
a: 'Yes. Every Pro and Agency plan includes client approval portal links. Clients see their clean health score progress, approved fixes, and weekly wins under your agency branding without seeing backend technical noise.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: 'Can I upgrade, downgrade, or cancel at any time?',
|
||||||
|
a: 'Yes, absolutely. There are no annual lock-in contracts on monthly plans. You can adjust your client site tiers as your agency portfolio expands or contracts.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const LOOP_STEPS = {
|
||||||
|
find: {
|
||||||
|
title: '01 — FIND IT (PRIORITIZED TECHNICAL AUDIT)',
|
||||||
|
heading: 'Cut through 400-page bloated warning lists.',
|
||||||
|
desc: 'Legacy tools dump thousands of low-impact warnings that confuse clients. CrawlerX identifies the 5 high-impact technical issues that actually prevent pages from indexing and ranking.',
|
||||||
|
points: [
|
||||||
|
'Automatic crawl of DOM, Core Web Vitals, & headers',
|
||||||
|
'Intelligent severity weighting (Critical blockers vs stylistic notices)',
|
||||||
|
'Automated grouping by template so you fix 100 pages at once'
|
||||||
|
],
|
||||||
|
metric: '94%',
|
||||||
|
metricLabel: 'Reduction in false-positive client panic alerts'
|
||||||
|
},
|
||||||
|
fix: {
|
||||||
|
title: '02 — FIX IT (CMS-READY AI CODE PATCHES)',
|
||||||
|
heading: 'Turn audit findings into copy-paste code.',
|
||||||
|
desc: 'Never hand a developer an abstract warning. CrawlerX generates exact title tag updates, meta descriptions, and schema code blocks ready to push directly into WordPress, Shopify, or custom React/Next.js codebases.',
|
||||||
|
points: [
|
||||||
|
'Auto-generated JSON-LD structured data with schema validation',
|
||||||
|
'Click-optimized meta tags tested against search intent',
|
||||||
|
'1-Click CMS API push or direct Git Pull Request generation'
|
||||||
|
],
|
||||||
|
metric: '4.2 hrs',
|
||||||
|
metricLabel: 'Saved per client audit on manual tag copywriting'
|
||||||
|
},
|
||||||
|
prove: {
|
||||||
|
title: '03 — PROVE IT (AUTOMATED PROOF LINKS & REPORTS)',
|
||||||
|
heading: 'Clients see the fix. Clients pay retainers.',
|
||||||
|
desc: 'Send clients a clean, branded link showing before-and-after SERP previews and ranking movements. No confusing 80-page PDFs. Just undeniable proof that your agency moved the needle.',
|
||||||
|
points: [
|
||||||
|
'Shareable client sign-off link with 1-click approval button',
|
||||||
|
'White-label executive dashboards on your own custom domain',
|
||||||
|
'Automated monthly executive summaries via email'
|
||||||
|
],
|
||||||
|
metric: '+28%',
|
||||||
|
metricLabel: 'Organic Clicks post title patch'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
// Live Audit Simulator State
|
||||||
|
const [domainInput, setDomainInput] = useState('smileline-dental.in');
|
||||||
|
const [activeAudit, setActiveAudit] = useState(PRESETS['smileline-dental.in']);
|
||||||
|
const [isScanning, setIsScanning] = useState(false);
|
||||||
|
const [isPushed, setIsPushed] = useState(false);
|
||||||
|
const [toastMsg, setToastMsg] = useState('');
|
||||||
|
|
||||||
|
// Agency ROI Calculator State
|
||||||
|
const [clientCount, setClientCount] = useState(10);
|
||||||
|
|
||||||
|
// Operating Loop Step
|
||||||
|
const [loopStep, setLoopStep] = useState('find');
|
||||||
|
|
||||||
|
// FAQ Accordion State
|
||||||
|
const [openFaq, setOpenFaq] = useState(0);
|
||||||
|
|
||||||
|
// Toast Trigger
|
||||||
|
const triggerToast = (msg) => {
|
||||||
|
setToastMsg(msg);
|
||||||
|
setTimeout(() => setToastMsg(''), 4000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const runAudit = (targetDomain) => {
|
||||||
|
const cleanDomain = targetDomain.trim().replace(/^https?:\/\//, '').replace(/\/.*$/, '');
|
||||||
|
setIsScanning(true);
|
||||||
|
setIsPushed(false);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const data = PRESETS[cleanDomain] || {
|
||||||
|
domain: cleanDomain,
|
||||||
|
score: 74,
|
||||||
|
action: 'Optimize Meta Descriptions & Headings',
|
||||||
|
issue: '12 pages missing meta descriptions; multiple H1 tags found',
|
||||||
|
priority: 'High Priority',
|
||||||
|
current: `<!-- ${cleanDomain} home page has generic description -->\n<meta name="description" content="Welcome to our website" />`,
|
||||||
|
suggested: `<meta name="description" content="Official ${cleanDomain} portal. Discover verified services, pricing, and 24/7 customer support." />`,
|
||||||
|
cms: 'Direct CMS / API'
|
||||||
|
};
|
||||||
|
setActiveAudit(data);
|
||||||
|
setIsScanning(false);
|
||||||
|
triggerToast(`Audit complete for ${cleanDomain}`);
|
||||||
|
}, 700);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleApprovePush = () => {
|
||||||
|
setIsPushed(true);
|
||||||
|
triggerToast(`✓ Fix approved and pushed to ${activeAudit.cms}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper for ROI Calculator Math (Default in INR)
|
||||||
|
const formatMoney = (n) => n.toLocaleString('en-US');
|
||||||
|
const calculateSavings = () => {
|
||||||
|
let semrushUSD = 250;
|
||||||
|
if (clientCount <= 3) semrushUSD = 140;
|
||||||
|
else if (clientCount <= 10) semrushUSD = 250;
|
||||||
|
else if (clientCount <= 30) semrushUSD = 500;
|
||||||
|
else semrushUSD = 850;
|
||||||
|
|
||||||
|
let crawlerxINR = 2499;
|
||||||
|
if (clientCount <= 3) crawlerxINR = 999;
|
||||||
|
else if (clientCount <= 10) crawlerxINR = 2499;
|
||||||
|
else if (clientCount <= 30) crawlerxINR = 7499;
|
||||||
|
else crawlerxINR = 9999;
|
||||||
|
|
||||||
|
const semrushINR = semrushUSD * 86;
|
||||||
|
return {
|
||||||
|
semrush: `₹${formatMoney(semrushINR)}/mo`,
|
||||||
|
crawlerx: `₹${formatMoney(crawlerxINR)}/mo`,
|
||||||
|
annualSavings: `₹${formatMoney((semrushINR - crawlerxINR) * 12)}`
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const savingsData = calculateSavings();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="home-page">
|
||||||
|
{/* Toast Notification */}
|
||||||
|
{toastMsg && (
|
||||||
|
<div style={{
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: '24px',
|
||||||
|
right: '24px',
|
||||||
|
background: '#111A24',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
border: '1px solid var(--teal-vibrant)',
|
||||||
|
padding: '12px 20px',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '13.5px',
|
||||||
|
boxShadow: '0 12px 32px rgba(0,0,0,0.6)',
|
||||||
|
zIndex: 10000,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '10px'
|
||||||
|
}}>
|
||||||
|
<CheckCircle2 size={16} color="var(--teal-vibrant)" />
|
||||||
|
<span>{toastMsg}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
HERO SECTION: High-Contrast Precision & Interactive Simulator
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="hero" id="overview">
|
||||||
|
<div className="hero-copy">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>WEBSITE INTELLIGENCE THAT ACTS</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
Find it.<br />
|
||||||
|
<em>Fix it.</em><br />
|
||||||
|
<span className="highlight-amber">Prove it.</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Legacy tools charge $500/month to dump 400-page PDF warning lists your clients never read.
|
||||||
|
CrawlerX connects deep technical site audits with <strong>CMS-ready AI fixes</strong> and
|
||||||
|
<strong>automated client proof</strong> — at radical agency-first pricing.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="hero-pain-callout">
|
||||||
|
<span className="pain-tag">AGENCY ECONOMICS</span>
|
||||||
|
<p>Manage 10 client sites for just <strong>₹2,499/mo</strong> ($29/mo) — no per-seat fees or surprise limits.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Interactive Search Bar */}
|
||||||
|
<div className="audit-search-wrapper">
|
||||||
|
<form
|
||||||
|
className="hero-audit-form"
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
runAudit(domainInput);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="url-input-icon">
|
||||||
|
<Search size={18} />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="url-field"
|
||||||
|
type="text"
|
||||||
|
value={domainInput}
|
||||||
|
onChange={(e) => setDomainInput(e.target.value)}
|
||||||
|
placeholder="https://yourwebsite.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<button type="submit" className="btn btn-primary" disabled={isScanning}>
|
||||||
|
{isScanning ? 'Scanning...' : 'Run Live Audit'} <ArrowUpRight size={15} />
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="audit-demo-presets">
|
||||||
|
<span>Try sample:</span>
|
||||||
|
{Object.keys(PRESETS).map(dom => (
|
||||||
|
<button
|
||||||
|
key={dom}
|
||||||
|
type="button"
|
||||||
|
className="preset-chip"
|
||||||
|
onClick={() => {
|
||||||
|
setDomainInput(dom);
|
||||||
|
runAudit(dom);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{dom}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hero-trust-metrics">
|
||||||
|
<div className="trust-metric-item">
|
||||||
|
<strong>10 Sites</strong>
|
||||||
|
<span>In base Pro plan</span>
|
||||||
|
</div>
|
||||||
|
<div className="trust-metric-item">
|
||||||
|
<strong>1-Click</strong>
|
||||||
|
<span>Client sign-off link</span>
|
||||||
|
</div>
|
||||||
|
<div className="trust-metric-item">
|
||||||
|
<strong>92% Less</strong>
|
||||||
|
<span>Cost vs Semrush/Ahrefs</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Interactive Live Workbench Visual */}
|
||||||
|
<div className="hero-visual">
|
||||||
|
<div className="product-ui-frame">
|
||||||
|
<div className="ui-window-bar">
|
||||||
|
<div className="ui-window-controls">
|
||||||
|
<span className="ui-dot red"></span>
|
||||||
|
<span className="ui-dot yellow"></span>
|
||||||
|
<span className="ui-dot green"></span>
|
||||||
|
</div>
|
||||||
|
<div className="ui-url-badge">
|
||||||
|
<span className="lock-icon">🔒</span>
|
||||||
|
<span>{activeAudit.domain}</span>
|
||||||
|
</div>
|
||||||
|
<span className="ui-status-tag">ACTIVE WORKBENCH</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ui-workbench">
|
||||||
|
<div className="ui-rail">
|
||||||
|
<div className="ui-rail-icon active" title="Site Audit"><Layers size={18} /></div>
|
||||||
|
<div className="ui-rail-icon" title="AI Fixes"><Zap size={18} /></div>
|
||||||
|
<div className="ui-rail-icon" title="Rank Tracker"><BarChart3 size={18} /></div>
|
||||||
|
<div className="ui-rail-icon" title="Client Reports"><ShieldCheck size={18} /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ui-main-panel">
|
||||||
|
<div className="ui-card-top-summary">
|
||||||
|
<div className="ui-card-left">
|
||||||
|
<span className="sub-caption">HIGH IMPACT ACTION RECOMMENDED</span>
|
||||||
|
<h3 className="ui-action-title">{activeAudit.action}</h3>
|
||||||
|
</div>
|
||||||
|
<div className="score-badge-circle">
|
||||||
|
<span className="score-num">{activeAudit.score}</span>
|
||||||
|
<span className="score-lbl">HEALTH<br/>Good / 100</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ui-issue-box">
|
||||||
|
<span className="ui-pill-warning">{activeAudit.priority}</span>
|
||||||
|
<span className="ui-issue-text">{activeAudit.issue}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ui-diff-container">
|
||||||
|
<div className="diff-col current">
|
||||||
|
<div className="diff-header">CURRENT SERP METADATA</div>
|
||||||
|
<pre className="code-block">{activeAudit.current}</pre>
|
||||||
|
</div>
|
||||||
|
<div className="diff-col suggested">
|
||||||
|
<div className="diff-header">AI RECOMMENDED (CLICK-THROUGH OPTIMIZED)</div>
|
||||||
|
<pre className="code-block highlight-code">{activeAudit.suggested}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ui-card-footer">
|
||||||
|
<div className="connected-status">
|
||||||
|
<span className="status-live-dot"></span>
|
||||||
|
<span>{activeAudit.cms} Connected</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ui-simulate-btn"
|
||||||
|
onClick={handleApprovePush}
|
||||||
|
disabled={isPushed}
|
||||||
|
style={isPushed ? { background: 'var(--teal-vibrant)', color: '#fff' } : {}}
|
||||||
|
>
|
||||||
|
{isPushed ? '✓ Pushed to CMS!' : 'Approve and push'} <ArrowUpRight size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
AGENCY PAIN POINTS SECTION
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="agency-pain-section" id="agencies">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>THE AGENCY REALITY CHECK</span>
|
||||||
|
</div>
|
||||||
|
<h2>Why traditional SEO tools bleed agency margins.</h2>
|
||||||
|
<p>Legacy tools were built for enterprise in-house teams with huge budgets, not fast-moving agencies juggling dozens of clients.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="agency-pain-grid">
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">PAIN 01: PRICING TRAP</span>
|
||||||
|
<h3>The $500/Month Seat Tax</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>Legacy Suite:</strong> $140–$250/mo covers only 5–15 sites. Adding team members costs $45–$80/mo extra per seat. Managing 25 clients quickly spirals to $600–$900 every month.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX Agency Plan:</strong> ₹2,499/mo ($29) for 10 sites or ₹7,499/mo ($79) for 30 sites. Unlimited team seats. Zero per-user penalties.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">PAIN 02: ANALYSIS PARALYSIS</span>
|
||||||
|
<h3>The 80-Page PDF Dump</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>Legacy Suite:</strong> Dumps 400-page automated audits full of false alarms. Clients get overwhelmed, panic about non-issues, and your team spends 15 hours/week explaining reports.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX Priority Engine:</strong> Surfaces the 5 high-impact root causes. Clear, human-language explanations clients instantly understand and respect.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="pain-card">
|
||||||
|
<span className="pain-card-badge">PAIN 03: THE EXECUTION GAP</span>
|
||||||
|
<h3>The "Audit != Fixed" Chasm</h3>
|
||||||
|
<div className="legacy-trap">
|
||||||
|
<strong>Legacy Suite:</strong> Tells you that 42 titles are missing and 18 canonicals are broken, but writes 0 lines of code. Your team gets trapped in spreadsheets and Jira ping-pong.
|
||||||
|
</div>
|
||||||
|
<div className="crawlerx-solution">
|
||||||
|
<CheckCircle2 size={18} color="var(--teal-vibrant)" />
|
||||||
|
<span><strong>CrawlerX AI Code Patches:</strong> Generates ready-to-approve titles, descriptions, and JSON-LD schema with one-click client approval links.</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
INTERACTIVE AGENCY ROI CALCULATOR
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="section calculator-section">
|
||||||
|
<div className="calculator-container">
|
||||||
|
<div className="calc-header">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>LIVE AGENCY ROI CALCULATOR</span>
|
||||||
|
</div>
|
||||||
|
<h2>See how much your agency saves.</h2>
|
||||||
|
<p>Slide to match your active client portfolio and see the immediate monthly & annual cost comparison.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calc-grid">
|
||||||
|
<div className="calc-controls-side">
|
||||||
|
<div className="slider-group">
|
||||||
|
<div className="slider-label-row">
|
||||||
|
<label htmlFor="client-slider">Active Client Websites Managed:</label>
|
||||||
|
<span className="client-count-display">{clientCount} Sites</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
id="client-slider"
|
||||||
|
min="3"
|
||||||
|
max="50"
|
||||||
|
value={clientCount}
|
||||||
|
onChange={(e) => setClientCount(Number(e.target.value))}
|
||||||
|
className="agency-slider"
|
||||||
|
/>
|
||||||
|
<div className="slider-markers">
|
||||||
|
<span>3 Sites (Solo)</span>
|
||||||
|
<span>10 Sites (Boutique)</span>
|
||||||
|
<span>30 Sites (Growth)</span>
|
||||||
|
<span>50 Sites (Scale)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ marginTop: '24px' }}>
|
||||||
|
<Link to="/agencies" className="btn btn-outline" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
|
||||||
|
Explore Full Agency OS Features →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="calc-results-box">
|
||||||
|
<div className="compare-row">
|
||||||
|
<span className="tool-name">Legacy Enterprise (Semrush / Ahrefs):</span>
|
||||||
|
<span className="tool-price">{savingsData.semrush}</span>
|
||||||
|
</div>
|
||||||
|
<div className="compare-row crawlerx-highlight">
|
||||||
|
<span className="tool-name">CrawlerX Agency Equivalent:</span>
|
||||||
|
<span className="tool-price">{savingsData.crawlerx}</span>
|
||||||
|
</div>
|
||||||
|
<div className="savings-total-banner">
|
||||||
|
<small>YOUR ESTIMATED ANNUAL AGENCY SAVINGS</small>
|
||||||
|
<div className="savings-number">{savingsData.annualSavings}</div>
|
||||||
|
<span>Plus ~32 hours/month saved on manual spreadsheet audits & client reporting.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
THE 3-STEP OPERATING LOOP (FIND IT, FIX IT, PROVE IT)
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="section loop-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>THE OPERATING LOOP</span>
|
||||||
|
</div>
|
||||||
|
<h2>From issue to client proof in three steps.</h2>
|
||||||
|
<p>A closed loop designed around completing the work, not maintaining endless dashboards.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="loop-tabs-nav">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`loop-tab-btn ${loopStep === 'find' ? 'active' : ''}`}
|
||||||
|
onClick={() => setLoopStep('find')}
|
||||||
|
>
|
||||||
|
01 FIND IT
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`loop-tab-btn ${loopStep === 'fix' ? 'active' : ''}`}
|
||||||
|
onClick={() => setLoopStep('fix')}
|
||||||
|
>
|
||||||
|
02 FIX IT
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`loop-tab-btn ${loopStep === 'prove' ? 'active' : ''}`}
|
||||||
|
onClick={() => setLoopStep('prove')}
|
||||||
|
>
|
||||||
|
03 PROVE IT
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="loop-display-card">
|
||||||
|
<div className="loop-copy-side">
|
||||||
|
<span className="step-tagline">{LOOP_STEPS[loopStep].title}</span>
|
||||||
|
<h3>{LOOP_STEPS[loopStep].heading}</h3>
|
||||||
|
<p>{LOOP_STEPS[loopStep].desc}</p>
|
||||||
|
<ul className="loop-bullets">
|
||||||
|
{LOOP_STEPS[loopStep].points.map((pt, i) => (
|
||||||
|
<li key={i}><CheckCircle2 size={16} color="var(--teal-vibrant)" /> {pt}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="loop-preview-side">
|
||||||
|
<div className="metric-box-highlight">
|
||||||
|
<span className="metric-big">{LOOP_STEPS[loopStep].metric}</span>
|
||||||
|
<span className="metric-desc">{LOOP_STEPS[loopStep].metricLabel}</span>
|
||||||
|
</div>
|
||||||
|
<div className="loop-ui-mockup">
|
||||||
|
<div className="mockup-header">
|
||||||
|
<span className="engine-name">CRAWL HEALTH ENGINE</span>
|
||||||
|
<span className="live-status">1,248 URLs analyzed</span>
|
||||||
|
</div>
|
||||||
|
<div className="mockup-line">
|
||||||
|
<span className="num-pill">01</span>
|
||||||
|
<div>
|
||||||
|
<strong>Missing Viewport & Slow LCP</strong>
|
||||||
|
<small>Impacting 24 mobile templates · Estimated 18% bounce reduction</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mockup-line">
|
||||||
|
<span className="num-pill">02</span>
|
||||||
|
<div>
|
||||||
|
<strong>Broken Internal Links (404)</strong>
|
||||||
|
<small>7 broken redirects bleeding link equity</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
PLATFORM ENGINES BENTO GRID
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="section bento-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>PLATFORM ENGINES</span>
|
||||||
|
</div>
|
||||||
|
<h2>One operational workspace. Six connected engines.</h2>
|
||||||
|
<p>Replace four fragmented tools with a single unified suite engineered for speed and clarity.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bento-grid">
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box">01</div>
|
||||||
|
<span className="bento-index">AUDIT ENGINE</span>
|
||||||
|
</div>
|
||||||
|
<h3>Technical Site Audit</h3>
|
||||||
|
<p>Find canonical loops, slow TTFB, missing metadata, and Core Web Vitals bottlenecks before search engines de-index your content.</p>
|
||||||
|
<div className="bento-preview-widget">
|
||||||
|
<div className="pill-metric">STATUS: 200 OK · 1,420 PAGES CRAWLED</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box">02</div>
|
||||||
|
<span className="bento-index">AI AUTOMATION</span>
|
||||||
|
</div>
|
||||||
|
<h3>AI-Powered Fixes</h3>
|
||||||
|
<p>Generate CMS-ready title tags, meta descriptions, and schema code patches. Send client approval links before anything publishes.</p>
|
||||||
|
<div className="bento-preview-widget">
|
||||||
|
<div className="pill-metric highlight">1-CLICK CMS REVIEW & APPROVAL</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box">03</div>
|
||||||
|
<span className="bento-index">SERP INTEL</span>
|
||||||
|
</div>
|
||||||
|
<h3>Precision Rank Tracking</h3>
|
||||||
|
<p>Monitor mobile and desktop search engine rankings across Google, Bing, and Yahoo with daily location-specific freshness.</p>
|
||||||
|
<div className="bento-preview-widget">
|
||||||
|
<div className="pill-metric">↑ 14 KEYWORDS IN TOP 3 POSITIONS</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box">04</div>
|
||||||
|
<span className="bento-index">DISCOVERY</span>
|
||||||
|
</div>
|
||||||
|
<h3>Intent Keyword Research</h3>
|
||||||
|
<p>Uncover high-intent commercial keywords, search volumes, click potential, and SERP feature opportunities your competitors missed.</p>
|
||||||
|
<div className="bento-preview-widget">
|
||||||
|
<div className="pill-metric">KD: 24 (LOW DIFFICULTY) · 8.2K VOL</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box">05</div>
|
||||||
|
<span className="bento-index">MAP PACK</span>
|
||||||
|
</div>
|
||||||
|
<h3>Local Map SEO</h3>
|
||||||
|
<p>Track Google Business Profile performance across granular geo-coordinates and optimize local business presence.</p>
|
||||||
|
<div className="bento-preview-widget">
|
||||||
|
<div className="pill-metric">7x7 GEO GRID · TOP 1-3 RADIUS EXPANDED</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="bento-card">
|
||||||
|
<div className="bento-card-header">
|
||||||
|
<div className="bento-icon-box">06</div>
|
||||||
|
<span className="bento-index">AI SERPS</span>
|
||||||
|
</div>
|
||||||
|
<h3>AI Search Visibility</h3>
|
||||||
|
<p>Track brand mentions and citations inside OpenAI ChatGPT, Perplexity AI, and Google AI Overviews.</p>
|
||||||
|
<div className="bento-preview-widget">
|
||||||
|
<div className="pill-metric highlight">CITED IN 42% OF PERPLEXITY QUERIES</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ textAlign: 'center', marginTop: '36px' }}>
|
||||||
|
<Link to="/features" className="btn btn-outline btn-lg">
|
||||||
|
View All Features & Technical Capabilities →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
PRICING TEASER SECTION
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="pricing-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>TRANSPARENT PRICING</span>
|
||||||
|
</div>
|
||||||
|
<h2>Plans built to scale your agency margins.</h2>
|
||||||
|
<p>No artificial per-seat gates. Choose the number of client sites you need and keep 100% of your agency markup.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pricing-cards-grid">
|
||||||
|
<article className="price-card">
|
||||||
|
<div className="plan-tier-label">ENTRY LEVEL</div>
|
||||||
|
<h3>Free</h3>
|
||||||
|
<p className="plan-tagline">Test core audit & crawl workflows on a single site.</p>
|
||||||
|
<div className="price-figure">₹0<small>/month</small></div>
|
||||||
|
<div className="plan-core-entitlement">1 Active Site</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 10 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 30 keyword lookups/mo</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Core audit engine</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Start Free ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="price-card">
|
||||||
|
<div className="plan-tier-label">SOLO OPERATOR</div>
|
||||||
|
<h3>Starter</h3>
|
||||||
|
<p className="plan-tagline">For freelancers handling up to 3 focused projects.</p>
|
||||||
|
<div className="price-figure">₹999<small>/month</small></div>
|
||||||
|
<div className="plan-core-entitlement">3 Active Sites</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 150 keyword lookups/mo</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 40 AI visibility checks</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Get Starter ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="price-card featured">
|
||||||
|
<span className="featured-banner">MOST POPULAR FOR TEAMS</span>
|
||||||
|
<div className="plan-tier-label">AGENCY ESSENTIALS</div>
|
||||||
|
<h3>Pro</h3>
|
||||||
|
<p className="plan-tagline">Complete multi-site powerhouse for 10 client websites.</p>
|
||||||
|
<div className="price-figure">₹2,499<small>/month</small></div>
|
||||||
|
<div className="plan-core-entitlement">10 Active Sites</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 3,000 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 300 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 450 keyword lookups/mo</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 120 AI visibility checks</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Client approval portal links</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> White-label client reports</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-primary" href="https://app.crawlerx.co/sign-up">Start 7-Day Pro Trial ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="price-card">
|
||||||
|
<div className="plan-tier-label">FULL OPERATIONS</div>
|
||||||
|
<h3>Agency</h3>
|
||||||
|
<p className="plan-tagline">High-volume workflows for multi-client agencies.</p>
|
||||||
|
<div className="price-figure">₹7,499<small>/month</small></div>
|
||||||
|
<div className="plan-core-entitlement">30 Active Sites</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 5,000 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,200 lookups / month</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 400 AI visibility checks</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Dedicated Agency Success Manager</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-amber" href="https://app.crawlerx.co/sign-up">Get Agency Plan ↗</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ textAlign: 'center', marginTop: '36px' }}>
|
||||||
|
<Link to="/pricing" className="btn btn-outline btn-lg">
|
||||||
|
See Full Plan Entitlements & Global Currencies (USD / CAD) →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
FAQ ACCORDION
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="faq-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>CLEAR ANSWERS</span>
|
||||||
|
</div>
|
||||||
|
<h2>Frequently asked questions.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-accordion-container">
|
||||||
|
{FAQS.map((faq, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className={`faq-item ${openFaq === idx ? 'open' : ''}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="faq-question-btn"
|
||||||
|
onClick={() => setOpenFaq(openFaq === idx ? -1 : idx)}
|
||||||
|
>
|
||||||
|
<span>{faq.q}</span>
|
||||||
|
<ChevronDown size={18} className="faq-chevron" />
|
||||||
|
</button>
|
||||||
|
{openFaq === idx && (
|
||||||
|
<div className="faq-answer">
|
||||||
|
<p>{faq.a}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ===================================================================
|
||||||
|
PRE-FOOTER CTA
|
||||||
|
=================================================================== */}
|
||||||
|
<section className="pre-footer-cta">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>START IN 60 SECONDS</span>
|
||||||
|
</div>
|
||||||
|
<h2>Ready to upgrade your agency's SEO workflow?</h2>
|
||||||
|
<p>Run your first audit right now. See exact high-impact technical issues and review CMS-ready fixes before you pay a single rupee.</p>
|
||||||
|
<div className="cta-buttons">
|
||||||
|
<a className="btn btn-primary btn-lg" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Start Free Audit <ArrowUpRight size={16} />
|
||||||
|
</a>
|
||||||
|
<Link className="btn btn-outline btn-lg" to="/agencies">
|
||||||
|
Explore Agency OS
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
319
src/pages/PricingPage.jsx
Normal file
319
src/pages/PricingPage.jsx
Normal file
@ -0,0 +1,319 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { CheckCircle2, ChevronDown, ArrowUpRight } from 'lucide-react';
|
||||||
|
|
||||||
|
const PRICING_FAQS = [
|
||||||
|
{
|
||||||
|
q: 'Are there any per-seat or user license fees?',
|
||||||
|
a: 'No. Never. Every team plan on CrawlerX includes unlimited seats. You can invite your entire agency staff, freelancers, and clients without paying any extra seat taxes.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: 'How does the 2 Months Free annual discount work?',
|
||||||
|
a: 'When you choose annual billing, you pay for 10 months upfront and receive a full 12 months of platform access, saving ~17% across your entire subscription.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: 'What happens if I manage more than 30 client sites?',
|
||||||
|
a: 'Our Agency Scale tier lets you easily add blocks of 10 additional client sites for ₹1,999/mo ($24/mo) with dedicated server crawl IP allocation.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: 'Can I cancel or switch currencies at any time?',
|
||||||
|
a: 'Yes. You can switch currencies or cancel your subscription at any time directly from your billing dashboard with zero penalty.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function PricingPage() {
|
||||||
|
const [billing, setBilling] = useState('monthly');
|
||||||
|
const [currency, setCurrency] = useState('inr');
|
||||||
|
const [openFaq, setOpenFaq] = useState(0);
|
||||||
|
|
||||||
|
const cadRate = 1.38;
|
||||||
|
|
||||||
|
const getPrice = (tier) => {
|
||||||
|
const isAnnual = billing === 'annual';
|
||||||
|
if (tier === 'free') return { display: '0', symbol: currency === 'inr' ? '₹' : currency === 'usd' ? '$' : 'CA$' };
|
||||||
|
|
||||||
|
let inrVal = 0;
|
||||||
|
let usdVal = 0;
|
||||||
|
|
||||||
|
if (tier === 'starter') {
|
||||||
|
inrVal = isAnnual ? 829 : 999;
|
||||||
|
usdVal = isAnnual ? 12 : 15;
|
||||||
|
} else if (tier === 'pro') {
|
||||||
|
inrVal = isAnnual ? 2079 : 2499;
|
||||||
|
usdVal = isAnnual ? 24 : 29;
|
||||||
|
} else if (tier === 'agency') {
|
||||||
|
inrVal = isAnnual ? 6249 : 7499;
|
||||||
|
usdVal = isAnnual ? 65 : 79;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currency === 'inr') {
|
||||||
|
return { display: inrVal.toLocaleString('en-US'), symbol: '₹' };
|
||||||
|
} else if (currency === 'usd') {
|
||||||
|
return { display: usdVal.toLocaleString('en-US'), symbol: '$' };
|
||||||
|
} else {
|
||||||
|
const cadVal = Math.round(usdVal * cadRate);
|
||||||
|
return { display: cadVal.toLocaleString('en-US'), symbol: 'CA$' };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pricing-page">
|
||||||
|
{/* Pricing Header */}
|
||||||
|
<section className="pricing-section" style={{ paddingBottom: '32px' }}>
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>SIMPLE & TRANSPARENT PLANS</span>
|
||||||
|
</div>
|
||||||
|
<h2>SEO software that earns its place on your P&L.</h2>
|
||||||
|
<p>Built for independent operators and agencies. Pay for the client volume you manage, not artificial feature gates or seat penalties.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Controls: Billing & Currency */}
|
||||||
|
<div className="pricing-controls">
|
||||||
|
<div className="toggle-group" aria-label="Billing frequency">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`toggle-btn ${billing === 'monthly' ? 'active' : ''}`}
|
||||||
|
onClick={() => setBilling('monthly')}
|
||||||
|
>
|
||||||
|
Monthly
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`toggle-btn ${billing === 'annual' ? 'active' : ''}`}
|
||||||
|
onClick={() => setBilling('annual')}
|
||||||
|
>
|
||||||
|
Annual <span className="save-pill">2 MONTHS FREE</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="toggle-group" aria-label="Currency selection">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`toggle-btn ${currency === 'inr' ? 'active' : ''}`}
|
||||||
|
onClick={() => setCurrency('inr')}
|
||||||
|
>
|
||||||
|
₹ INR
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`toggle-btn ${currency === 'usd' ? 'active' : ''}`}
|
||||||
|
onClick={() => setCurrency('usd')}
|
||||||
|
>
|
||||||
|
$ USD
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`toggle-btn ${currency === 'cad' ? 'active' : ''}`}
|
||||||
|
onClick={() => setCurrency('cad')}
|
||||||
|
>
|
||||||
|
CA$ CAD
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pricing Cards Grid */}
|
||||||
|
<div className="pricing-cards-grid">
|
||||||
|
{/* Plan 1: Free */}
|
||||||
|
<article className="price-card">
|
||||||
|
<div className="plan-tier-label">ENTRY LEVEL</div>
|
||||||
|
<h3>Free</h3>
|
||||||
|
<p className="plan-tagline">Test core audit & crawl workflows on a single site.</p>
|
||||||
|
<div className="price-figure">
|
||||||
|
{getPrice('free').symbol}{getPrice('free').display}<small>/month</small>
|
||||||
|
</div>
|
||||||
|
<div className="plan-core-entitlement">1 Active Site</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 10 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 30 keyword lookups/mo</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Core technical audit engine</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Start Free ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{/* Plan 2: Starter */}
|
||||||
|
<article className="price-card">
|
||||||
|
<div className="plan-tier-label">SOLO OPERATOR</div>
|
||||||
|
<h3>Starter</h3>
|
||||||
|
<p className="plan-tagline">For freelancers handling up to 3 focused client projects.</p>
|
||||||
|
<div className="price-figure">
|
||||||
|
{getPrice('starter').symbol}{getPrice('starter').display}<small>/month</small>
|
||||||
|
</div>
|
||||||
|
<div className="plan-core-entitlement">3 Active Sites</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 150 keyword lookups/mo</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 40 AI visibility checks</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Get Starter ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{/* Plan 3: Pro */}
|
||||||
|
<article className="price-card featured">
|
||||||
|
<span className="featured-banner">MOST POPULAR FOR TEAMS</span>
|
||||||
|
<div className="plan-tier-label">AGENCY ESSENTIALS</div>
|
||||||
|
<h3>Pro</h3>
|
||||||
|
<p className="plan-tagline">Complete multi-site powerhouse for 10 client websites.</p>
|
||||||
|
<div className="price-figure">
|
||||||
|
{getPrice('pro').symbol}{getPrice('pro').display}<small>/month</small>
|
||||||
|
</div>
|
||||||
|
<div className="plan-core-entitlement">10 Active Sites</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 3,000 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 300 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 450 keyword lookups/mo</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 120 AI visibility checks</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Client approval portal links</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> White-label client reports</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-primary" href="https://app.crawlerx.co/sign-up">Start 7-Day Pro Trial ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
{/* Plan 4: Agency */}
|
||||||
|
<article className="price-card">
|
||||||
|
<div className="plan-tier-label">FULL OPERATIONS</div>
|
||||||
|
<h3>Agency</h3>
|
||||||
|
<p className="plan-tagline">High-volume workflows for multi-client agencies.</p>
|
||||||
|
<div className="price-figure">
|
||||||
|
{getPrice('agency').symbol}{getPrice('agency').display}<small>/month</small>
|
||||||
|
</div>
|
||||||
|
<div className="plan-core-entitlement">30 Active Sites</div>
|
||||||
|
<ul className="plan-features-ul">
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 5,000 pages per audit</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 tracked keywords</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,200 lookups / month</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 400 AI visibility checks</li>
|
||||||
|
<li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Dedicated Agency Success Manager</li>
|
||||||
|
</ul>
|
||||||
|
<a className="btn btn-amber" href="https://app.crawlerx.co/sign-up">Get Agency Plan ↗</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detailed Feature Comparison Matrix */}
|
||||||
|
<div className="comparison-table-wrapper" style={{ marginTop: '64px' }}>
|
||||||
|
<table className="compare-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Detailed Platform Entitlements</th>
|
||||||
|
<th>Free</th>
|
||||||
|
<th>Starter</th>
|
||||||
|
<th className="col-crawlerx">Pro (Recommended)</th>
|
||||||
|
<th>Agency</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Active Sites Tracked</strong></td>
|
||||||
|
<td>1</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td className="col-crawlerx"><strong>10</strong></td>
|
||||||
|
<td><strong>30</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Pages Crawled per Audit</strong></td>
|
||||||
|
<td>100</td>
|
||||||
|
<td>1,000</td>
|
||||||
|
<td className="col-crawlerx"><strong>3,000</strong></td>
|
||||||
|
<td><strong>5,000</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Tracked Keywords</strong></td>
|
||||||
|
<td>10</td>
|
||||||
|
<td>100</td>
|
||||||
|
<td className="col-crawlerx"><strong>300</strong></td>
|
||||||
|
<td><strong>1,000</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Keyword Lookups per Month</strong></td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>150</td>
|
||||||
|
<td className="col-crawlerx"><strong>450</strong></td>
|
||||||
|
<td><strong>1,200</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>AI Search Visibility Checks</strong></td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>40 / mo</td>
|
||||||
|
<td className="col-crawlerx"><strong>120 / mo</strong></td>
|
||||||
|
<td><strong>400 / mo</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Client Approval Portal Links</strong></td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Unlimited</strong></td>
|
||||||
|
<td><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Unlimited</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>White-Label Custom Reports</strong></td>
|
||||||
|
<td>—</td>
|
||||||
|
<td>—</td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Included</strong></td>
|
||||||
|
<td><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Custom Domain</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Team Members / User Seats</strong></td>
|
||||||
|
<td>1</td>
|
||||||
|
<td>Unlimited</td>
|
||||||
|
<td className="col-crawlerx"><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
|
||||||
|
<td><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Pricing FAQ */}
|
||||||
|
<section className="faq-section">
|
||||||
|
<div className="section-lead-center">
|
||||||
|
<div className="eyebrow-pill">
|
||||||
|
<span className="status-dot"></span>
|
||||||
|
<span>BILLING FAQ</span>
|
||||||
|
</div>
|
||||||
|
<h2>Clear billing policies. Zero hidden fees.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="faq-accordion-container">
|
||||||
|
{PRICING_FAQS.map((faq, idx) => (
|
||||||
|
<div key={idx} className={`faq-item ${openFaq === idx ? 'open' : ''}`}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="faq-question-btn"
|
||||||
|
onClick={() => setOpenFaq(openFaq === idx ? -1 : idx)}
|
||||||
|
>
|
||||||
|
<span>{faq.q}</span>
|
||||||
|
<ChevronDown size={18} className="faq-chevron" />
|
||||||
|
</button>
|
||||||
|
{openFaq === idx && (
|
||||||
|
<div className="faq-answer">
|
||||||
|
<p>{faq.a}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Pre-footer CTA */}
|
||||||
|
<section className="pre-footer-cta">
|
||||||
|
<div className="eyebrow-pill amber">
|
||||||
|
<span className="status-dot amber"></span>
|
||||||
|
<span>GET STARTED NOW</span>
|
||||||
|
</div>
|
||||||
|
<h2>Unlock 10 client sites for just ₹2,499/mo ($29).</h2>
|
||||||
|
<p>No credit card required to start. See live crawl metrics and review CMS patches in 60 seconds.</p>
|
||||||
|
<div className="cta-buttons">
|
||||||
|
<a className="btn btn-primary btn-lg" href="https://app.crawlerx.co/sign-up">
|
||||||
|
Start Free 7-Day Trial <ArrowUpRight size={16} />
|
||||||
|
</a>
|
||||||
|
<Link className="btn btn-outline btn-lg" to="/compare">
|
||||||
|
See Semrush Comparison
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user