till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 19:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(manacore/landing): improve footer layout and readability

Browse source 
- 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>
This commit is contained in:
Till JS 2026-04-01 12:09:28 +02:00
parent ffd608cbb9
commit 075e204b14
1 changed files with 68 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

105
apps/manacore/apps/landing/src/components/navigation/Footer.astro
View file

@ -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;