From 527ffbeab8945d4806380cd3ee850ded1eeacf53 Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucas.diassantana@gmail.com>
Date: Mon, 16 Mar 2026 03:00:57 -0300
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20UI/UX=20overhaul=20=E2=80=94?=
 =?UTF-8?q?=20gradient=20buttons,=20glow=20effects,=20depth=20surfaces?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.css: add glow vars (--lucky-glow-brand/accent), gradient vars, surface-elevated/glass utilities, glow-pulse and float keyframes, header accent line class, lucky-gradient-text class; enhance surface-panel/card with inset highlights and hover transitions
- Button: gradient fills (brand purple, accent gold), shadow glows on hover, gap-2 icon spacing
- Card: stronger shadow, border-radius xl, hover purple glow, interactive lift, new glow variant
- StatTile: tone overlay gradient per tone, icon drop-shadow glow, delta shown as colored pill, count-up entrance animation
- EmptyState: gradient ring around icon, purple glow blur behind icon, top gradient overlay
- Layout: add lucky-header-accent-line at bottom of header (purple→gold gradient)
- NowPlaying: gradient progress bar (purple→gold), ambient radial glow overlay when playing, album art purple ambient, playing indicator backdrop-blur
- Login: gradient-text title, animated entrance (fade-up), toned stat tiles with color overlays, accent gradient Discord button, feature tile hover glow icons
---
 .../frontend/src/components/Layout/Layout.tsx |  3 +-
 .../src/components/Music/NowPlaying.tsx       | 30 ++++--
 .../frontend/src/components/ui/Button.tsx     | 16 +--
 packages/frontend/src/components/ui/Card.tsx  | 26 +++--
 .../frontend/src/components/ui/EmptyState.tsx | 18 +++-
 .../frontend/src/components/ui/StatTile.tsx   | 61 ++++++++++--
 packages/frontend/src/index.css               | 85 +++++++++++++++-
 packages/frontend/src/pages/Login.tsx         | 98 ++++++++++++-------
 8 files changed, 264 insertions(+), 73 deletions(-)

diff --git a/packages/frontend/src/components/Layout/Layout.tsx b/packages/frontend/src/components/Layout/Layout.tsx
index 7b83ec5bc..5415109a0 100644
--- a/packages/frontend/src/components/Layout/Layout.tsx
+++ b/packages/frontend/src/components/Layout/Layout.tsx
@@ -63,7 +63,7 @@ function Layout({ children }: LayoutProps) {
         <div className='lucky-shell flex min-h-screen'>
             <Sidebar />
             <div className='flex min-w-0 flex-1 flex-col'>
-                <header className='sticky top-0 z-20 border-b border-lucky-border bg-lucky-bg-primary/70 backdrop-blur'>
+                <header className='sticky top-0 z-20 border-b border-lucky-border bg-lucky-bg-primary/70 backdrop-blur relative'>
                     <div className='mx-auto flex w-full max-w-[1400px] flex-wrap items-end justify-between gap-4 px-4 py-4 md:px-8'>
                         <div className='space-y-1'>
                             <p className='type-meta text-lucky-text-tertiary'>
@@ -87,6 +87,7 @@ function Layout({ children }: LayoutProps) {
                             </div>
                         )}
                     </div>
+                    <div className='lucky-header-accent-line' aria-hidden='true' />
                 </header>
 
                 <main className='flex-1 min-w-0 overflow-y-auto'>
