first commit
This commit is contained in:
186
src/sections/Hero.tsx
Normal file
186
src/sections/Hero.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user