feat: Improved UI of FAQ page to match website theme and responsive

faq-website.js

@@ -1,4 +1,3 @@
-
 const accordions = document.querySelectorAll(".accordion");
 
 accordions.forEach((accordion, index) => {
@@ -19,3 +18,68 @@ accordions.forEach((accordion, index) => {
     });
   });
 });
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Highlight active navbar
+  const navLinks = document.querySelectorAll(".navLinks a");
+
+  function highlightNavLink() {
+    const scrollPosition = window.scrollY;
+
+    navLinks.forEach((link) => {
+      const sectionId = link.getAttribute("href").substring(1);
+      const section = document.getElementById(sectionId);
+
+      // Adjust this value to control when the link should be highlighted
+      const offsetPercentage = 20;
+
+      if (
+        section.offsetTop - window.innerHeight * (offsetPercentage / 100) <=
+          scrollPosition &&
+        section.offsetTop + section.offsetHeight > scrollPosition
+      ) {
+        link.classList.add("active");
+      } else {
+        link.classList.remove("active");
+      }
+    });
+  }
+
+  document.addEventListener("scroll", highlightNavLink);
+  window.addEventListener("resize", highlightNavLink);
+
+  // Initialize AOS library
+  AOS.init();
+
+  // Set animation delays for FAQs
+  const faqs = document.querySelectorAll(".faq");
+  faqs.forEach((faq, index) => {
+    faq.style.animationDelay = `${index * 0.2}s`;
+  });
+});
+
+// Logout Button
+document.addEventListener("DOMContentLoaded", function () {
+  var isLoggedIn = localStorage.getItem("isLoggedIn");
+  var loginButton = document.getElementById("btn-style");
+  var logoutButton = document.getElementById("logout-btn");
+
+  if (isLoggedIn === "true") {
+    loginButton.style.display = "none";
+    logoutButton.style.display = "block";
+    loginButton.disabled = true;
+    logoutButton.disabled = false;
+    logoutButton.style.cursor = "pointer";
+    logoutButton.addEventListener("click", function () {
+      localStorage.setItem("isLoggedIn", "false");
+      window.location.href = "./index.html";
+    });
+  } else {
+    loginButton.style.display = "block";
+    logoutButton.disabled = true;
+  }
+});
+
+function sendEmail() {
+  window.location.href = "mailto:[email protected]";
+}

faq.css

@@ -0,0 +1,228 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
+
+* {
+  box-sizing: border-box;
+  border-radius: 20px;
+}
+
+:root {
+  --color-primary: #ffd54b;
+  --color-text: #545d7a;
+  --color-white: #fff;
+  --color-title: #242e4c;
+  --color-background: #f7f8fb;
+  --color-border: #dae1f5;
+  --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);
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+}
+
+/* .container {
+  width: 100% !important;
+  margin: auto;
+  min-height: 100vh;
+  padding: 2rem;
+  display: grid;
+  place-items: center;
+} */
+
+.faq-container {
+  margin: 0 auto;
+  max-width: 900px !important;
+  width: 80%;
+}
+
+.faq {
+  background-color: rgb(176, 196, 242, 0.3);
+  border: 1px solid #9a9afb;
+  color: black;
+  border-radius: 25px;
+  margin: 20px 0;
+  overflow: hidden;
+  padding: 30px;
+  position: relative;
+  transition: 0.3s ease;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateX(-100%);
+  animation: slideInFromLeft 2s ease-in-out forwards; /* Animation duration is now 2 seconds */
+}
+
+.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);
+}
+
+.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;
+}
+
+.faq.active::before {
+  color: #3498db;
+  left: -30px;
+  top: -10px;
+  transform: rotateY(180deg);
+}
+
+.faq-title {
+  margin: 0 35px 0 0;
+  color: #3685fb;
+  transition: transform 0.3s ease;
+}
+
+.faq-title:hover {
+  transform: scale(1.1);
+}
+
+.faq-text {
+  margin: 30px 0 0;
+  color: black;
+}
+
+.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;
+}
+
+.accordion__wrapper {
+  background: url("https://img.freepik.com/free-photo/pouch-map-toy-airplane-blue-background-with-space-writing-text_23-2147958180.jpg")
+    no-repeat center center fixed;
+  background-size: cover;
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  width: 100%;
+  margin-top: 20px;
+  min-height: 100vh;
+  padding: 2rem;
+  display: grid;
+  place-items: center;
+  position: relative; /* Ensure position is relative for z-index to work */
+  z-index: 1; /* Ensure the FAQ wrapper is above the background image */
+}
+
+.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: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9dwjbQHiWY1sgKRxCurFvyI4pwTMM9L2AVQ&s")
+    no-repeat center center fixed;
+  background-size: cover;
+  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);
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}