refactor: restructure

monorepo with apps/ and services/
  directories

apps/uload/apps/landing/astro.config.mjs

@@ -0,0 +1,20 @@
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+
+export default defineConfig({
+  site: 'https://ulo.ad',
+  integrations: [
+    tailwind(),
+    mdx(),
+    sitemap()
+  ],
+  i18n: {
+    defaultLocale: 'de',
+    locales: ['de', 'en'],
+    routing: {
+      prefixDefaultLocale: false
+    }
+  }
+});

apps/uload/apps/landing/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@uload/landing",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "check": "astro check"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@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"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "typescript": "^5.7.2"
+  }
+}

apps/uload/apps/landing/src/components/Footer.astro

@@ -0,0 +1,95 @@
+---
+const currentYear = new Date().getFullYear();
+
+const footerLinks = {
+  produkt: [
+    { href: '/features', label: 'Features' },
+    { href: '/#pricing', label: 'Preise' },
+    { href: '/blog', label: 'Blog' },
+  ],
+  unternehmen: [
+    { href: '/about', label: 'Über uns' },
+  ],
+  rechtliches: [
+    { href: '/datenschutz', label: 'Datenschutz' },
+    { href: '/impressum', label: 'Impressum' },
+    { href: '/agb', label: 'AGB' },
+    { href: '/sicherheit', label: 'Sicherheit' },
+  ],
+};
+
+const appUrl = 'https://app.ulo.ad';
+---
+
+<footer class="bg-gray-900 text-gray-300">
+  <div class="container-custom py-12 md:py-16">
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+      <!-- Brand -->
+      <div class="col-span-2 md:col-span-1">
+        <a href="/" class="flex items-center gap-2 mb-4">
+          <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
+            <span class="text-white font-bold text-lg">u</span>
+          </div>
+          <span class="text-xl font-bold text-white">uLoad</span>
+        </a>
+        <p class="text-sm text-gray-400 mb-4">
+          Der intelligente URL-Shortener für Profis. Verkürzen Sie Links, erstellen Sie QR-Codes und analysieren Sie Klicks.
+        </p>
+      </div>
+
+      <!-- Produkt -->
+      <div>
+        <h3 class="text-white font-semibold mb-4">Produkt</h3>
+        <ul class="space-y-2">
+          {footerLinks.produkt.map(link => (
+            <li>
+              <a href={link.href} class="text-gray-400 hover:text-white transition-colors text-sm">
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <!-- Unternehmen -->
+      <div>
+        <h3 class="text-white font-semibold mb-4">Unternehmen</h3>
+        <ul class="space-y-2">
+          {footerLinks.unternehmen.map(link => (
+            <li>
+              <a href={link.href} class="text-gray-400 hover:text-white transition-colors text-sm">
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <!-- Rechtliches -->
+      <div>
+        <h3 class="text-white font-semibold mb-4">Rechtliches</h3>
+        <ul class="space-y-2">
+          {footerLinks.rechtliches.map(link => (
+            <li>
+              <a href={link.href} class="text-gray-400 hover:text-white transition-colors text-sm">
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+
+    <!-- Bottom -->
+    <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+      <p class="text-sm text-gray-400">
+        © {currentYear} uLoad. Alle Rechte vorbehalten.
+      </p>
+      <div class="flex items-center gap-4">
+        <a href={`${appUrl}/login`} class="text-sm text-gray-400 hover:text-white transition-colors">
+          App öffnen
+        </a>
+      </div>
+    </div>
+  </div>
+</footer>

apps/uload/apps/landing/src/components/HeroSection.astro

@@ -0,0 +1,138 @@
+---
+const appUrl = 'https://app.ulo.ad';
+---
+
+<section class="relative overflow-hidden bg-gradient-to-br from-primary-500/5 via-white to-purple-600/5 px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+  <!-- Background decoration -->
+  <div class="absolute inset-0 -z-10">
+    <div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-96 w-96 rounded-full bg-primary-500/10 blur-3xl"></div>
+    <div class="absolute bottom-0 right-0 translate-x-1/3 translate-y-1/3 h-96 w-96 rounded-full bg-purple-600/10 blur-3xl"></div>
+  </div>
+
+  <div class="mx-auto max-w-7xl">
+    <div class="text-center">
+      <!-- Trust badges -->
+      <div class="mb-6 flex flex-wrap justify-center gap-4 text-sm text-gray-500">
+        <span class="flex items-center gap-1">
+          <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+          </svg>
+          DSGVO-konform
+        </span>
+        <span class="flex items-center gap-1">
+          <svg class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+          Blitzschnell
+        </span>
+        <span class="flex items-center gap-1">
+          <svg class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+          100% Sicher
+        </span>
+      </div>
+
+      <!-- Main headline -->
+      <h1 class="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
+        More than links.
+        <span class="bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent">
+          Your digital identity.
+        </span>
+      </h1>
+
+      <p class="mx-auto mb-8 max-w-2xl text-lg text-gray-600 sm:text-xl">
+        Der einzige Link-Shortener mit integriertem Profile-Builder.
+        Erstelle kurze Links, beeindruckende Profilkarten und manage alles im Team.
+      </p>
+
+      <!-- CTA Buttons -->
+      <div class="mb-12 flex flex-col justify-center gap-4 sm:flex-row">
+        <a
+          href={`${appUrl}/register`}
+          class="rounded-lg bg-primary-600 px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-700 hover:shadow-xl"
+        >
+          Kostenlos starten →
+        </a>
+        <a
+          href="#features"
+          class="rounded-lg border-2 border-gray-200 bg-white px-8 py-3 font-semibold text-gray-900 transition hover:border-primary-500 hover:shadow-lg"
+        >
+          Features entdecken
+        </a>
+      </div>
+
+      <!-- Shortener teaser -->
+      <div class="mx-auto max-w-2xl">
+        <div class="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white/80 p-4 backdrop-blur sm:flex-row sm:p-2">
+          <input
+            type="url"
+            placeholder="Deine lange URL hier einfügen..."
+            disabled
+            class="flex-1 rounded-lg border-0 bg-transparent px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none sm:py-2"
+          />
+          <a
+            href={`${appUrl}/register`}
+            class="rounded-lg bg-primary-600 px-6 py-3 font-medium text-white transition hover:bg-primary-700 sm:py-2 text-center"
+          >
+            Kürzen →
+          </a>
+        </div>
+        <p class="mt-2 text-sm text-gray-500">
+          Keine Anmeldung erforderlich • Kostenlos • QR-Code inklusive
+        </p>
+      </div>
+    </div>
+
+    <!-- Visual preview -->
+    <div class="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
+      <!-- Link shortening preview -->
+      <div class="group relative rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-xl">
+        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
+          <svg class="h-6 w-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+          </svg>
+        </div>
+        <h3 class="mb-2 font-semibold text-gray-900">Smart Links</h3>
+        <p class="text-sm text-gray-600">
+          Kurze URLs mit Tracking, Ablaufdatum und Passwortschutz
+        </p>
+        <a href="/features" class="mt-4 inline-block text-xs text-primary-600 group-hover:underline">
+          Mehr erfahren →
+        </a>
+      </div>
+
+      <!-- Profile cards preview -->
+      <div class="group relative rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-xl">
+        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100">
+          <svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
+          </svg>
+        </div>
+        <h3 class="mb-2 font-semibold text-gray-900">Profile Cards</h3>
+        <p class="text-sm text-gray-600">
+          Beeindruckende Profilseiten mit Drag & Drop Builder
+        </p>
+        <a href="/features" class="mt-4 inline-block text-xs text-purple-600 group-hover:underline">
+          Templates ansehen →
+        </a>
+      </div>
+
+      <!-- Team collaboration preview -->
+      <div class="group relative rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-xl">
+        <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-green-100">
+          <svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+          </svg>
+        </div>
+        <h3 class="mb-2 font-semibold text-gray-900">Team Workspace</h3>
+        <p class="text-sm text-gray-600">
+          Gemeinsam Links verwalten mit granularen Berechtigungen
+        </p>
+        <a href="/features" class="mt-4 inline-block text-xs text-green-600 group-hover:underline">
+          Für Teams →
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

apps/uload/apps/landing/src/components/Navigation.astro

@@ -0,0 +1,87 @@
+---
+const navLinks = [
+  { href: '/features', label: 'Features' },
+  { href: '/blog', label: 'Blog' },
+  { href: '/about', label: 'Über uns' },
+];
+
+const appUrl = 'https://app.ulo.ad';
+---
+
+<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
+  <nav class="container-custom">
+    <div class="flex items-center justify-between h-16">
+      <!-- Logo -->
+      <a href="/" class="flex items-center gap-2">
+        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
+          <span class="text-white font-bold text-lg">u</span>
+        </div>
+        <span class="text-xl font-bold text-gray-900">uLoad</span>
+      </a>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden md:flex items-center gap-8">
+        {navLinks.map(link => (
+          <a
+            href={link.href}
+            class="text-gray-600 hover:text-gray-900 font-medium transition-colors"
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+
+      <!-- CTA Buttons -->
+      <div class="hidden md:flex items-center gap-4">
+        <a href={`${appUrl}/login`} class="text-gray-600 hover:text-gray-900 font-medium">
+          Anmelden
+        </a>
+        <a href={`${appUrl}/register`} class="btn-primary">
+          Kostenlos starten
+        </a>
+      </div>
+
+      <!-- Mobile Menu Button -->
+      <button
+        id="mobile-menu-btn"
+        class="md:hidden p-2 text-gray-600 hover:text-gray-900"
+        aria-label="Menü öffnen"
+      >
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="hidden md:hidden pb-4">
+      <div class="flex flex-col gap-4">
+        {navLinks.map(link => (
+          <a
+            href={link.href}
+            class="text-gray-600 hover:text-gray-900 font-medium py-2"
+          >
+            {link.label}
+          </a>
+        ))}
+        <div class="flex flex-col gap-2 pt-4 border-t border-gray-100">
+          <a href={`${appUrl}/login`} class="btn-secondary text-center">
+            Anmelden
+          </a>
+          <a href={`${appUrl}/register`} class="btn-primary text-center">
+            Kostenlos starten
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<script>
+  const menuBtn = document.getElementById('mobile-menu-btn');
+  const mobileMenu = document.getElementById('mobile-menu');
+
+  menuBtn?.addEventListener('click', () => {
+    mobileMenu?.classList.toggle('hidden');
+  });
+</script>

apps/uload/apps/landing/src/content/blog/link-tracking-guide.md

@@ -0,0 +1,85 @@
+---
+title: Der ultimative Link-Tracking Guide für 2024
+description: Erfahren Sie, wie Sie mit modernem Link-Tracking Ihre Marketing-Performance messbar verbessern und dabei DSGVO-konform bleiben.
+pubDate: 2024-01-20
+author: Till Schneider
+tags: [tracking, analytics, dsgvo, marketing]
+---
+
+Link-Tracking ist der Schlüssel zu datengetriebenem Marketing. In diesem umfassenden Guide zeigen wir Ihnen, wie Sie Ihre Links professionell tracken, dabei datenschutzkonform bleiben und Ihre Conversion-Rate signifikant steigern.
+
+## Was ist Link-Tracking?
+
+Link-Tracking ermöglicht es Ihnen, das Verhalten Ihrer Nutzer zu verstehen:
+- Woher kommen Ihre Besucher?
+- Welche Kampagnen funktionieren?
+- Wie hoch ist Ihre Conversion-Rate?
+- Welche Inhalte performen am besten?
+
+## Die wichtigsten Metriken
+
+### 1. Click-Through-Rate (CTR)
+Die CTR zeigt, wie viele Personen Ihren Link gesehen und geklickt haben. Eine gute CTR liegt je nach Kanal zwischen 2-5%.
+
+### 2. Conversion Rate
+Der Prozentsatz der Klicks, die zu einer gewünschten Aktion führen.
+
+### 3. Bounce Rate
+Wie viele Nutzer verlassen Ihre Seite sofort wieder?
+
+### 4. Geographic Distribution
+Verstehen Sie, aus welchen Ländern und Regionen Ihre Besucher kommen.
+
+## UTM-Parameter richtig einsetzen
+
+UTM-Parameter sind der Standard für Campaign-Tracking:
+
+```
+https://ulo.ad/angebot
+?utm_source=newsletter
+&utm_medium=email
+&utm_campaign=winter-sale
+```
+
+### Die 5 UTM-Parameter
+
+1. **utm_source**: Woher kommt der Traffic?
+2. **utm_medium**: Welches Medium?
+3. **utm_campaign**: Welche Kampagne?
+4. **utm_content**: Welcher spezifische Link?
+5. **utm_term**: Welches Keyword?
+
+## DSGVO-konformes Tracking
+
+### Was ist erlaubt?
+
+✅ **Anonymisierte Daten**
+- Gerätetyp
+- Browser
+- Ungefährer Standort
+- Referrer
+
+### Was braucht Zustimmung?
+
+❌ **Personenbezogene Daten**
+- Vollständige IP-Adressen
+- Device Fingerprinting
+- Cross-Site Tracking
+
+## Best Practices für Link-Tracking
+
+### 1. Konsistente Namenskonvention
+
+Entwickeln Sie ein einheitliches Schema für Ihre Kampagnen.
+
+### 2. Dokumentation führen
+
+Erstellen Sie eine Tracking-Tabelle für alle Kampagnen.
+
+### 3. Regelmäßige Bereinigung
+
+Löschen Sie alte, inaktive Links regelmäßig.
+
+## Fazit
+
+Professionelles Link-Tracking ist kein Nice-to-have, sondern ein Must-have für erfolgreiches digitales Marketing. Mit den richtigen Tools und Prozessen können Sie Ihre Marketing-Performance signifikant steigern.

apps/uload/apps/landing/src/content/blog/psychologie-kurzer-urls.md

@@ -0,0 +1,73 @@
+---
+title: Die Psychologie kurzer URLs - Warum unser Gehirn sie liebt
+description: 42% weniger Klicks bei langen URLs – diese erstaunliche Zahl zeigt, wie stark die Länge eines Links unsere Entscheidung beeinflusst. Erfahren Sie die Wissenschaft dahinter.
+pubDate: 2024-01-15
+author: Till Schneider
+tags: [urls, psychology, conversion, marketing]
+---
+
+**42% weniger Klicks bei langen URLs** – diese erstaunliche Zahl zeigt, wie stark die Länge eines Links unsere Entscheidung beeinflusst, darauf zu klicken oder nicht. In diesem umfassenden Artikel tauchen wir tief in die Psychologie hinter kurzen URLs ein und zeigen Ihnen, wie Sie dieses Wissen für Ihren digitalen Erfolg nutzen können.
+
+## Das Problem mit langen URLs: Wenn Links Misstrauen erzeugen
+
+Stellen Sie sich vor: Fast die Hälfte Ihrer potenziellen Besucher klickt nicht auf Ihren Link – nur weil er zu lang ist. Was auf den ersten Blick wie eine technische Kleinigkeit erscheint, ist in Wahrheit ein psychologisches Phänomen mit enormen Auswirkungen auf Ihre Online-Performance.
+
+### Die Spam-Alarm-Reaktion unseres Gehirns
+
+Aktuelle Studien zeigen eindeutig: URLs, die länger als 100 Zeichen sind, lösen automatisch Misstrauen aus. Unser Gehirn hat über Jahre hinweg gelernt, dass lange, unleserliche Links mit unzähligen Parametern oft zu zweifelhaften Inhalten führen.
+
+Vergleichen Sie diese beiden URLs:
+
+**Lange URL (schlecht):**
+```
+https://example.com/product?id=12345&utm_source=newsletter&utm_medium=email&utm_campaign=summer2024
+```
+
+**Kurze URL (gut):**
+```
+https://ulo.ad/summer-sale
+```
+
+### Mobile Nutzer: Die vergessene Mehrheit
+
+In einer Welt, in der über 60% des Web-Traffics von mobilen Geräten kommt, sind lange URLs ein noch größeres Problem. Mobile Nutzer scrollen definitiv nicht horizontal, um einen Link vollständig zu sehen.
+
+## Die Wissenschaft dahinter: Cognitive Load Theory
+
+Die Cognitive Load Theory erklärt, warum kurze URLs so effektiv sind. Unser Gehirn ist darauf programmiert, Energie zu sparen. Bei der Verarbeitung von Informationen sucht es immer nach dem Weg des geringsten Widerstands.
+
+## Die vier Säulen des Link-Vertrauens
+
+1. **Erkennbare Domain (60% Wichtigkeit)** - Menschen wollen wissen, wo sie landen werden
+2. **Keine kryptischen Zeichen (25% Wichtigkeit)** - Zufällige Zahlen-Buchstaben-Kombinationen schrecken ab
+3. **Optimale Länge (10% Wichtigkeit)** - Die magische Grenze liegt bei etwa 50 Zeichen
+4. **HTTPS-Verschlüsselung (5% Wichtigkeit)** - Ein Hygienefaktor
+
+## Praktische Optimierungsstrategien
+
+### 1. Sprechende URLs verwenden
+
+❌ **Schlecht:** `ulo.ad/p47829`
+✅ **Gut:** `ulo.ad/sommer-sale`
+
+### 2. Die 50-Zeichen-Regel
+
+Halten Sie Ihre URLs unter 50 Zeichen. Das ist:
+- Kurz genug für Twitter/X
+- Lesbar auf Mobilgeräten
+- Merkbar für Nutzer
+
+### 3. A/B-Testing ist Ihr Freund
+
+Testen Sie verschiedene URL-Varianten und messen Sie die Performance.
+
+## Fazit: Die Macht der Kürze
+
+Die Psychologie kurzer URLs ist keine Raketenwissenschaft, aber ihre Auswirkungen sind enorm. In einer Welt, in der Aufmerksamkeit die wertvollste Währung ist, können kurze, vertrauenswürdige Links den Unterschied zwischen Erfolg und Misserfolg ausmachen.
+
+### Die wichtigsten Takeaways
+
+1. **42% weniger Klicks** bei URLs über 100 Zeichen
+2. **Cognitive Load Theory**: Unser Gehirn liebt Einfachheit
+3. **50 Zeichen** ist die magische Grenze
+4. **Sprechende URLs** performen 39% besser

apps/uload/apps/landing/src/content/config.ts

@@ -0,0 +1,17 @@
+import { defineCollection, z } from 'astro:content';
+
+const blogCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.date(),
+    author: z.string().optional(),
+    image: z.string().optional(),
+    tags: z.array(z.string()).optional(),
+  }),
+});
+
+export const collections = {
+  blog: blogCollection,
+};

apps/uload/apps/landing/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

apps/uload/apps/landing/src/layouts/BaseLayout.astro

@@ -0,0 +1,52 @@
+---
+import '../styles/global.css';
+import Navigation from '../components/Navigation.astro';
+import Footer from '../components/Footer.astro';
+
+interface Props {
+  title: string;
+  description?: string;
+  ogImage?: string;
+}
+
+const { title, description = 'uLoad - Der intelligente URL-Shortener für Profis. Verkürzen Sie Links, erstellen Sie QR-Codes und analysieren Sie Klicks.', ogImage = '/og-image.png' } = Astro.props;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+---
+
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="canonical" href={canonicalURL} />
+
+    <title>{title} | uLoad</title>
+    <meta name="description" content={description} />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content={new URL(ogImage, Astro.site)} />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={new URL(ogImage, Astro.site)} />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body class="min-h-screen flex flex-col">
+    <Navigation />
+    <main class="flex-grow">
+      <slot />
+    </main>
+    <Footer />
+  </body>
+</html>

apps/uload/apps/landing/src/layouts/LegalLayout.astro

@@ -0,0 +1,32 @@
+---
+import BaseLayout from './BaseLayout.astro';
+
+interface Props {
+  title: string;
+  description?: string;
+  lastUpdated?: string;
+}
+
+const { title, description, lastUpdated } = Astro.props;
+---
+
+<BaseLayout title={title} description={description}>
+  <article class="px-4 py-16 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+      <header class="mb-12">
+        <h1 class="text-4xl font-bold tracking-tight text-gray-900 mb-4">
+          {title}
+        </h1>
+        {lastUpdated && (
+          <p class="text-gray-500">
+            Zuletzt aktualisiert: {lastUpdated}
+          </p>
+        )}
+      </header>
+
+      <div class="prose prose-lg prose-gray max-w-none">
+        <slot />
+      </div>
+    </div>
+  </article>
+</BaseLayout>

apps/uload/apps/landing/src/pages/about.astro

@@ -0,0 +1,124 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const stats = [
+  { value: '10K+', label: 'Aktive Nutzer' },
+  { value: '500K+', label: 'Erstellte Links' },
+  { value: '2M+', label: 'Klicks verfolgt' },
+  { value: '99.9%', label: 'Uptime' }
+];
+
+const values = [
+  {
+    icon: '🎯',
+    title: 'Einfachheit',
+    description: 'Wir glauben, dass professionelle Tools nicht kompliziert sein müssen. uLoad ist intuitiv und sofort einsatzbereit.'
+  },
+  {
+    icon: '🔒',
+    title: 'Datenschutz',
+    description: 'Ihre Daten gehören Ihnen. Wir sind DSGVO-konform und speichern nur was wirklich notwendig ist.'
+  },
+  {
+    icon: '⚡',
+    title: 'Performance',
+    description: 'Schnelle Links bedeuten bessere Nutzererfahrung. Unsere Infrastruktur ist auf Geschwindigkeit optimiert.'
+  },
+  {
+    icon: '💪',
+    title: 'Zuverlässigkeit',
+    description: 'Mit 99.9% Uptime können Sie sich auf uLoad verlassen - für jede Kampagne, jedes Projekt.'
+  }
+];
+---
+
+<BaseLayout title="Über uns" description="Erfahren Sie mehr über uLoad - den intelligenten URL-Shortener für Profis.">
+  <!-- Hero -->
+  <section class="bg-gradient-to-br from-primary-500/5 via-white to-purple-600/5 px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+    <div class="mx-auto max-w-7xl">
+      <div class="text-center">
+        <h1 class="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          Links die verbinden
+        </h1>
+        <p class="mx-auto max-w-2xl text-lg text-gray-600">
+          uLoad wurde entwickelt um Link-Management einfach, sicher und effektiv zu machen.
+          Für Einzelpersonen, Teams und Unternehmen.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Stats -->
+  <section class="bg-primary-600 px-4 py-12 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-7xl">
+      <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
+        {stats.map(stat => (
+          <div class="text-center">
+            <div class="text-4xl font-bold text-white">{stat.value}</div>
+            <div class="mt-1 text-primary-100">{stat.label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- Story -->
+  <section class="px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+    <div class="mx-auto max-w-3xl">
+      <h2 class="mb-8 text-center text-3xl font-bold text-gray-900">
+        Unsere Geschichte
+      </h2>
+      <div class="prose prose-lg mx-auto text-gray-600">
+        <p>
+          uLoad entstand aus einer einfachen Frustration: Bestehende URL-Shortener waren entweder
+          zu kompliziert, zu teuer oder boten nicht die Features die moderne Teams brauchen.
+        </p>
+        <p>
+          Wir wollten einen Service schaffen, der sowohl für Einsteiger als auch für Power-User
+          funktioniert. Ein Tool das mit Ihren Anforderungen wächst - von der ersten verkürzten
+          URL bis zum Enterprise-Einsatz.
+        </p>
+        <p>
+          Heute nutzen tausende Nutzer uLoad täglich für ihre Marketing-Kampagnen, Social-Media-Posts
+          und geschäftliche Kommunikation. Und wir arbeiten jeden Tag daran, uLoad noch besser zu machen.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Values -->
+  <section class="bg-gray-50 px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+    <div class="mx-auto max-w-7xl">
+      <h2 class="mb-12 text-center text-3xl font-bold text-gray-900">
+        Unsere Werte
+      </h2>
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+        {values.map(value => (
+          <div class="rounded-xl bg-white p-6 shadow-sm">
+            <div class="mb-4 text-4xl">{value.icon}</div>
+            <h3 class="mb-2 text-lg font-semibold text-gray-900">{value.title}</h3>
+            <p class="text-sm text-gray-600">{value.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="px-4 py-16 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-4xl text-center">
+      <h2 class="mb-4 text-3xl font-bold text-gray-900">
+        Werden Sie Teil der uLoad Community
+      </h2>
+      <p class="mb-8 text-lg text-gray-600">
+        Schließen Sie sich tausenden zufriedenen Nutzern an.
+      </p>
+      <a
+        href="https://app.ulo.ad/register"
+        class="inline-block rounded-lg bg-primary-600 px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-700"
+      >
+        Jetzt kostenlos starten →
+      </a>
+    </div>
+  </section>
+</BaseLayout>

apps/uload/apps/landing/src/pages/agb.astro

@@ -0,0 +1,59 @@
+---
+import LegalLayout from '../layouts/LegalLayout.astro';
+---
+
+<LegalLayout title="Allgemeine Geschäftsbedingungen" lastUpdated="Januar 2024">
+  <h2>§ 1 Geltungsbereich</h2>
+  <p>
+    Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für alle Verträge zwischen uLoad und dem Nutzer über die Nutzung der auf der Website ulo.ad angebotenen Dienste.
+  </p>
+
+  <h2>§ 2 Leistungsbeschreibung</h2>
+  <p>
+    uLoad bietet einen URL-Verkürzungsdienst sowie ergänzende Dienste wie Analytics, QR-Code-Generierung und Team-Workspaces an. Der genaue Leistungsumfang ergibt sich aus der jeweiligen Produktbeschreibung zum Zeitpunkt der Bestellung.
+  </p>
+
+  <h2>§ 3 Registrierung und Nutzerkonto</h2>
+  <p>
+    Für die Nutzung bestimmter Funktionen ist eine Registrierung erforderlich. Der Nutzer verpflichtet sich, wahrheitsgemäße Angaben zu machen und diese aktuell zu halten. Der Nutzer ist für die Geheimhaltung seiner Zugangsdaten verantwortlich.
+  </p>
+
+  <h2>§ 4 Nutzungsregeln</h2>
+  <p>Der Nutzer verpflichtet sich, den Dienst nicht für rechtswidrige Zwecke zu nutzen. Insbesondere ist es untersagt:</p>
+  <ul>
+    <li>Links zu illegalen Inhalten zu erstellen</li>
+    <li>Spam oder Phishing-Links zu verbreiten</li>
+    <li>Die Dienste für automatisierte Massenanfragen zu missbrauchen</li>
+    <li>Andere Nutzer zu belästigen oder zu täuschen</li>
+  </ul>
+
+  <h2>§ 5 Preise und Zahlung</h2>
+  <p>
+    Die Nutzung der Basisfunktionen ist kostenlos. Für erweiterte Funktionen können kostenpflichtige Abonnements abgeschlossen werden. Alle Preise verstehen sich inklusive der gesetzlichen Mehrwertsteuer.
+  </p>
+
+  <h2>§ 6 Kündigung</h2>
+  <p>
+    Kostenlose Konten können jederzeit gelöscht werden. Kostenpflichtige Abonnements können zum Ende der jeweiligen Abrechnungsperiode gekündigt werden.
+  </p>
+
+  <h2>§ 7 Haftung</h2>
+  <p>
+    uLoad haftet nur für Schäden, die auf vorsätzlichem oder grob fahrlässigem Verhalten beruhen. Die Haftung für leichte Fahrlässigkeit ist ausgeschlossen, soweit nicht wesentliche Vertragspflichten verletzt wurden.
+  </p>
+
+  <h2>§ 8 Datenschutz</h2>
+  <p>
+    Die Verarbeitung personenbezogener Daten erfolgt gemäß unserer Datenschutzerklärung und den geltenden Datenschutzgesetzen.
+  </p>
+
+  <h2>§ 9 Änderungen der AGB</h2>
+  <p>
+    uLoad behält sich vor, diese AGB jederzeit zu ändern. Änderungen werden dem Nutzer rechtzeitig mitgeteilt. Mit der weiteren Nutzung des Dienstes nach Inkrafttreten der Änderungen erklärt sich der Nutzer mit diesen einverstanden.
+  </p>
+
+  <h2>§ 10 Schlussbestimmungen</h2>
+  <p>
+    Es gilt das Recht der Bundesrepublik Deutschland. Sollten einzelne Bestimmungen dieser AGB unwirksam sein, bleibt die Wirksamkeit der übrigen Bestimmungen unberührt.
+  </p>
+</LegalLayout>

apps/uload/apps/landing/src/pages/blog/[slug].astro

@@ -0,0 +1,83 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection, type CollectionEntry } from 'astro:content';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map(post => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+type Props = { post: CollectionEntry<'blog'> };
+const { post } = Astro.props;
+const { Content } = await post.render();
+
+function formatDate(date: Date): string {
+  return new Intl.DateTimeFormat('de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+}
+---
+
+<BaseLayout title={post.data.title} description={post.data.description}>
+  <article class="px-4 py-16 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+      <!-- Header -->
+      <header class="mb-12">
+        <a href="/blog" class="inline-flex items-center gap-2 text-sm text-primary-600 hover:underline mb-6">
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+          Zurück zum Blog
+        </a>
+        <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl mb-4">
+          {post.data.title}
+        </h1>
+        <div class="flex items-center gap-4 text-gray-500">
+          <time datetime={post.data.pubDate.toISOString()}>
+            {formatDate(post.data.pubDate)}
+          </time>
+          {post.data.author && (
+            <>
+              <span>•</span>
+              <span>{post.data.author}</span>
+            </>
+          )}
+        </div>
+        {post.data.tags && (
+          <div class="mt-4 flex flex-wrap gap-2">
+            {post.data.tags.map(tag => (
+              <span class="inline-block rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </header>
+
+      <!-- Content -->
+      <div class="prose prose-lg prose-gray max-w-none prose-headings:font-bold prose-a:text-primary-600 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded">
+        <Content />
+      </div>
+
+      <!-- Footer -->
+      <footer class="mt-16 pt-8 border-t border-gray-200">
+        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
+          <a href="/blog" class="text-primary-600 hover:underline">
+            ← Alle Artikel
+          </a>
+          <a
+            href="https://app.ulo.ad/register"
+            class="inline-block rounded-lg bg-primary-600 px-6 py-2 font-medium text-white transition hover:bg-primary-700"
+          >
+            Jetzt uLoad testen
+          </a>
+        </div>
+      </footer>
+    </div>
+  </article>
+</BaseLayout>

apps/uload/apps/landing/src/pages/blog/index.astro

@@ -0,0 +1,68 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+const posts = (await getCollection('blog')).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+function formatDate(date: Date): string {
+  return new Intl.DateTimeFormat('de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+}
+---
+
+<BaseLayout title="Blog" description="Tipps, Tricks und Best Practices rund um Link-Management, URL-Verkürzung und digitales Marketing.">
+  <section 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">
+        <h1 class="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          Blog
+        </h1>
+        <p class="mx-auto max-w-2xl text-lg text-gray-600">
+          Tipps, Tricks und Best Practices rund um Link-Management und digitales Marketing.
+        </p>
+      </div>
+
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {posts.map(post => (
+          <article class="group rounded-xl border border-gray-200 bg-white overflow-hidden transition hover:shadow-xl">
+            <a href={`/blog/${post.slug}`} class="block">
+              <div class="p-6">
+                <div class="flex items-center gap-2 text-sm text-gray-500 mb-3">
+                  <time datetime={post.data.pubDate.toISOString()}>
+                    {formatDate(post.data.pubDate)}
+                  </time>
+                  {post.data.author && (
+                    <>
+                      <span>•</span>
+                      <span>{post.data.author}</span>
+                    </>
+                  )}
+                </div>
+                <h2 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-primary-600 transition-colors">
+                  {post.data.title}
+                </h2>
+                <p class="text-gray-600 line-clamp-3">
+                  {post.data.description}
+                </p>
+                {post.data.tags && (
+                  <div class="mt-4 flex flex-wrap gap-2">
+                    {post.data.tags.slice(0, 3).map(tag => (
+                      <span class="inline-block rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-600">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+    </div>
+  </section>
+</BaseLayout>

apps/uload/apps/landing/src/pages/datenschutz.astro

@@ -0,0 +1,76 @@
+---
+import LegalLayout from '../layouts/LegalLayout.astro';
+---
+
+<LegalLayout title="Datenschutzerklärung" lastUpdated="Januar 2024">
+  <h2>1. Datenschutz auf einen Blick</h2>
+
+  <h3>Allgemeine Hinweise</h3>
+  <p>
+    Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
+  </p>
+
+  <h3>Datenerfassung auf dieser Website</h3>
+  <p>
+    <strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong><br />
+    Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.
+  </p>
+
+  <h3>Wie erfassen wir Ihre Daten?</h3>
+  <p>
+    Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.B. um Daten handeln, die Sie in ein Kontaktformular eingeben.
+  </p>
+  <p>
+    Andere Daten werden automatisch beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z.B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs).
+  </p>
+
+  <h2>2. Hosting</h2>
+  <p>
+    Wir hosten die Inhalte unserer Website bei folgendem Anbieter:
+  </p>
+  <p>
+    Die Server befinden sich in Deutschland und unterliegen den strengen deutschen Datenschutzgesetzen.
+  </p>
+
+  <h2>3. Allgemeine Hinweise und Pflichtinformationen</h2>
+
+  <h3>Datenschutz</h3>
+  <p>
+    Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
+  </p>
+
+  <h3>Hinweis zur verantwortlichen Stelle</h3>
+  <p>
+    Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist im Impressum genannt.
+  </p>
+
+  <h2>4. Datenerfassung auf dieser Website</h2>
+
+  <h3>Cookies</h3>
+  <p>
+    Unsere Internetseiten verwenden so genannte „Cookies". Cookies sind kleine Datenpakete und richten auf Ihrem Endgerät keinen Schaden an. Sie werden entweder vorübergehend für die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente Cookies) auf Ihrem Endgerät gespeichert.
+  </p>
+
+  <h3>Server-Log-Dateien</h3>
+  <p>
+    Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:
+  </p>
+  <ul>
+    <li>Browsertyp und Browserversion</li>
+    <li>verwendetes Betriebssystem</li>
+    <li>Referrer URL</li>
+    <li>Hostname des zugreifenden Rechners</li>
+    <li>Uhrzeit der Serveranfrage</li>
+    <li>IP-Adresse (anonymisiert)</li>
+  </ul>
+
+  <h2>5. Ihre Rechte</h2>
+  <p>
+    Sie haben jederzeit das Recht, unentgeltlich Auskunft über Herkunft, Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben außerdem ein Recht, die Berichtigung oder Löschung dieser Daten zu verlangen.
+  </p>
+
+  <h2>6. Kontakt</h2>
+  <p>
+    Bei Fragen zum Datenschutz können Sie sich jederzeit an uns wenden. Die Kontaktdaten finden Sie im Impressum.
+  </p>
+</LegalLayout>

apps/uload/apps/landing/src/pages/features.astro

@@ -0,0 +1,158 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const appUrl = 'https://app.ulo.ad';
+
+const featureCategories = [
+  {
+    title: 'Link Management',
+    features: [
+      {
+        icon: '🔗',
+        title: 'URL-Verkürzung',
+        description: 'Verwandeln Sie lange URLs in kurze, merkbare Links. Perfekt für Social Media, E-Mails und gedruckte Materialien.'
+      },
+      {
+        icon: '✏️',
+        title: 'Custom Short Codes',
+        description: 'Erstellen Sie personalisierte Kurz-URLs wie ulo.ad/mein-link für bessere Wiedererkennung.'
+      },
+      {
+        icon: '📅',
+        title: 'Ablaufdatum',
+        description: 'Setzen Sie automatische Ablaufdaten für zeitlich begrenzte Aktionen und Kampagnen.'
+      },
+      {
+        icon: '🔒',
+        title: 'Passwortschutz',
+        description: 'Schützen Sie sensible Links mit Passwörtern für zusätzliche Sicherheit.'
+      }
+    ]
+  },
+  {
+    title: 'Analytics & Tracking',
+    features: [
+      {
+        icon: '📊',
+        title: 'Klick-Tracking',
+        description: 'Verfolgen Sie jeden Klick in Echtzeit mit detaillierten Statistiken.'
+      },
+      {
+        icon: '🌍',
+        title: 'Geografische Daten',
+        description: 'Sehen Sie woher Ihre Besucher kommen mit Länder- und Städte-Aufschlüsselung.'
+      },
+      {
+        icon: '📱',
+        title: 'Geräte-Analyse',
+        description: 'Erfahren Sie welche Geräte, Browser und Betriebssysteme Ihre Nutzer verwenden.'
+      },
+      {
+        icon: '📈',
+        title: 'Referrer-Tracking',
+        description: 'Identifizieren Sie die Quellen Ihres Traffics für bessere Marketing-Entscheidungen.'
+      }
+    ]
+  },
+  {
+    title: 'QR-Codes',
+    features: [
+      {
+        icon: '🎨',
+        title: 'Anpassbare Designs',
+        description: 'Erstellen Sie QR-Codes in Ihren Markenfarben für konsistentes Branding.'
+      },
+      {
+        icon: '📐',
+        title: 'Multiple Formate',
+        description: 'Download in PNG, SVG oder PDF für verschiedene Anwendungsfälle.'
+      },
+      {
+        icon: '⬇️',
+        title: 'Hochauflösend',
+        description: 'Druckqualität bis zu 4000x4000 Pixel für großformatige Medien.'
+      }
+    ]
+  },
+  {
+    title: 'Team & Kollaboration',
+    features: [
+      {
+        icon: '👥',
+        title: 'Team Workspaces',
+        description: 'Erstellen Sie gemeinsame Arbeitsbereiche für Ihr Team oder Ihre Kunden.'
+      },
+      {
+        icon: '🔐',
+        title: 'Rollenbasierte Rechte',
+        description: 'Definieren Sie wer Links erstellen, bearbeiten oder nur ansehen darf.'
+      },
+      {
+        icon: '🏷️',
+        title: 'Tag-System',
+        description: 'Organisieren Sie Links mit Tags für bessere Übersicht in großen Teams.'
+      }
+    ]
+  }
+];
+---
+
+<BaseLayout title="Features" description="Entdecken Sie alle Features von uLoad - URL-Verkürzung, Analytics, QR-Codes und Team-Kollaboration.">
+  <!-- Hero -->
+  <section class="bg-gradient-to-br from-primary-500/5 via-white to-purple-600/5 px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+    <div class="mx-auto max-w-7xl text-center">
+      <h1 class="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+        Features die den Unterschied machen
+      </h1>
+      <p class="mx-auto max-w-2xl text-lg text-gray-600">
+        Von einfacher URL-Verkürzung bis hin zu detaillierten Analytics – uLoad bietet alles was Profis brauchen.
+      </p>
+      <div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
+        <a
+          href={`${appUrl}/register`}
+          class="rounded-lg bg-primary-600 px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-700"
+        >
+          Kostenlos starten
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Feature Categories -->
+  {featureCategories.map((category, idx) => (
+    <section class:list={["px-4 py-16 sm:px-6 lg:px-8", idx % 2 === 1 ? "bg-gray-50" : "bg-white"]}>
+      <div class="mx-auto max-w-7xl">
+        <h2 class="mb-12 text-center text-3xl font-bold text-gray-900">
+          {category.title}
+        </h2>
+        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {category.features.map(feature => (
+            <div class="rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-lg">
+              <div class="mb-4 text-4xl">{feature.icon}</div>
+              <h3 class="mb-2 text-lg font-semibold text-gray-900">{feature.title}</h3>
+              <p class="text-sm text-gray-600">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  ))}
+
+  <!-- CTA -->
+  <section class="bg-primary-600 px-4 py-16 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-4xl text-center">
+      <h2 class="mb-4 text-3xl font-bold text-white">
+        Bereit loszulegen?
+      </h2>
+      <p class="mb-8 text-lg text-primary-100">
+        Starten Sie kostenlos und entdecken Sie alle Features selbst.
+      </p>
+      <a
+        href={`${appUrl}/register`}
+        class="inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary-600 shadow-lg transition hover:bg-gray-100"
+      >
+        Jetzt kostenlos starten →
+      </a>
+    </div>
+  </section>
+</BaseLayout>

apps/uload/apps/landing/src/pages/impressum.astro

@@ -0,0 +1,55 @@
+---
+import LegalLayout from '../layouts/LegalLayout.astro';
+---
+
+<LegalLayout title="Impressum">
+  <h2>Angaben gemäß § 5 TMG</h2>
+
+  <p>
+    <strong>uLoad</strong><br />
+    [Ihr Name / Firmenname]<br />
+    [Straße und Hausnummer]<br />
+    [PLZ Ort]<br />
+    Deutschland
+  </p>
+
+  <h2>Kontakt</h2>
+  <p>
+    E-Mail: kontakt@ulo.ad
+  </p>
+
+  <h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
+  <p>
+    [Ihr Name]<br />
+    [Adresse wie oben]
+  </p>
+
+  <h2>EU-Streitschlichtung</h2>
+  <p>
+    Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
+    <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener">https://ec.europa.eu/consumers/odr/</a>
+  </p>
+  <p>
+    Unsere E-Mail-Adresse finden Sie oben im Impressum.
+  </p>
+
+  <h2>Verbraucherstreitbeilegung / Universalschlichtungsstelle</h2>
+  <p>
+    Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
+  </p>
+
+  <h2>Haftung für Inhalte</h2>
+  <p>
+    Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
+  </p>
+
+  <h2>Haftung für Links</h2>
+  <p>
+    Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.
+  </p>
+
+  <h2>Urheberrecht</h2>
+  <p>
+    Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
+  </p>
+</LegalLayout>

apps/uload/apps/landing/src/pages/index.astro

@@ -0,0 +1,223 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import HeroSection from '../components/HeroSection.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 />
+
+  <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>

apps/uload/apps/landing/src/pages/sicherheit.astro

@@ -0,0 +1,196 @@
+---
+import LegalLayout from '../layouts/LegalLayout.astro';
+---
+
+<LegalLayout title="Sicherheit" lastUpdated="November 2024">
+  <div class="rounded-lg bg-green-50 p-4 text-green-800 mb-8">
+    <p class="font-semibold">Ihre Sicherheit ist unsere Priorität</p>
+    <p class="mt-1">
+      Bei uload setzen wir modernste Sicherheitsstandards ein, um Ihre Daten und Links zu schützen.
+    </p>
+  </div>
+
+  <h2>Verschlüsselung</h2>
+
+  <h3>SSL/TLS-Verschlüsselung</h3>
+  <p>
+    Alle Datenübertragungen zwischen Ihrem Browser und unseren Servern sind durch moderne SSL/TLS-Verschlüsselung geschützt. Wir verwenden ausschließlich TLS 1.3 und TLS 1.2 mit starken Cipher-Suites.
+  </p>
+
+  <h3>Verschlüsselte Speicherung</h3>
+  <p>
+    Sensible Daten wie Passwörter werden mit branchenführenden Verschlüsselungsalgorithmen (bcrypt mit Salt) gespeichert. Selbst im unwahrscheinlichen Fall eines Datenlecks bleiben Ihre Passwörter geschützt.
+  </p>
+
+  <h3>Ende-zu-Ende Verschlüsselung für Premium-Nutzer</h3>
+  <p>
+    Premium-Nutzer können optionale Ende-zu-Ende-Verschlüsselung für besonders sensible Links aktivieren. Diese Links können nur mit dem richtigen Schlüssel entschlüsselt werden.
+  </p>
+
+  <h2>Authentifizierung & Zugriffskontrolle</h2>
+
+  <h3>Sichere Authentifizierung</h3>
+  <ul>
+    <li>Starke Passwort-Anforderungen (mindestens 8 Zeichen, Groß-/Kleinbuchstaben, Zahlen)</li>
+    <li>Zwei-Faktor-Authentifizierung (2FA) verfügbar</li>
+    <li>Automatische Sitzungsbeendigung nach Inaktivität</li>
+    <li>Schutz vor Brute-Force-Angriffen durch Rate-Limiting</li>
+  </ul>
+
+  <h3>Passwortgeschützte Links</h3>
+  <p>
+    Erstellen Sie passwortgeschützte Links für zusätzliche Sicherheit. Nur Personen mit dem korrekten Passwort können auf die Ziel-URL zugreifen.
+  </p>
+
+  <h3>IP-Whitelisting für Enterprise</h3>
+  <p>
+    Enterprise-Kunden können IP-Whitelisting aktivieren, um den Zugriff auf ihre Links nur von bestimmten IP-Adressen oder IP-Bereichen zu erlauben.
+  </p>
+
+  <h2>Infrastruktur-Sicherheit</h2>
+
+  <h3>Hosting & Server</h3>
+  <ul>
+    <li>Hosting in ISO 27001 zertifizierten Rechenzentren</li>
+    <li>Redundante Server-Architektur für maximale Verfügbarkeit</li>
+    <li>Regelmäßige Sicherheitsupdates und Patches</li>
+    <li>24/7 Überwachung der Systemintegrität</li>
+  </ul>
+
+  <h3>DDoS-Schutz</h3>
+  <p>
+    Unser Service ist durch einen fortschrittlichen DDoS-Schutz abgesichert, der Angriffe automatisch erkennt und abwehrt, um die Verfügbarkeit unseres Dienstes zu gewährleisten.
+  </p>
+
+  <h3>Web Application Firewall (WAF)</h3>
+  <p>
+    Eine Web Application Firewall schützt vor gängigen Web-Angriffen wie SQL-Injection, Cross-Site-Scripting (XSS) und anderen OWASP Top 10 Bedrohungen.
+  </p>
+
+  <h2>Überwachung & Schutz</h2>
+
+  <h3>Malware & Phishing-Schutz</h3>
+  <p>
+    Alle erstellten Links werden automatisch gegen bekannte Malware- und Phishing-Datenbanken geprüft. Verdächtige Links werden blockiert und zur manuellen Überprüfung markiert.
+  </p>
+
+  <h3>Echtzeit-Überwachung</h3>
+  <ul>
+    <li>Kontinuierliche Überwachung auf verdächtige Aktivitäten</li>
+    <li>Automatische Erkennung von Missbrauchsmustern</li>
+    <li>Sofortige Benachrichtigung bei Sicherheitsvorfällen</li>
+    <li>Detaillierte Audit-Logs für Enterprise-Kunden</li>
+  </ul>
+
+  <h3>Link-Validierung</h3>
+  <p>
+    Regelmäßige Überprüfung aller Ziel-URLs auf Verfügbarkeit und Sicherheit. Gefährliche oder kompromittierte Websites werden automatisch blockiert.
+  </p>
+
+  <h2>Datenschutz & Compliance</h2>
+
+  <h3>DSGVO-Konformität</h3>
+  <p>
+    Vollständige Einhaltung der Datenschutz-Grundverordnung (DSGVO). Sie haben jederzeit die volle Kontrolle über Ihre Daten mit Rechten auf Auskunft, Berichtigung und Löschung.
+  </p>
+
+  <h3>Datensparsamkeit</h3>
+  <p>
+    Wir sammeln nur die minimal notwendigen Daten für den Betrieb unseres Services. Keine unnötige Datensammlung oder -weitergabe an Dritte.
+  </p>
+
+  <h3>Regelmäßige Audits</h3>
+  <p>
+    Unabhängige Sicherheitsaudits und Penetrationstests werden regelmäßig durchgeführt, um höchste Sicherheitsstandards zu gewährleisten.
+  </p>
+
+  <h2>Backup & Wiederherstellung</h2>
+
+  <h3>Automatische Backups</h3>
+  <ul>
+    <li>Tägliche automatische Backups aller Daten</li>
+    <li>Geografisch verteilte Backup-Speicherung</li>
+    <li>Verschlüsselte Backup-Archive</li>
+    <li>Regelmäßige Wiederherstellungstests</li>
+  </ul>
+
+  <h3>Disaster Recovery</h3>
+  <p>
+    Umfassender Disaster-Recovery-Plan mit RPO (Recovery Point Objective) von maximal 24 Stunden und RTO (Recovery Time Objective) von maximal 4 Stunden.
+  </p>
+
+  <h2>Ihre Verantwortung</h2>
+
+  <h3>Best Practices für Nutzer</h3>
+  <ul>
+    <li>Verwenden Sie starke, einzigartige Passwörter</li>
+    <li>Aktivieren Sie die Zwei-Faktor-Authentifizierung</li>
+    <li>Teilen Sie Ihre Zugangsdaten niemals mit anderen</li>
+    <li>Melden Sie verdächtige Aktivitäten sofort</li>
+    <li>Halten Sie Ihre Kontaktinformationen aktuell</li>
+    <li>Überprüfen Sie regelmäßig Ihre Account-Aktivitäten</li>
+  </ul>
+
+  <h2>Sicherheitsvorfälle melden</h2>
+
+  <h3>Verantwortungsvolle Offenlegung</h3>
+  <p>
+    Wir schätzen die Arbeit von Sicherheitsforschern. Wenn Sie eine Sicherheitslücke entdecken, melden Sie diese bitte verantwortungsvoll an:
+  </p>
+  <p class="font-mono bg-gray-100 p-3 rounded-lg mt-2">
+    security@uload.de
+  </p>
+  <p class="mt-2">
+    Bitte geben Sie uns angemessene Zeit zur Behebung, bevor Sie die Schwachstelle öffentlich machen.
+  </p>
+
+  <h3>Bug Bounty Programm</h3>
+  <p>
+    Für kritische Sicherheitslücken bieten wir Belohnungen im Rahmen unseres Bug Bounty Programms.
+  </p>
+
+  <h2>Zertifizierungen & Standards</h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 not-prose mt-4">
+    <div class="rounded-lg border border-gray-200 p-4">
+      <h3 class="font-semibold text-gray-900 mb-2">ISO 27001</h3>
+      <p class="text-sm text-gray-600">
+        Informationssicherheits-Management-System zertifiziert
+      </p>
+    </div>
+    <div class="rounded-lg border border-gray-200 p-4">
+      <h3 class="font-semibold text-gray-900 mb-2">SSL Labs A+</h3>
+      <p class="text-sm text-gray-600">
+        Höchste Bewertung für SSL/TLS-Konfiguration
+      </p>
+    </div>
+    <div class="rounded-lg border border-gray-200 p-4">
+      <h3 class="font-semibold text-gray-900 mb-2">OWASP Compliance</h3>
+      <p class="text-sm text-gray-600">
+        Einhaltung der OWASP-Sicherheitsrichtlinien
+      </p>
+    </div>
+    <div class="rounded-lg border border-gray-200 p-4">
+      <h3 class="font-semibold text-gray-900 mb-2">PCI DSS Ready</h3>
+      <p class="text-sm text-gray-600">
+        Bereit für Payment Card Industry Standards
+      </p>
+    </div>
+  </div>
+
+  <h2 class="mt-8">Kontakt</h2>
+  <p>
+    Bei Fragen zur Sicherheit unseres Services kontaktieren Sie uns:
+  </p>
+  <ul>
+    <li><strong>E-Mail:</strong> security@uload.de</li>
+    <li><strong>PGP-Schlüssel:</strong> Verfügbar auf Anfrage</li>
+  </ul>
+
+  <div class="rounded-lg bg-blue-50 p-4 text-blue-800 mt-8 not-prose">
+    <p class="font-semibold">Tipp:</p>
+    <p>
+      Aktivieren Sie die Zwei-Faktor-Authentifizierung in Ihren Account-Einstellungen für maximale Sicherheit!
+    </p>
+  </div>
+</LegalLayout>

apps/uload/apps/landing/src/styles/global.css

@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 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);
+
+  /* Text colors (Light theme) */
+  --color-text-primary: #111827;
+  --color-text-secondary: #4b5563;
+  --color-text-muted: #6b7280;
+
+  /* Background colors (Light theme) */
+  --color-background-page: #ffffff;
+  --color-background-card: #f9fafb;
+  --color-background-card-hover: #f3f4f6;
+
+  /* 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 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-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all duration-200;
+  }
+
+  .container-custom {
+    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  .section {
+    @apply py-16 md:py-24;
+  }
+}

apps/uload/apps/landing/tailwind.config.mjs

@@ -0,0 +1,48 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  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',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          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: {
+        sans: ['Inter', 'system-ui', 'sans-serif']
+      }
+    }
+  },
+  plugins: []
+};

apps/uload/apps/landing/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@layouts/*": ["src/layouts/*"]
+    }
+  }
+}