Merge pull request Anjaliavv51#134 from omjadhav18/feature/social-icons

Anjaliavv51#132 Responsiveness of social icons and redesign the contact us
2004shweta · Oct 2, 2024 · e96fd97 · e96fd97
2 parents 8cbfb5e + b2ca0a8
commit e96fd97
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 58 deletions.
diff --git a/src/components/Contact-section/Contact.jsx b/src/components/Contact-section/Contact.jsx
@@ -1,7 +1,10 @@
 import ContactForm from "./ContactForm";
-import GoogleMap from './GoogleMap';
+import GoogleMap from "./GoogleMap";
 import { ContactText } from "./ContactText";
 import "./Contact-section.css";
+import Github from "../../assets/Social-Icons/Github.png";
+import Insta from "../../assets/Social-Icons/instagram.png";
+import Twitter from "../../assets/Social-Icons/Twitter.png";
 
 const Contact = () => {
   return (
@@ -15,10 +18,25 @@ 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>
+      </div>
       <GoogleMap />
-
     </section>
   );
 };

diff --git a/src/components/Contact-section/ContactForm.jsx b/src/components/Contact-section/ContactForm.jsx
@@ -51,31 +51,12 @@ const ContactForm = () => {
     <>
       <section className="flex flex-col md:flex-row  gap-y-10 my-20">
         {/* left hand side of the form */}
-        <article className="flex-1 text-center md:text-left md:ml-24">
-          <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-x-12 justify-center md:justify-start"
-            style={{ height: "min-content", alignItems: "baseline" }}
-          >
-            <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>
         {/* Right hand side of the form */}
         <article className="flex flex-1 justify-center p-5 md:p-0 md:mr-24">
           <form onSubmit={handleSubmit} className="gap-x-5 w-full">
             <div className="flex flex-col md:flex-row mb-6 justify-between">
               <div className="flex flex-col md:w-6/12">
-                <input
+                 <input
                   name="firstName"
                   value={contactForm.firstName}
                   className="border-2 border-green rounded-lg text-green-dark h-16  mb-6 md:mb-0 placeholder-textBlack p-2"

diff --git a/src/components/Contact-section/ContactText.jsx b/src/components/Contact-section/ContactText.jsx
@@ -1,40 +1,31 @@
 import React from 'react'
-import Github from "../../assets/Social-Icons/Github.png";
-import Insta from "../../assets/Social-Icons/instagram.png";
-import Twitter from "../../assets/Social-Icons/Twitter.png";
 
 export const ContactText = () => {
     return (
-        <section className='flex flex-col gap-[20px] justify-center lg:w-[45%] w-full'>
-            <div className="">
-                Hey Rentalog Users, <br />
-                We are always looking forward to hearing from you.
-                Please feel free to reach out to us for any queries, suggestions, or
-                feedback. <br />
-                We would love to hear from you. <br />
-                <br />
-                Contact us: <br />
-                Email: <a href="mailto:[email protected]" className='font-bold text-primaryGreen underline'> [email protected] </a> <br />
-                Phone: <a href="tel:+916201577047" className='font-bold text-primaryGreen underline'>  +91 62015 77047 </a> <br />
-                Address: Shaktinagar, Sonebhadra, UP, 231222 <br />
-                <br />
-                We welcome your input to improve your Rentalog experience. <br />
-                Thank you for choosing Rentalog! <br />
-                Best regards, <br />
-                The Rentalog Team
-            </div>
-            <div
-                className="flex gap-x-12 lg:justify-center justify-start"
-            >
-                <a href="https://twitter.com/gauravsingh1281">
-                    <img src={Twitter} alt="Twitter-logo" className="h-8" />
-                </a>
-                <a href="https://github.com/gauravsingh1281">
-                    <img src={Github} alt="Github-logo" className="h-8" />
-                </a>
-                <a href="https://www.instagram.com/gauravsingh1281">
-                    <img src={Insta} alt="Insta-logo" className="h-8" />
-                </a>
+        <section className="bg-gray-100  rounded-lg shadow-lg flex flex-col gap-6 justify-center lg:w-[45%] w-full">
+            <div className="text-gray-800">
+                <h2 className="text-xl font-bold mb-4">
+                    Hey Rentalog Users,
+                </h2>
+                <p className="leading-relaxed">
+                    We are always looking forward to hearing from you.
+                    Please feel free to reach out to us for any queries, suggestions, or
+                    feedback. <br />
+                    We would love to hear from you.
+                </p>
+
+                <div className="mt-4">
+                    <p className="font-semibold">Contact us:</p>
+                    <p>Email: <a href="mailto:[email protected]" className="font-bold text-primaryGreen underline"> [email protected] </a></p>
+                    <p>Phone: <a href="tel:+916201577047" className="font-bold text-primaryGreen underline"> +91 62015 77047 </a></p>
+                    <p>Address: Shaktinagar, Sonebhadra, UP, 231222</p>
+                </div>
+
+                <p className="mt-4 leading-relaxed">
+                    We welcome your input to improve your Rentalog experience. <br />
+                    Thank you for choosing Rentalog!
+                </p>
+                <p className="mt-2">Best regards,<br />The Rentalog Team</p>
             </div>
         </section>
     )

diff --git a/src/components/connectUs-section/Connect.jsx b/src/components/connectUs-section/Connect.jsx
@@ -15,7 +15,6 @@ const Connect = () => {
                     <a href="https://www.instagram.com/gauravsingh1281">
                         <img src={instagram} alt="" className="w-10 h-10 mr-2" />
                     </a>
-
                     <a href="https://twitter.com/gauravsingh1281">
                         <img src={twitter} alt="" className="w-8 h-8" />
                     </a>