94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import Image from "next/image";
|
|
import youtube from "./assets/youtube.svg";
|
|
import facebook from "./assets/facebook.svg";
|
|
import instagram from "./assets/instagram.svg";
|
|
import app_store_btn from "./assets/app-store-btn.svg";
|
|
import play_market_btn from "./assets/play-market-btn.svg";
|
|
import { Link } from "@/shared/config/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
import { FOOTER_LINKS } from "@/shared/variables/links";
|
|
|
|
const Footer = () => {
|
|
const t = useTranslations("general");
|
|
const tDisclaimer = useTranslations("disclaimer");
|
|
const tRights = useTranslations("rights");
|
|
return (
|
|
<footer className="px-12 py-20 grid grid-cols-4 gap-[30px] bg-[#0F172A]">
|
|
<div className="flex flex-col gap-6">
|
|
<p className="text-white font-normal">© {tRights("text")}</p>
|
|
<p className="text-white font-normal">{tDisclaimer("text")}</p>
|
|
</div>
|
|
<div className="flex flex-col gap-6 items-center">
|
|
<h4 className="h-fit text-white flex justify-start text-base font-bold leading-[110%]">
|
|
{t("navigation")}
|
|
</h4>
|
|
<ul className="flex flex-col gap-6">
|
|
{FOOTER_LINKS().map((link) => (
|
|
<li
|
|
className="h-fit flex justify-start text-base text-[#e2e8f0] font-normal leading-[140%] items-center gap-4"
|
|
key={link.id}
|
|
>
|
|
<Link
|
|
className="h-fit text-white flex justify-start text-base "
|
|
href={link.pathname}
|
|
key={link.id}
|
|
>
|
|
{link.pagename}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
<h4 className="h-fit text-white flex justify-start text-base font-bold leading-[110%]">
|
|
{t("contacts")}
|
|
</h4>
|
|
<ul className="flex flex-col gap-6">
|
|
<li className="h-fit flex justify-start text-base text-[#e2e8f0] font-normal leading-[140%] items-center gap-4">
|
|
+9960312394038
|
|
</li>
|
|
|
|
<li className="h-fit flex justify-start text-base text-[#e2e8f0] font-normal leading-[140%] items-center gap-4">
|
|
{[
|
|
{ src: youtube, href: "https://www.youtube.com/@TransparencyKyrgyzstan", alt: "YouTube" },
|
|
{ src: facebook, href: "https://www.facebook.com/tikyrgyzstan", alt: "Facebook" },
|
|
{ src: instagram, href: "https://www.instagram.com/transparencyinternational_kg?igsh=cTc2MHEwOW5vNDh2", alt: "Instagram" }
|
|
].map((net, i) => (
|
|
<Link
|
|
key={i}
|
|
href={net.href}
|
|
className="h-fit text-white flex justify-start text-base"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Image src={net.src} alt={net.alt} />
|
|
</Link>
|
|
))}
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
<h4 className="h-fit text-white flex justify-start text-base font-bold leading-[110%]">
|
|
{t("download_our_app")}
|
|
</h4>
|
|
<div className="flex flex-col gap-6">
|
|
{[app_store_btn, play_market_btn].map((app, i) => (
|
|
<Link
|
|
key={i}
|
|
href="#"
|
|
className="h-fit text-white flex justify-start text-base "
|
|
>
|
|
<Image src={app} alt="App Button" key={app} />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|