ContactForm.jsx

gauravsingh1281 · Oct 9, 2024 · 9918ee4 · 9918ee4
1 parent 2a54de7
commit 9918ee4
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/src/components/Contact-section/ContactForm.jsx b/src/components/Contact-section/ContactForm.jsx
@@ -1,8 +1,12 @@
 import { useState } from "react";
 import "./Contact-section.css"; // Ensure this path is correct
 import FirstNameIcon from "../../assets/icons/first-name-icon.png"; // Replace with your actual path
+import LastNameIcon from "../../assets/icons/last-name-icon.png"; // Replace with your actual path
 import EmailIcon from "../../assets/icons/email-icon.png"; // Replace with your actual path
 import MessageIcon from "../../assets/icons/message-icon.png"; // Replace with your actual path
+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 ContactForm = () => {
   const [contactForm, setContactForm] = useState({
@@ -21,7 +25,6 @@ const ContactForm = () => {
   const handleSubmit = (e) => {
     e.preventDefault();
     const validationContactErrors = {};
-
     if (!contactForm.firstName.trim()) {
       validationContactErrors.firstName = "First name is required";
     }
@@ -37,7 +40,6 @@ const ContactForm = () => {
     if (!contactForm.message.trim()) {
       validationContactErrors.message = "Message is required";
     }
-
     setContactErrors(validationContactErrors);
 
     if (Object.keys(validationContactErrors).length === 0) {
@@ -54,6 +56,7 @@ const ContactForm = () => {
   return (
     <>
       <section className="flex flex-col md:flex-row gap-y-10 my-20">
+        {/* Left hand side of the form */}
         {/* 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">
@@ -72,7 +75,7 @@ const ContactForm = () => {
                 </span>
               </div>
               <div className="flex flex-col md:w-6/12 relative">
-                <img src={FirstNameIcon} alt="Last Name Icon" className="absolute left-3 top-4 w-5 h-5" />
+                <img src={LastNameIcon} alt="Last Name Icon" className="absolute left-3 top-4 w-5 h-5" />
                 <input
                   className="border-2 border-green rounded-lg h-16 text-green-dark pl-10 placeholder-textBlack p-2"
                   placeholder="Last name"
@@ -85,18 +88,20 @@ const ContactForm = () => {
                 </span>
               </div>
             </div>
-            <div className="flex flex-col w-full relative">
-              <img src={EmailIcon} alt="Email Icon" className="absolute left-3 top-4 w-5 h-5" />
-              <input
-                className="border-2 border-green rounded-lg h-16 text-green-dark pl-10 placeholder-textBlack p-2"
-                placeholder="Email"
-                name="email"
-                value={contactForm.email}
-                onChange={handleChange}
-              />
-              <span className="pl-4 text-[#ff0000] text-sm">
-                {contactErrors.email}
-              </span>
+            <div className="flex flex-col md:flex-row mb-6 justify-between">
+              <div className="flex flex-col w-full relative">
+                <img src={EmailIcon} alt="Email Icon" className="absolute left-3 top-4 w-5 h-5" />
+                <input
+                  className="border-2 border-green rounded-lg h-16 text-green-dark pl-10 placeholder-textBlack p-2"
+                  placeholder="Email"
+                  name="email"
+                  value={contactForm.email}
+                  onChange={handleChange}
+                />
+                <span className="pl-4 text-[#ff0000] text-sm">
+                  {contactErrors.email}
+                </span>
+              </div>
             </div>
 
             <div className="flex flex-col w-full relative">
@@ -113,7 +118,7 @@ const ContactForm = () => {
               </span>
             </div>
 
-            <div className="flex justify-center md:justify-start">
+            <div className="flex justify-center md:justify-start ">
               <button
                 id="text"
                 className="relative flex cursor-pointer items-center justify-center mt-5 bg-green rounded-lg w-40 lg:w-60 p-3 text-textWhite text-2xl md:text-xl font-bold font-monsterrat ease-in-out duration-300 hover:bg-[transparent] hover:text-green hover:border-green hover:border-[2px]"