From a96c510dd67da2e628e56a4376429327d729817a Mon Sep 17 00:00:00 2001
From: nuc <alezmad@local.dev>
Date: Sun, 1 Feb 2026 23:53:55 +0000
Subject: [PATCH] Update tab styling to match whyrating-brand

Change from underline-style tabs to rounded-top pill tabs:
- Use bg-slate-100/dark:bg-stone-800 for active state
- Remove border-b-2 underline in favor of rounded-t-lg
- Match px-5 py-3 padding from brand site

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Header.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ccf4cab..9759072 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -70,15 +70,15 @@ export function Header({ activeTab, onTabChange, tabs }: HeaderProps) {
         </div>
 
         {/* Tabs */}
-        <nav className="flex gap-1 -mb-px">
+        <nav className="flex gap-1 mt-2">
           {tabs.map(tab => (
             <button
               key={tab.id}
               onClick={() => onTabChange(tab.id)}
-              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+              className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-none cursor-pointer rounded-t-lg transition-all whitespace-nowrap ${
                 activeTab === tab.id
-                  ? 'border-slate-900 dark:border-stone-100 text-slate-900 dark:text-stone-100'
-                  : 'border-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300 hover:border-slate-300 dark:hover:border-stone-700'
+                  ? 'bg-slate-100 dark:bg-stone-800 text-slate-900 dark:text-stone-50'
+                  : 'bg-transparent text-slate-500 dark:text-stone-500 hover:text-slate-700 dark:hover:text-stone-300'
               }`}
             >
               <Icon name={tab.icon} size={16} />