Fixed #52 : Add a FAQ section

src/app/page.tsx

@@ -12,6 +12,7 @@ import Notify_Banner from "/public/notify-early-banner.jpg"
 import PahadiWomen from "/public/bhotiaWoman.webp"
 import Screen from "@/components/Screen";
 import Festivals from "@/components/Festivals";
+import FAQ from "@/components/ui/FAQ";
 
 export default function Home() {
 
@@ -146,6 +147,11 @@ export default function Home() {
 
             </section>
 
+
+
+            <FAQ />
+
+
             {/*<Festivals />*/}
 
 

src/components/ui/FAQ.module.css

@@ -0,0 +1,109 @@
+.faq-container {
+  width: 70%;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  color: rgb(77, 76, 76);
+
+}
+
+.faq-heading {
+  text-align: center;
+  margin: 15vh 0px ;
+  font-size: 90px;
+  width: 100%;
+}
+
+.faq-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.faq-item {
+  border-bottom: 1px solid #ddd; /* Add bottom border for rows */
+}
+
+.faq-question {
+  background-color: #e4e4e4;
+  height: 80px;
+  color: rgb(75, 75, 75); /* Changed to white for better contrast */
+  padding: 25px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 27px;
+  font-weight: 700;
+   margin-top: 50px;
+  border-radius: 5px;
+}
+
+.faq-answer {
+  padding: 25px;
+  background-color: #f1f1f1;
+  color: rgb(75, 75, 75);
+  max-height: 0; /* Start hidden */
+  overflow: hidden; /* Prevent overflow */
+  transition: max-height 1s ease-in-out; /* Smooth transition */
+  justify-content: space-between;
+  align-items: center;
+  font-size: 25px;
+  font-weight: 700;
+
+  line-height: 1.5;
+
+}
+
+.faq-item.active .faq-answer {
+  max-height: 200px; /* Adjust as needed */
+}
+
+
+
+.toggle-icon {
+  width: 30px;
+  height: 30px;
+  margin-left: 10px;
+
+  vertical-align: middle; /* Align icon vertically */
+}
+
+
+.contact-section {
+  text-align: center;
+  margin: 15vh;
+
+}
+
+.contact-image {
+  max-width: 20%;
+  height: auto; /* Maintain aspect ratio */
+  border-radius: 8px; /* Optional: for rounded corners */
+  opacity: 0.7;
+}
+
+.contact-text{
+  margin: 50px;
+  font-size: 40px;
+}
+
+
+.contact-button {
+  width: 200px;
+  height: 60px;
+  margin-top: 20px;
+  padding: 10px 20px;
+  font-size: 21px;
+  letter-spacing: 2px;
+  color: #ffffff; /* Change as per your theme */
+  background-color: #2c2c2c; /* Change as per your theme */
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.contact-button:hover {
+  background-color: #005bb5; /* Darker shade for hover effect */
+}

src/components/ui/FAQ.tsx

@@ -0,0 +1,94 @@
+"use client"; // Mark this component as a client component
+
+import React, { useState } from 'react';
+import styles from './FAQ.module.css';
+import Image from 'next/image';
+import contactImage from '/public/question.png'; 
+import plusIcon from '/public/add.png'; // Update the path to your icon
+import minusIcon from '/public/minus.png'; // Update the path to your icon
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+const FAQ: React.FC = () => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const faqs: FAQItem[] = [
+
+    {
+      question: "What cultural festivals can I experience in Uttarakhand?",
+      answer: "Uttarakhand hosts vibrant festivals like Egaas Bagwal and Nanda Devi Mahotsav, each celebrating unique traditions and local heritage."
+    },
+    {
+      question: "How can I learn more about Uttarakhand's traditions?",
+      answer: "You can explore our website for articles, resources, and events that highlight the rich cultural traditions of Uttarakhand."
+    },
+    {
+      question: "Can I participate in cultural events?",
+      answer: "Yes! We encourage participation in our cultural events. Check our events page for more details on upcoming activities."
+    },
+    {
+      question: "What is the significance of Egaas Bagwal?",
+      answer: "Egaas Bagwal is celebrated 11 days after Diwali, symbolizing the return of Lord Rama. It includes traditional dances and culinary delights."
+    },
+    {
+      question: "How do I stay updated on upcoming events?",
+      answer: "You can sign up for our newsletter to receive updates on festivals, fairs, and other cultural events directly to your inbox."
+    }
+  ];
+
+  const toggleAnswer = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <div className={styles["faq-container"]}>
+      <h2 className={styles["faq-heading"]}>We&apos;re here to answer all your questions.</h2>
+      <div className={styles["faq-list"]}>
+        {faqs.map((faq, index) => (
+          <div key={index} className={`${styles["faq-item"]} ${activeIndex === index ? styles.active : ''}`}>
+            <div 
+              className={styles["faq-question"]} 
+              onClick={() => toggleAnswer(index)} 
+              aria-expanded={activeIndex === index}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => e.key === 'Enter' && toggleAnswer(index)}
+            >
+              {faq.question}
+              <Image 
+                src={activeIndex === index ? minusIcon : plusIcon} 
+                alt={activeIndex === index ? "Collapse" : "Expand"} 
+                width={20} 
+                height={20} 
+                className={styles["toggle-icon"]}
+              />
+            </div>
+            {activeIndex === index && (
+              <div className={styles["faq-answer"]}>
+                {faq.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Medium Size Image */}
+      <div className={styles["contact-section"]}>
+        <Image 
+          src={contactImage} 
+          alt="Contact Us" 
+          width={600} 
+          height={400} 
+          className={styles["contact-image"]}
+        />
+        <h3 className={styles["contact-text"]} >Still have questions?</h3>
+        <button className={styles["contact-button"]}>Contact Us</button>
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;