Created the FAQs section

src/components/Contact/Contact.css

@@ -27,6 +27,7 @@
   margin: 80px 50px;
   display: flex;
   flex-wrap: wrap;
+  margin-top: 15rem;
 }
 
 .contact-clinks, .contact-form-wrapper {

src/components/Dashboard/Dashboard.jsx

@@ -9,6 +9,7 @@ import collegesData from "./colleges.json";
 import ScrollToTop from "react-scroll-to-top";
 
 import CollegeCard from "./CollegeCard";
+import FAQS from "../FAQs/FAQS";
 
 const Dashboard = () => {
   const navigate = useNavigate();
@@ -174,6 +175,7 @@ window.addEventListener("scroll", setFixed)
             </div>
           ))}
         </div>
+        <FAQS/>
         <Footer />
       </main>
 

src/components/FAQs/FAQS.jsx

@@ -0,0 +1,56 @@
+// FAQs.jsx
+
+import React, { useState } from 'react';
+import './FAQs.css';
+
+const FAQs = () => {
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const faqs = [
+    {
+      question: '1. Where can I contact for my doubts?',
+      answer: 'There is a contact section. Go there, fill the form, and ask your doubts.',
+    },
+    {
+      question: '2. Is the college data provided here correct?',
+      answer: 'Yes, this is the latest data as per 2023.',
+    },
+    {
+      question: '3. Can I contribute to this page?',
+      answer: (
+        <>
+          Yes, of course! Here is the repository <a href="https://github.com/Counselllor/Counsellor-Web" className="repo-link" target="_blank" rel="noopener noreferrer"> link</a>.
+          <br/>But make sure to follow our contribution rules and regulations before making any contribution.
+        </>
+      ),
+    },
+  ];
+
+  const toggleAccordion = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <div className="faqs-container">
+      <h2>Frequently Asked Questions</h2>
+      <div className="accordion">
+        {faqs.map((faq, index) => (
+          <div key={index} className="accordion-item">
+            <button
+              onClick={() => toggleAccordion(index)}
+              aria-expanded={activeIndex === index ? 'true' : 'false'}
+            >
+              <span className="accordion-title">{faq.question}</span>
+              <span className="icon" aria-hidden="true"></span>
+            </button>
+            <div className={`accordion-content ${activeIndex === index ? 'active' : ''}`}>
+              <p>{faq.answer}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FAQs;

src/components/FAQs/FAQs.css

@@ -0,0 +1,133 @@
+
+@import url("https://fonts.googleapis.com/css?family=Hind:300,400&display=swap");
+
+.faqs-container {
+  padding: 2rem;
+  max-width: 70%;
+  margin: 0 auto;
+}
+
+.faqs-container * {
+  box-sizing: border-box;
+}
+
+.faqs-container h2 {
+  color:#3C38B9;
+  font-size: 40px;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-family: "ABeeZee", sans-serif;
+}
+.accordion-title{
+  font-size: 22px;
+  margin: 0 10px;
+}
+
+.accordion{
+    margin-top: 70px;
+    margin-bottom: 30px;
+}
+
+.accordion .accordion-item {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #6ca2dc;
+}
+
+.accordion .accordion-item button[aria-expanded='true'] {
+  border-bottom: 1px solid #03b5d2;
+}
+
+.accordion button {
+  position: relative;
+  display: block;
+  text-align: left;
+  width: 100%;
+  padding: 1em 0;
+  color: #7288a2;
+  font-size: 1.15rem;
+  font-weight: 400;
+  border: none;
+  background: none;
+  outline: none;
+  transition: color 0.3s;
+}
+
+.accordion button:hover,
+.accordion button:focus {
+  cursor: pointer;
+  color: #03b5d2;
+}
+
+.accordion button {
+  padding: 1em 1.5em 1em 0;
+}
+
+.accordion button .icon {
+  display: inline-block;
+  position: absolute;
+  top: 18px;
+  right: 0;
+  width: 22px;
+  height: 22px;
+  border: 1px solid;
+  border-radius: 22px;
+}
+
+.accordion button .icon::before {
+  display: block;
+  position: absolute;
+  content: "";
+  top: 9px;
+  left: 5px;
+  width: 10px;
+  height: 2px;
+  background: currentColor;
+}
+
+.accordion button .icon::after {
+  display: block;
+  position: absolute;
+  content: "";
+  top: 5px;
+  left: 9px;
+  width: 2px;
+  height: 10px;
+  background: currentColor;
+}
+
+.accordion button[aria-expanded='true'] {
+  color: #03b5d2;
+}
+
+.accordion button[aria-expanded='true'] .icon::after {
+  width: 0;
+}
+
+.accordion .accordion-content {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 200ms linear, max-height 200ms linear;
+}
+
+.accordion .accordion-content.active {
+  opacity: 0.8;
+  max-height: 9em;
+  text-align: left;
+  margin-left: 30px;
+  transition: opacity 200ms linear, max-height 200ms linear;
+}
+
+.accordion .accordion-content p {
+  font-family: 'Hind',sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  margin: 1em 0;
+}
+
+.repo-link {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+  }

src/components/index.js

@@ -4,6 +4,7 @@ import ForgotPasswordForm from "./ForgotPassword/ForgotPassword.jsx";
 import LoginForm from './Login/Login.jsx';
 import Navbar from "./Navbar/Navbar.jsx";
 import SignUpForm from './SignUp/SignUp.jsx';
+import FAQs from './FAQs/FAQS.jsx'
 
 const Home = lazy(() => import("./Home/Home.jsx"));
 const About = lazy(() => import("./About/About.jsx"));
@@ -15,7 +16,7 @@ export {
     About, Dashboard, ErrorPage, ForgotPasswordForm, Home,
     LoginForm,
     Navbar,
-
-    SignUpForm
+    SignUpForm,
+    FAQs
 };
 

src/index.jsx

@@ -9,6 +9,7 @@ import {
   ErrorPage,
   ForgotPasswordForm,
   SignUpForm,
+  FAQs,
 } from "./components/index";
 import Loading from "./components/Loading/Loading";
 import Login from "./components/Login/Login";
@@ -71,6 +72,11 @@ const router = createBrowserRouter([
         errorElement: <ErrorPage />,
         element: <ProfilePage />,
       },
+      {
+        path: "/FAQs",
+        errorElement: <ErrorPage />,
+        element: <FAQs />,
+      },
     ],
   },
 ]);