Fix the topnav for more responsiveness

prisma/schema.prisma

@@ -524,6 +524,15 @@ model TermsOfService {
   version  Int    @default(autoincrement())
 }
 
+model About {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  markdown String
+  version  Int    @default(autoincrement())
+}
+
 model User {
   id            String    @id
   name          String

src/app/(normal)/about/page.tsx

@@ -0,0 +1,34 @@
+import { prisma } from "@/lib/prisma";
+import Image from "next/image";
+import ReactMarkdown from "react-markdown";
+
+export default async function AboutPage() {
+  const about = await prisma.about.findFirst({
+    orderBy: [{ version: "desc" }],
+  });
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8">
+      <div className="markdown text-center">
+        <ReactMarkdown
+          components={{
+            img: ({ src, alt }) => {
+              if (!src || typeof src !== "string") return null;
+              return (
+                <Image
+                  src={src}
+                  alt={alt ?? ""}
+                  width={1200}
+                  height={800}
+                  className="max-w-full h-auto rounded-md border border-border"
+                />
+              );
+            },
+          }}
+        >
+          {about?.markdown}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+}

src/app/(normal)/artworks/artfight/page.tsx

@@ -0,0 +1,13 @@
+import UnderConstruction from "@/components/global/UnderConstruction";
+
+export default function ArtfightPage() {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-10">
+      <UnderConstruction
+        title="Artfight Gallery"
+        subtitle="This page is getting ready for its big debut."
+        note="I’m curating attacks, revenges, and progress shots — check back soon."
+      />
+    </div>
+  );
+}

src/app/(normal)/miniatures/page.tsx

@@ -0,0 +1,13 @@
+import UnderConstruction from "@/components/global/UnderConstruction";
+
+export default function MiniaturesPage() {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-10">
+      <UnderConstruction
+        title="Warhammer Miniatures"
+        subtitle="This page is getting ready for its big debut."
+        note="I’m curating attacks, revenges, and progress shots — check back soon."
+      />
+    </div>
+  );
+}

src/app/(normal)/page.tsx

@@ -10,15 +10,23 @@ export default function Home() {
           Welcome to my place!
         </h1>
         <p className="text-muted-foreground max-w-xl text-lg mb-6">
-          I&apos;m an illustrator, character designer, miniature painter, 3d modeller, makeup artist and much more and happy to show you things i&apos;ve created.
+          I&apos;m an illustrator, character designer, miniature painter, 3d
+          modeller, makeup artist and much more and happy to show you things
+          i&apos;ve created.
         </p>
         <p className="text-muted-foreground max-w-xl text-lg mb-6">
-          If you want to commission me<br />you can find all the information you need here:<br /> <Link href="/commissions" className="underline text-primary"  >Commissions</Link>
+          If you want to commission me
+          <br />
+          you can find all the information you need here:
+          <br />{" "}
+          <Link href="/commissions" className="underline text-primary">
+            Commissions
+          </Link>
         </p>
         <div>
           <SocialLinks />
         </div>
       </div>
-    </div >
+    </div>
   );
 }

src/app/(normal)/tos/page.tsx

@@ -1,10 +1,10 @@
-import { prisma } from '@/lib/prisma';
-import ReactMarkdown from 'react-markdown';
+import { prisma } from "@/lib/prisma";
+import ReactMarkdown from "react-markdown";
 
 export default async function TosPage() {
   const tos = await prisma.termsOfService.findFirst({
     orderBy: [{ version: "desc" }],
-  })
+  });
 
   return (
     <div className="mx-auto w-full max-w-6xl px-4 py-8">

src/app/error.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <main className="relative min-h-screen overflow-hidden">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-16 top-6 h-60 w-60 rounded-full bg-destructive/15 blur-3xl" />
+        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
+      </div>
+
+      <div className="relative mx-auto flex min-h-screen w-full max-w-3xl flex-col items-center justify-center gap-6 px-6 py-16 text-center">
+        <div className="rounded-full border border-border/60 bg-card px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+          Something went wrong
+        </div>
+        <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
+          We hit a snag.
+        </h1>
+        <p className="text-base text-muted-foreground">
+          The page failed to load. You can try again or head back home.
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <Button size="lg" onClick={reset}>
+            Try again
+          </Button>
+          <Button asChild size="lg" variant="outline">
+            <Link href="/">Go home</Link>
+          </Button>
+        </div>
+        <div className="rounded-2xl border border-border/60 bg-card/70 px-4 py-3 text-xs text-muted-foreground">
+          {error.digest ? `Error ID: ${error.digest}` : "Unexpected error"}
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/global-error.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-background text-foreground">
+        <main className="relative min-h-screen overflow-hidden">
+          <div className="pointer-events-none absolute inset-0">
+            <div className="absolute -left-24 top-0 h-64 w-64 rounded-full bg-destructive/15 blur-3xl" />
+            <div className="absolute right-0 bottom-0 h-80 w-80 rounded-full bg-primary/20 blur-3xl" />
+          </div>
+
+          <div className="relative mx-auto flex min-h-screen w-full max-w-3xl flex-col items-center justify-center gap-6 px-6 py-16 text-center">
+            <div className="rounded-full border border-border/60 bg-card px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+              Critical error
+            </div>
+            <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
+              We could not recover.
+            </h1>
+            <p className="text-base text-muted-foreground">
+              A global error occurred. Try again or return home.
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-3">
+              <Button size="lg" onClick={reset}>
+                Retry
+              </Button>
+              <Button asChild size="lg" variant="outline">
+                <Link href="/">Go home</Link>
+              </Button>
+            </div>
+            <div className="rounded-2xl border border-border/60 bg-card/70 px-4 py-3 text-xs text-muted-foreground">
+              {error.digest ? `Error ID: ${error.digest}` : "Unexpected error"}
+            </div>
+          </div>
+        </main>
+      </body>
+    </html>
+  );
+}

src/app/loading.tsx

@@ -0,0 +1,17 @@
+export default function Loading() {
+  return (
+    <main className="relative flex min-h-screen items-center justify-center overflow-hidden">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
+        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-accent/30 blur-3xl" />
+      </div>
+      <div className="relative flex flex-col items-center gap-4 rounded-3xl border border-border/60 bg-card/70 px-10 py-12 shadow-lg">
+        <div className="h-10 w-10 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
+        <div className="text-sm font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+          Loading
+        </div>
+        <div className="text-xs text-muted-foreground">Preparing the gallery.</div>
+      </div>
+    </main>
+  );
+}

src/app/not-found.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+
+import { GameOfLifeMini } from "@/components/global/GameOfLifeMini";
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <main className="relative min-h-screen overflow-hidden">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-32 -top-24 h-72 w-72 rounded-full bg-primary/15 blur-3xl" />
+        <div className="absolute right-0 top-10 h-64 w-64 rounded-full bg-accent/40 blur-3xl" />
+        <div className="absolute bottom-0 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-secondary/40 blur-3xl" />
+      </div>
+
+      <div className="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col justify-center gap-10 px-6 py-16 lg:flex-row lg:items-center">
+        <section className="max-w-xl space-y-6">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+            Lost and Found
+          </div>
+          <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
+            Page not found.
+          </h1>
+          <p className="text-base text-muted-foreground">
+            This page wandered off. While we look for it, you can play a quick
+            Game of Life. Click cells to shape the pattern.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Button asChild size="lg">
+              <Link href="/">Return home</Link>
+            </Button>
+            <Button asChild variant="outline" size="lg">
+              <Link href="/artworks">Browse artworks</Link>
+            </Button>
+          </div>
+          <div className="rounded-2xl border border-border/60 bg-card/70 p-4 text-sm text-muted-foreground shadow-sm">
+            Tip: The gliders are shy. Try clicking five cells in an L shape.
+          </div>
+        </section>
+
+        <section className="w-full max-w-xl">
+          <div className="rounded-3xl border border-border/60 bg-card/70 p-5 shadow-lg">
+            <GameOfLifeMini />
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

src/components/animalStudies/AnimalStudiesGallery.tsx

