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.
2025-06-02 18:06:15 +03:30
parent 86dc740dfd
commit 919364a4dd
15 changed files with 242 additions and 16 deletions
@@ -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>
+  );
+}