add contact us page

package.json

@@ -22,6 +22,6 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
-    "vite": "^4.4.0"
+    "vite": "^4.5.3"
   }
 }

src/App.jsx

@@ -1,14 +1,16 @@
 import React from 'react'
 import './App.css'
 import HomePage from './components/HomePage'
-import PricingPage from './components/PricingPage'
+import PricingPage from './components/PricingPage';
+import ContactUs from './components/ContactUs/Contact';
 
 import { Route, Routes } from "react-router-dom"
 function App() {
   return (
     <Routes>
       <Route path="" element={<HomePage />} />
       <Route path="/pricing" element={<PricingPage />} />
+      <Route path="/contact-us" element={<ContactUs />} />
     </Routes>
   )
 }

src/components/ContactUs/Contact.jsx

@@ -0,0 +1,70 @@
+import  { useState } from 'react';
+import './contact.css';
+
+const ContactUs = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: ''
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle form submission logic here
+    console.log('Form submitted:', formData);
+  };
+
+  return (
+    <div className="contactUsWrapper">
+      <h1 className="title">Contact Us</h1>
+      <form className="form" onSubmit={handleSubmit}>
+        <div className="formField">
+          <label className="label" htmlFor="name">Name:</label>
+          <input
+            className="input"
+            type="text"
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="formField">
+          <label className="label" htmlFor="email">Email:</label>
+          <input
+            className="input"
+            type="email"
+            id="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="formField">
+          <label className="label" htmlFor="message">Message:</label>
+          <textarea
+            className="textarea"
+            id="message"
+            name="message"
+            value={formData.message}
+            onChange={handleChange}
+          ></textarea>
+        </div>
+        <button className="button" type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default ContactUs;
+
+
+

src/components/ContactUs/contact.css

@@ -0,0 +1,55 @@
+.contactUsWrapper {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 2rem;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .title {
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .formField {
+    margin-bottom: 1rem;
+  }
+
+  .label {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+  .input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .button {
+    padding: 0.75rem;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .button:hover {
+    background-color: #0056b3;
+  }
+

src/components/Navbar/Navbar.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import  { useState, useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import "./Navbar.css";
 
@@ -58,6 +58,11 @@ const Navbar = () => {
             } to="/">
             Solution
           </NavLink>
+          <NavLink className={({ isActive, isPending }) =>
+              isPending ? "active " : isActive ? "activepage" : ""
+            } to="/contact-us">
+            Contact Us
+          </NavLink>
           <a
             className="active"
             href="https://github.com/bishalde/Qr-Code-Generator"