diff --git a/packages/frontend/src/components/Music/NowPlaying.tsx b/packages/frontend/src/components/Music/NowPlaying.tsx
index 3be52f71b..8e0208916 100644
--- a/packages/frontend/src/components/Music/NowPlaying.tsx
+++ b/packages/frontend/src/components/Music/NowPlaying.tsx
@@ -61,7 +61,7 @@ export default memo(function NowPlaying({
     if (isLoading) return <NowPlayingSkeleton />
 
     return (
-        <Card className='p-0 overflow-hidden contain-layout'>
+        <Card className='p-0 overflow-hidden contain-layout' glow={isPlaying}>
             <div className='flex flex-col sm:flex-row'>
                 <AlbumArt track={currentTrack} isPlaying={isPlaying} />
                 <div className='flex-1 p-4 sm:p-6 flex flex-col justify-between min-w-0'>
@@ -127,9 +127,18 @@ function AlbumArt({
 
     return (
         <div
-            className='relative w-full sm:w-56 md:w-64 h-44 sm:h-56 md:h-64 bg-lucky-bg-tertiary shrink-0'
+            className='relative w-full sm:w-56 md:w-64 h-44 sm:h-56 md:h-64 bg-lucky-bg-tertiary shrink-0 overflow-hidden'
             aria-hidden='true'
         >
+            {isPlaying && (
+                <div
+                    className='pointer-events-none absolute inset-0 z-10'
+                    style={{
+                        background: 'radial-gradient(circle at center, rgb(139 92 246 / 0.15) 0%, transparent 70%)',
+                    }}
+                    aria-hidden='true'
+                />
+            )}
             {track?.thumbnail ? (
                 <>
                     {!imgLoaded && (
@@ -146,15 +155,19 @@ function AlbumArt({
                 </>
             ) : (
                 <div className='w-full h-full flex items-center justify-center'>
+                    <div
+                        className='absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent'
+                        aria-hidden='true'
+                    />
                     <Disc3
-                        className={`h-16 w-16 sm:h-20 sm:w-20 text-lucky-text-secondary opacity-30 ${isPlaying ? 'animate-spin motion-reduce:animate-none' : ''}`}
+                        className={`relative h-16 w-16 sm:h-20 sm:w-20 text-lucky-text-secondary opacity-30 ${isPlaying ? 'animate-spin motion-reduce:animate-none' : ''}`}
                         style={{ animationDuration: '3s' }}
                     />
                 </div>
             )}
             {isPlaying && (
                 <div
-                    className='absolute bottom-2 left-2 flex items-center gap-1 bg-black/60 rounded-full px-2 py-1'
+                    className='absolute bottom-2 left-2 flex items-center gap-1 bg-black/70 backdrop-blur-sm rounded-full px-2 py-1 border border-white/10'
                     role='status'
                     aria-label='Now playing'
                 >
@@ -165,7 +178,7 @@ function AlbumArt({
                         {[1, 2, 3].map((i) => (
                             <span
                                 key={i}
-                                className='w-0.5 bg-primary rounded-full animate-pulse'
+                                className='w-0.5 bg-purple-400 rounded-full animate-pulse'
                                 style={{
                                     height: `${8 + i * 3}px`,
                                     animationDelay: `${i * 0.15}s`,
@@ -283,8 +296,11 @@ function ProgressBar({
                 tabIndex={0}
             >
                 <div
-                    className='bg-primary h-full rounded-full transition-[width] duration-150 group-hover:h-2.5 sm:group-hover:h-2'
-                    style={{ width: `${pct}%` }}
+                    className='h-full rounded-full transition-[width] duration-150 group-hover:h-2.5 sm:group-hover:h-2'
+                    style={{
+                        width: `${pct}%`,
+                        background: 'linear-gradient(90deg, #8b5cf6 0%, #d4a017 100%)',
+                    }}
                 />
             </div>
             <div className='flex justify-between text-xs text-lucky-text-secondary mt-1'>
diff --git a/packages/frontend/src/components/ui/Button.tsx b/packages/frontend/src/components/ui/Button.tsx
index 33eb5060c..67d930613 100644
--- a/packages/frontend/src/components/ui/Button.tsx
+++ b/packages/frontend/src/components/ui/Button.tsx
@@ -25,20 +25,20 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             <button
                 ref={ref}
                 className={cn(
-                    'inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-all duration-200',
+                    'relative inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200',
                     'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
                     'disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed',
-                    'active:scale-[0.98]',
+                    'active:scale-[0.97]',
                     {
-                        'bg-primary hover:bg-primary/90 text-white':
+                        'bg-gradient-to-br from-purple-500 to-purple-700 text-white shadow-[0_2px_12px_rgb(139_92_246/0.35)] hover:shadow-[0_4px_20px_rgb(139_92_246/0.5)] hover:from-purple-400 hover:to-purple-600':
                             variant === 'primary',
-                        'bg-secondary hover:bg-secondary/90 text-white':
+                        'bg-lucky-bg-tertiary border border-lucky-border text-lucky-text-primary hover:border-lucky-border-strong hover:bg-lucky-bg-active hover:text-white':
                             variant === 'secondary',
-                        'bg-accent hover:bg-accent/90 text-white':
+                        'bg-gradient-to-br from-yellow-500 to-amber-600 text-black shadow-[0_2px_12px_rgb(212_160_23/0.4)] hover:shadow-[0_4px_20px_rgb(212_160_23/0.6)] hover:from-yellow-400 hover:to-amber-500':
                             variant === 'accent',
-                        'bg-transparent hover:bg-lucky-bg-tertiary text-white':
+                        'bg-transparent hover:bg-lucky-bg-tertiary text-lucky-text-secondary hover:text-white':
                             variant === 'ghost',
-                        'bg-destructive hover:bg-destructive/90 text-destructive-foreground':
+                        'bg-destructive hover:bg-destructive/90 text-destructive-foreground shadow-[0_2px_12px_rgb(239_68_68/0.3)] hover:shadow-[0_4px_20px_rgb(239_68_68/0.45)]':
                             variant === 'destructive',
                         'px-3 py-1.5 text-sm': size === 'sm',
                         'px-4 py-2 text-base': size === 'md',
@@ -52,7 +52,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             >
                 {loading && (
                     <Loader2
-                        className='mr-2 h-4 w-4 animate-spin'
+                        className='h-4 w-4 animate-spin'
                         aria-hidden='true'
                     />
                 )}
diff --git a/packages/frontend/src/components/ui/Card.tsx b/packages/frontend/src/components/ui/Card.tsx
index 4f8bd7671..08fdeac10 100644
--- a/packages/frontend/src/components/ui/Card.tsx
+++ b/packages/frontend/src/components/ui/Card.tsx
@@ -4,19 +4,33 @@ import { cn } from '../../lib/utils'
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
     hover?: boolean
     interactive?: boolean
+    glow?: boolean
 }
 
 const Card = forwardRef<HTMLDivElement, CardProps>(
-    ({ className, hover = false, interactive = false, ...props }, ref) => {
+    ({ className, hover = false, interactive = false, glow = false, ...props }, ref) => {
         return (
             <div
                 ref={ref}
                 className={cn(
-                    'bg-lucky-bg-secondary border border-lucky-border rounded-lg',
-                    'transition-all duration-200 ease-out',
-                    hover && 'hover:border-primary/50 hover:shadow-md',
-                    interactive &&
-                        'cursor-pointer hover:border-primary/50 hover:shadow-md hover:-translate-y-0.5 active:translate-y-0',
+                    'bg-lucky-bg-secondary border border-lucky-border rounded-xl',
+                    'shadow-[0_4px_24px_rgb(7_2_20/0.3)]',
+                    'transition-all duration-220 ease-out',
+                    hover && [
+                        'hover:border-lucky-border-strong',
+                        'hover:shadow-[0_8px_32px_rgb(139_92_246/0.12),0_4px_24px_rgb(7_2_20/0.3)]',
+                    ],
+                    interactive && [
+                        'cursor-pointer',
+                        'hover:border-lucky-border-strong',
+                        'hover:shadow-[0_8px_40px_rgb(139_92_246/0.15),0_4px_24px_rgb(7_2_20/0.3)]',
+                        'hover:-translate-y-0.5',
+                        'active:translate-y-0 active:shadow-[0_4px_24px_rgb(7_2_20/0.3)]',
+                    ],
+                    glow && [
+                        'border-purple-500/30',
+                        'shadow-[0_0_0_1px_rgb(139_92_246/0.15),0_4px_24px_rgb(139_92_246/0.12),0_12px_40px_rgb(7_2_20/0.3)]',
+                    ],
                     className,
                 )}
                 {...props}
diff --git a/packages/frontend/src/components/ui/EmptyState.tsx b/packages/frontend/src/components/ui/EmptyState.tsx
index f506011e7..9902db67b 100644
--- a/packages/frontend/src/components/ui/EmptyState.tsx
+++ b/packages/frontend/src/components/ui/EmptyState.tsx
@@ -19,18 +19,28 @@ export default function EmptyState({
     return (
         <section
             className={cn(
-                'surface-panel flex min-h-[240px] flex-col items-center justify-center px-6 py-8 text-center',
+                'surface-panel relative flex min-h-[240px] flex-col items-center justify-center overflow-hidden px-6 py-10 text-center',
                 className,
             )}
         >
+            <div
+                className='pointer-events-none absolute inset-0 bg-gradient-to-b from-purple-500/5 via-transparent to-transparent'
+                aria-hidden='true'
+            />
             {icon && (
-                <div className='mb-4 rounded-2xl bg-lucky-bg-active/60 p-4 text-lucky-text-secondary'>
-                    {icon}
+                <div className='relative mb-5 flex items-center justify-center'>
+                    <div
+                        className='absolute h-16 w-16 rounded-full bg-purple-500/10 blur-xl'
+                        aria-hidden='true'
+                    />
+                    <div className='relative rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple-500/10 to-purple-800/10 p-4 text-lucky-text-secondary shadow-[0_0_20px_rgb(139_92_246/0.15)]'>
+                        {icon}
+                    </div>
                 </div>
             )}
             <h2 className='type-h2 text-lucky-text-primary'>{title}</h2>
             <p className='mt-2 max-w-lg type-body text-lucky-text-secondary'>{description}</p>
-            {action && <div className='mt-5'>{action}</div>}
+            {action && <div className='mt-6'>{action}</div>}
         </section>
     )
 }
diff --git a/packages/frontend/src/components/ui/StatTile.tsx b/packages/frontend/src/components/ui/StatTile.tsx
index 0ba35fc96..44460d1af 100644
--- a/packages/frontend/src/components/ui/StatTile.tsx
+++ b/packages/frontend/src/components/ui/StatTile.tsx
@@ -12,6 +12,22 @@ const toneClass: Record<StatTone, string> = {
     neutral: 'bg-lucky-bg-active text-lucky-text-secondary',
 }
 
+const toneGlowClass: Record<StatTone, string> = {
+    brand: 'drop-shadow-[0_0_6px_rgb(139_92_246/0.6)]',
+    accent: 'drop-shadow-[0_0_6px_rgb(212_160_23/0.6)]',
+    success: 'drop-shadow-[0_0_6px_rgb(34_197_94/0.6)]',
+    warning: 'drop-shadow-[0_0_6px_rgb(245_158_11/0.6)]',
+    neutral: '',
+}
+
+const toneOverlayClass: Record<StatTone, string> = {
+    brand: 'from-purple-500/5 to-transparent',
+    accent: 'from-yellow-500/5 to-transparent',
+    success: 'from-green-500/5 to-transparent',
+    warning: 'from-orange-500/5 to-transparent',
+    neutral: 'from-white/[0.02] to-transparent',
+}
+
 interface StatTileProps {
     label: string
     value: string | number
@@ -30,22 +46,53 @@ export default function StatTile({
     className,
 }: StatTileProps) {
     return (
-        <article className={cn('surface-panel space-y-3 p-5', className)}>
-            <div className='flex items-center justify-between gap-2'>
+        <article
+            className={cn(
+                'surface-panel relative space-y-3 p-5 overflow-hidden',
+                className,
+            )}
+        >
+            <div
+                className={cn(
+                    'pointer-events-none absolute inset-0 bg-gradient-to-br rounded-xl opacity-60',
+                    toneOverlayClass[tone],
+                )}
+                aria-hidden='true'
+            />
+            <div className='relative flex items-center justify-between gap-2'>
                 <p className='type-body-sm text-lucky-text-tertiary'>{label}</p>
-                {icon && <span className={cn('rounded-xl p-2', toneClass[tone])}>{icon}</span>}
+                {icon && (
+                    <span
+                        className={cn(
+                            'rounded-xl p-2 transition-all duration-200',
+                            toneClass[tone],
+                            toneGlowClass[tone],
+                        )}
+                    >
+                        {icon}
+                    </span>
+                )}
             </div>
-            <p className='type-h2 text-lucky-text-primary'>
+            <p
+                className='relative type-h2 text-lucky-text-primary animate-[fade-up_0.3s_ease-out]'
+                style={{ animationFillMode: 'both' }}
+            >
                 {typeof value === 'number' ? value.toLocaleString() : value}
             </p>
             {delta !== undefined && (
                 <p
                     className={cn(
-                        'type-body-sm inline-flex items-center gap-1.5',
-                        delta >= 0 ? 'text-lucky-success' : 'text-lucky-error',
+                        'relative type-body-sm inline-flex items-center gap-1.5 rounded-full px-2 py-0.5',
+                        delta >= 0
+                            ? 'bg-green-500/10 text-lucky-success'
+                            : 'bg-red-500/10 text-lucky-error',
                     )}
                 >
-                    {delta >= 0 ? <TrendingUp className='h-3.5 w-3.5' /> : <TrendingDown className='h-3.5 w-3.5' />}
+                    {delta >= 0 ? (
+                        <TrendingUp className='h-3.5 w-3.5' />
+                    ) : (
+                        <TrendingDown className='h-3.5 w-3.5' />
+                    )}
                     {Math.abs(delta)}%
                 </p>
             )}
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 859a171fa..86cd2a4ab 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -113,6 +113,8 @@
   --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
   --animate-fade-up: fade-up 0.25s ease-out;
   --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-glow-pulse: glow-pulse 3s ease-in-out infinite;
+  --animate-float: float 6s ease-in-out infinite;
 
   @keyframes accordion-down {
     from {
@@ -165,6 +167,32 @@
       opacity: 1;
     }
   }
+  @keyframes glow-pulse {
+    0%, 100% {
+      box-shadow: 0 0 20px rgb(139 92 246 / 0.2), 0 0 40px rgb(139 92 246 / 0.1);
+    }
+    50% {
+      box-shadow: 0 0 30px rgb(139 92 246 / 0.4), 0 0 60px rgb(139 92 246 / 0.2);
+    }
+  }
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-6px);
+    }
+  }
+  @keyframes count-up {
+    from {
+      opacity: 0;
+      transform: translateY(12px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
 }
 
 @layer base {
@@ -263,18 +291,44 @@
   border-radius: var(--radius-lg);
   background: linear-gradient(
     160deg,
-    rgb(255 255 255 / 0.03),
+    rgb(255 255 255 / 0.04),
     rgb(255 255 255 / 0)
   );
   background-color: var(--lucky-bg-secondary);
-  box-shadow: var(--lucky-shadow-soft);
+  box-shadow: var(--lucky-shadow-soft), inset 0 1px 0 rgb(255 255 255 / 0.04);
+  transition: border-color 220ms ease, box-shadow 220ms ease;
+
+  &:hover {
+    border-color: var(--lucky-border-strong);
+    box-shadow: var(--lucky-shadow-soft), 0 0 0 1px rgb(139 92 246 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.06);
+  }
 }
 
 @utility surface-card {
-  border: 1px solid rgb(90 58 139 / 0.34);
+  border: 1px solid rgb(90 58 139 / 0.4);
+  border-top-color: rgb(139 92 246 / 0.2);
   border-radius: calc(var(--radius) + 0.3rem);
   background-color: var(--lucky-bg-tertiary);
-  box-shadow: var(--lucky-shadow-panel);
+  background-image: linear-gradient(180deg, rgb(139 92 246 / 0.04) 0%, transparent 50%);
+  box-shadow: var(--lucky-shadow-panel), inset 0 1px 0 rgb(255 255 255 / 0.06);
+}
+
+@utility surface-elevated {
+  border: 1px solid var(--lucky-border-strong);
+  border-top-color: rgb(139 92 246 / 0.3);
+  border-radius: var(--radius-lg);
+  background-color: var(--lucky-surface-elevated);
+  background-image: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0));
+  box-shadow: 0 8px 32px rgb(7 2 20 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.08);
+}
+
+@utility surface-glass {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgb(255 255 255 / 0.08);
+  border-radius: var(--radius-lg);
+  background-color: rgb(28 13 54 / 0.8);
+  box-shadow: 0 8px 32px rgb(7 2 20 / 0.3);
 }
 
 @layer base {
@@ -345,6 +399,13 @@
     --lucky-warning: var(--color-lucky-warning);
     --lucky-info: var(--color-lucky-info);
 
+    --lucky-glow-brand: 0 0 20px rgb(139 92 246 / 0.4), 0 0 40px rgb(139 92 246 / 0.15);
+    --lucky-glow-accent: 0 0 20px rgb(212 160 23 / 0.5), 0 0 40px rgb(212 160 23 / 0.2);
+    --lucky-glow-success: 0 0 16px rgb(34 197 94 / 0.4);
+    --lucky-gradient-brand: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    --lucky-gradient-accent: linear-gradient(135deg, #d4a017 0%, #e4b83f 100%);
+    --lucky-gradient-brand-soft: linear-gradient(135deg, rgb(139 92 246 / 0.15) 0%, rgb(109 52 191 / 0.05) 100%);
+
     --lucky-red: var(--lucky-accent);
     --lucky-bg-primary: var(--lucky-surface-canvas);
     --lucky-bg-secondary: var(--lucky-surface-sidebar);
@@ -477,4 +538,20 @@
     outline: none;
     box-shadow: var(--lucky-shadow-focus);
   }
+
+  .lucky-gradient-text {
+    background: linear-gradient(135deg, #8b5cf6 0%, #d4a017 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .lucky-header-accent-line {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent 0%, rgb(139 92 246 / 0.6) 30%, rgb(212 160 23 / 0.4) 70%, transparent 100%);
+  }
 }
diff --git a/packages/frontend/src/pages/Login.tsx b/packages/frontend/src/pages/Login.tsx
index 05b0307fa..f81ba0b5d 100644
--- a/packages/frontend/src/pages/Login.tsx
+++ b/packages/frontend/src/pages/Login.tsx
@@ -17,8 +17,8 @@ export default function LoginPage() {
     return (
         <div className='lucky-shell relative min-h-screen overflow-hidden px-4 py-8 md:px-8'>
             <div className='mx-auto grid min-h-[calc(100vh-4rem)] w-full max-w-6xl items-center gap-10 lg:grid-cols-[1.1fr_0.9fr]'>
-                <section className='space-y-7'>
-                    <div className='inline-flex items-center gap-2 rounded-full border border-lucky-border bg-lucky-bg-secondary/80 px-3 py-1'>
+                <section className='space-y-7 animate-[fade-up_0.4s_ease-out]' style={{ animationFillMode: 'both' }}>
+                    <div className='inline-flex items-center gap-2 rounded-full border border-lucky-border bg-lucky-bg-secondary/80 px-3 py-1 shadow-[0_0_12px_rgb(212_160_23/0.1)]'>
                         <Sparkles className='h-3.5 w-3.5 text-lucky-accent' />
                         <span className='type-body-sm text-lucky-text-secondary'>
                             Neo-editorial command center
@@ -27,13 +27,16 @@ export default function LoginPage() {
 
                     <div className='space-y-3'>
                         <div className='flex items-center gap-3'>
-                            <img
-                                src='/lucky-logo.png'
-                                alt='Lucky'
-                                className='h-16 w-16 rounded-2xl object-cover ring-1 ring-lucky-border'
-                            />
+                            <div className='relative'>
+                                <div className='absolute -inset-1 rounded-2xl bg-gradient-to-br from-purple-500/30 to-yellow-500/20 blur-md' aria-hidden='true' />
+                                <img
+                                    src='/lucky-logo.png'
+                                    alt='Lucky'
+                                    className='relative h-16 w-16 rounded-2xl object-cover ring-1 ring-lucky-border-strong'
+                                />
+                            </div>
                             <div>
-                                <h1 className='type-display text-lucky-text-primary'>Lucky</h1>
+                                <h1 className='type-display lucky-gradient-text'>Lucky</h1>
                                 <p className='type-body text-lucky-text-secondary'>Discord Bot Management</p>
                             </div>
                         </div>
@@ -46,22 +49,41 @@ export default function LoginPage() {
                     </div>
 
                     <div className='grid gap-3 sm:grid-cols-3'>
-                        <div className='surface-panel px-4 py-4'>
-                            <p className='type-h2 text-lucky-text-primary'>32+</p>
-                            <p className='type-body-sm text-lucky-text-tertiary'>Modules</p>
-                        </div>
-                        <div className='surface-panel px-4 py-4'>
-                            <p className='type-h2 text-lucky-text-primary'>100+</p>
-                            <p className='type-body-sm text-lucky-text-tertiary'>Commands</p>
-                        </div>
-                        <div className='surface-panel px-4 py-4'>
-                            <p className='type-h2 text-lucky-text-primary'>24/7</p>
-                            <p className='type-body-sm text-lucky-text-tertiary'>Uptime</p>
-                        </div>
+                        {[
+                            { value: '32+', label: 'Modules', tone: 'brand' as const },
+                            { value: '100+', label: 'Commands', tone: 'accent' as const },
+                            { value: '24/7', label: 'Uptime', tone: 'success' as const },
+                        ].map(({ value, label, tone }, i) => (
+                            <div
+                                key={label}
+                                className='surface-panel group px-4 py-4 overflow-hidden relative'
+                                style={{ animationDelay: `${i * 80}ms`, animationFillMode: 'both' }}
+                            >
+                                <div
+                                    className={`pointer-events-none absolute inset-0 rounded-xl opacity-40 bg-gradient-to-br ${
+                                        tone === 'brand' ? 'from-purple-500/8 to-transparent' :
+                                        tone === 'accent' ? 'from-yellow-500/8 to-transparent' :
+                                        'from-green-500/8 to-transparent'
+                                    }`}
+                                    aria-hidden='true'
+                                />
+                                <p className={`type-h2 relative ${
+                                    tone === 'brand' ? 'text-purple-300' :
+                                    tone === 'accent' ? 'text-yellow-300' :
+                                    'text-green-300'
+                                }`}>
+                                    {value}
+                                </p>
+                                <p className='type-body-sm relative text-lucky-text-tertiary'>{label}</p>
+                            </div>
+                        ))}
                     </div>
                 </section>
 
-                <section className='surface-card space-y-6 p-6 md:p-8'>
+                <section
+                    className='surface-card space-y-6 p-6 md:p-8 animate-[fade-up_0.4s_ease-out]'
+                    style={{ animationDelay: '100ms', animationFillMode: 'both' }}
+                >
                     <div className='space-y-2'>
                         <p className='type-meta text-lucky-text-tertiary'>Authentication</p>
                         <h3 className='type-h2 text-lucky-text-primary'>Secure Discord sign-in</h3>
@@ -74,16 +96,17 @@ export default function LoginPage() {
                     <Button
                         onClick={login}
                         disabled={isLoading}
-                        className='lucky-focus-visible h-14 w-full rounded-xl bg-lucky-accent text-black hover:bg-lucky-accent-soft'
+                        variant='accent'
+                        className='lucky-focus-visible h-14 w-full rounded-xl text-sm font-semibold'
                     >
                         {isLoading ? (
                             <>
-                                <Loader2 className='mr-2 h-5 w-5 animate-spin' />
+                                <Loader2 className='h-5 w-5 animate-spin' />
                                 Connecting...
                             </>
                         ) : (
                             <>
-                                <svg className='mr-2 h-5 w-5' viewBox='0 0 24 24' fill='currentColor'>
+                                <svg className='h-5 w-5' viewBox='0 0 24 24' fill='currentColor'>
                                     <path d='M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028zM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38z' />
                                 </svg>
                                 Login with Discord
@@ -92,18 +115,21 @@ export default function LoginPage() {
                     </Button>
 
                     <div className='grid gap-3 sm:grid-cols-3'>
-                        <div className='rounded-xl border border-lucky-border bg-lucky-bg-secondary/80 p-3'>
-                            <ShieldCheck className='h-4 w-4 text-lucky-success' />
-                            <p className='mt-2 type-body-sm text-lucky-text-primary'>OAuth secured</p>
-                        </div>
-                        <div className='rounded-xl border border-lucky-border bg-lucky-bg-secondary/80 p-3'>
-                            <Zap className='h-4 w-4 text-lucky-accent' />
-                            <p className='mt-2 type-body-sm text-lucky-text-primary'>Fast setup</p>
-                        </div>
-                        <div className='rounded-xl border border-lucky-border bg-lucky-bg-secondary/80 p-3'>
-                            <Sparkles className='h-4 w-4 text-lucky-brand' />
-                            <p className='mt-2 type-body-sm text-lucky-text-primary'>Live controls</p>
-                        </div>
+                        {[
+                            { icon: ShieldCheck, color: 'text-lucky-success', glow: 'rgb(34_197_94/0.3)', label: 'OAuth secured' },
+                            { icon: Zap, color: 'text-lucky-accent', glow: 'rgb(212_160_23/0.3)', label: 'Fast setup' },
+                            { icon: Sparkles, color: 'text-lucky-brand', glow: 'rgb(139_92_246/0.3)', label: 'Live controls' },
+                        ].map(({ icon: Icon, color, glow, label }) => (
+                            <div
+                                key={label}
+                                className='group rounded-xl border border-lucky-border bg-lucky-bg-secondary/80 p-3 transition-all duration-200 hover:border-lucky-border-strong'
+                            >
+                                <Icon
+                                    className={`h-4 w-4 ${color} transition-all duration-200 group-hover:drop-shadow-[0_0_6px_${glow}]`}
+                                />
+                                <p className='mt-2 type-body-sm text-lucky-text-primary'>{label}</p>
+                            </div>
+                        ))}
                     </div>
                 </section>
             </div>