Versão inicial do site Avanzato
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Facebook, Youtube, Linkedin, Instagram, ArrowUp, MapPin } from 'lucide-react';
|
||||
import { LOGO, SOCIAL_LINKS, ADDRESSES, FOOTER_LINKS, COMPANY } from '../config/site';
|
||||
|
||||
// Mapa de icones das redes sociais
|
||||
const socialIcons: Record<string, React.ReactNode> = {
|
||||
facebook: <Facebook className="w-5 h-5" />,
|
||||
youtube: <Youtube className="w-5 h-5" />,
|
||||
linkedin: <Linkedin className="w-5 h-5" />,
|
||||
instagram: <Instagram className="w-5 h-5" />,
|
||||
};
|
||||
|
||||
const Footer = () => {
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// Filtra apenas redes sociais com URL preenchida
|
||||
const activeSocials = Object.entries(SOCIAL_LINKS)
|
||||
.filter(([, data]) => data.url)
|
||||
.map(([key, data]) => ({
|
||||
key,
|
||||
icon: data.iconSvg
|
||||
? <div dangerouslySetInnerHTML={{ __html: data.iconSvg }} />
|
||||
: (socialIcons[key] || null),
|
||||
href: data.url,
|
||||
label: data.label,
|
||||
}));
|
||||
|
||||
// Renderiza o logo (SVG inline ou imagem)
|
||||
const renderLogo = () => {
|
||||
if (LOGO.imageUrl) {
|
||||
return <img src={LOGO.imageUrl} alt={COMPANY.name} className="h-10 w-auto" />;
|
||||
}
|
||||
return (
|
||||
<div dangerouslySetInnerHTML={{ __html: LOGO.svgInline }} className="flex-shrink-0" />
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-[#0e0e0e] text-white relative border-t border-white/5">
|
||||
{/* Main footer */}
|
||||
<div className="container-custom py-16">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-5 gap-12">
|
||||
{/* Brand */}
|
||||
<div className="lg:col-span-2">
|
||||
<Link to={LOGO.href} className="flex items-center gap-3 mb-6">
|
||||
{renderLogo()}
|
||||
{LOGO.text && (
|
||||
<span className="text-2xl font-bold tracking-tight">
|
||||
{LOGO.text}
|
||||
<span className="text-[#cbf400]">{LOGO.textHighlight}</span>
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<p className="text-gray-400 mb-6 max-w-sm">
|
||||
{COMPANY.description}
|
||||
</p>
|
||||
|
||||
{/* Enderecos - importados de config/site.ts */}
|
||||
{ADDRESSES.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<MapPin className="w-4 h-4 text-[#cbf400]" />
|
||||
<span className="text-white font-medium text-sm">Nossos Escritorios</span>
|
||||
</div>
|
||||
<div className="space-y-2 text-xs text-gray-400">
|
||||
{ADDRESSES.map((addr, i) => (
|
||||
<p key={i}>{addr.street} - {addr.city}/{addr.state}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Social links - importados de config/site.ts */}
|
||||
{activeSocials.length > 0 && (
|
||||
<div className="flex gap-3">
|
||||
{activeSocials.map((social) => (
|
||||
<a
|
||||
key={social.key}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={social.label}
|
||||
className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center text-gray-400 hover:bg-[#cbf400] hover:text-[#0e0e0e] transition-colors border border-white/5"
|
||||
>
|
||||
{social.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h4 className="font-bold mb-4 text-white">Servicos</h4>
|
||||
<ul className="space-y-3">
|
||||
{FOOTER_LINKS.servicos.map((link, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
to={link.href}
|
||||
className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Company */}
|
||||
<div>
|
||||
<h4 className="font-bold mb-4 text-white">Empresa</h4>
|
||||
<ul className="space-y-3">
|
||||
{FOOTER_LINKS.empresa.map((link, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
to={link.href}
|
||||
className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Support */}
|
||||
<div>
|
||||
<h4 className="font-bold mb-4 text-white">Suporte</h4>
|
||||
<ul className="space-y-3">
|
||||
{FOOTER_LINKS.suporte.map((link, index) => (
|
||||
<li key={index}>
|
||||
{link.href.startsWith('http') ? (
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
to={link.href}
|
||||
className="text-gray-400 hover:text-[#cbf400] transition-colors text-sm"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="border-t border-white/5">
|
||||
<div className="container-custom py-6">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-gray-500 text-sm">
|
||||
© {new Date().getFullYear()} {COMPANY.name}. Todos os direitos reservados.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
{FOOTER_LINKS.legais.map((link, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
to={link.href}
|
||||
className="text-gray-500 hover:text-gray-300 text-sm transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="w-10 h-10 rounded-full bg-[#cbf400]/10 flex items-center justify-center text-[#cbf400] hover:bg-[#cbf400] hover:text-[#0e0e0e] transition-all"
|
||||
aria-label="Voltar ao topo"
|
||||
>
|
||||
<ArrowUp className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
Reference in New Issue
Block a user