From 5df83069098e68ca9ece1800ff8fc54ed2f47efe Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Sun, 20 Sep 2026 22:47:12 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20resolve=20'full=20black'=20page=20?=
 =?UTF-8?q?=E2=80=94=20unstuck=20MultiStepLoader=20overlay,=20add=20dark-m?=
 =?UTF-8?q?ode=20depth?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause of the all-black view: the gallery demo hardcoded
<MultiStepLoader loading /> (loading=true forever), which renders a
fixed inset-0 z-[100] backdrop-blur overlay over the entire viewport.
Replace with an interactive demo (button triggers loader, auto-resets
after 4s).

Also soften flat-black dark backgrounds:
- /ui page: dark:bg-black -> dark:bg-zinc-950 + subtle top radial gradient
- home hero: dark:bg-black -> dark:bg-zinc-950 + white 6% radial gradient
---
 app/ui/page.tsx                 |  2 +-
 components/home-hero.tsx        |  2 +-
 components/showcase/gallery.tsx | 37 +++++++++++++++++++++++++--------
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/app/ui/page.tsx b/app/ui/page.tsx
index 8991da0..49de042 100644
--- a/app/ui/page.tsx
+++ b/app/ui/page.tsx
@@ -19,7 +19,7 @@ const SECTIONS = [
 
 export default function UiGalleryPage() {
   return (
-    <div className="flex w-full flex-col items-center bg-zinc-50 dark:bg-black">
+    <div className="flex w-full flex-col items-center bg-zinc-50 dark:bg-zinc-950 dark:bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.04),transparent_55%)]">
       <div className="w-full border-b border-zinc-200 bg-white/80 py-10 backdrop-blur-sm dark:border-zinc-800 dark:bg-zinc-950/80">
         <div className="mx-auto flex w-full max-w-6xl flex-col gap-3 px-6">
           <nav className="text-xs font-medium tracking-wide text-zinc-500 dark:text-zinc-400">
diff --git a/components/home-hero.tsx b/components/home-hero.tsx
index 02afbec..c349edb 100644
--- a/components/home-hero.tsx
+++ b/components/home-hero.tsx
@@ -9,7 +9,7 @@ import { Spotlight } from "@/components/ui/spotlight";
 
 export function HomeHero() {
   return (
-    <div className="relative flex w-full flex-1 flex-col items-center justify-center overflow-hidden bg-zinc-50 antialiased dark:bg-black">
+    <div className="relative flex w-full flex-1 flex-col items-center justify-center overflow-hidden bg-zinc-50 antialiased dark:bg-zinc-950 dark:bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.06),transparent_60%)]">
       <div className="pointer-events-none absolute inset-0 z-0">
         <Spotlight className="-top-40 left-0 md:-top-20 md:left-60" fill="white" />
       </div>
diff --git a/components/showcase/gallery.tsx b/components/showcase/gallery.tsx
index 6701caa..f0b047f 100644
--- a/components/showcase/gallery.tsx
+++ b/components/showcase/gallery.tsx
@@ -63,6 +63,33 @@ import { MaskContainer } from "@/components/ui/svg-mask-effect";
 import { GoogleGeminiEffect } from "@/components/ui/google-gemini-effect";
 import { IconHome, IconUser, IconSettings, IconMoon, IconSun } from "@tabler/icons-react";
 import { useScroll, useTransform, MotionValue } from "motion/react";
+import { useState } from "react";
+
+function MultiStepLoaderDemo() {
+  const [loading, setLoading] = useState(false);
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <MultiStepLoader
+        loading={loading}
+        loadingStates={[
+          { text: "Fetching" },
+          { text: "Compiling" },
+          { text: "Rendering" },
+          { text: "Done" },
+        ]}
+      />
+      <button
+        onClick={() => {
+          setLoading(true);
+          setTimeout(() => setLoading(false), 4000);
+        }}
+        className="rounded-md border border-zinc-300 px-4 py-2 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
+      >
+        {loading ? "Loading…" : "Run loader"}
+      </button>
+    </div>
+  );
+}
 
 function Card({
   children,
@@ -614,15 +641,7 @@ export function ShowcaseGallery() {
             </Tooltip>
           </Card>
           <Card label="multi-step-loader">
-            <MultiStepLoader
-              loading
-              loadingStates={[
-                { text: "Fetching" },
-                { text: "Compiling" },
-                { text: "Rendering" },
-                { text: "Done" },
-              ]}
-            />
+            <MultiStepLoaderDemo />
           </Card>
           <Card label="svg-mask-effect">
             <MaskContainer