diff --git a/apps/clock/apps/landing/.gitignore b/apps/clock/apps/landing/.gitignore new file mode 100644 index 000000000..163286eca --- /dev/null +++ b/apps/clock/apps/landing/.gitignore @@ -0,0 +1,27 @@ +# build output +dist/ + +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# environment variables +.env +.env.production + +# macOS +.DS_Store + +# IDE +.idea/ +.vscode/ +*.swp +*.swo diff --git a/apps/clock/apps/landing/.prettierrc b/apps/clock/apps/landing/.prettierrc new file mode 100644 index 000000000..09cfb7d9d --- /dev/null +++ b/apps/clock/apps/landing/.prettierrc @@ -0,0 +1,15 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"], + "overrides": [ + { + "files": "*.astro", + "options": { + "parser": "astro" + } + } + ] +} diff --git a/apps/clock/apps/landing/astro.config.mjs b/apps/clock/apps/landing/astro.config.mjs new file mode 100644 index 000000000..83c9c822a --- /dev/null +++ b/apps/clock/apps/landing/astro.config.mjs @@ -0,0 +1,19 @@ +import { defineConfig } from 'astro/config'; +import tailwind from '@astrojs/tailwind'; + +// https://astro.build/config +export default defineConfig({ + integrations: [tailwind()], + output: 'static', + build: { + inlineStylesheets: 'auto', + }, + vite: { + resolve: { + alias: { + '@components': '/src/components', + '@layouts': '/src/layouts', + }, + }, + }, +}); diff --git a/apps/clock/apps/landing/public/favicon.svg b/apps/clock/apps/landing/public/favicon.svg new file mode 100644 index 000000000..c5fd432f3 --- /dev/null +++ b/apps/clock/apps/landing/public/favicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/clock/apps/landing/src/components/CTA.astro b/apps/clock/apps/landing/src/components/CTA.astro new file mode 100644 index 000000000..2cdc8a166 --- /dev/null +++ b/apps/clock/apps/landing/src/components/CTA.astro @@ -0,0 +1,60 @@ +--- +// Call to Action section +--- + +
+ +
+
+ +
+
+

+ Bereit, produktiver zu werden? +

+

+ Starte kostenlos und erlebe, wie einfach Zeitmanagement sein kann. Keine Kreditkarte + erforderlich. +

+ +
+ + Jetzt kostenlos starten + + + + + Mehr erfahren +
+ + +
+
+ + + + Kostenlos starten +
+
+ + + + Keine Kreditkarte +
+
+ + + + Jederzeit kundbar +
+
+
+
+
diff --git a/apps/clock/apps/landing/src/components/Features.astro b/apps/clock/apps/landing/src/components/Features.astro new file mode 100644 index 000000000..77e7cf355 --- /dev/null +++ b/apps/clock/apps/landing/src/components/Features.astro @@ -0,0 +1,82 @@ +--- +// Features section for Clock landing page + +const features = [ + { + icon: ` + + `, + title: 'Pomodoro Timer', + description: + 'Arbeite in fokussierten 25-Minuten-Intervallen mit automatischen Pausen. Steigere deine Konzentration.', + }, + { + icon: ` + + `, + title: 'Zeiterfassung', + description: + 'Tracke deine Arbeitszeit auf Projekte und Aufgaben. Detaillierte Berichte und Statistiken.', + }, + { + icon: ` + + `, + title: 'Focus Sessions', + description: + 'Starte dedizierte Focus-Sessions und eliminiere Ablenkungen. Perfekt fur Deep Work.', + }, + { + icon: ` + + `, + title: 'Erinnerungen', + description: 'Sanfte Erinnerungen fur Pausen und Arbeitsende. Schutze deine Work-Life-Balance.', + }, + { + icon: ` + + `, + title: 'Detaillierte Reports', + description: + 'Wochentliche und monatliche Ubersichten. Exportiere deine Daten als CSV oder PDF.', + }, + { + icon: ` + + `, + title: 'Alle Gerate', + description: 'Web-App, iOS und Android. Deine Zeit wird uber alle Gerate synchronisiert.', + }, +]; +--- + +
+
+ +
+ + Funktionen + +

Produktiver arbeiten

+

+ Clock bietet alle Tools, die du fur effektives Zeitmanagement brauchst. +

