import { useEffect, useRef } from "react"; import { Link } from "react-router"; import { ArrowRight, Zap, Shield, Clock, TrendingUp, MessageCircle } from "lucide-react"; export default function HeroSection() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let animationId: number; let mouseX = 0; let mouseY = 0; let isTouch = "ontouchstart" in window; const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; resize(); window.addEventListener("resize", resize); const handleMouse = (e: MouseEvent) => { mouseX = e.clientX; mouseY = e.clientY; }; if (!isTouch) { window.addEventListener("mousemove", handleMouse, { passive: true }); } interface Particle { x: number; y: number; vx: number; vy: number; radius: number; alpha: number; hue: number; } // Fewer particles on mobile for performance const PARTICLE_COUNT = isTouch ? 40 : 80; const particles: Particle[] = []; for (let i = 0; i < PARTICLE_COUNT; i++) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, radius: Math.random() * 2 + 1, alpha: Math.random() * 0.5 + 0.2, hue: 210 + Math.random() * 30, }); } const animate = (time: number) => { ctx.fillStyle = "rgba(5, 5, 5, 0.08)"; ctx.fillRect(0, 0, canvas.width, canvas.height); particles.forEach((p) => { // Mouse attraction (desktop only) if (!isTouch) { const dx = mouseX - p.x; const dy = mouseY - p.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 200) { p.vx += dx * 0.0001; p.vy += dy * 0.0001; } } // Flow field const angle = Math.sin(p.x * 0.005 + time * 0.0005) * Math.cos(p.y * 0.005 + time * 0.0003); p.vx += Math.cos(angle) * 0.02; p.vy += Math.sin(angle) * 0.02; p.vx *= 0.98; p.vy *= 0.98; p.x += p.vx; p.y += p.vy; // Wrap if (p.x < 0) p.x = canvas.width; if (p.x > canvas.width) p.x = 0; if (p.y < 0) p.y = canvas.height; if (p.y > canvas.height) p.y = 0; // Draw glow const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius * 6); gradient.addColorStop(0, `hsla(${p.hue}, 80%, 60%, ${p.alpha})`); gradient.addColorStop(0.4, `hsla(${p.hue}, 60%, 40%, ${p.alpha * 0.3})`); gradient.addColorStop(1, "transparent"); ctx.beginPath(); ctx.arc(p.x, p.y, p.radius * 6, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); // Core ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fillStyle = `hsla(${p.hue}, 90%, 70%, ${p.alpha})`; ctx.fill(); }); // Connections (fewer on mobile) const maxDist = isTouch ? 100 : 150; for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < maxDist) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = `hsla(220, 60%, 50%, ${0.1 * (1 - dist / maxDist)})`; ctx.lineWidth = 0.5; ctx.stroke(); } } } animationId = requestAnimationFrame(animate); }; ctx.fillStyle = "#050505"; ctx.fillRect(0, 0, canvas.width, canvas.height); animationId = requestAnimationFrame(animate); return () => { cancelAnimationFrame(animationId); window.removeEventListener("resize", resize); window.removeEventListener("mousemove", handleMouse); }; }, []); return (
{/* Canvas Background */} {/* Content */}
{/* Badge */}
Trusted by 50,000+ happy customers
{/* Heading */}

Unlock{" "} Premium Tools
at Unbeatable Prices

{/* Subtitle */}

Get up to 90% OFF on software, streaming accounts, AI tools, and digital assets. Private accounts with 1-year warranty.

{/* CTAs */}
Explore Deals Order via WhatsApp
{/* Trust Badges - responsive grid */}
{[ { icon: Clock, label: "1-2h Delivery" }, { icon: Shield, label: "1-Year Warranty" }, { icon: Zap, label: "Private Accounts" }, ].map((badge) => (
{badge.label}
))}
{/* Bottom gradient fade */}
); }