mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:21:09 +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
|
|
@ -14,6 +14,7 @@
|
|||
"@astrojs/mdx": "^4.0.8",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@astrojs/tailwind": "^6.0.2",
|
||||
"@manacore/shared-landing-ui": "workspace:*",
|
||||
"astro": "^5.1.1",
|
||||
"tailwindcss": "^3.4.17"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,12 +1,223 @@
|
|||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import HeroSection from '../components/HeroSection.astro';
|
||||
import FeaturesSection from '../components/FeaturesSection.astro';
|
||||
import PricingSection from '../components/PricingSection.astro';
|
||||
|
||||
// Shared components
|
||||
import FeatureSection from '@manacore/shared-landing-ui/sections/FeatureSection.astro';
|
||||
import StepsSection from '@manacore/shared-landing-ui/sections/StepsSection.astro';
|
||||
import FAQSection from '@manacore/shared-landing-ui/sections/FAQSection.astro';
|
||||
import CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';
|
||||
import PricingSection from '@manacore/shared-landing-ui/sections/PricingSection.astro';
|
||||
|
||||
const appUrl = 'https://app.ulo.ad';
|
||||
|
||||
// Feature data
|
||||
const features = [
|
||||
{
|
||||
icon: '🔗',
|
||||
title: 'Smart Links',
|
||||
description: 'Kurze URLs mit Tracking, Ablaufdatum, Passwortschutz und UTM-Parametern für professionelles Marketing.'
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Detaillierte Analytics',
|
||||
description: 'Verfolge Klicks, geografische Herkunft, Geräte und Referrer in Echtzeit mit übersichtlichen Dashboards.'
|
||||
},
|
||||
{
|
||||
icon: '🎨',
|
||||
title: 'QR-Code Generator',
|
||||
description: 'Erstelle anpassbare QR-Codes in verschiedenen Farben, Formen und mit deinem Logo für jeden Link.'
|
||||
},
|
||||
{
|
||||
icon: '💳',
|
||||
title: 'Profile Cards',
|
||||
description: 'Beeindruckende Profilseiten mit Drag & Drop Builder - deine digitale Visitenkarte.'
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Workspaces',
|
||||
description: 'Arbeite im Team zusammen mit gemeinsamen Workspaces, Ordnern und granularen Berechtigungen.'
|
||||
},
|
||||
{
|
||||
icon: '🔌',
|
||||
title: 'API & Integrationen',
|
||||
description: 'RESTful API für automatisierte Workflows und Integration in deine bestehenden Tools.'
|
||||
}
|
||||
];
|
||||
|
||||
// Steps data
|
||||
const steps = [
|
||||
{
|
||||
number: '1',
|
||||
title: 'Link einfügen',
|
||||
description: 'Füge deine lange URL ein - egal ob Website, Social Media Post oder Dokument.',
|
||||
image: '/screenshots/paste.png'
|
||||
},
|
||||
{
|
||||
number: '2',
|
||||
title: 'Anpassen',
|
||||
description: 'Wähle einen Custom Slug, setze Ablaufdatum, Passwort oder UTM-Parameter.',
|
||||
image: '/screenshots/customize.png'
|
||||
},
|
||||
{
|
||||
number: '3',
|
||||
title: 'Teilen & Tracken',
|
||||
description: 'Teile deinen kurzen Link und verfolge alle Klicks in Echtzeit.',
|
||||
image: '/screenshots/share.png'
|
||||
}
|
||||
];
|
||||
|
||||
// Pricing data
|
||||
const pricingPlans = [
|
||||
{
|
||||
name: 'Free',
|
||||
price: '0',
|
||||
period: '/Monat',
|
||||
description: 'Perfekt zum Ausprobieren',
|
||||
features: [
|
||||
{ text: '10 Links pro Monat', included: true },
|
||||
{ text: 'Basis Analytics', included: true },
|
||||
{ text: 'QR-Code Generator', included: true },
|
||||
{ text: 'Link Anpassung', included: true },
|
||||
{ text: 'Unbegrenzte Links', included: false },
|
||||
{ text: 'Team Features', included: false }
|
||||
],
|
||||
cta: {
|
||||
text: 'Kostenlos starten',
|
||||
href: `${appUrl}/register`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
price: '4,99',
|
||||
period: '/Monat',
|
||||
description: 'Für Freelancer & Creators',
|
||||
features: [
|
||||
{ text: 'Unbegrenzte Links', included: true },
|
||||
{ text: 'Erweiterte Analytics', included: true },
|
||||
{ text: 'Custom QR Codes', included: true },
|
||||
{ text: 'API Zugang', included: true },
|
||||
{ text: 'Priority Support', included: true },
|
||||
{ text: 'Passwortschutz', included: true }
|
||||
],
|
||||
cta: {
|
||||
text: 'Pro wählen',
|
||||
href: `${appUrl}/register?plan=pro`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Pro Jährlich',
|
||||
price: '3,33',
|
||||
period: '/Monat',
|
||||
description: 'Spare 20€ pro Jahr',
|
||||
features: [
|
||||
{ text: 'Alle Pro Features', included: true },
|
||||
{ text: 'Unbegrenzte Links', included: true },
|
||||
{ text: 'Erweiterte Analytics', included: true },
|
||||
{ text: 'Custom QR Codes', included: true },
|
||||
{ text: 'API Zugang', included: true },
|
||||
{ text: 'Priority Support', included: true }
|
||||
],
|
||||
cta: {
|
||||
text: 'Jährlich sparen',
|
||||
href: `${appUrl}/register?plan=pro-yearly`
|
||||
},
|
||||
highlighted: true,
|
||||
badge: 'Spare 20€'
|
||||
},
|
||||
{
|
||||
name: 'Lifetime',
|
||||
price: '129,99',
|
||||
period: 'einmalig',
|
||||
description: 'Einmal zahlen, für immer nutzen',
|
||||
features: [
|
||||
{ text: 'Alle Pro Features', included: true },
|
||||
{ text: 'Lebenslanger Zugang', included: true },
|
||||
{ text: 'Alle zukünftigen Features', included: true },
|
||||
{ text: 'Early Access', included: true },
|
||||
{ text: 'Priority Support', included: true },
|
||||
{ text: 'Keine Abo-Gebühren', included: true }
|
||||
],
|
||||
cta: {
|
||||
text: 'Lifetime sichern',
|
||||
href: `${appUrl}/register?plan=lifetime`
|
||||
},
|
||||
badge: 'Einmalig'
|
||||
}
|
||||
];
|
||||
|
||||
// FAQ data
|
||||
const faqs = [
|
||||
{
|
||||
question: 'Wie lange bleiben meine Links aktiv?',
|
||||
answer: 'Im Free-Plan bleiben Links 1 Jahr aktiv. Mit Pro sind alle Links unbegrenzt gültig - es sei denn, du setzt selbst ein Ablaufdatum.'
|
||||
},
|
||||
{
|
||||
question: 'Kann ich meine eigene Domain verwenden?',
|
||||
answer: 'Ja! Mit Pro kannst du deine eigene Domain verbinden und branded Short-Links erstellen (z.B. links.deinefirma.de/kampagne).'
|
||||
},
|
||||
{
|
||||
question: 'Wie funktionieren die Analytics?',
|
||||
answer: 'Wir tracken Klicks, Herkunftsland, Gerät, Browser und Referrer - DSGVO-konform ohne Cookies. Du siehst alle Daten in Echtzeit im Dashboard.'
|
||||
},
|
||||
{
|
||||
question: 'Was sind Profile Cards?',
|
||||
answer: 'Profile Cards sind customizable Landing Pages für deine Links. Perfekt für Bio-Links, digitale Visitenkarten oder Link-in-Bio für Social Media.'
|
||||
},
|
||||
{
|
||||
question: 'Gibt es eine API?',
|
||||
answer: 'Ja! Mit Pro erhältst du vollen API-Zugang. Erstelle Links, rufe Analytics ab und integriere uLoad in deine Workflows programmatisch.'
|
||||
},
|
||||
{
|
||||
question: 'Kann ich mein Abo jederzeit kündigen?',
|
||||
answer: 'Ja, du kannst monatliche Abos jederzeit kündigen. Nach der Kündigung hast du noch bis zum Ende des Abrechnungszeitraums Zugang zu allen Pro-Features.'
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout title="Intelligenter URL-Shortener">
|
||||
<HeroSection />
|
||||
<FeaturesSection />
|
||||
<PricingSection />
|
||||
|
||||
<FeatureSection
|
||||
id="features"
|
||||
title="Alles was du für professionelles Link-Management brauchst"
|
||||
subtitle="Von einfacher URL-Verkürzung bis hin zu Team-Kollaboration - uLoad bietet alle Features die du brauchst."
|
||||
features={features}
|
||||
columns={3}
|
||||
variant="cards"
|
||||
/>
|
||||
|
||||
<StepsSection
|
||||
id="how-it-works"
|
||||
title="In 3 Schritten zum perfekten Link"
|
||||
subtitle="So einfach funktioniert uLoad"
|
||||
steps={steps}
|
||||
showImages={false}
|
||||
alternateLayout={true}
|
||||
class="bg-gray-50"
|
||||
/>
|
||||
|
||||
<PricingSection
|
||||
id="pricing"
|
||||
title="Transparente Preise, keine versteckten Kosten"
|
||||
subtitle="Starte kostenlos und upgrade wenn du bereit bist. Jederzeit kündbar."
|
||||
plans={pricingPlans}
|
||||
/>
|
||||
|
||||
<FAQSection
|
||||
id="faq"
|
||||
title="Häufig gestellte Fragen"
|
||||
subtitle="Alles was du über uLoad wissen musst"
|
||||
faqs={faqs}
|
||||
class="bg-gray-50"
|
||||
/>
|
||||
|
||||
<CTASection
|
||||
id="cta"
|
||||
title="Bereit für smarte Links?"
|
||||
subtitle="Starte jetzt kostenlos und erlebe, wie einfach professionelles Link-Management sein kann."
|
||||
primaryCta={{ text: 'Kostenlos starten', href: `${appUrl}/register` }}
|
||||
secondaryCta={{ text: 'Features entdecken', href: '/features' }}
|
||||
variant="default"
|
||||
/>
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -2,41 +2,84 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-dark: #2563eb;
|
||||
--color-background: #ffffff;
|
||||
--color-background-secondary: #f9fafb;
|
||||
--color-text: #111827;
|
||||
--color-text-secondary: #6b7280;
|
||||
--color-border: #e5e7eb;
|
||||
}
|
||||
/* uLoad Theme CSS Variables - Professional Blue (Light Theme) */
|
||||
:root {
|
||||
/* Primary colors - uLoad Blue */
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-hover: #2563eb;
|
||||
--color-primary-glow: rgba(59, 130, 246, 0.2);
|
||||
|
||||
.dark {
|
||||
--color-background: #111827;
|
||||
--color-background-secondary: #1f2937;
|
||||
--color-text: #f9fafb;
|
||||
--color-text-secondary: #9ca3af;
|
||||
--color-border: #374151;
|
||||
}
|
||||
/* Text colors (Light theme) */
|
||||
--color-text-primary: #111827;
|
||||
--color-text-secondary: #4b5563;
|
||||
--color-text-muted: #6b7280;
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
/* Background colors (Light theme) */
|
||||
--color-background-page: #ffffff;
|
||||
--color-background-card: #f9fafb;
|
||||
--color-background-card-hover: #f3f4f6;
|
||||
|
||||
body {
|
||||
@apply bg-white text-gray-900 antialiased;
|
||||
/* Border colors */
|
||||
--color-border: #e5e7eb;
|
||||
--color-border-hover: #d1d5db;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background-color: var(--color-background-page);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Animation utilities */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors duration-200;
|
||||
@apply inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors duration-200 shadow-lg hover:shadow-xl;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200;
|
||||
@apply inline-flex items-center justify-center px-6 py-3 text-base font-medium text-gray-700 bg-white border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all duration-200;
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
content: [
|
||||
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
|
||||
'../../packages/shared-landing-ui/src/**/*.{astro,html,js,jsx,ts,tsx}'
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// uLoad Professional Blue Theme (Light)
|
||||
primary: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
|
|
@ -15,7 +19,24 @@ export default {
|
|||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
950: '#172554'
|
||||
950: '#172554',
|
||||
DEFAULT: '#3b82f6',
|
||||
hover: '#2563eb',
|
||||
glow: 'rgba(59, 130, 246, 0.2)'
|
||||
},
|
||||
background: {
|
||||
page: '#ffffff',
|
||||
card: '#f9fafb',
|
||||
'card-hover': '#f3f4f6'
|
||||
},
|
||||
text: {
|
||||
primary: '#111827',
|
||||
secondary: '#4b5563',
|
||||
muted: '#6b7280'
|
||||
},
|
||||
border: {
|
||||
DEFAULT: '#e5e7eb',
|
||||
hover: '#d1d5db'
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue