From 075e204b140fa9849100f9524fd1e3da36c01a4c Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 1 Apr 2026 12:09:28 +0200
Subject: [PATCH] fix(manacore/landing): improve footer layout and readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix typo: Okosystem → Ökosystem
- Remove Landing Pages section (low value for visitors)
- Add Mana branding header with tagline
- Move GitHub + Matrix Chat into new "Kontakt" section under Rechtliches
- Increase status dot size (6px → 7px) and legend font (0.625rem → 0.75rem)
- Balance column heights across the 4-column grid

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/navigation/Footer.astro    | 105 ++++++++++++------
 1 file changed, 68 insertions(+), 37 deletions(-)

diff --git a/apps/manacore/apps/landing/src/components/navigation/Footer.astro b/apps/manacore/apps/landing/src/components/navigation/Footer.astro
index d5c3a2390..75a81a0a8 100644
--- a/apps/manacore/apps/landing/src/components/navigation/Footer.astro
+++ b/apps/manacore/apps/landing/src/components/navigation/Footer.astro
@@ -61,17 +61,6 @@ const insightsLinks = [
 	{ label: 'Dokumentation', href: 'https://docs.mana.how' },
 ];
 
-const landingPages = [
-	{ label: 'Chat Landing', href: 'https://chats.mana.how' },
-	{ label: 'Picture Landing', href: 'https://pics.mana.how' },
-	{ label: 'Zitare Landing', href: 'https://zitares.mana.how' },
-	{ label: 'Presi Landing', href: 'https://presis.mana.how' },
-	{ label: 'Clock Landing', href: 'https://clocks.mana.how' },
-	{ label: 'Cards Landing', href: 'https://cards.mana.how' },
-	{ label: 'CityCorners Landing', href: 'https://citycorners.mana.how' },
-	{ label: 'IT Souveränität', href: 'https://it.mana.how' },
-];
-
 const legalLinks = [
 	{ label: 'Datenschutz', href: '/privacy' },
 	{ label: 'DSGVO', href: '/privacy/dsgvo-konformitaet' },
@@ -95,10 +84,16 @@ function statusColor(status: string) {
 	<div class="footer-overlay"></div>
 
 	<Container class="relative z-10">
+		<!-- Branding -->
+		<div class="footer-branding">
+			<span class="footer-logo">mana</span>
+			<span class="footer-tagline">Deine digitale Heimat</span>
+		</div>
+
 		<div class="footer-grid">
 			<!-- Column 1: Ecosystem Apps -->
 			<div class="footer-col">
-				<h3 class="footer-heading">Okosystem</h3>
+				<h3 class="footer-heading">&Ouml;kosystem</h3>
 				<ul class="footer-list">
 					{
 						ecosystemApps.slice(0, 10).map((app) => (
@@ -199,22 +194,9 @@ function statusColor(status: string) {
 						))
 					}
 				</ul>
-
-				<h4 class="footer-subheading">Landing Pages</h4>
-				<ul class="footer-list">
-					{
-						landingPages.map((link) => (
-							<li>
-								<a href={link.href} class="footer-link" target="_blank" rel="noopener">
-									{link.label}
-								</a>
-							</li>
-						))
-					}
-				</ul>
 			</div>
 
-			<!-- Column 4: Legal -->
+			<!-- Column 4: Legal & Contact -->
 			<div class="footer-col">
 				<h3 class="footer-heading">Rechtliches</h3>
 				<ul class="footer-list">
@@ -228,6 +210,25 @@ function statusColor(status: string) {
 						))
 					}
 				</ul>
+
+				<h4 class="footer-subheading">Kontakt</h4>
+				<ul class="footer-list">
+					<li>
+						<a
+							href="https://github.com/Memo-2023"
+							class="footer-link"
+							target="_blank"
+							rel="noopener"
+						>
+							GitHub
+						</a>
+					</li>
+					<li>
+						<a href="https://element.mana.how" class="footer-link" target="_blank" rel="noopener">
+							Matrix Chat
+						</a>
+					</li>
+				</ul>
 			</div>
 		</div>
 
@@ -235,9 +236,6 @@ function statusColor(status: string) {
 		<div class="footer-bottom">
 			<span class="footer-copyright">&copy; {currentYear} Manacore Verein</span>
 			<span class="footer-domain">mana.how</span>
-			<a href="https://github.com/Memo-2023" class="footer-link" target="_blank" rel="noopener">
-				GitHub
-			</a>
 		</div>
 	</Container>
 </footer>
@@ -259,12 +257,38 @@ function statusColor(status: string) {
 		pointer-events: none;
 	}
 
+	/* Branding */
+	.footer-branding {
+		position: relative;
+		z-index: 10;
+		display: flex;
+		align-items: baseline;
+		gap: 0.75rem;
+		padding-top: 2.5rem;
+		padding-bottom: 1.5rem;
+		border-bottom: 1px solid rgba(248, 250, 252, 0.06);
+		margin-bottom: 0.5rem;
+	}
+
+	.footer-logo {
+		font-size: 1.5rem;
+		font-weight: 700;
+		color: #f8fafc;
+		letter-spacing: -0.02em;
+	}
+
+	.footer-tagline {
+		font-size: 0.8125rem;
+		color: #64748b;
+		font-weight: 400;
+	}
+
 	/* Grid */
 	.footer-grid {
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
 		gap: 2.5rem;
-		padding: 3rem 0 2rem;
+		padding: 2rem 0 2rem;
 	}
 
 	.footer-col {
@@ -318,8 +342,8 @@ function statusColor(status: string) {
 	/* Status dots */
 	.status-dot {
 		display: inline-block;
-		width: 6px;
-		height: 6px;
+		width: 7px;
+		height: 7px;
 		border-radius: 50%;
 		flex-shrink: 0;
 	}
@@ -328,20 +352,20 @@ function statusColor(status: string) {
 		margin-top: 1rem;
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.5rem 0.75rem;
-		font-size: 0.625rem;
+		gap: 0.5rem 1rem;
+		font-size: 0.75rem;
 		color: #64748b;
 	}
 
 	.status-legend span {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.25rem;
+		gap: 0.375rem;
 	}
 
 	.status-legend .status-dot {
-		width: 5px;
-		height: 5px;
+		width: 7px;
+		height: 7px;
 	}
 
 	/* Expandable apps */
@@ -409,6 +433,13 @@ function statusColor(status: string) {
 
 	/* Mobile */
 	@media (max-width: 640px) {
+		.footer-branding {
+			flex-direction: column;
+			gap: 0.25rem;
+			padding-top: 2rem;
+			padding-bottom: 1rem;
+		}
+
 		.footer-grid {
 			grid-template-columns: 1fr;
 			gap: 1.5rem;