90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import images from '@/assets/images/images';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import FooterMenuBuilder from './FooterMenuBuilder';
|
|
import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';
|
|
import FooterInfo from './FooterInfo';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useParams } from 'next/navigation';
|
|
import { getQuickLinks } from '@/assets/constants/footerMenu/quickLinks.const';
|
|
import { getWhoAreWeLinks } from '@/assets/constants/footerMenu/whoAreWe.const';
|
|
import { TLocales } from '@/models/layout';
|
|
|
|
export default function Footer() {
|
|
const t = useTranslations();
|
|
const params = useParams();
|
|
const locale = (params.locale as TLocales) || 'en';
|
|
|
|
const quickLinks = getQuickLinks(t, locale);
|
|
const whoAreWeLinks = getWhoAreWeLinks(t, locale);
|
|
|
|
return (
|
|
<div className="relative w-full bg-gray-500 pt-12 text-white md:pt-24">
|
|
<div className="absolute inset-0 z-10 flex items-end justify-start">
|
|
<div className="w-1/2 md:w-2/5">
|
|
<Image
|
|
alt="footer-bg"
|
|
src={images.factoryVector}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="relative z-20 container mx-auto">
|
|
<div className="flex max-w-[920px] flex-col gap-5 pb-10">
|
|
<p className="text-3xl tracking-tighter md:text-5xl">
|
|
{t('footer_title')}
|
|
</p>
|
|
<h5 className="text-base tracking-normal">
|
|
{t('footer_description')}
|
|
</h5>
|
|
</div>
|
|
<div className="flex items-start justify-between gap-8 border-y border-gray-300/50 py-14 max-lg:flex-col-reverse">
|
|
<FooterInfo withLogo className="lg:max-w-[200px]" />
|
|
<div className="grid w-full grid-cols-2 gap-5 md:grid-cols-3 md:gap-10 lg:max-w-3/5">
|
|
<FooterMenuBuilder
|
|
title={t('footer_links_quick_links')}
|
|
links={quickLinks}
|
|
className="max-md:text-center"
|
|
/>
|
|
<FooterMenuBuilder
|
|
title={t('footer_links_who_we_are')}
|
|
links={whoAreWeLinks}
|
|
className="max-md:text-center"
|
|
/>
|
|
<FooterMenuBuilderWrapper
|
|
title={t('footer_links_contact')}
|
|
className="max-md:col-span-2 max-md:text-center"
|
|
>
|
|
<div className="flex flex-col gap-4">
|
|
<Link
|
|
href="tel:+9812345678"
|
|
className="text-sm tracking-tight text-gray-100 hover:text-gray-200"
|
|
>
|
|
+98 12345678
|
|
</Link>
|
|
<Link
|
|
href="mailto:info@sample.com"
|
|
className="text-sm tracking-tight text-gray-100 hover:text-gray-200"
|
|
>
|
|
info@sample.com
|
|
</Link>
|
|
<span className="text-sm tracking-tight text-gray-100 hover:text-gray-200">
|
|
{t('footer_links_address')}
|
|
</span>
|
|
</div>
|
|
</FooterMenuBuilderWrapper>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-8 lg:py-14">
|
|
<p className="text-center text-sm">
|
|
{t('footer_copyright', { year: new Date().getFullYear() })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|