257 lines
9.7 KiB
TypeScript
257 lines
9.7 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 - Cyan / Ice Blue (#4faede) */}
|
|
<path d="M20 4L34 12L20 20L6 12L20 4Z" fill="url(#cube-top-theme)" />
|
|
{/* Left facet - MetatronCube Blue (#3779b9) */}
|
|
<path d="M6 12L20 20V36L6 28V12Z" fill="url(#cube-left-theme)" />
|
|
{/* Right facet - Deep Navy (#0f1d34) */}
|
|
<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="#4faede" />
|
|
<stop offset="1" stopColor="#3779b9" />
|
|
</linearGradient>
|
|
<linearGradient id="cube-left-theme" x1="6" y1="12" x2="20" y2="36" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#3779b9" />
|
|
<stop offset="1" stopColor="#2563eb" />
|
|
</linearGradient>
|
|
<linearGradient id="cube-right-theme" x1="20" y1="20" x2="34" y2="36" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#0f1d34" />
|
|
<stop offset="1" stopColor="#091424" />
|
|
</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="#3779b9" 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-[#3779b9] 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="#4faede" />
|
|
<stop offset="1" stopColor="#3779b9" />
|
|
</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-[#0f1d34] to-[#1e3a66] shadow-xs" />
|
|
<div className="w-4 h-14 rounded-md bg-gradient-to-t from-[#1e3a66] to-[#2563eb] shadow-xs" />
|
|
<div className="w-4 h-19 rounded-md bg-gradient-to-t from-[#2563eb] to-[#3779b9] shadow-xs" />
|
|
<div className="w-4 h-24 rounded-md bg-gradient-to-t from-[#3779b9] to-[#4faede] shadow-md shadow-[#4faede]/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-[#3779b9]" />
|
|
<div className="size-2 rounded-full bg-[#3779b9]" />
|
|
</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-[#f0f6fc] border border-[#d6e4f3] flex items-center gap-2">
|
|
<span className="size-2 rounded-full bg-[#3779b9] shrink-0" />
|
|
<span className="text-[11px] font-bold text-[#0f1d34]">More Traffic</span>
|
|
</div>
|
|
|
|
<div className="p-2 rounded-xl bg-[#e0f2fe] border border-sky-100 flex items-center gap-2">
|
|
<span className="size-2 rounded-full bg-[#4faede] shrink-0" />
|
|
<span className="text-[11px] font-bold text-[#0284c7]">Real Results</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hand-drawn Loop Arrow */}
|
|
<div className="absolute -bottom-8 -left-8 size-16 text-[#4faede]">
|
|
<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="#4faede"
|
|
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="#4faede" stopOpacity="0.22" />
|
|
<stop offset="0.6" stopColor="#3779b9" stopOpacity="0.12" />
|
|
<stop offset="1" stopColor="#0f1d34" 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="#4faede"
|
|
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-[#3779b9]" />,
|
|
upi: <Zap className="size-4.5 text-[#3779b9]" />,
|
|
gst: <FileText className="size-4.5 text-[#3779b9]" />,
|
|
cards: <CreditCard className="size-4.5 text-[#3779b9]" />,
|
|
support: <span className="text-sm">🇮🇳</span>,
|
|
};
|
|
|
|
export function renderTrustIcon(id: string) {
|
|
return TRUST_ICONS[id] ?? <ShieldCheck className="size-4.5 text-[#3779b9]" />;
|
|
}
|