From d0e80e4f3b3a0c8a2fd1df8de804fa4d3861eda3 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Tue, 11 Jun 2024 18:57:06 +0500
Subject: [PATCH] footer

---
 src/components/Footer.tsx  | 50 +++++++++++++++++++++++++++++++-------
 src/pages/AboutComplex.tsx |  2 +-
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index eff4560..c2f2d90 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,28 +2,60 @@ import LogoIcon from "./icons/LogoIcon";
 
 const Footer = () => {
   return (
-    <footer className="grid xl:grid-cols-12 sm:grid-cols-8 bg-white px-7 py-8 gap-4">
+    <footer className="grid xl:grid-cols-12 sm:grid-cols-8 bg-white px-7 py-8 gap-4 rounded-ss-2xl rounded-se-2xl">
       <div className="flex flex-col justify-between sm:row-span-2 sm:col-span-2 col-span-8">
         <LogoIcon />
         <p className="text-caption-s text-[#73787C] font-semibold hidden sm:block">
           Privacy Policy
         </p>
       </div>
-      <div className="border-t flex justify-between 2xl:col-start-7 2xl:col-span-3 xl:col-span-4 xl:col-start-5 sm:col-start-4 sm:col-span-5 col-span-8">
+      <div className="border-t flex justify-between 2xl:col-start-7 2xl:col-span-3 xl:col-span-4 xl:col-start-5 sm:col-start-5 sm:col-span-full col-span-8">
         <p className="text-[#73787C] py-3">COMPANY</p>
-        <div className="flex flex-col text-m text-[#73787C]">
+        <div className="flex flex-col text-m text-[#73787C] text-left w-[5em]">
           <p className="py-3">Masterplan</p>
           <p className="py-3">Search</p>
           <p className="py-3">Favorites</p>
-          <p className="py-3 text-[#0D1922] text-s">Company</p>
+          <p className="py-3 text-s">Company</p>
         </div>
       </div>
-      <div className="border-t flex justify-between 2xl:col-span-3 xl:col-span-4 sm:col-start-4 sm:col-span-5 col-span-8">
+      <div className="border-t flex justify-between 2xl:col-span-3 xl:col-span-4 sm:col-start-5 sm:col-span-full col-span-8">
         <p className="text-[#73787C] py-3">FOLLOW US</p>
-        <div className="flex flex-col text-m text-[#73787C]">
-          <p className="py-3">Facebook</p>
-          <p className="py-3">Instagram</p>
-          <p className="py-3">LinkedIn</p>
+        <div className="flex flex-col text-m text-[#73787C] text-left w-[5em]">
+          <a
+            className="py-3"
+            target="_blank"
+            href="https://www.facebook.com/irth.group/"
+          >
+            Facebook
+          </a>
+          <a
+            className="py-3"
+            href="https://www.instagram.com/irth.group/"
+            target="_blank"
+          >
+            Instagram
+          </a>
+          <a
+            className="py-3"
+            href="https://www.linkedin.com/company/irth-group-uae/"
+            target="_blank"
+          >
+            LinkedIn
+          </a>
+          <a
+            className="py-3"
+            target="_blank"
+            href="https://www.youtube.com/@IRTHgroup"
+          >
+            YouTube
+          </a>
+          <a
+            className="py-3"
+            target="_blank"
+            href="https://twitter.com/IRTHGroup"
+          >
+            X
+          </a>
         </div>
       </div>
       <div className="block sm:hidden col-span-8 border-t">
diff --git a/src/pages/AboutComplex.tsx b/src/pages/AboutComplex.tsx
index 157553c..39cd199 100644
--- a/src/pages/AboutComplex.tsx
+++ b/src/pages/AboutComplex.tsx
@@ -169,7 +169,7 @@ const AboutComplex = () => {
             <div className="xl:col-span-4 xl:grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full flex flex-nowrap overflow-x-scroll">
               {roveAroundTheCity.map((item) => (
                 <div
-                  className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3 sm:min-w-[calc(25vw-24px)] min-w-[calc(50vw-30px)]"
+                  className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3 xl:min-w-full sm:min-w-[calc(25vw-24px)] min-w-[calc(50vw-30px)]"
                   key={item.id}
                 >
                   <div className="flex gap-1 items-center">