---
// Call to Action section
---

<section class="relative overflow-hidden bg-dark-bg">
	<!-- Background gradient -->
	<div class="absolute inset-0 bg-gradient-to-r from-primary-950/30 via-dark-bg to-primary-950/30">
	</div>

	<div class="container relative">
		<div class="mx-auto max-w-3xl text-center">
			<h2 class="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl">
				Bereit, produktiver zu werden?
			</h2>
			<p class="mb-10 text-lg text-gray-400">
				Starte kostenlos und erlebe, wie einfach Zeitmanagement sein kann. Keine Kreditkarte
				erforderlich.
			</p>

			<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
				<a href="#" class="btn btn-primary text-lg">
					Jetzt kostenlos starten
					<svg class="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
					</svg>
				</a>
				<a href="#features" class="btn btn-secondary"> Mehr erfahren </a>
			</div>

			<!-- Benefits list -->
			<div class="mt-12 flex flex-wrap items-center justify-center gap-6 text-sm text-gray-500">
				<div class="flex items-center gap-2">
					<svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
						></path>
					</svg>
					<span>Kostenlos starten</span>
				</div>
				<div class="flex items-center gap-2">
					<svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
						></path>
					</svg>
					<span>Keine Kreditkarte</span>
				</div>
				<div class="flex items-center gap-2">
					<svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
						></path>
					</svg>
					<span>Jederzeit kundbar</span>
				</div>
			</div>
		</div>
	</div>
</section>