From b970473a25d1827e7290bb44417d976d105033cd Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sun, 30 Nov 2025 00:37:16 +0100
Subject: [PATCH] feat(manacore): add Mana subscription page to navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Improve /mana page with German labels and styling
- Add Mana to nav with fire icon (between Dashboard and Credits)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../apps/web/src/routes/(app)/+layout.svelte  |  1 +
 .../web/src/routes/(app)/mana/+page.svelte    | 37 +++++++++++++++----
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
index 3c36b15d8..76427f9ea 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
@@ -53,6 +53,7 @@
 	// Navigation items for ManaCore
 	const navItems: PillNavItem[] = [
 		{ href: '/dashboard', label: 'Dashboard', icon: 'home' },
+		{ href: '/mana', label: 'Mana', icon: 'fire' },
 		{ href: '/credits', label: 'Credits', icon: 'creditCard' },
 		{ href: '/feedback', label: 'Feedback', icon: 'chat' },
 		{ href: '/profile', label: 'Profil', icon: 'user' },
diff --git a/apps/manacore/apps/web/src/routes/(app)/mana/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/mana/+page.svelte
index 01ca44d69..dc73c0c2b 100644
--- a/apps/manacore/apps/web/src/routes/(app)/mana/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/mana/+page.svelte
@@ -2,17 +2,38 @@
 	import { SubscriptionPage } from '@manacore/shared-subscription-ui';
 
 	function handleSubscribe(planId: string) {
-		alert(`Subscribe to plan: ${planId}\n\nThis would trigger RevenueCat purchase flow.`);
+		console.log('Subscribe to plan:', planId);
+		alert(`Abo "${planId}" ausgewählt. Bezahlsystem wird noch integriert.`);
 	}
 
 	function handleBuyPackage(packageId: string) {
-		alert(`Buy package: ${packageId}\n\nThis would trigger RevenueCat purchase flow.`);
+		console.log('Buy package:', packageId);
+		alert(`Paket "${packageId}" ausgewählt. Bezahlsystem wird noch integriert.`);
 	}
 </script>
 
-<SubscriptionPage
-	appName="ManaCore"
-	onSubscribe={handleSubscribe}
-	onBuyPackage={handleBuyPackage}
-	currentPlanId="free"
-/>
+<svelte:head>
+	<title>Mana - ManaCore</title>
+</svelte:head>
+
+<div class="mana-page">
+	<SubscriptionPage
+		appName="ManaCore"
+		onSubscribe={handleSubscribe}
+		onBuyPackage={handleBuyPackage}
+		currentPlanId="free"
+		pageTitle="Wähle dein Abo"
+		subscriptionsTitle="Abonnements"
+		packagesTitle="Einmal-Pakete"
+		yearlyDiscount="2 Monate gratis"
+	/>
+</div>
+
+<style>
+	.mana-page {
+		min-height: 100%;
+		width: 100%;
+		overflow-x: hidden;
+		background-color: hsl(var(--background));
+	}
+</style>