IMPROVED - Make dock feel like the real macOS dock

- Stronger magnification (50 to 92) with snappier spring tracking.
- macOS-style launch bounce on click; running-dot indicator for the active
  page (works with fixed app-icon images, no recolor).
- Per-item icon paths in navItems so real macOS app icons can be dropped in.
- Drop the now-unused -active icon variants.

components/layout/site-dock.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { motion, useReducedMotion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
+import { useState } from "react";
 
 import { FloatingControls } from "@/components/layout/floating-controls";
 import { Dock, DockIcon } from "@/components/ui/dock";
@@ -26,15 +28,17 @@ type NavKey = "about" | "portfolio" | "products" | "contact";
 type NavItem = {
   key: NavKey;
   path: string;
+  /** Icon file under /public. Swap these for real macOS app icons anytime. */
+  icon: string;
   disabled?: boolean;
 };
 
 // "Home" is intentionally omitted — the logo (first dock icon) is the home link.
 const navItems: NavItem[] = [
-  { key: "about", path: "/about" },
-  { key: "portfolio", path: "/portfolio" },
-  { key: "products", path: "/products", disabled: true },
-  { key: "contact", path: "/contact" },
+  { key: "about", path: "/about", icon: "/dock/about.svg" },
+  { key: "portfolio", path: "/portfolio", icon: "/dock/portfolio.svg" },
+  { key: "products", path: "/products", icon: "/dock/products.svg", disabled: true },
+  { key: "contact", path: "/contact", icon: "/dock/contact.svg" },
 ];
 
 function isNavItemActive(currentPath: string, itemPath: string) {
@@ -48,23 +52,36 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
   const locale = useLocale();
   const pathname = usePathname();
   const t = useTranslations("navigation");
+  const reducedMotion = useReducedMotion();
+  const [bouncing, setBouncing] = useState<string | null>(null);
 
   const currentPath = stripLocalePrefix(pathname);
   const homeHref = getLocalizedPath(locale, "/", defaultLocale);
 
+  // macOS-style launch hop on click.
+  const bounceProps = (id: string) =>
+    reducedMotion
+      ? {}
+      : {
+          onClick: () => setBouncing(id),
+          animate: bouncing === id ? { y: [0, -18, 0, -6, 0] } : { y: 0 },
+          transition: { duration: 0.5, ease: "easeOut" as const },
+          onAnimationComplete: () => setBouncing((cur) => (cur === id ? null : cur)),
+        };
+
   return (
     <>
-      {/* ===== Bottom dock (Magic UI) — primary navigation ===== */}
+      {/* ===== Bottom dock — primary navigation ===== */}
       <div
         className="pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4"
         style={{ paddingBottom: "calc(0.9rem + env(safe-area-inset-bottom, 0px))" }}
       >
         <Dock
           direction="bottom"
-          iconSize={52}
-          iconMagnification={72}
+          iconSize={50}
+          iconMagnification={92}
           iconDistance={150}
-          className="pointer-events-auto h-[68px] gap-2.5 border-border/60 bg-background/70 shadow-panel"
+          className="pointer-events-auto h-[66px] gap-3 border-border/60 bg-background/70 shadow-panel"
         >
           {/* ── Logo (fixed src → no refresh flash) ── */}
           <DockIcon className="group relative overflow-visible rounded-[26%] bg-white shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-black/10">
@@ -73,15 +90,17 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
               aria-label="mohfarawati — Home"
               className="flex h-full w-full items-center justify-center rounded-[inherit]"
             >
-              <Image
-                src="/logos/light-primary.svg"
-                alt="mohfarawati"
-                width={104}
-                height={104}
-                sizes="104px"
-                priority
-                className="h-full w-full rounded-[inherit] object-contain"
-              />
+              <motion.span className="flex h-full w-full items-center justify-center rounded-[inherit]" {...bounceProps("logo")}>
+                <Image
+                  src="/logos/light-primary.svg"
+                  alt="mohfarawati"
+                  width={104}
+                  height={104}
+                  sizes="104px"
+                  priority
+                  className="h-full w-full rounded-[inherit] object-contain"
+                />
+              </motion.span>
             </Link>
             <DockTip label="mohfarawati" />
           </DockIcon>
@@ -89,32 +108,31 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
           <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
 
           {/* ── Pages ── */}
-          {navItems.map(({ key, path, disabled }) => {
+          {navItems.map(({ key, path, icon: iconSrc, disabled }) => {
             const itemPath = path || "/";
             const isActive = isNavItemActive(currentPath, itemPath);
             const label = t(key);
-            const src = `/dock/${key}${isActive ? "-active" : ""}.svg`;
 
             const icon = (
-              <Image
-                src={src}
-                alt={label}
-                width={104}
-                height={104}
-                sizes="104px"
-                className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
-              />
+              <motion.span
+                className="flex h-full w-full items-center justify-center rounded-[inherit]"
+                {...(disabled ? {} : bounceProps(key))}
+              >
+                <Image
+                  src={iconSrc}
+                  alt={label}
+                  width={104}
+                  height={104}
+                  sizes="104px"
+                  className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
+                />
+              </motion.span>
             );
 
             return (
               <DockIcon
                 key={key}
-                className={cn(
-                  "group relative overflow-visible rounded-[26%] transition-shadow duration-200",
-                  isActive
-                    ? "shadow-[0_12px_26px_-8px_hsl(var(--primary)/0.65)]"
-                    : "shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]",
-                )}
+                className="group relative overflow-visible rounded-[26%] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)]"
               >
                 {disabled ? (
                   <span
@@ -133,6 +151,15 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
                     {icon}
                   </Link>
                 )}
+
+                {/* macOS running indicator */}
+                {isActive ? (
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute -bottom-[7px] left-1/2 h-[5px] w-[5px] -translate-x-1/2 rounded-full bg-foreground/70"
+                  />
+                ) : null}
+
                 <DockTip label={label} soon={disabled ? t("soon") : undefined} />
               </DockIcon>
             );