From 70203732d25fd18d55e77fddfa2ee878f3fe233a Mon Sep 17 00:00:00 2001
From: moh <mf@planetmutlu.com>
Date: Sun, 20 Sep 2026 19:37:17 +0200
Subject: [PATCH] REVERTED - Restore corner radial controls; make dock icons
 full-bleed

- Bring back the corner fan-out controls; drop the in-dock settings tile.
- Regenerate public/dock/*.svg so the squircle fills the whole tile with
  no inner margin.
---
 components/layout/floating-controls.tsx | 149 ++++++++++++++++++++++++
 components/layout/site-dock.tsx         | 128 +-------------------
 public/dock/about-active.svg            |   8 +-
 public/dock/about.svg                   |   8 +-
 public/dock/contact-active.svg          |   8 +-
 public/dock/contact.svg                 |   8 +-
 public/dock/home-active.svg             |   8 +-
 public/dock/home.svg                    |   8 +-
 public/dock/portfolio-active.svg        |   8 +-
 public/dock/portfolio.svg               |   8 +-
 public/dock/products-active.svg         |   8 +-
 public/dock/products.svg                |   8 +-
 12 files changed, 195 insertions(+), 162 deletions(-)
 create mode 100644 components/layout/floating-controls.tsx

diff --git a/components/layout/floating-controls.tsx b/components/layout/floating-controls.tsx
new file mode 100644
index 0000000..dbf8832
--- /dev/null
+++ b/components/layout/floating-controls.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Plus, ShieldCheck } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import { useState, type ReactNode } from "react";
+
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { SoundToggle } from "@/components/sound-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { buildAdminUrl } from "@/lib/admin-routing";
+import type { AppLocale } from "@/lib/locale";
+import { cn } from "@/lib/utils";
+
+type FloatingControlsProps = {
+  locale: string;
+  defaultLocale: AppLocale;
+  isSuperAdmin?: boolean;
+};
+
+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";
+
+/** Radius (px) of the arc the items fan out along. */
+const RADIUS = 92;
+
+export function FloatingControls({
+  locale,
+  defaultLocale,
+  isSuperAdmin = false,
+}: FloatingControlsProps) {
+  const [open, setOpen] = useState(false);
+  const t = useTranslations("navigation");
+  const activeLocale = useLocale();
+  const isRtl = activeLocale === "ar";
+  const reducedMotion = useReducedMotion();
+
+  const controls: ReactNode[] = [
+    <SoundToggle
+      key="sound"
+      ariaLabel={t("soundMute")}
+      mutedAriaLabel={t("soundUnmute")}
+      variant="ghost"
+      className={cn(pill, "border-transparent bg-transparent")}
+    />,
+    <ThemeToggle
+      key="theme"
+      ariaLabel={t("themeToggle")}
+      variant="ghost"
+      className={cn(pill, "border-transparent bg-transparent")}
+    />,
+    <LocaleToggle
+      key="locale"
+      locale={locale}
+      defaultLocale={defaultLocale}
+      className={cn(pill, "border-transparent bg-transparent p-0")}
+    />,
+  ];
+
+  if (isSuperAdmin) {
+    controls.push(
+      <a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
+        <ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
+      </a>,
+    );
+  }
+
+  const count = controls.length;
+  // Fan across a quarter arc from "up" (90°) to "sideways" (180°), mirrored for
+  // RTL so the items always spread away from the corner into the page.
+  const startAngle = 94;
+  const endAngle = 176;
+  const positionFor = (index: number) => {
+    const angle = count === 1 ? 135 : startAngle + ((endAngle - startAngle) * index) / (count - 1);
+    const radians = (angle * Math.PI) / 180;
+    return {
+      x: (isRtl ? -1 : 1) * Math.cos(radians) * RADIUS,
+      y: -Math.sin(radians) * RADIUS,
+    };
+  };
+
+  return (
+    <div
+      className="pointer-events-none fixed bottom-0 end-0 z-50 p-4"
+      style={{ paddingBottom: "calc(1.1rem + env(safe-area-inset-bottom, 0px))" }}
+    >
+      <div className="pointer-events-auto relative h-12 w-12">
+        <AnimatePresence>
+          {open ? (
+            <>
+              {/* click-away scrim */}
+              <motion.button
+                key="scrim"
+                type="button"
+                aria-hidden
+                tabIndex={-1}
+                onClick={() => setOpen(false)}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 -z-10 cursor-default bg-transparent"
+              />
+              {controls.map((control, index) => {
+                const { x, y } = positionFor(index);
+                return (
+                  <motion.div
+                    key={index}
+                    className="absolute bottom-0 end-0 grid h-12 w-12 place-items-center"
+                    initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
+                    animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
+                    exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
+                    transition={
+                      reducedMotion
+                        ? { duration: 0 }
+                        : { type: "spring", stiffness: 460, damping: 26, delay: index * 0.035 }
+                    }
+                  >
+                    {control}
+                  </motion.div>
+                );
+              })}
+            </>
+          ) : null}
+        </AnimatePresence>
+
+        {/* trigger */}
+        <button
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          aria-expanded={open}
+          aria-label={open ? t("closeMenu") : t("openMenu")}
+          className={cn(
+            pill,
+            "relative h-12 w-12",
+            open && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
+          )}
+        >
+          <motion.span
+            animate={{ rotate: open ? 135 : 0 }}
+            transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
+            className="flex items-center justify-center"
+          >
+            <Plus className="h-5 w-5" />
+          </motion.span>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/layout/site-dock.tsx b/components/layout/site-dock.tsx
index 66714b3..a9f05ab 100644
--- a/components/layout/site-dock.tsx
+++ b/components/layout/site-dock.tsx
@@ -1,18 +1,12 @@
 "use client";
 
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { Settings, ShieldCheck } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
-import { useState, type ReactNode } from "react";
 
-import { LocaleToggle } from "@/components/layout/locale-toggle";
-import { SoundToggle } from "@/components/sound-toggle";
-import { ThemeToggle } from "@/components/theme-toggle";
+import { FloatingControls } from "@/components/layout/floating-controls";
 import { Dock, DockIcon } from "@/components/ui/dock";
-import { buildAdminUrl } from "@/lib/admin-routing";
 import { getLocalizedPath, stripLocalePrefix, type AppLocale } from "@/lib/locale";
 import { cn } from "@/lib/utils";
 
@@ -43,18 +37,6 @@ const navItems: NavItem[] = [
   { key: "contact", path: "/contact" },
 ];
 
-// Graphite squircle matching the SVG page icons, used for the settings tile.
-const controlTile =
-  "group relative overflow-visible rounded-[26%] bg-gradient-to-b from-[#3f4551] to-[#191d24] shadow-[0_6px_14px_-6px_rgba(0,0,0,0.5)] ring-1 ring-white/10 transition-shadow duration-200 hover:shadow-[0_10px_22px_-8px_rgba(0,0,0,0.6)]";
-// Glass pill used for each control that fans out along the arc.
-const fanPill =
-  "flex h-11 w-11 items-center justify-center rounded-full border border-transparent bg-background/90 text-foreground/85 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";
-
-// Radius (px) and opening angles of the arc the controls fan out along.
-const ARC_RADIUS = 74;
-const ARC_START = 46;
-const ARC_END = 134;
-
 function isNavItemActive(currentPath: string, itemPath: string) {
   if (itemPath === "/") {
     return currentPath === "/";
@@ -66,52 +48,13 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
   const locale = useLocale();
   const pathname = usePathname();
   const t = useTranslations("navigation");
-  const reducedMotion = useReducedMotion();
-  const [settingsOpen, setSettingsOpen] = useState(false);
 
   const currentPath = stripLocalePrefix(pathname);
   const homeHref = getLocalizedPath(locale, "/", defaultLocale);
 
-  const fanItems: ReactNode[] = [
-    <SoundToggle
-      key="sound"
-      ariaLabel={t("soundMute")}
-      mutedAriaLabel={t("soundUnmute")}
-      variant="ghost"
-      className={fanPill}
-    />,
-    <ThemeToggle key="theme" ariaLabel={t("themeToggle")} variant="ghost" className={fanPill} />,
-    <LocaleToggle key="locale" locale={locale} defaultLocale={defaultLocale} className={cn(fanPill, "p-0")} />,
-  ];
-
-  if (isSuperAdmin) {
-    fanItems.push(
-      <a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={fanPill}>
-        <ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
-      </a>,
-    );
-  }
-
-  const arcPosition = (index: number) => {
-    const count = fanItems.length;
-    const angle = count === 1 ? 90 : ARC_START + ((ARC_END - ARC_START) * index) / (count - 1);
-    const radians = (angle * Math.PI) / 180;
-    return { x: Math.cos(radians) * ARC_RADIUS, y: -Math.sin(radians) * ARC_RADIUS };
-  };
-
   return (
     <>
-      {/* click-away scrim (below the dock, above the page) */}
-      {settingsOpen ? (
-        <button
-          type="button"
-          aria-hidden
-          tabIndex={-1}
-          onClick={() => setSettingsOpen(false)}
-          className="fixed inset-0 z-30 cursor-default bg-transparent"
-        />
-      ) : null}
-
+      {/* ===== Bottom dock (Magic UI) — 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))" }}
@@ -143,7 +86,7 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
             <DockTip label="mohfarawati" />
           </DockIcon>
 
-          <DockSeparator />
+          <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />
 
           {/* ── Pages ── */}
           {navItems.map(({ key, path, disabled }) => {
@@ -194,74 +137,15 @@ export function SiteDock({ defaultLocale, isSuperAdmin = false }: SiteDockProps)
               </DockIcon>
             );
           })}
-
-          <DockSeparator />
-
-          {/* ── Settings — press to fan the controls out along an arc ── */}
-          <DockIcon className={controlTile}>
-            <TileGloss />
-
-            <AnimatePresence>
-              {settingsOpen
-                ? fanItems.map((node, index) => {
-                    const { x, y } = arcPosition(index);
-                    return (
-                      <motion.div
-                        key={index}
-                        className="absolute inset-0 z-10 flex items-center justify-center"
-                        initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
-                        animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
-                        exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
-                        transition={
-                          reducedMotion
-                            ? { duration: 0 }
-                            : { type: "spring", stiffness: 480, damping: 26, delay: index * 0.035 }
-                        }
-                      >
-                        {node}
-                      </motion.div>
-                    );
-                  })
-                : null}
-            </AnimatePresence>
-
-            <button
-              type="button"
-              onClick={() => setSettingsOpen((value) => !value)}
-              aria-expanded={settingsOpen}
-              aria-label={settingsOpen ? t("closeMenu") : t("openMenu")}
-              className="relative z-20 flex h-full w-full items-center justify-center rounded-[inherit] text-white hover:bg-white/10"
-            >
-              <motion.span
-                animate={{ rotate: settingsOpen ? 90 : 0 }}
-                transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
-                className="flex items-center justify-center"
-              >
-                <Settings className="h-[46%] w-[46%]" />
-              </motion.span>
-            </button>
-
-            {settingsOpen ? null : <DockTip label={t("themeToggle")} />}
-          </DockIcon>
         </Dock>
       </div>
+
+      {/* ===== Corner controls — theme / language / sound / admin (fan out) ===== */}
+      <FloatingControls locale={locale} defaultLocale={defaultLocale} isSuperAdmin={isSuperAdmin} />
     </>
   );
 }
 
-function DockSeparator() {
-  return <div className="mx-0.5 h-9 w-px self-center bg-border/70" aria-hidden />;
-}
-
-function TileGloss() {
-  return (
-    <span
-      aria-hidden
-      className="pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-[26%] bg-gradient-to-b from-white/25 to-transparent"
-    />
-  );
-}
-
 function DockTip({ label, soon }: { label: string; soon?: string }) {
   return (
     <span
diff --git a/public/dock/about-active.svg b/public/dock/about-active.svg
index 8619f15..bdda326 100644
--- a/public/dock/about-active.svg
+++ b/public/dock/about-active.svg
@@ -2,11 +2,11 @@
 <defs>
 <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="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/about.svg b/public/dock/about.svg
index d38b0be..92ac5e4 100644
--- a/public/dock/about.svg
+++ b/public/dock/about.svg
@@ -2,11 +2,11 @@
 <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="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="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-active.svg b/public/dock/contact-active.svg
index 7018726..14b191e 100644
--- a/public/dock/contact-active.svg
+++ b/public/dock/contact-active.svg
@@ -2,11 +2,11 @@
 <defs>
 <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="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/contact.svg b/public/dock/contact.svg
index 710dc97..1db08b1 100644
--- a/public/dock/contact.svg
+++ b/public/dock/contact.svg
@@ -2,11 +2,11 @@
 <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="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="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/home-active.svg b/public/dock/home-active.svg
index d9eb81c..d306722 100644
--- a/public/dock/home-active.svg
+++ b/public/dock/home-active.svg
@@ -2,11 +2,11 @@
 <defs>
 <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
 <path d="M29 49 L50 30 L71 49"/><path d="M34 46 V70 H66 V46"/></g>
 </svg>
\ No newline at end of file
diff --git a/public/dock/home.svg b/public/dock/home.svg
index 09fb01f..132727e 100644
--- a/public/dock/home.svg
+++ b/public/dock/home.svg
@@ -2,11 +2,11 @@
 <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="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
 <path d="M29 49 L50 30 L71 49"/><path d="M34 46 V70 H66 V46"/></g>
 </svg>
\ No newline at end of file
diff --git a/public/dock/portfolio-active.svg b/public/dock/portfolio-active.svg
index 7e170fa..20e00c9 100644
--- a/public/dock/portfolio-active.svg
+++ b/public/dock/portfolio-active.svg
@@ -2,11 +2,11 @@
 <defs>
 <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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>
diff --git a/public/dock/portfolio.svg b/public/dock/portfolio.svg
index e289f12..bcb809d 100644
--- a/public/dock/portfolio.svg
+++ b/public/dock/portfolio.svg
@@ -2,11 +2,11 @@
 <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="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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>
diff --git a/public/dock/products-active.svg b/public/dock/products-active.svg
index 6c4db6c..5acf486 100644
--- a/public/dock/products-active.svg
+++ b/public/dock/products-active.svg
@@ -2,11 +2,11 @@
 <defs>
 <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff8a5f"/><stop offset="1" stop-color="#e5431f"/></linearGradient>
 <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="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
diff --git a/public/dock/products.svg b/public/dock/products.svg
index e77e661..8c7074f 100644
--- a/public/dock/products.svg
+++ b/public/dock/products.svg
@@ -2,11 +2,11 @@
 <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="gl" x1="0" y1="0" x2="0" y2="1">
-<stop offset="0" stop-color="#fff" stop-opacity="0.28"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<stop offset="0" stop-color="#fff" stop-opacity="0.26"/><stop offset="0.5" stop-color="#fff" stop-opacity="0"/></linearGradient>
 </defs>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#bg)"/>
-<rect x="4" y="4" width="92" height="92" rx="26" fill="url(#gl)"/>
-<rect x="4.75" y="4.75" width="90.5" height="90.5" rx="25.25" fill="none" stroke="#fff" stroke-opacity="0.14" stroke-width="1.5"/>
+<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="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