228 lines
12 KiB
TypeScript
228 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useScroll, useTransform } from 'framer-motion';
|
|
import { Rocket, Target, Zap, ShieldCheck, Cpu, ChevronRight } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import dynamic from 'next/dynamic';
|
|
|
|
const Hero3D = dynamic(() => import('@/components/Hero3D'), { ssr: false });
|
|
|
|
const features = [
|
|
{
|
|
icon: Target,
|
|
title: "Always-On Radar",
|
|
description: "Monitors dozens of auction sites simultaneously. The engine never sleeps, so you never miss an ending lot.",
|
|
color: "text-blue-500",
|
|
bg: "bg-blue-500/10"
|
|
},
|
|
{
|
|
icon: Cpu,
|
|
title: "AI-Grade Filtering",
|
|
description: "External LLMs score and filter every lot against your precise custom targets. We drop the noise and show only true deals.",
|
|
color: "text-purple-500",
|
|
bg: "bg-purple-500/10"
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Real-Time Comms",
|
|
description: "Instant alerts delivered via Telegram, Discord, or Email the minute a high-value lot appears or is about to close.",
|
|
color: "text-yellow-500",
|
|
bg: "bg-yellow-500/10"
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
title: "Stealth Engine",
|
|
description: "Human-like browsing algorithms bypass standard detection, ensuring reliable intelligence gathering from any platform.",
|
|
color: "text-green-500",
|
|
bg: "bg-green-500/10"
|
|
}
|
|
];
|
|
|
|
export default function LandingPage() {
|
|
const { scrollYProgress } = useScroll();
|
|
const yHero = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);
|
|
const opacityHero = useTransform(scrollYProgress, [0, 0.2], [1, 0]);
|
|
|
|
return (
|
|
<div className="relative w-full min-h-screen bg-background text-foreground overflow-hidden font-sans">
|
|
|
|
{/* Dynamic 3D Background */}
|
|
<div className="fixed inset-0 w-full h-[100vh] pointer-events-none -z-20">
|
|
<Hero3D />
|
|
</div>
|
|
|
|
{/* Dynamic Background Blob Elements */}
|
|
<div className="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 opacity-40 pointer-events-none mix-blend-screen">
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
rotate: [0, 90, 0],
|
|
}}
|
|
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
|
className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-primary/20 rounded-full blur-[140px]"
|
|
/>
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.5, 1],
|
|
rotate: [0, -90, 0],
|
|
}}
|
|
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
|
|
className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-accent/20 rounded-full blur-[140px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<section className="container mx-auto px-6 pt-32 pb-32 text-center relative z-10 min-h-[90vh] flex flex-col justify-center">
|
|
<motion.div
|
|
style={{ y: yHero, opacity: opacityHero }}
|
|
initial={{ opacity: 0, y: 50, scale: 0.9 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
transition={{ duration: 1, type: "spring" as const, bounce: 0.4 }}
|
|
className="max-w-5xl mx-auto flex flex-col items-center backdrop-blur-sm bg-background/30 p-12 rounded-[3rem] border border-white/10 shadow-2xl"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: 0.2, type: "spring" as const }}
|
|
className="mb-8 inline-flex items-center gap-3 px-6 py-2 rounded-full bg-secondary/80 backdrop-blur-md text-primary font-bold text-sm shadow-[0_0_30px_rgba(139,92,246,0.3)] border border-primary/20"
|
|
>
|
|
<span className="flex h-3 w-3 relative">
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
|
<span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
|
|
</span>
|
|
System v5 Neural Engine Online
|
|
</motion.div>
|
|
<h1 className="text-6xl md:text-8xl font-black mb-8 tracking-tighter leading-[1.1]">
|
|
The AI Sniper That <br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-br from-primary via-accent to-blue-500 drop-shadow-sm">Never Sleeps</span>
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-3xl mx-auto leading-relaxed font-medium">
|
|
BidWraith watches every global auction site, scores every lot with deep AI, and alerts you the moment a real deal drops. Get the ultimate edge.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-6 justify-center w-full sm:w-auto">
|
|
<Link href="/dashboard" className="group relative inline-flex items-center justify-center gap-3 bg-primary text-primary-foreground px-10 py-5 rounded-2xl font-bold text-xl transition-all hover:scale-105 shadow-[0_0_40px_rgba(139,92,246,0.5)] w-full sm:w-auto overflow-hidden">
|
|
<motion.span
|
|
className="absolute inset-0 bg-white/20"
|
|
initial={{ x: "-100%" }}
|
|
whileHover={{ x: "100%" }}
|
|
transition={{ duration: 0.6, ease: "easeInOut" }}
|
|
/>
|
|
<Rocket className="w-6 h-6 group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" />
|
|
Initialize Console
|
|
</Link>
|
|
<Link href="#features" className="group inline-flex items-center justify-center gap-3 bg-secondary/80 backdrop-blur-md hover:bg-secondary text-foreground border border-border px-10 py-5 rounded-2xl font-bold text-xl transition-all w-full sm:w-auto">
|
|
Explore Tech
|
|
<ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Stats Strip with Scroll Reveal */}
|
|
<section className="py-12 relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8 }}
|
|
className="container mx-auto px-6"
|
|
>
|
|
<div className="bg-secondary/60 backdrop-blur-2xl border border-white/10 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-transparent to-accent/10 pointer-events-none" />
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center relative z-10">
|
|
{[
|
|
{ label: 'Uptime', value: '24/7', color: 'text-primary' },
|
|
{ label: 'Alert Latency', value: '< 1s', color: 'text-accent' },
|
|
{ label: 'API Endpoints', value: '42', color: 'text-blue-500' },
|
|
{ label: 'Stealth Rate', value: '100%', color: 'text-green-500' }
|
|
].map((stat, i) => (
|
|
<motion.div
|
|
key={i}
|
|
whileHover={{ scale: 1.1 }}
|
|
className="flex flex-col items-center justify-center p-4 cursor-default"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
whileInView={{ scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ type: "spring" as const, delay: i * 0.1 }}
|
|
className={`text-5xl md:text-6xl font-black mb-2 drop-shadow-md ${stat.color}`}
|
|
>
|
|
{stat.value}
|
|
</motion.div>
|
|
<div className="text-sm md:text-base font-bold text-muted-foreground uppercase tracking-widest">{stat.label}</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section id="features" className="py-32 relative z-10">
|
|
<div className="container mx-auto px-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-24"
|
|
>
|
|
<h2 className="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight">Core <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent">Capabilities</span></h2>
|
|
<p className="text-muted-foreground text-2xl max-w-3xl mx-auto font-medium">Advanced architecture designed to give you an unfair advantage in the global market.</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto">
|
|
{features.map((feature, idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, y: 50, rotateX: -10 }}
|
|
whileInView={{ opacity: 1, y: 0, rotateX: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.6, delay: idx * 0.1, type: "spring" as const, bounce: 0.3 }}
|
|
whileHover={{ y: -10, scale: 1.02 }}
|
|
className="p-12 rounded-[2.5rem] bg-card/80 backdrop-blur-xl border border-white/5 hover:border-primary/30 transition-all shadow-xl hover:shadow-2xl group relative overflow-hidden"
|
|
>
|
|
<div className={`absolute top-0 right-0 w-64 h-64 ${feature.bg} rounded-full blur-[80px] -z-10 group-hover:scale-150 transition-transform duration-700`} />
|
|
<div className={`w-24 h-24 rounded-3xl ${feature.bg} flex items-center justify-center mb-8 group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300 shadow-inner`}>
|
|
<feature.icon className={`w-12 h-12 ${feature.color}`} />
|
|
</div>
|
|
<h3 className="text-3xl font-black mb-4 tracking-tight">{feature.title}</h3>
|
|
<p className="text-muted-foreground text-xl leading-relaxed font-medium">
|
|
{feature.description}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer CTA with 3D feel */}
|
|
<section className="py-32 text-center relative z-10 overflow-hidden">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="container mx-auto px-6"
|
|
>
|
|
<div className="relative bg-gradient-to-br from-primary/30 via-background to-accent/30 border border-white/10 pt-32 pb-24 rounded-[4rem] shadow-2xl overflow-hidden backdrop-blur-md">
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
|
|
className="absolute top-[-50%] left-[-20%] w-[100%] h-[150%] bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay pointer-events-none"
|
|
/>
|
|
|
|
<div className="relative z-10">
|
|
<h2 className="text-6xl md:text-8xl font-black mb-12 tracking-tight drop-shadow-xl">Ready to dominate?</h2>
|
|
<Link href="/dashboard" className="group inline-flex items-center gap-4 bg-foreground text-background font-bold text-2xl px-14 py-7 rounded-full transition-all shadow-[0_20px_50px_rgba(0,0,0,0.3)] hover:shadow-[0_20px_50px_rgba(139,92,246,0.5)] hover:-translate-y-2">
|
|
Start Sniping Now
|
|
<Rocket className="w-8 h-8 group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|