diff --git a/src/components/common/navbar/index.tsx b/src/components/common/navbar/index.tsx index 07c23ee..bb18d68 100644 --- a/src/components/common/navbar/index.tsx +++ b/src/components/common/navbar/index.tsx @@ -42,9 +42,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", { @@ -125,6 +135,50 @@ const Navbar = () => { // Use NextLink for external or hash links, use localized Link otherwise const LinkComponent = l.external || l.isHashLink ? NextLink : Link; + if (l.isHashLink && l.href === "/#core-team") { + return ( + + ); + } + if (l.isHashLink && l.href === "/#faq") { + return ( + + ); + } + return ( + setActiveSection(false) : undefined} + > + {l.label} + + ); + })} return (
  • {l.isHashLink ? ( @@ -333,6 +387,67 @@ const Navbar = () => { checkPath === "/" ? pathname === checkPath : pathname.startsWith(checkPath); const LinkComponent = l.external || l.isHashLink ? NextLink : Link; + if (l.isHashLink && l.href === "/#core-team") { + return ( + + ); + } + if (l.isHashLink && l.href === "/#faq") { + return ( + + ); + } + return ( + setActiveSection(false)} + className={cn( + "rounded-md px-3 py-2 text-sm font-medium transition-colors", + active && !activeSection + ? "bg-white/5 text-sky-300" + : "text-slate-300 hover:bg-white/5 hover:text-white" + )} + > + {l.label} + + ); + })} + return (
  • {l.isHashLink ? ( diff --git a/src/modules/home/(sections)/faq-data.ts b/src/modules/home/(sections)/faq-data.ts new file mode 100644 index 0000000..99fade7 --- /dev/null +++ b/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!", + }, +]; diff --git a/src/modules/home/(sections)/faq.tsx b/src/modules/home/(sections)/faq.tsx new file mode 100644 index 0000000..150302c --- /dev/null +++ b/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(null); + + const toggleFAQ = (idx: number) => { + setOpenIndex(openIndex === idx ? null : idx); + }; + + return ( +
    +
    +

    + + Frequently Asked Questions + +

    +
    + {faqData.map((faq, idx) => ( +
    + +
    +

    {faq.answer}

    +
    +
    + ))} +
    +
    +
    + ); +}; + +export default FAQSection; diff --git a/src/modules/home/index.tsx b/src/modules/home/index.tsx index 0a7f5b2..ffa88de 100644 --- a/src/modules/home/index.tsx +++ b/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 () => { + + + ); };