feat(dashboard): polish header logo, stat cards, calendar and animations

- Replace gravl icon text with Logo component in dashboard header
- Stat cards: gradient depth + per-card colour accent (orange/green/amber)
- Calendar today: pulsing glow animation; workout days get subtle brand tint
- Arrow nudge animation on today-workout-card hover
- Section stagger fade-in on page load (calendar → coach → stats)
- Larger stat-value font (3xl) with tighter letter-spacing
- Consistent gap spacing in dashboard-main (space-6)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 23:22:34 +01:00
parent ebb6a28c5a
commit 718b210a14
2 changed files with 150 additions and 1 deletions
+5 -1
View File
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react'
import { useAuth } from '../context/AuthContext'
import { Icon, getActivityIconName } from '../components/Icons'
import Logo from '../components/Logo'
const API_URL = '/api'
@@ -90,7 +91,10 @@ function Dashboard({ onStartWorkout, onNavigate }) {
<div className="dashboard">
<header className="dashboard-header">
<div className="header-top">
<h1 className="brand-title"><Icon name="gravl" size={22} /> Gravl</h1>
<h1 className="brand-title">
<Logo />
<span className="brand-name">Gravl</span>
</h1>
<nav className="nav-menu">
<button className="nav-btn active"><Icon name="home" size={18} /></button>
<button className="nav-btn" onClick={() => onNavigate('progress')}><Icon name="chart" size={18} /></button>