Changed app from vue to react

src/App.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+function App() {
+  // Array to generate the placeholder game cards
+  const mockGames = [1, 2, 3];
+
+  return (
+      <div className="min-h-screen bg-slate-50 flex flex-col">
+        <header className="border-b shadow-sm bg-white p-4 flex justify-between items-center">
+          <div className="font-bold text-blue-600 flex items-center">
+            <i className="mdi mdi-controller mr-2 text-xl"></i>
+            To Be Played
+          </div>
+          <div>
+            <button className="mr-4">Dashboard</button>
+            <button className="bg-blue-600 text-white px-4 py-2 rounded">Login</button>
+          </div>
+        </header>
+
+        <main className="grow container mx-auto py-20 px-4">
+          <section className="text-center mb-16">
+            <h1 className="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">
+              Dein Game-Backlog unter Kontrolle.
+            </h1>
+            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+              Willkommen bei deiner neuen Applikation. Hier werden bald deine Spiele aus dem
+              <code className="bg-slate-200 px-1 rounded text-blue-600 ml-1">game-service</code> gelistet.
+            </p>
+          </section>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {mockGames.map((n) => {
+              return (
+                  <div key={n} className="border border-slate-200 rounded-xl bg-white overflow-hidden">
+                    <div className="h-48 bg-slate-100">
+                      <img
+                          src={`https://picsum.photos/500/300?random=${n}`}
+                          alt={`Beispiel Spiel ${n}`}
+                          className="w-full h-full object-cover"
+                      />
+                    </div>
+                    <div className="p-4">
+                      <h3 className="font-bold text-lg">Beispiel Spiel {n}</h3>
+                      <p className="text-sm text-slate-500 mb-2">Status: In Warteschlange</p>
+                      <p className="text-slate-500 text-sm">
+                        Dies ist ein Platzhalter für ein Spiel in deiner Liste. Später kommen hier echte Daten per API.
+                      </p>
+                    </div>
+                    <div className="border-t p-4">
+                      <button className="w-full bg-blue-100 text-blue-700 py-2 rounded font-medium hover:bg-blue-200">
+                        Details ansehen
+                      </button>
+                    </div>
+                  </div>
+              );
+            })}
+          </div>
+        </main>
+
+        <footer className="bg-white border-t py-4 text-center text-slate-400 text-sm">
+          &copy; 2026 To Be Played — Entwickelt mit React & Tailwind v4
+        </footer>
+      </div>
+  );
+}
+
+export default App;