@@ -68,6 +68,11 @@ export default function AnimalStudiesGallery({
       maxRowItems={5}
       maxRowItemsMobile={1}
       gap={12}
+      gapBreakpoints={[
+        { maxWidth: 685, gap: 6 },
+        { maxWidth: 910, gap: 8 },
+        { maxWidth: 1130, gap: 10 },
+      ]}
       onLoadMore={done ? undefined : () => void loadMore()}
       hasMore={!done}
       isLoadingMore={loading}

src/components/global/GameOfLifeMini.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import type { MouseEvent } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+
+function createGrid(cols: number, rows: number) {
+  return Array.from({ length: rows }, () => Array.from({ length: cols }, () => 0));
+}
+
+function seedRandom(grid: number[][], density: number) {
+  for (let y = 0; y < grid.length; y += 1) {
+    for (let x = 0; x < grid[0].length; x += 1) {
+      grid[y][x] = Math.random() < density ? 1 : 0;
+    }
+  }
+}
+
+function stepGrid(grid: number[][]) {
+  const rows = grid.length;
+  const cols = grid[0]?.length ?? 0;
+  const next = createGrid(cols, rows);
+
+  for (let y = 0; y < rows; y += 1) {
+    const yPrev = (y - 1 + rows) % rows;
+    const yNext = (y + 1) % rows;
+    for (let x = 0; x < cols; x += 1) {
+      const xPrev = (x - 1 + cols) % cols;
+      const xNext = (x + 1) % cols;
+      const neighbors =
+        grid[yPrev][xPrev] +
+        grid[yPrev][x] +
+        grid[yPrev][xNext] +
+        grid[y][xPrev] +
+        grid[y][xNext] +
+        grid[yNext][xPrev] +
+        grid[yNext][x] +
+        grid[yNext][xNext];
+
+      if (grid[y][x]) {
+        next[y][x] = neighbors === 2 || neighbors === 3 ? 1 : 0;
+      } else {
+        next[y][x] = neighbors === 3 ? 1 : 0;
+      }
+    }
+  }
+
+  return next;
+}
+
+export function GameOfLifeMini() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [running, setRunning] = useState(true);
+  const [speed, setSpeed] = useState(6);
+  const cellSize = 10;
+  const width = 420;
+  const height = 260;
+
+  const { rows, cols } = useMemo(
+    () => ({
+      cols: Math.floor(width / cellSize),
+      rows: Math.floor(height / cellSize),
+    }),
+    [],
+  );
+
+  const gridRef = useRef<number[][]>(createGrid(cols, rows));
+
+  useEffect(() => {
+    gridRef.current = createGrid(cols, rows);
+    seedRandom(gridRef.current, 0.22);
+  }, [cols, rows]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let raf = 0;
+    let last = performance.now();
+    const tickMs = 1000 / speed;
+
+    const draw = () => {
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = "#141414";
+      ctx.fillRect(0, 0, width, height);
+
+      const grid = gridRef.current;
+      ctx.fillStyle = "#f2f2f2";
+      for (let y = 0; y < rows; y += 1) {
+        for (let x = 0; x < cols; x += 1) {
+          if (grid[y][x]) {
+            ctx.fillRect(
+              x * cellSize,
+              y * cellSize,
+              cellSize - 1,
+              cellSize - 1,
+            );
+          }
+        }
+      }
+    };
+
+    const loop = (now: number) => {
+      if (running && now - last >= tickMs) {
+        gridRef.current = stepGrid(gridRef.current);
+        last = now;
+      }
+      draw();
+      raf = requestAnimationFrame(loop);
+    };
+
+    raf = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf);
+  }, [running, speed, cols, rows]);
+
+  const handleToggleCell = (event: MouseEvent<HTMLCanvasElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = Math.floor((event.clientX - rect.left) / cellSize);
+    const y = Math.floor((event.clientY - rect.top) / cellSize);
+    if (x < 0 || y < 0 || y >= rows || x >= cols) return;
+    gridRef.current[y][x] = gridRef.current[y][x] ? 0 : 1;
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+            Game of Life
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Click to toggle cells. Space-time improvisation.
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant={running ? "secondary" : "default"}
+            onClick={() => setRunning((prev) => !prev)}
+          >
+            {running ? "Pause" : "Play"}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              gridRef.current = createGrid(cols, rows);
+            }}
+          >
+            Clear
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              gridRef.current = createGrid(cols, rows);
+              seedRandom(gridRef.current, 0.22);
+            }}
+          >
+            Randomize
+          </Button>
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-border/60 bg-background/60 p-3 shadow-sm">
+        <canvas
+          ref={canvasRef}
+          width={width}
+          height={height}
+          onClick={handleToggleCell}
+          className="h-65 w-full rounded-xl border border-border/40 bg-black"
+        />
+      </div>
+
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <span>Speed</span>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setSpeed((prev) => Math.max(2, prev - 1))}
+          >
+            -
+          </Button>
+          <span className="min-w-6 text-center tabular-nums">{speed}</span>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setSpeed((prev) => Math.min(12, prev + 1))}
+          >
+            +
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/global/Header.tsx

