mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-22 00:26:42 +02:00
fea6a8e64b
New Astro landing page at services/it-landing/ targeting European organizations that need independent, GDPR-compliant IT infrastructure. 10 sections: - Hero: "Technologische Souveränität für Europa" with 75% self-hosted stat - Problem: US Cloud Act, vendor lock-in, GDPR conflicts, Schrems II - Solution: IndependenceBar (animated 75% progress) + 3 principles - Infrastructure Grid: 21 components color-coded (green/amber/red) - GDPR: 6 compliance cards (all rights, breach notification, AI safety) - Open Source Stack: 8 comparisons (PostgreSQL vs DynamoDB, etc.) - Target Audiences: Government, healthcare, education, SMBs - Roadmap: Timeline from current state to 90%+ independence (2027) - FAQ: 8 questions about sovereignty, Cloud Act, local AI, costs - CTA: Contact for consultation Features: - Light EU Sovereign theme (#003399 EU blue, professional B2B design) - German (default) + English (/en/) with Astro i18n - Custom components: InfrastructureGrid, IndependenceBar (scroll animation) - Data from docs/TECH_STACK_INDEPENDENCE.md (real infrastructure stats) - Legal pages: Impressum, Datenschutz - Deploy: pnpm deploy:landing:it → Cloudflare Pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
52 lines
1.2 KiB
Text
52 lines
1.2 KiB
Text
---
|
|
import type { InfraComponent } from '../data/infrastructure';
|
|
|
|
interface Props {
|
|
items: InfraComponent[];
|
|
}
|
|
|
|
const { items } = Astro.props;
|
|
|
|
const statusColors = {
|
|
'self-hosted': {
|
|
bg: 'bg-green-50',
|
|
border: 'border-green-200',
|
|
badge: 'bg-green-100 text-green-800',
|
|
label: 'Self-Hosted',
|
|
},
|
|
replaceable: {
|
|
bg: 'bg-amber-50',
|
|
border: 'border-amber-200',
|
|
badge: 'bg-amber-100 text-amber-800',
|
|
label: 'Migration geplant',
|
|
},
|
|
unavoidable: {
|
|
bg: 'bg-red-50',
|
|
border: 'border-red-200',
|
|
badge: 'bg-red-100 text-red-800',
|
|
label: 'Cloud (unvermeidbar)',
|
|
},
|
|
};
|
|
---
|
|
|
|
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
|
|
{
|
|
items.map((item) => {
|
|
const colors = statusColors[item.status];
|
|
return (
|
|
<div
|
|
class={`rounded-lg border p-4 transition-shadow hover:shadow-md ${colors.bg} ${colors.border}`}
|
|
>
|
|
<div class="mb-2 text-2xl">{item.icon}</div>
|
|
<h4 class="text-sm font-semibold text-text-primary">{item.name}</h4>
|
|
<p class="mt-1 text-xs text-text-muted">{item.technology}</p>
|
|
<span
|
|
class={`mt-2 inline-block rounded-full px-2 py-0.5 text-xs font-medium ${colors.badge}`}
|
|
>
|
|
{colors.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|