Merge pull request Anjaliavv51#215 from Sumanbhadra/feat/181-enhance-…

…Contact-with-us

Enhance "Connect with us" component with additional info

src/components/Contact-section/Contact.jsx

@@ -18,26 +18,57 @@ const Contact = () => {
         <ContactText />
         <ContactForm />
       </main>
-
-      <div className="flex items-center justify-center p-0">
-        <article className="flex flex-col items-center md:items-start text-center md:text-left">
-          <h2 className="text-3xl lg:text-5xl font-bold tracking-wider mb-10 font-monsterrat text-textBlack">
-            Connect with <span className="text-customRed">Us</span>
-          </h2>
-          <div className="flex gap-[27px] flex-wrap justify-center md:justify-start md:ml-20">
-            <a href="https://twitter.com/gauravsingh1281">
-              <img src={Twitter} alt="Twitter-logo" className="h-14" />
-            </a>
-            <a href="https://github.com/gauravsingh1281">
-              <img src={Github} alt="Github-logo" className="h-14" />
-            </a>
-            <a href="https://www.instagram.com/gauravsingh1281">
-              <img src={Insta} alt="Insta-logo" className="h-14" />
-            </a>
-          </div>
-        </article>
+      <h2 className="text-5xl text-center font-bold tracking-wider  font-monsterrat text-textBlack">
+        Connect with <span className="text-customRed">Us</span>
+      </h2>
+      <div className="md:flex items-center justify-between">
+        <div className="flex items-center justify-center p-0  md:w-1/2">
+          <article className="flex flex-col items-center text-center ">
+            <div className="flex gap-[27px] justify-center ">
+              <a href="https://twitter.com/gauravsingh1281">
+                <img
+                  src={Twitter}
+                  alt="Twitter-logo"
+                  className="md:h-12 h-10"
+                />
+              </a>
+              <a href="https://github.com/gauravsingh1281">
+                <img src={Github} alt="Github-logo" className="md:h-12 h-10" />
+              </a>
+              <a href="https://www.instagram.com/gauravsingh1281">
+                <img src={Insta} alt="Insta-logo" className="md:h-12 h-10" />
+              </a>
+            </div>
+            <div className="mt-4">
+              <p className="font-semibold">Get in touch :</p>
+              <p>
+                Email:
+                <a
+                  href="mailto:[email protected]"
+                  className="ml-1 font-bold text-primaryGreen underline"
+                >
+                  [email protected]
+                </a>
+              </p>
+              <p>
+                Phone:
+                <a
+                  href="tel:+916201577047"
+                  className="ml-1 font-bold text-primaryGreen underline"
+                >
+                  +91 62015 77047
+                </a>
+              </p>
+              <p>
+                Address: Shaktinagar, Sonebhadra <br /> UP, 231222
+              </p>
+            </div>
+          </article>
+        </div>
+        <div className="  md:w-1/2">
+          <GoogleMap />
+        </div>
       </div>
-      <GoogleMap />
     </section>
   );
 };

src/components/Contact-section/GoogleMap.jsx

@@ -1,31 +1,15 @@
 const GoogleMap = () => {
     return (
-      <div style={{
-        width: "70%",
-        height: "400px",
-        overflow: "hidden",
-        margin: "40px auto",
-        border: "1px solid #ccc",
-        borderRadius: "10px",
-        boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
-        transition: "all 0.3s ease-in-out",
-        "&:hover": {
-          border: "1px solid #333",
-          boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.3)",
-          transform: "scale(1.05)"
-        }
-      }}>
+      <div className="aspect-square md:p-20 p-5">
         <iframe
           src="https://www.google.com/maps/embed?pb!:1m18!1m12!1m3!1d58265.11671813966!2d82.65743034423417!3d24.116619925848997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x398f30495517f2bd%3A0x3b90fd685599d38!2sShakti%20Nagar%2C%20Uttar%20Pradesh%20231222!5e0!3m2!1sen!2sin!4v1691494886758!5m2!1sen!2sin"
           frameBorder="0"
-          style={{
-            width: "100%",
-            height: "100%",
-            transition: "all 0.3s ease-in-out"
-          }}
           allowFullScreen=""
+          width="100%"
+          height="100%"
           loading="lazy"
           referrerPolicy="no-referrer-when-downgrade"
+          className="rounded-lg shadow-gray drop-shadow-lg hover:drop-shadow-2xl" 
         />
       </div>
     );