feat: add the FAQ section

app/(root)/page.jsx

@@ -1,4 +1,5 @@
 import About from "@/components/About";
+import FAQ from "@/components/FAQ";
 import Features from "@/components/Features";
 import Hero from "@/components/Hero";
 
@@ -40,7 +41,7 @@ function Home() {
       <Hero />
       <Features />
       <About />
-      Some other sections, of course!
+      <FAQ />
     </>
   );
 }

components/FAQ.jsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { questions } from "@/constants";
+import { Plus, X } from "lucide-react";
+import { useRef, useState } from "react";
+
+function FAQ() {
+  const [selectedAccordion, setSelectedAccordion] = useState(null);
+  const ref = useRef({});
+
+  return (
+    <div className="mx-auto px-3 py-24 max-w-screen-xl">
+      <h2 className="text-center font-bold text-4xl md:text-5xl hyphens-auto mb-4">
+        Frequently Asked Questions
+      </h2>
+      {questions.map((question) => (
+        <div className="border-b-2 border-border px-3" key={question.key}>
+          <h3>
+            <button
+              className="py-3 w-full flex flex-row bg-inherit text-xl text-inherit"
+              onClick={(e) => {
+                e.preventDefault();
+                setSelectedAccordion(
+                  selectedAccordion == question.key ? null : question.key
+                );
+              }}
+            >
+              <div className="grow w-full text-start">{question.question}</div>
+              <Plus
+                className={`${selectedAccordion == question.key ? "rotate-45" : ""} duration-300 transition-transform`}
+              />
+            </button>
+          </h3>
+          <div
+            className="transition-[height] duration-300 overflow-hidden"
+            style={{
+              height:
+                selectedAccordion == question.key
+                  ? ref.current[question.key]
+                    ? ref.current[question.key].offsetHeight || 0
+                    : 0
+                  : 0
+            }}
+          >
+            <div
+              className="pb-3 text-muted-foreground"
+              ref={(el) => (ref.current[question.key] = el)}
+            >
+              {question.answer}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default FAQ;

constants/index.jsx

@@ -50,3 +50,34 @@ export const features = [
       "Access your emails seamlessly on any device with MERNMail. Our responsive design ensures a smooth experience on smartphones and tablets, making it easy to read, compose, and organize emails on the go."
   }
 ];
+
+export const questions = [
+  {
+    key: "item-1",
+    question: "What is a webmail application?",
+    answer:
+      "A webmail application is a type of email client that allows users to access and manage their email accounts through a web browser. It provides a user interface to send, receive, and manage emails, as well as other features, for example contact management, all within a web-based interface."
+  },
+  {
+    key: "item-2",
+    question: "What is MERNMail?",
+    answer:
+      "MERNMail is an open-source webmail application that is built on MERN stack. MERNMail also has an address book functionality. MERNMail is licensed under a permissive MIT license."
+  },
+  {
+    key: "item-3",
+    question: "How did MERNMail get its name?",
+    answer:
+      'MERNMail got its name from the MERN stack that the application is built on ("MERN") and the purpose of the application - a webmail application ("Mail").'
+  },
+  {
+    key: "item-4",
+    question: "How can I set up MERNMail?",
+    answer: "You can read the documentation to learn how to set up MERNMail."
+  },
+  {
+    key: "item-5",
+    question: "How can I use MERNMail?",
+    answer: "You can read the documentation to learn how to use MERNMail."
+  }
+];