143 lines
7.4 KiB
TypeScript
143 lines
7.4 KiB
TypeScript
"use client"
|
|
|
|
import { useRef } from "react"
|
|
import { motion, useScroll, useTransform } from "framer-motion"
|
|
import { ShieldCheck, Zap, Globe, ArrowRight, Play } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
export function LandingHero() {
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const { scrollYProgress } = useScroll({
|
|
target: containerRef,
|
|
offset: ["start start", "end start"],
|
|
})
|
|
|
|
const y1 = useTransform(scrollYProgress, [0, 1], [0, 200])
|
|
const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0])
|
|
const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.9])
|
|
|
|
return (
|
|
<section
|
|
ref={containerRef}
|
|
className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden"
|
|
>
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute inset-0 z-0 pointer-events-none">
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-600/20 blur-[120px] rounded-full animate-pulse will-change-[transform,opacity]" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-600/20 blur-[120px] rounded-full animate-pulse delay-700 will-change-[transform,opacity]" />
|
|
</div>
|
|
|
|
{/* Grid Pattern */}
|
|
<div className="absolute inset-0 z-0 opacity-[0.03] bg-[url('https://grainy-gradients.vercel.app/noise.svg')] pointer-events-none" />
|
|
<div
|
|
className="absolute inset-0 z-0 opacity-[0.4]"
|
|
style={{
|
|
backgroundImage: `radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0)`,
|
|
backgroundSize: '40px 40px'
|
|
}}
|
|
/>
|
|
|
|
<motion.div
|
|
style={{ y: y1, opacity, scale }}
|
|
className="container mx-auto px-6 relative z-10 text-center"
|
|
>
|
|
{/* Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8"
|
|
>
|
|
<span className="flex h-2 w-2 rounded-full bg-indigo-500 animate-ping" />
|
|
<span className="text-xs font-black uppercase tracking-[0.2em] text-indigo-400">Next-Gen Supply Chain</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading */}
|
|
<motion.h1
|
|
initial={{ opacity: 1, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="text-5xl md:text-8xl font-black tracking-tighter text-white mb-8 leading-[0.9]"
|
|
>
|
|
THE PULSE OF <br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-indigo-400 animate-gradient-x">GLOBAL COMMERCE.</span>
|
|
</motion.h1>
|
|
|
|
{/* Subtext */}
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 0.2 }}
|
|
className="max-w-2xl mx-auto text-lg md:text-xl text-slate-300 font-medium mb-12 leading-relaxed"
|
|
>
|
|
Bridge the gap between vendors and suppliers with the world's most advanced
|
|
encrypted ecosystem. Sync Shopify, chat securely, and scale effortlessly.
|
|
</motion.p>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.6 }}
|
|
className="flex flex-col sm:flex-row items-center justify-center gap-6"
|
|
>
|
|
<Link
|
|
href="/signup"
|
|
className="group relative px-10 py-5 bg-indigo-600 rounded-2xl font-black text-white overflow-hidden shadow-2xl shadow-indigo-600/20 active:scale-95 transition-all"
|
|
>
|
|
<div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
|
|
<span className="relative flex items-center gap-2">
|
|
GET STARTED NOW <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</span>
|
|
</Link>
|
|
|
|
<button className="flex items-center gap-3 px-8 py-5 rounded-2xl font-black text-white hover:bg-white/5 transition-all border border-transparent hover:border-white/10 group">
|
|
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<Play className="w-4 h-4 fill-white ml-0.5" />
|
|
</div>
|
|
WATCH DEMO
|
|
</button>
|
|
</motion.div>
|
|
|
|
{/* Trust Logos Placeholder / Stats */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 1 }}
|
|
className="mt-24 pt-12 border-t border-white/5 grid grid-cols-2 md:grid-cols-4 gap-8 opacity-40 hover:opacity-60 transition-opacity"
|
|
>
|
|
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
|
|
<ShieldCheck className="w-5 h-5 text-indigo-400" /> AES-250 READY
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
|
|
<Zap className="w-5 h-5 text-indigo-400" /> SHOPIFY SYNC
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
|
|
<Globe className="w-5 h-5 text-indigo-400" /> 120+ COUNTRIES
|
|
</div>
|
|
<div className="flex items-center justify-center gap-2 font-black tracking-widest text-sm">
|
|
<ShieldCheck className="w-5 h-5 text-indigo-400" /> E2E CHAT
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.5, duration: 1 }}
|
|
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
|
|
>
|
|
<div className="w-[1px] h-12 bg-gradient-to-b from-transparent via-indigo-500/50 to-transparent relative overflow-hidden">
|
|
<motion.div
|
|
animate={{ y: [0, 48] }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
|
|
className="absolute top-0 left-0 w-full h-1/3 bg-indigo-500"
|
|
/>
|
|
</div>
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">Scroll</span>
|
|
</motion.div>
|
|
</section>
|
|
)
|
|
}
|