feat: add framer-motion for animations and enhance SiteHeader with new icons and styles

Author: robertxluo

package-lock.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@supabase/ssr": "^0.8.0",
     "@supabase/supabase-js": "^2.95.3",
+    "framer-motion": "^12.38.0",
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "react": "19.2.3",

package.json

@@ -185,3 +185,21 @@ body {
   background: rgba(141, 174, 148, 0.35);
   color: var(--catsafe-tone-ink);
 }
+
+@layer base {
+  button,
+  [role="button"],
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"] {
+    cursor: pointer;
+  }
+  
+  button:disabled,
+  [role="button"][aria-disabled="true"],
+  input[type="button"]:disabled,
+  input[type="submit"]:disabled,
+  input[type="reset"]:disabled {
+    cursor: not-allowed;
+  }
+}

src/app/globals.css

@@ -1,5 +1,8 @@
+"use client";
+
 import Image from 'next/image';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Home, Search } from 'lucide-react';
+import { motion } from 'framer-motion';
 
 interface SiteHeaderProps {
   pathname: string;
@@ -11,7 +14,7 @@ interface SiteHeaderProps {
 }
 
 const navButtonClass =
-  'inline-flex min-h-10 items-center justify-center rounded-full px-3.5 py-2 text-xs font-medium tracking-[0.08em] uppercase whitespace-nowrap transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300 active:scale-[0.97] sm:px-4.5 sm:text-sm';
+  'relative z-10 inline-flex min-h-10 items-center justify-center gap-2 rounded-full px-3.5 py-2 text-xs font-semibold tracking-[0.05em] uppercase whitespace-nowrap transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300 active:scale-[0.97] sm:px-4.5 sm:text-sm';
 
 export function SiteHeader({
   pathname,
@@ -59,17 +62,25 @@ export function SiteHeader({
           </div>
         )}
 
-        <nav aria-label="Primary" className="flex shrink-0 items-center gap-1.5">
+        <nav aria-label="Primary" className="flex shrink-0 items-center gap-1 rounded-full p-1 bg-slate-100/80 border border-slate-200 shadow-inner">
           <button
             type="button"
             onClick={onGoHome}
             aria-current={resolvedActiveNav === 'home' ? 'page' : undefined}
             className={`${navButtonClass} ${
               resolvedActiveNav === 'home'
-                ? 'border border-emerald-200 bg-emerald-100/90 text-emerald-950 shadow-sm'
-                : 'text-slate-600 hover:bg-white hover:text-emerald-800'
+                ? 'text-emerald-950'
+                : 'text-slate-500 hover:text-emerald-800 hover:bg-black/5'
             }`}
           >
+            {resolvedActiveNav === 'home' && (
+              <motion.div
+                layoutId="active-nav-pill"
+                className="absolute inset-0 -z-10 rounded-full border border-emerald-200 bg-emerald-100 shadow-sm"
+                transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+              />
+            )}
+            <Home className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
             Home
           </button>
           <button
@@ -79,10 +90,18 @@ export function SiteHeader({
             aria-current={resolvedActiveNav === 'directory' ? 'page' : undefined}
             className={`${navButtonClass} ${
               resolvedActiveNav === 'directory'
-                ? 'border border-emerald-200 bg-emerald-100/90 text-emerald-950 shadow-sm'
-                : 'text-slate-600 hover:bg-white hover:text-emerald-800'
+                ? 'text-emerald-950'
+                : 'text-slate-500 hover:text-emerald-800 hover:bg-black/5'
             }`}
           >
+            {resolvedActiveNav === 'directory' && (
+              <motion.div
+                layoutId="active-nav-pill"
+                className="absolute inset-0 -z-10 rounded-full border border-emerald-200 bg-emerald-100 shadow-sm"
+                transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+              />
+            )}
+            <Search className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
             <span className="sm:hidden">Directory</span>
             <span className="hidden sm:inline">Plant Directory</span>
           </button>