fix: force light theme and redesign report fan component

Override next-themes localStorage persistence to enforce configured theme
mode. Redesign report fan with perspective, ambient glow, glass borders,
and hover effects for a polished visual presentation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/lib/providers/theme.tsx

@@ -39,7 +39,8 @@ export const ThemeProvider = memo<ThemeProviderProps>(({ children }) => {
     <NextThemeProvider
       attribute="class"
       defaultTheme={appConfig.theme.mode}
-      enableSystem
+      forcedTheme={appConfig.theme.mode === "system" ? undefined : appConfig.theme.mode}
+      enableSystem={appConfig.theme.mode === "system"}
       disableTransitionOnChange
     >
       {children}

apps/web/src/modules/marketing/home/report-fan.tsx

@@ -2,41 +2,95 @@ import Image from "next/image";
 
 export const ReportFan = () => {
   return (
-    <div className="animate-fade-in relative mx-auto mt-8 -translate-y-4 opacity-0 [--animation-delay:800ms]">
+    <div className="animate-fade-in relative mx-auto mt-12 -translate-y-4 opacity-0 [--animation-delay:800ms] sm:mt-16 md:mt-20">
-      <div className="relative flex h-[320px] w-[500px] items-end justify-center sm:h-[400px] sm:w-[600px] md:h-[480px] md:w-[720px]">
+      {/* Ambient glow behind the fan */}
-        {/* Left page - peeking from behind */}
+      <div className="pointer-events-none absolute inset-0 -inset-x-20 -bottom-10">
-        <div className="absolute bottom-0 left-0 z-0 w-[45%] origin-bottom-center -rotate-6 drop-shadow-xl">
+        <div className="absolute top-1/2 left-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" />
+        <div className="absolute top-1/3 left-1/3 h-[300px] w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
+      </div>
+
+      {/* Fan container with perspective */}
+      <div
+        className="relative mx-auto w-[340px] sm:w-[480px] md:w-[620px] lg:w-[740px]"
+        style={{ perspective: "1200px" }}
+      >
+        {/* Floating grid dots decoration */}
+        <div className="pointer-events-none absolute -top-8 -right-12 h-24 w-24 opacity-[0.04]"
+          style={{
+            backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
+            backgroundSize: "8px 8px",
+          }}
+        />
+        <div className="pointer-events-none absolute -bottom-6 -left-10 h-20 w-20 opacity-[0.04]"
+          style={{
+            backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
+            backgroundSize: "8px 8px",
+          }}
+        />
+
+        <div className="relative flex aspect-[3/2.2] items-end justify-center">
+          {/* Left page — tilted, peeking */}
+          <div
+            className="absolute bottom-0 left-0 z-0 w-[42%] transition-transform duration-500 ease-out hover:scale-[1.02]"
+            style={{
+              transform: "rotate(-8deg) translateY(-4%) translateX(6%)",
+              transformOrigin: "bottom center",
+            }}
+          >
+            <div className="relative overflow-hidden rounded-xl border border-white/60 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.15)]">
               <Image
                 src="/images/report/page-2.png"
                 alt="Report table of contents"
                 width={1653}
                 height={2339}
-            className="rounded-lg"
+                className="block w-full"
               />
+              {/* Top fade for depth */}
+              <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-transparent" />
+            </div>
           </div>
 
-        {/* Right page - peeking from behind */}
+          {/* Right page — tilted, peeking */}
-        <div className="absolute right-0 bottom-0 z-0 w-[45%] origin-bottom-center rotate-6 drop-shadow-xl">
+          <div
+            className="absolute right-0 bottom-0 z-0 w-[42%] transition-transform duration-500 ease-out hover:scale-[1.02]"
+            style={{
+              transform: "rotate(8deg) translateY(-4%) translateX(-6%)",
+              transformOrigin: "bottom center",
+            }}
+          >
+            <div className="relative overflow-hidden rounded-xl border border-white/60 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.15)]">
               <Image
                 src="/images/report/page-3.png"
                 alt="Report reading guide"
                 width={1653}
                 height={2339}
-            className="rounded-lg"
+                className="block w-full"
               />
+              <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-transparent" />
+            </div>
           </div>
 
-        {/* Center page - full cover */}
+          {/* Center page — hero, elevated */}
-        <div className="relative z-10 w-[50%] drop-shadow-2xl">
+          <div
+            className="relative z-10 w-[52%] transition-transform duration-500 ease-out hover:scale-[1.03]"
+            style={{
+              transform: "translateY(-2%)",
+            }}
+          >
+            <div className="relative overflow-hidden rounded-xl border border-white/80 shadow-[0_32px_80px_-12px_rgba(0,0,0,0.25)]">
               <Image
                 src="/images/report/page-1.png"
                 alt="Reputation Blueprint cover"
                 width={1653}
                 height={2339}
-            className="rounded-lg"
+                className="block w-full"
                 priority
               />
             </div>
+            {/* Reflection hint */}
+            <div className="pointer-events-none mx-auto mt-1 h-8 w-[90%] rounded-b-xl bg-gradient-to-b from-black/[0.04] to-transparent blur-sm" />
+          </div>
+        </div>
       </div>
     </div>
   );