mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-19 02:41:23 +02:00
df7395e57a
The Clock app source is preserved in apps-archived/ for reference. This directory is excluded from the pnpm workspace. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
108 lines
3.8 KiB
Text
108 lines
3.8 KiB
Text
---
|
|
// Hero section for Clock landing page
|
|
---
|
|
|
|
<section class="relative overflow-hidden py-20 md:py-32">
|
|
<!-- Background gradient -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-primary-950/30 via-dark-bg to-dark-bg"></div>
|
|
|
|
<!-- Grid pattern -->
|
|
<div class="absolute inset-0 bg-[url('/grid.svg')] bg-center opacity-10"></div>
|
|
|
|
<div class="container relative">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<!-- Badge -->
|
|
<div
|
|
class="mb-8 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-2 text-sm text-primary-400"
|
|
>
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span>Time Tracking & Focus</span>
|
|
</div>
|
|
|
|
<!-- Headline -->
|
|
<h1 class="mb-6 text-4xl font-bold leading-tight md:text-6xl lg:text-7xl">
|
|
Nutze deine Zeit
|
|
<span class="gradient-text">effektiv</span>
|
|
</h1>
|
|
|
|
<!-- Subheadline -->
|
|
<p class="mx-auto mb-10 max-w-2xl text-lg text-gray-400 md:text-xl">
|
|
Pomodoro-Timer, Zeiterfassung und Focus-Sessions - steigere deine Produktivitat und behalte
|
|
den Uberblick uber deine Arbeitszeit.
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
<a href="#" class="btn btn-primary group text-lg">
|
|
Kostenlos starten
|
|
<svg
|
|
class="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"
|
|
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"> Funktionen entdecken </a>
|
|
</div>
|
|
|
|
<!-- Social proof -->
|
|
<div class="mt-16 flex flex-col items-center gap-4">
|
|
<div class="flex -space-x-2">
|
|
{
|
|
[1, 2, 3, 4, 5].map((i) => (
|
|
<div class="h-10 w-10 rounded-full border-2 border-dark-bg bg-gradient-to-br from-primary-400 to-primary-600" />
|
|
))
|
|
}
|
|
</div>
|
|
<p class="text-sm text-gray-500">
|
|
<span class="font-semibold text-white">300+</span> Nutzer tracken ihre Zeit
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview mockup -->
|
|
<div class="relative mx-auto mt-16 max-w-5xl">
|
|
<div
|
|
class="absolute -inset-4 rounded-2xl bg-gradient-to-r from-primary-500/20 via-transparent to-primary-500/20 blur-3xl"
|
|
>
|
|
</div>
|
|
<div class="relative rounded-xl border border-dark-border bg-dark-card p-2 shadow-2xl">
|
|
<div class="flex gap-2 px-4 py-3">
|
|
<div class="h-3 w-3 rounded-full bg-red-500"></div>
|
|
<div class="h-3 w-3 rounded-full bg-yellow-500"></div>
|
|
<div class="h-3 w-3 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<div class="aspect-[16/9] overflow-hidden rounded-lg bg-dark-surface">
|
|
<!-- Timer preview placeholder -->
|
|
<div class="flex h-full flex-col items-center justify-center p-6">
|
|
<div class="mb-8 text-8xl font-bold text-primary-400">25:00</div>
|
|
<div class="mb-6 flex gap-4">
|
|
<button class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-medium">Start</button>
|
|
<button class="rounded-lg bg-dark-card px-6 py-2 text-sm">Pause</button>
|
|
<button class="rounded-lg bg-dark-card px-6 py-2 text-sm">Reset</button>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<span class="rounded-full bg-primary-500/20 px-3 py-1 text-xs text-primary-400"
|
|
>Focus</span
|
|
>
|
|
<span class="rounded-full bg-dark-card px-3 py-1 text-xs">Short Break</span>
|
|
<span class="rounded-full bg-dark-card px-3 py-1 text-xs">Long Break</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|