diff --git a/games/mana-games/apps/web/src/lib/stores/app-onboarding.svelte.ts b/games/mana-games/apps/web/src/lib/stores/app-onboarding.svelte.ts
new file mode 100644
index 000000000..b3be6e663
--- /dev/null
+++ b/games/mana-games/apps/web/src/lib/stores/app-onboarding.svelte.ts
@@ -0,0 +1,41 @@
+import { createAppOnboardingStore, type AppOnboardingStep } from '@manacore/shared-app-onboarding';
+import { userSettings } from './user-settings.svelte';
+
+const onboardingSteps: AppOnboardingStep[] = [
+ {
+ id: 'features',
+ type: 'info',
+ question: 'Willkommen bei Mana Games!',
+ description: 'Das erwartet dich:',
+ emoji: '🎮',
+ gradient: { from: 'green-500', to: 'green-700' },
+ bullets: [
+ '22+ Browser-Spiele direkt spielbar',
+ 'KI-Spielgenerator: Erstelle eigene Games',
+ 'Statistiken: Highscores & Spielzeit',
+ 'Community: Reiche eigene Spiele ein',
+ ],
+ },
+ {
+ id: 'welcome',
+ type: 'info',
+ question: "Los geht's!",
+ description: 'Tipps:',
+ emoji: '🕹️',
+ gradient: { from: 'primary', to: 'primary/70' },
+ bullets: [
+ 'Cmd/Ctrl+K für Schnellsuche',
+ 'Spiele laufen komplett im Browser',
+ 'Stats werden lokal gespeichert',
+ 'Anmelden synchronisiert deine Daten',
+ ],
+ },
+];
+
+export const gamesOnboarding = createAppOnboardingStore({
+ appId: 'mana-games',
+ steps: onboardingSteps,
+ userSettings,
+ onComplete: async () => {},
+ onSkip: async () => {},
+});
diff --git a/games/mana-games/apps/web/src/routes/(app)/+layout.svelte b/games/mana-games/apps/web/src/routes/(app)/+layout.svelte
index 31f297173..63c9c76e0 100644
--- a/games/mana-games/apps/web/src/routes/(app)/+layout.svelte
+++ b/games/mana-games/apps/web/src/routes/(app)/+layout.svelte
@@ -26,6 +26,8 @@
import { setLocale, supportedLocales } from '$lib/i18n';
import { SessionExpiredBanner, AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui';
import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
+ import { gamesOnboarding } from '$lib/stores/app-onboarding.svelte';
+ import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
import { gamesStore } from '$lib/data/local-store';
import {
tagLocalStore,
@@ -241,6 +243,10 @@
/>
+ {#if gamesOnboarding.shouldShow}
+
+ {/if}
+
+ Hilfe - Mana Games
+
+
+
+
Hilfe
+
+
+
+
Wie spiele ich?
+
+ Wähle ein Spiel auf der Startseite aus und klicke darauf. Das Spiel läuft direkt im Browser.
+ Die Steuerung wird auf der Spielseite angezeigt.
+
+
+
+
+
KI-Spielgenerator
+
+ Unter "Erstellen" kannst du eigene Spiele beschreiben und von verschiedenen KI-Modellen
+ generieren lassen. Generierte Spiele werden lokal in deinem Browser gespeichert.
+
+
+
+
+
Statistiken
+
+ Deine Highscores, Spielzeiten und Fortschritte werden automatisch gespeichert. Melde dich
+ an, um sie geräteübergreifend zu synchronisieren.
+