Fixed #52 : Adding the FAQ Component

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,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 */
+  }
+
+
+}