Add pages, update App layout and i18n

Introduce LandingPage, LoginPage and ImprintPage components and replace the previous inline placeholders in App.jsx. Update App layout and header (branding, language toggle, dark mode toggle, route wiring) and use new i18n keys (IMPRINT and LOGIN) in en/de locales. Add client-side validation and UI for the login form. Remove unused assets/icons (public/icons.svg, src/assets/hero.png, vite.svg, vue.svg). Small logging/message tweaks and various Tailwind styling refinements.
2026-03-28 10:02:59 +01:00
1 parent c8f1d66cd2
commit d9c3f40c4a
@@ -0,0 +1,45 @@
+import {useTranslation} from 'react-i18next';
+import {Link} from 'react-router-dom';
+
+export default function LandingPage() {
+    const {t} = useTranslation();
+    const mockGames = [1, 2, 3];
+
+    return (
+        <div className="grow flex flex-col items-center p-4 md:p-8">
+            <section className="text-center my-12 md:my-20">
+                <h1 className="text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
+                    {t('welcome')}
+                </h1>
+                <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-8">
+                    Organize your pile of shame. Track, manage, and conquer your gaming backlog like never before.
+                </p>
+                <Link to="/login" className="bg-blue-600 hover:bg-blue-500 text-white px-8 py-3 rounded-xl font-bold text-lg transition-all shadow-lg shadow-blue-500/30">
+                    Get Started
+                </Link>
+            </section>
+
+            <div className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+                {mockGames.map((n) => {
+                    return (
+                        <div key={n} className="border border-slate-200 dark:border-slate-800 rounded-2xl bg-white dark:bg-slate-900 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+                            <div className="h-48 bg-slate-200 dark:bg-slate-800 relative">
+                                <img src={`https://picsum.photos/500/300?random=${n}`} alt={`Game ${n}`} className="w-full h-full object-cover opacity-90 hover:opacity-100 transition-opacity"/>
+                                <div className="absolute top-3 right-3 bg-slate-900/90 text-white text-xs font-bold px-2 py-1 rounded">
+                                    BACKLOG
+                                </div>
+                            </div>
+                            <div className="p-5">
+                                <h3 className="font-bold text-xl dark:text-white mb-1">Epic Title {n}</h3>
+                                <p className="text-sm text-slate-500 dark:text-slate-400 mb-4">RPG • ~50h playtime</p>
+                                <button className="w-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 py-2 rounded-lg font-semibold hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                    View Details
+                                </button>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}