@@ -6,9 +6,11 @@ export default function Header() {
 
   return (
     <div className="w-full">
-      <div className="flex items-center justify-between px-4 md:px-8 py-2">
+      <div className="flex w-full items-center gap-4 px-4 md:px-8 py-2">
+        <div className="flex-1 min-w-0">
           <TopNav />
-        <div className="flex items-center gap-2">
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
           <NsfwModeToggle />
           <ModeToggle />
         </div>

src/components/global/TopNav.tsx

@@ -1,45 +1,222 @@
 "use client"
 
-import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
-import { Menu } from "lucide-react";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import { ChevronDown, Ellipsis, Menu } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Button } from "../ui/button";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
 
 const links = [
-  { href: "/", label: "Home" },
-  { href: "/artworks", label: "Portfolio" },
+  { type: "link" as const, href: "/", label: "Home" },
+  { type: "link" as const, href: "/artworks", label: "Portfolio" },
+  {
+    type: "dropdown" as const,
+    label: "Categories",
+    items: [
       { href: "/artworks/animalstudies", label: "Animal Studies" },
-  { href: "/commissions", label: "Commissions" },
-  { href: "/commissions/status", label: "Commission Status" },
-  { href: "/tos", label: "Terms of Service" },
-  // { href: "/portfolio/artfight", label: "Artfight" },
-  // { href: "/portfolio/minis", label: "Miniatures" },
-  // { href: "/commissions", label: "Commissions" },
-  // { href: "/ych", label: "YCH / Custom offers" },
-  // { href: "/todo", label: "todo (temp)" },
+      { href: "/artworks/artfight", label: "Artfight" }
+    ],
+  },
+  { type: "link" as const, href: "/miniatures", label: "Miniatures" },
+  { type: "link" as const, href: "/commissions", label: "Commissions" },
+  { type: "link" as const, href: "/commissions/status", label: "Commission Status" },
+  { type: "link" as const, href: "/tos", label: "Terms of Service" },
+  { type: "link" as const, href: "/about", label: "About Me" },
 ]
 
 export default function TopNav() {
   const [open, setOpen] = useState(false)
+  const requiredLinks = [
+    links[0], // Home
+    links[1], // Portfolio
+    links[4], // Commissions
+  ];
+  const flexibleLinks = links.filter((link) => !requiredLinks.includes(link));
+  const [visibleCount, setVisibleCount] = useState(flexibleLinks.length);
+  const listRef = useRef<HTMLUListElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const measureListRef = useRef<HTMLUListElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const visibleLinks = [...requiredLinks, ...flexibleLinks.slice(0, visibleCount)];
+  const overflowLinks = flexibleLinks.slice(visibleCount);
+  const showMore = overflowLinks.length > 0;
+
+  useEffect(() => {
+    const containerEl = containerRef.current;
+    if (!containerEl) return;
+    const update = () => {
+      setContainerWidth(containerEl.getBoundingClientRect().width);
+    };
+    const ro = new ResizeObserver(update);
+    ro.observe(containerEl);
+    window.addEventListener("resize", update);
+    update();
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const measureEl = measureListRef.current;
+    if (!measureEl || !containerWidth) return;
+    const items = Array.from(measureEl.children) as HTMLElement[];
+    if (!items.length) return;
+
+    const moreItem = items[items.length - 1];
+    const moreWidth = moreItem.getBoundingClientRect().width;
+    const itemWidths = items.slice(0, -1).map((el) => el.getBoundingClientRect().width);
+
+    const requiredIndexes = new Set([0, 1, 4]);
+    let requiredWidth = 0;
+    const flexibleWidths: number[] = [];
+    itemWidths.forEach((w, idx) => {
+      if (requiredIndexes.has(idx)) {
+        requiredWidth += w;
+      } else {
+        flexibleWidths.push(w);
+      }
+    });
+
+    const totalFlexibleWidth = flexibleWidths.reduce((a, b) => a + b, 0);
+    let nextVisibleCount = flexibleLinks.length;
+    const safetyPadding = 24;
+
+    if (requiredWidth + totalFlexibleWidth + safetyPadding > containerWidth) {
+      let available = containerWidth - requiredWidth - moreWidth - safetyPadding;
+      if (available < 0) available = 0;
+      let fit = 0;
+      let used = 0;
+      for (const w of flexibleWidths) {
+        if (used + w > available) break;
+        used += w;
+        fit += 1;
+      }
+      nextVisibleCount = fit;
+    }
+
+    if (nextVisibleCount !== visibleCount) {
+      setVisibleCount(nextVisibleCount);
+    }
+
+  }, [containerWidth, flexibleLinks.length, visibleCount]);
 
   return (
     <div className="w-full flex items-center justify-between">
       {/* Desktop Nav */}
-      <div className="hidden md:flex">
-        <NavigationMenu>
-          <NavigationMenuList>
-            {links.map(({ href, label }) => (
-              <NavigationMenuItem key={href}>
+      <div className="hidden md:flex flex-1 min-w-0">
+        <NavigationMenu
+          viewport={false}
+          delayDuration={0}
+          skipDelayDuration={0}
+          className="w-full min-w-0 max-w-none"
+        >
+          <div ref={containerRef} className="w-full max-w-full min-w-0">
+            <NavigationMenuList
+              ref={listRef}
+              className="w-full flex-nowrap justify-start min-w-0"
+            >
+              {visibleLinks.map((item) => {
+                if (item.type === "dropdown") {
+                  return (
+                    <NavigationMenuItem key={item.label}>
+                      <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
+                        {item.label}
+                      </NavigationMenuTrigger>
+                    <NavigationMenuContent className="z-50">
+                        <ul className="min-w-48">
+                          {item.items.map(({ href, label }) => (
+                            <li key={href}>
+                              <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                                <Link href={href}>{label}</Link>
+                              </NavigationMenuLink>
+                            </li>
+                          ))}
+                        </ul>
+                      </NavigationMenuContent>
+                    </NavigationMenuItem>
+                  );
+                }
+
+                return (
+                  <NavigationMenuItem key={item.href}>
                     <NavigationMenuLink
                       asChild
                       className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
                     >
-                  <Link href={href}>{label}</Link>
+                      <Link href={item.href}>{item.label}</Link>
                     </NavigationMenuLink>
                   </NavigationMenuItem>
+                );
+              })}
+              {showMore ? (
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
+                    <Ellipsis className="h-4 w-4" />
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent className="z-50">
+                    <ul className="min-w-48">
+                      {overflowLinks.map((item) => {
+                        if (item.type === "dropdown") {
+                          return (
+                            <li key={item.label}>
+                              <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
+                                {item.label}
+                              </div>
+                              <ul className="pl-2">
+                                {item.items.map(({ href, label }) => (
+                                  <li key={href}>
+                                    <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                                      <Link href={href}>{label}</Link>
+                                    </NavigationMenuLink>
+                                  </li>
                                 ))}
+                              </ul>
+                            </li>
+                          );
+                        }
+
+                        return (
+                          <li key={item.href}>
+                            <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                              <Link href={item.href}>{item.label}</Link>
+                            </NavigationMenuLink>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              ) : null}
+            </NavigationMenuList>
+          </div>
+        </NavigationMenu>
+      </div>
+
+      <div className="absolute left-0 top-0 -z-10 opacity-0 pointer-events-none">
+        <NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
+          <NavigationMenuList ref={measureListRef} className="flex-nowrap">
+            {links.map((item) => (
+              <NavigationMenuItem key={`measure-${item.type === "dropdown" ? item.label : item.href}`}>
+                <div className={navigationMenuTriggerStyle()}>
+                  {item.type === "dropdown" ? (
+                    <span className="inline-flex items-center gap-1">
+                      {item.label}
+                      <ChevronDown className="h-3 w-3" />
+                    </span>
+                  ) : (
+                    item.label
+                  )}
+                </div>
+              </NavigationMenuItem>
+            ))}
+            <NavigationMenuItem>
+              <div className={navigationMenuTriggerStyle()}>
+                <Ellipsis className="h-4 w-4" />
+              </div>
+            </NavigationMenuItem>
           </NavigationMenuList>
         </NavigationMenu>
       </div>
@@ -56,7 +233,15 @@ export default function TopNav() {
               <SheetTitle className="text-lg">Navigation</SheetTitle>
             </SheetHeader>
             <nav className="mt-4 flex flex-col gap-2">
-              {links.map(({ href, label }) => (
+              {links.map((item) => {
+                if (item.type === "dropdown") {
+                  return (
+                    <div key={item.label} className="px-2">
+                      <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
+                        {item.label}
+                      </div>
+                      <div className="flex flex-col">
+                        {item.items.map(({ href, label }) => (
                           <Link
                             key={href}
                             href={href}
@@ -67,6 +252,23 @@ export default function TopNav() {
                             {label}
                           </Link>
                         ))}
+                      </div>
+                    </div>
+                  );
+                }
+
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setOpen(false)}
+                    className="block px-4 py-2 rounded-md text-sm font-medium transition-colors
+                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {item.label}
+                  </Link>
+                );
+              })}
             </nav>
           </SheetContent>
         </Sheet>

src/components/global/UnderConstruction.tsx

@@ -0,0 +1,55 @@
+import { cn } from "@/lib/utils";
+import { Construction } from "lucide-react";
+import Link from "next/link";
+
+export default function UnderConstruction({
+  title = "Under Construction",
+  subtitle = "Artfight is getting its finishing touches.",
+  note = "Check back soon for the full gallery.",
+  actionHref = "/artworks",
+  actionLabel = "Back to Portfolio",
+}: {
+  title?: string;
+  subtitle?: string;
+  note?: string;
+  actionHref?: string;
+  actionLabel?: string;
+}) {
+  return (
+    <section className="relative overflow-hidden rounded-3xl border border-border bg-background/80 px-6 py-10 shadow-sm sm:px-10 sm:py-14">
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,var(--color-muted)_0%,transparent_55%)] opacity-70" />
+      <div className="pointer-events-none absolute left-0 top-0 h-2 w-full bg-[repeating-linear-gradient(135deg,#7f1d1d_0px,#7f1d1d_8px,#ffffff_8px,#ffffff_16px)]" />
+
+      <div className="relative flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
+        <div className="max-w-xl space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium uppercase tracking-widest text-muted-foreground">
+            <Construction className="h-3.5 w-3.5 text-foreground/70" />
+            Under construction
+          </div>
+          <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+            {title}
+          </h1>
+          <p className="text-base text-muted-foreground sm:text-lg">
+            {subtitle}
+          </p>
+          <p className="text-sm text-muted-foreground/80">{note}</p>
+          <Link
+            href={actionHref}
+            className={cn(
+              "inline-flex items-center justify-center rounded-full border border-border bg-foreground px-4 py-2 text-sm font-medium text-background",
+              "transition hover:-translate-y-0.5 hover:bg-foreground/90"
+            )}
+          >
+            {actionLabel}
+          </Link>
+        </div>
+
+        <div className="relative mx-auto w-full max-w-md">
+          <div className="relative flex flex-col items-center justify-center gap-4 p-4">
+            <Construction className="h-20 w-20 text-red-800" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"