From 4ec855ba8aad2d028863e351289c7df5e25421a7 Mon Sep 17 00:00:00 2001
From: Tina <tinaborundia23@gmail.com>
Date: Sat, 6 Jul 2024 20:37:42 +0530
Subject: [PATCH] Improved UI of FAQ page to match website theme

---
 faq-website.css | 326 +++++++++++++++++-------------------------------
 faq-website.js  |  38 +++---
 faq.html        |   2 +-
 3 files changed, 137 insertions(+), 229 deletions(-)

diff --git a/faq-website.css b/faq-website.css
index a0cf1449..422d7dfe 100644
--- a/faq-website.css
+++ b/faq-website.css
@@ -1,253 +1,151 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
-
 * {
   box-sizing: border-box;
   border-radius: 20px;
 }
 
-
-:root{
+:root {
   --color-primary: #ffd54b;
   --color-text: #545d7a;
   --color-white: #fff;
   --color-title: #242e4c;
   --color-background: #f7f8fb;
   --color-border: #dae1f5;
-  
-  /* Fonts */
-  /* --font-family: "Satoshi", sans-serif;
-  --fs-sm: 1.4rem;
-  --fs-md: 1.6rem;
-  --fs-lg: 2.2rem;
-  --fw-regular: 400;
-  --fw-medium: 500;
-  --fw-bold: 700; */
-  
-  /* Transition & Box Shadow */
-  --transition: 0.4s ease-in-out; 
-  --shadow: 0px 60px 56px -12px rgba(9, 40, 163, 0.05); 
-  
-  }
-  
+  --transition: 0.4s ease-in-out;
+  --shadow: 0px 60px 56px -12px rgba(9, 40, 163, 0.05);
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  color: var(--color-text);
+  background-image: url("https://img.freepik.com/free-photo/pouch-map-toy-airplane-blue-background-with-space-writing-text_23-2147958180.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+}
+
+.container {
+  background-image: url("https://img.freepik.com/free-photo/pouch-map-toy-airplane-blue-background-with-space-writing-text_23-2147958180.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center; /* Adjust opacity as needed */
+  border-radius: 20px;
+  padding: 20px;
+}
 
 .faq-container {
   margin: 0 auto;
   max-width: 900px !important;
   width: 80%;
+  padding: 20px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 25px;
 }
 
-.faq {
-  background-color: whitesmoke;
-  border: 3px solid #6a5acd;
-  border-radius: 25px;
-  margin: 20px 0;
-  overflow: hidden;
-  padding: 30px;
+.accordion__wrapper {
+  margin-top: 600px;
+  background-color: rgba(163, 163, 247, 0.2);
+  border-radius: 10px;
+  width: 100%;
+  padding: 5rem;
+}
+
+.accordion__title {
+  font-size: 25px;
+  font-weight: 800;
+  color: var(--color-title);
+  text-align: center;
+  margin-bottom: 4rem;
   position: relative;
-  transition: 0.3s ease;
-  cursor: pointer;
-  
+  left: -100px;
+  opacity: 0;
+  animation: slide-in 1s forwards;
 }
 
-.faq.active {
-  background: rgb(239, 239, 239);
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
+@keyframes slide-in {
+  100% {
+    left: 0;
+    opacity: 1;
+  }
 }
 
-.faq.active::before,
-.faq.active::after {
-  color: #2ecc71;
-  content: "\f075";
-  font-family: "Poppins" sans-serif;
-  font-size: 7rem;
-  left: 20px;
-  opacity: 0.2;
-  position: absolute;
-  top: 20px;
-  z-index: 0;
+.accordion {
+  border-bottom: 0.1rem solid var(--color-border);
+  padding-bottom: 2rem;
+  margin-bottom: 3rem;
+  width: 100%;
 }
 
-.faq.active::before {
-  color: #3498db;
-  left: -30px;
-  top: -10px;
-  transform: rotateY(180deg);
+.accordion__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  position: relative;
+  left: -100px;
+  opacity: 0;
+  animation: slide-in 1s forwards;
+  animation-delay: 0.3s;
 }
 
-.faq-title {
-  margin: 0 35px 0 0;
-  color: #3685fb;
+.accordion__icon {
+  background-color: var(--color-primary);
+  width: 2.2rem;
+  height: 2.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: var(--color-white);
+  flex-shrink: 0;
 }
-.faq-title:hover {
-  transform: scale(1.1);
-  /* font-size: 20px;*/ /* commenting to remove flickering of elements */
+
+.accordion__question {
+  font-size: 18px;
+  font-weight: 700;
+  color: black;
+  width: 100%;
 }
 
-.faq-text {
-  /* display: none; */
-  margin: 30px 0 0;
+.accordion__answer {
+  padding: 2rem 0;
   color: black;
+  font-size: 16px;
 }
 
+.accordion__content {
+  overflow: hidden;
+  height: 0;
+  transition: var(--transition);
+}
 
-  /* Colors */
- 
-  /* html {
-      font-size: 62.5%;
-  } */
-  
-  * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-      /* box-sizing: content-box; */
-  }
-  
-  body {
-      background-color: var(--color-background);
-      font-family: var(--font-family);
-      color: var(--color-text);
-      font-size: var(--fs-md);
-      font-weight: var(--fw-regular);
-  }
-  
-  .container{ 
-      width: 100% !important;
-
-      margin: auto;
-      min-height: 100vh;
-      padding: 2rem;
-      display: grid;
-      place-items: center;
+@media screen and (min-width: 580px) {
+  .accordion__wrapper {
+    padding: 5rem 8rem;
   }
-.faq-toggle {
-  align-items: center;
-  background: rgb(239, 239, 239);
-  border: 0;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  font-size: 1rem;
-  height: 30px;
-  justify-content: center;
-  padding: 0;
-  position: absolute;
-  right: 30px;
-  top: 10px;   /* Moving toggle button to top to remove overlapping with faq-title  */
-  width: 30px;
 }
-.faq-toggle .fa-times,
-.faq.active .faq-toggle .fa-chevron-down {
-  display: none;
+
+.more {
+  background-color: rgba(248, 248, 183, 0.3);
+  padding: 50px;
+  color: black;
+  margin: 10px auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
+.more p {
+  color: rgb(3, 2, 2);
+}
 
-  
-  
-  .accordion__wrapper {
-      background-color: var(--color-white);
-      box-shadow: var(--shadow);
-      border-radius:10px;
-      width: 100%;
-      /* max-width: 60rem; */
-      padding: 5rem;
-  }
-  
-  .accordion__title{
-      font-size: 25px;
-      font-weight:800;
-      color: var(--color-title);
-      text-align: center;
-      margin-bottom: 4rem;
-  }
-  
-  .accordion {
-      border-bottom: 0.1rem solid var(--color-border);
-      padding-bottom: 2rem;
-      margin-bottom: 3rem;
-      width: 100%;
-  }
-  
-  .accordion__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 1rem;
-      cursor: pointer;
-  } 
-  
-  .accordion__icon {
-      background-color: var(--color-primary);
-      width: 2.2rem;
-      height: 2.2rem;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 50%;
-      color: var(--color-white);
-      flex-shrink: 0;
-  }
-  
-  .accordion__question{
-      font-size: 18px;
-      font-weight: 700;
-      color: var(--color-title);
-      width: 100%;
-  }
-  
-  .accordion__answer{
-      padding: 2rem 0;
-      font-size: 16px;
-  }
-  
-  .accordion__content{
-      overflow: hidden;
-      height: 0;
-      transition: var(--transition);
-  }
-  
-  @media screen and (min-width: 580px) {
-      .accordion__wrapper {
-          padding: 5rem 8rem;
-      }
-  }
-  
-  
-  .more{
-    padding: 50px;
-    background-color: aliceblue;
-    margin: 10px auto;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-  .more p{
-    color:grey;
-  }
-  
-  .moreemail{
-    padding: 10px 20px;
-    font-size: 18px;
-    border-radius: 10px;
-    color: white;
-    background-color: rgb(40, 87, 241);
-  }
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
\ No newline at end of file
+.moreemail {
+  padding: 10px 20px;
+  font-size: 18px;
+  border-radius: 10px;
+  color: white;
+  background-color: rgb(244, 167, 230);
+}
diff --git a/faq-website.js b/faq-website.js
index 760971bb..a41e6ee4 100644
--- a/faq-website.js
+++ b/faq-website.js
@@ -1,21 +1,31 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const accordions = document.querySelectorAll(".accordion");
 
-const accordions = document.querySelectorAll(".accordion");
+  accordions.forEach((accordion, index) => {
+    const header = accordion.querySelector(".accordion__header");
+    const content = accordion.querySelector(".accordion__content");
+    const icon = accordion.querySelector("#accordion-icon");
 
-accordions.forEach((accordion, index) => {
-  const header = accordion.querySelector(".accordion__header");
-  const content = accordion.querySelector(".accordion__content");
-  const icon = accordion.querySelector("#accordion-icon");
+    header.addEventListener("click", () => {
+      const isOpen = content.style.height === `${content.scrollHeight}px`;
 
-  header.addEventListener("click", () => {
-    const isOpen = content.style.height === `${content.scrollHeight}px`;
+      accordions.forEach((a, i) => {
+        const c = a.querySelector(".accordion__content");
+        const ic = a.querySelector("#accordion-icon");
 
-    accordions.forEach((a, i) => {
-      const c = a.querySelector(".accordion__content");
-      const ic = a.querySelector("#accordion-icon");
-
-      c.style.height = i === index && !isOpen ? `${c.scrollHeight}px` : "0px";
-      ic.classList.toggle("ri-add-line", i !== index || !isOpen);
-      ic.classList.toggle("ri-subtract-fill", i === index && !isOpen);
+        c.style.height = i === index && !isOpen ? `${c.scrollHeight}px` : "0px";
+        ic.classList.toggle("ri-add-line", i !== index || !isOpen);
+        ic.classList.toggle("ri-subtract-fill", i === index && !isOpen);
+      });
     });
   });
+
+  // To trigger the animation on load
+  setTimeout(() => {
+    document
+      .querySelectorAll(".accordion__header")
+      .forEach((element, index) => {
+        element.style.animationDelay = `${0.3 * (index + 1)}s`;
+      });
+  }, 100);
 });
diff --git a/faq.html b/faq.html
index fb9db66d..bee6156a 100644
--- a/faq.html
+++ b/faq.html
@@ -305,7 +305,7 @@ <h2>Have More questions?</h2>
 
 
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-    <script>
+     <script>
       AOS.init({
         duration: 1500,
         offset: 120