From 57423b1baf3f779407ae5927b48d7f8c286238eb Mon Sep 17 00:00:00 2001
From: moh <mf@planetmutlu.com>
Date: Sun, 20 Sep 2026 20:48:23 +0200
Subject: [PATCH] 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 |  2 +-
 components/layout/site-dock.tsx         | 30 ++++++++++++-------------
 public/dock/about.svg                   |  6 ++---
 public/dock/contact.svg                 |  6 ++---
 public/dock/portfolio.svg               | 21 ++++++++++-------
 public/dock/products.svg                |  6 ++---
 6 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/components/layout/floating-controls.tsx b/components/layout/floating-controls.tsx
index dbf8832..e94777a 100644
--- a/components/layout/floating-controls.tsx
+++ b/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;
diff --git a/components/layout/site-dock.tsx b/components/layout/site-dock.tsx
index a695806..a1679f3 100644
--- a/components/layout/site-dock.tsx
+++ b/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 rounded-[inherit]" {...bounceProps("logo")}>
+              <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")}
+              >
                 <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
-                key={key}
-                className="group relative overflow-visible rounded-[26%] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)]"
-              >
+              <DockIcon key={key} className="group relative overflow-visible">
                 {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}
diff --git a/public/dock/about.svg b/public/dock/about.svg
index 92ac5e4..257e793 100644
--- a/public/dock/about.svg
+++ b/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="28" 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" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
+<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="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>
\ No newline at end of file
diff --git a/public/dock/contact.svg b/public/dock/contact.svg
index 1db08b1..1bf2d8c 100644
--- a/public/dock/contact.svg
+++ b/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="28" 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" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
+<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="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>
\ No newline at end of file
diff --git a/public/dock/portfolio.svg b/public/dock/portfolio.svg
index bcb809d..350335c 100644
--- a/public/dock/portfolio.svg
+++ b/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="28" 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"/>
-<g fill="#fff">
-<rect x="32" y="32" width="15" height="15" rx="4"/><rect x="53" y="32" width="15" height="15" rx="4"/>
-<rect x="32" y="53" width="15" height="15" rx="4"/><rect x="53" y="53" width="15" height="15" rx="4"/></g>
+<rect x="0" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
+<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="21.25" fill="none" stroke="#fff" stroke-opacity="0.18" stroke-width="1.5"/>
+<rect x="27" y="31" width="46" height="38" rx="7" fill="#ffffff"/>
+<g clip-path="url(#card)">
+<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>
\ No newline at end of file
diff --git a/public/dock/products.svg b/public/dock/products.svg
index 8c7074f..76e32a8 100644
--- a/public/dock/products.svg
+++ b/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="28" 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" y="0" width="100" height="100" rx="22" fill="url(#bg)"/>
+<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="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>
\ No newline at end of file