From 1f26b1ce55920664227c8d6e847b82fdbfc0dee2 Mon Sep 17 00:00:00 2001
From: Hemraj-7 <mhemraj814@gmail.com>
Date: Fri, 1 Nov 2024 15:56:57 +0530
Subject: [PATCH] Issue number #626 is solved

---
 client/src/components/Footer/Footer.css   |  6 ------
 client/src/components/Footer/Footer.jsx   | 26 ++++++++++++-----------
 client/src/components/GoogleTranslate.jsx |  4 ++--
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Footer/Footer.css b/client/src/components/Footer/Footer.css
index c07b835a..cfaf12b7 100644
--- a/client/src/components/Footer/Footer.css
+++ b/client/src/components/Footer/Footer.css
@@ -72,15 +72,9 @@
     font-size: 0.875rem; /* Smaller text size */
 }
 
-/* newsletter */
-.newsletter-form {
-    margin-top: 20px;
-}
-
 .newsletter-form h2 {
     font-size: 1.2rem;
     margin-bottom: 10px; 
-    margin-top: 24px;
     text-align: center; 
 }
 
diff --git a/client/src/components/Footer/Footer.jsx b/client/src/components/Footer/Footer.jsx
index 422d87f8..b6ce555d 100644
--- a/client/src/components/Footer/Footer.jsx
+++ b/client/src/components/Footer/Footer.jsx
@@ -21,7 +21,7 @@ function Footer({ darkMode }) {
 
   return (
     <footer style={footerStyle} className="py-8">
-      <div className="container mx-auto flex flex-wrap justify-between max-w-[90%]">
+      <div className="container mx-auto flex flex-wrap gap-5 justify-between md:justify-around max-w-[90%]">
         <div className="footer-section">
           <h2 className="text-lg font-bold mb-4">ABOUT</h2>
           <ul className="footer-list">
@@ -100,9 +100,10 @@ function Footer({ darkMode }) {
             </li>
           </ul>
         </div>
-        <div className="footer-section">
-          <h2 className="text-lg font-bold mb-4 text-center">SOCIALS</h2>
-          <ul className="footer-list flex">
+        <div className="footer-section container mx-auto flex flex-wrap justify-around gap-5 items-center"> 
+          <div>
+          <h2 className="text-lg font-bold mb-4 text-center flex flex-col">SOCIALS</h2>
+          <ul className="footer-list flex ">
             <li>
               <a
                 href="https://www.linkedin.com/in/trisha-sahu-171623193/"
@@ -136,23 +137,24 @@ function Footer({ darkMode }) {
               </a>
             </li>
           </ul>
+          </div>
           <div
             className="translator"
             style={{
-              position: "relative",
-              marginLeft: "auto",
-              marginRight: "0",
-              marginBottom: "4px",
-              marginTop: "16px",
+              // position: "relative",
+              // marginLeft: "auto",
+              // marginRight: "0",
+              // marginBottom: "4px",
+              // marginTop: "16px",
               color: "white",
-              display: "block",
+              // display: "block",
               alignItems: "center",
               width: "fit-content",
             }}
           >
             <img
               src="google.png"
-              alt=""
+              alt="google translate png"
               className="google-translate"
               style={{ display: "block", width: "45px", margin: "auto" }}
             />
@@ -160,7 +162,7 @@ function Footer({ darkMode }) {
             <GoogleTranslate />
           </div>
         </div>
-        <div className="footer-section">
+        <div className="footer-section container mx-auto mt-2 flex flex-col items-center">
           <h2 className="text-lg font-bold mb-4 text-center">NEWSLETTER</h2>
           <form className="newsletter-form" onSubmit={handleSubscribe}>
             <input
diff --git a/client/src/components/GoogleTranslate.jsx b/client/src/components/GoogleTranslate.jsx
index 82f8b543..8b91664a 100644
--- a/client/src/components/GoogleTranslate.jsx
+++ b/client/src/components/GoogleTranslate.jsx
@@ -39,13 +39,13 @@ const GoogleTranslate = () => {
   }, []);
 
   return (
-    <div id="google_element" className="google-translate-container pl-20 md:pl-0">
+    <div id="google_element" className="google-translate-container">
       <style jsx>{`
         .goog-te-combo {
           background-color: #e0f2ff; /* Light blue background */
           border: 2px solid #0056b3; /* Dark blue border */
           border-radius: 0.5rem; /* Slightly more rounded */
-          // padding: 0.5rem 1rem; /* Tailwind: p-2 */
+          padding: 0.5rem 1rem; /* Tailwind: p-2 */
           font-size: 0.875rem; /* Tailwind: text-sm */
           transition: all 0.3s ease; /* Smooth transition */
           outline: none;