From f1de366c7c07b7add5d0c8b1607507f5987cc866 Mon Sep 17 00:00:00 2001
From: rajgharat07 <gharatyashraj@gmail.com>
Date: Mon, 14 Oct 2024 23:23:01 +0530
Subject: [PATCH] Feature : Implemented an interactive FAQ section on the
 homepage for improved user engagement and accessibility.

---
 views/home.ejs         |  3 +-
 views/includes/FAQ.ejs | 70 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 views/includes/FAQ.ejs

diff --git a/views/home.ejs b/views/home.ejs
index 8866a1f0..85fb0c55 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -82,7 +82,8 @@
                 
            
           </div>
-            
+
+        <%- include('includes/FAQ.ejs') %>
   <section id="newsletter">
     <div class="news-text">
       <h4 style="margin-bottom: 1rem;
diff --git a/views/includes/FAQ.ejs b/views/includes/FAQ.ejs
new file mode 100644
index 00000000..56acdf66
--- /dev/null
+++ b/views/includes/FAQ.ejs
@@ -0,0 +1,70 @@
+<section id="faq" class="mx-auto w-full max-w-7xl px-5">
+    <h2 class="text-5xl font-bold text-white mb-8 text-center">Frequently Asked Questions</h2>
+    <div class="space-y-3" id="faq-container">
+      <!-- FAQ items will be injected here by JavaScript -->
+    </div>
+</section>
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+    .faq-answer {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+      }
+  
+      .faq-answer.open {
+        max-height: 180px; /* adjust as needed */
+        opacity: 1;
+      }
+
+      @media (max-width: 640px) {
+        .faq-answer.open {
+            max-height: 120px; /* adjust for smaller screens */
+        }
+    }
+</style>
+
+<script>
+    const faqData = [
+      { question: "What is IMAGINE - AI?", answer: "IMAGINE - AI emerges as a beacon of innovation, addressing the inherent limitations of artistic creativity. By placing at your fingertips an exceptionally potent AI tool, we offer a transformative means to forge never-before-seen images that captivate the senses and push the boundaries of visual expression." },
+      { question: "How do I get started?", answer: "To get started, sign up for an account..." },
+      { question: "Can I use IMAGINE - AI for commercial purposes?", answer: "Yes, images generated by IMAGINE - AI can be used for commercial purposes, provided they comply with our terms and conditions. Be sure to review our usage guidelines for more information on commercial use." },
+      { question: "How do I contribute to this project?", answer: "We welcome contributions from the community! You can contribute by reporting bugs, suggesting features, or submitting pull requests on our GitHub repository. Join our community discussions and help us improve IMAGINE - AI together!" },
+      { question: "Is my personal information secure?", answer: "At IMAGINE - AI, we take data security seriously. We employ industry-standard encryption and security measures to protect your personal information. For more details, please refer to our Privacy Policy." },
+      { question: "Do we process any sensitive personal information?", answer: "We do not process sensitive personal information." },
+    ];
+
+    const faqContainer = document.getElementById('faq-container');
+
+    faqData.forEach((faq, index) => {
+      const faqItem = document.createElement('div');
+      faqItem.classList.add('bg-gray-800', 'bg-opacity-50', 'backdrop-blur-sm', 'rounded-lg', 'overflow-hidden', 'border', 'border-gray-700', 'transition-all', 'duration-300', 'hover:border-gray-900');
+
+      const button = document.createElement('button');
+      button.classList.add('flex', 'justify-between', 'items-center', 'w-full', 'px-5', 'py-3','mt-3');
+      button.innerHTML = `
+        <span class="font-semibold text-white mt-5">${faq.question}</span>
+        <svg class="w-5 h-5 text-white transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      `;
+
+      const answerDiv = document.createElement('div');
+      answerDiv.classList.add('faq-answer', 'px-5', 'py-3', 'bg-gray-700',);
+      answerDiv.innerHTML = `<p class="text-gray-300 text-base ">${faq.answer}</p>`;
+
+      button.addEventListener('click', () => {
+        const isOpen = answerDiv.classList.contains('open');
+        document.querySelectorAll('.faq-answer').forEach(item => item.classList.remove('open'));
+        if (!isOpen) {
+          answerDiv.classList.add('open');
+        }
+      });
+
+      faqItem.appendChild(button);
+      faqItem.appendChild(answerDiv);
+      faqContainer.appendChild(faqItem);
+    });
+</script>
\ No newline at end of file