made it user friendly

src/Pages/contact.css

@@ -0,0 +1,9 @@
+.form{
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+    background-color: white;
+}
+.input-hover:hover{
+    border: 2px solid #a52c19;
+    transition: border 1s ease;
+    color: #320a04;
+}

src/Pages/contact.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import Button from '../componets/Button';
-
+import './contact.css'; 
 const ContactContainer = styled.div`
   padding: 4rem 2rem;
   max-width: 800px;
@@ -13,6 +13,8 @@ const Title = styled(motion.h1)`
   font-size: 2.5rem;
   margin-bottom: 2rem;
   text-align: center;
+  text-shadow: 2px 2px 4px black;
+  font-weight: bold;
 `;
 
 const Form = styled(motion.form)`
@@ -24,16 +26,26 @@ const Form = styled(motion.form)`
 const Input = styled.input`
   padding: 0.5rem;
   font-size: 1rem;
-  border: 1px solid #ccc;
+  border: 2px solid #ccc;
   border-radius: 4px;
+  outline:none;
+   &:focus {
+    border-color: #a52c19; // Change border color when focused
+    box-shadow: 0 0 3px black; // Add a subtle glow
+  }
 `;
 
 const TextArea = styled.textarea`
   padding: 0.5rem;
   font-size: 1rem;
-  border: 1px solid #ccc;
+  border: 2px solid #ccc;
   border-radius: 4px;
   min-height: 150px;
+  outline: none;
+  &:focus {
+    border-color: #a52c19; // Change border color when focused
+    box-shadow: 0 0 3px black; // Add a subtle glow
+  }
 `;
 
 function Contact() {
@@ -59,9 +71,9 @@ function Contact() {
   };
 
   return (
-    <ContactContainer>
+    <ContactContainer className='container'>
       <Title
-        className = "mt-7"
+        className = "mt-12"//corrected margin top
         initial={{ opacity: 0, y: -50 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
@@ -73,6 +85,7 @@ function Contact() {
         initial={{ opacity: 0, y: 50 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5, delay: 0.2 }}
+        className='form'
       >
         <Input
           type="text"
@@ -81,7 +94,9 @@ function Contact() {
           value={formData.name}
           onChange={handleChange}
           required
-          pattern="[a-zA-Z\s]+" title="Name must only contain letters"
+          pattern="[a-zA-Z\s]+" 
+          title="Name must only contain letters"
+          className='input-hover'
         />
         <Input
           type="email"
@@ -90,15 +105,17 @@ function Contact() {
           value={formData.email}
           onChange={handleChange}
           required
+          className='input-hover'
         />
         <TextArea
           name="message"
           placeholder="Your Message"
           value={formData.message}
           onChange={handleChange}
           required
+          className='input-hover'
         />
-        <Button primary type="submit">Send Message</Button>
+        <Button primary type="submit" className='button-hover'>Send Message</Button>
       </Form>
     </ContactContainer>
   );

src/componets/Button.js

@@ -9,13 +9,14 @@ const StyledButton = styled(motion.button)`
   background-color: ${props => props.primary ? '#7c2214' : '#7c2214'};
   color: ${props => props.primary ? 'white' : 'white'};
   border: 2px solid #7c2214;
-  border-radius: 4px;
+  border-radius: 120px;
   cursor: pointer;
   transition: all 0.3s ease;
 
   &:hover {
-    background-color: ${props => props.primary ? '#7c2214' : 'white'};
-    color: ${props => props.primary ? 'white' : '#7c2214'}
+    background-color: ${props => props.primary ? '#a03626' : 'white'};
+    color: ${props => props.primary ? 'white' : '#7c2214'};
+    text-shadow: 2px 2px 4px black;
   }
 `;