first commit
This commit is contained in:
168
src/sections/Footer.tsx
Normal file
168
src/sections/Footer.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import { Glasses, Mail, Phone, MapPin, Instagram, Twitter, Youtube, Linkedin } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const quickLinks = [
|
||||
{ label: 'Sobre', href: '#sobre' },
|
||||
{ label: 'Tecnologia', href: '#tecnologia' },
|
||||
{ label: 'Design', href: '#design' },
|
||||
{ label: 'Funcionalidades', href: '#funcionalidades' },
|
||||
{ label: 'Especificações', href: '#especificacoes' },
|
||||
];
|
||||
|
||||
const contactInfo = [
|
||||
{ icon: Mail, label: 'contato@visionrun.com' },
|
||||
{ icon: Phone, label: '+55 (11) 4000-1234' },
|
||||
{ icon: MapPin, label: 'São Paulo, SP - Brasil' },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: Instagram, href: '#', label: 'Instagram' },
|
||||
{ icon: Twitter, href: '#', label: 'Twitter' },
|
||||
{ icon: Youtube, href: '#', label: 'YouTube' },
|
||||
{ icon: Linkedin, href: '#', label: 'LinkedIn' },
|
||||
];
|
||||
|
||||
export function Footer() {
|
||||
const scrollToSection = (href: string) => {
|
||||
if (href === '#') return;
|
||||
const element = document.querySelector(href);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<footer id="contato" className="bg-[#0a0f1c] border-t border-slate-800">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* CTA Section */}
|
||||
<div className="py-16 text-center border-b border-slate-800">
|
||||
<h2 className="font-display font-bold text-3xl sm:text-4xl text-white mb-4">
|
||||
Pronto para Revolucionar suas Corridas?
|
||||
</h2>
|
||||
<p className="text-slate-400 text-lg max-w-2xl mx-auto mb-8">
|
||||
Adquira o VisionRun Pro hoje e experimente o futuro da tecnologia wearable para corrida.
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
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"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
Fale Conosco
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Main Footer Content */}
|
||||
<div className="py-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||||
{/* Brand */}
|
||||
<div className="sm:col-span-2 lg:col-span-1">
|
||||
<a href="#" className="flex items-center gap-2 mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center">
|
||||
<Glasses className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-display font-bold text-lg text-white leading-tight">
|
||||
VisionRun
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 leading-tight">
|
||||
Smart Running Glasses
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<p className="text-slate-400 text-sm leading-relaxed mb-6">
|
||||
Tecnologia de ponta para corredores que buscam performance e inovação.
|
||||
</p>
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-3">
|
||||
{socialLinks.map((social, index) => {
|
||||
const Icon = social.icon;
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={social.href}
|
||||
aria-label={social.label}
|
||||
className="w-10 h-10 rounded-lg bg-slate-800 border border-slate-700 flex items-center justify-center text-slate-400 hover:text-white hover:border-orange-500 hover:bg-orange-500/10 transition-all duration-300"
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="font-display font-semibold text-white mb-4">Links Rápidos</h3>
|
||||
<ul className="space-y-3">
|
||||
{quickLinks.map((link, index) => (
|
||||
<li key={index}>
|
||||
<button
|
||||
onClick={() => scrollToSection(link.href)}
|
||||
className="text-slate-400 hover:text-white text-sm transition-colors duration-200"
|
||||
>
|
||||
{link.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
<h3 className="font-display font-semibold text-white mb-4">Contato</h3>
|
||||
<ul className="space-y-3">
|
||||
{contactInfo.map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<li key={index} className="flex items-center gap-3">
|
||||
<Icon className="w-4 h-4 text-orange-400 flex-shrink-0" />
|
||||
<span className="text-slate-400 text-sm">{item.label}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Newsletter */}
|
||||
<div>
|
||||
<h3 className="font-display font-semibold text-white mb-4">Newsletter</h3>
|
||||
<p className="text-slate-400 text-sm mb-4">
|
||||
Receba novidades e atualizações sobre o VisionRun Pro.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Seu e-mail"
|
||||
className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white text-sm placeholder:text-slate-500 focus:outline-none focus:border-orange-500 transition-colors"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-orange-500 hover:bg-orange-400 text-white px-4"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="py-6 border-t border-slate-800 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<p className="text-slate-500 text-sm">
|
||||
© 2026 VisionRun Pro. Todos os direitos reservados.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<a href="#" className="text-slate-500 hover:text-slate-300 text-sm transition-colors">
|
||||
Política de Privacidade
|
||||
</a>
|
||||
<a href="#" className="text-slate-500 hover:text-slate-300 text-sm transition-colors">
|
||||
Termos de Uso
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user