+
+ + +
+ { + features.map((feature) => ( +
+
+ +
+

{feature.title}

+

{feature.description}

+
+ )) + } +
+
+
diff --git a/apps/clock/apps/landing/src/components/Footer.astro b/apps/clock/apps/landing/src/components/Footer.astro new file mode 100644 index 000000000..603a48db8 --- /dev/null +++ b/apps/clock/apps/landing/src/components/Footer.astro @@ -0,0 +1,108 @@ +--- +// Footer component + +const currentYear = new Date().getFullYear(); + +const links = { + product: [ + { name: 'Funktionen', href: '#features' }, + { name: 'Preise', href: '#pricing' }, + { name: 'Changelog', href: '/changelog' }, + { name: 'Roadmap', href: '/roadmap' }, + ], + legal: [ + { name: 'Impressum', href: '/impressum' }, + { name: 'Datenschutz', href: '/datenschutz' }, + { name: 'AGB', href: '/agb' }, + ], + support: [ + { name: 'FAQ', href: '/faq' }, + { name: 'Kontakt', href: '/kontakt' }, + { name: 'Status', href: '/status' }, + ], +}; +--- + + diff --git a/apps/clock/apps/landing/src/components/Hero.astro b/apps/clock/apps/landing/src/components/Hero.astro new file mode 100644 index 000000000..6f59d48de --- /dev/null +++ b/apps/clock/apps/landing/src/components/Hero.astro @@ -0,0 +1,108 @@ +--- +// Hero section for Clock landing page +--- + +
+ +
+ + +
+ +
+
+ +
+ + + + Time Tracking & Focus +
+ + +

+ Nutze deine Zeit + effektiv +

+ + +

+ Pomodoro-Timer, Zeiterfassung und Focus-Sessions - steigere deine Produktivitat und behalte + den Uberblick uber deine Arbeitszeit. +

+ + +
+ + Kostenlos starten + + + + + Funktionen entdecken +
+ + +
+
+ { + [1, 2, 3, 4, 5].map((i) => ( +
+ )) + } +
+

+ 300+ Nutzer tracken ihre Zeit +

+
+
+ + +
+
+
+
+
+
+
+
+
+
+ +
+
25:00
+
+ + + +
+
+ Focus + Short Break + Long Break +
+
+
+
+
+
+
diff --git a/apps/clock/apps/landing/src/pages/index.astro b/apps/clock/apps/landing/src/pages/index.astro new file mode 100644 index 000000000..5c7c7d38c --- /dev/null +++ b/apps/clock/apps/landing/src/pages/index.astro @@ -0,0 +1,158 @@ +--- +import Layout from '@layouts/Layout.astro'; +import Hero from '@components/Hero.astro'; +import Features from '@components/Features.astro'; +import CTA from '@components/CTA.astro'; +import Footer from '@components/Footer.astro'; + +// Pricing data +const pricingPlans = [ + { + name: 'Free', + price: '0', + period: '/Monat', + description: 'Perfekt zum Ausprobieren', + features: [ + { text: 'Pomodoro Timer', included: true }, + { text: 'Basis-Zeiterfassung', included: true }, + { text: '7 Tage Historie', included: true }, + { text: 'Web-App Zugang', included: true }, + { text: 'Projekte & Tags', included: false }, + { text: 'Detaillierte Reports', included: false }, + ], + cta: { + text: 'Kostenlos starten', + href: '#', + }, + }, + { + name: 'Pro', + price: '3,99', + period: '/Monat', + description: 'Fur Freelancer & Profis', + features: [ + { text: 'Alles aus Free', included: true }, + { text: 'Unbegrenzte Historie', included: true }, + { text: 'Projekte & Tags', included: true }, + { text: 'Detaillierte Reports', included: true }, + { text: 'CSV/PDF Export', included: true }, + { text: 'Mobile Apps', included: true }, + ], + cta: { + text: 'Pro starten', + href: '#', + }, + highlighted: true, + badge: 'Beliebt', + }, + { + name: 'Team', + price: '7,99', + period: '/Nutzer/Monat', + description: 'Fur Teams & Agenturen', + features: [ + { text: 'Alles aus Pro', included: true }, + { text: 'Team-Dashboard', included: true }, + { text: 'Projekt-Budgets', included: true }, + { text: 'Kunden-Reports', included: true }, + { text: 'API-Zugang', included: true }, + { text: 'Priority Support', included: true }, + ], + cta: { + text: 'Team erstellen', + href: '#', + }, + }, +]; +--- + + + + + +
+
+
+ + Preise + +

Einfache, transparente Preise

+

Starte kostenlos, upgrade wenn du mehr brauchst

+
+ +
+ { + pricingPlans.map((plan) => ( +
+ {plan.badge && ( +
+ {plan.badge} +
+ )} +

{plan.name}

+

{plan.description}

+
+ {plan.price}€ + {plan.period} +
+
    + {plan.features.map((feature) => ( +
  • + {feature.included ? ( + + + + ) : ( + + + + )} + {feature.text} +
    • + ))} +
+ + {plan.cta.text} + +
+ )) + } +
+
+
+ + +