ahasani
730e2d8ca8
- Implemented CertificateGallery component to display certification images in a gallery format. - Created CertificationsSection component to showcase certifications with titles and descriptions. - Enhanced Gallery component to support animations and keyboard navigation. - Introduced Select component for dropdown selection with images. - Added utility functions for API responses and pagination handling. - Implemented localization functions for text and content. - Created a custom hook for detecting clicks outside of a component.
107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { appConstants } from '@/assets/constants';
|
|
import { getQuickLinks } from '@/assets/constants/footerMenu/quickLinks.const';
|
|
import { getWhoAreWeLinks } from '@/assets/constants/footerMenu/whoAreWe.const';
|
|
import images from '@/assets/images/images';
|
|
import { Icon, IconName } from '@/components/uikit/icons';
|
|
import { TLocales } from '@/models/layout';
|
|
import { useTranslations } from 'next-intl';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { useParams } from 'next/navigation';
|
|
import FooterInfo from './FooterInfo';
|
|
import FooterMenuBuilder from './FooterMenuBuilder';
|
|
import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';
|
|
|
|
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="max-lg:mt-3 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>
|
|
|
|
<div className="flex items-center gap-4 max-lg:justify-center">
|
|
{appConstants.socials.map((social) => (
|
|
<Link
|
|
href={social.link}
|
|
key={social.title}
|
|
className="text-white lg:flex-1"
|
|
>
|
|
<Icon
|
|
name={social.icon as IconName}
|
|
className="text-primary"
|
|
/>
|
|
</Link>
|
|
))}
|
|
</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>
|
|
);
|
|
}
|