ADDED - Replace site header menu with macOS menu bar and Magic UI dock

Swap the pill navigation for a macOS-style dock as the primary nav and a
slim top menu bar for utilities:

- components/ui/dock.tsx: Magic UI Dock/DockIcon (magnification via
  useSpring/useTransform), ported to the project's framer-motion.
- components/layout/site-dock.tsx: bottom dock with the logo as the first
  icon, each item a real next/link (SEO preserved, active state from the
  pathname), monochrome squircle tiles, hover tooltips and a "soon" badge
  for Products; top menu bar keeps locale/sound/theme/admin + a live clock.
- (site)/layout.tsx: render SiteDock instead of SiteHeader.

Home bento grid and all page content are unchanged.

app/[locale]/(site)/layout.tsx

@@ -4,8 +4,8 @@ import { getLocale } from "next-intl/server";
 import { redirect } from "next/navigation";
 
 import { SiteAmbientBackdrop } from "@/components/layout/site-ambient-backdrop";
+import { SiteDock } from "@/components/layout/site-dock";
 import { SiteFooter } from "@/components/layout/site-footer";
-import { SiteHeader } from "@/components/layout/site-header";
 import { ScrollSmootherProvider } from "@/components/scroll-smoother-provider";
 import { isSuperAdmin } from "@/lib/admin-auth";
 import { getMaintenanceMode, getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
@@ -44,7 +44,7 @@ export default async function SiteLayout({ children, params }: SiteLayoutProps)
     <>
       <ScrollSmootherProvider />
       <SiteAmbientBackdrop />
-      <SiteHeader
+      <SiteDock
         lightLogoUrl={mediaBindings.siteLogoLight?.url}
         darkLogoUrl={mediaBindings.siteLogoDark?.url}
         defaultLocale={siteSettings.defaultLocale}

components/layout/site-dock.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { FolderKanban, Home, Mail, Package, ShieldCheck, User } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { useLocale, useTranslations } from "next-intl";
+import { useEffect, useState, type ComponentType } from "react";
+
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { SoundToggle } from "@/components/sound-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
+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";
+
+type SiteDockProps = {
+  lightLogoUrl?: string | null;
+  darkLogoUrl?: string | null;
+  defaultLocale: AppLocale;
+  /**
+   * Server-computed via `isSuperAdmin()` in the parent layout. This client
+   * component only decides whether to *render* the Admin shortcut — it performs
+   * no auth check and grants no access; the real guard lives server-side on
+   * each admin page/action.
+   */
+  isSuperAdmin?: boolean;
+};
+
+type NavItem = {
+  key: "home" | "about" | "portfolio" | "products" | "contact";
+  path: string;
+  Icon: ComponentType<{ className?: string }>;
+  disabled?: boolean;
+};
+
+const navItems: NavItem[] = [
+  { key: "home", path: "", Icon: Home },
+  { key: "about", path: "/about", Icon: User },
+  { key: "portfolio", path: "/portfolio", Icon: FolderKanban },
+  { key: "products", path: "/products", Icon: Package, disabled: true },
+  { key: "contact", path: "/contact", Icon: Mail },
+];
+
+function isNavItemActive(currentPath: string, itemPath: string) {
+  if (itemPath === "/") {
+    return currentPath === "/";
+  }
+  return currentPath === itemPath || currentPath.startsWith(`${itemPath}/`);
+}
+
+function MenuClock({ locale }: { locale: string }) {
+  const [time, setTime] = useState("");
+
+  useEffect(() => {
+    const format = () =>
+      setTime(
+        new Date().toLocaleTimeString(locale === "ar" ? "ar" : locale, {
+          hour: "2-digit",
+          minute: "2-digit",
+        }),
+      );
+    format();
+    const id = setInterval(format, 20_000);
+    return () => clearInterval(id);
+  }, [locale]);
+
+  return (
+    <span
+      suppressHydrationWarning
+      className="hidden select-none px-1 text-xs font-semibold tabular-nums text-foreground/65 sm:inline"
+    >
+      {time || "--:--"}
+    </span>
+  );
+}
+
+export function SiteDock({
+  lightLogoUrl,
+  darkLogoUrl,
+  defaultLocale,
+  isSuperAdmin = false,
+}: SiteDockProps) {
+  const locale = useLocale();
+  const pathname = usePathname();
+  const t = useTranslations("navigation");
+  const { theme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isArabic = locale === "ar";
+  const currentPath = stripLocalePrefix(pathname);
+  const homeHref = getLocalizedPath(locale, "/", defaultLocale);
+  const adminHref = buildAdminUrl("/");
+
+  const activeTheme = theme === "system" ? resolvedTheme : theme;
+  const isDark = mounted && activeTheme === "dark";
+  const logoSrc = isDark
+    ? darkLogoUrl || lightLogoUrl || "/logos/dark-primary.svg"
+    : lightLogoUrl || darkLogoUrl || "/logos/light-primary.svg";
+
+  const brandSubtitle = isArabic
+    ? "مطوّر ويب · فريلانسر"
+    : "Webdesigner Bremen · Freelancer";
+
+  const controlButtonClassName =
+    "h-8 w-8 rounded-full border border-transparent text-foreground/70 hover:bg-accent hover:text-foreground";
+
+  return (
+    <>
+      {/* ===== Top menu bar (macOS-style utility strip) ===== */}
+      <header
+        className="fixed inset-x-0 top-0 z-40 border-b border-border/60 bg-background/70 backdrop-blur-chrome"
+        style={{ paddingTop: "env(safe-area-inset-top, 0px)" }}
+      >
+        <div className="mx-auto flex h-12 max-w-[100rem] items-center gap-3 px-4 sm:px-6">
+          <Link
+            href={homeHref}
+            className="flex items-center gap-2 rounded-full px-1 py-1 font-black tracking-tight"
+            aria-label="mohfarawati"
+          >
+            <span className="h-2 w-2 rounded-full bg-primary shadow-[0_0_10px_hsl(var(--primary))]" />
+            <span className="text-sm" dir={isArabic ? "rtl" : undefined}>
+              {isArabic ? (
+                <>
+                  <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">محمد</span>{" "}
+                  <span className="text-primary">فرواتي</span>
+                </>
+              ) : (
+                <>
+                  <span className="text-[hsl(var(--hero-ink))] dark:text-foreground">MOH</span>
+                  <span className="text-primary">FARAWATI</span>
+                </>
+              )}
+            </span>
+          </Link>
+
+          <span
+            className="hidden border-s border-border/60 ps-3 text-xs font-medium text-foreground/60 md:inline"
+            dir={isArabic ? "rtl" : undefined}
+          >
+            {brandSubtitle}
+          </span>
+
+          <div className="ms-auto flex items-center gap-1">
+            <MenuClock locale={locale} />
+            <LocaleToggle
+              locale={locale}
+              defaultLocale={defaultLocale}
+              className={controlButtonClassName}
+            />
+            <SoundToggle
+              ariaLabel={t("soundMute")}
+              mutedAriaLabel={t("soundUnmute")}
+              variant="ghost"
+              className={controlButtonClassName}
+            />
+            <ThemeToggle
+              ariaLabel={t("themeToggle")}
+              variant="ghost"
+              className={controlButtonClassName}
+            />
+            {isSuperAdmin ? (
+              <a
+                href={adminHref}
+                aria-label="Open admin dashboard"
+                className="ms-1 inline-flex h-8 items-center gap-1.5 rounded-full border border-border/60 bg-background/60 px-3 text-xs font-semibold text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
+              >
+                <ShieldCheck className="h-4 w-4" />
+                <span className="hidden lg:inline">Admin</span>
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </header>
+
+      {/* ===== 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))" }}
+      >
+        <Dock
+          direction="bottom"
+          iconSize={44}
+          iconMagnification={74}
+          iconDistance={150}
+          className="pointer-events-auto border-border/60 bg-background/70 shadow-panel"
+        >
+          {/* Logo — first icon in the dock */}
+          <DockIcon className="group relative overflow-visible rounded-[30%] border border-border/60 bg-foreground/[0.04]">
+            <Link
+              href={homeHref}
+              aria-label="mohfarawati — Home"
+              className="flex h-full w-full items-center justify-center rounded-[inherit]"
+            >
+              <Image
+                src={logoSrc}
+                alt="mohfarawati"
+                width={80}
+                height={80}
+                sizes="80px"
+                priority
+                className={cn(
+                  "h-full w-full rounded-full object-contain transition-opacity duration-300",
+                  mounted ? "opacity-100" : "opacity-0",
+                )}
+              />
+            </Link>
+            <DockTip label="mohfarawati" />
+          </DockIcon>
+
+          <div className="mx-1 h-8 w-px self-center bg-border/70" aria-hidden />
+
+          {navItems.map(({ key, path, Icon, disabled }) => {
+            const itemPath = path || "/";
+            const isActive = isNavItemActive(currentPath, itemPath);
+            const label = t(key);
+
+            const inner = (
+              <span className="flex h-full w-full items-center justify-center rounded-[inherit]">
+                <Icon className="h-[55%] w-[55%]" />
+              </span>
+            );
+
+            return (
+              <DockIcon
+                key={key}
+                className={cn(
+                  "group relative overflow-visible rounded-[30%] border transition-colors",
+                  isActive
+                    ? "border-primary/60 bg-primary/10 text-primary"
+                    : disabled
+                      ? "border-border/50 bg-foreground/[0.03] text-foreground/35"
+                      : "border-border/60 bg-foreground/[0.04] text-foreground/80 hover:text-foreground",
+                )}
+              >
+                {disabled ? (
+                  <span aria-disabled="true" className="flex h-full w-full cursor-not-allowed items-center justify-center">
+                    {inner}
+                  </span>
+                ) : (
+                  <Link
+                    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]"
+                  >
+                    {inner}
+                  </Link>
+                )}
+
+                <DockTip label={label} soon={disabled ? t("soon") : undefined} />
+
+                {isActive ? (
+                  <span
+                    aria-hidden
+                    className="absolute -bottom-1.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"
+                  />
+                ) : null}
+              </DockIcon>
+            );
+          })}
+        </Dock>
+      </div>
+    </>
+  );
+}
+
+function DockTip({ label, soon }: { label: string; soon?: string }) {
+  return (
+    <span
+      role="tooltip"
+      className="pointer-events-none absolute bottom-[calc(100%+0.75rem)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap rounded-lg border border-border/60 bg-background/90 px-2.5 py-1 text-xs font-semibold text-foreground opacity-0 shadow-md backdrop-blur-chrome transition-all duration-150 group-hover:translate-y-0 group-hover:opacity-100"
+    >
+      {label}
+      {soon ? <span className="ms-1.5 text-[0.625rem] tracking-wide text-primary">{soon}</span> : null}
+    </span>
+  );
+}

components/ui/dock.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import React, { useRef, type PropsWithChildren } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+  type MotionValue,
+  type MotionProps,
+} from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+export interface DockProps extends VariantProps<typeof dockVariants> {
+  className?: string;
+  iconSize?: number;
+  iconMagnification?: number;
+  disableMagnification?: boolean;
+  iconDistance?: number;
+  direction?: "top" | "middle" | "bottom";
+  children: React.ReactNode;
+}
+
+const DEFAULT_SIZE = 40;
+const DEFAULT_MAGNIFICATION = 60;
+const DEFAULT_DISTANCE = 140;
+const DEFAULT_DISABLEMAGNIFICATION = false;
+
+const dockVariants = cva(
+  "supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto flex w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md",
+);
+
+const Dock = React.forwardRef<HTMLDivElement, DockProps>(
+  (
+    {
+      className,
+      children,
+      iconSize = DEFAULT_SIZE,
+      iconMagnification = DEFAULT_MAGNIFICATION,
+      disableMagnification = DEFAULT_DISABLEMAGNIFICATION,
+      iconDistance = DEFAULT_DISTANCE,
+      direction = "bottom",
+      ...props
+    },
+    ref,
+  ) => {
+    const mouseX = useMotionValue(Infinity);
+
+    const renderChildren = () => {
+      return React.Children.map(children, (child) => {
+        if (React.isValidElement<DockIconProps>(child) && child.type === DockIcon) {
+          return React.cloneElement(child, {
+            ...child.props,
+            mouseX: mouseX,
+            size: iconSize,
+            magnification: iconMagnification,
+            disableMagnification: disableMagnification,
+            distance: iconDistance,
+          });
+        }
+        return child;
+      });
+    };
+
+    return (
+      <motion.div
+        ref={ref}
+        onMouseMove={(e) => mouseX.set(e.pageX)}
+        onMouseLeave={() => mouseX.set(Infinity)}
+        {...props}
+        className={cn(dockVariants({ className }), {
+          "items-start": direction === "top",
+          "items-center": direction === "middle",
+          "items-end": direction === "bottom",
+        })}
+      >
+        {renderChildren()}
+      </motion.div>
+    );
+  },
+);
+
+Dock.displayName = "Dock";
+
+export interface DockIconProps
+  extends Omit<MotionProps & React.HTMLAttributes<HTMLDivElement>, "children"> {
+  size?: number;
+  magnification?: number;
+  disableMagnification?: boolean;
+  distance?: number;
+  mouseX?: MotionValue<number>;
+  className?: string;
+  children?: React.ReactNode;
+  props?: PropsWithChildren;
+}
+
+const DockIcon = ({
+  size = DEFAULT_SIZE,
+  magnification = DEFAULT_MAGNIFICATION,
+  disableMagnification,
+  distance = DEFAULT_DISTANCE,
+  mouseX,
+  className,
+  children,
+  ...props
+}: DockIconProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const padding = Math.max(6, size * 0.2);
+  const defaultMouseX = useMotionValue(Infinity);
+
+  const distanceCalc = useTransform(mouseX ?? defaultMouseX, (val: number) => {
+    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
+    return val - bounds.x - bounds.width / 2;
+  });
+
+  const targetSize = disableMagnification ? size : magnification;
+
+  const sizeTransform = useTransform(
+    distanceCalc,
+    [-distance, 0, distance],
+    [size, targetSize, size],
+  );
+
+  const scaleSize = useSpring(sizeTransform, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      style={{ width: scaleSize, height: scaleSize, padding }}
+      className={cn(
+        "flex aspect-square cursor-pointer items-center justify-center rounded-full",
+        disableMagnification && "hover:bg-muted-foreground transition-colors",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+DockIcon.displayName = "DockIcon";
+
+export { Dock, DockIcon, dockVariants };