From 8f1b4ff6eeb21114aad5f39125cc9c4ac17810b1 Mon Sep 17 00:00:00 2001
From: luiznwz <luizrenan179@gmail.com>
Date: Sat, 29 Aug 2026 12:58:36 -0300
Subject: [PATCH] feat: flat nav links, softer header radius, dashboard glyph
 above buttons

---
 src/components/nav/menus.tsx                  | 244 ------------------
 src/components/navbar.tsx                     |  43 ++-
 .../dashboard/components/dashboard-view.tsx   |   2 +-
 3 files changed, 35 insertions(+), 254 deletions(-)
 delete mode 100644 src/components/nav/menus.tsx

diff --git a/src/components/nav/menus.tsx b/src/components/nav/menus.tsx
deleted file mode 100644
index 826e7e4..0000000
--- a/src/components/nav/menus.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-'use client'
-
-import { useT } from '@/lib/i18n'
-import { cn } from '@/lib/utils'
-import { ChevronDown, Code2, Library, Network, Trophy, Users } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-import Link from 'next/link'
-import * as React from 'react'
-import { copy } from './copy'
-
-type MenuItem = {
-  href: string
-  icon: typeof Code2
-  title: string
-  desc: string
-  question: string
-}
-
-// One open panel at a time: hovering another trigger switches instantly
-// instead of letting the close-delay stack two panels on top of each other.
-type MenuGroupCtx = {
-  active: string | null
-  open: (id: string) => void
-  scheduleClose: (id: string) => void
-  close: () => void
-}
-
-const MenuGroupContext = React.createContext<MenuGroupCtx | null>(null)
-
-export function NavMenuGroup({ children }: { children: React.ReactNode }) {
-  const [active, setActive] = React.useState<string | null>(null)
-  const timer = React.useRef<number | null>(null)
-
-  const cancelClose = React.useCallback(() => {
-    if (timer.current !== null) {
-      window.clearTimeout(timer.current)
-      timer.current = null
-    }
-  }, [])
-  const open = React.useCallback(
-    (id: string) => {
-      cancelClose()
-      setActive(id)
-    },
-    [cancelClose],
-  )
-  const scheduleClose = React.useCallback(
-    (id: string) => {
-      cancelClose()
-      timer.current = window.setTimeout(() => {
-        setActive((cur) => (cur === id ? null : cur))
-      }, 140)
-    },
-    [cancelClose],
-  )
-  const close = React.useCallback(() => {
-    cancelClose()
-    setActive(null)
-  }, [cancelClose])
-
-  React.useEffect(() => cancelClose, [cancelClose])
-
-  const ctx = React.useMemo(
-    () => ({ active, open, scheduleClose, close }),
-    [active, open, scheduleClose, close],
-  )
-  return (
-    <MenuGroupContext.Provider value={ctx}>
-      {children}
-    </MenuGroupContext.Provider>
-  )
-}
-
-function NavMenu({
-  id,
-  label,
-  items,
-  footer,
-}: {
-  id: string
-  label: string
-  items: MenuItem[]
-  footer: { href: string; label: string }
-}) {
-  const group = React.useContext(MenuGroupContext)
-  const ref = React.useRef<HTMLDivElement>(null)
-  const open = group?.active === id
-
-  React.useEffect(() => {
-    if (!open || !group) return
-    function onPointerDown(e: PointerEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        group?.close()
-      }
-    }
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') group?.close()
-    }
-    document.addEventListener('pointerdown', onPointerDown)
-    document.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.removeEventListener('pointerdown', onPointerDown)
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [open, group])
-
-  if (!group) return null
-
-  return (
-    <div
-      ref={ref}
-      className='relative hidden md:block'
-      onMouseEnter={() => group.open(id)}
-      onMouseLeave={() => group.scheduleClose(id)}
-    >
-      <button
-        type='button'
-        onClick={() => (open ? group.close() : group.open(id))}
-        aria-expanded={open}
-        className={cn(
-          'flex cursor-pointer items-center gap-1 px-3 py-2 text-sm font-medium transition-colors duration-200',
-          open ? 'text-ink' : 'text-muted-foreground hover:text-ink',
-        )}
-      >
-        {label}
-        <ChevronDown
-          className={cn(
-            'size-3.5 transition-transform duration-200',
-            open && 'rotate-180',
-          )}
-          strokeWidth={1.5}
-        />
-      </button>
-      <AnimatePresence>
-        {open && (
-          <motion.div
-            initial={{ opacity: 0, y: 6, scale: 0.98 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 6, scale: 0.98 }}
-            transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
-            className='border-border bg-background absolute top-full left-0 z-10 mt-2 w-[340px] overflow-hidden rounded-2xl border shadow-xl'
-          >
-            <div className='p-2'>
-              {items.map((item) => (
-                <Link
-                  key={item.title}
-                  href={item.href}
-                  onClick={group.close}
-                  className='group/item hover:bg-secondary flex gap-3 rounded-xl p-3 transition-colors duration-200'
-                >
-                  <span className='border-border bg-background text-ink group-hover/item:border-primary/40 group-hover/item:text-primary mt-0.5 grid size-9 shrink-0 place-items-center rounded-lg border transition-colors duration-200'>
-                    <item.icon className='size-4' strokeWidth={1.5} />
-                  </span>
-                  <span className='flex flex-col gap-0.5'>
-                    <span className='text-ink text-sm font-medium'>
-                      {item.title}
-                    </span>
-                    <span className='text-muted-foreground text-[13px]'>
-                      {item.desc}
-                    </span>
-                    <span className='text-primary font-serif text-[13px] italic'>
-                      {item.question}
-                    </span>
-                  </span>
-                </Link>
-              ))}
-            </div>
-            <Link
-              href={footer.href}
-              onClick={group.close}
-              className='border-border text-muted-foreground hover:text-ink hover:bg-secondary block border-t px-5 py-3 text-[13px] font-medium transition-colors duration-200'
-            >
-              {footer.label} →
-            </Link>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-}
-
-export function TrainMenu({ loggedIn }: { loggedIn: boolean }) {
-  const t = useT(copy)
-  return (
-    <NavMenu
-      id='train'
-      label={t.train}
-      items={[
-        {
-          href: loggedIn ? '/challenge' : '/onboarding',
-          icon: Code2,
-          title: t.trackCode,
-          desc: t.trackCodeDesc,
-          question: t.trackCodeQ,
-        },
-        {
-          href: loggedIn ? '/design' : '/onboarding',
-          icon: Network,
-          title: t.trackDesign,
-          desc: t.trackDesignDesc,
-          question: t.trackDesignQ,
-        },
-      ]}
-      footer={{
-        href: loggedIn ? '/dashboard' : '/challenges',
-        label: loggedIn ? t.resume : t.explore,
-      }}
-    />
-  )
-}
-
-export function CommunityMenu() {
-  const t = useT(copy)
-  return (
-    <NavMenu
-      id='community'
-      label={t.community}
-      items={[
-        {
-          href: '/challenges',
-          icon: Library,
-          title: t.library,
-          desc: t.libraryDesc,
-          question: t.libraryQ,
-        },
-        {
-          href: '/ranking',
-          icon: Trophy,
-          title: t.ranking,
-          desc: t.rankingDesc,
-          question: t.rankingQ,
-        },
-        {
-          href: '/solutions',
-          icon: Users,
-          title: t.solutionsTitle,
-          desc: t.solutionsDesc,
-          question: t.solutionsQ,
-        },
-      ]}
-      footer={{ href: '/#metodo', label: t.how }}
-    />
-  )
-}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 3d4eacd..1a189d6 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -15,7 +15,6 @@ import Link from 'next/link'
 import * as React from 'react'
 import { Logo } from './logo'
 import { copy } from './nav/copy'
-import { CommunityMenu, NavMenuGroup, TrainMenu } from './nav/menus'
 import { MobileMenu } from './nav/mobile-menu'
 import {
   StatusCluster,
@@ -25,11 +24,22 @@ import {
 } from './nav/status-cluster'
 import { Button } from './ui/button'
 
-function NavLink({ href, label }: { href: string; label: string }) {
+function NavLink({
+  href,
+  label,
+  className,
+}: {
+  href: string
+  label: string
+  className?: string
+}) {
   return (
     <Link
       href={href}
-      className='text-muted-foreground hover:text-ink hidden px-3 py-2 text-sm font-medium transition-colors duration-200 lg:inline-flex'
+      className={cn(
+        'text-muted-foreground hover:text-ink hidden px-3 py-2 text-sm font-medium transition-colors duration-200 lg:inline-flex',
+        className,
+      )}
     >
       <span className='link-underline'>{label}</span>
     </Link>
@@ -80,7 +90,7 @@ export function Navbar() {
       >
         <div
           className={cn(
-            'rounded-2xl border transition-all duration-300',
+            'rounded-lg border transition-all duration-300',
             scrolled || menuOpen
               ? 'border-border bg-background/90 shadow-soft backdrop-blur'
               : 'border-transparent bg-transparent',
@@ -95,11 +105,26 @@ export function Navbar() {
             <div className='flex items-center gap-5'>
               <Logo size='lg' />
               <span aria-hidden className='bg-border hidden h-5 w-px lg:block' />
-              <nav className='hidden items-center gap-1 lg:flex'>
-                <NavMenuGroup>
-                  <TrainMenu loggedIn={!loading && !!user} />
-                  <CommunityMenu />
-                </NavMenuGroup>
+              {/* Flat links: every destination visible at a glance — the
+                  hover dropdowns hid them and read as confusing. */}
+              <nav className='hidden items-center gap-0.5 lg:flex'>
+                <NavLink
+                  href={!loading && user ? '/challenge' : '/onboarding'}
+                  label={t.trackCode}
+                />
+                <NavLink
+                  href={!loading && user ? '/design' : '/onboarding'}
+                  label='Design'
+                />
+                <NavLink href='/challenges' label={t.library} />
+                <NavLink href='/ranking' label={t.ranking} />
+                {!loading && user && (
+                  <NavLink
+                    href='/solutions'
+                    label={t.solutionsTitle}
+                    className='lg:hidden xl:inline-flex'
+                  />
+                )}
               </nav>
             </div>
 
diff --git a/src/features/dashboard/components/dashboard-view.tsx b/src/features/dashboard/components/dashboard-view.tsx
index c01dec3..2b66800 100644
--- a/src/features/dashboard/components/dashboard-view.tsx
+++ b/src/features/dashboard/components/dashboard-view.tsx
@@ -279,7 +279,7 @@ export function DashboardView({ user }: { user: User }) {
             transition={{ duration: 0.6, ease: EASE }}
             className='relative mb-12 overflow-hidden rounded-lg bg-pastel-greige/60 px-6 py-10 sm:px-10 lg:px-12 lg:py-12'
           >
-            <div className='pointer-events-none absolute inset-y-0 right-0 hidden w-[44%] opacity-20 mix-blend-multiply sm:block dark:mix-blend-screen'>
+            <div className='pointer-events-none absolute -top-2 right-0 hidden h-[58%] w-[44%] opacity-20 mix-blend-multiply sm:block dark:mix-blend-screen'>
               <Halftone
                 draw={glyph('>_', 1.5)}
                 ambient