Added the contact form

docusaurus.config.js

@@ -145,6 +145,10 @@ const config = {
                 label: "GitHub",
                 href: "https://github.com/subhadipbhowmik/30-Days-Of-CPP/",
               },
+              {
+                label: "Contact",
+                to: "/#contact",
+              }
             ],
           },
         ],

src/components/Contact/Contact.css

@@ -0,0 +1,106 @@
+/* Base styling */
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f7f4; /* Light green background */
+    margin: 0;
+    padding: 0;
+  }
+
+  .contact {
+    text-align: center;
+    padding: 20px;
+  }
+
+  h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+    color: #2c6e49; /* Dark green */
+  }
+
+  .contact-form {
+    display: inline-block;
+    text-align: left;
+    max-width: 600px;
+    width: 100%;
+    background-color: white;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .contact-form:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  }
+
+  .form-group {
+    margin-bottom: 20px;
+  }
+
+  .form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #00bfa6; /* Light green */
+  }
+
+  .form-group input,
+  .form-group textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 1em;
+    color: #2c6e49; /* Dark green for input text */
+    transition: border-color 0.3s ease;
+  }
+
+  .form-group input:focus,
+  .form-group textarea:focus {
+    border-color: #00bfa6; /* Light green */
+  }
+
+  .form-group textarea {
+    resize: vertical;
+    height: 150px;
+  }
+
+  button {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #00bfa6; /* Light green */
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+
+  button:hover {
+    background-color: #009e8a; /* Slightly darker light green */
+    transform: translateY(-2px);
+  }
+
+  /* Responsive design */
+  @media (max-width: 600px) {
+    .contact-form {
+      padding: 20px;
+    }
+
+    h1 {
+      font-size: 2em;
+    }
+
+    .form-group input,
+    .form-group textarea {
+      font-size: 0.9em;
+    }
+
+    button {
+      font-size: 0.9em;
+    }
+  }
+

src/components/Contact/Contact.js

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import './Contact.css';
+
+const Contact = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    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 Data Submitted:', formData);
+    // Optionally reset the form
+    setFormData({
+      name: '',
+      email: '',
+      phone: '',
+      subject: '',
+      message: ''
+    });
+  };
+
+  return (
+    <div className="contact">
+      <h1>Contact Us</h1>
+      <form onSubmit={handleSubmit} className="contact-form">
+        <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="phone">Phone:</label>
+          <input
+            type="tel"
+            id="phone"
+            name="phone"
+            value={formData.phone}
+            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
+          />
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default Contact;

src/pages/index.js

@@ -6,6 +6,7 @@ import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Chatbot from "../components/Chatbot/chatbot";
 import Heading from "@theme/Heading";
 import styles from "./index.module.css";
+import Contact from "../components/Contact/Contact";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -41,6 +42,9 @@ export default function Home() {
       <main style={{ position: "relative" }}>
         <HomepageFeatures />
         <Chatbot />
+        <div id="contact">
+          <Contact />
+        </div>
       </main>
     </Layout>
   );