Merge pull request Anjaliavv51#96 from SuyashRajput/newFooter

footer updated
2004shweta · Oct 27, 2023 · 0c02758 · 0c02758
2 parents 90d7a1e + 6afef72
commit 0c02758
Showing 1 changed file with 55 additions and 56 deletions.
diff --git a/src/components/Footer-section/Footer.jsx b/src/components/Footer-section/Footer.jsx
@@ -4,65 +4,64 @@ let date = new Date();
 let year = date.getFullYear();
 const Footer = () => {
   return (
-    <footer>
-      <div className="flex justify-center justufy-between bg-primaryGreen text-textWhite md:px-[75px] px-[25px] py-[60px] md:flex-row flex-col">
-        <div className="w-[300px] flex-1">
-          <img
-            className="bg-[white] px-1 rounded-xl mb-2 w-64"
-            src={logo}
-            alt="logo"
-          />
-          <p className="py-2 w-[280px]">
-            Rentalog is the ultimate solution for landlords looking to simplify
-            their rent management process.{" "}
-          </p>
-          <hr className="w-[150px] py-2" />
-          <h3 className="text-xl font-semibold">Contact Us</h3>
-          <div className="flex space-x-3 pt-2">
-            <a href="https://twitter.com/gauravsingh1281">
-              <FaTwitter className="w-8 h-8 " />
-            </a>
-            <a href="https://github.com/gauravsingh1281">
-              <FaGithub className="w-8 h-8" />
-            </a>
-            <a href="https://www.instagram.com/gauravsingh1281">
-              <FaInstagram className="w-8 h-8" />
-            </a>
+    <>
+      <div className="flex grow flex-col bg-primaryGreen text-textWhite px-10 py-[35px]">
+        <div className="flex justify-center flex-wrap grow">
+          <div className="flex flex-col justify-center items-center text-center lg:items-start lg:text-start basis-[300px] mx-10 my-5">
+            <img
+              className="bg-[white] px-1 rounded-xl mb-2 h-[58px] w-[200px] hover:shadow-l hover:scale-105 transition duration-300 ease-in-out"
+              src={logo}
+              alt="logo"
+            />
+            <p className="my-6">
+              Rentalog is the ultimate solution for landlords looking to simplify
+              their rent management process.{" "}
+            </p>
+          </div>
+          <div className="flex flex-col justify-center items-center text-center lg:items-start lg:text-start basis-[180px] mx-10 my-5">
+            <ul>
+              <li className="font-semibold pb-4">Services</li>
+              <li>Property Listing</li>
+              <li>Track Payment record</li>
+              <li>Rent Calculation</li>
+              <li>Time Management</li>
+            </ul>
+          </div>
+          <div className="flex flex-col justify-center items-center text-center lg:items-start lg:text-start basis-[150px] mx-10 my-5">
+            <ul>
+              <li className="font-semibold hover:scale-110 transition duration-300 ease-in-out">
+                <a href="/">Home</a>
+              </li>
+              <li className="font-semibold hover:scale-110 transition duration-300 ease-in-out">
+                <a href="#AboutUs">About Us</a>
+              </li>
+              <li className="font-semibold hover:scale-110 transition duration-300 ease-in-out">
+                <a href="#ContactUs">Contact Us</a>
+              </li>
+              <li className="font-semibold hover:scale-110 transition duration-300 ease-in-out">
+                <a href="#Service">Rentals</a>
+              </li>
+            </ul>
+          </div>
+          <div className="flex flex-col justify-center items-center text-center lg:items-start lg:text-start basis-[150px] mx-10 my-5">
+            <h3 className="text-xl font-semibold">Contact Us</h3>
+            <div className="flex space-x-3 pt-2">
+              <a href="https://twitter.com/gauravsingh1281">
+                <FaTwitter className="w-8 h-8 hover:shadow-2xl hover:scale-110 transition duration-300 ease-in-out" />
+              </a>
+              <a href="https://github.com/gauravsingh1281">
+                <FaGithub className="w-8 h-8 hover:shadow-2xl hover:scale-110 transition duration-300 ease-in-out" />
+              </a>
+              <a href="https://www.instagram.com/gauravsingh1281">
+                <FaInstagram className="w-8 h-8 hover:shadow-2xl hover:scale-110 transition duration-300 ease-in-out" />
+              </a>
+            </div>
           </div>
         </div>
-        <div className="flex-1 ">
-          <h3 className="font-semibold pb-4">Services</h3>
-          <ul>
-            <li>Property Listing</li>
-            <li>Track Payment record</li>
-            <li>Rent Calculation</li>
-            <li>Time Management</li>
-          </ul>
-        </div>
-        <div className="flex-1">
-          <ul>
-            <li className="font-semibold">
-              <a href="/">Home</a>
-            </li>
-            <li className="font-semibold">
-              <a href="#AboutUs">About Us</a>
-            </li>
-            <li className="font-semibold">
-              <a href="#ContactUs">Contact Us</a>
-            </li>
-            <li className="font-semibold">
-              <a href="#Service">Rentals</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div>
-        <p className="bg-black text-textWhite text-center py-2">
-          © <span>{year}</span> || All Rights Reserved || The Virtual World
-          Maker
-        </p>
+        <hr className="my-5 mx-20" />
+        <div className="self-center text-center">© <span>{year}</span> || All Rights Reserved || The Virtual World Maker</div>
       </div>
-    </footer>
+    </>
   );
 };