Merge pull request #455 from Ojas-Arora/test

Discover Answers: A Blog-Style FAQ

src/Components/footer_section/FAQPage/FAQPage.css

@@ -1,113 +1,69 @@
-.home-icon {
-    position: absolute;
-    top: 1.5rem;
-    left: 1.5rem;
-    width: 2.5rem;
-    cursor: pointer;
-}
-
-.page-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: linear-gradient(135deg, #121026, #2d2a4f);
+.faq-page {
+    background: #121026;
     color: #ffffff;
+    width: 100%;
     padding: 20px;
-    max-width: 800px;
     margin: 0 auto;
-    margin-top: 30px;
-    border-radius: 10px;
-
 }
-
-.page-container h1 {
+.faq-page h1 {
     text-align: center;
     margin-bottom: 20px;
-    font-size: 2rem;
 }
-
 .faqs {
     display: flex;
     flex-direction: column;
-    gap: 20px;
-    max-width: 800px;
-
+    align-items: center;
+    width: 100%;
 }
-
 .faq-item {
-    background: #19162c;
-    padding: 20px;
-    border-radius: 10px;
-    transition: transform 0.3s, box-shadow 0.3s;
+    background: #1f1c35;
+    padding: 10px 20px;
+    transition: 0.3s;
     cursor: pointer;
     width: 100%;
-    position: relative;
+    max-width: 800px;
     overflow: hidden;
     box-shadow: 7px 7px 32px 0 #6052ff;
 }
-
-.faq-item::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), transparent);
-    z-index: 1;
-    opacity: 0;
-    transition: opacity 0.3s;
-
+.faq-item:not(.active):hover {
+    box-shadow: 0 0px 10px rgba(193, 193, 193, 0.3);
 }
-
-.faq-item:hover::before {
-    opacity: 1;
-}
-
 .faq-item h2 {
-    margin-bottom: 10px;
     cursor: pointer;
-    font-size: 1.5rem;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.faq-item.active {
+    background-color: #1f1c35;
 }
-
-.faq-item .question {
-    font-size: 0.9em;
-    color: #aaa;
-    margin-bottom: 15px;
+.faq-item.active * {
+    color: #ff21bc;
 }
-
-.faq-item .answer {
+.faqs .answer {
     line-height: 1.6;
-    margin-top: 15px;
-    color: #e0e0e0;
+    transition: 0.1s;
     opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.faq-item.expanded .answer {
-    opacity: 1;
+    background-color: #1f1c35;
+    transform: scaleY(0);
+    transform-origin: top;
+    width: 100%;
+    max-width: 800px;
+    margin-bottom: 12px;
+    padding: 0 20px;
+    border-top: 2px solid #121026;
+    box-shadow: 7px 7px 32px 0 #6052ff;
 }
-
-button {
-    background: #ff6347;
-    color: #ffffff;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
+.home-icon {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    width: 2.5rem;
     cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-button:hover {
-    background: #e55347;
 }
-
-@media (max-width: 768px) {
-    .page-container {
-        padding: 10px;
-    }
-
-    .faq-item {
-        padding: 15px;
-    }
+.faqs .answer.expand {
+    opacity: 1;
+    transform: scaleY(1);
+    padding: 20px;
 }

src/Components/footer_section/FAQPage/FAQPage.js

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
-import './FAQPage.css'; // Ensure the CSS file is created and imported
+import './FAQPage.css';
+import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import homeIcon from '../../../img/homeicon.png';
+
 const faqs = [
     {
         question: "What is UniCollab?",
@@ -13,11 +15,11 @@ const faqs = [
     },
     {
         question: "How do I add my project to UniCollab?",
-        answer: "You can edit or delete a project by going to the project's page and clicking on the 'Edit' or 'Delete' button..."
+        answer: "You can add a project by clicking on the 'Add Project' button on your dashboard and filling out the necessary details."
     },
     {
         question: "How can I collaborate with other students?",
-        answer: "You can collaborate with other students by sending a collaboration request from the project's page..."
+        answer: "You can collaborate with other students by sending a collaboration request from the project's page. If the project owner accepts your request, you can start working together."
     },
     {
         question: "Is UniCollab free to use?",
@@ -53,21 +55,28 @@ const FAQPage = () => {
     };
 
     return (
-        <div className="page-container">
-        <Link to="/">
-            <img src={homeIcon} alt="Home" className="home-icon" />
-        </Link>
+        <div className="faq-page">
+            <Link to="/">
+                <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
             <h1>FAQs</h1>
             <div className="faqs">
                 {faqs.map((faq, index) => (
-                    <div
-                        key={index}
-                        className={`faq-item ${activeIndex === index ? 'expanded' : ''}`}
-                        onClick={() => toggleFaq(index)}
-                    >
-                        <h2 className="question">{faq.question}</h2>
-                        {activeIndex === index && <p className="answer">{faq.answer}</p>}
-                    </div>
+                    <>
+                        <div
+                            key={index}
+                            className={activeIndex === index ? "faq-item active" : "faq-item"}
+                            onClick={() => toggleFaq(index)}
+                        >
+                            <h2>
+                                {faq.question}
+                                <span>{activeIndex === index ? <FaAngleUp /> : <FaAngleDown />}</span>
+                            </h2>
+                        </div>
+                        <p
+                            className={activeIndex === index ? "answer expand" : "answer"}
+                        >{activeIndex === index ? faq.answer : ""}</p>
+                    </>
                 ))}
             </div>
         </div>