Merge pull request #129 from apsinghdev/feat/faq

add faq in the navbar

Author: apsinghdev

apps/web/src/components/faq/FaqSection.tsx

@@ -9,7 +9,7 @@ import { faqs } from "./faqData";
 
 export function FaqSection() {
   return (
-    <div className="flex flex-col border-b border-[#252525]">
+    <div className="flex flex-col border-b border-[#252525]" id="faq">
       <Header title="Frequently Asked Questions" />
       <div className="w-full px-[30px] lg:px-[50px] py-8 lg:py-12 relative">
         <div

apps/web/src/components/landing-sections/navbar.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import PrimaryButtom from "../ui/custom-button";
 import { motion, useScroll, useMotionValueEvent } from "framer-motion";
 import Image from "next/image";
-import { Terminal, Github } from "lucide-react";
+import { Terminal, Github, Menu, X } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -13,6 +13,19 @@ const Navbar = () => {
   const pathname = usePathname();
   const isPricingPage = pathname === "/pricing";
   const [showNavbar, setShowNavbar] = useState(isPricingPage ? true : false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  React.useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen) {
+        setIsOpen(false);
+        (document.activeElement as HTMLElement)?.blur();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
 
   useMotionValueEvent(scrollYProgress, "change", (latest) => {
     if (!isPricingPage) {
@@ -27,6 +40,7 @@ const Navbar = () => {
     { name: "How it works", href: "/#HIW" },
     { name: "Stats", href: "/#Stats" },
     { name: "Contact", href: "/#Contact" },
+    { name: "FAQ", href: "/#faq" },
   ];
 
   return (
@@ -41,6 +55,14 @@ const Navbar = () => {
           : "fixed rounded-3xl top-4 border w-[94%] md:w-[80%] mx-auto left-1/2 -translate-x-1/2"
       )}
     >
+      <button
+        className="md:hidden text-white"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label="Toggle navigation menu"
+        aria-expanded={isOpen}
+      >
+        {isOpen ? <X size={28} /> : <Menu size={28} />}
+      </button>
       <div className="text-2xl font-medium tracking-tighter flex items-center gap-2">
         <div className="w-10 aspect-square overflow-hidden relative">
           <Image
@@ -69,7 +91,7 @@ const Navbar = () => {
           );
         })}
       </div>
-      <div className="flex items-center gap-3">
+      <div className="hidden md:flex items-center gap-3">
         <Link
           href="https://github.com/apsinghdev/opensox"
           target="_blank"
@@ -86,6 +108,45 @@ const Navbar = () => {
           </PrimaryButtom>
         </Link>
       </div>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25 }}
+          className="absolute top-full mt-2 left-0 w-full bg-neutral-900/90 backdrop-blur-xl border border-white/10 md:hidden flex flex-col items-center py-5 space-y-4 z-50 rounded-3xl"
+        >
+          {links.map((link, index) => (
+            <Link
+              key={index}
+              href={link.href}
+              onClick={() => setIsOpen(false)}
+              className="text-white hover:text-gray-300 text-lg"
+            >
+              {link.name}
+            </Link>
+          ))}
+          <Link
+            href="https://github.com/apsinghdev/opensox"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setIsOpen(false)}
+            className="flex items-center gap-2 px-4 py-2 bg-[#0d1117] hover:bg-[#161b22] rounded-lg border border-[#30363d] text-white transition-colors"
+          >
+            <Github className="w-5 h-5" />
+            <span className="text-sm font-medium">Contribute</span>
+          </Link>
+          <Link
+            href="/dashboard/home"
+            onClick={() => setIsOpen(false)}
+            className="cursor-pointer z-30"
+          >
+            <PrimaryButtom>
+              <Terminal />
+              Get Started
+            </PrimaryButtom>
+          </Link>
+        </motion.div>
+      )}
     </motion.nav>
   );
 };