mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 04:26:42 +02:00
feat(landing): add Presi landing page and improve Zitare landing
- Create complete Presi landing page with Astro + Tailwind - Orange theme (#f97316) matching Presi branding - Use shared-landing-ui components (HeroSection, FeatureSection, FAQSection, CTASection) - Add "How it works" section with 4-step guide - Fix Zitare landing styling with proper Tailwind config - Add CSS custom properties for consistent theming - Add deploy:landing:presi script and update deploy:landing:all - Add dev:presi:landing script 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Till-JS
parent
29aaaec4fa
commit
623b1a21b1
20 changed files with 1582 additions and 256 deletions
8
apps/presi/apps/landing/astro.config.mjs
Normal file
8
apps/presi/apps/landing/astro.config.mjs
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
export default defineConfig({
|
||||
site: 'https://presi.manacore.app',
|
||||
integrations: [tailwind(), sitemap()],
|
||||
});
|
||||
26
apps/presi/apps/landing/package.json
Normal file
26
apps/presi/apps/landing/package.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "@presi/landing",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro check && astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro",
|
||||
"type-check": "astro check"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.0",
|
||||
"@astrojs/sitemap": "^3.2.1",
|
||||
"@manacore/shared-landing-ui": "workspace:*",
|
||||
"astro": "^5.16.0",
|
||||
"typescript": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/tailwind": "^6.0.0",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"tailwindcss": "^3.4.17"
|
||||
}
|
||||
}
|
||||
10
apps/presi/apps/landing/public/favicon.svg
Normal file
10
apps/presi/apps/landing/public/favicon.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<rect width="100" height="100" rx="20" fill="#f97316"/>
|
||||
<rect x="20" y="25" width="60" height="40" rx="4" fill="white"/>
|
||||
<rect x="25" y="30" width="50" height="30" rx="2" fill="#0a0a0f"/>
|
||||
<rect x="30" y="35" width="30" height="4" rx="1" fill="#f97316"/>
|
||||
<rect x="30" y="42" width="40" height="2" rx="1" fill="#6b7280"/>
|
||||
<rect x="30" y="47" width="35" height="2" rx="1" fill="#6b7280"/>
|
||||
<rect x="30" y="52" width="25" height="2" rx="1" fill="#6b7280"/>
|
||||
<circle cx="50" cy="75" r="5" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 583 B |
74
apps/presi/apps/landing/src/components/Footer.astro
Normal file
74
apps/presi/apps/landing/src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
|
||||
---
|
||||
|
||||
<footer class="bg-background-card py-12 border-t border-border">
|
||||
<Container>
|
||||
<div class="grid md:grid-cols-4 gap-8 mb-8">
|
||||
<!-- Brand -->
|
||||
<div class="md:col-span-2">
|
||||
<a href="/" class="flex items-center gap-2 text-xl font-bold text-text-primary mb-4">
|
||||
<span class="text-2xl">🎬</span>
|
||||
<span>Presi</span>
|
||||
</a>
|
||||
<p class="text-text-secondary text-sm max-w-md">
|
||||
Erstelle beeindruckende Präsentationen in Minuten. Mit KI-Unterstützung, schönen Themes und einfacher Bedienung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div>
|
||||
<h4 class="text-text-muted text-xs uppercase tracking-wider mb-4">Produkt</h4>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="#features" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://presi.manacore.app" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Web App
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#download" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Mobile App
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal -->
|
||||
<div>
|
||||
<h4 class="text-text-muted text-xs uppercase tracking-wider mb-4">Rechtliches</h4>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="/privacy" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Datenschutz
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/terms" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
AGB
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/imprint" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Impressum
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="pt-8 border-t border-border text-center">
|
||||
<p class="text-text-muted text-sm">
|
||||
© 2025 Presi. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
<p class="text-text-muted text-xs mt-1">
|
||||
Ein Produkt von <a href="https://manacore.ai" class="hover:text-primary transition-colors">ManaCore</a>
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
36
apps/presi/apps/landing/src/components/Navigation.astro
Normal file
36
apps/presi/apps/landing/src/components/Navigation.astro
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
|
||||
import Button from '@manacore/shared-landing-ui/atoms/Button.astro';
|
||||
---
|
||||
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-background-page/80 backdrop-blur-lg border-b border-border">
|
||||
<Container>
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Logo -->
|
||||
<a href="/" class="flex items-center gap-2 text-xl font-bold text-text-primary">
|
||||
<span class="text-2xl">🎬</span>
|
||||
<span>Presi</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#features" class="text-text-secondary hover:text-text-primary transition-colors">
|
||||
Features
|
||||
</a>
|
||||
<a href="#how-it-works" class="text-text-secondary hover:text-text-primary transition-colors">
|
||||
So funktioniert's
|
||||
</a>
|
||||
<a href="#faq" class="text-text-secondary hover:text-text-primary transition-colors">
|
||||
FAQ
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="flex items-center gap-4">
|
||||
<Button href="https://presi.manacore.app" variant="primary" size="sm">
|
||||
App öffnen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</nav>
|
||||
50
apps/presi/apps/landing/src/layouts/Layout.astro
Normal file
50
apps/presi/apps/landing/src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description = 'Presi - Erstelle beeindruckende Präsentationen mit KI-Unterstützung',
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="de_DE" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
|
||||
<!-- 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"
|
||||
/>
|
||||
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body class="min-h-screen bg-background-page text-text-primary antialiased">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
224
apps/presi/apps/landing/src/pages/index.astro
Normal file
224
apps/presi/apps/landing/src/pages/index.astro
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
// Shared components
|
||||
import HeroSection from '@manacore/shared-landing-ui/sections/HeroSection.astro';
|
||||
import FeatureSection from '@manacore/shared-landing-ui/sections/FeatureSection.astro';
|
||||
import CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';
|
||||
import FAQSection from '@manacore/shared-landing-ui/sections/FAQSection.astro';
|
||||
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
|
||||
|
||||
// Feature data
|
||||
const features = [
|
||||
{
|
||||
icon: '🎨',
|
||||
title: 'Schöne Themes',
|
||||
description: 'Wähle aus professionellen Themes oder erstelle dein eigenes Design.',
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Überall verfügbar',
|
||||
description: 'Native Apps für iOS, Android und Web - deine Präsentationen sind immer dabei.',
|
||||
},
|
||||
{
|
||||
icon: '🔗',
|
||||
title: 'Einfach teilen',
|
||||
description: 'Teile Präsentationen per Link - ohne Download oder Account nötig.',
|
||||
},
|
||||
{
|
||||
icon: '🖥️',
|
||||
title: 'Präsentationsmodus',
|
||||
description: 'Vollbild-Präsentation mit Tastatursteuerung und Timer.',
|
||||
},
|
||||
{
|
||||
icon: '📝',
|
||||
title: 'Verschiedene Layouts',
|
||||
description: 'Titel, Inhalt, Bilder, Split-Views - für jeden Zweck das richtige Layout.',
|
||||
},
|
||||
{
|
||||
icon: '☁️',
|
||||
title: 'Cloud-Sync',
|
||||
description: 'Automatische Synchronisierung auf allen Geräten.',
|
||||
},
|
||||
];
|
||||
|
||||
// How it works steps
|
||||
const steps = [
|
||||
{
|
||||
number: '1',
|
||||
title: 'Deck erstellen',
|
||||
description: 'Starte mit einem leeren Deck oder wähle ein Template.',
|
||||
},
|
||||
{
|
||||
number: '2',
|
||||
title: 'Slides hinzufügen',
|
||||
description: 'Füge Titel, Text, Bilder und Bullet Points hinzu.',
|
||||
},
|
||||
{
|
||||
number: '3',
|
||||
title: 'Theme wählen',
|
||||
description: 'Wähle ein professionelles Theme für deine Präsentation.',
|
||||
},
|
||||
{
|
||||
number: '4',
|
||||
title: 'Präsentieren & Teilen',
|
||||
description: 'Präsentiere im Vollbild oder teile per Link.',
|
||||
},
|
||||
];
|
||||
|
||||
// FAQ data
|
||||
const faqs = [
|
||||
{
|
||||
question: 'Ist Presi kostenlos?',
|
||||
answer: 'Ja, Presi ist kostenlos nutzbar. Du kannst unbegrenzt Präsentationen erstellen, teilen und präsentieren.',
|
||||
},
|
||||
{
|
||||
question: 'Kann ich Präsentationen offline bearbeiten?',
|
||||
answer: 'Mit der mobilen App kannst du deine Präsentationen auch offline bearbeiten. Änderungen werden synchronisiert, sobald du wieder online bist.',
|
||||
},
|
||||
{
|
||||
question: 'Wie teile ich eine Präsentation?',
|
||||
answer: 'Klicke auf "Teilen" und erstelle einen Link. Jeder mit dem Link kann die Präsentation ansehen - ohne Account oder Download.',
|
||||
},
|
||||
{
|
||||
question: 'Welche Slide-Typen gibt es?',
|
||||
answer: 'Presi unterstützt Titel-Slides, Content-Slides mit Text und Bullet Points, Bild-Slides und Split-Views mit Text und Bild nebeneinander.',
|
||||
},
|
||||
{
|
||||
question: 'Kann ich eigene Themes erstellen?',
|
||||
answer: 'Aktuell bieten wir vorgefertigte Themes. Custom Themes sind für zukünftige Versionen geplant.',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title="Presi - Präsentationen erstellen leicht gemacht">
|
||||
<Navigation />
|
||||
|
||||
<main class="pt-16">
|
||||
<!-- Hero Section -->
|
||||
<HeroSection
|
||||
title="Präsentationen erstellen leicht gemacht"
|
||||
subtitle="Erstelle beeindruckende Präsentationen in Minuten. Mit schönen Themes, einfacher Bedienung und überall verfügbar."
|
||||
variant="centered"
|
||||
primaryCta={{
|
||||
text: 'Kostenlos starten',
|
||||
href: 'https://presi.manacore.app',
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Features ansehen',
|
||||
href: '#features',
|
||||
variant: 'secondary',
|
||||
}}
|
||||
trustBadges={[
|
||||
{ icon: '🎨', text: 'Schöne Themes' },
|
||||
{ icon: '🆓', text: '100% Kostenlos' },
|
||||
{ icon: '📱', text: 'iOS & Android' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- How it works Section -->
|
||||
<section id="how-it-works" class="py-20 bg-background-card">
|
||||
<Container>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-text-primary mb-4">
|
||||
So einfach geht's
|
||||
</h2>
|
||||
<p class="text-text-secondary text-lg max-w-2xl mx-auto">
|
||||
In vier Schritten zur perfekten Präsentation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-6">
|
||||
{steps.map((step, index) => (
|
||||
<div class="relative">
|
||||
<div class="bg-background-page rounded-2xl p-6 border border-border hover:border-primary/30 transition-all duration-300 h-full">
|
||||
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
||||
<span class="text-primary font-bold text-xl">{step.number}</span>
|
||||
</div>
|
||||
<h3 class="text-text-primary font-semibold text-lg mb-2">{step.title}</h3>
|
||||
<p class="text-text-secondary text-sm">{step.description}</p>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div class="hidden md:block absolute top-1/2 -right-3 transform -translate-y-1/2 text-text-muted">
|
||||
→
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<FeatureSection
|
||||
id="features"
|
||||
title="Alles was du für großartige Präsentationen brauchst"
|
||||
subtitle="Presi vereint einfache Bedienung mit professionellen Features"
|
||||
features={features}
|
||||
columns={3}
|
||||
variant="cards"
|
||||
/>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<section class="py-20 bg-background-card">
|
||||
<Container size="md">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-text-primary mb-6">
|
||||
Präsentiere wie ein Profi
|
||||
</h2>
|
||||
<p class="text-text-secondary text-lg mb-8 leading-relaxed">
|
||||
Der Präsentationsmodus bietet alles was du brauchst: Vollbild-Ansicht,
|
||||
Tastaturnavigation mit Pfeiltasten, Timer für perfektes Timing und
|
||||
Speaker Notes für deine Notizen.
|
||||
</p>
|
||||
<div class="bg-background-page rounded-2xl p-8 border border-border">
|
||||
<div class="flex flex-wrap justify-center gap-4 text-sm text-text-secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<kbd class="px-2 py-1 bg-background-card rounded border border-border">←</kbd>
|
||||
<kbd class="px-2 py-1 bg-background-card rounded border border-border">→</kbd>
|
||||
<span>Navigation</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<kbd class="px-2 py-1 bg-background-card rounded border border-border">F</kbd>
|
||||
<span>Vollbild</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<kbd class="px-2 py-1 bg-background-card rounded border border-border">ESC</kbd>
|
||||
<span>Beenden</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<FAQSection
|
||||
id="faq"
|
||||
title="Häufig gestellte Fragen"
|
||||
subtitle="Alles was du über Presi wissen musst"
|
||||
faqs={faqs}
|
||||
/>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<CTASection
|
||||
id="download"
|
||||
title="Bereit für bessere Präsentationen?"
|
||||
subtitle="Starte jetzt kostenlos und erstelle deine erste Präsentation in Minuten."
|
||||
primaryCta={{
|
||||
text: 'Web App öffnen',
|
||||
href: 'https://presi.manacore.app',
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Mobile App laden',
|
||||
href: '#',
|
||||
variant: 'secondary',
|
||||
}}
|
||||
variant="highlighted"
|
||||
/>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
101
apps/presi/apps/landing/src/styles/global.css
Normal file
101
apps/presi/apps/landing/src/styles/global.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
/* Primary colors - Orange */
|
||||
--color-primary: #f97316;
|
||||
--color-primary-hover: #fb923c;
|
||||
--color-primary-glow: rgba(249, 115, 22, 0.3);
|
||||
|
||||
/* Background colors - Dark theme */
|
||||
--color-background-page: #0a0a0f;
|
||||
--color-background-card: #141419;
|
||||
--color-background-card-hover: #1c1c24;
|
||||
|
||||
/* Text colors */
|
||||
--color-text-primary: #f9fafb;
|
||||
--color-text-secondary: #d1d5db;
|
||||
--color-text-muted: #6b7280;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #27272a;
|
||||
--color-border-hover: #3f3f46;
|
||||
}
|
||||
|
||||
/* Apply CSS custom properties to Tailwind classes */
|
||||
.bg-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
.bg-primary\/10 {
|
||||
background-color: rgba(249, 115, 22, 0.1);
|
||||
}
|
||||
.bg-background-page {
|
||||
background-color: var(--color-background-page);
|
||||
}
|
||||
.bg-background-card {
|
||||
background-color: var(--color-background-card);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.text-text-primary {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
.text-text-secondary {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.text-text-muted {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.border-border {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.border-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.border-primary\/30 {
|
||||
border-color: rgba(249, 115, 22, 0.3);
|
||||
}
|
||||
|
||||
/* Smooth scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #ea580c 100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 0 30px var(--color-primary-glow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Card hover effects */
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: rgba(249, 115, 22, 0.3);
|
||||
box-shadow: 0 0 40px rgba(249, 115, 22, 0.1);
|
||||
}
|
||||
36
apps/presi/apps/landing/tailwind.config.mjs
Normal file
36
apps/presi/apps/landing/tailwind.config.mjs
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/** @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: {
|
||||
primary: {
|
||||
DEFAULT: '#f97316',
|
||||
hover: '#fb923c',
|
||||
glow: 'rgba(249, 115, 22, 0.3)',
|
||||
},
|
||||
background: {
|
||||
page: '#0a0a0f',
|
||||
card: '#141419',
|
||||
'card-hover': '#1c1c24',
|
||||
},
|
||||
text: {
|
||||
primary: '#f9fafb',
|
||||
secondary: '#d1d5db',
|
||||
muted: '#6b7280',
|
||||
},
|
||||
border: {
|
||||
DEFAULT: '#27272a',
|
||||
hover: '#3f3f46',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
9
apps/presi/apps/landing/tsconfig.json
Normal file
9
apps/presi/apps/landing/tsconfig.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
3
apps/presi/apps/landing/wrangler.toml
Normal file
3
apps/presi/apps/landing/wrangler.toml
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
name = "presi-landing"
|
||||
compatibility_date = "2024-12-01"
|
||||
pages_build_output_dir = "dist"
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@manacore/shared-landing-ui": "workspace:*",
|
||||
"astro": "^5.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
74
apps/zitare/apps/landing/src/components/Footer.astro
Normal file
74
apps/zitare/apps/landing/src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
|
||||
---
|
||||
|
||||
<footer class="bg-background-card py-12 border-t border-border">
|
||||
<Container>
|
||||
<div class="grid md:grid-cols-4 gap-8 mb-8">
|
||||
<!-- Brand -->
|
||||
<div class="md:col-span-2">
|
||||
<a href="/" class="flex items-center gap-2 text-xl font-bold text-text-primary mb-4">
|
||||
<span class="text-2xl">📖</span>
|
||||
<span>Zitare</span>
|
||||
</a>
|
||||
<p class="text-text-secondary text-sm max-w-md">
|
||||
Deine tägliche Quelle für Inspiration und Weisheit. Entdecke über 1000 Zitate von den größten Denkern der Geschichte.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div>
|
||||
<h4 class="text-text-muted text-xs uppercase tracking-wider mb-4">Produkt</h4>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="#features" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zitare.manacore.app" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Web App
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#download" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Mobile App
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal -->
|
||||
<div>
|
||||
<h4 class="text-text-muted text-xs uppercase tracking-wider mb-4">Rechtliches</h4>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="/privacy" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Datenschutz
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/terms" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
AGB
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/imprint" class="text-text-secondary hover:text-text-primary text-sm transition-colors">
|
||||
Impressum
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="pt-8 border-t border-border text-center">
|
||||
<p class="text-text-muted text-sm">
|
||||
© 2025 Zitare. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
<p class="text-text-muted text-xs mt-1">
|
||||
Ein Produkt von <a href="https://manacore.ai" class="hover:text-primary transition-colors">ManaCore</a>
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
36
apps/zitare/apps/landing/src/components/Navigation.astro
Normal file
36
apps/zitare/apps/landing/src/components/Navigation.astro
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
|
||||
import Button from '@manacore/shared-landing-ui/atoms/Button.astro';
|
||||
---
|
||||
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-background-page/80 backdrop-blur-lg border-b border-border">
|
||||
<Container>
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Logo -->
|
||||
<a href="/" class="flex items-center gap-2 text-xl font-bold text-text-primary">
|
||||
<span class="text-2xl">📖</span>
|
||||
<span>Zitare</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#features" class="text-text-secondary hover:text-text-primary transition-colors">
|
||||
Features
|
||||
</a>
|
||||
<a href="#quotes" class="text-text-secondary hover:text-text-primary transition-colors">
|
||||
Zitate
|
||||
</a>
|
||||
<a href="#about" class="text-text-secondary hover:text-text-primary transition-colors">
|
||||
Über uns
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="flex items-center gap-4">
|
||||
<Button href="https://zitare.manacore.app" variant="primary" size="sm">
|
||||
App öffnen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</nav>
|
||||
|
|
@ -1,75 +1,50 @@
|
|||
---
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = 'Discover inspiring quotes from great minds' } = Astro.props;
|
||||
const {
|
||||
title,
|
||||
description = 'Zitare - Inspirierende Zitate von großen Denkern',
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="de_DE" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
|
||||
<!-- 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&family=Merriweather:ital,wght@0,400;1,400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="/" class="text-2xl font-bold">📖 Quotes</a>
|
||||
<div class="flex gap-6">
|
||||
<a href="/#features" class="hover:opacity-80">Features</a>
|
||||
<a href="/#about" class="hover:opacity-80">About</a>
|
||||
<a
|
||||
href="/app"
|
||||
class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:opacity-90"
|
||||
>
|
||||
Open App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<body class="min-h-screen bg-background-page text-text-primary antialiased">
|
||||
<slot />
|
||||
|
||||
<footer class="bg-gray-900 text-white py-12">
|
||||
<div class="container mx-auto px-6 text-center">
|
||||
<p>© 2025 Quotes App. All rights reserved.</p>
|
||||
<div class="mt-4 flex justify-center gap-6">
|
||||
<a href="/privacy" class="hover:opacity-80">Privacy</a>
|
||||
<a href="/terms" class="hover:opacity-80">Terms</a>
|
||||
<a href="/contact" class="hover:opacity-80">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,122 +1,196 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
// Shared components
|
||||
import HeroSection from '@manacore/shared-landing-ui/sections/HeroSection.astro';
|
||||
import FeatureSection from '@manacore/shared-landing-ui/sections/FeatureSection.astro';
|
||||
import CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';
|
||||
import FAQSection from '@manacore/shared-landing-ui/sections/FAQSection.astro';
|
||||
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
|
||||
|
||||
// Feature data
|
||||
const features = [
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Mobile App',
|
||||
description: 'Native iOS und Android App mit Offline-Unterstützung und elegantem Design.',
|
||||
},
|
||||
{
|
||||
icon: '🌐',
|
||||
title: 'Web-Zugang',
|
||||
description: 'Greife von jedem Browser auf deine Lieblingszitate zu - überall und jederzeit.',
|
||||
},
|
||||
{
|
||||
icon: '📚',
|
||||
title: '1000+ Zitate',
|
||||
description: 'Kuratierte Sammlung von Philosophen, Wissenschaftlern und Vordenkern.',
|
||||
},
|
||||
{
|
||||
icon: '⭐',
|
||||
title: 'Favoriten',
|
||||
description: 'Speichere deine Lieblingszitate und greife sofort darauf zu.',
|
||||
},
|
||||
{
|
||||
icon: '🔍',
|
||||
title: 'Suche & Filter',
|
||||
description: 'Finde Zitate nach Autor, Kategorie oder Stichwort.',
|
||||
},
|
||||
{
|
||||
icon: '🎨',
|
||||
title: 'Schönes Design',
|
||||
description: 'Elegante Oberfläche, die den Inhalt in den Vordergrund stellt.',
|
||||
},
|
||||
];
|
||||
|
||||
// Sample quotes for display
|
||||
const sampleQuotes = [
|
||||
{
|
||||
text: 'Das Leben ist das, was passiert, während du beschäftigt bist, andere Pläne zu machen.',
|
||||
author: 'John Lennon',
|
||||
},
|
||||
{
|
||||
text: 'Der einzige Weg, großartige Arbeit zu leisten, ist zu lieben, was du tust.',
|
||||
author: 'Steve Jobs',
|
||||
},
|
||||
{
|
||||
text: 'Es ist nicht wichtig, wie langsam du gehst, solange du nicht stehen bleibst.',
|
||||
author: 'Konfuzius',
|
||||
},
|
||||
];
|
||||
|
||||
// FAQ data
|
||||
const faqs = [
|
||||
{
|
||||
question: 'Ist Zitare kostenlos?',
|
||||
answer: 'Ja, Zitare ist kostenlos nutzbar. Du hast Zugriff auf alle Zitate und Features ohne Abo oder versteckte Kosten.',
|
||||
},
|
||||
{
|
||||
question: 'Welche Autoren sind in der Sammlung?',
|
||||
answer: 'Unsere Sammlung umfasst über 1000 Zitate von Philosophen wie Sokrates und Nietzsche, Wissenschaftlern wie Einstein und Curie, sowie modernen Denkern und Führungspersönlichkeiten.',
|
||||
},
|
||||
{
|
||||
question: 'Kann ich Zitate offline lesen?',
|
||||
answer: 'Ja, mit der mobilen App werden deine Lieblingszitate lokal gespeichert. So hast du auch ohne Internetverbindung Zugriff auf Inspiration.',
|
||||
},
|
||||
{
|
||||
question: 'Wie kann ich Zitate teilen?',
|
||||
answer: 'Jedes Zitat kann direkt aus der App geteilt werden - per WhatsApp, Instagram, E-Mail oder als Bild für Social Media.',
|
||||
},
|
||||
{
|
||||
question: 'Werden neue Zitate hinzugefügt?',
|
||||
answer: 'Ja, wir erweitern unsere Sammlung regelmäßig mit neuen, sorgfältig ausgewählten Zitaten aus verschiedenen Epochen und Kulturen.',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title="Quotes - Inspiring Words from Great Minds">
|
||||
<main>
|
||||
<Layout title="Zitare - Inspirierende Zitate von großen Denkern">
|
||||
<Navigation />
|
||||
|
||||
<main class="pt-16">
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gradient-to-br from-purple-50 to-indigo-100 py-20">
|
||||
<div class="container mx-auto px-6 text-center">
|
||||
<h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">Discover Inspiring Quotes</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-700 mb-8 max-w-2xl mx-auto">
|
||||
Explore wisdom from history's greatest thinkers. Available on mobile, web, and everywhere
|
||||
you need inspiration.
|
||||
</p>
|
||||
<div class="flex gap-4 justify-center flex-wrap">
|
||||
<a
|
||||
href="/app"
|
||||
class="bg-purple-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-purple-700 transition"
|
||||
>
|
||||
Open Web App
|
||||
</a>
|
||||
<a
|
||||
href="#features"
|
||||
class="bg-white text-purple-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-50 transition border-2 border-purple-600"
|
||||
>
|
||||
Learn More
|
||||
</a>
|
||||
<HeroSection
|
||||
title="Entdecke inspirierende Zitate"
|
||||
subtitle="Tauche ein in die Weisheit der größten Denker der Geschichte. Verfügbar auf Mobile, Web und überall wo du Inspiration brauchst."
|
||||
variant="centered"
|
||||
primaryCta={{
|
||||
text: 'Jetzt entdecken',
|
||||
href: 'https://zitare.manacore.app',
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Features ansehen',
|
||||
href: '#features',
|
||||
variant: 'secondary',
|
||||
}}
|
||||
trustBadges={[
|
||||
{ icon: '📚', text: '1000+ Zitate' },
|
||||
{ icon: '🆓', text: '100% Kostenlos' },
|
||||
{ icon: '📱', text: 'iOS & Android' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- Sample Quotes Section -->
|
||||
<section id="quotes" class="py-20 bg-background-card">
|
||||
<Container>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-text-primary mb-4">
|
||||
Lass dich inspirieren
|
||||
</h2>
|
||||
<p class="text-text-secondary text-lg max-w-2xl mx-auto">
|
||||
Jeden Tag ein neues Zitat - Weisheit die bewegt
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
{sampleQuotes.map((quote) => (
|
||||
<div class="bg-background-page rounded-2xl p-8 border border-border hover:border-primary/30 transition-all duration-300 group">
|
||||
<div class="text-4xl text-primary/30 mb-4 group-hover:text-primary/50 transition-colors">"</div>
|
||||
<p class="quote-text text-text-primary text-lg mb-6 leading-relaxed">
|
||||
{quote.text}
|
||||
</p>
|
||||
<p class="text-text-muted text-sm">— {quote.author}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-4xl font-bold text-center mb-12 text-gray-900">Features</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="text-center p-6">
|
||||
<div class="text-5xl mb-4">📱</div>
|
||||
<h3 class="text-xl font-bold mb-2">Mobile App</h3>
|
||||
<p class="text-gray-600">
|
||||
Native iOS and Android app with offline support and beautiful design.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-6">
|
||||
<div class="text-5xl mb-4">🌐</div>
|
||||
<h3 class="text-xl font-bold mb-2">Web Access</h3>
|
||||
<p class="text-gray-600">Access your favorite quotes from any browser, anywhere.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-6">
|
||||
<div class="text-5xl mb-4">📚</div>
|
||||
<h3 class="text-xl font-bold mb-2">1000+ Quotes</h3>
|
||||
<p class="text-gray-600">
|
||||
Curated collection from philosophers, scientists, and leaders.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-6">
|
||||
<div class="text-5xl mb-4">⭐</div>
|
||||
<h3 class="text-xl font-bold mb-2">Favorites</h3>
|
||||
<p class="text-gray-600">Save your favorite quotes and access them instantly.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-6">
|
||||
<div class="text-5xl mb-4">🔍</div>
|
||||
<h3 class="text-xl font-bold mb-2">Search & Filter</h3>
|
||||
<p class="text-gray-600">Find quotes by author, category, or keyword.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-6">
|
||||
<div class="text-5xl mb-4">🎨</div>
|
||||
<h3 class="text-xl font-bold mb-2">Beautiful Design</h3>
|
||||
<p class="text-gray-600">Elegant interface that puts content first.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FeatureSection
|
||||
id="features"
|
||||
title="Alles was du für tägliche Inspiration brauchst"
|
||||
subtitle="Zitare verbindet klassische Weisheit mit moderner Technologie"
|
||||
features={features}
|
||||
columns={3}
|
||||
variant="cards"
|
||||
/>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="bg-gray-50 py-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-4xl font-bold mb-6 text-gray-900">About Quotes</h2>
|
||||
<p class="text-xl text-gray-700 mb-6">
|
||||
Quotes is your daily source of inspiration and wisdom. We've carefully curated over 1000
|
||||
quotes from history's most influential thinkers, philosophers, scientists, and leaders.
|
||||
<section id="about" class="py-20 bg-background-card">
|
||||
<Container size="md">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-text-primary mb-6">
|
||||
Über Zitare
|
||||
</h2>
|
||||
<p class="text-text-secondary text-lg mb-6 leading-relaxed">
|
||||
Zitare ist deine tägliche Quelle für Inspiration und Weisheit. Wir haben über 1000 Zitate
|
||||
von den einflussreichsten Denkern, Philosophen, Wissenschaftlern und Führungspersönlichkeiten
|
||||
der Geschichte sorgfältig zusammengestellt.
|
||||
</p>
|
||||
<p class="text-lg text-gray-600">
|
||||
Whether you're looking for motivation, wisdom, or just a moment of reflection, Quotes
|
||||
brings you timeless words that inspire and enlighten.
|
||||
<p class="text-text-secondary text-lg leading-relaxed">
|
||||
Ob du Motivation suchst, nach Weisheit strebst oder einfach einen Moment der Reflexion
|
||||
brauchst - Zitare bringt dir zeitlose Worte, die inspirieren und erleuchten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<FAQSection
|
||||
id="faq"
|
||||
title="Häufig gestellte Fragen"
|
||||
subtitle="Alles was du über Zitare wissen musst"
|
||||
faqs={faqs}
|
||||
/>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-20">
|
||||
<div class="container mx-auto px-6 text-center">
|
||||
<h2 class="text-4xl font-bold mb-6">Ready to Get Inspired?</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto">
|
||||
Start exploring thousands of inspiring quotes today.
|
||||
</p>
|
||||
<div class="flex gap-4 justify-center flex-wrap">
|
||||
<a
|
||||
href="/app"
|
||||
class="bg-white text-purple-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-100 transition"
|
||||
>
|
||||
Launch Web App
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="bg-purple-800 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-purple-900 transition"
|
||||
>
|
||||
Download Mobile App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CTASection
|
||||
id="download"
|
||||
title="Bereit für tägliche Inspiration?"
|
||||
subtitle="Starte jetzt und entdecke die Weisheit der größten Denker. Kostenlos und ohne Anmeldung."
|
||||
primaryCta={{
|
||||
text: 'Web App öffnen',
|
||||
href: 'https://zitare.manacore.app',
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Mobile App laden',
|
||||
href: '#',
|
||||
variant: 'secondary',
|
||||
}}
|
||||
variant="highlighted"
|
||||
/>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
|
|
|||
99
apps/zitare/apps/landing/src/styles/global.css
Normal file
99
apps/zitare/apps/landing/src/styles/global.css
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Zitare Theme CSS Variables - Purple/Indigo */
|
||||
:root {
|
||||
/* Primary colors - Zitare Purple */
|
||||
--color-primary: #8b5cf6;
|
||||
--color-primary-hover: #a78bfa;
|
||||
--color-primary-glow: rgba(139, 92, 246, 0.3);
|
||||
|
||||
/* Text colors */
|
||||
--color-text-primary: #f9fafb;
|
||||
--color-text-secondary: #d1d5db;
|
||||
--color-text-muted: #6b7280;
|
||||
|
||||
/* Background colors */
|
||||
--color-background-page: #0f0d1a;
|
||||
--color-background-card: #1a1625;
|
||||
--color-background-card-hover: #252033;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #2d2640;
|
||||
--color-border-hover: #3d3555;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-background-card);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-border-hover);
|
||||
}
|
||||
|
||||
/* 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, #8b5cf6 0%, #a78bfa 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;
|
||||
}
|
||||
|
||||
/* Quote styling */
|
||||
.quote-text {
|
||||
font-family: 'Merriweather', Georgia, serif;
|
||||
font-style: italic;
|
||||
line-height: 1.8;
|
||||
}
|
||||
38
apps/zitare/apps/landing/tailwind.config.mjs
Normal file
38
apps/zitare/apps/landing/tailwind.config.mjs
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/** @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: {
|
||||
// Zitare Purple/Indigo Theme
|
||||
primary: {
|
||||
DEFAULT: '#8b5cf6',
|
||||
hover: '#a78bfa',
|
||||
glow: 'rgba(139, 92, 246, 0.3)',
|
||||
},
|
||||
background: {
|
||||
page: '#0f0d1a',
|
||||
card: '#1a1625',
|
||||
'card-hover': '#252033',
|
||||
},
|
||||
text: {
|
||||
primary: '#f9fafb',
|
||||
secondary: '#d1d5db',
|
||||
muted: '#6b7280',
|
||||
},
|
||||
border: {
|
||||
DEFAULT: '#2d2640',
|
||||
hover: '#3d3555',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
serif: ['Merriweather', 'Georgia', 'serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue