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>
+  );
+}