IMPROVED - Remove dock shadows, fix bounce artifact, mac-radius icons, gallery icon

- Drop all shadows (dock, icons, tooltip, corner pills); this also removes the
  square that showed behind an icon mid-bounce.
- Bounce now moves the whole tile (logo bg lives on the animated element), so
  nothing is left behind.
- Icons use a ~22% macOS-like corner radius (art carries its own shape).
- Portfolio gets an original photo/gallery icon (not Apple's system icon).

components/layout/floating-controls.tsx

@@ -19,7 +19,7 @@ type FloatingControlsProps = {
 };
 
 const pill =
-  "flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
+  "flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
 
 /** Radius (px) of the arc the items fan out along. */
 const RADIUS = 92;

components/layout/site-dock.tsx

@@ -81,16 +81,19 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
           iconSize={50}
           iconMagnification={92}
           iconDistance={150}
-          className="pointer-events-auto h-[66px] gap-3 border-border/60 bg-background/70 shadow-panel"
+          className="pointer-events-auto h-[66px] gap-3 border-border/60 bg-background/70"
         >
           {/* ── 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">
+          <DockIcon className="group relative overflow-visible">
             <Link
               href={homeHref}
               aria-label="mohfarawati — Home"
-              className="flex h-full w-full items-center justify-center rounded-[inherit]"
+              className="flex h-full w-full items-center justify-center"
+            >
+              <motion.span
+                className="flex h-full w-full items-center justify-center overflow-hidden rounded-[22%] bg-white ring-1 ring-black/10"
+                {...bounceProps("logo")}
               >
-              <motion.span className="flex h-full w-full items-center justify-center rounded-[inherit]" {...bounceProps("logo")}>
                 <Image
                   src="/logos/light-primary.svg"
                   alt="mohfarawati"
@@ -98,7 +101,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
                   height={104}
                   sizes="104px"
                   priority
-                  className="h-full w-full rounded-[inherit] object-contain"
+                  className="h-full w-full object-contain"
                 />
               </motion.span>
             </Link>
@@ -107,7 +110,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
 
           <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
 
-          {/* ── Pages ── */}
+          {/* ── Pages (icon art carries its own squircle shape) ── */}
           {navItems.map(({ key, path, icon: iconSrc, disabled }) => {
             const itemPath = path || "/";
             const isActive = isNavItemActive(currentPath, itemPath);
@@ -115,7 +118,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
 
             const icon = (
               <motion.span
-                className="flex h-full w-full items-center justify-center rounded-[inherit]"
+                className="flex h-full w-full items-center justify-center"
                 {...(disabled ? {} : bounceProps(key))}
               >
                 <Image
@@ -124,20 +127,17 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
                   width={104}
                   height={104}
                   sizes="104px"
-                  className={cn("h-full w-full rounded-[inherit] object-contain", disabled && "opacity-55")}
+                  className={cn("h-full w-full object-contain", disabled && "opacity-55")}
                 />
               </motion.span>
             );
 
             return (
-              <DockIcon
+              <DockIcon key={key} className="group relative overflow-visible">
-                key={key}
-                className="group relative overflow-visible rounded-[26%] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)]"
-              >
                 {disabled ? (
                   <span
                     aria-disabled="true"
-                    className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-[inherit]"
+                    className="flex h-full w-full cursor-not-allowed items-center justify-center"
                   >
                     {icon}
                   </span>
@@ -146,7 +146,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
                     href={getLocalizedPath(locale, itemPath, defaultLocale)}
                     aria-label={label}
                     aria-current={isActive ? "page" : undefined}
-                    className="flex h-full w-full items-center justify-center rounded-[inherit]"
+                    className="flex h-full w-full items-center justify-center"
                   >
                     {icon}
                   </Link>
@@ -177,7 +177,7 @@ function DockTip({ label, soon }: { label: string; soon?: string }) {
   return (
     <span
       role="tooltip"
-      className="pointer-events-none absolute bottom-[calc(100%+0.85rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-3 py-1.5 text-sm font-semibold text-foreground opacity-0 shadow-md backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
+      className="pointer-events-none absolute bottom-[calc(100%+0.85rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-3 py-1.5 text-sm font-semibold text-foreground opacity-0 backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
     >
       {label}
       {soon ? <span className="ms-1.5 text-xs tracking-wide text-primary">{soon}</span> : null}

public/dock/about.svg

@@ -4,9 +4,9 @@
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
 <stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
 <g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
 <circle cx="50" cy="41" r="11"/><path d="M30 72 C30 57, 70 57, 70 72"/></g>
 </svg>

public/dock/contact.svg

@@ -4,9 +4,9 @@
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
 <stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
 <g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
 <rect x="27" y="35" width="46" height="30" rx="6"/><path d="M30 40 L50 54 L70 40"/></g>
 </svg>

public/dock/portfolio.svg

@@ -1,13 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
-<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#454b57"/><stop offset="1" stop-color="#1c2027"/></linearGradient>
+<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+<stop offset="0" stop-color="#4aa8ff"/><stop offset="1" stop-color="#7b5cff"/></linearGradient>
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.30"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<clipPath id="card"><rect x="27" y="31" width="46" height="38" rx="7"/></clipPath>
 </defs>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.18" stroke-width="1.5"/>
-<g fill="#fff">
+<rect x="27" y="31" width="46" height="38" rx="7" fill="#ffffff"/>
-<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
+<g clip-path="url(#card)">
-<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
+<circle cx="40" cy="44" r="5.5" fill="#ffc23d"/>
+<path d="M27 69 L43 52 L53 61 L61 51 L73 69 Z" fill="#37b877"/>
+<path d="M55 69 L66 57 L73 64 L73 69 Z" fill="#2c9c86"/>
+</g>
 </svg>

public/dock/products.svg

@@ -4,9 +4,9 @@
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
 <stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#bg)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
-<rect x="0" y="0" width="100" height="100" rx="28" fill="url(#gl)"/>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#gl)"/>
-<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="27.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<rect x="0.75" y="0.75" width="98.5" height="98.5" rx="21.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
 <g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
 <path d="M50 28 L71 40 L71 60 L50 72 L29 60 L29 40 Z"/><path d="M29 40 L50 52 L71 40"/><path d="M50 52 L50 72"/></g>
 </svg>