97 lines
3.8 KiB
TypeScript
97 lines
3.8 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
import { MessageCircle, Instagram, Facebook, Youtube } from "lucide-react";
|
||
import logo from "@/assets/logo_branca.png";
|
||
import { motion } from "framer-motion";
|
||
|
||
const Footer = () => {
|
||
return (
|
||
<footer className="gradient-dark border-t border-border/10">
|
||
<div className="container mx-auto px-4 py-16">
|
||
<div className="grid md:grid-cols-3 gap-12">
|
||
{/* Brand */}
|
||
<a href="/" className="">
|
||
<motion.div
|
||
whileHover={{ rotate: 15, scale: 1.1 }}
|
||
transition={{ type: "spring", stiffness: 300 }}
|
||
className="w-10 h-10 rounded-xl bg-primary/15 border border-primary/25 flex items-center justify-center group-hover:bg-primary/25 transition-colors"
|
||
>
|
||
{/* <Route className="w-5 h-5 text-primary" /> */}
|
||
<img src={logo} alt="Logo do ITAROTA79" width={220} />
|
||
</motion.div>
|
||
<h3 className="font-display text-2xl font-bold text-primary mb-2">
|
||
ITAROTA79
|
||
</h3>
|
||
<p className="font-display text-xs tracking-[0.2em] text-dark-surface-foreground/50 mb-4 uppercase">
|
||
Viagens de Moto
|
||
</p>
|
||
<p className="text-sm text-dark-surface-foreground/40 leading-relaxed">
|
||
Mais que um clube, uma irmandade na estrada. Aventura, liberdade e
|
||
companheirismo sobre duas rodas.
|
||
</p>
|
||
</a>
|
||
|
||
{/* Links */}
|
||
<div>
|
||
<h4 className="font-display text-lg font-semibold text-dark-surface-foreground mb-4">
|
||
Links Rápidos
|
||
</h4>
|
||
<nav className="flex flex-col gap-2">
|
||
{[
|
||
{ label: "Início", to: "/" },
|
||
{ label: "Sobre", to: "/sobre" },
|
||
{ label: "Galeria", to: "/galeria" },
|
||
{ label: "Eventos", to: "/eventos" },
|
||
{ label: "Contato", to: "/contato" },
|
||
].map((link) => (
|
||
<Link
|
||
key={link.to}
|
||
to={link.to}
|
||
className="text-sm text-dark-surface-foreground/40 hover:text-primary transition-colors"
|
||
>
|
||
{link.label}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Social & Contact */}
|
||
<div>
|
||
<h4 className="font-display text-lg font-semibold text-dark-surface-foreground mb-4">
|
||
Redes Sociais
|
||
</h4>
|
||
<div className="flex gap-3 mb-6">
|
||
{[Instagram, Facebook, Youtube].map((Icon, i) => (
|
||
<a
|
||
key={i}
|
||
href="#"
|
||
className="w-10 h-10 rounded-full bg-secondary/50 border border-border/10 flex items-center justify-center text-dark-surface-foreground/50 hover:text-primary hover:border-primary/30 transition-all"
|
||
>
|
||
<Icon className="w-5 h-5" />
|
||
</a>
|
||
))}
|
||
</div>
|
||
<a
|
||
href="https://docs.google.com/forms/d/e/1FAIpQLSeDhmum1QRAj56HDdkw2w1ZtA7ulZOoXht5fbfPTaSbWGsu9A/viewform"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
|
||
>
|
||
<MessageCircle className="w-4 h-4" />
|
||
Fale conosco no WhatsApp
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t border-border/10 mt-12 pt-8 text-center">
|
||
<p className="text-xs text-dark-surface-foreground/30">
|
||
© {new Date().getFullYear()} ITAROTA79 – Viagens de Moto. Todos os
|
||
direitos reservados.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
};
|
||
|
||
export default Footer;
|