feat: Add onboarding tutorial and improved empty states

Onboarding Tutorial:
- 5-step walkthrough for new users
- Welcome, Scan, Taste, Sessions, Ready steps
- Skippable, stores completion in localStorage
- Beautiful full-screen overlay with animations

Empty States:
- SessionList: Visual empty state with icon and description
- BuddyList: Visual empty state with icon and description
- Reusable EmptyState component ready for more usage

Layout: Added OnboardingTutorial and CookieBanner
This commit is contained in:
2025-12-26 21:43:26 +01:00
parent 82531c5aff
commit f21b2738ad
5 changed files with 178 additions and 5 deletions

View File

@@ -182,8 +182,14 @@ export default function SessionList() {
<Loader2 size={24} className="animate-spin" />
</div>
) : sessions.length === 0 ? (
<div className="text-center py-8 text-zinc-600 text-xs font-bold">
{t('session.noSessions')}
<div className="text-center py-8">
<div className="w-14 h-14 mx-auto rounded-2xl bg-zinc-800/50 flex items-center justify-center mb-4">
<Calendar size={24} className="text-zinc-500" />
</div>
<p className="text-sm font-bold text-zinc-400 mb-1">Keine Sessions</p>
<p className="text-xs text-zinc-600 max-w-[200px] mx-auto">
Erstelle eine Tasting-Session um mehrere Whiskys zu vergleichen
</p>
</div>
) : (
<div className="space-y-3">