generated from autoblog/Seo
74 lines
3.9 KiB
TypeScript
74 lines
3.9 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { Twitter, Linkedin, Instagram, Facebook, Youtube, Zap, ArrowUpRight, Github } from 'lucide-react';
|
|
|
|
export default function Footer() {
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="bg-black border-t border-white/5 pt-24 pb-12 relative overflow-hidden font-mono">
|
|
<div className="mx-auto max-w-[1400px] px-6 lg:px-12 relative z-10">
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-16 mb-20">
|
|
<div className="md:col-span-12 lg:col-span-4">
|
|
<Link to="/" className="flex items-center gap-3 mb-8 group">
|
|
<div className="h-8 w-8 bg-brand flex items-center justify-center text-black skew-x-[-6deg]">
|
|
<Zap size={16} fill="currentColor" className="skew-x-[6deg]" />
|
|
</div>
|
|
<span className="font-display text-xl font-black tracking-tight text-white uppercase italic">
|
|
NODE<span className="text-brand">_IDX</span>
|
|
</span>
|
|
</Link>
|
|
<p className="text-slate-700 max-w-sm mb-8 text-[9px] uppercase tracking-[0.3em] leading-relaxed font-black">
|
|
Deciphering the neural future of organic search across the strategic spectrum. [SIGNAL_V3.0]
|
|
</p>
|
|
<div className="flex gap-1.5">
|
|
{[Twitter, Linkedin, Github].map((Icon, i) => (
|
|
<a
|
|
key={i}
|
|
href="#"
|
|
className="h-10 w-10 flex items-center justify-center border border-white/5 text-slate-700 hover:text-brand hover:border-brand/20 transition-all font-mono"
|
|
>
|
|
<Icon size={14} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-6 lg:col-span-2 invisible lg:visible">
|
|
<h4 className="text-white text-[9px] font-black uppercase tracking-[0.4em] mb-8 italic">NAV_CORE</h4>
|
|
<ul className="space-y-3 font-mono text-[9px] text-slate-700 font-black uppercase tracking-widest leading-loose">
|
|
<li><Link to="/categoria/estrategia" className="hover:text-brand transition-colors">STRATEGY_FEED</Link></li>
|
|
<li><Link to="/categoria/tecnico" className="hover:text-brand transition-colors">TECH_OPS</Link></li>
|
|
<li><Link to="/categoria/autoridade" className="hover:text-brand transition-colors">AUTHORITY_LOGS</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="md:col-span-6 lg:col-span-4">
|
|
<div className="p-8 border border-white/5 bg-white/[0.01]">
|
|
<h5 className="text-white font-black uppercase text-[9px] tracking-[0.4em] mb-4 italic">BRIEFING_SYNC</h5>
|
|
<form className="flex gap-2" onSubmit={(e) => e.preventDefault()}>
|
|
<input
|
|
type="email"
|
|
placeholder="ENDPOINT_ID..."
|
|
className="flex-grow h-10 bg-black border border-white/5 px-4 text-[9px] font-black uppercase tracking-widest focus:border-brand outline-none"
|
|
/>
|
|
<button className="h-10 px-6 bg-brand text-black font-black text-[9px] uppercase tracking-widest hover:bg-white transition-all">
|
|
SYNC
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-10 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-[8px] font-black uppercase tracking-[0.3em] text-slate-800">
|
|
<p>
|
|
[ © NODE_IDX_{currentYear} ] DATASET_ENCRYPTED
|
|
</p>
|
|
<div className="flex gap-10">
|
|
<Link to="/privacidade" className="hover:text-brand transition-colors">PRIVACY_PROTOCOLS</Link>
|
|
<Link to="/termos" className="hover:text-brand transition-colors">STRUCTURE_INFO</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|