Added more details and a landing page

src/App.jsx

@@ -9,6 +9,7 @@ import Dashboard from "./pages/Dashboard.jsx";
 import RegistrationPage from './pages/RegistrationPage.jsx';
 import SettingsPage from './pages/SettingsPage.jsx';
 import GameLibrary from './pages/GameLibrary.jsx';
+import GameDetail from './pages/GameDetail.jsx';
 import {usePreferences} from './context/PreferencesContext.jsx';
 
 function App() {
@@ -80,6 +81,7 @@ function App() {
                     <Route path="/register" element={<RegistrationPage/>}/>
                     <Route path="/dashboard" element={<Dashboard/>}/>
                     <Route path="/library" element={<GameLibrary/>}/>
+                    <Route path="/library/:appid" element={<GameDetail/>}/>
                     <Route path="/settings" element={<SettingsPage/>}/>
                     <Route path="/impressum" element={<ImprintPage/>}/>
                 </Routes>

src/components/StatCard.jsx

@@ -0,0 +1,40 @@
+import {useEffect, useState} from 'react';
+
+function useCountUp(target, durationMs = 1600) {
+    const [value, setValue] = useState(0);
+    useEffect(() => {
+        const safeTarget = typeof target === 'number' && Number.isFinite(target) ? target : 0;
+        if (safeTarget === 0) {
+            setValue(0);
+            return;
+        }
+        let raf;
+        let start;
+        const step = (ts) => {
+            if (start === undefined) start = ts;
+            const progress = Math.min((ts - start) / durationMs, 1);
+            setValue(Math.floor(progress * safeTarget));
+            if (progress < 1) raf = requestAnimationFrame(step);
+        };
+        raf = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(raf);
+    }, [target, durationMs]);
+    return value;
+}
+
+export default function StatCard({label, value, icon, suffix}) {
+    const animated = useCountUp(value);
+    return (
+        <div className="flex flex-col items-center justify-center p-6 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
+            {icon && (
+                <i className={`mdi ${icon} text-3xl text-blue-600 dark:text-blue-400 mb-2`}></i>
+            )}
+            <div className="text-4xl font-black text-slate-900 dark:text-white tabular-nums">
+                {animated.toLocaleString()}{suffix ?? ''}
+            </div>
+            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 mt-2 text-center">
+                {label}
+            </div>
+        </div>
+    );
+}

src/hooks/usePublicStats.js

@@ -0,0 +1,35 @@
+import {useEffect, useState} from 'react';
+
+export default function usePublicStats() {
+    const [data, setData] = useState({auth: null, core: null});
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const [authRes, coreRes] = await Promise.all([
+                    fetch(`${import.meta.env.VITE_API_URL}/api/stats/public`),
+                    fetch(`${import.meta.env.VITE_CORE_API_URL}/api/stats/public`),
+                ]);
+                if (cancelled) return;
+                const auth = authRes.ok ? await authRes.json() : null;
+                const core = coreRes.ok ? await coreRes.json() : null;
+                if (!cancelled) setData({auth, core});
+            } catch (err) {
+                if (!cancelled) {
+                    console.error('public stats error:', err);
+                    setError(err);
+                }
+            } finally {
+                if (!cancelled) setIsLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    return {data, isLoading, error};
+}

src/pages/GameDetail.jsx

@@ -0,0 +1,258 @@
+import {useEffect, useMemo, useState} from 'react';
+import {Link, useNavigate, useParams} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+
+const iconUrl = (appid, hash) =>
+    hash
+        ? `https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/${appid}/${hash}.jpg`
+        : null;
+
+const formatPlaytime = (minutes) => {
+    if (!minutes || minutes <= 0) return '0h';
+    const hours = minutes / 60;
+    return hours >= 10 ? `${Math.round(hours)}h` : `${hours.toFixed(1)}h`;
+};
+
+const formatUnlockedAt = (instant, locale) => {
+    if (!instant) return '';
+    try {
+        return new Date(instant).toLocaleDateString(locale, {year: 'numeric', month: 'short', day: 'numeric'});
+    } catch {
+        return '';
+    }
+};
+
+export default function GameDetail() {
+    const {t, i18n} = useTranslation();
+    const {appid} = useParams();
+    const navigate = useNavigate();
+
+    const [data, setData] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        const token = localStorage.getItem('tbp_jwt');
+        if (!token) {
+            navigate('/login');
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games/${appid}`;
+                const response = await fetch(url, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json',
+                    },
+                });
+                if (cancelled) return;
+                if (response.status === 401) {
+                    localStorage.removeItem('tbp_jwt');
+                    navigate('/login');
+                    return;
+                }
+                if (response.status === 404) {
+                    setError(t('GAME_DETAIL.NOT_FOUND'));
+                    return;
+                }
+                if (!response.ok) {
+                    setError(t('GAME_DETAIL.ERROR_LOAD'));
+                    return;
+                }
+                const json = await response.json();
+                setData(json);
+            } catch (err) {
+                if (!cancelled) {
+                    console.error('GameDetail load error:', err);
+                    setError(t('INFO.ERROR.NETWORK_FAILURE'));
+                }
+            } finally {
+                if (!cancelled) setIsLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [appid, navigate, t]);
+
+    const sortedAchievements = useMemo(() => {
+        if (!data?.achievements) return [];
+        return [...data.achievements].sort((a, b) => {
+            if (a.unlocked !== b.unlocked) return a.unlocked ? -1 : 1;
+            if (a.unlocked && b.unlocked) {
+                return (b.unlockedAt ?? '').localeCompare(a.unlockedAt ?? '');
+            }
+            return (a.displayName ?? a.apiName).localeCompare(b.displayName ?? b.apiName);
+        });
+    }, [data]);
+
+    return (
+        <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-8">
+            <div className="max-w-4xl mx-auto space-y-6">
+                <button
+                    type="button"
+                    onClick={() => navigate(-1)}
+                    className="inline-flex items-center gap-2 text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors"
+                >
+                    <i className="mdi mdi-arrow-left"></i> {t('GAME_DETAIL.BACK')}
+                </button>
+
+                {isLoading && (
+                    <div className="text-center text-slate-600 dark:text-slate-300 py-12">
+                        {t('GAME_DETAIL.LOADING')}
+                    </div>
+                )}
+
+                {error && !isLoading && (
+                    <div className="text-center text-red-500 py-12">
+                        {error}
+                        <div className="mt-4">
+                            <Link to="/library" className="text-blue-500 hover:underline">
+                                {t('GAME_DETAIL.BACK_TO_LIBRARY')}
+                            </Link>
+                        </div>
+                    </div>
+                )}
+
+                {!isLoading && !error && data && (
+                    <>
+                        <header className="flex items-center gap-4 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
+                            {iconUrl(data.appid, data.imgIconUrl) ? (
+                                <img
+                                    src={iconUrl(data.appid, data.imgIconUrl)}
+                                    alt=""
+                                    className="w-16 h-16 rounded"
+                                    loading="lazy"
+                                />
+                            ) : (
+                                <div className="w-16 h-16 rounded bg-slate-200 dark:bg-slate-700"/>
+                            )}
+                            <div className="flex-1">
+                                <h1 className="text-2xl font-bold text-slate-900 dark:text-white truncate">
+                                    {data.name ?? `App ${data.appid}`}
+                                </h1>
+                                <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
+                                    {t('GAME_DETAIL.PLAYTIME', {time: formatPlaytime(data.playtimeMinutes)})}
+                                </p>
+                            </div>
+                            <a
+                                href={`https://store.steampowered.com/app/${data.appid}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline whitespace-nowrap"
+                            >
+                                {t('GAME_DETAIL.OPEN_IN_STEAM')} <i className="mdi mdi-open-in-new"></i>
+                            </a>
+                        </header>
+
+                        {!data.hasAchievements && (
+                            <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 text-center text-slate-500 dark:text-slate-400">
+                                {t('GAME_DETAIL.NO_ACHIEVEMENTS')}
+                            </div>
+                        )}
+
+                        {data.hasAchievements && !data.statsVisible && (
+                            <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 text-center text-slate-500 dark:text-slate-400">
+                                <i className="mdi mdi-shield-lock text-3xl block mb-2"></i>
+                                {t('GAME_DETAIL.STATS_HIDDEN')}
+                            </div>
+                        )}
+
+                        {data.hasAchievements && data.statsVisible && (
+                            <>
+                                <section className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 space-y-4">
+                                    <div className="flex items-baseline justify-between">
+                                        <h2 className="text-lg font-bold text-slate-900 dark:text-white">
+                                            {t('GAME_DETAIL.ACHIEVEMENTS')}
+                                        </h2>
+                                        <span className="text-sm text-slate-500 dark:text-slate-400 tabular-nums">
+                                            {data.achievementsUnlocked} / {data.achievementsTotal}
+                                            {' · '}
+                                            {data.completionPercent}%
+                                        </span>
+                                    </div>
+                                    <div className="w-full h-3 rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden">
+                                        <div
+                                            className="h-full bg-blue-500 transition-all"
+                                            style={{width: `${Math.min(100, data.completionPercent)}%`}}
+                                        />
+                                    </div>
+                                    <div className="grid grid-cols-3 gap-3 text-center text-sm">
+                                        <div className="p-3 rounded-lg bg-slate-50 dark:bg-slate-900">
+                                            <div className="text-xl font-bold text-slate-900 dark:text-white tabular-nums">
+                                                {data.achievementsUnlocked}
+                                            </div>
+                                            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                                                {t('GAME_DETAIL.UNLOCKED')}
+                                            </div>
+                                        </div>
+                                        <div className="p-3 rounded-lg bg-slate-50 dark:bg-slate-900">
+                                            <div className="text-xl font-bold text-slate-900 dark:text-white tabular-nums">
+                                                {data.achievementsRemaining}
+                                            </div>
+                                            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                                                {t('GAME_DETAIL.REMAINING')}
+                                            </div>
+                                        </div>
+                                        <div className="p-3 rounded-lg bg-slate-50 dark:bg-slate-900">
+                                            <div className="text-xl font-bold text-slate-900 dark:text-white tabular-nums">
+                                                {data.completionPercent}%
+                                            </div>
+                                            <div className="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                                                {t('GAME_DETAIL.COMPLETION')}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </section>
+
+                                <section className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
+                                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                        {sortedAchievements.map((a) => (
+                                            <li
+                                                key={a.apiName}
+                                                className={`flex items-start gap-3 p-3 rounded-lg border ${
+                                                    a.unlocked
+                                                        ? 'border-blue-200 dark:border-blue-700 bg-blue-50/50 dark:bg-blue-900/20'
+                                                        : 'border-slate-200 dark:border-slate-700 opacity-70'
+                                                }`}
+                                            >
+                                                {a.unlocked ? (
+                                                    a.iconUrl
+                                                        ? <img src={a.iconUrl} alt="" className="w-12 h-12 rounded"/>
+                                                        : <div className="w-12 h-12 rounded bg-slate-200 dark:bg-slate-700"/>
+                                                ) : (
+                                                    a.iconGrayUrl
+                                                        ? <img src={a.iconGrayUrl} alt="" className="w-12 h-12 rounded grayscale"/>
+                                                        : <div className="w-12 h-12 rounded bg-slate-200 dark:bg-slate-700"/>
+                                                )}
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="font-semibold text-slate-900 dark:text-white truncate">
+                                                        {a.displayName ?? a.apiName}
+                                                    </div>
+                                                    {a.description && (
+                                                        <div className="text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
+                                                            {a.description}
+                                                        </div>
+                                                    )}
+                                                    {a.unlocked && a.unlockedAt && (
+                                                        <div className="text-xs text-blue-600 dark:text-blue-400 mt-1 tabular-nums">
+                                                            {formatUnlockedAt(a.unlockedAt, i18n.language)}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </section>
+                            </>
+                        )}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

src/pages/GameLibrary.jsx

@@ -1,11 +1,18 @@
 import {useCallback, useEffect, useState} from 'react';
-import {useNavigate, useSearchParams} from 'react-router-dom';
+import {Link, useNavigate, useSearchParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import useLibrarySync from '../hooks/useLibrarySync.js';
 import SyncStatusBadge from '../components/SyncStatusBadge.jsx';
 
 const PAGE_SIZES = [20, 40, 80];
 const DEFAULT_SIZE = 20;
+const DEFAULT_SORT = 'playtimeMinutes,desc';
+const SORT_OPTIONS = [
+    {value: 'playtimeMinutes,desc', labelKey: 'LIBRARY.SORT_PLAYTIME_DESC'},
+    {value: 'playtimeMinutes,asc', labelKey: 'LIBRARY.SORT_PLAYTIME_ASC'},
+    {value: 'lastSeenAt,desc', labelKey: 'LIBRARY.SORT_LAST_SEEN'},
+    {value: 'firstSeenAt,desc', labelKey: 'LIBRARY.SORT_FIRST_SEEN'},
+];
 
 const iconUrl = (appid, hash) =>
     hash
@@ -26,6 +33,9 @@ export default function GameLibrary() {
     const page = Math.max(0, parseInt(searchParams.get('page') ?? '0', 10) || 0);
     const sizeParam = parseInt(searchParams.get('size') ?? String(DEFAULT_SIZE), 10);
     const size = PAGE_SIZES.includes(sizeParam) ? sizeParam : DEFAULT_SIZE;
+    const sortParam = searchParams.get('sort') ?? DEFAULT_SORT;
+    const sort = SORT_OPTIONS.some((o) => o.value === sortParam) ? sortParam : DEFAULT_SORT;
+    const librarySearch = searchParams.toString();
 
     const [data, setData] = useState({content: [], page: 0, size, totalElements: 0, totalPages: 0});
     const [isLoading, setIsLoading] = useState(true);
@@ -40,7 +50,7 @@ export default function GameLibrary() {
         setIsLoading(true);
         setError(null);
         try {
-            const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?page=${page}&size=${size}`;
+            const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?page=${page}&size=${size}&sort=${encodeURIComponent(sort)}`;
             const response = await fetch(url, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
@@ -67,7 +77,7 @@ export default function GameLibrary() {
         } finally {
             setIsLoading(false);
         }
-    }, [navigate, page, size, t]);
+    }, [navigate, page, size, sort, t]);
 
     useEffect(() => {
         load();
@@ -90,11 +100,50 @@ export default function GameLibrary() {
         updateParams({size: event.target.value, page: 0});
     };
 
+    const onSortChange = (event) => {
+        updateParams({sort: event.target.value, page: 0});
+    };
+
     const goToPage = (target) => {
         if (target < 0 || target >= data.totalPages) return;
         updateParams({page: target});
     };
 
+    const [syncBusy, setSyncBusy] = useState(false);
+    const [syncMessage, setSyncMessage] = useState(null);
+
+    const triggerSync = async () => {
+        const token = localStorage.getItem('tbp_jwt');
+        if (!token) {
+            navigate('/login');
+            return;
+        }
+        setSyncBusy(true);
+        setSyncMessage(null);
+        try {
+            const response = await fetch(`${import.meta.env.VITE_CORE_API_URL}/api/library/sync`, {
+                method: 'POST',
+                headers: {'Authorization': `Bearer ${token}`},
+            });
+            if (response.status === 429) {
+                const json = await response.json().catch(() => ({}));
+                setSyncMessage(t('LIBRARY.SYNC_COOLDOWN', {seconds: json.retryAfterSeconds ?? 60}));
+                return;
+            }
+            if (!response.ok) {
+                setSyncMessage(t('LIBRARY.SYNC_FAILED'));
+                return;
+            }
+            setSyncMessage(t('LIBRARY.SYNC_STARTED'));
+            setTimeout(load, 4000);
+        } catch (err) {
+            console.error('sync trigger error:', err);
+            setSyncMessage(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setSyncBusy(false);
+        }
+    };
+
     return (
         <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-8">
             <div className="max-w-4xl mx-auto space-y-6">
@@ -103,24 +152,53 @@ export default function GameLibrary() {
                         <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
                             {t('LIBRARY.TITLE')}
                         </h1>
-                        <SyncStatusBadge
-                            status={sync.status}
-                            lastSyncedAt={sync.lastSyncedAt}
-                            isRunning={sync.isRunning}
-                        />
+                        <div className="flex items-center gap-3 flex-wrap">
+                            <SyncStatusBadge
+                                status={sync.status}
+                                lastSyncedAt={sync.lastSyncedAt}
+                                isRunning={sync.isRunning}
+                            />
+                            <button
+                                type="button"
+                                onClick={triggerSync}
+                                disabled={syncBusy || sync.isRunning}
+                                className="inline-flex items-center gap-1 text-xs font-bold text-blue-600 dark:text-blue-400 hover:text-blue-500 disabled:opacity-50"
+                            >
+                                <i className={`mdi mdi-sync ${syncBusy || sync.isRunning ? 'mdi-spin' : ''}`}></i>
+                                {t('LIBRARY.RESYNC')}
+                            </button>
+                            {syncMessage && (
+                                <span className="text-xs text-slate-500 dark:text-slate-400">{syncMessage}</span>
+                            )}
+                        </div>
                     </div>
-                    <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
-                        <label htmlFor="pageSize">{t('LIBRARY.PER_PAGE')}</label>
-                        <select
-                            id="pageSize"
-                            value={size}
-                            onChange={onSizeChange}
-                            className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
-                        >
-                            {PAGE_SIZES.map((n) => (
-                                <option key={n} value={n}>{n}</option>
-                            ))}
-                        </select>
+                    <div className="flex items-center gap-4 text-sm text-slate-600 dark:text-slate-300 flex-wrap">
+                        <div className="flex items-center gap-2">
+                            <label htmlFor="sort">{t('LIBRARY.SORT_BY')}</label>
+                            <select
+                                id="sort"
+                                value={sort}
+                                onChange={onSortChange}
+                                className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
+                            >
+                                {SORT_OPTIONS.map((opt) => (
+                                    <option key={opt.value} value={opt.value}>{t(opt.labelKey)}</option>
+                                ))}
+                            </select>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <label htmlFor="pageSize">{t('LIBRARY.PER_PAGE')}</label>
+                            <select
+                                id="pageSize"
+                                value={size}
+                                onChange={onSizeChange}
+                                className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
+                            >
+                                {PAGE_SIZES.map((n) => (
+                                    <option key={n} value={n}>{n}</option>
+                                ))}
+                            </select>
+                        </div>
                     </div>
                 </div>
 
@@ -145,24 +223,31 @@ export default function GameLibrary() {
                         {data.content.map((g) => {
                             const icon = iconUrl(g.appid, g.imgIconUrl);
                             return (
-                                <li key={g.appid} className="flex items-center gap-4 px-4 py-3">
-                                    {icon ? (
-                                        <img
-                                            src={icon}
-                                            alt=""
-                                            className="w-8 h-8 rounded"
-                                            loading="lazy"
-                                            onError={(e) => { e.currentTarget.style.visibility = 'hidden'; }}
-                                        />
-                                    ) : (
-                                        <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
-                                    )}
-                                    <span className="flex-1 text-slate-900 dark:text-white truncate">
-                                        {g.name ?? `App ${g.appid}`}
-                                    </span>
-                                    <span className="text-sm text-slate-500 dark:text-slate-400 tabular-nums">
-                                        {formatPlaytime(g.playtimeMinutes)}
-                                    </span>
+                                <li key={g.appid}>
+                                    <Link
+                                        to={`/library/${g.appid}`}
+                                        state={{librarySearch}}
+                                        className="flex items-center gap-4 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
+                                    >
+                                        {icon ? (
+                                            <img
+                                                src={icon}
+                                                alt=""
+                                                className="w-8 h-8 rounded"
+                                                loading="lazy"
+                                                onError={(e) => { e.currentTarget.style.visibility = 'hidden'; }}
+                                            />
+                                        ) : (
+                                            <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
+                                        )}
+                                        <span className="flex-1 text-slate-900 dark:text-white truncate">
+                                            {g.name ?? `App ${g.appid}`}
+                                        </span>
+                                        <span className="text-sm text-slate-500 dark:text-slate-400 tabular-nums">
+                                            {formatPlaytime(g.playtimeMinutes)}
+                                        </span>
+                                        <i className="mdi mdi-chevron-right text-slate-400 dark:text-slate-500"></i>
+                                    </Link>
                                 </li>
                             );
                         })}

src/pages/LandingPage.jsx

@@ -1,8 +1,20 @@
-import {useTranslation} from 'react-i18next';
+import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
+import StatCard from '../components/StatCard.jsx';
+
+import usePublicStats from '../hooks/usePublicStats.js';
+
+const iconUrl = (appid, hash) =>
+    hash
+        ? `https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/${appid}/${hash}.jpg`
+        : null;
 
 export default function LandingPage() {
     const {t} = useTranslation();
+    const {data, isLoading} = usePublicStats();
+
+    const auth = data.auth;
+    const core = data.core;
 
     return (
         <div className="grow flex flex-col items-center p-4 md:p-8">
@@ -17,6 +29,112 @@ export default function LandingPage() {
                     {t('MAIN.GET_STARTED')}
                 </Link>
             </section>
+
+            <section className="w-full max-w-5xl mb-16">
+                <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-6">
+                    {t('LANDING.STATS_TITLE')}
+                </h2>
+                {isLoading ? (
+                    <div className="text-center text-slate-500 dark:text-slate-400">
+                        {t('LANDING.STATS_LOADING')}
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        <StatCard
+                            label={t('LANDING.TOTAL_USERS')}
+                            value={auth?.totalUsers ?? 0}
+                            icon="mdi-account-group"
+                        />
+                        <StatCard
+                            label={t('LANDING.STEAM_LINKED')}
+                            value={auth?.usersWithSteamLinked ?? 0}
+                            icon="mdi-steam"
+                        />
+                        <StatCard
+                            label={t('LANDING.TOTAL_GAMES')}
+                            value={core?.totalLibraryEntries ?? 0}
+                            icon="mdi-controller"
+                        />
+                        <StatCard
+                            label={t('LANDING.GAMES_PLAYED')}
+                            value={core?.totalGamesPlayed ?? 0}
+                            icon="mdi-gamepad-variant"
+                        />
+                        <StatCard
+                            label={t('LANDING.DISTINCT_GAMES')}
+                            value={core?.totalDistinctGames ?? 0}
+                            icon="mdi-shape"
+                        />
+                        <StatCard
+                            label={t('LANDING.TOTAL_PLAYTIME_DAYS')}
+                            value={core?.totalPlaytimeDays ?? 0}
+                            icon="mdi-clock-outline"
+                            suffix={` ${t('LANDING.DAYS_SUFFIX')}`}
+                        />
+                        <StatCard
+                            label={t('LANDING.BIGGEST_LIBRARY')}
+                            value={core?.biggestLibrary ?? 0}
+                            icon="mdi-bookshelf"
+                        />
+                        <StatCard
+                            label={t('LANDING.BIGGEST_BACKLOG')}
+                            value={core?.biggestBacklog ?? 0}
+                            icon="mdi-archive"
+                        />
+                    </div>
+                )}
+
+                {core?.topPlayedGames?.length > 0 && (
+                    <div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
+                            <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-4">
+                                {t('LANDING.TOP_PLAYED')}
+                            </h3>
+                            <ol className="space-y-2">
+                                {core.topPlayedGames.map((g, idx) => (
+                                    <li key={g.appid} className="flex items-center gap-3">
+                                        <span className="w-6 text-sm font-bold text-slate-400 tabular-nums">{idx + 1}</span>
+                                        {iconUrl(g.appid, g.imgIconUrl) ? (
+                                            <img src={iconUrl(g.appid, g.imgIconUrl)} alt="" className="w-8 h-8 rounded"/>
+                                        ) : (
+                                            <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
+                                        )}
+                                        <span className="flex-1 truncate text-slate-900 dark:text-white">
+                                            {g.name ?? `App ${g.appid}`}
+                                        </span>
+                                        <span className="text-xs text-slate-500 dark:text-slate-400 tabular-nums">
+                                            {Math.round(g.value / 60).toLocaleString()}h
+                                        </span>
+                                    </li>
+                                ))}
+                            </ol>
+                        </div>
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
+                            <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-4">
+                                {t('LANDING.TOP_OWNED')}
+                            </h3>
+                            <ol className="space-y-2">
+                                {core.topOwnedGames.map((g, idx) => (
+                                    <li key={g.appid} className="flex items-center gap-3">
+                                        <span className="w-6 text-sm font-bold text-slate-400 tabular-nums">{idx + 1}</span>
+                                        {iconUrl(g.appid, g.imgIconUrl) ? (
+                                            <img src={iconUrl(g.appid, g.imgIconUrl)} alt="" className="w-8 h-8 rounded"/>
+                                        ) : (
+                                            <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
+                                        )}
+                                        <span className="flex-1 truncate text-slate-900 dark:text-white">
+                                            {g.name ?? `App ${g.appid}`}
+                                        </span>
+                                        <span className="text-xs text-slate-500 dark:text-slate-400 tabular-nums">
+                                            {g.value.toLocaleString()}
+                                        </span>
+                                    </li>
+                                ))}
+                            </ol>
+                        </div>
+                    </div>
+                )}
+            </section>
         </div>
     );
-}
+}