From 41b2bbea36e3c490cd2c5d7ff95869d7a5be0531 Mon Sep 17 00:00:00 2001
From: perryHV <shagunagl7@.com>
Date: Mon, 16 Oct 2023 20:40:58 +0530
Subject: [PATCH] ISSUE Resolved: Contact page

---
 src/components/Contact.js        | 15 ++++----
 src/components/CustomContact.css | 61 ++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 src/components/CustomContact.css

diff --git a/src/components/Contact.js b/src/components/Contact.js
index f1fa0aa..9370319 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import React from "react";
 import { useFocus } from "../utils/useFocus";
+import './CustomContact.css'
 
 const Contact = () => {
   const [name, setName] = useState("");
@@ -104,7 +105,7 @@ const Contact = () => {
 
   return (
     <>
-      <div className="max-w-[1320px] mx-6 lg:mx-auto flex justify-center items-center flex-wrap flex-col my-16">
+      <div className="max-width-container mx-3 lg:mx-auto  justify-center items-center flex-wrap flex-col my-16">
         <p className=" text-gray-500 text-1xl font-bold text-gradient-orange">
           We're Eager to Receive Your Feedback and Suggestions!
         </p>
@@ -117,7 +118,7 @@ const Contact = () => {
 
             <input
               type="text"
-              className="mb-2 border p-2 mt-3 border-black rounded-lg w-[400px]"
+              className="mb-2 border p-2 mt-3 border-black rounded-lg "
               name="userName"
               value={name}
               onBlur={validateName}
@@ -146,7 +147,7 @@ const Contact = () => {
             <br />
             <input
               type="email"
-              className="mb-2 p-2 mt-3 border border-black rounded-lg w-[400px]"
+              className="mb-2 p-2 mt-3 border border-black rounded-lg "
               value={email}
               ref={focusEmail}
               onFocus={OnFocusHandler}
@@ -180,7 +181,7 @@ const Contact = () => {
             <br />
             <textarea
               type="text"
-              className="mb-2 p-2 mt-3 border border-black rounded w-[100%] lg:w-[400px] min-h-[100px]"
+              className="mb-2 p-2 mt-3 border border-black rounded-lg min-h-[100px]"
               name="message"
               value={msg}
               ref={focusMessage}
@@ -195,10 +196,10 @@ const Contact = () => {
             )}
           </div>
 
-          <div className="flex justify-around">
+          <div className="flex justify-center items-center">
             <button
               type="reset"
-              className="text-xs font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
+              className="btn text-s font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
               onClick={handleClearButton}
             >
               Clear
@@ -206,7 +207,7 @@ const Contact = () => {
             <input
               type="submit"
               value="Submit"
-              className="text-xs font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
+              className="btn text-s font-medium shadow-md px-2 py-2 outline-none m-2 right-10 rounded border border-gray-300 hover:border-gray-500 transition-all duration-200 ease-in-out text-gray-700 cursor-pointer"
               onClick={handleSubmitButton}
             ></input>
           </div>
diff --git a/src/components/CustomContact.css b/src/components/CustomContact.css
new file mode 100644
index 0000000..3a17976
--- /dev/null
+++ b/src/components/CustomContact.css
@@ -0,0 +1,61 @@
+/* styles.css */
+
+.btn {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 8px 16px;
+    margin: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  @media (max-width: 320px) {
+    /* Adjust styles for iPhone SE or similar devices */
+    .btn {
+      width: 100%;
+    }
+  }
+  
+  /* styles.css */
+  
+  /* ... other styles */
+  
+  /* Update the styles for input elements */
+  input[type="text"],
+  input[type="email"],
+  textarea {
+    width: 100%; /* Set width to 100% to make it responsive */
+    padding: 0.5rem;
+    border: 1px solid #000;
+    border-radius: 0.375rem;
+    margin-bottom: 0.5rem;
+    box-sizing: border-box; /* Include padding and border in the width calculation */
+  }
+  
+ 
+  .max-width-container {
+    max-width: 400px; /* Set the desired maximum width */
+    margin: auto; /* Center the container */
+    padding: 0 1rem; /* Add some padding for better readability */
+  }
+  
+  .form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+  }
+  
+  /* Adjust styles for smaller screens */
+  @media (max-width: 768px) {
+    .max-width-container {
+      max-width: 100%; /* Adjust maximum width for smaller screens */
+      padding: 0 0.5rem; /* Adjust padding for better readability */
+    }
+  
+    .form-group label {
+      width: 100%; /* Make labels fill the width */
+      box-sizing: border-box; /* Include padding and border in the width calculation */
+    }
+  }
+  
\ No newline at end of file