Added separate contact us section in FAQ's

frontend/src/components/ContactUs.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import "../styles/ContactUs.css";
+import InstagramIcon from "../assets/instagram-brands-solid.svg";
+import FacebookIcon from "../assets/facebook-brands-solid.svg";
+import TwitterIcon from "../assets/x-twitter-brands-solid.svg";
+import LinkedInIcon from "../assets/linkedin-brands-solid.svg";
+import ContactUsImg from "../assets/ContactUs_Img.png";
+
+const ContactUs = () => {
+  return (
+    <div className="contact-wrapper">
+      <div className="contact-container">
+        <h1>Contact Us</h1>
+        <div className="title-line"></div>
+        <form action="#" method="post">
+          <label htmlFor="name">Name</label>
+          <input type="text" id="name" name="name" required />
+
+          <label htmlFor="email">Email</label>
+          <input type="email" id="email" name="email" required />
+
+          <label htmlFor="message">Message</label>
+          <textarea id="message" name="message" required></textarea>
+
+          <button className="btn" type="submit">Send </button>
+        </form>
+        <div className="form-line"></div>
+
+        {/* Social Media Icons */}
+        <ul className="social-icons">
+          <li>
+            <a href="https://www.instagram.com" target="_blank" rel="noreferrer">
+              <img src={InstagramIcon} alt="Instagram" />
+            </a>
+          </li>
+          <li>
+            <a href="https://www.facebook.com" target="_blank" rel="noreferrer">
+              <img src={FacebookIcon} alt="Facebook" />
+            </a>
+          </li>
+          <li>
+            <a href="https://x.com" target="_blank" rel="noreferrer">
+              <img src={TwitterIcon} alt="Twitter" />
+            </a>
+          </li>
+          <li>
+            <a href="https://www.linkedin.com" target="_blank" rel="noreferrer">
+              <img src={LinkedInIcon} alt="LinkedIn" />
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      {/* ContactUs Image */}
+      <div className="contact-image">
+        <img src={ContactUsImg} alt="Contact Us Illustration" />
+      </div>
+    </div>
+  );
+};
+
+export default ContactUs;

frontend/src/pages/FAQPage.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Navbar from '../components/Navbar';
+import ContactUs from '../components/ContactUs';
 import FAQImage from '../assets/faq-image.png';
 import "../styles/faq.css";
 
@@ -88,6 +89,7 @@ const FAQPage = () => {
   return (
     <>
       <div className="min-h-screen p-8 bg-gray-50 dark:bg-slate-900">
+      <ContactUs />
         <div className="mx-auto flex flex-col lg:flex-row">
           <div className="lg:w-3/6 pr-8">
             <div className="text-center lg:text-left pt-6">

frontend/src/styles/ContactUs.css

@@ -0,0 +1,121 @@
+.contact-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+    max-width: 1000px; 
+    margin: 0 auto;
+    margin-bottom: 100px;
+    padding: 40px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  .contact-container {
+    flex: 1;
+    padding: 20px;
+  }
+
+  .contact-container h1 {
+    font-size: 36px;
+    text-align: center;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    margin-bottom: 10px;
+    background: linear-gradient(to right, #3b82f6, #a855f7); /* Gradient colors */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+  .title-line {
+    width: 170px;
+    height: 4px;
+    background-color: #7787ae;
+    margin: 0 auto 30px;
+    border-radius: 40%;
+  }
+
+  .contact-container form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .contact-container label {
+    margin: 10px 0 5px;
+    font-weight: bold;
+    color: #6d6d6d;
+    font-family: 'Poppins', sans-serif;
+  }
+
+  .contact-container input,
+  .contact-container textarea {
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #a5a5a5;
+    margin-bottom: 15px;
+    font-size: 16px;
+  }
+
+  .contact-container textarea {
+    resize: vertical;
+    min-height: 100px;
+  }
+
+  .contact-container .btn {
+    padding: 12px 20px;
+    background-color:#3153c5;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+
+  .contact-container .btn:hover {
+    background-color: #2e4cb0;
+    box-shadow: none;
+  }
+
+  .form-line {
+    width: 100%;
+    height: 2px;
+    background-color: #b0b0b0;
+    margin: 30px 0;
+  }
+
+  .social-icons {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    padding: 0;
+  }
+
+  .social-icons li {
+    margin: 0 15px;
+  }
+
+  .social-icons img {
+    width: 40px;
+    height: 40px;
+    filter: invert(0.3);
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .social-icons img:hover {
+    transform: translateY(-5px);
+  }
+
+  .contact-image {
+    flex: 0.8;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .contact-image img {
+    max-width: 100%;
+    height: auto;
+  }
+