100 lines
4.0 KiB
TypeScript
100 lines
4.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
interface FooterProps {
|
||
|
|
currentLang: string;
|
||
|
|
t: {
|
||
|
|
footer: {
|
||
|
|
company: string;
|
||
|
|
products: string;
|
||
|
|
support: string;
|
||
|
|
legal: string;
|
||
|
|
copyright: string;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Footer({ currentLang, t }: FooterProps) {
|
||
|
|
return (
|
||
|
|
<footer className="relative z-10 border-t border-cyan-500/30 backdrop-blur-sm mt-20">
|
||
|
|
<div className="max-w-7xl mx-auto px-6 py-12">
|
||
|
|
<div className="grid md:grid-cols-4 gap-8">
|
||
|
|
<div>
|
||
|
|
<div className="text-2xl font-bold text-cyan-400 mb-4">
|
||
|
|
CYBER
|
||
|
|
<span className="text-pink-500">CLOUD</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-400 text-sm">{t.footer.company}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-cyan-400 font-semibold mb-4">{t.footer.products}</h3>
|
||
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Cloud Servers
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Storage
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Networking
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-cyan-400 font-semibold mb-4">{t.footer.support}</h3>
|
||
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Documentation
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
API Reference
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Contact
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-cyan-400 font-semibold mb-4">{t.footer.legal}</h3>
|
||
|
|
<ul className="space-y-2 text-gray-400 text-sm">
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Privacy Policy
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Terms of Service
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
||
|
|
Security
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="border-t border-cyan-500/30 mt-8 pt-8 text-center text-gray-400 text-sm">
|
||
|
|
<p>{t.footer.copyright}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
);
|
||
|
|
}
|