x

apps/website/src/app/globals.css

@@ -155,13 +155,14 @@
   }
 
   .ui-button-line {
-    @apply inline-flex items-center justify-center rounded-full px-4 py-2 text-xs font-bold uppercase tracking-widest shadow-sm transition-colors;
+    @apply inline-flex items-center justify-center rounded-full px-3 py-1.5 text-[11px] font-bold shadow-sm transition-all;
     background-color: #00B900;
     color: #ffffff;
   }
   
   .ui-button-line:hover {
     background-color: #009900;
+    opacity: 0.95;
   }
 
   .ui-icon-button {

apps/website/src/components/Navbar.tsx

@@ -6,7 +6,7 @@ import { getPathWithoutLocale, getPathWithLocale, type Locale } from '../lib/loc
 import { useRouter, usePathname } from 'next/navigation'
 import { useState, useEffect, useMemo, useRef } from 'react'
 import type { Category } from '@homaroma/types'
-import { Check, Globe, Heart, Menu as MenuIcon, ShoppingBag, User, X, Search } from 'lucide-react'
+import { Check, Globe, Heart, Menu as MenuIcon, ShoppingBag, Truck, User, X, Search } from 'lucide-react'
 import { useCartStore } from '../store/cartStore'
 import { useWishlistStore } from '../store/wishlistStore'
 import { useAuthStore } from '../store/authStore'
@@ -309,6 +309,16 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
           </span>
         )}
       </button>
+
+      <Link
+        href="/track"
+        onClick={() => setMobileOpen(false)}
+        className={iconButtonClass}
+        aria-label={t('nav.trackOrder', 'ติดตามคำสั่งซื้อ')}
+        title={t('nav.trackOrder', 'ติดตามคำสั่งซื้อ')}
+      >
+        <Truck className="h-4 w-4 transition-colors" />
+      </Link>
     </div>
   )
 
@@ -482,6 +492,16 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                   )}
                 </button>
 
+                <Link
+                  href="/track"
+                  onClick={() => setMobileOpen(false)}
+                  className={`relative ${iconButtonClass}`}
+                  aria-label={t('nav.trackOrder', 'ติดตามคำสั่งซื้อ')}
+                  title={t('nav.trackOrder', 'ติดตามคำสั่งซื้อ')}
+                >
+                  <Truck className="h-4 w-4 transition-colors" />
+                </Link>
+
                 <div className="hidden md:flex group relative items-center">
                   <button className="ui-nav-chip">
                     <Globe className="h-3.5 w-3.5" strokeWidth={1.5} />
@@ -643,6 +663,16 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                 )}
               </button>
 
+              <Link
+                href="/track"
+                onClick={() => setMobileOpen(false)}
+                className={`relative ${iconButtonClass}`}
+                aria-label={t('nav.trackOrder', 'ติดตามคำสั่งซื้อ')}
+                title={t('nav.trackOrder', 'ติดตามคำสั่งซื้อ')}
+              >
+                <Truck className="h-4 w-4 transition-colors" />
+              </Link>
+
               {canRenderDesktopMenu && (
                 <>
                   <div className="group relative flex items-center">

apps/website/src/components/navigation/MobileDrawer.tsx

@@ -88,6 +88,11 @@ export function MobileDrawer({
               </Link>
             </div>
           )}
+          <div className="border-b border-text-main/10">
+            <Link href="/track" onClick={onClose} className={linkClass}>
+              {lang === 'th' ? 'ติดตามคำสั่งซื้อ' : 'Track Order'}
+            </Link>
+          </div>
         </div>
       )
     }