feat: add ui for roadmap ui (#35)

* fix: correct link for Roadmap navigation item

* feat: add feature request and projects voting components

* fix: correct spelling of 'Certificate' in ProjectsVote component

* feat: add Request Feature popup with responsive dialog and drawer components

* feat: enhance Header component with mobile menu animations and improved navigation styling

* refactor: simplify Header component by removing unused scroll handling and improving mobile menu structure

* fix: replace motion span with static span for header underline

* fix: update FeatureRequestCTA text for clarity and adjust page layout margins

* fix: remove DialogDescription from RequestFeaturePopup and update textarea placeholder for clarity

* fix: remove DrawerDescription from RequestFeaturePopup for cleaner UI

* fix: remove unused icon exports from icons

* fix: replace XIcon with LuX in DialogClose for consistency

* fix: remove unused icon export from index for cleaner module structure

apps/landing/src/app/(public)/_components/header.tsx

@@ -4,107 +4,170 @@ import { LogoSimple } from '@/app/_components/logo';
 import NAVIGATIONS from '@/data/navigations.json';
 import { Button } from '@components';
 import { cn } from '@utils';
+import { AnimatePresence, motion } from 'framer-motion';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { LuMenu, LuX } from 'react-icons/lu';
 
 export function Header() {
   const router = useRouter();
-
-  const [isScrolled, setIsScrolled] = useState(false);
+  const pathname = usePathname();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 10);
+    if (mobileMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+    return () => {
+      document.body.style.overflow = 'auto';
     };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+  }, [mobileMenuOpen]);
+
+  useEffect(() => {
+    setMobileMenuOpen(false);
+  }, [pathname]);
 
   return (
-    <header
-      className={cn(
-        'sticky top-0 z-50 w-full transition-all duration-300',
-        isScrolled
-          ? 'bg-background/80 backdrop-blur-md border-b shadow-sm'
-          : 'bg-transparent'
-      )}
-    >
-      <div className="container flex h-16 items-center justify-between">
-        <div className="flex items-center gap-2">
-          <div className="relative overflow-hidden rounded">
-            <Link href="/">
-              <LogoSimple className="w-[80px]" />
-            </Link>
-          </div>
-        </div>
+    <header className="sticky top-0 w-full z-50 bg-background/70">
+      <div className="container flex h-20 items-center justify-between">
+        <Link
+          href="/"
+          className="relative overflow-hidden rounded z-50"
+          aria-label="Home"
+        >
+          <LogoSimple className="w-24 md:w-28" />
+        </Link>
 
-        {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center gap-8">
           {NAVIGATIONS.map(({ link, title }) => (
             <Link
               key={link}
               href={link}
-              className="text-sm font-medium relative group"
+              className={cn(
+                'text-sm font-medium relative group px-1 py-2',
+                pathname === link ? 'text-primary' : 'text-foreground/90'
+              )}
             >
-              <span className="transition-colors hover:text-primary">
+              <span className="transition-colors hover:text-primary block">
                 {title}
               </span>
-              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 transition-all duration-300 group-hover:w-full"></span>
+              {pathname === link && (
+                <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary-500" />
+              )}
             </Link>
           ))}
         </nav>
 
-        <div className="flex items-center gap-x-2">
+        <div className="hidden md:flex items-center gap-x-3">
           <Button
             onClick={() => router.push('/signin')}
-            className="hidden md:flex"
+            className="px-5 py-2 text-sm font-medium"
           >
             Masuk
           </Button>
           <Button
-            variant="secondary"
+            variant="bordered"
             onClick={() => router.push('/signup')}
-            className="hidden md:flex"
+            className="px-5 py-2 text-sm font-medium shadow-lg shadow-primary/20 hover:shadow-primary/30"
           >
             Daftar
           </Button>
-
-          {/* Mobile Menu Button */}
-          <button
-            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            className="flex md:hidden"
-          >
-            {mobileMenuOpen ? (
-              <LuX className="size-5" />
-            ) : (
-              <LuMenu className="size-5" />
-            )}
-          </button>
         </div>
-      </div>
 
-      {/* Mobile Menu */}
-      {mobileMenuOpen && (
-        <div className="md:hidden border-t bg-background/95 backdrop-blur-md">
-          <nav className="container flex flex-col py-4 text-center">
-            {NAVIGATIONS.map(({ link, title }) => (
-              <Link
-                key={link}
-                href={link}
-                className="py-3 text-sm font-medium border-b border-border/50"
-                onClick={() => router.push(link)}
+        <button
+          onClick={() => setMobileMenuOpen((prev) => !prev)}
+          className="flex md:hidden relative z-50 p-2 rounded-lg hover:bg-muted transition-colors"
+          aria-label={mobileMenuOpen ? 'Tutup menu' : 'Buka menu'}
+        >
+          {mobileMenuOpen ? (
+            <LuX className="size-6" />
+          ) : (
+            <LuMenu className="size-6" />
+          )}
+        </button>
+
+        <AnimatePresence>
+          {mobileMenuOpen && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="fixed inset-0 z-60 bg-background flex flex-col"
+            >
+              <div className="container flex h-20 items-center justify-between">
+                <Link
+                  href="/"
+                  className="relative overflow-hidden rounded"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  <LogoSimple className="w-24" />
+                </Link>
+
+                <button
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="p-2 rounded-lg hover:bg-muted transition-colors"
+                  aria-label="Tutup menu"
+                >
+                  <LuX className="size-6" />
+                </button>
+              </div>
+
+              <motion.nav
+                className="flex-1 flex flex-col items-center justify-center gap-6 py-10"
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.1 }}
               >
-                {title}
-              </Link>
-            ))}
+                {NAVIGATIONS.map(({ link, title }) => (
+                  <Link
+                    key={link}
+                    href={link}
+                    className={cn(
+                      'text-2xl font-medium py-2 px-6 rounded-lg transition-colors',
+                      pathname === link
+                        ? 'text-primary bg-primary/10'
+                        : 'text-foreground hover:bg-muted'
+                    )}
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {title}
+                  </Link>
+                ))}
+              </motion.nav>
 
-            <Button onClick={() => router.push('/signin')}>Login</Button>
-          </nav>
-        </div>
-      )}
+              <motion.div
+                className="container space-y-4 pb-10"
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.2 }}
+              >
+                <Button
+                  onClick={() => {
+                    setMobileMenuOpen(false);
+                    router.push('/signin');
+                  }}
+                  className="w-full py-4 text-base"
+                >
+                  Masuk
+                </Button>
+                <Button
+                  variant="bordered"
+                  onClick={() => {
+                    setMobileMenuOpen(false);
+                    router.push('/signup');
+                  }}
+                  className="w-full py-4 text-base shadow-lg shadow-primary/20"
+                >
+                  Daftar
+                </Button>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     </header>
   );
 }

apps/landing/src/app/(public)/_components/theme-toggle.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { Button, MoonIcon, SunIcon } from '@components';
+import { Button } from '@components';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
+import { LuMoon, LuSun } from 'react-icons/lu';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -28,9 +29,9 @@ export function ThemeToggle() {
       className="focus-visible:ring-0 cursor-pointer"
     >
       {theme === 'dark' ? (
-        <SunIcon className="h-[1.2rem] w-[1.2rem]" />
+        <LuSun className="h-[1.2rem] w-[1.2rem]" />
       ) : (
-        <MoonIcon className="h-[1.2rem] w-[1.2rem]" />
+        <LuMoon className="h-[1.2rem] w-[1.2rem]" />
       )}
       <span className="sr-only">Toggle theme</span>
     </Button>