Added FAQS section on home page #73

hiring-portal/src/CSS/faqSection.css

@@ -0,0 +1,88 @@
+:root {
+    --primary-color: #2d2d2d;
+    --dark-blue: #000000;
+    --light-blue: #dedfdf;
+    --active-blue: #e5e5e5;
+    --white: #ffffff;
+    --border-color: #e0eafc;
+    --dark-text: #333;
+}
+
+.faq-section {
+    padding: 40px;
+    font-family: 'Inter', sans-serif;
+    padding-top: 10px;
+}
+
+.faq-title {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 30px;
+    color: var(--dark-blue);
+}
+
+.faq-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 70%;
+    margin: 0 auto;
+}
+
+.faq-item {
+    background: var(--white);
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.faq-item:hover {
+    transform: translateY(-3px);
+    background-color: var(--light-blue);
+    border-color: var(--primary-color);
+}
+
+.faq-item.active {
+    background-color: var(--active-blue);
+    border-color: var(--primary-color);
+}
+
+.faq-question {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1.3rem;
+    font-weight: 500;
+    color: var(--dark-blue);
+}
+
+.faq-question h3 {
+    margin: 0;
+}
+
+.faq-question .icon {
+    font-size: 1.5rem;
+    color: var(--primary-color);
+}
+
+.faq-answer {
+    overflow: hidden;
+    height: 0;
+    opacity: 0;
+    padding: 0;
+    transition: height 0.3s ease, opacity 0.3s ease;
+}
+
+.faq-answer p {
+    font-size: 1rem;
+    color: var(--dark-text);
+    margin-top: 10px;
+}
+
+.faq-item.active .faq-answer {
+    height: auto;
+    opacity: 1;
+    padding-top: 10px;
+}

hiring-portal/src/Components/Faqs.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { FiChevronDown, FiChevronUp } from "react-icons/fi";
+import "../CSS/faqSection.css";
+
+const FAQSection = () => {
+    const [activeIndex, setActiveIndex] = useState(null);
+
+    const faqs = [
+        { question: "How can I apply for a job?", answer: "You can apply by signing up, creating a profile, and submitting your resume." },
+        { question: "What is the hiring process?", answer: "The process includes applying for a job, interviews, and a final evaluation before the offer." },
+        { question: "How do I track my application?", answer: "You can track your application status from your profile dashboard." },
+        { question: "Can I apply for multiple jobs?", answer: "Yes, you can apply for multiple jobs and track each one separately." },
+        { question: "What are the job requirements?", answer: "Job requirements vary by position, but they are typically listed in the job description." },
+        { question: "How do I reset my password?", answer: "You can reset your password by clicking the 'Forgot Password' link on the login page." },
+        { question: "Can I edit my profile?", answer: "Yes, you can edit your profile information at any time from your account settings." },
+        { question: "Is there a way to withdraw my application?", answer: "Yes, you can withdraw an application from your profile dashboard at any time." }
+    ];
+
+    const toggleFAQ = (index) => {
+        setActiveIndex(activeIndex === index ? null : index);
+    };
+
+    return (
+        <>
+            <section className="faq-section" id="faqs">
+                <h2 className="faq-title">Frequently Asked Questions</h2>
+                <div className="faq-container">
+                    {faqs.map((faq, index) => (
+                        <div
+                            key={index}
+                            className={`faq-item ${activeIndex === index ? "active" : ""}`}
+                            onClick={() => toggleFAQ(index)}
+                        >
+                            <div className="faq-question">
+                                <h3>{faq.question}</h3>
+                                <span className="icon">
+                                    {activeIndex === index ? <FiChevronUp /> : <FiChevronDown />}
+                                </span>
+                            </div>
+                            <div className={`faq-answer ${activeIndex === index ? "open" : ""}`}>
+                                <p>{faq.answer}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default FAQSection;

hiring-portal/src/Components/Footer.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import "../CSS/footer.css";
-import { FaLinkedin,  FaFacebook, FaInstagram, FaGithub } from "react-icons/fa";
+import { FaLinkedin, FaFacebook, FaInstagram, FaGithub } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 
 const Footer = () => {
@@ -16,16 +16,16 @@ const Footer = () => {
                             <li><a href="/">Contact Us</a></li>
                         </ul>
                     </div>
-                    </div>
-                    <div className="flex">
-                        <div className="footer-column">
-                            <h3>Resources</h3>
-                            <ul>
-                                <li><a href="/">Blog</a></li>
-                                <li><a href="/">FAQs</a></li>
-                                <li><a href="/">Support</a></li>
-                            </ul>
-                        
+                </div>
+                <div className="flex">
+                    <div className="footer-column">
+                        <h3>Resources</h3>
+                        <ul>
+                            <li><a href="/">Blog</a></li>
+                            <li><a href="#faqs">FAQs</a></li>
+                            <li><a href="/">Support</a></li>
+                        </ul>
+
                     </div>
                 </div>
                 <div className="flex">
@@ -36,8 +36,8 @@ const Footer = () => {
                             <li><a href="/">Terms of Service</a></li>
                         </ul>
                     </div>
-                    </div>
-                    <div className="flex">
+                </div>
+                <div className="flex">
                     <div className="footer-column">
                         <h3>Follow Us</h3>
                         <div className="social-icons">
@@ -48,7 +48,7 @@ const Footer = () => {
                             <a href="https://www.facebook.com/" className="facebook"><FaFacebook /></a> {/* Assuming you're using this for Facebook */}
                         </div>
                     </div>
-                   
+
                 </div>
             </div>
             <div className="footer-bottom">

hiring-portal/src/Components/Homepage.jsx

@@ -7,14 +7,15 @@ import Footer from "./Footer";
 import Interview from "./Interview";
 import Testimonial from "./Testimonial";
 import { ClipLoader } from "react-spinners";
+import Faqs from './Faqs'
 
 const Homepage = () => {
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         const timer = setTimeout(() => {
             setLoading(false);
-        }, 1000); 
+        }, 1000);
         return () => clearTimeout(timer);
     }, []);
 
@@ -30,7 +31,8 @@ const Homepage = () => {
             <MiddleView />
             <PostView />
             <Interview />
-            <Testimonial/>
+            <Testimonial />
+            <Faqs />
             <Footer />
         </div>
     );