managarten/apps-archived/uload/apps/landing/src/pages/about.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';

const stats = [
	{ value: '10K+', label: 'Aktive Nutzer' },
	{ value: '500K+', label: 'Erstellte Links' },
	{ value: '2M+', label: 'Klicks verfolgt' },
	{ value: '99.9%', label: 'Uptime' },
];

const values = [
	{
		icon: '🎯',
		title: 'Einfachheit',
		description:
			'Wir glauben, dass professionelle Tools nicht kompliziert sein müssen. uLoad ist intuitiv und sofort einsatzbereit.',
	},
	{
		icon: '🔒',
		title: 'Datenschutz',
		description:
			'Ihre Daten gehören Ihnen. Wir sind DSGVO-konform und speichern nur was wirklich notwendig ist.',
	},
	{
		icon: '⚡',
		title: 'Performance',
		description:
			'Schnelle Links bedeuten bessere Nutzererfahrung. Unsere Infrastruktur ist auf Geschwindigkeit optimiert.',
	},
	{
		icon: '💪',
		title: 'Zuverlässigkeit',
		description:
			'Mit 99.9% Uptime können Sie sich auf uLoad verlassen - für jede Kampagne, jedes Projekt.',
	},
];
---

<BaseLayout
	title="Über uns"
	description="Erfahren Sie mehr über uLoad - den intelligenten URL-Shortener für Profis."
>
	<!-- Hero -->
	<section
		class="bg-gradient-to-br from-primary-500/5 via-white to-purple-600/5 px-4 py-16 sm:px-6 lg:px-8 lg:py-24"
	>
		<div class="mx-auto max-w-7xl">
			<div class="text-center">
				<h1 class="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
					Links die verbinden
				</h1>
				<p class="mx-auto max-w-2xl text-lg text-gray-600">
					uLoad wurde entwickelt um Link-Management einfach, sicher und effektiv zu machen. Für
					Einzelpersonen, Teams und Unternehmen.
				</p>
			</div>
		</div>
	</section>

	<!-- Stats -->
	<section class="bg-primary-600 px-4 py-12 sm:px-6 lg:px-8">
		<div class="mx-auto max-w-7xl">
			<div class="grid grid-cols-2 gap-8 md:grid-cols-4">
				{
					stats.map((stat) => (
						<div class="text-center">
							<div class="text-4xl font-bold text-white">{stat.value}</div>
							<div class="mt-1 text-primary-100">{stat.label}</div>
						</div>
					))
				}
			</div>
		</div>
	</section>

	<!-- Story -->
	<section class="px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
		<div class="mx-auto max-w-3xl">
			<h2 class="mb-8 text-center text-3xl font-bold text-gray-900">Unsere Geschichte</h2>
			<div class="prose prose-lg mx-auto text-gray-600">
				<p>
					uLoad entstand aus einer einfachen Frustration: Bestehende URL-Shortener waren entweder zu
					kompliziert, zu teuer oder boten nicht die Features die moderne Teams brauchen.
				</p>
				<p>
					Wir wollten einen Service schaffen, der sowohl für Einsteiger als auch für Power-User
					funktioniert. Ein Tool das mit Ihren Anforderungen wächst - von der ersten verkürzten URL
					bis zum Enterprise-Einsatz.
				</p>
				<p>
					Heute nutzen tausende Nutzer uLoad täglich für ihre Marketing-Kampagnen,
					Social-Media-Posts und geschäftliche Kommunikation. Und wir arbeiten jeden Tag daran,
					uLoad noch besser zu machen.
				</p>
			</div>
		</div>
	</section>

	<!-- Values -->
	<section class="bg-gray-50 px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
		<div class="mx-auto max-w-7xl">
			<h2 class="mb-12 text-center text-3xl font-bold text-gray-900">Unsere Werte</h2>
			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
				{
					values.map((value) => (
						<div class="rounded-xl bg-white p-6 shadow-sm">
							<div class="mb-4 text-4xl">{value.icon}</div>
							<h3 class="mb-2 text-lg font-semibold text-gray-900">{value.title}</h3>
							<p class="text-sm text-gray-600">{value.description}</p>
						</div>
					))
				}
			</div>
		</div>
	</section>

	<!-- CTA -->
	<section class="px-4 py-16 sm:px-6 lg:px-8">
		<div class="mx-auto max-w-4xl text-center">
			<h2 class="mb-4 text-3xl font-bold text-gray-900">Werden Sie Teil der uLoad Community</h2>
			<p class="mb-8 text-lg text-gray-600">Schließen Sie sich tausenden zufriedenen Nutzern an.</p>
			<a
				href="https://app.ulo.ad/register"
				class="inline-block rounded-lg bg-primary-600 px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-700"
			>
				Jetzt kostenlos starten →
			</a>
		</div>
	</section>
</BaseLayout>