Added ContactUs form Page

src/App.jsx

@@ -2,13 +2,15 @@ import React from 'react'
 import './App.css'
 import HomePage from './components/HomePage'
 import PricingPage from './components/PricingPage'
+import ContactUsPage from './components/ContactUsPage'
 
 import { Route, Routes } from "react-router-dom"
 function App() {
   return (
     <Routes>
       <Route path="" element={<HomePage />} />
       <Route path="/pricing" element={<PricingPage />} />
+      <Route path="/contactUs" element={<ContactUsPage />} />
     </Routes>
   )
 }

src/components/ContactUs/ContactUs.css

@@ -0,0 +1,78 @@
+.contact-us {
+    max-width: 600px;
+    margin: 100px ;
+    margin-left: 350px;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .contact-us h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    font-family: Poppins, sans-serif;
+    font-weight: bolder;
+    font-size: xx-large;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+  }
+
+  .form-group label {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .form-group textarea {
+    resize: vertical;
+    height: 100px;
+  }
+
+  .star-rating {
+    display: flex;
+    gap: 5px;
+  }
+
+  .star {
+    font-size: 24px;
+    cursor: pointer;
+    color: #ccc;
+    transition: color 0.3s ease;
+  }
+
+  .star.filled,
+  .star.hover {
+    color: #ffc107;
+  }
+
+  button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #218838;
+  }
+
+  .form-status {
+    text-align: center;
+    margin-top: 20px;
+    color: green;
+  }
+

src/components/ContactUs/ContactUs.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import './ContactUs.css';
+
+const ContactUs = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    subject: '',
+    message: '',
+    rating: 0
+  });
+
+  const [formStatus, setFormStatus] = useState('');
+  const [hoverRating, setHoverRating] = useState(0);
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleRatingChange = (rating) => {
+    setFormData({
+      ...formData,
+      rating
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Here you would handle the form submission to your backend or email service
+    console.log('Form Data Submitted:', formData);
+
+    // For now, let's just reset the form and show a success message
+    setFormData({
+      name: '',
+      email: '',
+      subject: '',
+      message: '',
+      rating: 0
+    });
+    setFormStatus('Thank you for contacting us! We will get back to you soon.');
+  };
+
+  return (
+    <div className="contact-us">
+      <h2>Contact Us</h2>
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="name">Name:</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="email">Email:</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="subject">Subject:</label>
+          <input
+            type="text"
+            id="subject"
+            name="subject"
+            value={formData.subject}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="message">Message:</label>
+          <textarea
+            id="message"
+            name="message"
+            value={formData.message}
+            onChange={handleChange}
+            required
+          ></textarea>
+        </div>
+        <div className="form-group">
+          <label>Rating:</label>
+          <div className="star-rating">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <span
+                key={star}
+                className={`star ${formData.rating >= star ? 'filled' : ''} ${hoverRating >= star ? 'hover' : ''}`}
+                onClick={() => handleRatingChange(star)}
+                onMouseEnter={() => setHoverRating(star)}
+                onMouseLeave={() => setHoverRating(0)}
+              >
+                ★
+              </span>
+            ))}
+          </div>
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+      {formStatus && <p className="form-status">{formStatus}</p>}
+    </div>
+  );
+};
+
+export default ContactUs;

src/components/ContactUs/ContactUs.scss

@@ -0,0 +1,74 @@
+.contact-us {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+    h2 {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    .form-group {
+      margin-bottom: 15px;
+
+      label {
+        display: block;
+        margin-bottom: 5px;
+      }
+
+      input,
+      textarea {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+      }
+
+      textarea {
+        resize: vertical;
+        height: 100px;
+      }
+    }
+
+    .star-rating {
+      display: flex;
+      gap: 5px;
+
+      .star {
+        font-size: 24px;
+        cursor: pointer;
+        color: #ccc;
+        transition: color 0.3s ease;
+
+        &.filled,
+        &.hover {
+          color: #ffc107;
+        }
+      }
+    }
+
+    button {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      background-color: #28a745;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #218838;
+      }
+    }
+
+    .form-status {
+      text-align: center;
+      margin-top: 20px;
+      color: green;
+    }
+  }
+

src/components/ContactUsPage.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Navbar from './Navbar/Navbar'
+import ContactUs from './ContactUs/ContactUs'
+
+
+function HomePage(props) {
+  return (
+    <>
+    <Navbar />
+    <ContactUs />
+    </>
+  )
+}
+
+export default HomePage

src/components/HomePage.jsx

@@ -3,6 +3,7 @@ import Navbar from './Navbar/Navbar'
 import Homebox from './Homebox/Homebox'
 import Contentbox from './Contentbox/Contentbox'
 
+
 function HomePage(props) {
   return (
     <>

src/components/Navbar/Navbar.jsx

@@ -64,11 +64,16 @@ const Navbar = () => {
           >
             Github
           </a>
+          <NavLink className={({ isActive, isPending }) =>
+              isPending ? "active " : isActive ? "activepage" : ""
+            } to="/ContactUs">
+            ContactUs
+          </NavLink>
         </div>
 
         <div className={navbuttonsvlue}>
-          <button className="btn">Sign In</button>
-          <button className="btn btn-secondary">Sign Up</button>
+          <button className="btn">SignIn</button>
+          <button className="btn btn-secondary">SignUp</button>
         </div>
       </nav>
     </>