added the FAQs section

src/components/common/navbar/index.tsx

@@ -40,9 +40,19 @@ const Navbar = () => {
   const links = [
     { href: "/", label: t("home"), external: false, isHashLink: false },
     { href: "/#core-team", label: t("core_team"), external: false, isHashLink: true },
+    { href: "/#faq", label: "FAQ", external: false, isHashLink: true },
     { href: "/contributors", label: t("contributors"), external: false, isHashLink: false },
     { href: "/events", label: t("events"), external: false, isHashLink: false },
   ];
+  const handleFAQClick = () => {
+    setActiveSection(true);
+    if (pathname === "/") {
+      const el = document.getElementById("faq");
+      if (el) el.scrollIntoView({ behavior: "smooth" });
+    } else {
+      router.push("/#faq");
+    }
+  };
 
   const handleJoinClick = () => {
     trackGAEvent("join_community_click", {
@@ -98,18 +108,35 @@ const Navbar = () => {
             // Use NextLink for external or hash links, use localized Link otherwise
             const LinkComponent = l.external || l.isHashLink ? NextLink : Link;
 
-            return l.isHashLink ? (
-              <button
-                onClick={handleCoreTeamClick}
-                key={l.href}
-                className={cn(
-                  "rounded-md px-3 py-2 text-sm font-medium transition-colors",
-                  "text-slate-300 hover:text-white"
-                )}
-              >
-                {l.label}
-              </button>
-            ) : (
+            if (l.isHashLink && l.href === "/#core-team") {
+              return (
+                <button
+                  onClick={handleCoreTeamClick}
+                  key={l.href}
+                  className={cn(
+                    "rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                    "text-slate-300 hover:text-white"
+                  )}
+                >
+                  {l.label}
+                </button>
+              );
+            }
+            if (l.isHashLink && l.href === "/#faq") {
+              return (
+                <button
+                  onClick={handleFAQClick}
+                  key={l.href}
+                  className={cn(
+                    "rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                    "text-slate-300 hover:text-white"
+                  )}
+                >
+                  {l.label}
+                </button>
+              );
+            }
+            return (
               <LinkComponent
                 key={l.href}
                 href={l.href}
@@ -292,21 +319,41 @@ const Navbar = () => {
                 checkPath === "/" ? pathname === checkPath : pathname.startsWith(checkPath);
               const LinkComponent = l.external || l.isHashLink ? NextLink : Link;
 
-              return l.isHashLink ? (
-                <button
-                  onClick={handleCoreTeamClick}
-                  key={l.href}
-                  className={cn(
-                    "inline-flex w-full items-center rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
-                    "cursor-pointer border-0 bg-transparent",
-                    activeSection
-                      ? "bg-white/5 text-sky-300"
-                      : "text-slate-300 hover:bg-white/5 hover:text-white"
-                  )}
-                >
-                  {l.label}
-                </button>
-              ) : (
+              if (l.isHashLink && l.href === "/#core-team") {
+                return (
+                  <button
+                    onClick={handleCoreTeamClick}
+                    key={l.href}
+                    className={cn(
+                      "inline-flex w-full items-center rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
+                      "cursor-pointer border-0 bg-transparent",
+                      activeSection
+                        ? "bg-white/5 text-sky-300"
+                        : "text-slate-300 hover:bg-white/5 hover:text-white"
+                    )}
+                  >
+                    {l.label}
+                  </button>
+                );
+              }
+              if (l.isHashLink && l.href === "/#faq") {
+                return (
+                  <button
+                    onClick={handleFAQClick}
+                    key={l.href}
+                    className={cn(
+                      "inline-flex w-full items-center rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
+                      "cursor-pointer border-0 bg-transparent",
+                      activeSection
+                        ? "bg-white/5 text-sky-300"
+                        : "text-slate-300 hover:bg-white/5 hover:text-white"
+                    )}
+                  >
+                    {l.label}
+                  </button>
+                );
+              }
+              return (
                 <LinkComponent
                   key={l.href}
                   href={l.href}

src/modules/home/(sections)/faq-data.ts

@@ -0,0 +1,36 @@
+export type FAQ = {
+  question: string;
+  answer: string;
+};
+
+export const faqData: FAQ[] = [
+  {
+    question: "What is React Kolkata?",
+    answer:
+      "React Kolkata is a community for React developers in Kolkata, organizing meetups, workshops, and events to help developers connect, learn, and grow together.",
+  },
+  {
+    question: "Who can join React Kolkata?",
+    answer:
+      "Anyone interested in React, JavaScript, or web development can join React Kolkata. All skill levels are welcome!",
+  },
+  {
+    question: "How can I participate in events?",
+    answer:
+      "You can participate by joining our community channels and keeping an eye on our events page for upcoming meetups and workshops.",
+  },
+  {
+    question: "Is there any membership fee?",
+    answer: "No, joining React Kolkata and participating in our events is completely free.",
+  },
+  {
+    question: "How can I contribute to the community?",
+    answer:
+      "You can contribute by volunteering, speaking at events, writing blog posts, or helping organize meetups. Reach out to us through our community channels!",
+  },
+  {
+    question: "Where can I find event updates?",
+    answer:
+      "Event updates are posted on our website, social media, and community chat groups. Make sure to follow us and join our channels!",
+  },
+];

src/modules/home/(sections)/faq.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { faqData } from "./faq-data";
+
+const FAQSection = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const toggleFAQ = (idx: number) => {
+    setOpenIndex(openIndex === idx ? null : idx);
+  };
+
+  return (
+    <section id="faq" className="bg-gradient-to-b from-slate-900 to-slate-800 py-20 text-white">
+      <div className="mx-auto max-w-3xl px-4">
+        <h2 className="mb-10 text-center text-4xl font-extrabold tracking-tight">
+          <span className="bg-gradient-to-r from-sky-400 to-blue-600 bg-clip-text text-transparent">
+            Frequently Asked Questions
+          </span>
+        </h2>
+        <div className="space-y-4">
+          {faqData.map((faq, idx) => (
+            <div
+              key={idx}
+              className={
+                "rounded-lg border border-slate-700 bg-slate-800/70 shadow-lg transition-all" +
+                (openIndex === idx ? " ring-2 ring-sky-400/60" : "")
+              }
+            >
+              <button
+                className="group flex w-full items-center justify-between px-6 py-5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
+                onClick={() => toggleFAQ(idx)}
+                aria-expanded={openIndex === idx}
+                aria-controls={`faq-panel-${idx}`}
+              >
+                <span className="text-lg font-semibold transition-colors group-hover:text-sky-400">
+                  {faq.question}
+                </span>
+                <svg
+                  className={
+                    "ml-4 h-6 w-6 text-sky-400 transition-transform duration-300" +
+                    (openIndex === idx ? " rotate-180" : "")
+                  }
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              <div
+                id={`faq-panel-${idx}`}
+                className={
+                  "overflow-hidden px-6 transition-all duration-300" +
+                  (openIndex === idx ? " max-h-40 py-2" : " max-h-0 py-0")
+                }
+                aria-hidden={openIndex !== idx}
+              >
+                <p className="text-base text-slate-300">{faq.answer}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FAQSection;

src/modules/home/index.tsx

@@ -9,6 +9,7 @@ import BlogSection from "./(sections)/blogs";
 import ChampionSection from "./(sections)/champions";
 import CommunitySection from "./(sections)/community";
 import EventsSection from "./(sections)/event";
+import FAQSection from "./(sections)/faq";
 import HeroSection from "./(sections)/hero";
 import SponsorsSection from "./(sections)/sponsors";
 
@@ -55,6 +56,9 @@ const LandingPage = async () => {
       <WithErrorBoundary>
         <ChampionSection />
       </WithErrorBoundary>
+      <WithErrorBoundary>
+        <FAQSection />
+      </WithErrorBoundary>
     </>
   );
 };