alezmad/whyrating
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: force light theme and redesign report fan component

Browse Source 
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>
This commit is contained in:
Alejandro Gutiérrez
2026-02-22 11:19:58 +00:00
parent a5aceec46a
commit a73ddcb525
2 changed files with 88 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/src/lib/providers/theme.tsx
View File

@@ -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}

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

@@ -2,40 +2,94 @@ 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="relative flex h-[320px] w-[500px] items-end justify-center sm:h-[400px] sm:w-[600px] md:h-[480px] md:w-[720px]">
{/* Left page - peeking from behind */}
<div className="absolute bottom-0 left-0 z-0 w-[45%] origin-bottom-center -rotate-6 drop-shadow-xl">
<Image
src="/images/report/page-2.png"
alt="Report table of contents"
width={1653}
height={2339}
className="rounded-lg"
/>
</div>
<div className="animate-fade-in relative mx-auto mt-12 -translate-y-4 opacity-0 [--animation-delay:800ms] sm:mt-16 md:mt-20">
{/* Ambient glow behind the fan */}
<div className="pointer-events-none absolute inset-0 -inset-x-20 -bottom-10">
<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>
{/* Right page - peeking from behind */}
<div className="absolute right-0 bottom-0 z-0 w-[45%] origin-bottom-center rotate-6 drop-shadow-xl">
<Image
src="/images/report/page-3.png"
alt="Report reading guide"
width={1653}
height={2339}
className="rounded-lg"
/>
</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",
}}
/>
{/* Center page - full cover */}
<div className="relative z-10 w-[50%] drop-shadow-2xl">
<Image
src="/images/report/page-1.png"
alt="Reputation Blueprint cover"
width={1653}
height={2339}
className="rounded-lg"
priority
/>
<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="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 — tilted, peeking */}
<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="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 — hero, elevated */}
<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="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>