104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import { useLanguage } from "@/contexts/language-context";
|
|
import { Github, Linkedin, Twitter } from "lucide-react";
|
|
import Image from "next/image";
|
|
|
|
export default function Footer() {
|
|
const { t } = useLanguage();
|
|
return (
|
|
<footer className="bg-foreground text-white py-12 md:py-16">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-4 bg-white justify-center rounded-xl py-3">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="logo image"
|
|
width={150}
|
|
height={100}
|
|
/>
|
|
</div>
|
|
<p className="text-white/70 text-sm">{t.footer.description}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold mb-4">{t.footer.product.title}</h4>
|
|
<ul className="space-y-2 text-sm text-white/70">
|
|
<li>
|
|
<a href="#" className="hover:text-white transition">
|
|
{t.footer.product.items[0]}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="hover:text-white transition">
|
|
{t.footer.product.items[1]}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="hover:text-white transition">
|
|
{t.footer.product.items[2]}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold mb-4">{t.footer.company.title}</h4>
|
|
<ul className="space-y-2 text-sm text-white/70">
|
|
<li>
|
|
<a href="#" className="hover:text-white transition">
|
|
{t.footer.company.items[0]}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="hover:text-white transition">
|
|
{t.footer.company.items[1]}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="hover:text-white transition">
|
|
{t.footer.company.items[2]}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold mb-4">{t.footer.follow}</h4>
|
|
<div className="flex gap-4">
|
|
<a href="#" className="text-white/70 hover:text-white transition">
|
|
<Twitter size={20} />
|
|
</a>
|
|
<a href="#" className="text-white/70 hover:text-white transition">
|
|
<Linkedin size={20} />
|
|
</a>
|
|
<a href="#" className="text-white/70 hover:text-white transition">
|
|
<Github size={20} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-white/70">
|
|
<p>{t.footer.rights}</p>
|
|
<div className="flex gap-6 mt-4 md:mt-0">
|
|
<a
|
|
target="_blanck"
|
|
href="https://www.youtube.com/watch?v=aoUiTrKAU-0&list=RDMM1GFCMVQ4Gkg&index=27"
|
|
className="hover:text-white transition"
|
|
>
|
|
{t.footer.policies[0]}
|
|
</a>
|
|
<a
|
|
target="_blanck"
|
|
href="https://www.youtube.com/watch?v=aoUiTrKAU-0&list=RDMM1GFCMVQ4Gkg&index=27"
|
|
className="hover:text-white transition"
|
|
>
|
|
{t.footer.policies[1]}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|