feat: tighten mega menu spacing, bump link sizes

This commit is contained in:
Jeffrey 2026-02-23 09:40:53 +01:00
parent 488662fcbe
commit 50c5e200c3

View File

@ -162,7 +162,7 @@ const MegaMenuPanel: React.FC<{
style={{ top }}
>
<div className="max-w-[1200px] mx-auto px-6 md:px-8 py-10 md:py-14">
<div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-8 md:gap-12 lg:gap-20">
<div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-8 md:gap-12">
{/* Left: category title */}
<div>
@ -172,23 +172,23 @@ const MegaMenuPanel: React.FC<{
</div>
{/* Right: columns */}
<div className={`grid gap-10 ${columns.length === 1 ? 'grid-cols-1' : columns.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
<div className={`grid gap-6 ${columns.length === 1 ? 'grid-cols-1' : columns.length === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
{columns.map((col, ci) => (
<div key={ci}>
{col.heading && (
<p className="font-joey-medium text-fd-small text-fd-navy/40 dark:text-white/40 uppercase tracking-widest mb-4">
<p className="font-joey-medium text-fd-small text-fd-navy/40 dark:text-white/40 uppercase tracking-widest mb-2">
{col.heading}
</p>
)}
<ul className="flex flex-col gap-1">
<ul className="flex flex-col gap-0">
{col.links.map((link, li) => (
<li key={li}>
<Link
href={resolveHref(link)}
onClick={onClose}
className={`block py-1.5 transition-colors duration-150 ${
className={`block py-1 transition-colors duration-150 ${
col.heading
? 'font-joey text-fd-body text-fd-navy/75 dark:text-white/70 hover:text-fd-navy dark:hover:text-fd-yellow'
? 'font-joey-medium text-lg text-fd-navy/80 dark:text-white/75 hover:text-fd-navy dark:hover:text-fd-yellow'
: 'font-joey-bold text-fd-h3 text-fd-navy dark:text-white hover:text-fd-yellow dark:hover:text-fd-yellow'
}`}
>