wip: fix hero nav buttons on small mobile screens

src/components/Hero.astro

@@ -11,6 +11,24 @@ interface Props {
 }
 
 const { version, versions, svgPath } = Astro.props;
+
+const navItems = [
+  { id: "about", label: "About" },
+  { id: "spec", label: "Read the Spec", primary: true },
+  { id: "faq", label: "FAQ" },
+];
+
+const baseClasses = `inline-flex items-center justify-center gap-2
+  px-4 py-2.5 sm:px-6 sm:py-3
+  text-sm sm:text-base font-medium rounded-lg
+  transition-all cursor-pointer`;
+
+const primaryClasses = `bg-sky-600 text-white
+  hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md`;
+
+const secondaryClasses = `text-gray-600 dark:text-neutral-400
+  hover:bg-gray-100 hover:text-gray-950
+  dark:hover:bg-neutral-800 dark:hover:text-neutral-50`;
 ---
 
 <section
@@ -112,37 +130,21 @@ const { version, versions, svgPath } = Astro.props;
     <!-- Navigation links -->
     <nav
       class="animate-fade-in-up delay-400
-             flex flex-wrap items-center justify-center gap-4"
+             flex flex-nowrap items-center justify-center gap-2 sm:gap-4"
     >
-      <a
-        href="#about"
-        class="inline-flex items-center justify-center gap-2 px-6 py-3
-               text-base font-medium rounded-lg transition-all cursor-pointer
-               text-gray-600 dark:text-neutral-400
-               hover:bg-gray-100 hover:text-gray-950
-               dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
-      >
-        About
-      </a>
-      <a
-        href="#spec"
-        class="inline-flex items-center justify-center gap-2 px-6 py-3
-               text-base font-medium rounded-lg transition-all cursor-pointer
-               bg-sky-600 text-white
-               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
-      >
-        Read the Spec
-      </a>
-      <a
-        href="#faq"
-        class="inline-flex items-center justify-center gap-2 px-6 py-3
-               text-base font-medium rounded-lg transition-all cursor-pointer
-               text-gray-600 dark:text-neutral-400
-               hover:bg-gray-100 hover:text-gray-950
-               dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
-      >
-        FAQ
-      </a>
+      {
+        navItems.map((item) => (
+          <a
+            href={`#${item.id}`}
+            class:list={[
+              baseClasses,
+              item.primary ? primaryClasses : secondaryClasses,
+            ]}
+          >
+            {item.label}
+          </a>
+        ))
+      }
     </nav>
   </div>