style: premium Dashboard redesign inspired by Stitch mockups
Hero Card: - Dramatic gradient background (navy → deep blue) - Radial glow effect behind team flags (stadium atmosphere) - LED kickoff time with golden glow - Larger flag icons (72px) as app-icon style boxes - Countdown as golden badge with pulsing dot - Bigger CTA button with gradient and shadow Bottom Nav: - Filled/solid SVG icons (home, soccer ball, trophy, person) instead of Lucide outline icons — more premium feel Nudges: - Icon + text layout with hover animation - Better spacing and visual hierarchy Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { Home, Trophy, User, Swords } from 'lucide-react';
|
||||
import styles from './BottomNav.module.css';
|
||||
|
||||
export default function BottomNav() {
|
||||
@@ -9,19 +8,19 @@ export default function BottomNav() {
|
||||
return (
|
||||
<nav className={styles.bottomNav}>
|
||||
<NavLink to="/" end className={linkClass}>
|
||||
<Home size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8-1.4 1.3L18 10.8V20h-5v-6H11v6H6v-9.2l-1.6 1.5L3 11l9-8z"/></svg>
|
||||
<span>Home</span>
|
||||
</NavLink>
|
||||
<NavLink to="/spiele" className={linkClass}>
|
||||
<Swords size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 3.3l1.35-.95c1.82.56 3.37 1.76 4.38 3.34l-.39 1.34-1.35.46L13 6.7V5.3zm-3.35-.95L11 5.3v1.4L7.01 9.49l-1.35-.46-.39-1.34a9.972 9.972 0 014.38-3.34zM7.08 17.11l-1.14.1C4.73 15.81 4 13.99 4 12c0-.12.01-.23.02-.35l1-.73 1.38.48 1.46 4.34-.78 1.37zm7.42 2.48c-.79.26-1.63.41-2.5.41s-1.71-.15-2.5-.41l-.69-1.49.64-1.1h5.11l.64 1.11-.7 1.48zM14.27 15H9.73l-1.35-4.02L12 8.44l3.63 2.54L14.27 15zm3.79 2.21l-1.14-.1-.78-1.37 1.46-4.34 1.38-.48 1 .73c.01.12.02.23.02.35 0 1.99-.73 3.81-1.94 5.21z"/></svg>
|
||||
<span>Spiele</span>
|
||||
</NavLink>
|
||||
<NavLink to="/rangliste" className={linkClass}>
|
||||
<Trophy size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>
|
||||
<span>Rangliste</span>
|
||||
</NavLink>
|
||||
<NavLink to="/profil" className={linkClass}>
|
||||
<User size={20} />
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
|
||||
<span>Profil</span>
|
||||
</NavLink>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user