feat: add footer components including FooterInfo, FooterMenuBuilder, and FooterMenuBuilderWrapper
- Implemented FooterInfo component to display logo, slogan, and social links. - Created FooterMenuBuilder component for rendering a list of links with a title. - Added FooterMenuBuilderWrapper to encapsulate the layout for menu items.
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
import images from '@/assets/images/images';
|
||||
import { t } from '@/locales/translates';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import FooterMenuBuilder from './FooterMenuBuilder';
|
||||
import { appConstants } from '@/assets/constants';
|
||||
import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';
|
||||
import FooterInfo from './FooterInfo';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<div className="relative w-full bg-gray-500 pt-24 text-white">
|
||||
<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-5xl tracking-tighter">
|
||||
{t('footer_title') as string}
|
||||
</p>
|
||||
<h5 className="text-base tracking-normal">
|
||||
{t('footer_description') as string}
|
||||
</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') as string}
|
||||
links={appConstants.footerMenu.quickLinks}
|
||||
className="max-md:text-center"
|
||||
/>
|
||||
<FooterMenuBuilder
|
||||
title={t('footer_links_who_we_are') as string}
|
||||
links={appConstants.footerMenu.whoAreWeLinks}
|
||||
className="max-md:text-center"
|
||||
/>
|
||||
<FooterMenuBuilderWrapper
|
||||
title={t('footer_links_contact') as string}
|
||||
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') as string}
|
||||
</span>
|
||||
</div>
|
||||
</FooterMenuBuilderWrapper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-8 lg:py-14">
|
||||
<p className="text-center text-sm">
|
||||
{t('footer_copyright') as string}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { appConstants } from '@/assets/constants';
|
||||
import images from '@/assets/images/images';
|
||||
import { t } from '@/locales/translates';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function FooterInfo({
|
||||
withLogo,
|
||||
className,
|
||||
}: {
|
||||
withLogo?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`flex w-full flex-col gap-3 lg:w-auto ${className}`}>
|
||||
{withLogo && (
|
||||
<Link href="/" className="mx-auto h-8 w-auto">
|
||||
<Image
|
||||
alt="logo"
|
||||
src={images.logo}
|
||||
className="h-full w-auto object-contain"
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<p className="text-sm tracking-normal">{t('footer_slogan') as string}</p>
|
||||
<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"
|
||||
>
|
||||
{/* <Image
|
||||
alt={social.title}
|
||||
src={images[social.title]}
|
||||
className="h-6 w-6 object-contain"
|
||||
/> */}
|
||||
{social.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import Link from 'next/link';
|
||||
import FooterMenuBuilderWrapper from './FooterMenuBuilderWrapper';
|
||||
|
||||
export default function FooterMenuBuilder({
|
||||
title,
|
||||
links,
|
||||
className = '',
|
||||
}: {
|
||||
title: string;
|
||||
links: { title: string; link: string }[];
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<FooterMenuBuilderWrapper title={title} className={className}>
|
||||
<div className="flex flex-col gap-4">
|
||||
{links.map((link) => (
|
||||
<Link
|
||||
title={link.title}
|
||||
href={link.link}
|
||||
className="text-sm tracking-tight text-gray-100 hover:text-gray-200"
|
||||
key={link.title}
|
||||
>
|
||||
{link.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</FooterMenuBuilderWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export default function FooterMenuBuilderWrapper({
|
||||
title,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
className: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`flex flex-col gap-6 ${className}`}>
|
||||
<span className="text-lg tracking-tight">{title}</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -26,7 +26,7 @@ export default function HomePageProducts() {
|
||||
<div className="w-full">
|
||||
<div
|
||||
className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`}
|
||||
style={{ backgroundImage: `url(${images.homeBanner.src})` }}
|
||||
style={{ backgroundImage: `url(${images.homeProductBack.src})` }}
|
||||
>
|
||||
<div className="absolute inset-0 z-10 bg-black opacity-50" />
|
||||
<div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
|
||||
|
||||
Reference in New Issue
Block a user