From c5661edff182200e5b2c72a93482686042782d18 Mon Sep 17 00:00:00 2001
From: Subodh kangale <125494916+subodhkangale07@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:20:53 +0530
Subject: [PATCH 1/2] enhance the css of footer and cart page

---
 client/src/components/Footer.jsx | 206 ++++++++++++++++---------------
 client/src/components/Navbar.jsx |   2 +-
 client/src/pages/Cart.jsx        |   2 +-
 3 files changed, 111 insertions(+), 99 deletions(-)

diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
index 8f030ea..f57904c 100644
--- a/client/src/components/Footer.jsx
+++ b/client/src/components/Footer.jsx
@@ -1,107 +1,119 @@
-function Footer() {
-  return (
-    <>
-      <div className='bg-[#f7f7f7] rounded-t-[3rem] px-[4vw] py-[4vh] mt-[5vh]'>
-        <div className='flex flex-row justify-center md:justify-between container mx-auto'>
+import React from 'react';
+
+const Footer = () => {
+  const socialLinks = [
+    { icon: "/SocialMedia/Facebook.svg", alt: "Facebook" },
+    { icon: "/SocialMedia/Instagram.svg", alt: "Instagram" },
+    { icon: "/SocialMedia/LinkedIn.svg", alt: "LinkedIn" },
+    { icon: "/SocialMedia/Twitter.svg", alt: "Twitter" },
+    { icon: "/SocialMedia/YouTube.svg", alt: "YouTube" }
+  ];
+
+  const contactInfo = [
+    { icon: "/Contacts/Email.svg", text: "support@ratna.in", alt: "Email" },
+    { icon: "/Contacts/Phone.svg", text: "1-800-9625-45274", alt: "Phone" }
+  ];
 
-          <div className='flex flex-col gap-[1.5vh]'>
-            <img src='/logo.svg' className="h-[8vh] md:w-[12vw] md:h-auto"></img>
-            <p className="font-medium text-center md:text-left">Connoisseurs in the aloo-pyaj industry</p>
-            <ul className="flex flex-row gap-2 mx-auto md:mx-0">
-              <li>
-                <img 
-                  src="/SocialMedia/Facebook.svg" 
-                  className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="Facebook"
-                />
-              </li>
-              <li>
-                <img 
-                  src="/SocialMedia/Instagram.svg" 
-                  className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="Instagram"
-                />
-              </li>
-              <li>
-                <img 
-                  src="/SocialMedia/LinkedIn.svg" 
-                  className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="LinkedIn"
-                />
-              </li>
-              <li>
-                <img 
-                  src="/SocialMedia/Twitter.svg" 
-                  className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="Twitter"
-                />
-              </li>
-              <li>
-                <img 
-                  src="/SocialMedia/YouTube.svg" 
-                  className="h-[3vh] hover:scale-125 hover:brightness-150 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="YouTube"
-                />
-              </li>
-            </ul>
+  return (
+    <footer className="bg-gray-50 mt-20">
+      {/* Main Footer Content */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          {/* Logo and Social Section */}
+          <div className="flex flex-col items-center md:items-start space-y-6">
+            <img 
+              src="/logo.svg" 
+              className="h-16 md:h-20 w-auto"
+              alt="Company Logo"
+            />
+            
+            <p className="text-gray-600 font-medium text-center md:text-left">
+              Connoisseurs in the aloo-pyaj industry
+            </p>
+            
+            <div className="flex space-x-4">
+              {socialLinks.map((social) => (
+                <button
+                  key={social.alt}
+                  className="p-2 rounded-full hover:bg-gray-200 transition-all duration-300 group"
+                >
+                  <img 
+                    src={social.icon}
+                    className="h-5 w-5 group-hover:scale-110 transition-transform"
+                    alt={social.alt}
+                  />
+                </button>
+              ))}
+            </div>
           </div>
 
-          <div className="hidden md:flex md:flex-row align-center items-start gap-5 my-auto">
-            <p className="font-bold text-[#54b22c]">Contact Us</p>
-            <span className="flex flex-row gap-2">
-              <span>
-                <img 
-                  src="/Contacts/Email.svg" 
-                  className="hover:scale-125 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="Email"
-                />
-              </span>
-              <span>support@ratna.in</span>
-            </span>
-            <span className="flex flex-row gap-2">
-              <span>
-                <img 
-                  src="/Contacts/Phone.svg" 
-                  className="hover:scale-125 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="Phone"
-                />
-              </span>
-              <span>1-800-9625-45274</span>
-            </span>
-            <span className="flex flex-row gap-2">
-              <span>
-                <img 
-                  src="/Contacts/Mark.svg" 
-                  className="hover:scale-125 transition-transform duration-500 ease-in-out cursor-pointer"
-                  alt="Location"
-                />
-              </span>
-              <iframe
-                title="Embedded Google Map"
-                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3768.5962359850614!2d72.94319517611865!3d19.169143449040085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b858889942c7%3A0x2cb3f6dc0b5bb3cc!2sRatna%20Supermarket!5e0!3m2!1sen!2sin!4v1711740147095!5m2!1sen!2sin"
-                width="200"
-                height="200"
-                style={{ border: 0 }}
-                allowFullScreen=""
-                loading="lazy"
-                referrerPolicy="no-referrer-when-downgrade"
-              ></iframe>
-            </span>
+          {/* Contact Section */}
+          <div className="hidden md:flex flex-col space-y-6">
+            <h3 className="text-green-600 font-bold text-lg">Contact Us</h3>
+            
+            <div className="space-y-4">
+              {contactInfo.map((contact) => (
+                <div key={contact.alt} className="flex items-center space-x-3">
+                  <div className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
+                    <img 
+                      src={contact.icon}
+                      className="h-5 w-5"
+                      alt={contact.alt}
+                    />
+                  </div>
+                  <span className="text-gray-600 hover:text-gray-900 transition-colors">
+                    {contact.text}
+                  </span>
+                </div>
+              ))}
+              
+              {/* Location Map */}
+              <div className="flex flex-col space-y-3">
+                <div className="flex items-center space-x-3">
+                  <div className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
+                    <img 
+                      src="/Contacts/Mark.svg"
+                      className="h-5 w-5"
+                      alt="Location"
+                    />
+                  </div>
+                  <span className="text-gray-600">Our Location</span>
+                </div>
+                <div className="rounded-lg overflow-hidden shadow-lg">
+                  <iframe
+                    title="Embedded Google Map"
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3768.5962359850614!2d72.94319517611865!3d19.169143449040085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b858889942c7%3A0x2cb3f6dc0b5bb3cc!2sRatna%20Supermarket!5e0!3m2!1sen!2sin!4v1711740147095!5m2!1sen!2sin"
+                    className="w-full h-48"
+                    style={{ border: 0 }}
+                    allowFullScreen=""
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+      </div>
 
-        <div>
-          <hr className="border-[0.25vh] border-[#888888] w-[90%] mx-auto my-[4vh]"></hr>
-          <p className='copyrightContainer'>
-            <div className="flex flex-row justify-between container mx-auto">
-              <span>&copy; Copyright 2024 - Brutally Productions.</span>
-              <span className="hidden md:block">All rights reserved. For more information on our Terms and Conditions Click Here</span>
-            </div>
-          </p>
+      {/* Copyright Bar */}
+      <div className="border-t border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <p className="text-sm text-gray-500">
+              &copy; Copyright 2024 - Brutally Productions.
+            </p>
+            <p className="text-sm text-gray-500 hidden md:block">
+              All rights reserved. 
+              <button className="text-green-600 hover:text-green-700 ml-1 underline">
+                Click Here
+              </button> for Terms and Conditions
+            </p>
+          </div>
         </div>
       </div>
-    </>
+    </footer>
   );
-}
+};
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 6f43e13..eae12da 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -146,7 +146,7 @@ const Navbar = () => {
         />
       </div>
 
-      <nav className="md:p-2 shadow-md fixed justify-center z-50 flex  bg-white w-screen">
+      <nav className="md:p-2 shadow-md fixed justify-center z-50 flex  bg-white w-screen mb-11">
         <div className="md:flex items-center  w-full lg:p-4 justify-between gap-0 relative sm:block">
           <div className="flex items-center p-0 gap-2">
             <div
diff --git a/client/src/pages/Cart.jsx b/client/src/pages/Cart.jsx
index 5c4fd3f..fb0981d 100644
--- a/client/src/pages/Cart.jsx
+++ b/client/src/pages/Cart.jsx
@@ -22,7 +22,7 @@ function Cart() {
 
   console.log(cartItems);
   return (
-    <div className='mt-20 mx-auto max-w-4xl p-6 bg-white rounded-lg shadow-md py-12'>
+    <div className='mt-[120px] mx-auto max-w-4xl p-6 bg-white rounded-lg shadow-md py-12'>
       <h1 className='text-2xl md:text-3xl font-semibold mb-4'>Shopping Cart</h1>
       {cartItems.length === 0 ? (
         <p className='text-gray-600'>Your cart is empty.</p>

From 62a98858e6bf8b99ebf74f8376f5a47be48f42d7 Mon Sep 17 00:00:00 2001
From: Subodh kangale <125494916+subodhkangale07@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:22:41 +0530
Subject: [PATCH 2/2] enhance the css of footer and cart page

---
 client/src/components/Navbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index eae12da..6f43e13 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -146,7 +146,7 @@ const Navbar = () => {
         />
       </div>
 
-      <nav className="md:p-2 shadow-md fixed justify-center z-50 flex  bg-white w-screen mb-11">
+      <nav className="md:p-2 shadow-md fixed justify-center z-50 flex  bg-white w-screen">
         <div className="md:flex items-center  w-full lg:p-4 justify-between gap-0 relative sm:block">
           <div className="flex items-center p-0 gap-2">
             <div