diff --git a/public/add.png b/public/add.png new file mode 100644 index 0000000..c5819ec Binary files /dev/null and b/public/add.png differ diff --git a/public/chat.svg b/public/chat.svg new file mode 100644 index 0000000..1d22c36 --- /dev/null +++ b/public/chat.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/minus.png b/public/minus.png new file mode 100644 index 0000000..3aad283 Binary files /dev/null and b/public/minus.png differ diff --git a/public/question.png b/public/question.png new file mode 100644 index 0000000..9a3ca32 Binary files /dev/null and b/public/question.png differ diff --git a/src/app/page.tsx b/src/app/page.tsx index 60e086e..3110ad9 100644 --- a/src/app/page.tsx +++ b/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() { + + + + + {/**/} diff --git a/src/components/ui/FAQ.module.css b/src/components/ui/FAQ.module.css new file mode 100644 index 0000000..d66de2d --- /dev/null +++ b/src/components/ui/FAQ.module.css @@ -0,0 +1,307 @@ +.faq-container { + width: 50vw; + margin: 0 auto; + padding: 20px; + background-color: #ffffff; + border-radius: 8px; + color: rgb(77, 76, 76); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.faq-heading { + text-align: center; + margin: 15vh 0px; + font-size: 5vw; /* Responsive font size */ + width: 100%; +} + +.faq-table { + width: 100%; + border-collapse: collapse; +} + +.faq-item { + border-bottom: 1px solid #ddd; /* Add bottom border for rows */ +} + +.faq-question { + width: 40vw; + background-color: #e4e4e4; + height: auto; + color: rgb(75, 75, 75); + padding: 25px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 1.4rem; /* Responsive font size */ + font-weight: 700; + margin-top: 50px; + border-radius: 5px; +} + +.faq-answer { + width: 40vw; + padding: 20px; + 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: 1.3rem; /* Responsive font size */ + 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 { + width: 100%; + + text-align: center; + margin: 15vh ; /* Center the margin */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.contact-image { + width: 120px; + height: auto; /* Maintain aspect ratio */ + border-radius: 8px; /* Optional: for rounded corners */ + opacity: 0.7; +} + +.contact-text { + margin: 50px; + font-size: 3vw; /* Responsive font size */ +} + +.contact-button { + width: 250px; + height: auto; + margin-top: 20px; + padding: 20px; + font-size: 30px; /* Responsive font size */ + 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 { + /* Darker shade for hover effect */ +} + +/* Media Queries */ +@media (max-width: 950px) { + .faq-question { + width: 80vw; /* Full width on smaller screens */ + font-size: 1.2rem; /* Adjust font size */ + padding: 25px; /* Adjust padding */ + } + + .faq-answer { + width: 80vw; /* Full width on smaller screens */ + font-size: 1.2rem; /* Adjust font size */ + padding: 25px; + /* Adjust font size */ + } + + + + .contact-text { + font-size: 1.2rem; /* Responsive font size */ + } + + .contact-button { + font-size: 12px; /* Adjust font size */ + } + + .contact-section { + width: 100%; + + text-align: center; + margin: 15vh; /* Center the margin */ + } +} + +@media (max-width: 700px) { + .faq-question { + font-size: 1rem; /* Further decrease font size */ + } + + .faq-answer { + font-size: 1rem; /* Adjust font size */ + } + + .contact-section { + width: fit-content; + + text-align: center; + margin: 15vh ; /* Center the margin */ + } + + .contact-text { + font-size: 1.5rem; /* Responsive font size */ + } + + .contact-button { + font-size: 10px; /* Adjust font size */ + } +} + +@media (max-width: 500px) { + .faq-heading { + font-size: 1.5rem; /* Further responsive heading */ + } + + .faq-question { + + font-size: 0.9rem; /* Further decrease font size */ + } + + .faq-answer { + font-size: 0.9rem; /* Further decrease font size */ + } + + .contact-section { + width: fit-content; + + text-align: center; + margin: 15vh ; /* Center the margin */ + } + + .contact-text { + font-size: 1.8rem; /* Adjust font size */ + } + + .contact-button { + font-size: 9px; /* Adjust font size */ + } +} + +@media (max-width: 375px) { + .faq-heading { + font-size: 1.2rem; /* Decrease heading size for very small screens */ + } + + .faq-question { + + padding: 15px; /* Reduce padding */ + } + + .faq-answer { + font-size: 0.9rem; /* Further decrease font size */ + } + + .contact-section { + width: fit-content; + + text-align: center; + margin: 15vh ; /* Center the margin */ + } + + .contact-text { + font-size: 1.8rem; /* Adjust font size */ + } + + .contact-image { + width: 50%; + height: auto; /* Maintain aspect ratio */ + border-radius: 8px; /* Optional: for rounded corners */ + opacity: 0.7; + } + + + .contact-button { + width: 100%; /* Make button full width */ + font-size: 8px; /* Adjust font size */ + padding: 10px 0; /* Adjust padding */ + } +} + +@media (max-width: 320px) { + .faq-heading { + width: 100%; + font-size: 1.1rem; /* Even smaller heading size */ + } + + .faq-question { + + font-size: 0.8rem; /* Further decrease font size */ + } + + .faq-answer { + font-size: 0.8rem; /* Further decrease font size */ + } + .contact-section { + width: fit-content; + + text-align: center; + margin: 15vh ; /* Center the margin */ + } + + .contact-text { + font-size: 1.2rem; /* Adjust font size */ + } + + .contact-button { + width: 100%; + font-size: 7px; /* Adjust font size */ + } + + +} + +@media (max-width: 185px) { + .faq-heading { + font-size: 0.8rem; /* Even smaller heading size */ + } + + .faq-question { + width: fit-content; + font-size: 0.8rem; /* Further decrease font size */ + } + + .faq-answer { + width: fit-content; + font-size: 0.8rem; /* Further decrease font size */ + } + + .contact-section { + width: fit-content; + + text-align: center; + margin: 15vh ; /* Center the margin */ + } + + .contact-text { + font-size: 0.8rem; /* Adjust font size */ + } + + .contact-button { + width: 100%; + font-size: 7px; /* Adjust font size */ + } + + +} diff --git a/src/components/ui/FAQ.tsx b/src/components/ui/FAQ.tsx new file mode 100644 index 0000000..2caf6b9 --- /dev/null +++ b/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/chat.svg'; +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(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 ( +
+

We're here to answer all your questions.

+
+ {faqs.map((faq, index) => ( +
+
toggleAnswer(index)} + aria-expanded={activeIndex === index} + role="button" + tabIndex={0} + onKeyDown={(e) => e.key === 'Enter' && toggleAnswer(index)} + > + {faq.question} + {activeIndex +
+ {activeIndex === index && ( +
+ {faq.answer} +
+ )} +
+ ))} +
+ + {/* Medium Size Image */} +
+ Contact Us +

Still have questions?

+ +
+
+ ); +}; + +export default FAQ;