mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 11:46:41 +02:00
Feat: Landingpages centralized, new app news integrated
This commit is contained in:
Till-JS
parent
36b85fc8a0
commit
865d74ff37
91 changed files with 8242 additions and 610 deletions
|
|
@ -1,76 +0,0 @@
|
|||
---
|
||||
const features = [
|
||||
{
|
||||
icon: '🔗',
|
||||
title: 'URL-Verkürzung',
|
||||
description: 'Verwandeln Sie lange URLs in kurze, teilbare Links mit nur einem Klick. Perfekt für Social Media und Marketing.'
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Detaillierte Analytics',
|
||||
description: 'Verfolgen Sie Klicks, geografische Herkunft, Geräte und Engagement Ihrer Links in Echtzeit.'
|
||||
},
|
||||
{
|
||||
icon: '🎨',
|
||||
title: 'QR-Code Generator',
|
||||
description: 'Erstellen Sie anpassbare QR-Codes in verschiedenen Farben und Formaten für jeden Link.'
|
||||
},
|
||||
{
|
||||
icon: '💳',
|
||||
title: 'Digitale Visitenkarten',
|
||||
description: 'Erstellen Sie professionelle digitale Visitenkarten mit QR-Codes und Kontaktinformationen.'
|
||||
},
|
||||
{
|
||||
icon: '🔒',
|
||||
title: 'Passwortschutz',
|
||||
description: 'Schützen Sie Ihre Links mit Passwörtern und setzen Sie Ablaufdaten für zeitlich begrenzte Aktionen.'
|
||||
},
|
||||
{
|
||||
icon: '🏷️',
|
||||
title: 'Tag-System',
|
||||
description: 'Organisieren Sie Ihre Links mit Tags und Kategorien für eine bessere Übersicht und Filterung.'
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Workspaces',
|
||||
description: 'Arbeiten Sie im Team zusammen mit gemeinsamen Workspaces und granularen Berechtigungen.'
|
||||
},
|
||||
{
|
||||
icon: '⚡',
|
||||
title: 'Blitzschnell',
|
||||
description: 'Unsere Links sind weltweit über ein CDN verteilt für minimale Ladezeiten und maximale Verfügbarkeit.'
|
||||
},
|
||||
{
|
||||
icon: '🔌',
|
||||
title: 'API Zugang',
|
||||
description: 'Integrieren Sie uLoad in Ihre Anwendungen mit unserer RESTful API für automatisierte Workflows.'
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<section id="features" class="px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="mb-4 text-3xl font-bold text-gray-900 sm:text-4xl">
|
||||
Alles was du für professionelles Link-Management brauchst
|
||||
</h2>
|
||||
<p class="mx-auto max-w-2xl text-lg text-gray-600">
|
||||
Von einfacher URL-Verkürzung bis hin zu Team-Kollaboration – uLoad bietet alle Features die du brauchst.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{features.map(feature => (
|
||||
<div class="group relative rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-xl hover:border-primary-200">
|
||||
<div class="mb-4 text-4xl">{feature.icon}</div>
|
||||
<h3 class="mb-2 text-xl font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p class="text-gray-600">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
---
|
||||
const appUrl = 'https://app.ulo.ad';
|
||||
|
||||
const plans = [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Free',
|
||||
price: 0,
|
||||
period: '/Monat',
|
||||
description: 'Perfekt zum Ausprobieren',
|
||||
features: [
|
||||
'10 Links pro Monat',
|
||||
'Basis Analytics',
|
||||
'QR-Code Generator',
|
||||
'Link Anpassung',
|
||||
'Standard Support'
|
||||
],
|
||||
cta: 'Kostenlos starten',
|
||||
highlighted: false,
|
||||
href: `${appUrl}/register`
|
||||
},
|
||||
{
|
||||
id: 'pro-monthly',
|
||||
name: 'Pro',
|
||||
price: 4.99,
|
||||
period: '/Monat',
|
||||
description: 'Für Freelancer & Creators',
|
||||
features: [
|
||||
'Unbegrenzte Links',
|
||||
'Erweiterte Analytics',
|
||||
'Custom QR Codes',
|
||||
'Link Anpassung',
|
||||
'Priority Support',
|
||||
'API Zugang'
|
||||
],
|
||||
cta: 'Pro wählen',
|
||||
highlighted: false,
|
||||
href: `${appUrl}/register?plan=pro`
|
||||
},
|
||||
{
|
||||
id: 'pro-yearly',
|
||||
name: 'Pro Jährlich',
|
||||
price: 3.33,
|
||||
period: '/Monat',
|
||||
description: 'Beste Wahl für Power User',
|
||||
features: [
|
||||
'Unbegrenzte Links',
|
||||
'Erweiterte Analytics',
|
||||
'Custom QR Codes',
|
||||
'Link Anpassung',
|
||||
'Priority Support',
|
||||
'API Zugang'
|
||||
],
|
||||
cta: 'Jährlich sparen',
|
||||
highlighted: true,
|
||||
badge: 'Spare 20€/Jahr',
|
||||
href: `${appUrl}/register?plan=pro-yearly`
|
||||
},
|
||||
{
|
||||
id: 'lifetime',
|
||||
name: 'Pro Lifetime',
|
||||
price: 129.99,
|
||||
period: 'einmalig',
|
||||
description: 'Einmalig zahlen, für immer nutzen',
|
||||
features: [
|
||||
'Alle Pro Features',
|
||||
'Lebenslanger Zugang',
|
||||
'Alle zukünftigen Features',
|
||||
'Early Access',
|
||||
'Priority Support'
|
||||
],
|
||||
cta: 'Lifetime sichern',
|
||||
highlighted: false,
|
||||
badge: 'Einmalig',
|
||||
href: `${appUrl}/register?plan=lifetime`
|
||||
}
|
||||
];
|
||||
|
||||
function formatPrice(price: number): string {
|
||||
return new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
minimumFractionDigits: price % 1 === 0 ? 0 : 2
|
||||
}).format(price);
|
||||
}
|
||||
---
|
||||
|
||||
<section id="pricing" class="px-4 py-16 sm:px-6 lg:px-8 lg:py-24 bg-gray-50">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="text-center">
|
||||
<h2 class="mb-4 text-3xl font-bold text-gray-900 sm:text-4xl">
|
||||
Transparente Preise, keine versteckten Kosten
|
||||
</h2>
|
||||
<p class="mx-auto mb-12 max-w-2xl text-lg text-gray-600">
|
||||
Starte kostenlos und upgrade wenn du bereit bist. Jederzeit kündbar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Cards -->
|
||||
<div class="grid gap-8 lg:grid-cols-4">
|
||||
{plans.map(plan => (
|
||||
<div
|
||||
class:list={[
|
||||
"relative rounded-xl border-2 bg-white transition-all duration-300",
|
||||
plan.highlighted
|
||||
? "border-primary-500 shadow-2xl scale-105"
|
||||
: "border-gray-200 hover:border-primary-300 hover:shadow-xl"
|
||||
]}
|
||||
>
|
||||
{plan.badge && (
|
||||
<div class="absolute -top-4 left-1/2 -translate-x-1/2">
|
||||
<span class="rounded-full bg-primary-600 px-4 py-1 text-xs font-semibold text-white">
|
||||
{plan.badge}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="p-6">
|
||||
<h3 class="mb-2 text-xl font-bold text-gray-900">{plan.name}</h3>
|
||||
<p class="mb-4 text-sm text-gray-500">{plan.description}</p>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-baseline">
|
||||
<span class="text-4xl font-bold text-gray-900">
|
||||
{formatPrice(plan.price)}
|
||||
</span>
|
||||
<span class="ml-2 text-gray-500">{plan.period}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={plan.href}
|
||||
class:list={[
|
||||
"mb-6 block w-full rounded-lg py-3 font-semibold text-center transition",
|
||||
plan.highlighted
|
||||
? "bg-primary-600 text-white hover:bg-primary-700"
|
||||
: "border-2 border-gray-200 text-gray-900 hover:border-primary-500 hover:bg-primary-50"
|
||||
]}
|
||||
>
|
||||
{plan.cta}
|
||||
</a>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500">
|
||||
Inklusive:
|
||||
</p>
|
||||
{plan.features.map(feature => (
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-sm text-gray-700">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Benefits -->
|
||||
<div class="mt-16 rounded-xl border border-gray-200 bg-white p-8">
|
||||
<div class="grid gap-8 lg:grid-cols-3">
|
||||
<div>
|
||||
<h4 class="mb-2 font-semibold text-gray-900">💳 Keine Kreditkarte erforderlich</h4>
|
||||
<p class="text-sm text-gray-600">
|
||||
Starte komplett kostenlos. Upgrade nur wenn du mehr brauchst.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-2 font-semibold text-gray-900">🔄 Jederzeit kündbar</h4>
|
||||
<p class="text-sm text-gray-600">
|
||||
Keine Vertragsbindung. Kündige monatlich ohne Probleme.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-2 font-semibold text-gray-900">🚀 Sofort startklar</h4>
|
||||
<p class="text-sm text-gray-600">
|
||||
Nach der Anmeldung kannst du sofort alle Features nutzen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Add table
Add a link
Reference in a new issue