mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 22:39:41 +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>
82 lines
3.7 KiB
Text
82 lines
3.7 KiB
Text
---
|
|
// Features section for Clock landing page
|
|
|
|
const features = [
|
|
{
|
|
icon: `<svg class="h-6 w-6" 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>`,
|
|
title: 'Pomodoro Timer',
|
|
description:
|
|
'Arbeite in fokussierten 25-Minuten-Intervallen mit automatischen Pausen. Steigere deine Konzentration.',
|
|
},
|
|
{
|
|
icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
</svg>`,
|
|
title: 'Zeiterfassung',
|
|
description:
|
|
'Tracke deine Arbeitszeit auf Projekte und Aufgaben. Detaillierte Berichte und Statistiken.',
|
|
},
|
|
{
|
|
icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>`,
|
|
title: 'Focus Sessions',
|
|
description:
|
|
'Starte dedizierte Focus-Sessions und eliminiere Ablenkungen. Perfekt fur Deep Work.',
|
|
},
|
|
{
|
|
icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
|
</svg>`,
|
|
title: 'Erinnerungen',
|
|
description: 'Sanfte Erinnerungen fur Pausen und Arbeitsende. Schutze deine Work-Life-Balance.',
|
|
},
|
|
{
|
|
icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>`,
|
|
title: 'Detaillierte Reports',
|
|
description:
|
|
'Wochentliche und monatliche Ubersichten. Exportiere deine Daten als CSV oder PDF.',
|
|
},
|
|
{
|
|
icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
</svg>`,
|
|
title: 'Alle Gerate',
|
|
description: 'Web-App, iOS und Android. Deine Zeit wird uber alle Gerate synchronisiert.',
|
|
},
|
|
];
|
|
---
|
|
|
|
<section id="features" class="bg-dark-surface">
|
|
<div class="container">
|
|
<!-- Section header -->
|
|
<div class="mx-auto mb-16 max-w-3xl text-center">
|
|
<span class="mb-4 inline-block text-sm font-medium uppercase tracking-wider text-primary-400">
|
|
Funktionen
|
|
</span>
|
|
<h2 class="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl">Produktiver arbeiten</h2>
|
|
<p class="text-lg text-gray-400">
|
|
Clock bietet alle Tools, die du fur effektives Zeitmanagement brauchst.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Features grid -->
|
|
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
{
|
|
features.map((feature) => (
|
|
<div class="group rounded-xl border border-dark-border bg-dark-card p-6 transition-all duration-300 hover:border-primary-500/50 hover:bg-dark-card/80">
|
|
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-500/10 text-primary-400 transition-colors group-hover:bg-primary-500/20">
|
|
<Fragment set:html={feature.icon} />
|
|
</div>
|
|
<h3 class="mb-3 text-xl font-semibold">{feature.title}</h3>
|
|
<p class="text-gray-400">{feature.description}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|