feat(profile): let users design their public profile

src/pages/Dashboard.jsx

@@ -21,11 +21,10 @@ import useForceSync from '../hooks/useForceSync.js';
 import {formatPlaytime} from '../utils/games.js';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 import PageContainer from '../components/PageContainer.jsx';
-import HeroArt from '../components/HeroArt.jsx';
+import HeroBanner from '../components/HeroBanner.jsx';
 import SteamAvatar from '../components/SteamAvatar.jsx';
 import useSteamProfile from '../hooks/useSteamProfile.js';
 import useUserStats from '../hooks/useUserStats.js';
-import {cn} from '@/lib/utils';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import {apiFetch} from '../utils/api.js';
 import {hasSession} from '../utils/auth.js';
@@ -246,12 +245,8 @@ const Dashboard = () => {
     return (
         <PageContainer className="p-4 md:p-8 space-y-6">
             <Card className="relative overflow-hidden p-6 md:p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-                {/* A picked game, else the game played most in the last two weeks; the gradient keeps the text readable. */}
-                <HeroArt key={bannerAppid} appid={bannerAppid}
-                         className="pointer-events-none absolute inset-0 size-full object-cover opacity-60"/>
-                <div className={cn('pointer-events-none absolute inset-0', bannerAppid
-                    ? 'bg-gradient-to-r from-card via-card/85 to-card/60'
-                    : 'bg-gradient-to-br from-primary/15 via-transparent to-transparent')}/>
+                {/* A picked game, else the game played most in the last two weeks. */}
+                <HeroBanner appid={bannerAppid}/>
                 <div className="relative flex min-w-0 items-center gap-4">
                     {/* The slot is there before the avatar loads, so the title does not jump. */}
                     {hasSteamId && (