187 lines
8.6 KiB
TypeScript
187 lines
8.6 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { Check, ChevronRight, Play } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
const features = [
|
|
'GPS Integrado de Alta Precisão',
|
|
'Display HUD em Tempo Real',
|
|
'Processador ESP32 Dual-Core',
|
|
];
|
|
|
|
export function Hero() {
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in-up');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
|
|
);
|
|
|
|
const elements = heroRef.current?.querySelectorAll('.reveal');
|
|
elements?.forEach((el) => observer.observe(el));
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const scrollToSection = (href: string) => {
|
|
const element = document.querySelector(href);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section
|
|
ref={heroRef}
|
|
className="relative min-h-screen flex items-center overflow-hidden bg-gradient-hero"
|
|
>
|
|
{/* Background Elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
{/* Grid Pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
|
backgroundSize: '60px 60px',
|
|
}}
|
|
/>
|
|
{/* Glow Circles */}
|
|
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-teal-500/20 rounded-full blur-[120px] animate-pulse-glow" />
|
|
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-orange-500/20 rounded-full blur-[120px] animate-pulse-glow" style={{ animationDelay: '1s' }} />
|
|
</div>
|
|
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-0">
|
|
<div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
|
|
{/* Product Image - Left Side */}
|
|
<div className="relative order-2 lg:order-1 reveal opacity-0">
|
|
<div className="relative aspect-square max-w-lg mx-auto lg:mx-0">
|
|
{/* Glow Effect */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-orange-500/30 to-teal-500/30 rounded-full blur-3xl" />
|
|
|
|
{/* Product Container */}
|
|
<div className="relative animate-float">
|
|
<img
|
|
src="/product-hero.png"
|
|
alt="VisionRun Pro - Óculos Inteligentes"
|
|
className="w-full h-full object-contain drop-shadow-2xl"
|
|
onError={(e) => {
|
|
// Fallback if image doesn't exist
|
|
const target = e.target as HTMLImageElement;
|
|
target.style.display = 'none';
|
|
const parent = target.parentElement;
|
|
if (parent) {
|
|
const fallback = document.createElement('div');
|
|
fallback.className = 'w-full h-full flex items-center justify-center';
|
|
fallback.innerHTML = `
|
|
<div class="relative">
|
|
<div class="w-64 h-32 bg-gradient-to-r from-slate-700 to-slate-800 rounded-3xl transform -rotate-6 shadow-2xl flex items-center justify-center border border-slate-600">
|
|
<div class="w-56 h-20 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl flex items-center justify-center">
|
|
<span class="text-2xl font-display font-bold text-white">VisionRun</span>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 w-4 h-4 bg-orange-500 rounded-full glow-orange"></div>
|
|
</div>
|
|
`;
|
|
parent.appendChild(fallback);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Floating Stats */}
|
|
<div className="absolute -bottom-4 -right-4 lg:right-0 bg-slate-800/90 backdrop-blur-sm border border-slate-700 rounded-xl p-4 shadow-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
|
|
<span className="text-orange-400 font-bold text-sm">35g</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-white font-semibold text-sm">Ultra-Leve</p>
|
|
<p className="text-slate-400 text-xs">Design ergonômico</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute -top-4 -left-4 lg:left-0 bg-slate-800/90 backdrop-blur-sm border border-slate-700 rounded-xl p-4 shadow-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-teal-500/20 flex items-center justify-center">
|
|
<span className="text-teal-400 font-bold text-sm">8h</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-white font-semibold text-sm">Bateria</p>
|
|
<p className="text-slate-400 text-xs">Uso contínuo</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content - Right Side */}
|
|
<div className="order-1 lg:order-2 text-center lg:text-left">
|
|
<div className="reveal opacity-0" style={{ animationDelay: '100ms' }}>
|
|
<Badge className="mb-6 bg-slate-800 text-teal-400 border-teal-500/30 hover:bg-slate-700 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase">
|
|
Tecnologia de Ponta
|
|
</Badge>
|
|
</div>
|
|
|
|
<h1 className="reveal opacity-0 font-display font-bold text-5xl sm:text-6xl lg:text-7xl text-white leading-[1.1] mb-6" style={{ animationDelay: '200ms' }}>
|
|
VisionRun
|
|
<span className="text-gradient"> Pro</span>
|
|
</h1>
|
|
|
|
<p className="reveal opacity-0 text-xl sm:text-2xl text-slate-300 font-medium mb-4" style={{ animationDelay: '300ms' }}>
|
|
Óculos de Corrida de Alta Performance
|
|
</p>
|
|
|
|
<p className="reveal opacity-0 text-slate-400 text-base sm:text-lg max-w-xl mx-auto lg:mx-0 mb-8" style={{ animationDelay: '400ms' }}>
|
|
Tecnologia!!!!!! e desempenho ao alcance da sua visão. Experimente o futuro da corrida com dados em tempo real sem tirar os olhos do caminho.
|
|
</p>
|
|
|
|
<div className="reveal opacity-0 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8" style={{ animationDelay: '500ms' }}>
|
|
<Button
|
|
size="lg"
|
|
onClick={() => scrollToSection('#contato')}
|
|
className="bg-orange-500 hover:bg-orange-400 text-white font-semibold px-8 py-6 text-base transition-all duration-300 hover:shadow-xl hover:shadow-orange-500/30 hover:-translate-y-0.5"
|
|
>
|
|
Comprar Agora
|
|
<ChevronRight className="w-5 h-5 ml-2" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
onClick={() => scrollToSection('#sobre')}
|
|
className="border-slate-600 text-slate-300 hover:border-orange-500 hover:text-white bg-transparent px-8 py-6 text-base transition-all duration-300"
|
|
>
|
|
<Play className="w-5 h-5 mr-2" />
|
|
Saiba Mais
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="reveal opacity-0 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start" style={{ animationDelay: '600ms' }}>
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="flex items-center gap-2 text-slate-400 text-sm">
|
|
<div className="w-5 h-5 rounded-full bg-teal-500/20 flex items-center justify-center flex-shrink-0">
|
|
<Check className="w-3 h-3 text-teal-400" />
|
|
</div>
|
|
<span>{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Gradient Fade */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0f172a] to-transparent" />
|
|
</section>
|
|
);
|
|
}
|