- React+Vite Frontend mit Routing, eigenem fetch-Client (kein axios) - Express Backend: Auth (JWT), Topics, Tasks, Leaderboard - PostgreSQL Schema + Seed: 7 Kategorien, 21 Topics, ~25 Aufgaben - Gamification: XP, Level (100×n^1.5), tägliche Streaks - docker-compose auf Port 3100 für DS1621 - Alltagsaufgaben: Finanzen, Geometrie, Physik, Informatik, Verkehr, Shopping
38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import { Link } from 'react-router-dom'
|
||
import './Home.css'
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div className="home">
|
||
<div className="home-hero">
|
||
<h1>Mathe im Alltag</h1>
|
||
<p className="home-subtitle">
|
||
Lerne Mathematik anhand echter Situationen — Zinsen, Rabatte,
|
||
Energiekosten und mehr. Mit Punkten, Levels und Wettbewerb.
|
||
</p>
|
||
<div className="home-actions">
|
||
<Link to="/register" className="btn btn-primary">Kostenlos starten</Link>
|
||
<Link to="/login" className="btn btn-secondary">Anmelden</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="home-features">
|
||
<div className="feature-card">
|
||
<span className="feature-icon">📈</span>
|
||
<h3>Alltagsmathe</h3>
|
||
<p>Aufgaben aus dem echten Leben — Kredit, Strom, Einkauf, Reisen</p>
|
||
</div>
|
||
<div className="feature-card">
|
||
<span className="feature-icon">🏆</span>
|
||
<h3>Punkte & Level</h3>
|
||
<p>Sammle XP, steige auf und halte deinen Streak am Leben</p>
|
||
</div>
|
||
<div className="feature-card">
|
||
<span className="feature-icon">⚔️</span>
|
||
<h3>Rangliste</h3>
|
||
<p>Miss dich mit anderen und klettere in der Bestenliste nach oben</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|