0e8bfa1fa1
The Oct-era rebrand commit swapped the sidebar/app-shell logo and most daisyUI component colors, but missed several spots: - app.css's "crawlerx" / "crawlerx-dark" theme tokens were still the old MetatronCube blue (#3779b9) instead of the brand guide's teal (#0E6E6A). Every daisyUI-token-based component (most of the app) now gets the correct color with this one change. - AuthPage.tsx (sign-in/sign-up) was untouched by the token system: a mountain-climber stock photo background, "Metatroncube / Solutions" wordmark, blue/cyan gradients, generic value props, and a stray alt="Metatroncube" on the logo. Replaced with the brand gradient, the CrawlerX mark, on-brand copy and value props, and the real color tokens instead of hardcoded Tailwind blue/cyan classes. - Four more components (onboarding chat, post-signup onboarding, the OAuth consent screen, the subscribe page) still pointed their logo <img> at /transparent-logo.png instead of /crawlerx-mark.png. - PricingGraphics.tsx (the decorative cube/chart illustration on the subscribe page) had ~17 hardcoded MetatronCube-blue hex values; remapped the whole palette to the CrawlerX teal family. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
324 lines
11 KiB
TypeScript
324 lines
11 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Search,
|
|
Sprout,
|
|
Rocket,
|
|
Crown,
|
|
Landmark,
|
|
Sparkles,
|
|
ShieldCheck,
|
|
Zap,
|
|
FileText,
|
|
CreditCard,
|
|
} from "lucide-react";
|
|
|
|
export function CrawlerXLogo() {
|
|
return (
|
|
<div className="flex items-center gap-3 select-none">
|
|
<svg
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 40 40"
|
|
fill="none"
|
|
className="shrink-0 drop-shadow-sm"
|
|
>
|
|
{/* Top facet - CrawlerX accent teal (#3fb6ae) */}
|
|
<path d="M20 4L34 12L20 20L6 12L20 4Z" fill="url(#cube-top-theme)" />
|
|
{/* Left facet - CrawlerX primary teal (#0e6e6a) */}
|
|
<path d="M6 12L20 20V36L6 28V12Z" fill="url(#cube-left-theme)" />
|
|
{/* Right facet - CrawlerX ink navy (#0f161c) */}
|
|
<path d="M20 20L34 12V28L20 36V20Z" fill="url(#cube-right-theme)" />
|
|
{/* Subtle highlights */}
|
|
<path d="M20 20V36" stroke="rgba(255,255,255,0.25)" strokeWidth="1" />
|
|
<path
|
|
d="M6 12L20 20L34 12"
|
|
stroke="rgba(255,255,255,0.35)"
|
|
strokeWidth="0.8"
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id="cube-top-theme"
|
|
x1="6"
|
|
y1="4"
|
|
x2="34"
|
|
y2="20"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#3fb6ae" />
|
|
<stop offset="1" stopColor="#0e6e6a" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="cube-left-theme"
|
|
x1="6"
|
|
y1="12"
|
|
x2="20"
|
|
y2="36"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#0e6e6a" />
|
|
<stop offset="1" stopColor="#127b76" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id="cube-right-theme"
|
|
x1="20"
|
|
y1="20"
|
|
x2="34"
|
|
y2="36"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#0f161c" />
|
|
<stop offset="1" stopColor="#0a1210" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<div>
|
|
<div className="font-extrabold text-xl text-slate-900 tracking-tight leading-none">
|
|
CrawlerX
|
|
</div>
|
|
<div className="text-[10px] font-bold text-slate-400 tracking-wider uppercase mt-1">
|
|
SEO Made Actionable
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function DotGridMatrix({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
width="140"
|
|
height="90"
|
|
viewBox="0 0 140 90"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
id="dot-grid-theme"
|
|
x="0"
|
|
y="0"
|
|
width="16"
|
|
height="16"
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<circle cx="2" cy="2" r="1.5" fill="#0e6e6a" opacity="0.25" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="140" height="90" fill="url(#dot-grid-theme)" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function Floating3DChartCard({ className }: { className?: string }) {
|
|
return (
|
|
<div
|
|
className={`pointer-events-none select-none transition-transform duration-700 ease-out hover:scale-105 ${className}`}
|
|
aria-hidden="true"
|
|
>
|
|
<div className="relative">
|
|
{/* Main Chart Card */}
|
|
<div className="relative rounded-3xl bg-white/95 p-5 shadow-[0_25px_60px_rgba(55,121,185,0.18),0_10px_25px_rgba(15,29,52,0.05)] border border-slate-100/90 backdrop-blur-xl -rotate-6 w-44 h-44 flex flex-col justify-between">
|
|
{/* Top Row: "Grow Faster" Pill & Growth Arrow */}
|
|
<div className="flex items-center justify-between w-full">
|
|
<span className="px-2.5 py-0.5 rounded-full bg-[#0e6e6a] text-white text-[10px] font-bold shadow-xs tracking-wide">
|
|
Grow Faster
|
|
</span>
|
|
|
|
<svg width="28" height="28" viewBox="0 0 32 32" fill="none">
|
|
<path
|
|
d="M6 24L16 14L21 19L27 9"
|
|
stroke="url(#theme-growth-arrow)"
|
|
strokeWidth="3.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M21 9H27V15"
|
|
stroke="url(#theme-growth-arrow)"
|
|
strokeWidth="3.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id="theme-growth-arrow"
|
|
x1="6"
|
|
y1="24"
|
|
x2="27"
|
|
y2="9"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#3fb6ae" />
|
|
<stop offset="1" stopColor="#0e6e6a" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* 4 Rising Theme Blue Bars */}
|
|
<div className="flex items-end gap-2.5 w-full justify-center pb-1">
|
|
<div className="w-4 h-9 rounded-md bg-gradient-to-t from-[#0f161c] to-[#163b39] shadow-xs" />
|
|
<div className="w-4 h-14 rounded-md bg-gradient-to-t from-[#163b39] to-[#127b76] shadow-xs" />
|
|
<div className="w-4 h-19 rounded-md bg-gradient-to-t from-[#127b76] to-[#0e6e6a] shadow-xs" />
|
|
<div className="w-4 h-24 rounded-md bg-gradient-to-t from-[#0e6e6a] to-[#3fb6ae] shadow-md shadow-[#3fb6ae]/30" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Small Plant in White Pot */}
|
|
<div className="absolute -bottom-3 -left-3 size-11 z-20">
|
|
<svg viewBox="0 0 44 44" fill="none">
|
|
<path
|
|
d="M12 28L15 40H29L32 28H12Z"
|
|
fill="#ffffff"
|
|
stroke="#e2e8f0"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M22 28C22 18 10 14 6 20C10 26 18 26 22 28Z"
|
|
fill="#10b981"
|
|
/>
|
|
<path
|
|
d="M22 28C22 16 34 12 38 18C34 24 26 24 22 28Z"
|
|
fill="#059669"
|
|
/>
|
|
<path
|
|
d="M22 28V12"
|
|
stroke="#047857"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Floating3DSearchCard({ className }: { className?: string }) {
|
|
return (
|
|
<div
|
|
className={`pointer-events-none select-none transition-transform duration-700 ease-out hover:scale-105 ${className}`}
|
|
aria-hidden="true"
|
|
>
|
|
<div className="relative">
|
|
{/* Tablet / Card */}
|
|
<div className="relative rounded-3xl bg-white/95 p-4 shadow-[0_25px_60px_rgba(55,121,185,0.18),0_10px_25px_rgba(15,29,52,0.05)] border border-slate-100/90 backdrop-blur-xl rotate-6 w-48 space-y-2.5">
|
|
{/* Search Input Simulation */}
|
|
<div className="h-7 w-full rounded-xl bg-slate-50 border border-slate-200/80 px-2.5 flex items-center justify-between">
|
|
<Search className="size-3 text-[#0e6e6a]" />
|
|
<div className="size-2 rounded-full bg-[#0e6e6a]" />
|
|
</div>
|
|
|
|
{/* 3 Theme Pills */}
|
|
<div className="space-y-2 pt-0.5">
|
|
<div className="p-2 rounded-xl bg-emerald-50/80 border border-emerald-100 flex items-center gap-2">
|
|
<span className="size-2 rounded-full bg-emerald-500 shrink-0" />
|
|
<span className="text-[11px] font-bold text-emerald-800">
|
|
Better Rankings
|
|
</span>
|
|
</div>
|
|
|
|
<div className="p-2 rounded-xl bg-[#f0f8f7] border border-[#d9e8e7] flex items-center gap-2">
|
|
<span className="size-2 rounded-full bg-[#0e6e6a] shrink-0" />
|
|
<span className="text-[11px] font-bold text-[#0f161c]">
|
|
More Traffic
|
|
</span>
|
|
</div>
|
|
|
|
<div className="p-2 rounded-xl bg-[#e3f3f2] border border-sky-100 flex items-center gap-2">
|
|
<span className="size-2 rounded-full bg-[#3fb6ae] shrink-0" />
|
|
<span className="text-[11px] font-bold text-[#1a8a84]">
|
|
Real Results
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hand-drawn Loop Arrow */}
|
|
<div className="absolute -bottom-8 -left-8 size-16 text-[#3fb6ae]">
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
|
<path
|
|
d="M38 8C34 22 14 18 12 32C11 38 18 42 24 38L22 42"
|
|
stroke="#3fb6ae"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CornerWaveDecoration() {
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden z-0">
|
|
{/* Top Right Blue Glow Aura & Ribbon */}
|
|
<svg
|
|
className="absolute -top-16 -right-16 w-[700px] h-[600px] opacity-80"
|
|
viewBox="0 0 700 600"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M740 -80C560 30 500 220 580 340C660 460 540 560 460 600L740 600Z"
|
|
fill="url(#theme-top-right-wave)"
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id="theme-top-right-wave"
|
|
x1="740"
|
|
y1="0"
|
|
x2="420"
|
|
y2="520"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#3fb6ae" stopOpacity="0.22" />
|
|
<stop offset="0.6" stopColor="#0e6e6a" stopOpacity="0.12" />
|
|
<stop offset="1" stopColor="#0f161c" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
|
|
{/* Bottom Left Blue Aura Ribbon */}
|
|
<svg
|
|
className="absolute -bottom-20 -left-20 w-[640px] h-[520px] opacity-75"
|
|
viewBox="0 0 640 520"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M-60 560C120 440 180 300 120 180C60 60 140 -20 220 -40"
|
|
stroke="#3fb6ae"
|
|
strokeWidth="32"
|
|
strokeOpacity="0.12"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const PLAN_ICONS = {
|
|
sprout: <Sprout className="size-5" />,
|
|
rocket: <Rocket className="size-5" />,
|
|
crown: <Crown className="size-5" />,
|
|
landmark: <Landmark className="size-5" />,
|
|
};
|
|
|
|
export function renderPlanIcon(type: keyof typeof PLAN_ICONS) {
|
|
return PLAN_ICONS[type] ?? <Sparkles className="size-5" />;
|
|
}
|
|
|
|
const TRUST_ICONS: Record<string, React.ReactNode> = {
|
|
guarantee: <ShieldCheck className="size-4.5 text-[#0e6e6a]" />,
|
|
upi: <Zap className="size-4.5 text-[#0e6e6a]" />,
|
|
gst: <FileText className="size-4.5 text-[#0e6e6a]" />,
|
|
cards: <CreditCard className="size-4.5 text-[#0e6e6a]" />,
|
|
support: <span className="text-sm">🇮🇳</span>,
|
|
};
|
|
|
|
export function renderTrustIcon(id: string) {
|
|
return TRUST_ICONS[id] ?? <ShieldCheck className="size-4.5 text-[#0e6e6a]" />;
|
|
}
|