faq bug fixes

gdsc-nits-org · Oct 5, 2024 · ff6bb45 · ff6bb45
1 parent 24eb821
commit ff6bb45
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 46 deletions.
diff --git a/public/images/faqcover.svg b/public/images/faqcover.svg
diff --git a/src/Pages/FAQ/Faq.jsx b/src/Pages/FAQ/Faq.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FaAngleUp, FaAngleDown } from "react-icons/fa";
+import { FaAngleDown } from "react-icons/fa";
 import { Navbar, Footer } from "../../Components/index";
 import styles from "./Faq.module.scss";
 import datas from "../../assets/faq.json";
@@ -8,11 +8,14 @@ const Faq = () => {
   return (
     <div className={styles.FaqParent}>
       <Navbar />
+      <div className={styles.mask}></div>
       <h1 className={styles.heading}>Faq</h1>
-      <div className={styles.innerCont}>
-        {datas.map((data) => (
-          <FaqItem key={data.id} question={data.question} answer={data.answer} />
-        ))}
+      <div className={styles.innerContHolder}>
+        <div className={styles.innerCont}>
+          {datas.map((data) => (
+            <FaqItem key={data.id} question={data.question} answer={data.answer} />
+          ))}
+        </div>
       </div>
       <Footer />
     </div>
@@ -31,7 +34,12 @@ const FaqItem = ({ question, answer }) => {
       <div className={styles.faqQuestion} onClick={toggleOpen}>
         <span className={styles.queText}>{question}</span>
         <span className={`${styles.arrow} ${isOpen ? "open" : ""}`}>
-          {isOpen ? <FaAngleUp /> : <FaAngleDown />}
+          <FaAngleDown
+            style={{
+              transform: `rotateZ(${isOpen ? 180 : 0}deg)`,
+              transition: "ease 200ms",
+            }}
+          />
         </span>
       </div>
       {isOpen && <div className={styles.faqAnswer}>{answer}</div>}

diff --git a/src/Pages/FAQ/Faq.module.scss b/src/Pages/FAQ/Faq.module.scss
@@ -6,25 +6,29 @@
 .root {
   font-size: 16px; // Set a base font size for the root
 }
+
 .FaqParent {
+  position: relative;
+  .mask {
+    position: absolute;
+    top: 0;
+    min-width: 100%;
+    min-height: 30vh;
+    background-image: linear-gradient(to bottom, transparent, #000000);
+    z-index: 0;
+  }
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: black;
-  background-image: linear-gradient(
-      to bottom,
-      rgba(13, 12, 12, 0.1),
-      rgba(13, 12, 12, 0.5),
-      rgba(13, 12, 12, 0.9)
-    ),
-    url("../../../public/images/Faq\ Bg.png") !important;
+  background-image: url("../../../public/images/Faq\ Bg.png") !important;
   background-size: 100% 30vh;
   opacity: 1;
   filter: contrast(1.5);
   filter: brightness(120%);
   background-repeat: repeat-x;
-  gap: 6rem;
+  gap: 10rem;
 
   .heading {
     color: #f2c300;
@@ -34,53 +38,74 @@
     font-weight: 400;
     line-height: 2.5rem;
     letter-spacing: 0.1em;
-
+    z-index: 1;
     //  text-align: center;
   }
-  .innerCont {
-    margin-top: 3rem;
-    .faqItem {
-      margin: 1.2rem;
-      border: 0.5px solid rgb(144, 142, 142);
-      width: 47rem;
-      max-width: 100%;
-      .faqQuestion {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.9rem;
-        .queText {
-          font-size: 16px;
+
+  .innerContHolder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    z-index: 1;
+    .innerCont {
+      width: 100%;
+      @media screen and (min-width: 800px) {
+        width: 80%;
+      }
+      .faqItem {
+        margin: 1.2rem;
+        border: 0.5px solid rgb(144, 142, 142);
+        // width: 47rem;
+        max-width: 100%;
+        overflow: hidden;
+
+        cursor: pointer;
+        .faqQuestion {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0.9rem;
+
+          .queText {
+            font-size: 16px;
+            color: rgba(186, 238, 238, 0.8);
+            letter-spacing: 0.08rem;
+          }
+
+          .queText::first-letter {
+            font-size: 20px;
+          }
+
+          .arrow {
+            font-size: 1.5rem;
+          }
+        }
+
+        .faqAnswer {
+          // width: 40%;
+          padding: 1rem;
           color: rgba(186, 238, 238, 0.8);
-          letter-spacing: 0.08rem;
+          transition: all 1s ease;
+          letter-spacing: 1.5px;
+          line-height: 28, 8px;
+          font-size: 16px;
         }
-        .queText::first-letter {
+
+        .faqAnswer::first-letter {
           font-size: 20px;
         }
-        .arrow {
-          font-size: 1.5rem;
-        }
-      }
-      .faqAnswer {
-        // width: 40%;
-        padding: 1rem;
-        color: rgba(186, 238, 238, 0.8);
-        transition: all 1s ease;
-        letter-spacing: 1.5px;
-        line-height: 28, 8px;
-        font-size: 16px;
-      }
-      .faqAnswer::first-letter {
-        font-size: 20px;
       }
     }
   }
 }
+
 @media (max-width: 998px) {
   html {
     font-size: 60%;
   }
 }
+
 @media (max-width: 768px) {
   html {
     font-size: 52%;