refactor: restructure
monorepo with apps/ and services/ directories
25
apps/manacore/apps/landing/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# production
|
||||
dist/
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.local
|
||||
|
||||
# editor
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment
|
||||
.env
|
||||
.env.local
|
||||
.env.production.local
|
||||
.env.development.local
|
||||
176
apps/manacore/apps/landing/Plans/landing-page-concepts.md
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
# Landing Page Konzepte - Erste Vier Sektionen
|
||||
|
||||
## Konzept 1: "Die Ökosystem-Story"
|
||||
*Fokus auf das vernetzte Ökosystem und die Vision eines nachhaltigen Software-Modells*
|
||||
|
||||
### 1. Hero Section
|
||||
**Headline:** "Ein Ökosystem. Unendliche Möglichkeiten."
|
||||
**Subheadline:** "Manacore vernetzt deine KI-Tools zu einem nachhaltigen digitalen Ökosystem. Zahle nur was du nutzt, sammle Credits für später."
|
||||
|
||||
**CTA Buttons:**
|
||||
- Primary: "Kostenlos starten mit 150 Mana"
|
||||
- Secondary: "Das Ökosystem entdecken"
|
||||
|
||||
**Trust Badges erweitert:**
|
||||
- "🌱 10% für Klimaschutz"
|
||||
- "🇪🇺 Europäische Unabhängigkeit"
|
||||
- "🔒 DSGVO-konform"
|
||||
- "💳 Keine Kreditkarte nötig"
|
||||
|
||||
### 2. Ökosystem-Übersicht (statt Client Logos)
|
||||
**Headline:** "Vernetzte Apps, die zusammen stark sind"
|
||||
|
||||
**Grid mit App-Karten (3x2):**
|
||||
- **Memoro**: KI-Transkription & Analyse - "Verwandle Sprache in durchsuchbares Wissen"
|
||||
- **Coming Soon**: Dokumenten-KI - "PDFs verstehen und vernetzen"
|
||||
- **Coming Soon**: Kreativ-Suite - "Bilder und Videos mit KI bearbeiten"
|
||||
- **Coming Soon**: Code-Assistent - "Programmieren mit KI-Unterstützung"
|
||||
- **Coming Soon**: Wissens-Graph - "Alle deine Inhalte vernetzt"
|
||||
- **+**: "Werde Teil des Ökosystems"
|
||||
|
||||
### 3. Das Mana-Prinzip
|
||||
**Headline:** "Fair. Transparent. Nachhaltig."
|
||||
**Subheadline:** "Das revolutionäre Credit-System, das mit dir wächst"
|
||||
|
||||
**Content-Blocks:**
|
||||
- **Regeneration**: "Täglich neue Credits - sammle bis zu deinem Limit"
|
||||
- **Pay-per-Value**: "Zahle nur was du nutzt - keine versteckten Kosten"
|
||||
- **Transparenz**: "Jeder Cent aufgeschlüsselt - 10% für die Umwelt"
|
||||
|
||||
**Visual:** Animiertes Diagramm zeigt Mana-Flow und Kostenverteilung
|
||||
|
||||
### 4. Kostenvergleich
|
||||
**Headline:** "90% sparen gegenüber klassischen Lizenzen"
|
||||
|
||||
**Interaktiver Rechner:**
|
||||
- Slider: "Anzahl Nutzer in deinem Team"
|
||||
- Dropdown: "Nutzungsintensität"
|
||||
- Live-Berechnung zeigt:
|
||||
- Klassische Lizenzen: X€/Monat
|
||||
- Mit Manacore: Y€/Monat
|
||||
- Deine Ersparnis: Z%
|
||||
|
||||
**Testimonial-Box:**
|
||||
"Unser 50-köpfiges Team spart über 900€ monatlich. Die Credits teilen wir flexibel nach Bedarf auf." - CTO eines Mittelständlers
|
||||
|
||||
---
|
||||
|
||||
## Konzept 2: "Die Nutzen-First Approach"
|
||||
*Fokus auf konkrete Anwendungsfälle und sofortigen Mehrwert*
|
||||
|
||||
### 1. Hero Section
|
||||
**Headline:** "Deine KI-Superkräfte. Ein Credit-System."
|
||||
**Subheadline:** "Transkribiere Meetings, analysiere Dokumente, erstelle Content - alles mit Mana Credits, die niemals verfallen."
|
||||
|
||||
**Hero-Features (Icons + Text):**
|
||||
- "⚡ 2 Mana/Min für KI-Transkription"
|
||||
- "🔄 Credits regenerieren täglich"
|
||||
- "📊 Teile Credits im Team"
|
||||
|
||||
**CTA:**
|
||||
- Primary: "Jetzt 150 Mana gratis sichern"
|
||||
- Secondary: "2-Minuten-Demo ansehen"
|
||||
|
||||
### 2. Use-Case Showcase
|
||||
**Headline:** "Was kannst du mit Mana machen?"
|
||||
|
||||
**Karussell mit Anwendungsfällen:**
|
||||
1. **Meeting-Profi**: "60 Min Meeting = 120 Mana = 1,20€" + Screenshot Memoro
|
||||
2. **Forscher**: "1000 Interviews analysieren = Mana See Abo = 29,99€/Monat"
|
||||
3. **Startup**: "Ganze Firma versorgen = 2x Mana Meer = 99,98€/Monat"
|
||||
4. **Student**: "Vorlesungen transkribieren = Mana Fluss = 5,99€/Monat"
|
||||
|
||||
### 3. So funktioniert's
|
||||
**Headline:** "Drei Schritte zu deiner KI-Produktivität"
|
||||
|
||||
**Prozess-Visualisierung:**
|
||||
1. **Wähle dein Abo**: "Von kostenlos bis Mana Meer"
|
||||
2. **Nutze alle Apps**: "20+ KI-Tools mit einem Account"
|
||||
3. **Credits regenerieren**: "Täglich frische Mana, Reste sammeln sich"
|
||||
|
||||
**Live-Counter:** "Bereits 2.5 Millionen Mana genutzt für produktivere Arbeit"
|
||||
|
||||
### 4. Preistransparenz
|
||||
**Headline:** "Wohin fließt dein Geld?"
|
||||
|
||||
**Interaktive Torte:**
|
||||
- 40% KI & Server (hover: "Modernste KI-Modelle")
|
||||
- 25% Entwicklung (hover: "Ständig neue Features")
|
||||
- 15% App Stores (hover: "Für deine Sicherheit")
|
||||
- 10% Klimaschutz (hover: "CO2-neutral")
|
||||
- 10% Free Users (hover: "Bildung & NGOs")
|
||||
|
||||
**Bottom-Line:** "Bei uns keine versteckten Kosten. Punkt."
|
||||
|
||||
---
|
||||
|
||||
## Konzept 3: "Die Zukunftsvision"
|
||||
*Fokus auf Innovation, Nachhaltigkeit und europäische Unabhängigkeit*
|
||||
|
||||
### 1. Hero Section
|
||||
**Headline:** "Die Zukunft der Software ist nachhaltig"
|
||||
**Subheadline:** "Manacore baut das erste regenerative KI-Ökosystem Europas. Sei dabei, wenn Software demokratisch wird."
|
||||
|
||||
**Vision-Statements:**
|
||||
- "🌊 Software as a Flow - nicht als Lizenz"
|
||||
- "🇪🇺 Technologische Unabhängigkeit für Europa"
|
||||
- "🌱 10% jedes Euros für unseren Planeten"
|
||||
|
||||
**CTA:**
|
||||
- Primary: "Teil der Bewegung werden"
|
||||
- Secondary: "Manifest lesen"
|
||||
|
||||
### 2. Das Problem & Die Lösung
|
||||
**Split-Screen Design:**
|
||||
|
||||
**Links - "Das Problem":**
|
||||
- "Teure Einzellizenzen für jeden Mitarbeiter"
|
||||
- "Credits verfallen am Monatsende"
|
||||
- "Abhängigkeit von US-Tech-Giganten"
|
||||
- "Umweltkosten werden ignoriert"
|
||||
|
||||
**Rechts - "Die Lösung":**
|
||||
- "Ein Abo für's ganze Team teilen"
|
||||
- "Credits sammeln sich ohne Limit"
|
||||
- "Europäische Innovation & Datenschutz"
|
||||
- "10% für CO2-Kompensation"
|
||||
|
||||
### 3. Ökosystem-Evolution
|
||||
**Headline:** "Heute Memoro. Morgen die Welt."
|
||||
|
||||
**Timeline-Visualisierung:**
|
||||
- **Jetzt**: Memoro - KI-Transkription live
|
||||
- **Q2 2024**: Document AI - PDFs verstehen
|
||||
- **Q3 2024**: Creative Suite - Bilder & Video
|
||||
- **Q4 2024**: Code Assistant - Programmier-Hilfe
|
||||
- **2025**: Open Ecosystem - Jeder kann Apps beisteuern
|
||||
|
||||
**Partner-Aufruf:** "Entwickle mit uns die nächste App im Ökosystem"
|
||||
|
||||
### 4. Impact & Community
|
||||
**Headline:** "Gemeinsam gestalten wir die digitale Zukunft"
|
||||
|
||||
**Impact-Metriken (Live-Counter):**
|
||||
- "X Tonnen CO2 kompensiert"
|
||||
- "Y Stunden für NGOs bereitgestellt"
|
||||
- "Z Credits von der Community geteilt"
|
||||
|
||||
**Community-Features:**
|
||||
- "Werde Mana-Botschafter"
|
||||
- "Schlage neue Features vor"
|
||||
- "Profitiere von Empfehlungen"
|
||||
|
||||
**Abschluss-CTA:** "Starte heute deine nachhaltige KI-Reise"
|
||||
|
||||
---
|
||||
|
||||
## Empfehlung
|
||||
|
||||
Ich empfehle **Konzept 1 "Die Ökosystem-Story"** als Hauptansatz, mit Elementen aus Konzept 2 für mehr Nutzen-Klarheit. Diese Kombination würde:
|
||||
|
||||
1. Die Ökosystem-Vision klar kommunizieren
|
||||
2. Konkrete Anwendungsfälle zeigen
|
||||
3. Das innovative Mana-System verständlich machen
|
||||
4. Die Nachhaltigkeit und Fairness betonen
|
||||
|
||||
Die Hero-Section sollte sofort die Unique Selling Proposition vermitteln: Ein vernetztes Ökosystem mit fairem Pay-per-Use statt teurer Einzellizenzen. Die folgenden Sektionen bauen dann das Verständnis auf und führen zur Conversion.
|
||||
24
apps/manacore/apps/landing/astro.config.mjs
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import react from '@astrojs/react';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
import icon from 'astro-icon';
|
||||
|
||||
export default defineConfig({
|
||||
site: 'https://manacore.ai',
|
||||
integrations: [
|
||||
react(),
|
||||
tailwind(),
|
||||
icon()
|
||||
],
|
||||
output: 'static',
|
||||
build: {
|
||||
inlineStylesheets: 'auto'
|
||||
},
|
||||
i18n: {
|
||||
defaultLocale: 'de',
|
||||
locales: ['de', 'en', 'it'],
|
||||
routing: {
|
||||
prefixDefaultLocale: false
|
||||
}
|
||||
}
|
||||
});
|
||||
29
apps/manacore/apps/landing/netlify.toml
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
[build]
|
||||
command = "npm run build"
|
||||
publish = "dist"
|
||||
|
||||
[build.environment]
|
||||
NODE_VERSION = "18"
|
||||
|
||||
[[redirects]]
|
||||
from = "/*"
|
||||
to = "/index.html"
|
||||
status = 200
|
||||
conditions = {Language = ["de"]}
|
||||
|
||||
[[redirects]]
|
||||
from = "/en/*"
|
||||
to = "/en/:splat"
|
||||
status = 200
|
||||
|
||||
[[redirects]]
|
||||
from = "/it/*"
|
||||
to = "/it/:splat"
|
||||
status = 200
|
||||
|
||||
[[headers]]
|
||||
for = "/*"
|
||||
[headers.values]
|
||||
X-Frame-Options = "DENY"
|
||||
X-Content-Type-Options = "nosniff"
|
||||
Referrer-Policy = "strict-origin-when-cross-origin"
|
||||
28
apps/manacore/apps/landing/package.json
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "@manacore/landing",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^3.6.0",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@iconify-json/heroicons": "^1.2.2",
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/tabler": "^1.2.19",
|
||||
"@manacore/shared-landing-ui": "workspace:*",
|
||||
"astro": "^5.16.0",
|
||||
"astro-icon": "^1.1.5",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.7",
|
||||
"tailwindcss": "^3.4.0"
|
||||
}
|
||||
}
|
||||
49
apps/manacore/apps/landing/public/README.md
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
# Public Assets Directory
|
||||
|
||||
This directory contains all static assets for the Mana landing page.
|
||||
|
||||
## Directory Structure:
|
||||
|
||||
```
|
||||
public/
|
||||
├── logos/ # Brand logos and variations
|
||||
├── icons/ # Favicons and app icons
|
||||
├── images/ # General images and graphics
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Asset Management Guidelines:
|
||||
|
||||
### File Organization:
|
||||
- Keep assets organized in their respective subdirectories
|
||||
- Don't place files directly in the public root unless necessary
|
||||
- Each subdirectory has its own README with specific guidelines
|
||||
|
||||
### Version Control:
|
||||
- Commit optimized images only
|
||||
- Use Git LFS for large binary files if needed
|
||||
- Avoid committing source files (PSD, AI, etc.) - keep those elsewhere
|
||||
|
||||
### Performance Considerations:
|
||||
1. Always optimize images before committing
|
||||
2. Use appropriate formats (SVG for logos/icons, WebP/JPG for photos)
|
||||
3. Implement lazy loading for non-critical images
|
||||
4. Consider using a CDN for production
|
||||
|
||||
### Accessibility:
|
||||
- Always provide alt text for images in your components
|
||||
- Ensure sufficient contrast for overlaid text on images
|
||||
- Test icons and images for color blind accessibility
|
||||
|
||||
## Quick Reference:
|
||||
|
||||
- **Logos**: `/public/logos/` - Brand identity assets
|
||||
- **Icons**: `/public/icons/` - Favicons and app icons
|
||||
- **Images**: `/public/images/` - Photos, illustrations, backgrounds
|
||||
|
||||
## Next Steps:
|
||||
|
||||
1. Add the Mana logo files to the `/logos` directory
|
||||
2. Generate and add favicon set to the `/icons` directory
|
||||
3. Add any hero images or illustrations to the `/images` directory
|
||||
4. Update the Astro components to reference these assets
|
||||
38
apps/manacore/apps/landing/public/icons/README.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# Icons Directory
|
||||
|
||||
This directory is for storing favicons and app icons for the Mana landing page.
|
||||
|
||||
## Required Icon Files:
|
||||
|
||||
### Favicons:
|
||||
1. **favicon.ico** - Traditional favicon (16x16, 32x32, 48x48)
|
||||
2. **favicon-16x16.png** - 16x16px PNG favicon
|
||||
3. **favicon-32x32.png** - 32x32px PNG favicon
|
||||
4. **favicon-96x96.png** - 96x96px PNG favicon
|
||||
|
||||
### Apple Touch Icons:
|
||||
1. **apple-touch-icon.png** - 180x180px (iOS)
|
||||
2. **apple-touch-icon-57x57.png** - iPhone non-retina
|
||||
3. **apple-touch-icon-72x72.png** - iPad non-retina
|
||||
4. **apple-touch-icon-114x114.png** - iPhone retina
|
||||
5. **apple-touch-icon-144x144.png** - iPad retina
|
||||
|
||||
### Android/Chrome Icons:
|
||||
1. **android-chrome-192x192.png** - Android Chrome icon
|
||||
2. **android-chrome-512x512.png** - Android Chrome splash
|
||||
|
||||
### Microsoft Tiles:
|
||||
1. **mstile-150x150.png** - Windows tile icon
|
||||
|
||||
### Other Icons:
|
||||
1. **safari-pinned-tab.svg** - Safari pinned tab icon (monochrome)
|
||||
|
||||
## Manifest Files to Add:
|
||||
1. **manifest.json** - Web app manifest
|
||||
2. **browserconfig.xml** - Windows tile configuration
|
||||
|
||||
## Icon Generation Tips:
|
||||
- Start with a high-resolution square version of the Mana logo
|
||||
- Use online favicon generators like realfavicongenerator.net
|
||||
- Ensure icons work on both light and dark backgrounds
|
||||
- Test icons across different browsers and devices
|
||||
3
apps/manacore/apps/landing/public/icons/mana-icon.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z" fill="#0099FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 502 B |
|
After Width: | Height: | Size: 241 KiB |
|
After Width: | Height: | Size: 364 KiB |
|
After Width: | Height: | Size: 435 KiB |
|
After Width: | Height: | Size: 417 KiB |
|
After Width: | Height: | Size: 352 KiB |
|
After Width: | Height: | Size: 387 KiB |
|
After Width: | Height: | Size: 370 KiB |
|
After Width: | Height: | Size: 433 KiB |
|
After Width: | Height: | Size: 342 KiB |
|
After Width: | Height: | Size: 465 KiB |
|
After Width: | Height: | Size: 311 KiB |
55
apps/manacore/apps/landing/public/images/README.md
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
# Images Directory
|
||||
|
||||
This directory is for storing general images used throughout the Mana landing page.
|
||||
|
||||
## Recommended Image Categories:
|
||||
|
||||
### Hero Images:
|
||||
- **hero-background.jpg** - Main hero section background
|
||||
- **hero-illustration.svg** - Hero section illustration/graphic
|
||||
|
||||
### Feature Images:
|
||||
- **feature-1.png** - First feature illustration
|
||||
- **feature-2.png** - Second feature illustration
|
||||
- **feature-3.png** - Third feature illustration
|
||||
|
||||
### Product Screenshots:
|
||||
- **dashboard-preview.png** - Dashboard screenshot
|
||||
- **mobile-preview.png** - Mobile app screenshot
|
||||
- **analytics-preview.png** - Analytics view screenshot
|
||||
|
||||
### Team/About:
|
||||
- **team-member-1.jpg** - Team member photos
|
||||
- **office-photo.jpg** - Company/office imagery
|
||||
|
||||
### Background Patterns:
|
||||
- **pattern-dots.svg** - Decorative dot pattern
|
||||
- **pattern-grid.svg** - Grid pattern
|
||||
- **gradient-bg.jpg** - Gradient backgrounds
|
||||
|
||||
## Image Optimization Guidelines:
|
||||
|
||||
### Format Selection:
|
||||
- **JPG**: Photos, complex images with many colors
|
||||
- **PNG**: Images requiring transparency, screenshots
|
||||
- **SVG**: Icons, illustrations, patterns (scalable)
|
||||
- **WebP**: Modern format for better compression (with fallbacks)
|
||||
|
||||
### Size Optimization:
|
||||
- Compress images using tools like TinyPNG or ImageOptim
|
||||
- Provide responsive images in multiple sizes:
|
||||
- Small: 640px width
|
||||
- Medium: 1024px width
|
||||
- Large: 1920px width
|
||||
- Extra Large: 2560px width
|
||||
|
||||
### Naming Convention:
|
||||
- Use descriptive, lowercase names with hyphens
|
||||
- Include size suffixes for responsive images (e.g., hero-bg-large.jpg)
|
||||
- Group related images with common prefixes
|
||||
|
||||
### Performance Tips:
|
||||
- Lazy load images below the fold
|
||||
- Use appropriate image dimensions (don't serve 4K images for thumbnails)
|
||||
- Consider using CDN for image delivery
|
||||
- Implement proper caching headers
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
BIN
apps/manacore/apps/landing/public/logos/Memoro-Logo-V1.png
Normal file
|
After Width: | Height: | Size: 89 KiB |
BIN
apps/manacore/apps/landing/public/logos/Märchenzauber-logo.png
Normal file
|
After Width: | Height: | Size: 61 KiB |
26
apps/manacore/apps/landing/public/logos/README.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Logos Directory
|
||||
|
||||
This directory is for storing logo variations of the Mana brand.
|
||||
|
||||
## Recommended Logo Files to Add:
|
||||
|
||||
1. **mana-logo.svg** - Primary logo in SVG format (scalable)
|
||||
2. **mana-logo.png** - Primary logo in PNG format
|
||||
3. **mana-logo-dark.svg** - Logo variant for dark backgrounds
|
||||
4. **mana-logo-light.svg** - Logo variant for light backgrounds
|
||||
5. **mana-logo-horizontal.svg** - Horizontal layout variant
|
||||
6. **mana-logo-vertical.svg** - Vertical/stacked layout variant
|
||||
7. **mana-logo-mark.svg** - Logo mark only (icon without text)
|
||||
|
||||
## Naming Convention:
|
||||
- Use lowercase with hyphens
|
||||
- Include variant descriptors (dark, light, horizontal, etc.)
|
||||
- Always include format extension (.svg, .png, .jpg)
|
||||
|
||||
## Size Guidelines:
|
||||
- SVG files are preferred for scalability
|
||||
- For PNG exports, provide multiple sizes:
|
||||
- Small: 200px width
|
||||
- Medium: 400px width
|
||||
- Large: 800px width
|
||||
- Extra Large: 1200px width
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
---
|
||||
import Container from '../layout/Container.astro';
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
import Image from '../ui/Image.astro';
|
||||
import Section from './Section.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
centered?: boolean;
|
||||
backgroundImage?: string;
|
||||
overlay?: boolean;
|
||||
minHeight?: 'screen' | 'large' | 'medium' | 'small';
|
||||
sideImage?: boolean;
|
||||
imagePosition?: 'left' | 'right';
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
background?: 'none' | 'gray' | 'gradient' | 'mana-blue';
|
||||
icon?: string;
|
||||
iconSize?: 'small' | 'medium' | 'large';
|
||||
titleSize?: '1' | '2' | '3' | '4' | '5' | '6' | '7';
|
||||
titleClass?: string;
|
||||
subtitleClass?: string;
|
||||
spacing?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
|
||||
containerClass?: string;
|
||||
showIcon?: boolean;
|
||||
animatedIcon?: boolean;
|
||||
debug?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
centered = true,
|
||||
backgroundImage,
|
||||
overlay = true,
|
||||
minHeight = 'large',
|
||||
sideImage = false,
|
||||
imagePosition = 'right',
|
||||
imageSrc,
|
||||
imageAlt = '',
|
||||
background = 'none',
|
||||
icon,
|
||||
iconSize = 'medium',
|
||||
titleSize = '1',
|
||||
titleClass = '',
|
||||
subtitleClass = '',
|
||||
spacing = 'large',
|
||||
containerClass = '',
|
||||
showIcon = false,
|
||||
animatedIcon = false,
|
||||
debug = false,
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const heights = {
|
||||
screen: 'min-h-screen',
|
||||
large: 'min-h-[600px]',
|
||||
medium: 'min-h-[400px]',
|
||||
small: 'min-h-[300px]'
|
||||
};
|
||||
|
||||
const iconSizes = {
|
||||
small: 'w-12 h-12',
|
||||
medium: 'w-16 h-16',
|
||||
large: 'w-20 h-20'
|
||||
};
|
||||
|
||||
const backgrounds = {
|
||||
none: '',
|
||||
gray: 'bg-gray-50 dark:bg-gray-900',
|
||||
gradient: 'bg-gradient-to-br from-blue-50 to-transparent dark:from-blue-950/20 dark:to-transparent',
|
||||
'mana-blue': 'bg-mana-blue text-white'
|
||||
};
|
||||
|
||||
const containerClasses = `relative ${heights[minHeight]} flex items-center ${backgrounds[background]} pt-20 ${debug ? 'debug-border debug-border-red' : ''} ${backgroundImage ? 'bg-cover bg-center bg-no-repeat' : ''}`;
|
||||
const contentClasses = centered ? 'text-center' : '';
|
||||
const backgroundStyles = backgroundImage ? `background-image: url('${backgroundImage}');` : '';
|
||||
|
||||
// Debug info
|
||||
const debugInfo = debug ? {
|
||||
minHeight,
|
||||
background,
|
||||
sideImage,
|
||||
imagePosition,
|
||||
centered,
|
||||
titleSize,
|
||||
iconSize,
|
||||
spacing
|
||||
} : null;
|
||||
---
|
||||
|
||||
<Section spacing={spacing} class={containerClasses} style={backgroundStyles} {...rest}>
|
||||
{backgroundImage && overlay && (
|
||||
<div class="absolute inset-0 bg-black bg-opacity-50 dark:bg-opacity-70"></div>
|
||||
)}
|
||||
|
||||
<Container class={`relative z-10 ${containerClass} ${sideImage ? '!px-0' : ''} ${debug ? 'debug-border debug-border-blue' : ''}`}>
|
||||
{debug && debugInfo && (
|
||||
<div class="absolute top-0 left-0 bg-black/80 text-white text-xs p-2 rounded-br-lg z-50 font-mono">
|
||||
<div class="font-bold mb-1 text-yellow-300">🐛 HeroSection Debug</div>
|
||||
{Object.entries(debugInfo).map(([key, value]) => (
|
||||
<div>{key}: <span class="text-green-300">{String(value)}</span></div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sideImage ? (
|
||||
<div class={`grid grid-cols-1 lg:grid-cols-2 gap-0 items-center ${debug ? 'debug-border debug-border-green' : ''}`}>
|
||||
<!-- Mobile: Image first, Desktop: Based on imagePosition -->
|
||||
<div class={`order-1 lg:order-${imagePosition === 'left' ? '1' : '2'} ${debug ? 'debug-border debug-border-yellow' : ''}`}>
|
||||
<slot name="image">
|
||||
{imageSrc ? (
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={imageAlt}
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
placeholder="dashboard"
|
||||
alt="Manacore Dashboard"
|
||||
width={600}
|
||||
height={400}
|
||||
rounded
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class={`order-2 lg:order-${imagePosition === 'left' ? '2' : '1'} ${contentClasses} px-8 lg:px-16 ${debug ? 'debug-border debug-border-purple' : ''}`}>
|
||||
{(icon || showIcon) && (
|
||||
<div class={`mb-6 ${centered ? 'flex justify-center' : ''}`}>
|
||||
{animatedIcon ? (
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-mana-blue/20 blur-3xl animate-pulse"></div>
|
||||
{icon ? (
|
||||
typeof icon === 'string' && icon.startsWith('mdi:') ? (
|
||||
<Icon name={icon} class={`${iconSizes[iconSize]} relative animate-float`} />
|
||||
) : (
|
||||
<img src={icon} alt="" class={`${iconSizes[iconSize]} relative animate-float`} />
|
||||
)
|
||||
) : (
|
||||
<slot name="icon" />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
icon ? (
|
||||
typeof icon === 'string' && icon.startsWith('mdi:') ? (
|
||||
<div class={`${iconSizes[iconSize]} bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center`}>
|
||||
<Icon name={icon} class="w-1/2 h-1/2" />
|
||||
</div>
|
||||
) : (
|
||||
<img src={icon} alt="" class={`${iconSizes[iconSize]}`} />
|
||||
)
|
||||
) : (
|
||||
<slot name="icon" />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Heading as="h1" size={titleSize} class={`mb-6 ${titleClass} ${debug ? 'debug-border debug-border-orange' : ''}`}>
|
||||
<Fragment set:html={title} />
|
||||
</Heading>
|
||||
|
||||
{subtitle && (
|
||||
<Text size="xl" color="muted" class={`mb-8 ${subtitleClass} ${debug ? 'debug-border debug-border-cyan' : ''}`}>
|
||||
<Fragment set:html={subtitle} />
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<div class={debug ? 'debug-border debug-border-pink' : ''}>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div class={`${contentClasses} ${centered ? 'max-w-5xl mx-auto' : ''} ${debug ? 'debug-border debug-border-purple' : ''}`}>
|
||||
{(icon || showIcon) && (
|
||||
<div class={`mb-6 ${centered ? 'flex justify-center' : ''}`}>
|
||||
{animatedIcon ? (
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-mana-blue/20 blur-3xl animate-pulse"></div>
|
||||
{icon ? (
|
||||
typeof icon === 'string' && icon.startsWith('mdi:') ? (
|
||||
<Icon name={icon} class={`${iconSizes[iconSize]} relative animate-float`} />
|
||||
) : (
|
||||
<img src={icon} alt="" class={`${iconSizes[iconSize]} relative animate-float`} />
|
||||
)
|
||||
) : (
|
||||
<slot name="icon" />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
icon ? (
|
||||
typeof icon === 'string' && icon.startsWith('mdi:') ? (
|
||||
<div class={`${iconSizes[iconSize]} bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center mx-auto`}>
|
||||
<Icon name={icon} class="w-1/2 h-1/2" />
|
||||
</div>
|
||||
) : (
|
||||
<img src={icon} alt="" class={`${iconSizes[iconSize]} ${centered ? 'mx-auto' : ''}`} />
|
||||
)
|
||||
) : (
|
||||
<slot name="icon" />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Heading as="h1" size={titleSize} class={`mb-6 ${titleClass} ${debug ? 'debug-border debug-border-orange' : ''}`}>
|
||||
<Fragment set:html={title} />
|
||||
</Heading>
|
||||
|
||||
{subtitle && (
|
||||
<Text size="xl" color={background === 'mana-blue' ? 'default' : 'muted'} class={`mb-8 ${centered ? 'max-w-3xl mx-auto' : ''} ${subtitleClass} ${debug ? 'debug-border debug-border-cyan' : ''}`}>
|
||||
<Fragment set:html={subtitle} />
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<div class={debug ? 'debug-border debug-border-pink' : ''}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Debug Borders */
|
||||
.debug-border {
|
||||
position: relative;
|
||||
border: 2px dashed;
|
||||
}
|
||||
|
||||
.debug-border::before {
|
||||
content: attr(class);
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 0;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.debug-border-red {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
.debug-border-red::before {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
content: 'Section Container';
|
||||
}
|
||||
|
||||
.debug-border-blue {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
.debug-border-blue::before {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
content: 'Container';
|
||||
}
|
||||
|
||||
.debug-border-green {
|
||||
border-color: #10b981;
|
||||
}
|
||||
.debug-border-green::before {
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
content: 'Grid Layout';
|
||||
}
|
||||
|
||||
.debug-border-yellow {
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
.debug-border-yellow::before {
|
||||
background-color: #f59e0b;
|
||||
color: black;
|
||||
content: 'Image Container';
|
||||
}
|
||||
|
||||
.debug-border-purple {
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
.debug-border-purple::before {
|
||||
background-color: #8b5cf6;
|
||||
color: white;
|
||||
content: 'Content Container';
|
||||
}
|
||||
|
||||
.debug-border-orange {
|
||||
border-color: #f97316;
|
||||
}
|
||||
.debug-border-orange::before {
|
||||
background-color: #f97316;
|
||||
color: white;
|
||||
content: 'Title';
|
||||
}
|
||||
|
||||
.debug-border-cyan {
|
||||
border-color: #06b6d4;
|
||||
}
|
||||
.debug-border-cyan::before {
|
||||
background-color: #06b6d4;
|
||||
color: white;
|
||||
content: 'Subtitle';
|
||||
}
|
||||
|
||||
.debug-border-pink {
|
||||
border-color: #ec4899;
|
||||
}
|
||||
.debug-border-pink::before {
|
||||
background-color: #ec4899;
|
||||
color: white;
|
||||
content: 'Slot Content';
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
import Section from './Section.astro';
|
||||
import Container from '../layout/Container.astro';
|
||||
import Grid from '../layout/Grid.astro';
|
||||
import Card from '../ui/Card.astro';
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
import Image from '../ui/Image.astro';
|
||||
import Button from '../ui/Button.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
content: string;
|
||||
imagePosition?: 'left' | 'right';
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
content,
|
||||
imagePosition = 'left',
|
||||
imageSrc,
|
||||
imageAlt = ''
|
||||
} = Astro.props;
|
||||
|
||||
const imageOrder = imagePosition === 'left' ? 'lg:order-1' : 'lg:order-2';
|
||||
const textOrder = imagePosition === 'left' ? 'lg:order-2' : 'lg:order-1';
|
||||
---
|
||||
|
||||
<Section spacing="large">
|
||||
<Container grid class="items-center">
|
||||
<!-- Image Column - Spans half grid on desktop -->
|
||||
<div class={`grid-half ${imageOrder}`}>
|
||||
<div class="relative max-w-md mx-auto lg:mx-0 ${imagePosition === 'right' ? 'lg:ml-auto' : ''}">
|
||||
{imageSrc ? (
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={imageAlt}
|
||||
class="w-full rounded-3xl shadow-lg"
|
||||
/>
|
||||
) : (
|
||||
<div class="aspect-square bg-gray-50 dark:bg-gray-900 rounded-3xl flex items-center justify-center border border-gray-200 dark:border-gray-800 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-radial from-mana-blue/10 to-transparent"></div>
|
||||
<img
|
||||
src="/icons/mana-icon.svg"
|
||||
alt="Mana Icon"
|
||||
class="w-32 h-32 opacity-30 relative z-10"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Column with 3:4 aspect ratio - Spans half grid on desktop -->
|
||||
<div class={`grid-half ${textOrder}`}>
|
||||
<div class="relative group max-w-sm mx-auto lg:mx-0 ${imagePosition === 'left' ? 'lg:ml-auto' : ''}">
|
||||
<!-- Subtle glow effect -->
|
||||
<div class="absolute -inset-1 bg-mana-blue/10 rounded-3xl blur-xl group-hover:bg-mana-blue/20 transition-all duration-500"></div>
|
||||
|
||||
<!-- Card with 3:4 aspect ratio -->
|
||||
<div class="relative overflow-hidden bg-gray-900 dark:bg-gray-950 border border-gray-800 dark:border-gray-700 hover:border-gray-700 dark:hover:border-gray-600 transition-all duration-300 rounded-3xl shadow-xl" style="aspect-ratio: 3/4;">
|
||||
<div class="p-8 md:p-10 h-full flex flex-col justify-center">
|
||||
<Text size="lg" class="leading-relaxed">
|
||||
<span class="text-white font-medium">{title}</span>
|
||||
<span class="text-gray-400"> {content}</span>
|
||||
</Text>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
export interface Props {
|
||||
background?: 'white' | 'gray' | 'primary' | 'gradient';
|
||||
spacing?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
background = 'white',
|
||||
spacing = 'large',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const backgrounds = {
|
||||
white: '', // Inherit from body
|
||||
gray: '', // Inherit from body
|
||||
primary: '', // Inherit from body
|
||||
gradient: 'bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800'
|
||||
};
|
||||
|
||||
const spacings = {
|
||||
none: '',
|
||||
small: 'py-8 md:py-12',
|
||||
medium: 'py-12 md:py-16',
|
||||
large: 'py-16 md:py-24',
|
||||
xlarge: 'py-24 md:py-32'
|
||||
};
|
||||
|
||||
const classes = `${backgrounds[background]} ${spacings[spacing]} ${className}`;
|
||||
---
|
||||
|
||||
<section class={classes} {...rest}>
|
||||
<slot />
|
||||
</section>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
export interface Props {
|
||||
type?: 'success' | 'error' | 'warning' | 'info';
|
||||
title?: string;
|
||||
dismissible?: boolean;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
type = 'info',
|
||||
title,
|
||||
dismissible = false,
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const baseStyles = "p-4 rounded-lg flex items-start";
|
||||
|
||||
const types = {
|
||||
success: "bg-green-50 dark:bg-green-950 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800",
|
||||
error: "bg-red-50 dark:bg-red-950 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-800",
|
||||
warning: "bg-yellow-50 dark:bg-yellow-950 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800",
|
||||
info: "bg-blue-50 dark:bg-blue-950 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800"
|
||||
};
|
||||
|
||||
const icons = {
|
||||
success: `<svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||
</svg>`,
|
||||
error: `<svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
|
||||
</svg>`,
|
||||
warning: `<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
|
||||
</svg>`,
|
||||
info: `<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
|
||||
</svg>`
|
||||
};
|
||||
|
||||
const classes = `${baseStyles} ${types[type]} ${className}`;
|
||||
---
|
||||
|
||||
<div class={classes} role="alert" {...rest}>
|
||||
<div class="flex-shrink-0" set:html={icons[type]} />
|
||||
|
||||
<div class="ml-3 flex-1">
|
||||
{title && (
|
||||
<h3 class="text-sm font-medium mb-1">{title}</h3>
|
||||
)}
|
||||
<div class="text-sm">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dismissible && (
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex h-8 w-8 hover:bg-gray-100 hover:bg-opacity-25"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
export interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`page-grid ${className}`} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
59
apps/manacore/apps/landing/src/components/layout/Flex.astro
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
---
|
||||
export interface Props {
|
||||
direction?: 'row' | 'column';
|
||||
wrap?: boolean;
|
||||
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
||||
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
||||
gap?: 'none' | 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
direction = 'row',
|
||||
wrap = false,
|
||||
align = 'stretch',
|
||||
justify = 'start',
|
||||
gap = 'none',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const baseStyles = "flex";
|
||||
|
||||
const directions = {
|
||||
row: "flex-row",
|
||||
column: "flex-col"
|
||||
};
|
||||
|
||||
const alignments = {
|
||||
start: "items-start",
|
||||
center: "items-center",
|
||||
end: "items-end",
|
||||
stretch: "items-stretch",
|
||||
baseline: "items-baseline"
|
||||
};
|
||||
|
||||
const justifications = {
|
||||
start: "justify-start",
|
||||
center: "justify-center",
|
||||
end: "justify-end",
|
||||
between: "justify-between",
|
||||
around: "justify-around",
|
||||
evenly: "justify-evenly"
|
||||
};
|
||||
|
||||
const gaps = {
|
||||
none: "",
|
||||
small: "gap-2",
|
||||
medium: "gap-4",
|
||||
large: "gap-6"
|
||||
};
|
||||
|
||||
const wrapStyle = wrap ? "flex-wrap" : "";
|
||||
|
||||
const classes = `${baseStyles} ${directions[direction]} ${alignments[align]} ${justifications[justify]} ${gaps[gap]} ${wrapStyle} ${className}`;
|
||||
---
|
||||
|
||||
<div class={classes} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
38
apps/manacore/apps/landing/src/components/layout/Grid.astro
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
export interface Props {
|
||||
cols?: 1 | 2 | 3 | 4 | 6 | 12;
|
||||
gap?: 'none' | 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
cols = 1,
|
||||
gap = 'medium',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const baseStyles = "grid";
|
||||
|
||||
const columns = {
|
||||
1: "grid-cols-1",
|
||||
2: "grid-cols-1 md:grid-cols-2",
|
||||
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
||||
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
||||
6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
|
||||
12: "grid-cols-4 md:grid-cols-6 lg:grid-cols-12"
|
||||
};
|
||||
|
||||
const gaps = {
|
||||
none: "",
|
||||
small: "gap-4",
|
||||
medium: "gap-6",
|
||||
large: "gap-8"
|
||||
};
|
||||
|
||||
const classes = `${baseStyles} ${columns[cols]} ${gaps[gap]} ${className}`;
|
||||
---
|
||||
|
||||
<div class={classes} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
import Container from '../layout/Container.astro';
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const footerLinks = [
|
||||
{ label: 'Apps', href: '/apps' },
|
||||
{ label: 'Preise', href: '/pricing' },
|
||||
{ label: 'Mission', href: '/mission' },
|
||||
{ label: 'Datenschutz', href: '/privacy' },
|
||||
{ label: 'Impressum', href: '/impressum' },
|
||||
];
|
||||
---
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-overlay"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="footer-content">
|
||||
<!-- Links -->
|
||||
<nav class="footer-nav">
|
||||
{footerLinks.map(link => (
|
||||
<a href={link.href} class="footer-link">
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="footer-copyright">
|
||||
© {currentYear} Manacore Verein
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
|
||||
border-top: 1px solid rgba(248, 250, 252, 0.05);
|
||||
}
|
||||
|
||||
.footer-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.04) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
padding: 2rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.8125rem;
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
color: #475569;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(248, 250, 252, 0.05);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 640px) {
|
||||
.footer-content {
|
||||
padding: 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
gap: 0.375rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
padding-top: 1rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
export interface Props {
|
||||
navLinks: { href: string; label: string; }[];
|
||||
}
|
||||
|
||||
const { navLinks } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- Mobile Menu Overlay -->
|
||||
<div id="mobile-menu" class="fixed inset-0 z-50 hidden">
|
||||
<!-- Background overlay -->
|
||||
<div class="fixed inset-0 bg-black/50 z-40" id="mobile-menu-overlay"></div>
|
||||
|
||||
<!-- Menu panel -->
|
||||
<div class="fixed right-0 top-0 h-full w-full max-w-sm bg-white dark:bg-gray-900 shadow-xl overflow-y-auto z-50 transform transition-transform duration-300 translate-x-full">
|
||||
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
|
||||
<span class="text-xl font-bold text-mana-blue">
|
||||
Manacore
|
||||
</span>
|
||||
<button
|
||||
id="mobile-menu-close"
|
||||
class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
|
||||
aria-label="Menü schließen"
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<nav class="p-4 bg-white dark:bg-gray-900">
|
||||
<ul class="space-y-2">
|
||||
{navLinks.map(link => (
|
||||
<li>
|
||||
<a
|
||||
href={link.href}
|
||||
class="block px-4 py-3 text-lg font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="mt-8 space-y-3">
|
||||
<a
|
||||
href="/demo"
|
||||
class="block w-full px-6 py-3 text-center font-semibold text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Demo buchen
|
||||
</a>
|
||||
<a
|
||||
href="/start"
|
||||
class="block w-full px-6 py-3 text-center font-semibold text-white bg-mana-orange rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
Kostenlos testen
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-800">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Kontakt:</p>
|
||||
<a href="mailto:till.schneider@mana.ai" class="text-sm text-mana-blue hover:text-mana-purple transition-colors">
|
||||
till.schneider@mana.ai
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
---
|
||||
import Container from '../layout/Container.astro';
|
||||
import Button from '../ui/Button.astro';
|
||||
import ThemeToggle from '../ui/ThemeToggle.astro';
|
||||
import MobileMenu from './MobileMenu.astro';
|
||||
import LanguageSwitcher from '../ui/LanguageSwitcher.astro';
|
||||
import { getLangFromUrl, useTranslations } from '../../lib/i18n/config';
|
||||
import { getLocalizedRoute } from '../../lib/i18n/utils';
|
||||
|
||||
export interface Props {
|
||||
transparent?: boolean;
|
||||
sticky?: boolean;
|
||||
}
|
||||
|
||||
const { transparent = false, sticky = true } = Astro.props;
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
|
||||
const navLinks = [
|
||||
{ href: getLocalizedRoute('/apps', lang), label: t('nav.apps') },
|
||||
{ href: getLocalizedRoute('/pricing', lang), label: t('nav.pricing') },
|
||||
{ href: getLocalizedRoute('/clients', lang), label: t('nav.references') },
|
||||
{ href: getLocalizedRoute('/privacy', lang), label: t('nav.privacy') },
|
||||
];
|
||||
|
||||
const baseStyles = "w-full transition-all duration-300";
|
||||
const bgStyles = transparent ? "bg-transparent" : "bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50";
|
||||
const positionStyles = sticky ? "sticky top-0 z-50" : "";
|
||||
|
||||
const classes = `${baseStyles} ${bgStyles} ${positionStyles}`;
|
||||
---
|
||||
|
||||
<nav class={classes}>
|
||||
<Container>
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Logo -->
|
||||
<a href={getLocalizedRoute('/', lang)} class="flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/mana-icon.svg"
|
||||
alt="Mana Logo"
|
||||
class="w-8 h-8"
|
||||
/>
|
||||
<span class="text-2xl font-bold text-mana-blue">
|
||||
Manacore
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
{navLinks.map(link => (
|
||||
<a
|
||||
href={link.href}
|
||||
class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons and Theme Toggle -->
|
||||
<div class="hidden md:flex items-center space-x-3">
|
||||
<LanguageSwitcher currentLang={lang} />
|
||||
<ThemeToggle />
|
||||
<Button href={getLocalizedRoute('/start', lang)} size="small" class="bg-mana-orange hover:bg-orange-600">
|
||||
{t('button.startFree')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="md:hidden flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<button
|
||||
id="mobile-menu-open"
|
||||
class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors"
|
||||
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>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<!-- Mobile Menu Component -->
|
||||
<MobileMenu navLinks={navLinks} />
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const mobileMenuPanel = mobileMenu?.querySelector('.transform');
|
||||
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
||||
const mobileMenuClose = document.getElementById('mobile-menu-close');
|
||||
const mobileMenuOpen = document.getElementById('mobile-menu-open');
|
||||
|
||||
function openMobileMenu() {
|
||||
if (!mobileMenu || !mobileMenuPanel) return;
|
||||
|
||||
mobileMenu.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Trigger animation after display change
|
||||
requestAnimationFrame(() => {
|
||||
mobileMenuPanel.classList.remove('translate-x-full');
|
||||
});
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
if (!mobileMenu || !mobileMenuPanel) return;
|
||||
|
||||
mobileMenuPanel.classList.add('translate-x-full');
|
||||
document.body.style.overflow = '';
|
||||
|
||||
// Hide after animation completes
|
||||
setTimeout(() => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
mobileMenuOpen?.addEventListener('click', openMobileMenu);
|
||||
mobileMenuClose?.addEventListener('click', closeMobileMenu);
|
||||
mobileMenuOverlay?.addEventListener('click', closeMobileMenu);
|
||||
|
||||
// Close menu on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !mobileMenu?.classList.contains('hidden')) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
---
|
||||
import ThemeToggle from '../ui/ThemeToggle.astro';
|
||||
import LanguageSwitcher from '../ui/LanguageSwitcher.astro';
|
||||
import { getLangFromUrl, useTranslations } from '../../lib/i18n/config';
|
||||
import { getLocalizedRoute } from '../../lib/i18n/utils';
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
|
||||
const navLinks = [
|
||||
{ href: getLocalizedRoute('/apps', lang), label: t('nav.apps'), icon: 'M4 6h16M4 12h16M4 18h16' },
|
||||
{ href: getLocalizedRoute('/pricing', lang), label: t('nav.pricing'), icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1' },
|
||||
{ href: getLocalizedRoute('/clients', lang), label: t('nav.references'), icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z' },
|
||||
{ href: getLocalizedRoute('/privacy', lang), label: t('nav.privacy'), icon: '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' },
|
||||
];
|
||||
---
|
||||
|
||||
<!-- FAB Menu Button -->
|
||||
<button
|
||||
id="fab-toggle"
|
||||
class="fixed md:top-6 bottom-6 md:bottom-auto right-6 z-[101] w-14 h-14 text-white rounded-full shadow-2xl flex items-center justify-center transition-all"
|
||||
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4), 0 0 0 0 rgba(59, 130, 246, 0.5);"
|
||||
aria-label="Menü öffnen"
|
||||
>
|
||||
<svg id="fab-icon" class="w-6 h-6 transition-transform duration-300" 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>
|
||||
|
||||
<!-- Menu Container -->
|
||||
<aside id="sidebar" class="fixed md:top-6 bottom-24 md:bottom-auto md:right-24 right-6 z-[100] transition-all duration-300 opacity-0 pointer-events-none scale-95">
|
||||
<div class="backdrop-blur-xl rounded-2xl w-auto" style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(248, 250, 252, 0.1);">
|
||||
<!-- Navigation Links -->
|
||||
<nav class="p-2">
|
||||
<ul class="space-y-1 md:space-y-0 md:flex md:items-center md:gap-1">
|
||||
{navLinks.map(link => (
|
||||
<li>
|
||||
<a
|
||||
href={link.href}
|
||||
class="flex items-center gap-2 px-2.5 py-2 rounded-lg text-sm text-gray-300 hover:text-white transition-all whitespace-nowrap group"
|
||||
style="transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);"
|
||||
title={link.label}
|
||||
>
|
||||
<svg class="w-4 h-4 flex-shrink-0 group-hover:text-blue-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={link.icon}></path>
|
||||
</svg>
|
||||
<span class="font-medium">{link.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Bottom Actions -->
|
||||
<div class="p-2 border-t md:border-t-0 md:border-l border-gray-200/10">
|
||||
<div class="flex items-center gap-2 justify-center md:justify-start relative">
|
||||
<ThemeToggle />
|
||||
<LanguageSwitcher currentLang={lang} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Overlay -->
|
||||
<div id="menu-overlay" class="fixed inset-0 z-[99] hidden"></div>
|
||||
|
||||
<style>
|
||||
/* Menu open state */
|
||||
#sidebar.menu-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
scale: 1;
|
||||
}
|
||||
|
||||
/* FAB Button hover effect */
|
||||
#fab-toggle:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5), 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
#fab-toggle:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* FAB rotation when menu is open */
|
||||
#fab-toggle.menu-open #fab-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* Link hover effect */
|
||||
#sidebar a:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Desktop: Horizontal layout */
|
||||
@media (min-width: 768px) {
|
||||
#sidebar > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#sidebar nav {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 767px) {
|
||||
#sidebar {
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const fabToggle = document.getElementById('fab-toggle');
|
||||
const overlay = document.getElementById('menu-overlay');
|
||||
|
||||
// Toggle menu
|
||||
fabToggle?.addEventListener('click', () => {
|
||||
const isOpen = sidebar?.classList.contains('menu-open');
|
||||
|
||||
if (isOpen) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on overlay click
|
||||
overlay?.addEventListener('click', closeMenu);
|
||||
|
||||
// Close menu on navigation
|
||||
const navLinks = sidebar?.querySelectorAll('a');
|
||||
navLinks?.forEach(link => {
|
||||
link.addEventListener('click', closeMenu);
|
||||
});
|
||||
|
||||
function openMenu() {
|
||||
sidebar?.classList.add('menu-open');
|
||||
fabToggle?.classList.add('menu-open');
|
||||
overlay?.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
sidebar?.classList.remove('menu-open');
|
||||
fabToggle?.classList.remove('menu-open');
|
||||
overlay?.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Close on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && sidebar?.classList.contains('menu-open')) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
---
|
||||
import Card from '../ui/Card.astro';
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
import Button from '../ui/Button.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
plan: {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
priceText: string;
|
||||
monthlyEquivalent?: number;
|
||||
startMana?: number;
|
||||
regeneration?: number;
|
||||
storage?: number;
|
||||
mana?: number;
|
||||
icon: string;
|
||||
popular?: boolean;
|
||||
features?: string[];
|
||||
};
|
||||
type: 'subscription' | 'onetime';
|
||||
billingPeriod?: 'monthly' | 'yearly';
|
||||
}
|
||||
|
||||
const { plan, type, billingPeriod = 'monthly' } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="relative group h-full">
|
||||
<div class="relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-mana-blue/0 via-mana-blue/20 to-mana-blue/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue/50 transition-all duration-300">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-6">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-2xl mb-4 group-hover:scale-110 transition-transform">
|
||||
<span class="text-3xl">{plan.icon}</span>
|
||||
</div>
|
||||
<Heading as="h3" size="5" class="mb-3 text-center">{plan.name}</Heading>
|
||||
|
||||
<!-- Price -->
|
||||
<div class="mb-4">
|
||||
<div class="flex items-baseline justify-center gap-1">
|
||||
<span class="text-4xl font-bold bg-gradient-to-br from-mana-blue to-blue-600 bg-clip-text text-transparent">
|
||||
{plan.price === 0 ? 'Kostenlos' : plan.price.toString().replace('.', ',')}
|
||||
</span>
|
||||
{plan.price > 0 && <span class="text-2xl text-gray-600 dark:text-gray-400">€</span>}
|
||||
</div>
|
||||
{billingPeriod === 'yearly' && plan.monthlyEquivalent && (
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 mt-1 text-center block">
|
||||
{plan.monthlyEquivalent.toFixed(2).replace('.', ',')}€ pro Monat
|
||||
</Text>
|
||||
)}
|
||||
{type === 'subscription' && plan.price > 0 && (
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 text-center block">
|
||||
pro {billingPeriod === 'monthly' ? 'Monat' : 'Jahr'}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats for Subscription -->
|
||||
{type === 'subscription' && (
|
||||
<div class="space-y-3 mb-6">
|
||||
<div class="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 border border-blue-100 dark:border-gray-600">
|
||||
<div class="flex items-center justify-between">
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">Start-Mana</Text>
|
||||
<Text weight="semibold" class="text-mana-blue text-lg">{plan.startMana?.toLocaleString('de-DE')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 border border-green-100 dark:border-gray-600">
|
||||
<div class="flex items-center justify-between">
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">Regeneration</Text>
|
||||
<Text weight="semibold" class="text-green-600 dark:text-green-400 text-lg">{plan.regeneration} Mana/Tag</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 border border-purple-100 dark:border-gray-600">
|
||||
<div class="flex items-center justify-between">
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">Max. Speicher</Text>
|
||||
<Text weight="semibold" class="text-purple-600 dark:text-purple-400 text-lg">{plan.storage?.toLocaleString('de-DE')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Mana Amount for One-time -->
|
||||
{type === 'onetime' && (
|
||||
<div class="text-center mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-mana-blue/20 to-blue-500/20 rounded-2xl blur-xl"></div>
|
||||
<div class="relative bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-2xl p-8 border border-mana-blue/20">
|
||||
<div class="text-5xl font-bold bg-gradient-to-br from-mana-blue to-blue-600 bg-clip-text text-transparent">
|
||||
{plan.mana?.toLocaleString('de-DE')}
|
||||
</div>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 mt-2 block">Mana Credits</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Features -->
|
||||
{plan.features && (
|
||||
<ul class="space-y-3 mb-8">
|
||||
{plan.features.map(feature => (
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-5 h-5 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mt-0.5">
|
||||
<Icon name="mdi:check" class="w-3 h-3 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-700 dark:text-gray-300">{feature}</Text>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="mt-auto">
|
||||
<a
|
||||
href={plan.price === 0 ? "/register" : "/purchase"}
|
||||
class="inline-flex items-center justify-center w-full px-6 py-3 rounded-lg font-medium transition-all duration-300 border-2 border-gray-300 dark:border-gray-600 hover:border-mana-blue dark:hover:border-mana-blue hover:bg-mana-blue/5"
|
||||
>
|
||||
<Icon name="mdi:rocket-launch" class="w-5 h-5 mr-2" />
|
||||
{plan.price === 0 ? 'Jetzt starten' : 'Plan auswählen'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
---
|
||||
import Section from '../content/Section.astro';
|
||||
import Container from '../layout/Container.astro';
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
import Grid from '../layout/Grid.astro';
|
||||
import PricingCard from './PricingCard.astro';
|
||||
import { pricingPlans } from '../../data/pricing.js';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
showOneTime?: boolean;
|
||||
}
|
||||
|
||||
const { showOneTime = false } = Astro.props;
|
||||
---
|
||||
|
||||
<Section spacing="xlarge" class="relative z-10">
|
||||
<Container>
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:currency-eur" class="w-8 h-8 text-mana-blue" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Transparente Preise für jeden Bedarf
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-3xl mx-auto text-center">
|
||||
Wählen Sie zwischen monatlichen Abos mit täglicher Regeneration oder einmaligen Mana-Käufen.
|
||||
Keine versteckten Kosten, keine Mindestlaufzeiten.
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<!-- Billing Toggle -->
|
||||
<div class="flex justify-center mb-16">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-mana-blue/20 to-blue-500/20 rounded-2xl blur-xl"></div>
|
||||
<div class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-1.5 inline-flex shadow-lg border border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
id="monthly-tab"
|
||||
class="px-8 py-3 rounded-xl font-medium transition-all billing-tab active text-base"
|
||||
data-billing="monthly"
|
||||
>
|
||||
<Icon name="mdi:calendar-month" class="w-5 h-5 inline-block mr-2 -mt-0.5" />
|
||||
Monatlich
|
||||
</button>
|
||||
<button
|
||||
id="yearly-tab"
|
||||
class="px-8 py-3 rounded-xl font-medium transition-all billing-tab text-base"
|
||||
data-billing="yearly"
|
||||
>
|
||||
<Icon name="mdi:calendar-check" class="w-5 h-5 inline-block mr-2 -mt-0.5" />
|
||||
Jährlich
|
||||
<span class="ml-2 text-xs bg-gradient-to-r from-green-500 to-emerald-500 text-white px-2.5 py-1 rounded-full font-semibold shadow-sm">2 Monate gratis</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subscription Plans -->
|
||||
<div id="monthly-plans" class="pricing-content">
|
||||
<Grid cols={3} gap="large" class="max-w-5xl mx-auto mb-8">
|
||||
{pricingPlans.monthly.slice(0, 3).map(plan => (
|
||||
<PricingCard plan={plan} type="subscription" billingPeriod="monthly" />
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<!-- Additional Plans -->
|
||||
{pricingPlans.monthly.length > 3 && (
|
||||
<Grid cols={2} gap="large" class="max-w-3xl mx-auto mb-16">
|
||||
{pricingPlans.monthly.slice(3).map(plan => (
|
||||
<PricingCard plan={plan} type="subscription" billingPeriod="monthly" />
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="yearly-plans" class="pricing-content hidden">
|
||||
<Grid cols={3} gap="large" class="max-w-5xl mx-auto mb-8">
|
||||
{pricingPlans.yearly.slice(0, 3).map(plan => (
|
||||
<PricingCard plan={plan} type="subscription" billingPeriod="yearly" />
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<!-- Additional Plans -->
|
||||
{pricingPlans.yearly.length > 3 && (
|
||||
<Grid cols={2} gap="large" class="max-w-3xl mx-auto mb-16">
|
||||
{pricingPlans.yearly.slice(3).map(plan => (
|
||||
<PricingCard plan={plan} type="subscription" billingPeriod="yearly" />
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<!-- One-time Purchases -->
|
||||
{showOneTime && (
|
||||
<div class="mt-24 pt-20 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:flask" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
<Heading as="h3" size="3" class="mb-4 text-center">
|
||||
Einmalige Mana-Käufe
|
||||
</Heading>
|
||||
<Text size="lg" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Brauchen Sie sofort mehr Mana? Kaufen Sie Mana-Tränke ohne Abo –
|
||||
perfekt für Projekte oder als Geschenk für Ihr Team.
|
||||
</Text>
|
||||
</div>
|
||||
<Grid cols={4} gap="medium" class="max-w-5xl mx-auto">
|
||||
{pricingPlans.oneTime.map(plan => (
|
||||
<PricingCard plan={plan} type="onetime" />
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Trust Indicators -->
|
||||
<div class="mt-20 pt-20 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="text-center mb-12">
|
||||
<Heading as="h3" size="4" class="mb-4 text-center">
|
||||
Warum Mana das bessere Preismodell ist
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<Icon name="mdi:piggy-bank" class="w-8 h-8 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
<Text weight="semibold" class="mb-2">Bis zu 90% sparen</Text>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Gegenüber einzelnen Tool-Abos
|
||||
</Text>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<Icon name="mdi:account-group" class="w-8 h-8 text-blue-600 dark:text-blue-500" />
|
||||
</div>
|
||||
<Text weight="semibold" class="mb-2">Team-freundlich</Text>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Mana teilen im Team möglich
|
||||
</Text>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<Icon name="mdi:chart-line" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
<Text weight="semibold" class="mb-2">Volle Kostenkontrolle</Text>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Detaillierte Nutzungsstatistiken
|
||||
</Text>
|
||||
</div>
|
||||
<div class="text-center group">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-orange-500/10 to-yellow-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<Icon name="mdi:flash" class="w-8 h-8 text-orange-600 dark:text-orange-500" />
|
||||
</div>
|
||||
<Text weight="semibold" class="mb-2">Sofort alle Tools</Text>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Keine Wartezeiten oder Verhandlungen
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.billing-tab {
|
||||
@apply text-gray-600 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.billing-tab.active {
|
||||
@apply bg-gradient-to-r from-mana-blue to-blue-600 text-white shadow-lg;
|
||||
}
|
||||
|
||||
.billing-tab.active .icon {
|
||||
@apply text-white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const monthlyTab = document.getElementById('monthly-tab');
|
||||
const yearlyTab = document.getElementById('yearly-tab');
|
||||
const monthlyPlans = document.getElementById('monthly-plans');
|
||||
const yearlyPlans = document.getElementById('yearly-plans');
|
||||
|
||||
function switchBilling(billing: 'monthly' | 'yearly') {
|
||||
if (billing === 'monthly') {
|
||||
monthlyTab?.classList.add('active');
|
||||
yearlyTab?.classList.remove('active');
|
||||
monthlyPlans?.classList.remove('hidden');
|
||||
yearlyPlans?.classList.add('hidden');
|
||||
} else {
|
||||
yearlyTab?.classList.add('active');
|
||||
monthlyTab?.classList.remove('active');
|
||||
yearlyPlans?.classList.remove('hidden');
|
||||
monthlyPlans?.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
monthlyTab?.addEventListener('click', () => switchBilling('monthly'));
|
||||
yearlyTab?.addEventListener('click', () => switchBilling('yearly'));
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
---
|
||||
import Section from '../content/Section.astro';
|
||||
import Container from '../layout/Container.astro';
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<Section id="cost-comparison" background="subtle" class={className}>
|
||||
<Container grid>
|
||||
<div class="text-center mb-12" style="grid-column: 1 / -1;">
|
||||
<Heading as="h2" size="3" class="mb-4">
|
||||
90% sparen gegenüber klassischen Lizenzen
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
<div style="grid-column: 1 / -1;">
|
||||
<!-- Interactive Calculator -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg mb-8">
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Input Controls -->
|
||||
<div>
|
||||
<label class="block mb-4">
|
||||
<Text size="sm" class="font-medium text-gray-700 dark:text-gray-300 mb-2 block">
|
||||
Anzahl Nutzer in deinem Team
|
||||
</Text>
|
||||
<input
|
||||
type="range"
|
||||
id="teamSize"
|
||||
min="1"
|
||||
max="100"
|
||||
value="10"
|
||||
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
|
||||
>
|
||||
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
||||
<span>1</span>
|
||||
<span id="teamSizeDisplay" class="font-semibold text-mana-blue">10</span>
|
||||
<span>100</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<Text size="sm" class="font-medium text-gray-700 dark:text-gray-300 mb-2 block">
|
||||
Nutzungsintensität
|
||||
</Text>
|
||||
<select
|
||||
id="usageIntensity"
|
||||
class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-mana-blue focus:border-transparent"
|
||||
>
|
||||
<option value="light">Gelegentlich (5 Stunden/Monat)</option>
|
||||
<option value="medium" selected>Normal (25 Stunden/Monat)</option>
|
||||
<option value="heavy">Intensiv (50 Stunden/Monat)</option>
|
||||
<option value="power">Power User (100+ Stunden/Monat)</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Results Display -->
|
||||
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6">
|
||||
<div class="space-y-4">
|
||||
<!-- Classic Licenses -->
|
||||
<div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-1">
|
||||
Klassische Lizenzen
|
||||
</Text>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span id="classicCost" class="text-2xl font-bold text-gray-400 line-through">200€</span>
|
||||
<span class="text-sm text-gray-500">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manacore -->
|
||||
<div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-1">
|
||||
Mit Manacore
|
||||
</Text>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span id="manacoreCost" class="text-3xl font-bold text-mana-blue">30€</span>
|
||||
<span class="text-sm text-gray-500">/Monat</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Savings -->
|
||||
<div class="pt-4 border-t border-gray-200 dark:border-gray-600">
|
||||
<div class="flex items-center justify-between">
|
||||
<Text size="sm" class="font-medium text-gray-700 dark:text-gray-300">
|
||||
Deine Ersparnis
|
||||
</Text>
|
||||
<div class="text-right">
|
||||
<div id="savingsAmount" class="text-2xl font-bold text-green-600 dark:text-green-500">170€</div>
|
||||
<div id="savingsPercent" class="text-sm text-green-600 dark:text-green-500">85%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial -->
|
||||
<div class="bg-mana-blue/5 dark:bg-mana-blue/10 rounded-2xl p-6 border border-mana-blue/20">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0">
|
||||
<Icon name="mdi:format-quote-open" class="w-8 h-8 text-mana-blue/50" />
|
||||
</div>
|
||||
<div>
|
||||
<Text size="lg" class="text-gray-700 dark:text-gray-300 mb-3 italic">
|
||||
"Unser 50-köpfiges Team spart über 900€ monatlich. Die Credits teilen wir flexibel nach Bedarf auf."
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
— CTO eines Mittelständlers
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<script>
|
||||
// Cost calculation logic
|
||||
const teamSizeInput = document.getElementById('teamSize') as HTMLInputElement;
|
||||
const teamSizeDisplay = document.getElementById('teamSizeDisplay');
|
||||
const usageIntensitySelect = document.getElementById('usageIntensity') as HTMLSelectElement;
|
||||
const classicCostEl = document.getElementById('classicCost');
|
||||
const manacoreCostEl = document.getElementById('manacoreCost');
|
||||
const savingsAmountEl = document.getElementById('savingsAmount');
|
||||
const savingsPercentEl = document.getElementById('savingsPercent');
|
||||
|
||||
const classicPricePerUser = 19.99;
|
||||
|
||||
const manacorePlans = {
|
||||
light: { name: 'Mana Fluss', price: 5.99, users: 3 },
|
||||
medium: { name: 'Mana Strom', price: 14.99, users: 5 },
|
||||
heavy: { name: 'Mana See', price: 29.99, users: 10 },
|
||||
power: { name: 'Mana Meer', price: 49.99, users: 15 }
|
||||
};
|
||||
|
||||
function calculateCosts() {
|
||||
const teamSize = parseInt(teamSizeInput.value);
|
||||
const intensity = usageIntensitySelect.value as keyof typeof manacorePlans;
|
||||
|
||||
// Classic license cost
|
||||
const classicCost = teamSize * classicPricePerUser;
|
||||
|
||||
// Manacore cost calculation
|
||||
const plan = manacorePlans[intensity];
|
||||
const plansNeeded = Math.ceil(teamSize / plan.users);
|
||||
const manacoreCost = plansNeeded * plan.price;
|
||||
|
||||
// Savings
|
||||
const savings = classicCost - manacoreCost;
|
||||
const savingsPercent = Math.round((savings / classicCost) * 100);
|
||||
|
||||
// Update display
|
||||
if (teamSizeDisplay) teamSizeDisplay.textContent = teamSize.toString();
|
||||
if (classicCostEl) classicCostEl.textContent = `${classicCost.toFixed(0)}€`;
|
||||
if (manacoreCostEl) manacoreCostEl.textContent = `${manacoreCost.toFixed(0)}€`;
|
||||
if (savingsAmountEl) savingsAmountEl.textContent = `${savings.toFixed(0)}€`;
|
||||
if (savingsPercentEl) savingsPercentEl.textContent = `${savingsPercent}%`;
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
teamSizeInput?.addEventListener('input', calculateCosts);
|
||||
usageIntensitySelect?.addEventListener('change', calculateCosts);
|
||||
|
||||
// Initial calculation
|
||||
calculateCosts();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
---
|
||||
import Section from '../content/Section.astro';
|
||||
import Container from '../layout/Container.astro';
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<Section id="ecosystem" background="subtle" class={className}>
|
||||
<Container>
|
||||
<div class="text-center mb-12">
|
||||
<Heading as="h2" size="3" class="mb-4">
|
||||
Vernetzte Apps, die zusammen stark sind
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Memoro Card -->
|
||||
<div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-mana-blue dark:hover:border-mana-blue transition-all duration-300 hover:shadow-xl">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-mana-blue/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:microphone" class="w-6 h-6 text-mana-blue" />
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="m-0">Memoro</Heading>
|
||||
</div>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2">
|
||||
KI-Transkription & Analyse
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-500 dark:text-gray-500">
|
||||
Verwandle Sprache in durchsuchbares Wissen
|
||||
</Text>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<span class="inline-flex items-center gap-2 text-sm font-medium text-green-600 dark:text-green-500">
|
||||
<Icon name="mdi:check-circle" class="w-4 h-4" />
|
||||
Jetzt verfügbar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document AI Card -->
|
||||
<div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:file-document" class="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="m-0">Dokumenten-KI</Heading>
|
||||
</div>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2">
|
||||
Coming Soon
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-500 dark:text-gray-500">
|
||||
PDFs verstehen und vernetzen
|
||||
</Text>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
|
||||
<Icon name="mdi:clock-outline" class="w-4 h-4" />
|
||||
Q2 2025
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creative Suite Card -->
|
||||
<div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:palette" class="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="m-0">Kreativ-Suite</Heading>
|
||||
</div>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2">
|
||||
Coming Soon
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-500 dark:text-gray-500">
|
||||
Bilder und Videos mit KI bearbeiten
|
||||
</Text>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
|
||||
<Icon name="mdi:clock-outline" class="w-4 h-4" />
|
||||
Q3 2025
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Assistant Card -->
|
||||
<div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:code-braces" class="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="m-0">Code-Assistent</Heading>
|
||||
</div>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2">
|
||||
Coming Soon
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-500 dark:text-gray-500">
|
||||
Programmieren mit KI-Unterstützung
|
||||
</Text>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
|
||||
<Icon name="mdi:clock-outline" class="w-4 h-4" />
|
||||
Q4 2025
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Knowledge Graph Card -->
|
||||
<div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:graph" class="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="m-0">Wissens-Graph</Heading>
|
||||
</div>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2">
|
||||
Coming Soon
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-500 dark:text-gray-500">
|
||||
Alle deine Inhalte vernetzt
|
||||
</Text>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
|
||||
<Icon name="mdi:clock-outline" class="w-4 h-4" />
|
||||
2026
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Join Ecosystem Card -->
|
||||
<div class="group relative overflow-hidden bg-gradient-to-br from-mana-blue/5 to-blue-500/5 dark:from-mana-blue/10 dark:to-blue-500/10 rounded-2xl border-2 border-dashed border-mana-blue/30 hover:border-mana-blue/50 transition-all duration-300 cursor-pointer">
|
||||
<a href="/ecosystem/partner" class="block p-6 h-full">
|
||||
<div class="flex flex-col items-center justify-center h-full text-center">
|
||||
<div class="w-16 h-16 bg-mana-blue/10 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon name="mdi:plus" class="w-8 h-8 text-mana-blue" />
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="mb-2">
|
||||
Werde Teil des Ökosystems
|
||||
</Heading>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Entwickle mit uns die nächste App
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
---
|
||||
import Section from '../content/Section.astro';
|
||||
import Container from '../layout/Container.astro';
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { class: className } = Astro.props;
|
||||
|
||||
const costBreakdown = [
|
||||
{ percentage: 40, label: "KI & Server", color: "bg-blue-500", description: "Modernste KI-Modelle" },
|
||||
{ percentage: 25, label: "Entwicklung", color: "bg-purple-500", description: "Ständig neue Features" },
|
||||
{ percentage: 15, label: "App Stores", color: "bg-gray-500", description: "Für deine Sicherheit" },
|
||||
{ percentage: 10, label: "Klimaschutz", color: "bg-green-500", description: "CO2-neutral" },
|
||||
{ percentage: 10, label: "Free Users", color: "bg-yellow-500", description: "Bildung & NGOs" }
|
||||
];
|
||||
---
|
||||
|
||||
<Section id="mana-principle" background="default" class={className}>
|
||||
<Container grid>
|
||||
<div class="text-center mb-12" style="grid-column: 1 / -1;">
|
||||
<Heading as="h2" size="3" class="mb-4">
|
||||
Fair. Transparent. Nachhaltig.
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
Das revolutionäre Credit-System, das mit dir wächst
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<!-- Three Pillars - Each spans 4 columns on desktop, full width on mobile/tablet -->
|
||||
<!-- Regeneration -->
|
||||
<div class="group relative grid-pillar">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 h-full border border-gray-200 dark:border-gray-700 hover:border-mana-blue/30 transition-all duration-300 hover:shadow-lg">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="relative mb-6">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-mana-blue/20 to-blue-500/20 rounded-3xl blur-xl group-hover:from-mana-blue/30 group-hover:to-blue-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-24 h-24 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-3xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon name="mdi:refresh" class="w-12 h-12 text-mana-blue" />
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="mb-3">Regeneration</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Täglich neue Credits - sammle bis zu deinem Limit
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pay-per-Value -->
|
||||
<div class="group relative grid-pillar">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 h-full border border-gray-200 dark:border-gray-700 hover:border-mana-blue/30 transition-all duration-300 hover:shadow-lg">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="relative mb-6">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-3xl blur-xl group-hover:from-purple-500/30 group-hover:to-pink-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-24 h-24 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-3xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon name="mdi:cash-multiple" class="w-12 h-12 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="mb-3">Pay-per-Value</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Zahle nur was du nutzt - keine versteckten Kosten
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transparenz -->
|
||||
<div class="group relative grid-pillar">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 h-full border border-gray-200 dark:border-gray-700 hover:border-mana-blue/30 transition-all duration-300 hover:shadow-lg">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="relative mb-6">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-3xl blur-xl group-hover:from-green-500/30 group-hover:to-emerald-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-24 h-24 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-3xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon name="mdi:eye" class="w-12 h-12 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="h4" class="mb-3">Transparenz</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Jeder Cent aufgeschlüsselt - 10% für die Umwelt
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cost Breakdown Visualization -->
|
||||
<div class="mb-16" style="grid-column: 1 / -1;">
|
||||
<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl p-10 shadow-xl border border-gray-200 dark:border-gray-700">
|
||||
<Heading as="h3" size="h3" class="text-center mb-12">
|
||||
Wohin fließt dein Mana?
|
||||
</Heading>
|
||||
|
||||
<!-- Visual Breakdown Grid - Keeps own grid for 5 items -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-10 max-w-6xl mx-auto">
|
||||
{costBreakdown.map((item, index) => (
|
||||
<div class="group relative">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 h-full border border-gray-200 dark:border-gray-700 hover:border-mana-blue/30 transition-all duration-300 hover:shadow-lg text-center">
|
||||
<!-- Percentage Circle -->
|
||||
<div class="relative mb-4">
|
||||
<svg class="w-24 h-24 mx-auto transform -rotate-90">
|
||||
<circle
|
||||
cx="48"
|
||||
cy="48"
|
||||
r="36"
|
||||
stroke="currentColor"
|
||||
stroke-width="8"
|
||||
fill="none"
|
||||
class="text-gray-200 dark:text-gray-700"
|
||||
/>
|
||||
<circle
|
||||
cx="48"
|
||||
cy="48"
|
||||
r="36"
|
||||
stroke="currentColor"
|
||||
stroke-width="8"
|
||||
fill="none"
|
||||
stroke-dasharray={`${(item.percentage / 100) * 226} 226`}
|
||||
class={`${
|
||||
index === 0 ? 'text-blue-500' :
|
||||
index === 1 ? 'text-purple-500' :
|
||||
index === 2 ? 'text-gray-500' :
|
||||
index === 3 ? 'text-green-500' :
|
||||
'text-yellow-500'
|
||||
} transition-all duration-500`}
|
||||
/>
|
||||
</svg>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="text-2xl font-bold text-gray-800 dark:text-gray-200">{item.percentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Label -->
|
||||
<Heading as="h4" size="h6" class="mb-2">
|
||||
{item.label}
|
||||
</Heading>
|
||||
|
||||
<!-- Description -->
|
||||
<Text size="xs" class="text-gray-600 dark:text-gray-400">
|
||||
{item.description}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Summary Bar -->
|
||||
<div class="relative">
|
||||
<div class="h-8 bg-white dark:bg-gray-800 rounded-full overflow-hidden shadow-inner">
|
||||
<div class="flex h-full">
|
||||
{costBreakdown.map((item, index) => (
|
||||
<div
|
||||
class={`relative group transition-all duration-300 ${
|
||||
index === 0 ? 'bg-gradient-to-r from-blue-400 to-blue-500' :
|
||||
index === 1 ? 'bg-gradient-to-r from-purple-400 to-purple-500' :
|
||||
index === 2 ? 'bg-gradient-to-r from-gray-400 to-gray-500' :
|
||||
index === 3 ? 'bg-gradient-to-r from-green-400 to-green-500' :
|
||||
'bg-gradient-to-r from-yellow-400 to-yellow-500'
|
||||
} hover:brightness-110`}
|
||||
style={`width: ${item.percentage}%`}
|
||||
>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="text-white font-medium text-xs opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{item.percentage}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Message -->
|
||||
<div class="text-center mt-8">
|
||||
<Text size="lg" class="text-gray-600 dark:text-gray-400">
|
||||
Jeder Euro wird transparent und verantwortungsvoll eingesetzt
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import { getAlternateLinks } from '../../lib/i18n/utils';
|
||||
|
||||
const currentRoute = Astro.url.pathname;
|
||||
const alternateLinks = getAlternateLinks(currentRoute);
|
||||
---
|
||||
|
||||
{alternateLinks.map(link => (
|
||||
<link rel="alternate" hreflang={link.lang} href={`https://manacore.ai${link.href}`} />
|
||||
))}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
export interface Props {
|
||||
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
||||
size?: '1' | '2' | '3' | '4' | '5' | '6';
|
||||
weight?: 'normal' | 'medium' | 'semibold' | 'bold';
|
||||
align?: 'left' | 'center' | 'right';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
as = 'h2',
|
||||
size,
|
||||
weight = 'bold',
|
||||
align = 'left',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const Tag = as;
|
||||
const headingSize = size || as.replace('h', '');
|
||||
|
||||
const sizes = {
|
||||
'1': 'text-4xl md:text-5xl lg:text-6xl',
|
||||
'2': 'text-3xl md:text-4xl lg:text-5xl',
|
||||
'3': 'text-2xl md:text-3xl lg:text-4xl',
|
||||
'4': 'text-xl md:text-2xl lg:text-3xl',
|
||||
'5': 'text-lg md:text-xl lg:text-2xl',
|
||||
'6': 'text-base md:text-lg lg:text-xl'
|
||||
};
|
||||
|
||||
const weights = {
|
||||
normal: 'font-normal',
|
||||
medium: 'font-medium',
|
||||
semibold: 'font-semibold',
|
||||
bold: 'font-bold'
|
||||
};
|
||||
|
||||
const alignments = {
|
||||
left: 'text-left',
|
||||
center: 'text-center',
|
||||
right: 'text-right'
|
||||
};
|
||||
|
||||
const classes = `text-gray-900 dark:text-gray-100 ${sizes[headingSize]} ${weights[weight]} ${alignments[align]} ${className}`;
|
||||
---
|
||||
|
||||
<Tag class={classes} {...rest}>
|
||||
<slot />
|
||||
</Tag>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
export interface Props {
|
||||
as?: 'p' | 'span' | 'div';
|
||||
size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
|
||||
color?: 'default' | 'muted' | 'primary' | 'error';
|
||||
weight?: 'normal' | 'medium' | 'semibold' | 'bold';
|
||||
align?: 'left' | 'center' | 'right' | 'justify';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
as = 'p',
|
||||
size = 'base',
|
||||
color = 'default',
|
||||
weight = 'normal',
|
||||
align = 'left',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const Tag = as;
|
||||
|
||||
const sizes = {
|
||||
xs: 'text-xs',
|
||||
sm: 'text-sm',
|
||||
base: 'text-base',
|
||||
lg: 'text-lg',
|
||||
xl: 'text-xl'
|
||||
};
|
||||
|
||||
const colors = {
|
||||
default: 'text-gray-900 dark:text-gray-100',
|
||||
muted: 'text-gray-600 dark:text-gray-400',
|
||||
primary: 'text-blue-600 dark:text-blue-400',
|
||||
error: 'text-red-600 dark:text-red-400'
|
||||
};
|
||||
|
||||
const weights = {
|
||||
normal: 'font-normal',
|
||||
medium: 'font-medium',
|
||||
semibold: 'font-semibold',
|
||||
bold: 'font-bold'
|
||||
};
|
||||
|
||||
const alignments = {
|
||||
left: 'text-left',
|
||||
center: 'text-center',
|
||||
right: 'text-right',
|
||||
justify: 'text-justify'
|
||||
};
|
||||
|
||||
const classes = `${sizes[size]} ${colors[color]} ${weights[weight]} ${alignments[align]} ${className}`;
|
||||
---
|
||||
|
||||
<Tag class={classes} {...rest}>
|
||||
<slot />
|
||||
</Tag>
|
||||
82
apps/manacore/apps/landing/src/components/ui/AppCard.astro
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
import Heading from '../typography/Heading.astro';
|
||||
import Text from '../typography/Text.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
status: 'available' | 'beta' | 'coming-soon';
|
||||
href: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { title, description, icon, status, href, class: className = '' } = Astro.props;
|
||||
|
||||
const statusConfig = {
|
||||
'available': {
|
||||
text: 'Verfügbar',
|
||||
bgClass: 'bg-green-100 dark:bg-green-900/30',
|
||||
textClass: 'text-green-700 dark:text-green-400'
|
||||
},
|
||||
'beta': {
|
||||
text: 'Beta',
|
||||
bgClass: 'bg-yellow-100 dark:bg-yellow-900/30',
|
||||
textClass: 'text-yellow-700 dark:text-yellow-400'
|
||||
},
|
||||
'coming-soon': {
|
||||
text: 'Demnächst',
|
||||
bgClass: 'bg-gray-100 dark:bg-gray-800',
|
||||
textClass: 'text-gray-600 dark:text-gray-400'
|
||||
}
|
||||
};
|
||||
|
||||
const currentStatus = statusConfig[status] || statusConfig['coming-soon'];
|
||||
---
|
||||
|
||||
<a
|
||||
href={href}
|
||||
class={`group relative block h-full ${className}`}
|
||||
>
|
||||
<div class="relative h-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:bg-gradient-to-br hover:from-mana-blue/5 hover:to-blue-500/5 dark:hover:from-mana-blue/10 dark:hover:to-blue-500/10 hover:border-mana-blue/30 hover:shadow-xl hover:shadow-mana-blue/10 hover:-translate-y-1">
|
||||
<!-- Flex Container: Icon left, Content right -->
|
||||
<div class="flex gap-4 items-start">
|
||||
<!-- Icon Left -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform group-hover:from-mana-blue/10 group-hover:to-blue-500/10 dark:group-hover:from-mana-blue/20 dark:group-hover:to-blue-500/20">
|
||||
{icon.startsWith('/') ? (
|
||||
<img src={icon} alt={title} class="w-12 h-12 object-contain" />
|
||||
) : (
|
||||
<span class="text-4xl select-none">{icon}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Right -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Title and Status -->
|
||||
<div class="flex items-start justify-between gap-2 mb-2">
|
||||
<Heading as="h3" size="h6" class="group-hover:text-mana-blue transition-colors">
|
||||
{title}
|
||||
</Heading>
|
||||
<div class={`${currentStatus.bgClass} ${currentStatus.textClass} px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap flex-shrink-0`}>
|
||||
{currentStatus.text}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<Text size="sm" color="muted" class="line-clamp-2 mb-3">
|
||||
{description}
|
||||
</Text>
|
||||
|
||||
<!-- CTA Link -->
|
||||
<span class="inline-flex items-center gap-1 text-xs font-medium text-mana-blue opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
Mehr erfahren
|
||||
<svg class="w-3 h-3 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
34
apps/manacore/apps/landing/src/components/ui/Badge.astro
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
export interface Props {
|
||||
variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { variant = 'default', size = 'medium', class: className = '' } = Astro.props;
|
||||
|
||||
const variants = {
|
||||
default: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
|
||||
success: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400',
|
||||
warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400',
|
||||
danger: 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400',
|
||||
info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400'
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
small: 'px-2 py-0.5 text-xs',
|
||||
medium: 'px-2.5 py-1 text-sm',
|
||||
large: 'px-3 py-1.5 text-base'
|
||||
};
|
||||
|
||||
const classes = `
|
||||
inline-flex items-center font-medium rounded-full
|
||||
${variants[variant]}
|
||||
${sizes[size]}
|
||||
${className}
|
||||
`.trim();
|
||||
---
|
||||
|
||||
<span class={classes}>
|
||||
<slot />
|
||||
</span>
|
||||
47
apps/manacore/apps/landing/src/components/ui/Button.astro
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
export interface Props {
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
href?: string;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
class?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
variant = 'primary',
|
||||
size = 'medium',
|
||||
href,
|
||||
type = 'button',
|
||||
class: className = '',
|
||||
disabled = false,
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const baseStyles = "inline-flex items-center justify-center font-semibold rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed";
|
||||
|
||||
const variants = {
|
||||
primary: "text-white bg-mana-blue hover:bg-blue-600 dark:bg-mana-blue dark:hover:bg-blue-600 focus:ring-mana-blue",
|
||||
secondary: "text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500",
|
||||
ghost: "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-gray-500",
|
||||
outline: "text-mana-blue dark:text-mana-blue border-2 border-mana-blue dark:border-mana-blue hover:bg-blue-50 dark:hover:bg-blue-950 focus:ring-mana-blue"
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
small: "px-3 py-1.5 text-sm",
|
||||
medium: "px-5 py-2.5 text-base",
|
||||
large: "px-7 py-3.5 text-lg"
|
||||
};
|
||||
|
||||
const classes = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;
|
||||
---
|
||||
|
||||
{href ? (
|
||||
<a href={href} class={classes} {...rest}>
|
||||
<slot />
|
||||
</a>
|
||||
) : (
|
||||
<button type={type} class={classes} disabled={disabled} {...rest}>
|
||||
<slot />
|
||||
</button>
|
||||
)}
|
||||
35
apps/manacore/apps/landing/src/components/ui/Card.astro
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
export interface Props {
|
||||
variant?: 'default' | 'bordered' | 'elevated';
|
||||
padding?: 'none' | 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
variant = 'default',
|
||||
padding = 'medium',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const baseStyles = "bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm rounded-lg transition-all duration-200";
|
||||
|
||||
const variants = {
|
||||
default: "",
|
||||
bordered: "border border-gray-200 dark:border-gray-700",
|
||||
elevated: "shadow-lg hover:shadow-xl dark:shadow-gray-950/50"
|
||||
};
|
||||
|
||||
const paddings = {
|
||||
none: "",
|
||||
small: "p-4",
|
||||
medium: "p-6",
|
||||
large: "p-8"
|
||||
};
|
||||
|
||||
const classes = `${baseStyles} ${variants[variant]} ${paddings[padding]} ${className}`;
|
||||
---
|
||||
|
||||
<div class={classes} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
62
apps/manacore/apps/landing/src/components/ui/Image.astro
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
export interface Props {
|
||||
src?: string;
|
||||
alt: string;
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
loading?: 'lazy' | 'eager';
|
||||
class?: string;
|
||||
objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
||||
placeholder?: 'team' | 'dashboard' | 'chart' | 'abstract' | 'office' | 'tech' | 'nature';
|
||||
rounded?: boolean;
|
||||
}
|
||||
|
||||
// Placeholder image services
|
||||
const placeholderServices = {
|
||||
team: (w: number, h: number) => `https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=${w}&h=${h}&fit=crop&auto=format`,
|
||||
dashboard: (w: number, h: number) => `https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=${w}&h=${h}&fit=crop&auto=format`,
|
||||
chart: (w: number, h: number) => `https://images.unsplash.com/photo-1666875753105-c63a6f3bdc86?w=${w}&h=${h}&fit=crop&auto=format`,
|
||||
abstract: (w: number, h: number) => `https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=${w}&h=${h}&fit=crop&auto=format`,
|
||||
office: (w: number, h: number) => `https://images.unsplash.com/photo-1497366216548-37526070297c?w=${w}&h=${h}&fit=crop&auto=format`,
|
||||
tech: (w: number, h: number) => `https://images.unsplash.com/photo-1518770660439-4636190af475?w=${w}&h=${h}&fit=crop&auto=format`,
|
||||
nature: (w: number, h: number) => `https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=${w}&h=${h}&fit=crop&auto=format`,
|
||||
};
|
||||
|
||||
const {
|
||||
src,
|
||||
alt,
|
||||
width = 600,
|
||||
height = 400,
|
||||
loading = 'lazy',
|
||||
class: className = '',
|
||||
objectFit = 'cover',
|
||||
placeholder,
|
||||
rounded = false,
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
// Use placeholder if no src provided
|
||||
const imageSrc = src || (placeholder && placeholderServices[placeholder] ? placeholderServices[placeholder](Number(width), Number(height)) : `https://via.placeholder.com/${width}x${height}/3b82f6/ffffff?text=${encodeURIComponent(alt)}`);
|
||||
|
||||
const objectFitClasses = {
|
||||
contain: 'object-contain',
|
||||
cover: 'object-cover',
|
||||
fill: 'object-fill',
|
||||
none: 'object-none',
|
||||
'scale-down': 'object-scale-down'
|
||||
};
|
||||
|
||||
const roundedClass = rounded ? 'rounded-lg' : '';
|
||||
const classes = `${objectFitClasses[objectFit]} ${roundedClass} ${className}`;
|
||||
---
|
||||
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={alt}
|
||||
width={width}
|
||||
height={height}
|
||||
loading={loading}
|
||||
class={classes}
|
||||
decoding="async"
|
||||
{...rest}
|
||||
/>
|
||||
70
apps/manacore/apps/landing/src/components/ui/Input.astro
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
export interface Props {
|
||||
type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
|
||||
name?: string;
|
||||
id?: string;
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
class?: string;
|
||||
label?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
type = 'text',
|
||||
name,
|
||||
id,
|
||||
placeholder,
|
||||
value,
|
||||
required = false,
|
||||
disabled = false,
|
||||
readonly = false,
|
||||
class: className = '',
|
||||
label,
|
||||
error,
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const inputId = id || name;
|
||||
const hasError = !!error;
|
||||
|
||||
const baseStyles = "w-full px-4 py-2 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-800 border rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200";
|
||||
const normalStyles = "border-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400";
|
||||
const errorStyles = "border-red-500 dark:border-red-400 focus:border-red-500 dark:focus:border-red-400 focus:ring-red-500 dark:focus:ring-red-400";
|
||||
const disabledStyles = "bg-gray-50 dark:bg-gray-700 cursor-not-allowed opacity-60";
|
||||
|
||||
const inputClasses = `${baseStyles} ${hasError ? errorStyles : normalStyles} ${disabled ? disabledStyles : ''} ${className}`;
|
||||
---
|
||||
|
||||
<div class="w-full">
|
||||
{label && (
|
||||
<label for={inputId} class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{label}
|
||||
{required && <span class="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<input
|
||||
type={type}
|
||||
name={name}
|
||||
id={inputId}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
required={required}
|
||||
disabled={disabled}
|
||||
readonly={readonly}
|
||||
class={inputClasses}
|
||||
aria-invalid={hasError}
|
||||
aria-describedby={hasError ? `${inputId}-error` : undefined}
|
||||
{...rest}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p id={`${inputId}-error`} class="mt-1 text-sm text-red-600 dark:text-red-400">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { languages, type Language } from '../../lib/i18n/config';
|
||||
import { getRouteFromUrl, getLocalizedRoute } from '../../lib/i18n/utils';
|
||||
|
||||
export interface Props {
|
||||
currentLang: Language;
|
||||
}
|
||||
|
||||
const { currentLang } = Astro.props;
|
||||
const currentRoute = getRouteFromUrl(Astro.url);
|
||||
|
||||
// Get language labels and flag emojis
|
||||
const languageLabels = {
|
||||
de: 'DE',
|
||||
en: 'EN',
|
||||
it: 'IT',
|
||||
fr: 'FR',
|
||||
es: 'ES'
|
||||
};
|
||||
|
||||
const flagEmojis = {
|
||||
de: '🇩🇪',
|
||||
en: '🇬🇧',
|
||||
it: '🇮🇹',
|
||||
fr: '🇫🇷',
|
||||
es: '🇪🇸'
|
||||
};
|
||||
|
||||
// Generate unique ID for this instance
|
||||
const uniqueId = `lang-${Math.random().toString(36).substr(2, 9)}`;
|
||||
---
|
||||
|
||||
<div class="relative language-switcher">
|
||||
<button
|
||||
id={`language-toggle-${uniqueId}`}
|
||||
class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-300 hover:text-white transition-all"
|
||||
aria-label="Change language"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="text-base" aria-hidden="true">{flagEmojis[currentLang]}</span>
|
||||
<span class="text-sm font-medium">{languageLabels[currentLang]}</span>
|
||||
<Icon name="mdi:chevron-down" class="w-4 h-4 transition-transform language-chevron" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
id={`language-menu-${uniqueId}`}
|
||||
class="language-menu absolute right-0 bottom-full mb-2 w-48 rounded-lg shadow-lg hidden"
|
||||
>
|
||||
<div class="py-1">
|
||||
{Object.entries(languages).map(([lang, label]) => {
|
||||
const isActive = lang === currentLang;
|
||||
const href = getLocalizedRoute(currentRoute, lang as Language);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
class={`flex items-center gap-3 px-4 py-2 text-sm transition-all ${
|
||||
isActive
|
||||
? 'text-white bg-blue-500/20'
|
||||
: 'text-gray-300 hover:text-white hover:bg-blue-500/10'
|
||||
}`}
|
||||
>
|
||||
<span class="text-base" aria-hidden="true">{flagEmojis[lang as Language]}</span>
|
||||
<span class="flex-1">{label}</span>
|
||||
{isActive && (
|
||||
<Icon name="mdi:check" class="w-4 h-4 text-blue-500" />
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.language-menu {
|
||||
z-index: 9999;
|
||||
transition: all 0.2s ease;
|
||||
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(248, 250, 252, 0.1);
|
||||
}
|
||||
|
||||
.language-switcher button:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.language-switcher:hover .language-chevron,
|
||||
.language-switcher[data-open="true"] .language-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.language-switcher[data-open="true"] .language-menu {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initLanguageSwitchers() {
|
||||
const switchers = document.querySelectorAll('.language-switcher');
|
||||
|
||||
switchers.forEach((switcher) => {
|
||||
const toggle = switcher.querySelector('button') as HTMLElement;
|
||||
const menu = switcher.querySelector('.language-menu') as HTMLElement;
|
||||
|
||||
if (!toggle || !menu) {
|
||||
console.log('Language switcher missing elements');
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle menu
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const isOpen = switcher.getAttribute('data-open') === 'true';
|
||||
|
||||
// Close all other switchers
|
||||
document.querySelectorAll('.language-switcher').forEach((otherSwitcher) => {
|
||||
if (otherSwitcher !== switcher) {
|
||||
otherSwitcher.setAttribute('data-open', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current switcher
|
||||
switcher.setAttribute('data-open', isOpen ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
||||
});
|
||||
|
||||
// Prevent menu from closing when clicking inside
|
||||
menu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
// Close all menus when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.language-switcher')) {
|
||||
document.querySelectorAll('.language-switcher').forEach((switcher) => {
|
||||
switcher.setAttribute('data-open', 'false');
|
||||
const toggle = switcher.querySelector('button');
|
||||
toggle?.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Init on page load
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initLanguageSwitchers);
|
||||
} else {
|
||||
initLanguageSwitchers();
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
// This component needs client-side JavaScript for theme switching
|
||||
---
|
||||
|
||||
<button
|
||||
id="theme-toggle"
|
||||
type="button"
|
||||
class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<!-- Light Mode Icon -->
|
||||
<svg
|
||||
id="theme-toggle-light-icon"
|
||||
class="w-5 h-5 hidden"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<!-- Dark Mode Icon -->
|
||||
<svg
|
||||
id="theme-toggle-dark-icon"
|
||||
class="w-5 h-5 hidden"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
// Theme toggle functionality
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const lightIcon = document.getElementById('theme-toggle-light-icon');
|
||||
const darkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||
|
||||
// Check for saved theme preference or default to light
|
||||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||||
|
||||
// Apply initial theme
|
||||
if (currentTheme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
lightIcon?.classList.remove('hidden');
|
||||
darkIcon?.classList.add('hidden');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
darkIcon?.classList.remove('hidden');
|
||||
lightIcon?.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Toggle theme on button click
|
||||
themeToggle?.addEventListener('click', () => {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
|
||||
if (isDark) {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
darkIcon?.classList.remove('hidden');
|
||||
lightIcon?.classList.add('hidden');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
lightIcon?.classList.remove('hidden');
|
||||
darkIcon?.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
105
apps/manacore/apps/landing/src/content/apps/maerchenzauber-de.md
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
---
|
||||
title: Märchenzauber
|
||||
description: Die KI-gestützte App für personalisierte Bilderbücher. Eltern und Kindergärten können in Minuten einzigartige Geschichten mit individuellen Illustrationen erstellen.
|
||||
category: creative
|
||||
icon: /logos/Märchenzauber-logo.png
|
||||
manaUsage:
|
||||
min: 100
|
||||
average: 300
|
||||
max: 500
|
||||
unit: per-request
|
||||
features:
|
||||
- Personalisierte Geschichten mit Namen und Eigenschaften
|
||||
- KI-generierte Illustrationen im gewählten Stil
|
||||
- Über 50 Märchenvorlagen und Genres
|
||||
- Altersgerechte Inhalte (0-10 Jahre)
|
||||
- Mehrsprachige Geschichten (15+ Sprachen)
|
||||
- Druckfertige PDF-Ausgabe
|
||||
- Interaktive Vorlesefunktion
|
||||
- Pädagogische Lernelemente
|
||||
status: beta
|
||||
releaseDate: Geplant Q3 2025
|
||||
order: 2
|
||||
website: https://maerchenzauber.ai
|
||||
---
|
||||
|
||||
## Was ist Märchenzauber?
|
||||
|
||||
Märchenzauber revolutioniert das Geschichtenerzählen für Kinder. Mit unserer KI-gestützten App erstellen Eltern, Großeltern und Erzieher in wenigen Minuten personalisierte Bilderbücher, in denen ihre Kinder die Hauptrolle spielen. Jede Geschichte ist einzigartig und perfekt auf das Kind zugeschnitten.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 📚 Personalisierte Geschichten
|
||||
Geben Sie einfach den Namen, das Aussehen und die Interessen Ihres Kindes ein. Unsere KI webt diese Details nahtlos in spannende Abenteuer ein:
|
||||
- Name und Eigenschaften des Kindes in der Geschichte
|
||||
- Freunde und Familienmitglieder als Charaktere
|
||||
- Lieblingstiere und Hobbys integriert
|
||||
- Individuelle Lernziele berücksichtigt
|
||||
|
||||
### 🎨 KI-generierte Illustrationen
|
||||
Jede Seite wird mit wunderschönen, kindgerechten Illustrationen zum Leben erweckt:
|
||||
- Verschiedene Kunststile wählbar (Aquarell, Comic, klassisch)
|
||||
- Konsistente Charakterdarstellung durch die ganze Geschichte
|
||||
- Sichere, altersgerechte Bilder
|
||||
- Hochauflösend für Druck und Digital
|
||||
|
||||
### 🌟 Vielfältige Genres
|
||||
Von klassischen Märchen bis zu modernen Abenteuern:
|
||||
- Märchen und Fantasie
|
||||
- Tiergeschichten
|
||||
- Weltraumabenteuer
|
||||
- Alltagsgeschichten
|
||||
- Lerngeschichten (Zahlen, Buchstaben, Werte)
|
||||
- Gute-Nacht-Geschichten
|
||||
|
||||
## Mana-Verbrauch
|
||||
|
||||
Der Mana-Verbrauch richtet sich nach Umfang und Komplexität:
|
||||
|
||||
- **Kurze Geschichte** (5-10 Seiten): 100 Mana
|
||||
- **Standard-Bilderbuch** (15-20 Seiten): 300 Mana
|
||||
- **Ausführliches Buch** (25-30 Seiten): 500 Mana
|
||||
- **Zusätzliche Sprache**: +50 Mana
|
||||
- **Premium-Illustrationen**: +100 Mana
|
||||
|
||||
## Anwendungsfälle
|
||||
|
||||
### Für Familien
|
||||
- Einzigartige Gute-Nacht-Geschichten
|
||||
- Personalisierte Geburtstagsgeschenke
|
||||
- Geschwister gemeinsam in Abenteuern
|
||||
- Familientraditionen in Geschichten verewigen
|
||||
|
||||
### Für Kindergärten
|
||||
- Gruppengeschichten mit allen Kindern
|
||||
- Thematische Geschichten zu Projekten
|
||||
- Sprachförderung durch personalisierte Inhalte
|
||||
- Inklusion durch diverse Charaktere
|
||||
|
||||
### Für Therapeuten
|
||||
- Geschichten zur Angstbewältigung
|
||||
- Soziale Situationen üben
|
||||
- Selbstvertrauen stärken
|
||||
- Veränderungen verarbeiten
|
||||
|
||||
## Sicherheit & Datenschutz
|
||||
|
||||
Märchenzauber nimmt den Schutz von Kindern ernst:
|
||||
- Alle Inhalte werden auf Alterseignung geprüft
|
||||
- Keine Weitergabe persönlicher Daten
|
||||
- DSGVO-konforme Datenspeicherung
|
||||
- Sichere, werbefreie Umgebung
|
||||
|
||||
## Integration mit Mana
|
||||
|
||||
Mit Mana-Credits zahlen Sie nur für die Bücher, die Sie tatsächlich erstellen. Keine Abos, keine versteckten Kosten. Erstellen Sie ein Buch pro Monat oder zehn – Sie haben die volle Kontrolle über Ihre Ausgaben.
|
||||
|
||||
## Verfügbarkeit
|
||||
|
||||
Märchenzauber ist verfügbar als:
|
||||
- Web-App (alle Browser)
|
||||
- iOS App (iPhone & iPad)
|
||||
- Android App
|
||||
- Desktop-Version für Kindergärten
|
||||
|
||||
Alle erstellten Bücher können als PDF heruntergeladen, gedruckt oder digital geteilt werden.
|
||||
183
apps/manacore/apps/landing/src/content/apps/manadeck-de.md
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
---
|
||||
title: Manadeck
|
||||
description: Die intelligente Lernkarten-App mit KI-Unterstützung. Erstellen Sie automatisch Karteikarten aus Ihren Unterlagen und lernen Sie effizient mit adaptiven Wiederholungen.
|
||||
category: productivity
|
||||
icon: ⚪
|
||||
manaUsage:
|
||||
min: 5
|
||||
average: 20
|
||||
max: 100
|
||||
unit: per-request
|
||||
features:
|
||||
- KI-generierte Lernkarten aus PDFs und Texten
|
||||
- Intelligente Spaced-Repetition-Algorithmen
|
||||
- Automatische Erklärungen und Beispiele
|
||||
- Multi-Format Karten (Text, Bild, Audio)
|
||||
- Lernfortschritt-Tracking und Analytics
|
||||
- Kollaborative Lerndecks für Teams
|
||||
- Offline-Modus für unterwegs
|
||||
- Import/Export von Anki und Quizlet
|
||||
status: coming-soon
|
||||
releaseDate: Geplant Q2 2025
|
||||
order: 3
|
||||
website: https://manadeck.ai
|
||||
---
|
||||
|
||||
## Was ist Manadeck?
|
||||
|
||||
Manadeck revolutioniert das Lernen mit Karteikarten durch KI-Unterstützung. Laden Sie einfach Ihre Lernmaterialien hoch - PDFs, Notizen, Präsentationen - und unsere KI erstellt automatisch effektive Lernkarten. Mit intelligenten Wiederholungsalgorithmen und personalisierten Lernpfaden meistern Sie jedes Thema schneller und nachhaltiger.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 🎯 KI-generierte Lernkarten
|
||||
Manadeck verwandelt Ihre Materialien intelligent in Lernkarten:
|
||||
- Automatische Extraktion von Schlüsselkonzepten
|
||||
- Generierung von Frage-Antwort-Paaren
|
||||
- Erstellung von Multiple-Choice-Fragen
|
||||
- Lückentexte und Definitionen
|
||||
- Bildbasierte Karten für visuelle Lerner
|
||||
|
||||
### 🧠 Intelligentes Lernsystem
|
||||
Adaptives Lernen basierend auf Ihrer Performance:
|
||||
- Spaced Repetition für optimale Gedächtnisleistung
|
||||
- Schwierigkeitsanpassung in Echtzeit
|
||||
- Personalisierte Wiederholungsintervalle
|
||||
- Fokus auf Problemkarten
|
||||
- Lernstatistiken und Fortschrittstracking
|
||||
|
||||
### 📚 Vielseitige Kartentypen
|
||||
Verschiedene Formate für jeden Lernstil:
|
||||
- Klassische Vorder-/Rückseite-Karten
|
||||
- Multiple-Choice mit Erklärungen
|
||||
- Lückentexte
|
||||
- Bild-zu-Text Zuordnungen
|
||||
- Audio-Karten für Sprachen
|
||||
- Mathematische Formeln mit LaTeX
|
||||
- Code-Snippets mit Syntax-Highlighting
|
||||
|
||||
## Mana-Verbrauch
|
||||
|
||||
Der Verbrauch richtet sich nach der Komplexität:
|
||||
|
||||
- **Einfache Textkarten**: 5 Mana pro 10 Karten
|
||||
- **KI-generierte Karten aus PDF**: 20 Mana pro Dokument
|
||||
- **Erweiterte Karten mit Erklärungen**: 50 Mana pro 50 Karten
|
||||
- **Komplettes Lerndeck mit Multimedia**: 100 Mana
|
||||
|
||||
## Anwendungsfälle
|
||||
|
||||
### Für Studierende
|
||||
- Prüfungsvorbereitung optimieren
|
||||
- Vorlesungsnotizen in Lernkarten verwandeln
|
||||
- Gemeinsame Lerndecks mit Kommilitonen
|
||||
- Wissenschaftliche Paper zusammenfassen
|
||||
- Vokabeln und Fachbegriffe lernen
|
||||
|
||||
### Für Schüler
|
||||
- Hausaufgaben effektiver bewältigen
|
||||
- Für Klassenarbeiten lernen
|
||||
- Sprachen spielerisch lernen
|
||||
- MINT-Fächer verstehen
|
||||
- Abitur-Vorbereitung
|
||||
|
||||
### Für Berufstätige
|
||||
- Zertifizierungen vorbereiten
|
||||
- Fachkenntnisse auffrischen
|
||||
- Neue Skills erlernen
|
||||
- Compliance-Training
|
||||
- Produktschulungen
|
||||
|
||||
### Für Lehrkräfte
|
||||
- Unterrichtsmaterial aufbereiten
|
||||
- Lerndecks für Klassen erstellen
|
||||
- Lernfortschritt verfolgen
|
||||
- Differenzierte Aufgaben
|
||||
- Hausaufgaben-Sets generieren
|
||||
|
||||
## KI-Features im Detail
|
||||
|
||||
### 📝 Automatische Kartenerstellung
|
||||
- Upload von PDF, Word, PowerPoint
|
||||
- Texterkennung aus Bildern (OCR)
|
||||
- Strukturierte Extraktion von Informationen
|
||||
- Automatische Kategorisierung
|
||||
- Qualitätskontrolle der generierten Karten
|
||||
|
||||
### 💡 Intelligente Erklärungen
|
||||
- KI-generierte Zusatzerklärungen
|
||||
- Beispiele und Analogien
|
||||
- Verwandte Konzepte verlinken
|
||||
- Schwierige Begriffe vereinfachen
|
||||
- Eselsbrücken und Merkhilfen
|
||||
|
||||
### 📊 Lernanalyse
|
||||
- Detaillierte Lernstatistiken
|
||||
- Stärken und Schwächen identifizieren
|
||||
- Optimale Lernzeiten ermitteln
|
||||
- Fortschrittsprognosen
|
||||
- Motivations-Tracking
|
||||
|
||||
## Kollaboration & Sharing
|
||||
|
||||
### 👥 Team-Features
|
||||
- Gemeinsame Lerndecks erstellen
|
||||
- Karten kommentieren und verbessern
|
||||
- Lerngruppen bilden
|
||||
- Fortschritt vergleichen
|
||||
- Peer-Learning fördern
|
||||
|
||||
### 🌐 Community-Bibliothek
|
||||
- Öffentliche Decks durchsuchen
|
||||
- Bewertungen und Reviews
|
||||
- Von Experten erstellte Decks
|
||||
- Fachspezifische Sammlungen
|
||||
- Qualitätsgeprüfte Inhalte
|
||||
|
||||
## Integration & Kompatibilität
|
||||
|
||||
Manadeck arbeitet nahtlos mit:
|
||||
- Anki (Import/Export)
|
||||
- Quizlet (Import/Export)
|
||||
- Google Drive & Dropbox
|
||||
- Microsoft OneNote
|
||||
- Notion & Obsidian
|
||||
- Canvas & Moodle (LMS)
|
||||
|
||||
## Gamification & Motivation
|
||||
|
||||
### 🏆 Erfolge & Belohnungen
|
||||
- Lernsträhnen aufbauen
|
||||
- Abzeichen sammeln
|
||||
- Level-System
|
||||
- Tägliche Herausforderungen
|
||||
- Ranglisten (optional)
|
||||
|
||||
### 🎯 Lernziele
|
||||
- Persönliche Ziele setzen
|
||||
- Meilensteine definieren
|
||||
- Erinnerungen und Motivation
|
||||
- Fortschrittsvisualisierung
|
||||
- Erfolgsfeedback
|
||||
|
||||
## Datenschutz & Sicherheit
|
||||
|
||||
- Ende-zu-Ende-Verschlüsselung
|
||||
- DSGVO-konforme Datenverarbeitung
|
||||
- Keine Weitergabe von Lerndaten
|
||||
- Lokale Datenspeicherung möglich
|
||||
- Anonymisierte Nutzungsstatistiken
|
||||
|
||||
## Mit Mana flexibel lernen
|
||||
|
||||
Nutzen Sie Manadeck genau nach Ihrem Bedarf. Erstellen Sie einmalig Karten für eine Prüfung oder nutzen Sie es täglich für kontinuierliches Lernen. Mit Mana-Credits zahlen Sie nur für die tatsächliche Nutzung - keine Abos, keine ungenutzten Features.
|
||||
|
||||
## Verfügbarkeit
|
||||
|
||||
Manadeck wird verfügbar sein als:
|
||||
- Progressive Web App (alle Browser)
|
||||
- iOS App (iPhone & iPad)
|
||||
- Android App
|
||||
- Desktop-Apps (Windows, Mac, Linux)
|
||||
- Browser-Extensions
|
||||
|
||||
Alle Plattformen synchronisieren sich automatisch, sodass Sie überall lernen können - online und offline!
|
||||
109
apps/manacore/apps/landing/src/content/apps/memoro-de.md
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
title: Memoro
|
||||
description: Die intelligente Aufnahme-App, die Ihre Gespräche automatisch transkribiert, zusammenfasst und analysiert. Perfekt für Meetings, Interviews und Notizen.
|
||||
category: productivity
|
||||
icon: /logos/Memoro-Logo-V1.png
|
||||
manaUsage:
|
||||
min: 2
|
||||
average: 2
|
||||
max: 2
|
||||
unit: per-minute
|
||||
features:
|
||||
- Automatische Transkription in Echtzeit
|
||||
- KI-gestützte Zusammenfassungen
|
||||
- Mehrsprachige Unterstützung (20+ Sprachen)
|
||||
- Automatische Sprechererkennung
|
||||
- Export in verschiedene Formate (PDF, Word, TXT)
|
||||
- Durchsuchbare Transkripte
|
||||
- Team-Collaboration Features
|
||||
- Mobile und Desktop Apps
|
||||
status: available
|
||||
releaseDate: 22.04.2024
|
||||
order: 1
|
||||
website: https://memoro.ai
|
||||
---
|
||||
|
||||
## Was ist Memoro?
|
||||
|
||||
Memoro ist Ihre persönliche KI-Assistentin für Audio-Aufnahmen. Egal ob Sie ein wichtiges Meeting haben, ein Interview führen oder einfach Ihre Gedanken festhalten möchten – Memoro verwandelt gesprochene Worte in strukturierte, durchsuchbare Dokumente.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 🎯 Intelligente Transkription
|
||||
Memoro nutzt modernste KI-Technologie, um Ihre Aufnahmen mit über 95% Genauigkeit zu transkribieren. Die App erkennt automatisch verschiedene Sprecher und formatiert das Transkript übersichtlich.
|
||||
|
||||
### 📝 Automatische Zusammenfassung
|
||||
Nach jeder Aufnahme erstellt Memoro eine prägnante Zusammenfassung der wichtigsten Punkte. Sie erhalten:
|
||||
- Kernaussagen und Entscheidungen
|
||||
- Action Items und To-Dos
|
||||
- Wichtige Daten und Termine
|
||||
- Themenübersicht
|
||||
|
||||
### 🌍 Mehrsprachig
|
||||
Memoro unterstützt über 20 Sprachen und kann sogar mehrsprachige Gespräche transkribieren. Die App erkennt automatisch die gesprochene Sprache und wechselt nahtlos zwischen verschiedenen Sprachen.
|
||||
|
||||
## Mana-Verbrauch
|
||||
|
||||
Der Mana-Verbrauch bei Memoro ist transparent und fix: **1 Mana = 1 Cent**
|
||||
|
||||
### Kosten pro Funktion
|
||||
- **Aufnahme & Transkription**: 2 Mana pro Minute (= 2 Cent/Min)
|
||||
- **Fragen an Memos**: 5 Mana pro Frage
|
||||
- **Memos kombinieren**: 5 Mana pro Memo
|
||||
- **Blueprint-Verarbeitung**: 5 Mana (benutzerdefinierte Vorlagen)
|
||||
|
||||
### Beispielrechnungen
|
||||
- **60 Minuten aufnehmen** = 120 Mana = 1,20€
|
||||
- **180 Minuten aufnehmen** = 360 Mana = 3,60€
|
||||
- **300 Minuten aufnehmen** = 600 Mana = 6,00€
|
||||
|
||||
### Mana-Pakete
|
||||
**Monatlich (Abo):**
|
||||
- **Mana Tropfen**: 0€ - 150 Mana/Monat (kostenlos)
|
||||
- **Kleiner Stream**: 5,99€ - 600 Mana/Monat
|
||||
- **Mittlerer Stream**: 14,99€ - 1.500 Mana/Monat
|
||||
- **Großer Stream**: 29,99€ - 3.000 Mana/Monat
|
||||
- **Riesiger Stream**: 49,99€ - 5.000 Mana/Monat
|
||||
|
||||
**Einmalig (Trank):**
|
||||
- **Klein**: 4,99€ - 350 Mana
|
||||
- **Mittel**: 9,99€ - 700 Mana
|
||||
- **Groß**: 19,99€ - 1.400 Mana
|
||||
- **Riesig**: 39,99€ - 2.800 Mana
|
||||
|
||||
### Flexibilität von Mana
|
||||
Mit Mana zahlst du nur für die tatsächliche Nutzung. Brauchst du einen Monat mehr? Buche ein größeres Paket oder einen einmaligen Trank. Brauchst du weniger? Nutze einfach den kostenlosen Mana Tropfen. Perfekt für schwankenden Bedarf!
|
||||
|
||||
## Anwendungsfälle
|
||||
|
||||
### Für Unternehmen
|
||||
- Meeting-Protokolle automatisch erstellen
|
||||
- Kundengespräche dokumentieren
|
||||
- Brainstorming-Sessions festhalten
|
||||
- Schulungen und Präsentationen aufzeichnen
|
||||
|
||||
### Für Bildung
|
||||
- Vorlesungen transkribieren
|
||||
- Forschungsinterviews dokumentieren
|
||||
- Lernnotizen erstellen
|
||||
- Sprachaufnahmen für Studien
|
||||
|
||||
### Für Kreative
|
||||
- Podcast-Transkripte erstellen
|
||||
- Interview-Material verarbeiten
|
||||
- Ideen und Konzepte festhalten
|
||||
- Content-Erstellung beschleunigen
|
||||
|
||||
## Integration mit Mana
|
||||
|
||||
Memoro ist vollständig in das Mana-Ökosystem integriert. Sie zahlen nur für die tatsächliche Nutzung – keine monatlichen Gebühren, keine ungenutzten Minuten. Ihre Mana-Credits werden automatisch beim Start einer Aufnahme reserviert und nach Abschluss der Verarbeitung abgerechnet.
|
||||
|
||||
## Verfügbarkeit
|
||||
|
||||
Memoro ist verfügbar für:
|
||||
- iOS (iPhone & iPad)
|
||||
- Android
|
||||
- Web-App
|
||||
- Desktop (Windows, Mac, Linux)
|
||||
|
||||
Alle Plattformen synchronisieren sich automatisch, sodass Sie nahtlos zwischen Geräten wechseln können.
|
||||
85
apps/manacore/apps/landing/src/content/apps/memoro-en.md
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
title: Memoro
|
||||
description: The intelligent recording app that automatically transcribes, summarizes, and analyzes your conversations. Perfect for meetings, interviews, and notes.
|
||||
category: productivity
|
||||
icon: 🎙️
|
||||
manaUsage:
|
||||
min: 10
|
||||
average: 50
|
||||
max: 200
|
||||
unit: per-minute
|
||||
features:
|
||||
- Real-time automatic transcription
|
||||
- AI-powered summaries
|
||||
- Multilingual support (20+ languages)
|
||||
- Automatic speaker recognition
|
||||
- Export to various formats (PDF, Word, TXT)
|
||||
- Searchable transcripts
|
||||
- Team collaboration features
|
||||
- Mobile and desktop apps
|
||||
status: available
|
||||
order: 1
|
||||
website: https://memoro.ai
|
||||
---
|
||||
|
||||
## What is Memoro?
|
||||
|
||||
Memoro is your personal AI assistant for audio recordings. Whether you have an important meeting, conduct an interview, or simply want to capture your thoughts – Memoro transforms spoken words into structured, searchable documents.
|
||||
|
||||
## Key Features
|
||||
|
||||
### 🎯 Intelligent Transcription
|
||||
Memoro uses cutting-edge AI technology to transcribe your recordings with over 95% accuracy. The app automatically recognizes different speakers and formats the transcript clearly.
|
||||
|
||||
### 📝 Automatic Summarization
|
||||
After each recording, Memoro creates a concise summary of the key points. You receive:
|
||||
- Core statements and decisions
|
||||
- Action items and to-dos
|
||||
- Important dates and appointments
|
||||
- Topic overview
|
||||
|
||||
### 🌍 Multilingual
|
||||
Memoro supports over 20 languages and can even transcribe multilingual conversations. The app automatically detects the spoken language and seamlessly switches between different languages.
|
||||
|
||||
## Mana Usage
|
||||
|
||||
Mana consumption with Memoro is transparent and fair:
|
||||
|
||||
- **Basic transcription**: 10 Mana per minute
|
||||
- **With AI summary**: 30 Mana per minute
|
||||
- **Premium features** (speaker recognition, formatting): 50 Mana per minute
|
||||
- **Maximum usage**: 200 Mana per minute (with all features enabled)
|
||||
|
||||
## Use Cases
|
||||
|
||||
### For Business
|
||||
- Automatically create meeting minutes
|
||||
- Document customer conversations
|
||||
- Capture brainstorming sessions
|
||||
- Record training sessions and presentations
|
||||
|
||||
### For Education
|
||||
- Transcribe lectures
|
||||
- Document research interviews
|
||||
- Create study notes
|
||||
- Language recordings for studies
|
||||
|
||||
### For Creatives
|
||||
- Create podcast transcripts
|
||||
- Process interview material
|
||||
- Capture ideas and concepts
|
||||
- Accelerate content creation
|
||||
|
||||
## Integration with Mana
|
||||
|
||||
Memoro is fully integrated into the Mana ecosystem. You only pay for actual usage – no monthly fees, no unused minutes. Your Mana credits are automatically reserved when you start a recording and charged after processing is complete.
|
||||
|
||||
## Availability
|
||||
|
||||
Memoro is available for:
|
||||
- iOS (iPhone & iPad)
|
||||
- Android
|
||||
- Web app
|
||||
- Desktop (Windows, Mac, Linux)
|
||||
|
||||
All platforms sync automatically, allowing you to seamlessly switch between devices.
|
||||
128
apps/manacore/apps/landing/src/content/apps/moodlit-de.md
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
---
|
||||
title: Moodlit
|
||||
description: Deine persönliche KI für emotionales Wohlbefinden und mentale Gesundheit. Moodlit hilft dir, deine Gefühle zu verstehen, Stress zu bewältigen und innere Balance zu finden.
|
||||
category: creative
|
||||
icon: 🌙
|
||||
manaUsage:
|
||||
min: 20
|
||||
average: 80
|
||||
max: 150
|
||||
unit: per-request
|
||||
features:
|
||||
- Tägliches Stimmungs-Tracking mit KI-Analyse
|
||||
- Personalisierte Achtsamkeitsübungen
|
||||
- Geführte Meditationen und Atemtechniken
|
||||
- Emotionale Muster-Erkennung
|
||||
- Journaling mit KI-Reflexion
|
||||
- Schlaf-Optimierung und Routinen
|
||||
- Evidenzbasierte CBT-Techniken
|
||||
- Vollständige Privatsphäre und Verschlüsselung
|
||||
status: beta
|
||||
releaseDate: Geplant Q4 2025
|
||||
order: 3
|
||||
website: https://moodlit.ai
|
||||
---
|
||||
|
||||
## Was ist Moodlit?
|
||||
|
||||
Moodlit ist dein digitaler Begleiter für mentale Gesundheit und emotionales Wohlbefinden. Mit Hilfe von KI-Technologie und evidenzbasierten psychologischen Methoden unterstützt dich Moodlit dabei, deine Emotionen besser zu verstehen, Stress zu reduzieren und ein ausgeglicheneres Leben zu führen.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 🌈 Intelligentes Stimmungs-Tracking
|
||||
Erfasse täglich deine Stimmung und lass unsere KI Muster und Zusammenhänge erkennen:
|
||||
- Einfaches Check-in mit wenigen Taps
|
||||
- Visualisierung deiner emotionalen Reise
|
||||
- Erkennung von Auslösern und Mustern
|
||||
- Personalisierte Einblicke und Empfehlungen
|
||||
|
||||
### 🧘 Personalisierte Achtsamkeit
|
||||
Moodlit passt sich deinen Bedürfnissen an und bietet maßgeschneiderte Übungen:
|
||||
- Geführte Meditationen (5-30 Minuten)
|
||||
- Atemübungen für akute Stresssituationen
|
||||
- Progressive Muskelentspannung
|
||||
- Achtsamkeitsübungen für den Alltag
|
||||
- Bodyscans und Visualisierungen
|
||||
|
||||
### 📔 KI-gestütztes Journaling
|
||||
Schreibe deine Gedanken auf und erhalte einfühlsame KI-Reflexionen:
|
||||
- Freies Schreiben mit Prompts
|
||||
- KI-Analyse für tiefere Selbsterkenntnis
|
||||
- Dankbarkeits-Journal
|
||||
- Sorgen-Tagebuch mit Lösungsansätzen
|
||||
- Export und Backup deiner Einträge
|
||||
|
||||
### 😴 Schlaf-Optimierung
|
||||
Verbessere deine Schlafqualität mit KI-Unterstützung:
|
||||
- Einschlaf-Meditationen
|
||||
- Beruhigende Soundscapes
|
||||
- Schlaftracking und -analyse
|
||||
- Personalisierte Schlafhygiene-Tipps
|
||||
- Sanfte Wecker mit progressivem Licht
|
||||
|
||||
## Mana-Verbrauch
|
||||
|
||||
Der Mana-Verbrauch bei Moodlit ist transparent und fair:
|
||||
|
||||
- **Einfaches Check-in**: 20 Mana
|
||||
- **KI-Journal-Reflexion**: 50 Mana
|
||||
- **Personalisierte Meditation**: 80 Mana
|
||||
- **Tiefenanalyse & Insights**: 150 Mana
|
||||
- **Tracking ohne KI**: 0 Mana (immer kostenlos)
|
||||
|
||||
## Anwendungsfälle
|
||||
|
||||
### Für den Alltag
|
||||
- Stress bei der Arbeit reduzieren
|
||||
- Emotionale Balance im Alltag finden
|
||||
- Besser schlafen und erholt aufwachen
|
||||
- Achtsamkeit in den Tag integrieren
|
||||
|
||||
### Bei Herausforderungen
|
||||
- Angst und Sorgen bewältigen
|
||||
- Burnout-Prävention
|
||||
- Trauerphasen begleiten
|
||||
- Selbstvertrauen stärken
|
||||
|
||||
### Für persönliches Wachstum
|
||||
- Emotionale Intelligenz entwickeln
|
||||
- Selbstreflexion vertiefen
|
||||
- Gewohnheiten ändern
|
||||
- Dankbarkeit kultivieren
|
||||
|
||||
## Datenschutz & Sicherheit
|
||||
|
||||
Deine mentale Gesundheit ist privat – und bleibt es auch:
|
||||
- **Ende-zu-Ende-Verschlüsselung** aller Journaleinträge
|
||||
- **Keine Weitergabe** an Dritte
|
||||
- **Anonymisierte KI-Analyse** ohne persönliche Identifikation
|
||||
- **DSGVO-konforme** Datenspeicherung in Europa
|
||||
- **Jederzeit löschbar** – du hast die volle Kontrolle
|
||||
|
||||
## Wissenschaftliche Grundlage
|
||||
|
||||
Moodlit basiert auf evidenzbasierten Methoden:
|
||||
- Kognitive Verhaltenstherapie (CBT)
|
||||
- Achtsamkeitsbasierte Stressreduktion (MBSR)
|
||||
- Positive Psychologie
|
||||
- Acceptance and Commitment Therapy (ACT)
|
||||
- Emotionsfokussierte Therapie
|
||||
|
||||
## Integration mit Mana
|
||||
|
||||
Mit Mana-Credits nutzt du Moodlit flexibel nach deinem Bedarf. An stressigen Tagen nutzt du mehr Features, an ruhigen Tagen weniger. Keine monatlichen Verpflichtungen, keine ungenutzten Abos.
|
||||
|
||||
## Verfügbarkeit
|
||||
|
||||
Moodlit ist verfügbar für:
|
||||
- iOS (iPhone & iPad)
|
||||
- Android
|
||||
- Web-App
|
||||
- Apple Watch Integration
|
||||
- Integration mit Health & Google Fit
|
||||
|
||||
Deine Daten synchronisieren sich sicher zwischen allen Geräten.
|
||||
|
||||
## Wichtiger Hinweis
|
||||
|
||||
Moodlit ist ein Werkzeug zur Unterstützung deines Wohlbefindens und ersetzt keine professionelle psychologische oder medizinische Behandlung. Bei ernsthaften psychischen Problemen wende dich bitte an einen Facharzt oder Therapeuten.
|
||||
54
apps/manacore/apps/landing/src/content/apps/nutriphi-de.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
title: Nutriphi
|
||||
description: Deine intelligente Ernährungs-App mit KI-Unterstützung. Tracke deine Mahlzeiten, analysiere Nährstoffe und erreiche deine Gesundheitsziele mit personalisierten Empfehlungen.
|
||||
category: wellness
|
||||
icon: 🥗
|
||||
manaUsage:
|
||||
min: 15
|
||||
average: 40
|
||||
max: 100
|
||||
unit: per-request
|
||||
features:
|
||||
- Foto-Erkennung von Mahlzeiten mit KI
|
||||
- Automatische Nährwertberechnung
|
||||
- Personalisierte Ernährungspläne
|
||||
- Makro- und Mikronährstoff-Tracking
|
||||
- Rezeptvorschläge basierend auf Zielen
|
||||
- Einkaufslisten-Generator
|
||||
- Integration mit Fitness-Apps
|
||||
- Ernährungsberater-KI für Fragen
|
||||
status: beta
|
||||
releaseDate: Geplant Q3 2025
|
||||
order: 8
|
||||
website: https://nutriphi.ai
|
||||
---
|
||||
|
||||
## Was ist Nutriphi?
|
||||
|
||||
Nutriphi ist dein persönlicher Ernährungs-Coach mit KI-Power. Statt mühsam jede Mahlzeit einzutippen, machst du einfach ein Foto - unsere KI erkennt automatisch die Lebensmittel und berechnet die Nährwerte. Mit personalisierten Empfehlungen und intelligenten Analysen erreichst du deine Gesundheitsziele einfacher als je zuvor.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 📸 Foto-Tracking
|
||||
Fotografiere deine Mahlzeit und Nutriphi erkennt automatisch alle Lebensmittel und berechnet die Nährwerte. Kein manuelles Eingeben mehr!
|
||||
|
||||
### 🎯 Personalisierte Ziele
|
||||
Ob Gewichtsverlust, Muskelaufbau oder gesunde Ernährung - Nutriphi erstellt dir einen maßgeschneiderten Plan basierend auf deinen Zielen.
|
||||
|
||||
### 🧪 Detaillierte Analysen
|
||||
Verfolge nicht nur Kalorien, sondern alle wichtigen Makro- und Mikronährstoffe. Identifiziere Defizite und optimiere deine Ernährung.
|
||||
|
||||
### 🍳 Intelligente Rezepte
|
||||
Erhalte Rezeptvorschläge, die zu deinen Zielen passen und die Lebensmittel nutzen, die du bereits hast.
|
||||
|
||||
## Für wen ist Nutriphi?
|
||||
|
||||
- **Fitness-Enthusiasten**: Optimale Ernährung für Training und Regeneration
|
||||
- **Abnehmwillige**: Kaloriendefizit einfach im Blick behalten
|
||||
- **Sportler**: Präzises Makro-Tracking für Performance
|
||||
- **Gesundheitsbewusste**: Ausgewogene Ernährung leicht gemacht
|
||||
- **Menschen mit Ernährungszielen**: Personalisierte Unterstützung
|
||||
|
||||
## Preise
|
||||
|
||||
Nutriphi nutzt das Mana-Creditsystem. Foto-Erkennung und Nährwertanalyse kosten etwa 40 Mana pro Mahlzeit. Einfache Tracking-Funktionen sind günstiger.
|
||||
54
apps/manacore/apps/landing/src/content/apps/orakel-de.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
title: Orakel
|
||||
description: Deine intelligente KI-Chat-Assistentin. Stelle Fragen, führe Gespräche und erhalte Unterstützung bei allem - von komplexen Recherchen bis zu kreativen Projekten.
|
||||
category: productivity
|
||||
icon: 🔮
|
||||
manaUsage:
|
||||
min: 10
|
||||
average: 50
|
||||
max: 200
|
||||
unit: per-request
|
||||
features:
|
||||
- Zugriff auf neueste KI-Modelle (GPT-4, Claude, Gemini)
|
||||
- Kontextbewusstes Langzeit-Gedächtnis
|
||||
- Datei-Upload und -Analyse (PDFs, Bilder, Dokumente)
|
||||
- Web-Recherche in Echtzeit
|
||||
- Code-Generierung und -Debugging
|
||||
- Mehrsprachige Konversationen
|
||||
- Personalisierte Antworten basierend auf deinen Präferenzen
|
||||
- Export von Chat-Verläufen
|
||||
status: available
|
||||
releaseDate: 01.04.2024
|
||||
order: 7
|
||||
website: https://orakel.ai
|
||||
---
|
||||
|
||||
## Was ist Orakel?
|
||||
|
||||
Orakel ist deine persönliche KI-Assistentin für alle Lebenslagen. Ob du komplexe Fragen klären, kreative Ideen entwickeln, Code schreiben oder einfach ein interessantes Gespräch führen möchtest - Orakel steht dir mit den leistungsstärksten KI-Modellen zur Seite.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 🧠 Intelligente Gespräche
|
||||
Führe natürliche, kontextbewusste Gespräche mit modernsten KI-Modellen. Orakel merkt sich den Kontext und liefert präzise, hilfreiche Antworten.
|
||||
|
||||
### 📚 Dokument-Analyse
|
||||
Lade PDFs, Word-Dokumente oder Bilder hoch und stelle Fragen dazu. Orakel analysiert den Inhalt und hilft dir, wichtige Informationen zu extrahieren.
|
||||
|
||||
### 🌐 Web-Recherche
|
||||
Orakel kann aktuelle Informationen aus dem Internet abrufen und dir so die neuesten Daten und Fakten liefern.
|
||||
|
||||
### 💻 Code-Assistent
|
||||
Egal ob Python, JavaScript oder andere Sprachen - Orakel hilft dir beim Programmieren, erklärt Code und findet Fehler.
|
||||
|
||||
## Für wen ist Orakel?
|
||||
|
||||
- **Studierende**: Recherche, Hausaufgaben und Lernunterstützung
|
||||
- **Entwickler**: Code-Review, Debugging und Dokumentation
|
||||
- **Autoren & Kreative**: Brainstorming und Content-Erstellung
|
||||
- **Business**: Analyse, Zusammenfassungen und Entscheidungshilfe
|
||||
- **Neugierige**: Einfach Fragen stellen und lernen
|
||||
|
||||
## Preise
|
||||
|
||||
Orakel nutzt das Mana-Creditsystem. Die Kosten variieren je nach gewähltem KI-Modell und Länge der Konversation. Eine durchschnittliche Unterhaltung kostet etwa 50 Mana pro Anfrage.
|
||||
54
apps/manacore/apps/landing/src/content/apps/pictus-de.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
title: Pictus
|
||||
description: Dein kreativer KI-Bildgenerator. Erschaffe beeindruckende Bilder, Kunstwerke und Designs mit der Kraft künstlicher Intelligenz - von realistischen Fotos bis zu abstrakten Kunstwerken.
|
||||
category: creative
|
||||
icon: 🎨
|
||||
manaUsage:
|
||||
min: 50
|
||||
average: 150
|
||||
max: 400
|
||||
unit: per-request
|
||||
features:
|
||||
- Text-zu-Bild Generation in Sekunden
|
||||
- Über 50 verschiedene Kunststile
|
||||
- Hochauflösende Bilder bis 4K
|
||||
- Bild-zu-Bild Transformation
|
||||
- Inpainting und Outpainting
|
||||
- Batch-Generierung für mehrere Varianten
|
||||
- Prompt-Optimierung durch KI
|
||||
- Kommerzielle Nutzungsrechte
|
||||
status: available
|
||||
releaseDate: 10.05.2024
|
||||
order: 6
|
||||
website: https://pictus.ai
|
||||
---
|
||||
|
||||
## Was ist Pictus?
|
||||
|
||||
Pictus ist dein persönlicher KI-Bildgenerator und kreativer Playground. Ob du ein professioneller Designer bist, Content Creator oder einfach kreativ sein möchtest - mit Pictus erschaffst du in Sekunden beeindruckende Bilder aus einfachen Textbeschreibungen. Von fotorealistischen Porträts bis zu surrealen Kunstwerken ist alles möglich.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 🎨 Unbegrenzte Kreativität
|
||||
Erstelle Bilder in jedem erdenklichen Stil - von Ölgemälden über Manga bis zu hyperrealistischen Fotos. Unsere KI versteht deine Vision und setzt sie um.
|
||||
|
||||
### ⚡ Blitzschnelle Generation
|
||||
Von der Idee zum fertigen Bild in Sekunden. Keine stundenlanges Warten mehr - deine Kreativität wird nicht ausgebremst.
|
||||
|
||||
### 🎯 Präzise Kontrolle
|
||||
Mit erweiterten Parametern, Inpainting und Style-Transfer hast du volle Kontrolle über jedes Detail deiner Kreationen.
|
||||
|
||||
### 💼 Kommerziell Nutzbar
|
||||
Alle generierten Bilder gehören dir und können frei für kommerzielle Projekte verwendet werden.
|
||||
|
||||
## Für wen ist Pictus?
|
||||
|
||||
- **Designer & Künstler**: Schnelle Konzepte und Inspirationen
|
||||
- **Marketing & Social Media**: Einzigartige Visuals für Kampagnen
|
||||
- **Content Creator**: Thumbnails, Illustrationen und mehr
|
||||
- **Unternehmen**: Produktvisualisierungen und Mockups
|
||||
- **Hobbyisten**: Einfach kreativ sein und Spaß haben
|
||||
|
||||
## Preise
|
||||
|
||||
Pictus nutzt das flexible Mana-Creditsystem. Eine Standard-Bildgenerierung kostet etwa 150 Mana. Komplexere Anfragen oder höhere Auflösungen verbrauchen mehr Credits, einfache Generierungen weniger.
|
||||
54
apps/manacore/apps/landing/src/content/apps/traces-de.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
title: Traces
|
||||
description: Entdecke deine Stadt neu mit KI-gestütztem Bewegungs-Tracking. Traces zeigt dir unerforschte Ecken, erstellt schöne Karten deiner Wege und motiviert dich, neue Orte zu erkunden.
|
||||
category: wellness
|
||||
icon: 🗺️
|
||||
manaUsage:
|
||||
min: 5
|
||||
average: 20
|
||||
max: 50
|
||||
unit: per-request
|
||||
features:
|
||||
- Automatisches GPS-Tracking deiner Bewegungen
|
||||
- Visualisierung besuchter und unbesuchter Bereiche
|
||||
- KI-Vorschläge für neue Routen und Orte
|
||||
- Heatmap deiner meist besuchten Spots
|
||||
- Entdeckungs-Statistiken und Achievements
|
||||
- Schöne, teilbare Karten-Visualisierungen
|
||||
- Privatsphäre-Fokus mit lokaler Datenverarbeitung
|
||||
- "Gamification: Challenges und Stadtteile freischalten"
|
||||
status: coming-soon
|
||||
releaseDate: Geplant Q4 2025
|
||||
order: 9
|
||||
website: https://traces.ai
|
||||
---
|
||||
|
||||
## Was ist Traces?
|
||||
|
||||
Traces verwandelt deinen täglichen Weg durch die Stadt in ein Abenteuer. Die App trackt deine Bewegungen und zeigt dir auf einer schönen Karte, welche Ecken du bereits erkundet hast - und welche noch auf dich warten. Mit KI-gestützten Routenvorschlägen entdeckst du deine Stadt völlig neu.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 🗺️ Stadtentdecker
|
||||
Sieh auf einen Blick, welche Straßen und Stadtteile du bereits besucht hast. Weße Flecken auf der Karte motivieren dich, neue Ecken zu erkunden.
|
||||
|
||||
### 🎯 Intelligente Routenvorschläge
|
||||
Unsere KI schlägt dir interessante Routen vor, die durch noch unerforschte Gebiete führen - angepasst an deine Vorlieben und verfügbare Zeit.
|
||||
|
||||
### 📊 Detaillierte Statistiken
|
||||
Wie viel Prozent deiner Stadt hast du schon gesehen? Welche Stadtteile kennst du am besten? Traces zeigt dir spannende Insights zu deinen Bewegungsmustern.
|
||||
|
||||
### 🎨 Schöne Visualisierungen
|
||||
Erstelle kunstvolle Karten deiner Wege und teile sie mit Freunden. Jede Stadt wird zu deinem persönlichen Kunstwerk.
|
||||
|
||||
## Für wen ist Traces?
|
||||
|
||||
- **Stadterkunder**: Systematisch die Heimatstadt entdecken
|
||||
- **Läufer & Radfahrer**: Neue Trainingsrouten finden
|
||||
- **Reisende**: Städtetrips optimal nutzen
|
||||
- **Neugierige**: Verborgene Orte in der Nachbarschaft finden
|
||||
- **Fotografen**: Neue spannende Locations entdecken
|
||||
|
||||
## Preise
|
||||
|
||||
Traces nutzt das Mana-Creditsystem. Basis-Tracking ist kostenlos. KI-Routenvorschläge und erweiterte Analysen kosten etwa 20 Mana pro Anfrage.
|
||||
182
apps/manacore/apps/landing/src/content/apps/zitare-de.md
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
---
|
||||
title: Zitare
|
||||
description: Intelligente Zitatverwaltung und Literaturrecherche für akademisches Arbeiten. Zitare revolutioniert wissenschaftliches Schreiben mit KI-gestützter Quellensuche und automatischer Formatierung.
|
||||
category: productivity
|
||||
icon: 📚
|
||||
manaUsage:
|
||||
min: 30
|
||||
average: 100
|
||||
max: 250
|
||||
unit: per-request
|
||||
features:
|
||||
- KI-gestützte Literaturrecherche in Millionen Quellen
|
||||
- Automatische Zitatformatierung (APA, MLA, Chicago, Harvard, etc.)
|
||||
- PDF-Extraktion und -Annotation
|
||||
- Plagiatsprüfung und Quellenverifikation
|
||||
- Zusammenfassungen wissenschaftlicher Artikel
|
||||
- Bibliografie-Generator
|
||||
- Team-Collaboration für Forschungsgruppen
|
||||
- Export in alle gängigen Formate (BibTeX, RIS, Word)
|
||||
status: available
|
||||
releaseDate: 15.03.2024
|
||||
order: 4
|
||||
website: https://zitare.ai
|
||||
---
|
||||
|
||||
## Was ist Zitare?
|
||||
|
||||
Zitare ist dein intelligenter Assistent für wissenschaftliches Arbeiten. Von der Literaturrecherche über die Zitatverwaltung bis zur perfekt formatierten Bibliografie – Zitare nutzt KI, um dir die zeitraubenden Aspekte akademischen Schreibens abzunehmen, damit du dich auf den Inhalt konzentrieren kannst.
|
||||
|
||||
## Hauptfunktionen
|
||||
|
||||
### 🔍 KI-gestützte Literaturrecherche
|
||||
Finde relevante Quellen in Sekundenschnelle:
|
||||
- Durchsuche Millionen akademischer Artikel und Bücher
|
||||
- KI-basierte Relevanz-Bewertung
|
||||
- Zugriff auf Google Scholar, PubMed, arXiv und mehr
|
||||
- Semantische Suche: Finde ähnliche Arbeiten
|
||||
- Automatische DOI-Erkennung
|
||||
- Volltextzugriff wo verfügbar
|
||||
|
||||
### 📑 Intelligente Zitatverwaltung
|
||||
Organisiere deine Quellen mühelos:
|
||||
- Automatische Metadaten-Extraktion aus PDFs
|
||||
- Drag & Drop Import von Dokumenten
|
||||
- Tagging und Kategorisierung
|
||||
- Notizen und Highlights direkt am Dokument
|
||||
- Ordnerstruktur und Smart Collections
|
||||
- Duplikat-Erkennung
|
||||
|
||||
### ✍️ Perfekte Formatierung
|
||||
Zitiere korrekt in jedem Stil:
|
||||
- Über 10.000 Zitierstile unterstützt
|
||||
- Automatische In-Text-Zitate
|
||||
- Ein-Klick Bibliografie-Erstellung
|
||||
- Echtzeit-Aktualisierung bei Änderungen
|
||||
- Word & Google Docs Integration
|
||||
- LaTeX/BibTeX Export
|
||||
|
||||
### 🤖 KI-Features
|
||||
Verstehe Forschung schneller:
|
||||
- Automatische Zusammenfassungen langer Artikel
|
||||
- Extraktion von Kernaussagen und Methoden
|
||||
- Vergleich mehrerer Studien
|
||||
- Identifikation von Forschungslücken
|
||||
- Generierung von Literatur-Reviews
|
||||
- Plagiatsprüfung
|
||||
|
||||
## Mana-Verbrauch
|
||||
|
||||
Der Mana-Verbrauch richtet sich nach der genutzten Funktion:
|
||||
|
||||
- **Einfache Metadaten-Extraktion**: 30 Mana
|
||||
- **PDF-Analyse & Annotation**: 50 Mana
|
||||
- **KI-Zusammenfassung**: 100 Mana (pro Artikel)
|
||||
- **Literaturrecherche**: 80 Mana (pro Suchanfrage)
|
||||
- **Plagiatsprüfung**: 150 Mana (pro Dokument)
|
||||
- **Umfassende Literatur-Review**: 250 Mana
|
||||
- **Basis-Zitatverwaltung**: 0 Mana (immer kostenlos)
|
||||
|
||||
## Anwendungsfälle
|
||||
|
||||
### Für Studierende
|
||||
- Bachelor- und Masterarbeiten schreiben
|
||||
- Seminararbeiten professionell formatieren
|
||||
- Literaturrecherche für Essays
|
||||
- Gruppenprojekte koordinieren
|
||||
|
||||
### Für Forschende
|
||||
- Systematische Literature Reviews
|
||||
- Paper-Submission vorbereiten
|
||||
- Forschungsprojekte dokumentieren
|
||||
- Kollaboration in Forschungsgruppen
|
||||
|
||||
### Für Doktoranden
|
||||
- Dissertation organisieren
|
||||
- Hunderte Quellen verwalten
|
||||
- Publikationen vorbereiten
|
||||
- Forschungsstand analysieren
|
||||
|
||||
### Für Journalisten & Autoren
|
||||
- Fakten verifizieren
|
||||
- Quellen dokumentieren
|
||||
- Recherchen organisieren
|
||||
- Sachbücher schreiben
|
||||
|
||||
## Unterstützte Zitierstile
|
||||
|
||||
Zitare unterstützt alle gängigen Zitierstile:
|
||||
- **APA** (American Psychological Association)
|
||||
- **MLA** (Modern Language Association)
|
||||
- **Chicago** (Notes & Bibliography, Author-Date)
|
||||
- **Harvard** Referencing
|
||||
- **IEEE** (Institute of Electrical and Electronics Engineers)
|
||||
- **Vancouver** (Biomedical)
|
||||
- **Turabian**
|
||||
- **DIN 1505-2** (Deutschland)
|
||||
- Und über 10.000 weitere Stile
|
||||
|
||||
## Integration & Export
|
||||
|
||||
Nahtlose Integration in deinen Workflow:
|
||||
- **Microsoft Word** Plugin (Windows & Mac)
|
||||
- **Google Docs** Add-on
|
||||
- **LibreOffice** Extension
|
||||
- **LaTeX/BibTeX** Export
|
||||
- **Overleaf** Integration
|
||||
- **Notion** & **Obsidian** Sync
|
||||
- **Zotero** & **Mendeley** Import
|
||||
|
||||
## Team-Features
|
||||
|
||||
Gemeinsam effizienter forschen:
|
||||
- Geteilte Bibliotheken für Teams
|
||||
- Kommentare und Diskussionen
|
||||
- Aufgaben-Zuweisung
|
||||
- Versions-Historie
|
||||
- Zugriffs-Kontrolle
|
||||
- Echtzeit-Synchronisation
|
||||
|
||||
## Datensicherheit
|
||||
|
||||
Deine Forschung ist wertvoll und geschützt:
|
||||
- **Verschlüsselte Speicherung** aller Dokumente
|
||||
- **Automatische Backups** täglich
|
||||
- **DSGVO-konform** - Server in Europa
|
||||
- **Keine KI-Training** mit deinen Daten
|
||||
- **Export jederzeit** möglich
|
||||
- **Akademische Integrität** gewährleistet
|
||||
|
||||
## Integration mit Mana
|
||||
|
||||
Mit Mana-Credits zahlst du nur für die KI-Features, die du tatsächlich nutzt. Die Basis-Zitatverwaltung ist immer kostenlos. Perfekt für Studierende mit schwankendem Bedarf während des Semesters.
|
||||
|
||||
## Verfügbarkeit
|
||||
|
||||
Zitare ist verfügbar als:
|
||||
- **Web-App** (alle Browser)
|
||||
- **Desktop-App** (Windows, Mac, Linux)
|
||||
- **Browser-Extension** (Chrome, Firefox, Safari, Edge)
|
||||
- **Mobile Apps** (iOS & Android) - Lesen & Annotieren
|
||||
- **API** für eigene Workflows
|
||||
|
||||
## Vergleich zu Konkurrenz
|
||||
|
||||
| Feature | Zitare | Zotero | Mendeley | EndNote |
|
||||
|---------|--------|--------|----------|---------|
|
||||
| KI-Zusammenfassungen | ✅ | ❌ | ❌ | ❌ |
|
||||
| Flexible Abrechnung | ✅ | ✅ | ❌ | ❌ |
|
||||
| Moderne UI | ✅ | ⚠️ | ✅ | ⚠️ |
|
||||
| Open Source | ✅ | ✅ | ❌ | ❌ |
|
||||
| PDF-Annotation | ✅ | ✅ | ✅ | ✅ |
|
||||
| Team-Features | ✅ | ⚠️ | ✅ | ✅ |
|
||||
|
||||
## Kostenlos starten
|
||||
|
||||
Die Basis-Funktionen von Zitare sind komplett kostenlos:
|
||||
- Unbegrenzte Quellen speichern
|
||||
- Alle Zitierstile nutzen
|
||||
- Bibliografien erstellen
|
||||
- PDFs organisieren
|
||||
|
||||
Nutze Mana-Credits nur wenn du KI-Features brauchst!
|
||||
212
apps/manacore/apps/landing/src/content/branchen/ngos.md
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
---
|
||||
title: NGOs
|
||||
description: Maximale Wirkung mit minimalem Budget – KI-Tools für Non-Profit-Organisationen mit speziellen NGO-Konditionen.
|
||||
icon: 🌍
|
||||
benefits:
|
||||
- Spezielle NGO-Rabatte bis zu 50%
|
||||
- Flexible Nutzung für Projekte und Kampagnen
|
||||
- Mehrsprachige Tools für internationale Arbeit
|
||||
- DSGVO-konforme Verarbeitung sensibler Daten
|
||||
- Transparente Abrechnung für Förderberichte
|
||||
useCases:
|
||||
- Feldforschung und Interviews mit Memoro dokumentieren
|
||||
- Förderanträge professionell formulieren
|
||||
- Kampagnen-Content in mehreren Sprachen erstellen
|
||||
- Impact-Reports und Jahresberichte generieren
|
||||
- Stakeholder-Kommunikation optimieren
|
||||
testimonial:
|
||||
quote: "Mit Mana können wir endlich professionelle Übersetzungen und Berichte erstellen, ohne unser knappes Budget für teure Agenturen ausgeben zu müssen. Das macht einen riesigen Unterschied für unsere Arbeit."
|
||||
author: "Dr. Elena Rodriguez"
|
||||
role: "Programmdirektorin"
|
||||
company: "Water for All International"
|
||||
pricing:
|
||||
special: true
|
||||
discount: "NGO-Rabatt bis 50%"
|
||||
details: "Vergünstigte Konditionen für registrierte Non-Profit-Organisationen weltweit"
|
||||
order: 8
|
||||
---
|
||||
|
||||
## KI für den guten Zweck
|
||||
|
||||
NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zugang zu professionellen KI-Tools, die Ihre Wirkung maximieren, ohne Ihr Budget zu sprengen.
|
||||
|
||||
### Die NGO-Herausforderung
|
||||
|
||||
- **Knappe Budgets**: Jeder Euro soll der Mission dienen
|
||||
- **Internationale Arbeit**: Mehrsprachige Kommunikation nötig
|
||||
- **Hohe Standards**: Professionelle Berichte für Förderer
|
||||
- **Zeitdruck**: Kleine Teams, große Aufgaben
|
||||
|
||||
### Die Mana-Lösung für NGOs
|
||||
|
||||
1. **NGO-Rabatte**: Bis zu 50% auf alle Mana-Käufe
|
||||
2. **Projekt-basierte Nutzung**: Zahlen Sie nur für aktive Kampagnen
|
||||
3. **Globale Tools**: Übersetzungen in 100+ Sprachen
|
||||
4. **Compliance**: DSGVO und internationale Standards
|
||||
|
||||
## Transformative Anwendungen für Ihre Mission
|
||||
|
||||
### 🌐 Internationale Kommunikation
|
||||
- **Mehrsprachige Kampagnen**: Content in allen Zielsprachen
|
||||
- **Kulturelle Anpassung**: Lokalisierte Botschaften
|
||||
- **Echtzeit-Übersetzungen**: Für internationale Meetings
|
||||
- **Globale Reports**: Einheitliche Kommunikation weltweit
|
||||
|
||||
### 📊 Forschung & Dokumentation mit Memoro
|
||||
- **Feldstudien**: Interviews automatisch transkribieren
|
||||
- **Beneficiary Feedback**: Stimmen der Zielgruppe erfassen
|
||||
- **Projektdokumentation**: Lückenlose Nachweise
|
||||
- **Wissensmanagement**: Durchsuchbares Archiv
|
||||
|
||||
### 💰 Fundraising & Förderung
|
||||
- **Grant Applications**: Überzeugende Förderanträge
|
||||
- **Donor Reports**: Professionelle Wirkungsberichte
|
||||
- **Fundraising-Kampagnen**: Emotionale Geschichten
|
||||
- **Budget-Narratives**: Verständliche Finanzberichte
|
||||
|
||||
### 📢 Advocacy & Kampagnen
|
||||
- **Policy Papers**: Fundierte Positionspapiere
|
||||
- **Social Media**: Virale Kampagnen-Inhalte
|
||||
- **Petitionen**: Überzeugende Aufrufe
|
||||
- **Medienarbeit**: Pressemitteilungen mit Impact
|
||||
|
||||
### 📈 Monitoring & Evaluation
|
||||
- **Impact Assessment**: Datenanalyse und Visualisierung
|
||||
- **Theory of Change**: Komplexe Zusammenhänge darstellen
|
||||
- **KPI-Reports**: Automatisierte Berichterstattung
|
||||
- **Lessons Learned**: Systematische Auswertung
|
||||
|
||||
## Spezialisierte Lösungen nach Arbeitsbereich
|
||||
|
||||
### 🏥 Gesundheit & Humanitäre Hilfe
|
||||
- Medizinische Berichte vereinfachen
|
||||
- Gesundheitsaufklärung lokalisieren
|
||||
- Notfall-Kommunikation koordinieren
|
||||
- Spender-Updates in Krisenzeiten
|
||||
|
||||
### 🌱 Umwelt & Klimaschutz
|
||||
- Wissenschaftliche Daten verständlich machen
|
||||
- Kampagnen für Verhaltensänderung
|
||||
- Policy-Empfehlungen formulieren
|
||||
- Klimaberichte visualisieren
|
||||
|
||||
### 📚 Bildung & Entwicklung
|
||||
- Lehrmaterialien erstellen
|
||||
- Projektanträge für Schulen
|
||||
- Community-Feedback auswerten
|
||||
- Erfolgsgeschichten erzählen
|
||||
|
||||
### ⚖️ Menschenrechte & Advocacy
|
||||
- Zeugenaussagen dokumentieren
|
||||
- Rechtliche Analysen erstellen
|
||||
- Internationale Berichte verfassen
|
||||
- Kampagnen-Strategien entwickeln
|
||||
|
||||
## Kostenbeispiel für NGOs
|
||||
|
||||
**Traditionelle Lösung**:
|
||||
- Übersetzungsbüro: 500-1000€/Monat
|
||||
- Content-Agentur: 1000-2000€/Monat
|
||||
- Transcription-Service: 200-400€/Monat
|
||||
- **Gesamt: 1700-3400€/Monat**
|
||||
|
||||
**Mit Mana NGO-Tarif**:
|
||||
- Durchschnittliche Nutzung: 200-400€/Monat
|
||||
- Bei Kampagnen-Peaks: 500-800€/Monat
|
||||
- **Ersparnis: 70-80%!**
|
||||
|
||||
## So funktioniert die NGO-Verifizierung
|
||||
|
||||
### 1. Nachweis einreichen
|
||||
- Registrierungsurkunde der Organisation
|
||||
- Steuerbefreiung oder Gemeinnützigkeitsnachweis
|
||||
- Kurze Beschreibung Ihrer Mission
|
||||
|
||||
### 2. NGO-Account aktivieren
|
||||
- 50% Rabatt auf alle Mana-Käufe
|
||||
- Spezielle NGO-Features
|
||||
- Priority-Support
|
||||
|
||||
### 3. Global durchstarten
|
||||
- Team-Zugänge für alle Standorte
|
||||
- Projekt-basierte Budgets
|
||||
- Transparente Abrechnung
|
||||
|
||||
## NGO-Pakete mit 50% Rabatt
|
||||
|
||||
### 🌱 Pilot-Projekt
|
||||
- **2.500 Mana** für 12,50€ (statt 25€)
|
||||
- Für kleine Projekte und Tests
|
||||
- Reicht für: 1 Kampagne oder Report
|
||||
|
||||
### 🌟 Kampagnen-Paket
|
||||
- **10.000 Mana** für 50€ (statt 100€)
|
||||
- Für aktive Organisationen
|
||||
- Reicht für: 2-3 Monate Vollbetrieb
|
||||
|
||||
### 🚀 Impact-Paket
|
||||
- **25.000 Mana** für 112,50€ (statt 225€)
|
||||
- Für große Programme
|
||||
- Reicht für: Jahresprojekt mit allen Tools
|
||||
|
||||
### 🌍 Global-Paket
|
||||
- **50.000 Mana** für 200€ (statt 400€)
|
||||
- Für internationale NGOs
|
||||
- Reicht für: Multi-Country-Programme
|
||||
|
||||
## Best Practices für NGOs
|
||||
|
||||
### 📋 Projekt-Management
|
||||
1. **Mana-Budget** pro Projekt zuweisen
|
||||
2. **Templates** für wiederkehrende Aufgaben
|
||||
3. **Team-Training** für effiziente Nutzung
|
||||
4. **Impact-Tracking** der Tool-Nutzung
|
||||
|
||||
### 💡 Maximaler Impact
|
||||
- **Batch-Processing**: Mehrere Dokumente gleichzeitig
|
||||
- **Vorlagen nutzen**: Für Reports und Anträge
|
||||
- **Mehrfachnutzung**: Content für verschiedene Kanäle
|
||||
- **Wissenstransfer**: Best Practices im Team teilen
|
||||
|
||||
### 🔒 Datenschutz beachten
|
||||
- Sensible Daten anonymisieren
|
||||
- Lokale Speicherung wichtiger Dokumente
|
||||
- Zugriffsrechte klar regeln
|
||||
- Compliance-Richtlinien befolgen
|
||||
|
||||
## Success Stories
|
||||
|
||||
### Clean Water Initiative (Kenia)
|
||||
"Memoro hat unsere Feldforschung revolutioniert. Was früher Wochen dauerte, schaffen wir jetzt in Tagen."
|
||||
|
||||
### Climate Action Network (Global)
|
||||
"Mit Mana erstellen wir unsere Reports in 12 Sprachen – früher undenkbar mit unserem Budget."
|
||||
|
||||
### Education First (Südostasien)
|
||||
"Die KI-Tools helfen uns, aus lokalen Erfolgen globale Best Practices zu machen."
|
||||
|
||||
## Häufige NGO-Fragen
|
||||
|
||||
**Gilt der Rabatt weltweit?**
|
||||
Ja! Registrierte NGOs aus allen Ländern qualifizieren sich.
|
||||
|
||||
**Können Freiwillige den Account nutzen?**
|
||||
Ja, Sie können beliebig viele Nutzer hinzufügen.
|
||||
|
||||
**Wie wird abgerechnet?**
|
||||
Transparent per Rechnung – perfekt für Ihre Buchhaltung und Förderberichte.
|
||||
|
||||
**Gibt es Schulungen?**
|
||||
Ja! Wir bieten kostenlose Webinare speziell für NGOs.
|
||||
|
||||
## Gemeinsam mehr bewirken
|
||||
|
||||
Ihre Mission ist es, die Welt zu verbessern. Unsere Mission ist es, Ihnen die Tools dafür zu geben – bezahlbar, zugänglich und wirkungsvoll.
|
||||
|
||||
Mit Mana können Sie:
|
||||
- Mehr Menschen erreichen
|
||||
- Professioneller kommunizieren
|
||||
- Ressourcen effizienter nutzen
|
||||
- Größeren Impact erzielen
|
||||
|
||||
Starten Sie heute und erleben Sie, wie KI Ihre NGO-Arbeit auf das nächste Level hebt!
|
||||
185
apps/manacore/apps/landing/src/content/branchen/privat.md
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
---
|
||||
title: Privat
|
||||
description: KI-Tools für den persönlichen Gebrauch – ohne teure Abos, die Sie kaum nutzen. Zahlen Sie nur, was Sie wirklich brauchen.
|
||||
icon: 👤
|
||||
benefits:
|
||||
- Keine monatlichen Fixkosten für gelegentliche Nutzung
|
||||
- Zugang zu allen Premium-KI-Tools ohne einzelne Abos
|
||||
- Mana verfällt nie – nutzen Sie es wann Sie wollen
|
||||
- Volle Kostenkontrolle ohne böse Überraschungen
|
||||
- Datenschutz und Privatsphäre garantiert
|
||||
useCases:
|
||||
- Persönliche Notizen und Tagebücher mit Memoro
|
||||
- Briefe und E-Mails professionell formulieren
|
||||
- Kreative Projekte und Hobbys unterstützen
|
||||
- Reiseplanung und Recherche optimieren
|
||||
- Bewerbungen und Lebensläufe perfektionieren
|
||||
testimonial:
|
||||
quote: "Ich nutze KI-Tools nur ab und zu – für Bewerbungen oder wichtige Briefe. Mit Mana zahle ich nicht mehr jeden Monat 20€ für ChatGPT Plus, das ich kaum nutze."
|
||||
author: "Andreas Weber"
|
||||
role: "Privatnutzer"
|
||||
company: ""
|
||||
pricing:
|
||||
special: false
|
||||
discount: ""
|
||||
details: "Flexible Pakete perfekt für den persönlichen Bedarf"
|
||||
order: 7
|
||||
---
|
||||
|
||||
## KI für Ihren Alltag – ohne Abo-Stress
|
||||
|
||||
Warum monatlich für Tools zahlen, die Sie nur gelegentlich brauchen? Mit Mana nutzen Sie Premium-KI genau dann, wenn Sie sie wirklich brauchen.
|
||||
|
||||
### Das Problem mit privaten KI-Abos
|
||||
|
||||
- **Überteuerte Abos**: 20€/Monat für gelegentliche Nutzung
|
||||
- **Tool-Sammlung**: Verschiedene Abos für verschiedene Zwecke
|
||||
- **Vergessene Kündigungen**: Abos laufen weiter, obwohl ungenutzt
|
||||
- **Eingeschränkte Free-Versionen**: Wichtige Features fehlen
|
||||
|
||||
### Die Mana-Lösung für Privatpersonen
|
||||
|
||||
1. **Zahlen nach Bedarf**: Kaufen Sie Mana nur wenn Sie es brauchen
|
||||
2. **Alle Tools verfügbar**: Ein Account für ChatGPT, Claude, DALL-E & mehr
|
||||
3. **Kein Verfallsdatum**: Ihre Credits bleiben für immer erhalten
|
||||
4. **Volle Premium-Features**: Keine Einschränkungen bei der Nutzung
|
||||
|
||||
## Perfekt für Ihren persönlichen Alltag
|
||||
|
||||
### 📝 Kommunikation & Schreiben
|
||||
- **Wichtige Briefe**: An Behörden, Vermieter oder Versicherungen
|
||||
- **E-Mails**: Professionell und überzeugend formuliert
|
||||
- **Beschwerden**: Sachlich und wirkungsvoll
|
||||
- **Glückwünsche**: Kreativ und persönlich
|
||||
|
||||
### 🎯 Karriere & Bildung
|
||||
- **Bewerbungen**: Anschreiben, die überzeugen
|
||||
- **Lebensläufe**: Modern und aussagekräftig
|
||||
- **Vorbereitung**: Für Vorstellungsgespräche
|
||||
- **Weiterbildung**: Komplexe Themen verstehen
|
||||
|
||||
### 🎨 Kreativität & Hobbys
|
||||
- **Geschichten schreiben**: Für Kinder oder als Hobby
|
||||
- **Gedichte & Songtexte**: Kreative Inspiration
|
||||
- **Bildgenerierung**: Für persönliche Projekte
|
||||
- **Übersetzungen**: Für Reisen oder Hobbys
|
||||
|
||||
### 🏠 Haushalt & Organisation
|
||||
- **Reiseplanung**: Routen und Aktivitäten
|
||||
- **Rezepte**: Angepasst an Ihre Vorlieben
|
||||
- **Heimwerker-Tipps**: Anleitungen verstehen
|
||||
- **Finanzplanung**: Budgets und Spartipps
|
||||
|
||||
### 💭 Persönliche Entwicklung mit Memoro
|
||||
- **Tagebuch**: Gedanken aufnehmen und reflektieren
|
||||
- **Ideen festhalten**: Spontane Einfälle dokumentieren
|
||||
- **Lernnotizen**: Podcasts oder Videos zusammenfassen
|
||||
- **Selbstreflexion**: Persönliche Entwicklung tracken
|
||||
|
||||
## Kostenvergleich für Privatnutzer
|
||||
|
||||
**Typische Abo-Sammlung**:
|
||||
- ChatGPT Plus: 20€/Monat
|
||||
- DeepL Pro: 8€/Monat
|
||||
- Grammarly: 12€/Monat
|
||||
- **Gesamt: 40€/Monat = 480€/Jahr**
|
||||
|
||||
**Mit Mana (Beispielnutzung)**:
|
||||
- Gelegentliche Nutzung: 5-10€/Monat
|
||||
- Intensive Phasen: 20-30€/Monat
|
||||
- **Durchschnitt: ~120€/Jahr**
|
||||
- **Ersparnis: 75%!**
|
||||
|
||||
## Beliebte Pakete für Privatnutzer
|
||||
|
||||
### 🌟 Einsteiger-Paket
|
||||
- **500 Mana** für 4,99€
|
||||
- Perfekt zum Ausprobieren
|
||||
- Reicht für: 50+ ChatGPT-Anfragen oder 10 Bilder
|
||||
|
||||
### 💡 Alltags-Paket
|
||||
- **2.000 Mana** für 18,99€ (5% Rabatt)
|
||||
- Ideal für regelmäßige Nutzung
|
||||
- Reicht für: 2-3 Monate normale Nutzung
|
||||
|
||||
### 🚀 Power-Paket
|
||||
- **5.000 Mana** für 44,99€ (10% Rabatt)
|
||||
- Für intensive Projekte
|
||||
- Reicht für: 6+ Monate oder große Projekte
|
||||
|
||||
### 💎 Jahres-Vorrat
|
||||
- **10.000 Mana** für 84,99€ (15% Rabatt)
|
||||
- Sorgenfrei für ein ganzes Jahr
|
||||
- Reicht für: 12+ Monate regelmäßige Nutzung
|
||||
|
||||
## Praktische Tipps für Privatnutzer
|
||||
|
||||
### 💰 Mana sparen
|
||||
- Kurze, präzise Anfragen formulieren
|
||||
- Erst grob, dann verfeinern
|
||||
- Zwischenergebnisse speichern
|
||||
- Tools clever kombinieren
|
||||
|
||||
### 🎯 Effektiv nutzen
|
||||
1. **Vorbereitung**: Klar definieren, was Sie brauchen
|
||||
2. **Prompt-Vorlagen**: Bewährte Anfragen speichern
|
||||
3. **Batch-Nutzung**: Mehrere Aufgaben sammeln
|
||||
4. **Ergebnisse archivieren**: Für spätere Verwendung
|
||||
|
||||
### 🔒 Privatsphäre schützen
|
||||
- Keine persönlichen Daten in Prompts
|
||||
- Anonymisierte Beispiele verwenden
|
||||
- Ergebnisse lokal speichern
|
||||
- Account-Sicherheit beachten
|
||||
|
||||
## Anwendungsbeispiele aus dem Alltag
|
||||
|
||||
### Brief an die Hausverwaltung
|
||||
**Aufwand**: 20 Mana (0,20€)
|
||||
- Problem schildern
|
||||
- Professionell formulieren lassen
|
||||
- Rechtliche Hinweise einbauen
|
||||
|
||||
### Bewerbung schreiben
|
||||
**Aufwand**: 50-100 Mana (0,50-1€)
|
||||
- Stellenanzeige analysieren
|
||||
- Anschreiben generieren
|
||||
- Lebenslauf optimieren
|
||||
|
||||
### Geburtstagsrede
|
||||
**Aufwand**: 30 Mana (0,30€)
|
||||
- Persönliche Anekdoten einbauen
|
||||
- Humorvoll gestalten
|
||||
- Struktur erstellen
|
||||
|
||||
### Reiseplanung Italien
|
||||
**Aufwand**: 40-60 Mana (0,40-0,60€)
|
||||
- Route optimieren
|
||||
- Sehenswürdigkeiten recherchieren
|
||||
- Restaurant-Empfehlungen
|
||||
|
||||
## Häufige Fragen von Privatnutzern
|
||||
|
||||
**Muss ich ein Abo abschließen?**
|
||||
Nein! Sie kaufen Mana-Credits nur wenn Sie sie brauchen. Keine Verpflichtungen.
|
||||
|
||||
**Wie lange sind die Credits gültig?**
|
||||
Für immer! Ihre Mana-Credits verfallen niemals.
|
||||
|
||||
**Kann ich alle Features nutzen?**
|
||||
Ja! Sie haben Zugang zu allen Premium-Features aller Tools.
|
||||
|
||||
**Ist meine Privatsphäre geschützt?**
|
||||
Absolut! DSGVO-konform mit deutschen Servern. Ihre Daten werden nicht für Training verwendet.
|
||||
|
||||
**Was wenn ich mehr brauche?**
|
||||
Einfach nachkaufen! Größere Pakete haben bessere Preise.
|
||||
|
||||
## Der clevere Weg zu KI
|
||||
|
||||
Schluss mit ungenutzten Abos und verschwendetem Geld. Mit Mana nutzen Sie KI-Tools smart:
|
||||
- Wenn Sie sie brauchen
|
||||
- So viel Sie brauchen
|
||||
- Ohne Verpflichtungen
|
||||
|
||||
Starten Sie jetzt und entdecken Sie, wie einfach und günstig Premium-KI sein kann!
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
---
|
||||
title: Selbstständige
|
||||
description: KI-Tools ohne Fixkosten – perfekt für schwankende Auftragslage. Nutzen Sie Premium-Tools nur wenn Sie sie brauchen.
|
||||
icon: 💼
|
||||
benefits:
|
||||
- Keine monatlichen Fixkosten bei Auftragsflaute
|
||||
- Alle Premium-KI-Tools ohne einzelne Abos
|
||||
- Mana als Betriebsausgabe absetzbar
|
||||
- Skalierbar je nach Projektgröße
|
||||
- Volle Kostenkontrolle und Transparenz
|
||||
useCases:
|
||||
- Kundengespräche mit Memoro dokumentieren
|
||||
- Angebote und Rechnungen mit KI erstellen
|
||||
- Content für Marketing generieren
|
||||
- Übersetzungen für internationale Kunden
|
||||
- Projektdokumentation automatisieren
|
||||
testimonial:
|
||||
quote: "Als Freelancer schwankt meine Auslastung stark. Mit Mana zahle ich in ruhigen Monaten fast nichts und kann bei Großprojekten voll durchstarten."
|
||||
author: "Thomas Bauer"
|
||||
role: "Freelance Designer"
|
||||
company: ""
|
||||
pricing:
|
||||
special: false
|
||||
discount: ""
|
||||
details: "Flexible Mana-Pakete perfekt für variable Projektgrößen"
|
||||
order: 4
|
||||
---
|
||||
|
||||
## KI-Tools für moderne Freelancer
|
||||
|
||||
Als Selbstständiger kennen Sie das: Mal läuft's, mal nicht. Warum sollten Sie für KI-Tools zahlen, die Sie gerade nicht brauchen? Mit Mana nutzen Sie Premium-Tools genau dann, wenn Projekte anstehen.
|
||||
|
||||
### Die Herausforderung für Freelancer
|
||||
|
||||
- **Schwankende Einnahmen**: Fixkosten belasten in auftragsschwachen Zeiten
|
||||
- **Tool-Überfluss**: Für jede Aufgabe ein anderes Tool-Abo
|
||||
- **Projekt-Kalkulation**: Schwer zu kalkulieren bei monatlichen Abos
|
||||
- **Cashflow-Management**: Monatliche Abbuchungen stören die Liquidität
|
||||
|
||||
### Die Mana-Lösung
|
||||
|
||||
1. **Zahlen nach Bedarf**: Kaufen Sie Mana nur wenn Projekte anstehen
|
||||
2. **Projekt-Kalkulation**: Rechnen Sie Mana-Kosten direkt in Projekte ein
|
||||
3. **Keine Kündigungsfristen**: Pausieren Sie automatisch bei Auftragsflaute
|
||||
4. **Steuerlich absetzbar**: Mana-Käufe sind Betriebsausgaben
|
||||
|
||||
## Ihre KI-Assistenten im Business
|
||||
|
||||
### 📋 Kundenmanagement mit Memoro
|
||||
- **Meeting-Protokolle**: Kundengespräche automatisch dokumentieren
|
||||
- **Briefings erfassen**: Nie wieder wichtige Details vergessen
|
||||
- **Follow-ups**: Automatische Zusammenfassungen für Kunden
|
||||
- **Projekt-Historie**: Durchsuchbare Aufzeichnungen aller Gespräche
|
||||
|
||||
### 💰 Angebote & Rechnungen
|
||||
- **Angebotstexte**: Professionelle Formulierungen mit KI
|
||||
- **Leistungsbeschreibungen**: Detaillierte Projektbeschreibungen generieren
|
||||
- **Mehrsprachig**: Angebote für internationale Kunden übersetzen
|
||||
- **AGB-Check**: Vertragstexte prüfen und optimieren
|
||||
|
||||
### 📱 Marketing & Akquise
|
||||
- **Social Media**: Content für LinkedIn, Instagram & Co.
|
||||
- **Blog-Artikel**: SEO-optimierte Texte für Ihre Website
|
||||
- **Newsletter**: Regelmäßige Kundenkommunikation
|
||||
- **Portfolio**: Projektbeschreibungen professionell aufbereiten
|
||||
|
||||
### 🎨 Kreative Arbeit
|
||||
- **Konzepte**: Brainstorming und Ideengenerierung
|
||||
- **Visualisierungen**: Mockups und Grafiken erstellen
|
||||
- **Präsentationen**: Pitch-Decks für Kunden
|
||||
- **Variations**: Alternative Designs und Ansätze
|
||||
|
||||
## Praxisbeispiele
|
||||
|
||||
### Webdesigner
|
||||
- Kundenbrief mit Memoro aufnehmen (50 Mana)
|
||||
- Designkonzept mit ChatGPT entwickeln (30 Mana)
|
||||
- Mockups mit DALL-E erstellen (100 Mana)
|
||||
- **Projektkosten Mana: 1,80€** ➜ An Kunde weiterberechnen
|
||||
|
||||
### Berater
|
||||
- Workshop mit Memoro dokumentieren (200 Mana)
|
||||
- Analyse mit Claude erstellen (100 Mana)
|
||||
- Präsentation aufbereiten (50 Mana)
|
||||
- **Projektkosten Mana: 3,50€** ➜ In Tagessatz einkalkuliert
|
||||
|
||||
### Content Creator
|
||||
- Interview transkribieren (150 Mana)
|
||||
- Blog-Artikel generieren (80 Mana)
|
||||
- Social Media Posts erstellen (40 Mana)
|
||||
- **Projektkosten Mana: 2,70€** ➜ Teil der Content-Pauschale
|
||||
|
||||
## Kostenvergleich
|
||||
|
||||
**Traditionelle Tool-Abos (monatlich)**:
|
||||
- ChatGPT Plus: 20€
|
||||
- Jasper AI: 39€
|
||||
- DeepL Pro: 8€
|
||||
- Otter.ai: 17€
|
||||
- **Gesamt: 84€/Monat = 1.008€/Jahr**
|
||||
|
||||
**Mit Mana (beispielhaft)**:
|
||||
- Ruhige Monate: 0-20€
|
||||
- Normale Monate: 30-50€
|
||||
- Projekt-Monate: 80-150€
|
||||
- **Durchschnitt: ~40€/Monat = 480€/Jahr**
|
||||
- **Ersparnis: Über 50%!**
|
||||
|
||||
## Smarte Mana-Strategien
|
||||
|
||||
### 🎯 Projekt-Pakete
|
||||
Kalkulieren Sie Mana direkt in Ihre Angebote ein:
|
||||
- Kleines Projekt: +10€ Mana-Budget
|
||||
- Mittleres Projekt: +25€ Mana-Budget
|
||||
- Großprojekt: +50€ Mana-Budget
|
||||
|
||||
### 💡 Steuer-Tipp
|
||||
- Mana-Käufe sind Betriebsausgaben
|
||||
- Sammeln Sie Rechnungen für die Buchhaltung
|
||||
- Weisen Sie Kosten Projekten zu
|
||||
|
||||
### 🔄 Workflow-Optimierung
|
||||
1. **Morgens**: Mails mit KI beantworten (10 Mana)
|
||||
2. **Vormittags**: Projektarbeit mit Tools (30-50 Mana)
|
||||
3. **Nachmittags**: Content erstellen (20-30 Mana)
|
||||
4. **Tagesbudget**: ~60-90 Mana (0,60-0,90€)
|
||||
|
||||
## Beliebte Pakete für Selbstständige
|
||||
|
||||
### Starter-Paket
|
||||
- **2.500 Mana** für 24,99€
|
||||
- Perfekt für Einzelprojekte
|
||||
- Reicht für: ~2 Wochen normale Nutzung
|
||||
|
||||
### Profi-Paket
|
||||
- **10.000 Mana** für 95€ (5% Rabatt)
|
||||
- Ideal für regelmäßige Nutzung
|
||||
- Reicht für: 1-2 Monate Vollauslastung
|
||||
|
||||
### Business-Paket
|
||||
- **25.000 Mana** für 225€ (10% Rabatt)
|
||||
- Für intensive Projektphasen
|
||||
- Reicht für: 3-4 Monate oder Großprojekte
|
||||
|
||||
## Sofort durchstarten
|
||||
|
||||
1. **Account erstellen** – in 2 Minuten erledigt
|
||||
2. **Mana kaufen** – genau so viel wie Sie brauchen
|
||||
3. **Tools nutzen** – alle Premium-Features ohne Limits
|
||||
4. **Kosten weitergeben** – transparent an Kunden
|
||||
|
||||
Keine Vertragsbindung, keine Kündigungsfristen, keine bösen Überraschungen. Genau die Flexibilität, die Sie als Selbstständiger brauchen.
|
||||
173
apps/manacore/apps/landing/src/content/branchen/startups.md
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
---
|
||||
title: Startups
|
||||
description: Skalieren Sie Ihre KI-Nutzung mit Ihrem Wachstum – ohne starre Enterprise-Verträge und versteckte Kosten.
|
||||
icon: 🚀
|
||||
benefits:
|
||||
- Skalierbar von 2 bis 200 Mitarbeitern ohne Vertragsänderung
|
||||
- Keine Mindestabnahme oder Nutzeranzahl
|
||||
- Burn-Rate optimieren durch Pay-per-Use
|
||||
- Sofort alle Enterprise-Tools ohne Verhandlungen
|
||||
- Transparente Kosten für Investoren-Reports
|
||||
useCases:
|
||||
- Product Development mit KI-Unterstützung
|
||||
- Customer Interviews mit Memoro dokumentieren
|
||||
- Pitch Decks und Präsentationen erstellen
|
||||
- Market Research und Competitor Analysis
|
||||
- Team-Dokumentation und Knowledge Base
|
||||
testimonial:
|
||||
quote: "Wir sind in 6 Monaten von 3 auf 25 Mitarbeiter gewachsen. Mit traditionellen Lizenzen wäre das ein Verwaltungs-Nightmare gewesen. Mana skaliert einfach mit."
|
||||
author: "Jana Fischer"
|
||||
role: "Co-Founder & CEO"
|
||||
company: "TechVenture GmbH"
|
||||
pricing:
|
||||
special: true
|
||||
discount: "Startup-Programm verfügbar"
|
||||
details: "Spezielle Konditionen für Startups unter 3 Jahren mit VC-Backing"
|
||||
order: 5
|
||||
---
|
||||
|
||||
## KI-Power für schnelles Wachstum
|
||||
|
||||
Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen. Mit Mana bekommen Sie Enterprise-Grade KI-Tools ohne Enterprise-Bürokratie.
|
||||
|
||||
### Die Startup-Herausforderung
|
||||
|
||||
- **Unvorhersehbares Wachstum**: Heute 5 Leute, morgen 50
|
||||
- **Knappe Ressourcen**: Jeder Euro zählt für die Runway
|
||||
- **Tool-Explosion**: Jede Abteilung will andere Tools
|
||||
- **Admin-Overhead**: Keine Zeit für Lizenzverwaltung
|
||||
|
||||
### Die Mana-Lösung für Startups
|
||||
|
||||
1. **Sofort skalierbar**: Von MVP bis Series B ohne Vertragsänderung
|
||||
2. **Burn-Rate Control**: Zahlen Sie nur tatsächliche Nutzung
|
||||
3. **Zero Admin**: Neue Mitarbeiter sofort startklar
|
||||
4. **Full Stack**: Alle KI-Tools aus einer Hand
|
||||
|
||||
## KI für jede Growth-Phase
|
||||
|
||||
### 🎯 Pre-Seed & MVP Phase
|
||||
- **Ideen-Validierung**: Customer Discovery Interviews mit Memoro
|
||||
- **Prototyping**: Mockups und Demos mit KI erstellen
|
||||
- **Market Research**: Wettbewerbsanalyse und Trends
|
||||
- **Pitch Deck**: Investoren-Präsentationen optimieren
|
||||
|
||||
### 🚀 Seed & Product-Market Fit
|
||||
- **User Interviews**: Systematisch mit Memoro dokumentieren
|
||||
- **Feature Development**: KI-gestütztes Brainstorming
|
||||
- **Content Creation**: Landing Pages und Marketing
|
||||
- **Documentation**: Erste Prozesse festhalten
|
||||
|
||||
### 📈 Series A & Scaling
|
||||
- **Team Onboarding**: Schulungsmaterialien generieren
|
||||
- **Sales Enablement**: Pitch-Scripts und Demos
|
||||
- **Customer Success**: Support-Dokumentation
|
||||
- **Data Analysis**: Metriken und Reports
|
||||
|
||||
### 🎢 Series B & Beyond
|
||||
- **Internationalisierung**: Übersetzungen und Lokalisierung
|
||||
- **Process Automation**: Workflows mit KI optimieren
|
||||
- **Knowledge Management**: Company Wiki aufbauen
|
||||
- **Strategic Planning**: Marktanalysen und Forecasts
|
||||
|
||||
## Use Cases nach Teams
|
||||
|
||||
### 👥 Product Team
|
||||
- User Research Sessions transkribieren
|
||||
- PRDs mit KI-Unterstützung schreiben
|
||||
- Wireframes und Mockups generieren
|
||||
- A/B Test Hypothesen entwickeln
|
||||
|
||||
### 💰 Sales & Marketing
|
||||
- Sales Calls mit Memoro aufzeichnen
|
||||
- Email-Sequenzen optimieren
|
||||
- Social Media Content skalieren
|
||||
- SEO-optimierte Blogposts
|
||||
|
||||
### 🛠️ Engineering
|
||||
- Code-Dokumentation generieren
|
||||
- Architecture Decisions dokumentieren
|
||||
- Bug Reports analysieren
|
||||
- Technical Writing
|
||||
|
||||
### 📊 Operations
|
||||
- Meeting-Protokolle automatisieren
|
||||
- SOPs und Playbooks erstellen
|
||||
- Investor Updates verfassen
|
||||
- OKR Planning Sessions
|
||||
|
||||
## Kostenbeispiel für Wachstum
|
||||
|
||||
**10-Person Startup (traditionell)**:
|
||||
- 10× ChatGPT Plus: 200€/Monat
|
||||
- 5× Design-Tools: 150€/Monat
|
||||
- 3× Transcription: 60€/Monat
|
||||
- **Total: 410€/Monat**
|
||||
|
||||
**10-Person Startup (mit Mana)**:
|
||||
- Durchschnitt: 200-250€/Monat
|
||||
- **Ersparnis: ~40%**
|
||||
- **Plus**: Unbegrenzte Tool-Auswahl
|
||||
|
||||
**50-Person Scale-up (traditionell)**:
|
||||
- Enterprise-Lizenzen: 2.000-3.000€/Monat
|
||||
- Minimum User Requirements
|
||||
- Lange Vertragsverhandlungen
|
||||
|
||||
**50-Person Scale-up (mit Mana)**:
|
||||
- Durchschnitt: 800-1.200€/Monat
|
||||
- **Ersparnis: ~60%**
|
||||
- **Plus**: Sofort startbereit
|
||||
|
||||
## Startup-Programm Benefits
|
||||
|
||||
### 🎁 Welcome Package
|
||||
- 5.000 Bonus-Mana bei Anmeldung
|
||||
- Onboarding-Workshop für das Team
|
||||
- Dedizierter Startup Success Manager
|
||||
|
||||
### 💎 Growth Perks
|
||||
- Volume Discounts ab 10.000 Mana/Monat
|
||||
- Priority Support
|
||||
- Early Access zu neuen Features
|
||||
- Quarterly Business Reviews
|
||||
|
||||
### 🤝 Partner Network
|
||||
- Zugang zu anderen Startups im Netzwerk
|
||||
- Gemeinsame Best Practices
|
||||
- Tool-Empfehlungen
|
||||
- Community Events
|
||||
|
||||
## Success Stories
|
||||
|
||||
### FinTech Startup (Berlin)
|
||||
"Von der Idee zum ersten Kunden in 3 Monaten – Mana war dabei unser schweizer Taschenmesser für alles von User Research bis Pitch Deck."
|
||||
|
||||
### SaaS Scale-up (München)
|
||||
"Wir sparen nicht nur 70% unserer Tool-Kosten, sondern auch unzählige Stunden Admin-Aufwand."
|
||||
|
||||
### DeepTech Spin-off (Aachen)
|
||||
"Besonders Memoro hat unsere Forschungsinterviews revolutioniert. Was früher Tage dauerte, erledigen wir jetzt in Stunden."
|
||||
|
||||
## Quick Start für Startups
|
||||
|
||||
1. **Apply**: Bewerben Sie sich für das Startup-Programm
|
||||
2. **Verify**: Kurzer Check (Gründungsdatum, Funding)
|
||||
3. **Onboard**: Team-Workshop und Setup
|
||||
4. **Scale**: Wachsen Sie mit Mana
|
||||
|
||||
### Qualifikation für Startup-Programm
|
||||
- Gegründet in den letzten 3 Jahren
|
||||
- Weniger als 50 Mitarbeiter
|
||||
- VC-Backing oder Accelerator-Teilnahme
|
||||
- Tech-Fokus (B2B oder B2C)
|
||||
|
||||
## ROI für Investoren
|
||||
|
||||
Zeigen Sie Ihren Investoren:
|
||||
- **Reduzierte Burn-Rate**: Bis zu 50% weniger Tool-Kosten
|
||||
- **Höhere Produktivität**: Team arbeitet effizienter mit KI
|
||||
- **Skalierbarkeit**: Kosten wachsen linear mit Nutzung
|
||||
- **Transparenz**: Klare Reports für Board Meetings
|
||||
|
||||
Starten Sie heute und erleben Sie, wie Mana Ihr Startup-Leben einfacher macht. Keine Verträge, keine Verpflichtungen – nur pure Flexibilität für Ihr Wachstum.
|
||||
131
apps/manacore/apps/landing/src/content/branchen/studenten.md
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
---
|
||||
title: Studenten
|
||||
description: KI-Tools für dein Studium – bezahlbar, flexibel und ohne Abo-Falle. Perfekt für Hausarbeiten, Projekte und Prüfungsvorbereitung.
|
||||
icon: 📚
|
||||
benefits:
|
||||
- Keine monatlichen Fixkosten – zahle nur was du nutzt
|
||||
- Perfekt für unregelmäßige Nutzung während des Semesters
|
||||
- Zugang zu allen Premium-KI-Tools ohne einzelne Abos
|
||||
- Mana verfällt nie – nutze es wann du willst
|
||||
- Spezielle Studenten-Rabatte verfügbar
|
||||
useCases:
|
||||
- Vorlesungen mit Memoro aufzeichnen und zusammenfassen
|
||||
- Hausarbeiten recherchieren und strukturieren
|
||||
- Präsentationen mit KI-Unterstützung erstellen
|
||||
- Lernzusammenfassungen generieren
|
||||
- Übersetzungen für Fremdsprachenkurse
|
||||
testimonial:
|
||||
quote: "Statt 5 verschiedene Tool-Abos zu jonglieren, nutze ich jetzt nur noch Mana. Besonders in der Prüfungsphase spare ich mir viel Geld und Stress."
|
||||
author: "Lisa Müller"
|
||||
role: "Masterstudentin"
|
||||
company: "Uni Heidelberg"
|
||||
pricing:
|
||||
special: true
|
||||
discount: "Studenten-Tarif verfügbar"
|
||||
details: "Vergünstigte Mana-Pakete für Studierende mit gültigem Nachweis"
|
||||
order: 3
|
||||
---
|
||||
|
||||
## KI-Power für dein Studium
|
||||
|
||||
Schluss mit teuren Abos, die du nur in der Prüfungsphase brauchst! Mit Mana nutzt du KI-Tools genau dann, wenn du sie brauchst – ohne monatliche Verpflichtungen.
|
||||
|
||||
### Das kennst du sicher...
|
||||
|
||||
- **Teure Abos**: 20€/Monat für ChatGPT Plus, aber du nutzt es nur für die Hausarbeit
|
||||
- **Tool-Chaos**: Für jede Aufgabe ein anderes Tool mit eigenem Account
|
||||
- **Geldverschwendung**: Abos laufen weiter, obwohl Semesterferien sind
|
||||
- **Eingeschränkter Zugang**: Die Uni-Lizenzen sind immer ausgebucht
|
||||
|
||||
### Mana macht's besser
|
||||
|
||||
1. **Pay-per-Use**: Zahle nur für das, was du wirklich nutzt
|
||||
2. **Alle Tools**: Ein Account für ChatGPT, Claude, DALL-E und mehr
|
||||
3. **Kein Verfall**: Deine Credits bleiben erhalten – auch über die Semesterferien
|
||||
4. **Studentenrabatte**: Spezielle Konditionen mit Studiennachweis
|
||||
|
||||
## Deine KI-Helfer im Studium
|
||||
|
||||
### 📝 Für Hausarbeiten & Essays
|
||||
- **Recherche**: Lass dir Literatur zusammenfassen und Quellen finden
|
||||
- **Gliederung**: Strukturiere deine Arbeit mit KI-Unterstützung
|
||||
- **Schreibhilfe**: Überwinde Schreibblockaden und formuliere wissenschaftlich
|
||||
- **Zitiercheck**: Prüfe deine Zitate und Formatierung
|
||||
|
||||
### 🎙️ Für Vorlesungen mit Memoro
|
||||
- **Aufzeichnen**: Nimm Vorlesungen auf und lass sie transkribieren
|
||||
- **Zusammenfassen**: Erhalte die wichtigsten Punkte auf einen Blick
|
||||
- **Durchsuchen**: Finde schnell bestimmte Themen in deinen Aufnahmen
|
||||
- **Teilen**: Erstelle Lerngruppen und teile Zusammenfassungen
|
||||
|
||||
### 📊 Für Präsentationen
|
||||
- **Foliendesign**: Erstelle professionelle Slides mit KI
|
||||
- **Visualisierungen**: Generiere Grafiken und Diagramme
|
||||
- **Sprechernotizen**: Lass dir Moderationstexte erstellen
|
||||
- **Übersetzungen**: Präsentiere mehrsprachig
|
||||
|
||||
### 🧠 Für die Prüfungsvorbereitung
|
||||
- **Lernkarten**: Erstelle Karteikarten aus deinen Unterlagen
|
||||
- **Übungsfragen**: Generiere Testfragen zum Üben
|
||||
- **Zusammenfassungen**: Komprimiere Skripte auf das Wesentliche
|
||||
- **Erklärungen**: Lass dir komplexe Themen einfach erklären
|
||||
|
||||
## Kostenbeispiel für ein Semester
|
||||
|
||||
**Traditionell (3 Tool-Abos)**:
|
||||
- ChatGPT Plus: 20€ × 6 Monate = 120€
|
||||
- Grammarly: 12€ × 6 Monate = 72€
|
||||
- DeepL Pro: 8€ × 6 Monate = 48€
|
||||
- **Gesamt: 240€**
|
||||
|
||||
**Mit Mana**:
|
||||
- Einmalkauf: 50€ für 5.000 Mana
|
||||
- Reicht für: ~100 Stunden Memoro ODER ~500 ChatGPT-Sessions
|
||||
- **Ersparnis: 190€ pro Semester!**
|
||||
|
||||
## Beliebte Mana-Pakete für Studis
|
||||
|
||||
### 🎯 Starter-Paket
|
||||
- **1.000 Mana** für 9,99€
|
||||
- Perfekt zum Ausprobieren
|
||||
- Reicht für: 1-2 Hausarbeiten
|
||||
|
||||
### 📚 Semester-Paket
|
||||
- **5.000 Mana** für 45€ (statt 50€)
|
||||
- Ideal für ein ganzes Semester
|
||||
- Reicht für: Alle Vorlesungen + Hausarbeiten
|
||||
|
||||
### 🚀 Master-Paket
|
||||
- **10.000 Mana** für 85€ (statt 100€)
|
||||
- Für Thesis und große Projekte
|
||||
- Reicht für: Komplette Abschlussarbeit
|
||||
|
||||
## So startest du
|
||||
|
||||
1. **Registriere dich** mit deiner Uni-Email
|
||||
2. **Verifiziere** deinen Studentenstatus
|
||||
3. **Wähle** dein Mana-Paket
|
||||
4. **Nutze** alle KI-Tools nach Bedarf
|
||||
|
||||
## Tipps zum Mana-Sparen
|
||||
|
||||
- Nutze Zusammenfassungen statt vollständige Transkripte
|
||||
- Verwende kürzere Prompts bei ChatGPT
|
||||
- Kombiniere Tools clever (erst Memoro, dann ChatGPT)
|
||||
- Teile Accounts mit deiner Lerngruppe (erlaubt!)
|
||||
|
||||
## FAQ für Studierende
|
||||
|
||||
**Kann ich Mana mit Kommilitonen teilen?**
|
||||
Ja! Ihr könnt einen gemeinsamen Account für Gruppenprojekte nutzen.
|
||||
|
||||
**Verfallen meine Credits in den Semesterferien?**
|
||||
Nein! Deine Mana-Credits bleiben für immer erhalten.
|
||||
|
||||
**Gibt es einen Studententarif?**
|
||||
Ja! Mit gültigem Studiennachweis erhältst du bis zu 15% Rabatt.
|
||||
|
||||
**Welche Unis nutzen schon Mana?**
|
||||
Über 50 deutsche Hochschulen, Tendenz steigend!
|
||||
|
||||
Starte jetzt und erlebe, wie KI dein Studium revolutioniert – ohne Abo-Stress und Geldverschwendung!
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
---
|
||||
title: Universitäten
|
||||
description: Die flexible KI-Lösung für Forschung und Lehre – ohne komplizierte Lizenzverwaltung und mit Education-Rabatten.
|
||||
icon: 🎓
|
||||
benefits:
|
||||
- Spezielle Education-Tarife mit bis zu 50% Rabatt
|
||||
- Flexible Budgets für Semester und Projekte
|
||||
- Unbegrenzte Nutzer für Studierende und Mitarbeiter
|
||||
- DSGVO-konforme Lösung für sensible Forschungsdaten
|
||||
- Einfache Kostenzuordnung zu Projekten und Lehrstühlen
|
||||
useCases:
|
||||
- Forschungsinterviews transkribieren mit Memoro
|
||||
- Literaturrecherche mit KI-Unterstützung
|
||||
- Datenanalyse für wissenschaftliche Arbeiten
|
||||
- Vorlesungsaufzeichnungen automatisch zusammenfassen
|
||||
- Multimediale Lehrmaterialien erstellen
|
||||
testimonial:
|
||||
quote: "Endlich können alle unsere Doktoranden bei Bedarf auf KI-Tools zugreifen, ohne dass wir für jeden eine eigene Lizenz kaufen müssen. Das hat unsere Forschungseffizienz enorm gesteigert."
|
||||
author: "Prof. Dr. Sarah Weber"
|
||||
role: "Forschungsleiterin"
|
||||
company: "TU München"
|
||||
pricing:
|
||||
special: true
|
||||
discount: "50% Education-Rabatt"
|
||||
details: "Spezielle Konditionen für Hochschulen und Forschungseinrichtungen"
|
||||
order: 2
|
||||
---
|
||||
|
||||
## KI-Tools für moderne Hochschulen
|
||||
|
||||
Die Digitalisierung der Hochschullandschaft erfordert flexible Lösungen. Mit Mana erhalten Universitäten Zugang zu allen wichtigen KI-Tools – ohne die Komplexität traditioneller Lizenzmodelle.
|
||||
|
||||
### Herausforderungen im Hochschulbereich
|
||||
|
||||
- **Schwankende Nutzerzahlen**: Semesterbeginn vs. Semesterferien
|
||||
- **Diverse Nutzergruppen**: Professoren, Mitarbeiter, Doktoranden, Studierende
|
||||
- **Projektbasierte Arbeit**: Temporäre Teams mit unterschiedlichen Anforderungen
|
||||
- **Knappe Budgets**: Jeder Euro muss optimal eingesetzt werden
|
||||
|
||||
### Die Mana-Lösung für Hochschulen
|
||||
|
||||
1. **Education-Rabatte**: Bis zu 50% Nachlass auf alle Tarife
|
||||
2. **Flexible Kontingente**: Anpassung an Semesterzyklen
|
||||
3. **Domain-Verwaltung**: Automatischer Zugang für alle mit Uni-Email
|
||||
4. **Projektbudgets**: Separate Mana-Pools für Forschungsprojekte
|
||||
|
||||
## Anwendungsfälle in der Praxis
|
||||
|
||||
### 🔬 Forschung
|
||||
- **Qualitative Forschung**: Interviews mit Memoro transkribieren und analysieren
|
||||
- **Literaturarbeit**: KI-gestützte Zusammenfassungen von Papers
|
||||
- **Datenanalyse**: Statistische Auswertungen und Visualisierungen
|
||||
- **Publikationen**: Unterstützung beim wissenschaftlichen Schreiben
|
||||
|
||||
### 📚 Lehre
|
||||
- **Vorlesungsaufzeichnungen**: Automatische Transkripte für Studierende
|
||||
- **Lehrmaterialien**: Erstellung von Präsentationen und Übungen
|
||||
- **Sprachkurse**: KI-Tools für Übersetzungen und Sprachanalyse
|
||||
- **E-Learning**: Interaktive Inhalte mit KI generieren
|
||||
|
||||
### 🎯 Verwaltung
|
||||
- **Sitzungsprotokolle**: Automatische Dokumentation von Gremiensitzungen
|
||||
- **Übersetzungen**: Internationale Dokumente und Korrespondenz
|
||||
- **Berichtswesen**: Jahresberichte und Statistiken erstellen
|
||||
- **Kommunikation**: Newsletter und Pressemitteilungen optimieren
|
||||
|
||||
## Spezielle Features für Hochschulen
|
||||
|
||||
### Datenschutz & Compliance
|
||||
- DSGVO-konforme Verarbeitung auf deutschen Servern
|
||||
- Keine Nutzung der Daten für KI-Training
|
||||
- Verschlüsselte Übertragung sensibler Forschungsdaten
|
||||
- Compliance mit Hochschul-IT-Richtlinien
|
||||
|
||||
### Verwaltung & Integration
|
||||
- **Shibboleth/SAML**: Integration in bestehende Authentifizierungssysteme
|
||||
- **Kostenstellen**: Zuordnung zu Lehrstühlen und Projekten
|
||||
- **Reporting**: Detaillierte Nutzungsberichte für Controlling
|
||||
- **API-Zugang**: Integration in Campus-Management-Systeme
|
||||
|
||||
## Success Stories
|
||||
|
||||
### Universität Frankfurt
|
||||
"Mit Mana konnten wir die KI-Nutzung demokratisieren. Jeder Forschende hat nun Zugang zu modernsten Tools, ohne dass wir unser Budget sprengen."
|
||||
|
||||
### RWTH Aachen
|
||||
"Die flexible Abrechnung passt perfekt zu unseren Projektzyklen. Wir zahlen nur, was wir wirklich nutzen."
|
||||
|
||||
### Humboldt-Universität Berlin
|
||||
"Besonders in der qualitativen Forschung hat Memoro unsere Arbeit revolutioniert. Interviews werden in Minuten transkribiert statt in Stunden."
|
||||
|
||||
## Kostenbeispiel
|
||||
|
||||
**Traditionell**:
|
||||
- 100 ChatGPT-Lizenzen für die Fakultät: 2.000€/Monat
|
||||
- Tatsächliche Nutzung: Nur 30-40 aktive Nutzer
|
||||
|
||||
**Mit Mana Education**:
|
||||
- Unbegrenzte Nutzer
|
||||
- Durchschnittliche Kosten: 600-800€/Monat
|
||||
- **Ersparnis: Über 60%**
|
||||
|
||||
## Pilotprojekt starten
|
||||
|
||||
Testen Sie Mana kostenlos mit Ihrer Fakultät oder Forschungsgruppe. Wir unterstützen Sie beim Onboarding und bieten spezielle Workshops für den akademischen Bereich.
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: Unternehmen
|
||||
description: Optimieren Sie Ihre KI-Ausgaben und geben Sie Ihrem Team die Flexibilität, die es braucht – ohne starre Lizenzen.
|
||||
icon: 🏢
|
||||
benefits:
|
||||
- Keine ungenutzten Lizenzen mehr – zahlen Sie nur für tatsächliche Nutzung
|
||||
- Unbegrenzte Nutzeranzahl ohne Mehrkosten
|
||||
- Detaillierte Nutzungsberichte für alle Abteilungen
|
||||
- Einfache Budgetkontrolle und Kostenzuordnung
|
||||
- DSGVO-konforme Lösung mit deutschen Servern
|
||||
useCases:
|
||||
- Meeting-Protokolle mit Memoro automatisieren
|
||||
- Kundengespräche transkribieren und analysieren
|
||||
- Marketing-Content mit KI-Tools erstellen
|
||||
- Datenanalyse und Reporting optimieren
|
||||
- Interne Schulungen und Dokumentation
|
||||
testimonial:
|
||||
quote: "Früher hatten wir 50 ChatGPT-Lizenzen, von denen nur 20 aktiv genutzt wurden. Mit Mana zahlen wir 60% weniger und jeder im Team kann bei Bedarf auf KI zugreifen."
|
||||
author: "Michael Schmidt"
|
||||
role: "IT-Leiter"
|
||||
company: "TechCorp GmbH"
|
||||
pricing:
|
||||
special: true
|
||||
discount: "Mengenrabatte ab 10 Nutzern"
|
||||
details: "Individuelle Enterprise-Tarife und dedizierte Betreuung für größere Teams"
|
||||
order: 1
|
||||
---
|
||||
|
||||
## Warum Mana für Ihr Unternehmen?
|
||||
|
||||
In der modernen Arbeitswelt sind KI-Tools unverzichtbar geworden. Doch die traditionelle Lizenzierung führt zu Verschwendung und Frustration. Mit Mana revolutionieren Sie die Art, wie Ihr Unternehmen KI nutzt.
|
||||
|
||||
### Das Problem mit traditionellen Lizenzen
|
||||
|
||||
- **Starre Nutzeranzahl**: Sie kaufen 50 Lizenzen, aber nur 20 Mitarbeiter nutzen sie aktiv
|
||||
- **Monatliche Fixkosten**: Jeden Monat zahlen Sie für ungenutzte Zugänge
|
||||
- **Komplexe Verwaltung**: Wer hat welche Lizenz? Wer braucht Zugang?
|
||||
- **Keine Flexibilität**: Projektteams können nicht spontan KI-Tools nutzen
|
||||
|
||||
### Die Mana-Lösung
|
||||
|
||||
Mit unserem Credit-System lösen sich diese Probleme in Luft auf:
|
||||
|
||||
1. **Pay-per-Use**: Zahlen Sie nur für die tatsächliche Nutzung
|
||||
2. **Unbegrenzte Nutzer**: Jeder im Team kann bei Bedarf zugreifen
|
||||
3. **Transparente Kosten**: Detaillierte Reports zeigen genau, wer was nutzt
|
||||
4. **Flexible Budgets**: Verteilen Sie Mana-Credits nach Bedarf
|
||||
|
||||
## Perfekt für verschiedene Abteilungen
|
||||
|
||||
### 💼 Vertrieb & Kundenservice
|
||||
- Kundengespräche mit Memoro aufzeichnen und analysieren
|
||||
- Automatische Gesprächszusammenfassungen erstellen
|
||||
- Follow-up E-Mails mit KI verfassen
|
||||
|
||||
### 📊 Marketing & Content
|
||||
- Social Media Posts mit KI generieren
|
||||
- Bilder und Grafiken mit DALL-E erstellen
|
||||
- SEO-optimierte Texte schreiben
|
||||
|
||||
### 🔧 IT & Entwicklung
|
||||
- Code-Reviews mit KI-Unterstützung
|
||||
- Dokumentation automatisch generieren
|
||||
- Debugging und Optimierung
|
||||
|
||||
### 📈 Management & Strategie
|
||||
- Marktanalysen mit KI-Tools durchführen
|
||||
- Berichte und Präsentationen erstellen
|
||||
- Datenvisualisierungen generieren
|
||||
|
||||
## Enterprise-Features
|
||||
|
||||
- **SSO-Integration**: Nahtlose Einbindung in Ihre IT-Infrastruktur
|
||||
- **Dedizierte Betreuung**: Persönlicher Ansprechpartner für Ihr Team
|
||||
- **Schulungen**: Onboarding und Workshops für maximale Produktivität
|
||||
- **API-Zugang**: Integration in eigene Workflows und Tools
|
||||
- **Compliance**: DSGVO-konform mit Servern in Deutschland
|
||||
|
||||
## ROI-Rechner
|
||||
|
||||
Sparen Sie durchschnittlich 40-60% Ihrer aktuellen KI-Tool-Kosten:
|
||||
|
||||
- **Vorher**: 50 ChatGPT-Lizenzen × 20€ = 1.000€/Monat
|
||||
- **Mit Mana**: Durchschnittlich 400-600€/Monat bei gleicher Nutzung
|
||||
- **Ihre Ersparnis**: 400-600€ monatlich
|
||||
|
||||
## Starten Sie noch heute
|
||||
|
||||
Testen Sie Mana unverbindlich mit Ihrem Team. Keine Kreditkarte erforderlich, keine versteckten Kosten. Erleben Sie die Zukunft der KI-Nutzung in Unternehmen.
|
||||
185
apps/manacore/apps/landing/src/content/branchen/vereine.md
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
---
|
||||
title: Vereine
|
||||
description: KI-Tools für Vereine und gemeinnützige Organisationen – ohne teure Abos und mit speziellen Non-Profit-Konditionen.
|
||||
icon: 🤝
|
||||
benefits:
|
||||
- Spezielle Non-Profit-Rabatte bis zu 40%
|
||||
- Keine Mindestnutzeranzahl oder Fixkosten
|
||||
- Perfekt für ehrenamtliche Strukturen
|
||||
- Transparente Abrechnung für Kassenführung
|
||||
- DSGVO-konform für Mitgliederdaten
|
||||
useCases:
|
||||
- Vorstandssitzungen mit Memoro protokollieren
|
||||
- Mitgliederversammlungen dokumentieren
|
||||
- Newsletter und Vereinskommunikation
|
||||
- Veranstaltungsplanung mit KI-Unterstützung
|
||||
- Förderanträge professionell formulieren
|
||||
testimonial:
|
||||
quote: "Als kleiner Sportverein haben wir kein Budget für teure Software. Mit Mana nutzen wir KI-Tools nur wenn wir sie brauchen – zum Beispiel für die Jahreshauptversammlung oder Förderanträge."
|
||||
author: "Maria Hoffmann"
|
||||
role: "1. Vorsitzende"
|
||||
company: "TSV Bergheim e.V."
|
||||
pricing:
|
||||
special: true
|
||||
discount: "Non-Profit-Rabatt bis 40%"
|
||||
details: "Vergünstigte Konditionen für eingetragene Vereine und gemeinnützige Organisationen"
|
||||
order: 6
|
||||
---
|
||||
|
||||
## KI-Power für Ihr Vereinsleben
|
||||
|
||||
Vereine leben vom Engagement ihrer Mitglieder – nicht von teuren Software-Abos. Mit Mana bekommen Sie professionelle KI-Tools zu Konditionen, die zu Ihrem Budget passen.
|
||||
|
||||
### Die Herausforderung für Vereine
|
||||
|
||||
- **Knappe Kassen**: Jeder Euro zählt für die Vereinsarbeit
|
||||
- **Ehrenamtliche Strukturen**: Niemand hat Zeit für komplizierte Tools
|
||||
- **Wechselnde Verantwortliche**: Vorstandswechsel alle paar Jahre
|
||||
- **Dokumentationspflichten**: Protokolle, Berichte, Anträge
|
||||
|
||||
### Die Mana-Lösung für Vereine
|
||||
|
||||
1. **Non-Profit-Rabatte**: Bis zu 40% Nachlass für e.V.
|
||||
2. **Keine Fixkosten**: Nutzen Sie KI nur wenn nötig
|
||||
3. **Einfache Handhabung**: Auch für nicht-technikaffine Mitglieder
|
||||
4. **Flexible Nutzung**: Von der JHV bis zum Sommerfest
|
||||
|
||||
## Praktische Anwendungen im Vereinsalltag
|
||||
|
||||
### 📋 Protokolle & Dokumentation mit Memoro
|
||||
- **Vorstandssitzungen**: Automatische Protokollerstellung
|
||||
- **Mitgliederversammlungen**: Rechtssichere Dokumentation
|
||||
- **Arbeitskreise**: Ergebnisse festhalten und verteilen
|
||||
- **Beschlüsse**: Durchsuchbares Archiv aller Entscheidungen
|
||||
|
||||
### 📧 Mitgliederkommunikation
|
||||
- **Newsletter**: Professionelle Texte ohne Agentur
|
||||
- **Einladungen**: Ansprechende Formulierungen
|
||||
- **Jahresberichte**: Strukturiert und leserfreundlich
|
||||
- **Social Media**: Regelmäßige Updates für Facebook & Co.
|
||||
|
||||
### 💰 Förderung & Finanzen
|
||||
- **Förderanträge**: Überzeugende Projektbeschreibungen
|
||||
- **Sponsorenanschreiben**: Professionelle Akquise
|
||||
- **Kassenberichte**: Verständlich aufbereitet
|
||||
- **Verwendungsnachweise**: Korrekt formuliert
|
||||
|
||||
### 🎉 Veranstaltungsorganisation
|
||||
- **Programmhefte**: Texte und Beschreibungen
|
||||
- **Pressemitteilungen**: Mediengerechte Aufbereitung
|
||||
- **Plakate & Flyer**: Werbetexte generieren
|
||||
- **Dokumentation**: Veranstaltungen für Chronik festhalten
|
||||
|
||||
## Speziell für verschiedene Vereinsarten
|
||||
|
||||
### ⚽ Sportvereine
|
||||
- Spielberichte automatisch erstellen
|
||||
- Trainingsplanungen dokumentieren
|
||||
- Mitgliederanwerbung optimieren
|
||||
- Sponsorenpräsentationen aufwerten
|
||||
|
||||
### 🎵 Kulturvereine
|
||||
- Konzertankündigungen verfassen
|
||||
- Programmtexte schreiben
|
||||
- Förderanträge für Kulturprojekte
|
||||
- Pressemappe zusammenstellen
|
||||
|
||||
### 🌱 Umwelt- & Sozialvereine
|
||||
- Projektdokumentationen erstellen
|
||||
- Kampagnentexte entwickeln
|
||||
- Spendenaufrufe formulieren
|
||||
- Impact-Reports generieren
|
||||
|
||||
### 🏘️ Bürgervereine
|
||||
- Bürgerinitiativen dokumentieren
|
||||
- Petitionen professionell formulieren
|
||||
- Stadtteilzeitungen texten
|
||||
- Behördenkommunikation verbessern
|
||||
|
||||
## Kostenbeispiel für Vereine
|
||||
|
||||
**Traditionelle Lösung**:
|
||||
- Office-Paket: 10€/Monat
|
||||
- Protokoll-Software: 15€/Monat
|
||||
- Newsletter-Tool: 20€/Monat
|
||||
- **Gesamt: 540€/Jahr**
|
||||
|
||||
**Mit Mana Non-Profit**:
|
||||
- Durchschnittliche Nutzung: 15-30€/Monat
|
||||
- Nur bei Bedarf (z.B. JHV, Förderanträge)
|
||||
- **Geschätzt: 150-200€/Jahr**
|
||||
- **Ersparnis: Über 60%!**
|
||||
|
||||
## So funktioniert's für Ihren Verein
|
||||
|
||||
### 1. Vereinsnachweis einreichen
|
||||
- Kopie der Satzung oder Vereinsregisterauszug
|
||||
- Gemeinnützigkeitsbescheinigung (falls vorhanden)
|
||||
- Kurze Beschreibung der Vereinsarbeit
|
||||
|
||||
### 2. Non-Profit-Account aktivieren
|
||||
- Automatischer Rabatt auf alle Mana-Käufe
|
||||
- Spezielle Vereins-Features
|
||||
- Mehrere Zugänge für Vorstandsmitglieder
|
||||
|
||||
### 3. Flexibel nutzen
|
||||
- Mana-Budget vom Kassenwart verwalten
|
||||
- Zugänge für verschiedene Funktionsträger
|
||||
- Nutzung je nach Bedarf und Anlass
|
||||
|
||||
## Beliebte Mana-Pakete für Vereine
|
||||
|
||||
### 🌱 Starter-Paket
|
||||
- **500 Mana** für 2,99€ (statt 4,99€)
|
||||
- Perfekt für kleine Vereine
|
||||
- Reicht für: 2-3 Protokolle oder 1 Förderantrag
|
||||
|
||||
### 🌟 Vereins-Paket
|
||||
- **2.500 Mana** für 14,99€ (statt 24,99€)
|
||||
- Ideal für regelmäßige Nutzung
|
||||
- Reicht für: Ein Vereinsjahr mit allen Sitzungen
|
||||
|
||||
### 🏆 Aktiv-Paket
|
||||
- **5.000 Mana** für 29,99€ (statt 49,99€)
|
||||
- Für aktive Vereine mit vielen Projekten
|
||||
- Reicht für: Ganzjährige intensive Nutzung
|
||||
|
||||
## Tipps für die Vereinsarbeit mit KI
|
||||
|
||||
### 📝 Protokolle optimieren
|
||||
1. Sitzung mit Memoro aufzeichnen
|
||||
2. Automatisches Protokoll generieren
|
||||
3. Wichtige Beschlüsse hervorheben
|
||||
4. Als PDF für alle Mitglieder
|
||||
|
||||
### 💡 Förderanträge meistern
|
||||
1. Projektidee grob skizzieren
|
||||
2. Mit KI professionell ausformulieren
|
||||
3. Förderkritierien einarbeiten lassen
|
||||
4. Erfolgschancen deutlich steigern
|
||||
|
||||
### 📢 Öffentlichkeitsarbeit
|
||||
1. Veranstaltungen kurz beschreiben
|
||||
2. Pressemitteilung generieren lassen
|
||||
3. Social-Media-Posts erstellen
|
||||
4. Reichweite vergrößern
|
||||
|
||||
## Häufige Fragen von Vereinen
|
||||
|
||||
**Können mehrere Vorstandsmitglieder den Account nutzen?**
|
||||
Ja! Sie können Zugänge für verschiedene Funktionsträger einrichten.
|
||||
|
||||
**Was passiert bei Vorstandswechsel?**
|
||||
Der Account bleibt beim Verein. Zugänge können einfach übertragen werden.
|
||||
|
||||
**Gilt der Rabatt dauerhaft?**
|
||||
Ja, solange Ihr Verein gemeinnützig ist, gilt der Non-Profit-Rabatt.
|
||||
|
||||
**Können wir eine Spendenquittung bekommen?**
|
||||
Nein, aber Sie erhalten eine ordentliche Rechnung für Ihre Buchhaltung.
|
||||
|
||||
## Gemeinsam mehr erreichen
|
||||
|
||||
Mit Mana können sich Vereine auf das konzentrieren, was wirklich zählt: Ihre Mission. Überlassen Sie die professionelle Dokumentation und Kommunikation der KI – bezahlbar, flexibel und ohne Risiko.
|
||||
|
||||
Starten Sie noch heute und erleben Sie, wie KI Ihre Vereinsarbeit erleichtert!
|
||||
44
apps/manacore/apps/landing/src/content/clients/edisconet.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
company: edisconet AG
|
||||
logo: /images/clients/edisconet-Schweiz-Unternehmen-Zuerich-Logo-Mana-Manacore-AI.png
|
||||
industry: IT & Beratung
|
||||
size: startup
|
||||
location: Zürich, Schweiz
|
||||
testimonial:
|
||||
quote: "Als IT-Dienstleister müssen wir technologisch immer einen Schritt voraus sein. Mit Mana können wir unseren Kunden modernste KI-Lösungen anbieten und gleichzeitig unsere eigenen Prozesse optimieren."
|
||||
author: Marco Brunner
|
||||
role: CEO
|
||||
image: /images/clients/marco-brunner.jpg
|
||||
stats:
|
||||
- value: "75"
|
||||
label: "Mitarbeiter"
|
||||
- value: "3x"
|
||||
label: "Produktivitätssteigerung"
|
||||
- value: "60%"
|
||||
label: "Weniger Entwicklungszeit"
|
||||
challenge: "Als innovatives Startup musste edisconet mit den KI-Capabilities großer Konzerne mithalten, ohne deren Budgets für teure Enterprise-Lizenzen."
|
||||
solution: "Mana als zentrale KI-Plattform für interne Nutzung und Kundenprojekte mit flexibler Credit-Verwaltung pro Projekt."
|
||||
results:
|
||||
- "Drastische Reduzierung der Entwicklungszeiten"
|
||||
- "Neue KI-basierte Dienstleistungen im Portfolio"
|
||||
- "Höhere Kundenzufriedenheit durch schnellere Lieferung"
|
||||
- "Wettbewerbsvorteil gegenüber größeren Beratungshäusern"
|
||||
manaUsage:
|
||||
monthlyCredits: 50000
|
||||
mainTools: ["ChatGPT", "Claude", "GitHub Copilot", "Cursor", "Perplexity"]
|
||||
teamSize: 75
|
||||
featured: true
|
||||
order: 4
|
||||
---
|
||||
|
||||
## Die Herausforderung
|
||||
|
||||
edisconet steht als agiles Startup im direkten Wettbewerb mit etablierten IT-Beratungshäusern. Die Herausforderung bestand darin, modernste KI-Tools effizient zu nutzen, ohne das Budget mit zahlreichen Enterprise-Lizenzen zu sprengen. Gleichzeitig mussten die Tools flexibel für verschiedene Kundenprojekte einsetzbar sein.
|
||||
|
||||
## Die Lösung
|
||||
|
||||
Mit Mana fand edisconet die perfekte Lösung: Ein einziges Credit-System für alle KI-Tools, das sich flexibel auf verschiedene Projekte und Teams aufteilen lässt. Die transparente Abrechnung ermöglicht es, KI-Kosten direkt an Kunden weiterzugeben oder in Projektkalkulationen einzubeziehen.
|
||||
|
||||
## Die Ergebnisse
|
||||
|
||||
Seit der Einführung von Mana konnte edisconet die Entwicklungszeiten um 60% reduzieren und die Produktivität verdreifachen. Das Unternehmen hat neue KI-basierte Dienstleistungen in sein Portfolio aufgenommen und kann nun auch bei Großprojekten mit den Big Playern mithalten. Die Kundenzufriedenheit ist durch schnellere Lieferzeiten und innovative Lösungen deutlich gestiegen.
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
company: Hochschule Luzern
|
||||
logo: /images/clients/HSLU-Hochschule-Luzern-Logo-Universitaet-Mana-Manacore-AI.png
|
||||
industry: Bildung & Forschung
|
||||
size: enterprise
|
||||
location: Luzern, Schweiz
|
||||
testimonial:
|
||||
quote: "Mit Mana haben wir eine kosteneffiziente Lösung gefunden, die unseren Studierenden und Forschenden Zugang zu modernsten KI-Tools ermöglicht. Die Flexibilität des Credit-Systems ist perfekt für unsere vielfältigen Anforderungen."
|
||||
author: Prof. Dr. Michael Steiner
|
||||
role: Prorektor Forschung
|
||||
image: /images/clients/prof-steiner.jpg
|
||||
stats:
|
||||
- value: "1.800"
|
||||
label: "Aktive Nutzer"
|
||||
- value: "40%"
|
||||
label: "Kosteneinsparung"
|
||||
- value: "6"
|
||||
label: "Departemente"
|
||||
challenge: "Die Hochschule Luzern benötigte eine einheitliche KI-Plattform für verschiedene Departemente mit unterschiedlichen Anforderungen - von Design bis Informatik."
|
||||
solution: "Implementierung von Mana mit departementspezifischen Kontingenten und zentraler Verwaltung durch die IT-Abteilung."
|
||||
results:
|
||||
- "Standardisierter KI-Zugang über alle Departemente"
|
||||
- "Erhöhte Forschungsproduktivität"
|
||||
- "Verbesserte Lehrmethoden mit KI-Integration"
|
||||
- "Transparente Kostenübersicht pro Departement"
|
||||
manaUsage:
|
||||
monthlyCredits: 350000
|
||||
mainTools: ["ChatGPT", "Claude", "Midjourney", "DALL-E", "GitHub Copilot"]
|
||||
teamSize: 1800
|
||||
featured: true
|
||||
order: 2
|
||||
---
|
||||
|
||||
## Die Herausforderung
|
||||
|
||||
Die Hochschule Luzern stand vor der Herausforderung, ihren über 1.800 Studierenden und Mitarbeitenden aus sechs verschiedenen Departementen einen einheitlichen und kosteneffizienten Zugang zu KI-Tools zu ermöglichen. Jedes Departement hatte unterschiedliche Anforderungen - vom Design-Departement mit Fokus auf Bildgenerierung bis zur Informatik mit Schwerpunkt auf Code-Assistenz.
|
||||
|
||||
## Die Lösung
|
||||
|
||||
Mit Mana implementierte die HSLU eine zentrale KI-Plattform mit departementspezifischen Kontingenten. Die IT-Abteilung verwaltet die Credits zentral und kann flexibel auf die Bedürfnisse der einzelnen Departemente reagieren. Besonders geschätzt wird die transparente Kostenübersicht und die Möglichkeit, Credits bei Bedarf umzuverteilen.
|
||||
|
||||
## Die Ergebnisse
|
||||
|
||||
Seit der Einführung von Mana konnte die Hochschule Luzern ihre KI-bezogenen Kosten um 40% senken bei gleichzeitiger Steigerung der Nutzung. Die standardisierte Plattform ermöglicht es, Best Practices zwischen den Departementen zu teilen und innovative Lehrmethoden zu entwickeln. Die Forschungsproduktivität hat sich messbar erhöht, und die Studierenden profitieren von modernsten Tools in ihrer Ausbildung.
|
||||
164
apps/manacore/apps/landing/src/content/clients/mindmed.md
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
---
|
||||
company: MindMed
|
||||
logo: /images/mindmed-logo.png
|
||||
industry: Digital Health & AI
|
||||
size: startup
|
||||
location: Berlin, Deutschland
|
||||
testimonial:
|
||||
quote: "Mit Mana können wir verschiedene LLMs für unsere Conversational AI flexibel nutzen und optimieren. Die Pay-per-Use Struktur passt perfekt zu unserem agilen Entwicklungsansatz."
|
||||
author: Dr. Sarah Wagner
|
||||
role: Chief Technology Officer
|
||||
image: /images/clients/sarah-wagner.jpg
|
||||
stats:
|
||||
- value: "70%"
|
||||
label: "Kostenreduktion"
|
||||
- value: "3x"
|
||||
label: "Schnellere Iteration"
|
||||
- value: "24/7"
|
||||
label: "KI-Verfügbarkeit"
|
||||
challenge: "Als Mental Health Startup benötigten wir Zugang zu verschiedenen KI-Modellen für unsere Conversational AI App, ohne uns auf einen Anbieter festzulegen."
|
||||
solution: "Mana ermöglicht uns den flexiblen Zugriff auf GPT-4, Claude, und andere Modelle - je nach Anwendungsfall optimal ausgewählt."
|
||||
results:
|
||||
- "Multimodaler Ansatz mit verschiedenen KI-Modellen"
|
||||
- "Kosteneffiziente Entwicklung und Testing"
|
||||
- "Schnelle Skalierung bei wachsender Nutzerbasis"
|
||||
- "DSGVO-konforme Verarbeitung sensibler Gesundheitsdaten"
|
||||
manaUsage:
|
||||
monthlyCredits: 45000
|
||||
mainTools: ["GPT-4", "Claude", "Whisper", "Custom Models"]
|
||||
teamSize: 8
|
||||
featured: false
|
||||
order: 2
|
||||
---
|
||||
|
||||
## Die Mission: KI für mentale Gesundheit
|
||||
|
||||
MindMed entwickelt eine innovative Conversational AI App, die Menschen bei mentalen Herausforderungen unterstützt. Als Startup im sensiblen Gesundheitsbereich standen sie vor besonderen Herausforderungen.
|
||||
|
||||
"Wir wollten die beste KI-Technologie nutzen, aber gleichzeitig flexibel bleiben und Datenschutz garantieren", erklärt Dr. Sarah Wagner, CTO von MindMed.
|
||||
|
||||
### Die Herausforderungen:
|
||||
- Verschiedene KI-Modelle für unterschiedliche therapeutische Ansätze
|
||||
- Strenge Datenschutzanforderungen im Gesundheitswesen
|
||||
- Unvorhersehbare Nutzungsmuster während der Entwicklung
|
||||
- Budget-Constraints als Early-Stage Startup
|
||||
|
||||
## Mana als technologische Grundlage
|
||||
|
||||
Die Entscheidung für Mana transformierte MindMeds Entwicklungsprozess:
|
||||
|
||||
### Multi-Model Strategie
|
||||
MindMed nutzt verschiedene KI-Modelle für unterschiedliche Funktionen:
|
||||
- **GPT-4**: Für empathische, natürliche Konversationen
|
||||
- **Claude**: Für strukturierte therapeutische Protokolle
|
||||
- **Whisper**: Für Spracherkennung und -analyse
|
||||
- **Custom Models**: Für spezialisierte Mental Health Assessments
|
||||
|
||||
### Agile Entwicklung
|
||||
"Mit Mana können wir neue Modelle sofort testen, ohne Verträge zu verhandeln oder Integrationen zu bauen", so Wagner.
|
||||
|
||||
## Innovative Features durch KI-Vielfalt
|
||||
|
||||
### Personalisierte Therapiebegleitung
|
||||
- **Adaptive Gesprächsführung**: Verschiedene KI-Modelle für verschiedene Persönlichkeitstypen
|
||||
- **Emotionserkennung**: Kombination mehrerer Modelle für präzise Stimmungsanalyse
|
||||
- **Mehrsprachigkeit**: Native Unterstützung in 12 Sprachen
|
||||
|
||||
### 24/7 Krisenintervention
|
||||
- **Sofortige Verfügbarkeit**: Keine Wartezeiten
|
||||
- **Eskalationsprotokolle**: Automatische Weiterleitung an menschliche Therapeuten
|
||||
- **Kontinuierliche Betreuung**: Nahtlose Übergänge zwischen KI und Mensch
|
||||
|
||||
## Entwicklungsprozess optimiert
|
||||
|
||||
### Rapid Prototyping
|
||||
Das Team kann neue Features innerhalb von Tagen entwickeln und testen:
|
||||
|
||||
1. **Ideation**: Brainstorming mit verschiedenen KI-Modellen
|
||||
2. **Prototyping**: Schnelle Tests mit echten Nutzerdaten
|
||||
3. **A/B Testing**: Parallele Tests verschiedener Ansätze
|
||||
4. **Deployment**: Sofortige Skalierung erfolgreicher Features
|
||||
|
||||
### Kosteneffizienz
|
||||
- **Entwicklungsphase**: ~15.000 Mana/Monat
|
||||
- **Beta-Testing**: ~30.000 Mana/Monat
|
||||
- **Production**: ~45.000 Mana/Monat
|
||||
- **Einsparung**: 70% gegenüber direkten API-Kosten
|
||||
|
||||
## Datenschutz und Compliance
|
||||
|
||||
### DSGVO-Konformität
|
||||
"Der Datenschutz war für uns non-negotiable. Mana's deutsche Server und strikte Datenschutzrichtlinien waren entscheidend", betont Wagner.
|
||||
|
||||
### Technische Sicherheit
|
||||
- Verschlüsselte Datenübertragung
|
||||
- Keine Speicherung personenbezogener Daten in KI-Modellen
|
||||
- Audit-Logs für medizinische Compliance
|
||||
- Anonymisierte Nutzungsanalysen
|
||||
|
||||
## Nutzerfeedback und Erfolge
|
||||
|
||||
### Beeindruckende Metriken
|
||||
- **10.000+** aktive Nutzer in der Beta-Phase
|
||||
- **85%** Nutzerzufriedenheit
|
||||
- **60%** Reduktion von Angstsymptomen (selbstberichtet)
|
||||
- **4.8/5** App Store Bewertung
|
||||
|
||||
### Nutzer berichten:
|
||||
> "Die App versteht mich besser als viele menschliche Gesprächspartner"
|
||||
|
||||
> "Endlich Hilfe ohne Wartezeiten und Stigma"
|
||||
|
||||
> "Die Kontinuität der Betreuung ist lebensverändernd"
|
||||
|
||||
## Wissenschaftliche Validierung
|
||||
|
||||
MindMed arbeitet mit führenden Universitäten zusammen:
|
||||
- Klinische Studie mit 500 Teilnehmern läuft
|
||||
- Publikationen in peer-reviewed Journals geplant
|
||||
- Zertifizierung als Medizinprodukt in Vorbereitung
|
||||
|
||||
## Skalierung und Wachstum
|
||||
|
||||
### Aktuelle Expansion
|
||||
- Launch in UK und USA geplant
|
||||
- Partnerschaft mit Krankenkassen in Verhandlung
|
||||
- Integration in Therapiepraxen als Unterstützungstool
|
||||
|
||||
### Technologische Roadmap
|
||||
- Integration von Biomarker-Daten (Wearables)
|
||||
- VR-unterstützte Therapiesessions
|
||||
- Gruppen-Therapie Features
|
||||
|
||||
## Team und Kultur
|
||||
|
||||
Das 8-köpfige Team vereint Expertise aus:
|
||||
- **Psychologie & Psychiatrie**: 3 Personen
|
||||
- **KI & Machine Learning**: 3 Personen
|
||||
- **UX & Product Design**: 2 Personen
|
||||
|
||||
"Mana ermöglicht es unserem kleinen Team, wie ein großes Unternehmen zu agieren", sagt Wagner.
|
||||
|
||||
## Gesellschaftlicher Impact
|
||||
|
||||
### Demokratisierung mentaler Gesundheit
|
||||
- Niedrigschwelliger Zugang zu Unterstützung
|
||||
- Entstigmatisierung durch anonyme Nutzung
|
||||
- Kostenreduktion im Gesundheitssystem
|
||||
|
||||
### Zukunftsvision
|
||||
"Wir wollen mentale Gesundheitsversorgung so zugänglich machen wie eine Google-Suche - aber mit therapeutischem Mehrwert", erklärt Wagner.
|
||||
|
||||
## Learnings für andere Health-Tech Startups
|
||||
|
||||
Dr. Wagners Empfehlungen:
|
||||
1. "Startet mit mehreren KI-Modellen parallel - jedes hat Stärken"
|
||||
2. "Datenschutz first - besonders im Gesundheitsbereich"
|
||||
3. "Nutzt die Flexibilität für schnelle Iterationen"
|
||||
4. "Investiert in wissenschaftliche Validierung früh"
|
||||
|
||||
## Fazit
|
||||
|
||||
"Mana war der Enabler für unsere Vision. Ohne die Flexibilität und Kosteneffizienz hätten wir nicht so schnell so weit kommen können. Für Health-Tech Startups ist es die ideale Lösung."
|
||||
|
||||
**MindMed zeigt**: Mit der richtigen Technologie-Infrastruktur können Startups im Gesundheitsbereich innovative, skalierbare Lösungen entwickeln, die echten gesellschaftlichen Mehrwert schaffen.
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
company: RWU Hochschule Ravensburg-Weingarten
|
||||
logo: /images/clients/RWU-Hochschule-Ravensburg-Weingarten-Universitaet-Logo-Mana-Manacore-AI.png
|
||||
industry: Bildung & Forschung
|
||||
size: enterprise
|
||||
location: Ravensburg-Weingarten, Deutschland
|
||||
testimonial:
|
||||
quote: "Mana hat unsere digitale Transformation im Bereich KI maßgeblich vorangetrieben. Die einfache Verwaltung und die DSGVO-Konformität waren für uns als deutsche Hochschule entscheidend."
|
||||
author: Prof. Dr. Anna Schmidt
|
||||
role: Vizepräsidentin Digitalisierung
|
||||
image: /images/clients/prof-schmidt.jpg
|
||||
stats:
|
||||
- value: "850"
|
||||
label: "Nutzer"
|
||||
- value: "100%"
|
||||
label: "DSGVO-konform"
|
||||
- value: "4"
|
||||
label: "Fakultäten"
|
||||
challenge: "Die RWU suchte eine datenschutzkonforme KI-Lösung, die sowohl für die Lehre als auch für die angewandte Forschung in Kooperation mit regionalen Unternehmen geeignet ist."
|
||||
solution: "Mana Enterprise mit speziellen Sicherheitsfeatures für sensible Forschungsprojekte und flexiblen Zugriffsrechten für externe Projektpartner."
|
||||
results:
|
||||
- "Sichere KI-Nutzung in Industriekooperationen"
|
||||
- "Integration in alle Studiengänge"
|
||||
- "Steigerung der Drittmitteleinnahmen durch KI-Projekte"
|
||||
- "Aufbau eines KI-Kompetenzzentrums"
|
||||
manaUsage:
|
||||
monthlyCredits: 150000
|
||||
mainTools: ["ChatGPT", "Claude", "Perplexity", "GitHub Copilot", "Wolfram Alpha"]
|
||||
teamSize: 850
|
||||
featured: true
|
||||
order: 3
|
||||
---
|
||||
|
||||
## Die Herausforderung
|
||||
|
||||
Als Hochschule für Angewandte Wissenschaften arbeitet die RWU eng mit regionalen Unternehmen zusammen. Die Herausforderung bestand darin, eine KI-Plattform zu finden, die sowohl den strengen Datenschutzanforderungen deutscher Hochschulen als auch den Sicherheitsbedürfnissen der Industriepartner gerecht wird.
|
||||
|
||||
## Die Lösung
|
||||
|
||||
Mit Mana Enterprise implementierte die RWU eine sichere KI-Umgebung mit granularen Zugriffsrechten. Externe Projektpartner können temporäre Zugänge erhalten, ohne dass sensible Daten gefährdet werden. Die DSGVO-konforme Infrastruktur auf deutschen Servern war ein entscheidender Faktor.
|
||||
|
||||
## Die Ergebnisse
|
||||
|
||||
Die Einführung von Mana hat die Position der RWU als innovativer Partner für die regionale Wirtschaft gestärkt. Die Hochschule konnte ein KI-Kompetenzzentrum aufbauen und ihre Drittmitteleinnahmen durch KI-bezogene Projekte deutlich steigern. Gleichzeitig profitieren alle Studiengänge von der Integration modernster KI-Tools in die Lehre.
|
||||
177
apps/manacore/apps/landing/src/content/clients/uni-heidelberg.md
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
---
|
||||
company: Universität Heidelberg
|
||||
logo: /images/clients/RWU-Hochschule-Ravensburg-Weingarten-Universitaet-Logo-Mana-Manacore-AI-1.png
|
||||
industry: Bildung & Forschung
|
||||
size: enterprise
|
||||
location: Heidelberg, Deutschland
|
||||
testimonial:
|
||||
quote: "Mana ermöglicht unseren Forschern und Studenten gleichberechtigten Zugang zu modernsten KI-Tools. Die Education-Konditionen und die DSGVO-Konformität waren entscheidend für unsere Wahl."
|
||||
author: Prof. Dr. Sarah Weber
|
||||
role: Leiterin Digital Innovation Lab
|
||||
image: /images/clients/prof-weber.jpg
|
||||
stats:
|
||||
- value: "2.500"
|
||||
label: "Aktive Nutzer"
|
||||
- value: "50%"
|
||||
label: "Education-Rabatt"
|
||||
- value: "15"
|
||||
label: "Fachbereiche"
|
||||
challenge: "Die Universität brauchte eine einheitliche, datenschutzkonforme Lösung für KI-Tools über alle Fachbereiche hinweg - vom Medizinstudent bis zum Informatik-Professor."
|
||||
solution: "Mana Education-Programm mit zentraler Verwaltung, DSGVO-Konformität und speziellen Forschungs-Features."
|
||||
results:
|
||||
- "Einheitlicher Zugang für 2.500 Studenten und Mitarbeiter"
|
||||
- "Signifikante Verbesserung der Forschungseffizienz"
|
||||
- "Neue Lehrmethoden durch KI-Integration"
|
||||
- "Vollständige DSGVO-Compliance für sensible Forschungsdaten"
|
||||
manaUsage:
|
||||
monthlyCredits: 500000
|
||||
mainTools: ["ChatGPT", "Claude", "Wolfram Alpha", "GitHub Copilot", "Elicit"]
|
||||
teamSize: 2500
|
||||
featured: false
|
||||
order: 5
|
||||
---
|
||||
|
||||
## Digitale Transformation in der Lehre
|
||||
|
||||
Die Universität Heidelberg, eine der ältesten und renommiertesten Universitäten Deutschlands, erkannte früh das Potenzial von KI in Forschung und Lehre. Die Herausforderung: Wie macht man moderne KI-Tools für eine diverse akademische Gemeinschaft zugänglich?
|
||||
|
||||
"Wir haben Medizinstudenten, die KI für Diagnose-Training nutzen wollen, Geisteswissenschaftler, die Textanalyse betreiben, und Informatiker, die an der Spitze der KI-Forschung stehen", erklärt Prof. Dr. Sarah Weber.
|
||||
|
||||
## Die akademische Herausforderung
|
||||
|
||||
### Vielfältige Anforderungen
|
||||
- 15 verschiedene Fachbereiche mit unterschiedlichen Bedürfnissen
|
||||
- Studenten mit begrenztem Budget
|
||||
- Forscher mit höchsten Ansprüchen
|
||||
- Strenge Datenschutzauflagen für Forschungsdaten
|
||||
|
||||
### Bisherige Probleme
|
||||
- Einzelne Lehrstühle mit isolierten Tool-Lizenzen
|
||||
- Keine Kostenkontrolle
|
||||
- Datenschutzbedenken bei US-Anbietern
|
||||
- Ungleicher Zugang je nach Budget des Fachbereichs
|
||||
|
||||
## Die Mana Education Lösung
|
||||
|
||||
### Implementierung in Phasen
|
||||
|
||||
**Phase 1: Pilot (3 Monate)**
|
||||
- Start mit Digital Innovation Lab
|
||||
- 100 ausgewählte Nutzer
|
||||
- Intensive Evaluation
|
||||
|
||||
**Phase 2: Fachbereich-Rollout (6 Monate)**
|
||||
- Schrittweise Erweiterung
|
||||
- Anpassung an fachspezifische Needs
|
||||
- Schulungsprogramme
|
||||
|
||||
**Phase 3: Universitätsweiter Launch**
|
||||
- 2.500 Nutzer aktiviert
|
||||
- Integration in Lernplattformen
|
||||
- Forschungsprojekt-Integration
|
||||
|
||||
## Anwendungsfälle nach Fachbereich
|
||||
|
||||
### Medizin
|
||||
- **KI-gestützte Diagnoseübungen**: Studenten trainieren mit ChatGPT
|
||||
- **Forschungsliteratur-Analyse**: Elicit für systematische Reviews
|
||||
- **Bildanalyse**: Spezialisierte medizinische KI-Tools
|
||||
|
||||
### Informatik
|
||||
- **Coding-Assistenz**: GitHub Copilot für alle Studenten
|
||||
- **Algorithmen-Entwicklung**: Claude für komplexe Problemlösungen
|
||||
- **KI-Ethik-Seminare**: Praktische Demonstrationen
|
||||
|
||||
### Geisteswissenschaften
|
||||
- **Textanalyse**: Historische Dokumente mit KI durchsuchen
|
||||
- **Übersetzungen**: Mehrsprachige Forschung ermöglichen
|
||||
- **Digital Humanities**: Neue Forschungsmethoden
|
||||
|
||||
### Naturwissenschaften
|
||||
- **Datenanalyse**: Wolfram Alpha Integration
|
||||
- **Hypothesen-Generierung**: KI als Forschungspartner
|
||||
- **Visualisierungen**: Komplexe Daten verständlich machen
|
||||
|
||||
## Besondere Features für Universitäten
|
||||
|
||||
### DSGVO-Compliance
|
||||
- Alle Daten bleiben in der EU
|
||||
- Spezielle Verträge für Forschungsdaten
|
||||
- Keine Nutzung für KI-Training
|
||||
|
||||
### Kostenkontrolle
|
||||
- Budgets pro Fachbereich
|
||||
- Semester-basierte Abrechnungen
|
||||
- Transparente Nutzungsberichte
|
||||
|
||||
### Integration
|
||||
- Single Sign-On mit Uni-Account
|
||||
- API für Lernplattformen
|
||||
- Bibliotheks-Integration
|
||||
|
||||
## Erfolgsgeschichten
|
||||
|
||||
### Medizinische Durchbrüche
|
||||
Ein Forschungsteam nutzte KI-Tools über Mana zur Analyse von Patientendaten:
|
||||
- 10x schnellere Musterkennung
|
||||
- Neue Behandlungsansätze identifiziert
|
||||
- Paper in Nature publiziert
|
||||
|
||||
### Innovative Lehrmethoden
|
||||
Prof. Weber's KI-Kurs wurde zum Modell:
|
||||
- Studenten lernen durch praktische Anwendung
|
||||
- Verschiedene Tools im direkten Vergleich
|
||||
- Kritisches Denken über KI-Grenzen
|
||||
|
||||
### Interdisziplinäre Projekte
|
||||
Mana ermöglichte Zusammenarbeit zwischen Fachbereichen:
|
||||
- Medizin + Informatik: KI-Diagnose-Tool
|
||||
- Geschichte + Data Science: Digitales Archiv
|
||||
- Psychologie + Linguistik: Sprachanalyse-Projekt
|
||||
|
||||
## Impact auf die Universität
|
||||
|
||||
### Quantitative Ergebnisse
|
||||
- **Forschungsoutput**: 35% mehr Publikationen
|
||||
- **Studienqualität**: Bessere Abschlussarbeiten
|
||||
- **Effizienz**: 40% Zeitersparnis bei Literaturrecherche
|
||||
|
||||
### Qualitative Verbesserungen
|
||||
- Gleichberechtigter Zugang für alle Studenten
|
||||
- Neue Forschungsmöglichkeiten
|
||||
- Verbesserte digitale Kompetenzen
|
||||
- Attraktivität als moderne Universität
|
||||
|
||||
## Herausforderungen und Lösungen
|
||||
|
||||
### Schulungsbedarf
|
||||
- **Problem**: Unterschiedliche Tech-Kenntnisse
|
||||
- **Lösung**: Mehrstufiges Schulungsprogramm
|
||||
- **Ergebnis**: 95% Adoption Rate
|
||||
|
||||
### Ethische Bedenken
|
||||
- **Problem**: KI in akademischer Arbeit
|
||||
- **Lösung**: Klare Richtlinien und Honor Code
|
||||
- **Ergebnis**: Verantwortungsvolle Nutzung
|
||||
|
||||
## Zukunftsperspektiven
|
||||
|
||||
Die Universität Heidelberg plant:
|
||||
1. **KI-Kompetenzzentrum**: Aufbau mit Mana als Kernplattform
|
||||
2. **Internationale Kooperationen**: Gemeinsame Forschung
|
||||
3. **Student-Startups**: KI-basierte Innovationen fördern
|
||||
|
||||
## Best Practices für Bildungseinrichtungen
|
||||
|
||||
Prof. Weber's Empfehlungen:
|
||||
1. "Startet mit motivierten Early Adopters"
|
||||
2. "Investiert in Schulungen für Lehrpersonal"
|
||||
3. "Entwickelt klare Nutzungsrichtlinien"
|
||||
4. "Nutzt die Flexibilität für Experimente"
|
||||
5. "Messt und kommuniziert Erfolge"
|
||||
|
||||
## Fazit
|
||||
|
||||
"Mana hat unsere Vision einer digital-unterstützten, aber menschenzentrierten Bildung Realität werden lassen. Es demokratisiert den Zugang zu KI-Tools und ermöglicht Innovationen in Forschung und Lehre, die vorher undenkbar waren."
|
||||
|
||||
Die Universität Heidelberg zeigt: **Bildung und KI können Hand in Hand gehen - mit dem richtigen Partner und System.**
|
||||
138
apps/manacore/apps/landing/src/content/config.ts
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const appsCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
category: z.enum(['productivity', 'ai-tools', 'creative', 'communication', 'analytics', 'wellness']),
|
||||
icon: z.string(),
|
||||
manaUsage: z.object({
|
||||
min: z.number(),
|
||||
average: z.number(),
|
||||
max: z.number(),
|
||||
unit: z.enum(['per-action', 'per-minute', 'per-request', 'per-image', 'per-token'])
|
||||
}),
|
||||
features: z.array(z.string()),
|
||||
status: z.enum(['available', 'coming-soon', 'beta']),
|
||||
order: z.number(),
|
||||
website: z.string().optional(),
|
||||
screenshots: z.array(z.string()).optional(),
|
||||
})
|
||||
});
|
||||
|
||||
const targetGroupsCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
icon: z.string(),
|
||||
benefits: z.array(z.string()),
|
||||
useCases: z.array(z.string()),
|
||||
testimonial: z.object({
|
||||
quote: z.string(),
|
||||
author: z.string(),
|
||||
role: z.string(),
|
||||
company: z.string().optional(),
|
||||
}).optional(),
|
||||
pricing: z.object({
|
||||
special: z.boolean(),
|
||||
discount: z.string().optional(),
|
||||
details: z.string(),
|
||||
}),
|
||||
order: z.number(),
|
||||
})
|
||||
});
|
||||
|
||||
const legalCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
lastUpdated: z.date(),
|
||||
order: z.number(),
|
||||
sections: z.array(z.object({
|
||||
heading: z.string(),
|
||||
content: z.string(),
|
||||
})).optional(),
|
||||
})
|
||||
});
|
||||
|
||||
const privacyCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
category: z.enum(['compliance', 'security', 'ai-ethics', 'transparency']),
|
||||
lastUpdated: z.date(),
|
||||
order: z.number(),
|
||||
featured: z.boolean().default(false),
|
||||
tags: z.array(z.string()).optional(),
|
||||
})
|
||||
});
|
||||
|
||||
const clientsCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
company: z.string(),
|
||||
logo: z.string(),
|
||||
industry: z.string(),
|
||||
size: z.enum(['startup', 'mittelstand', 'enterprise']),
|
||||
location: z.string(),
|
||||
testimonial: z.object({
|
||||
quote: z.string(),
|
||||
author: z.string(),
|
||||
role: z.string(),
|
||||
image: z.string().optional(),
|
||||
}),
|
||||
stats: z.array(z.object({
|
||||
value: z.string(),
|
||||
label: z.string(),
|
||||
})),
|
||||
challenge: z.string(),
|
||||
solution: z.string(),
|
||||
results: z.array(z.string()),
|
||||
manaUsage: z.object({
|
||||
monthlyCredits: z.number(),
|
||||
mainTools: z.array(z.string()),
|
||||
teamSize: z.number(),
|
||||
}),
|
||||
featured: z.boolean().default(false),
|
||||
order: z.number(),
|
||||
})
|
||||
});
|
||||
|
||||
const missionCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
category: z.enum(['vision', 'values', 'approach', 'team', 'future']),
|
||||
image: z.string().optional(),
|
||||
order: z.number(),
|
||||
featured: z.boolean().default(false),
|
||||
lang: z.enum(['de', 'en', 'it']).default('de'),
|
||||
})
|
||||
});
|
||||
|
||||
const contextCollection = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
order: z.number(),
|
||||
icon: z.string().optional(),
|
||||
publishedAt: z.date().optional(),
|
||||
updatedAt: z.date().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
apps: appsCollection,
|
||||
'branchen': targetGroupsCollection,
|
||||
'legal': legalCollection,
|
||||
'privacy': privacyCollection,
|
||||
'clients': clientsCollection,
|
||||
'mission': missionCollection,
|
||||
'context': contextCollection,
|
||||
};
|
||||
131
apps/manacore/apps/landing/src/content/context/overview-short.md
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
---
|
||||
title: 'Der Manacore Short'
|
||||
description: 'Ein Pay-as-you-use Modell für KI-gestützte Transkription und Analyse in Memoro'
|
||||
order: 1
|
||||
icon: 'mdi:information'
|
||||
publishedAt: 2024-01-01
|
||||
updatedAt: 2024-01-15
|
||||
---
|
||||
# Manacore: Ein nachhaltiges KI-Ökosystem für Europa
|
||||
|
||||
## Vision und Mission
|
||||
|
||||
Manacore steht für ein langfristig nachhaltiges Software-Ökosystem mit KI im Kern. Unser Ziel ist es, durch gutes Design und optimale Vernetzung jedem zu ermöglichen, Wissen, Erfahrungen und Ideen besser festzuhalten, zu sammeln, darzustellen und zu teilen.
|
||||
|
||||
### Das Ökosystem
|
||||
- **Vernetzte Applikationen**: Verschiedene Apps arbeiten zusammen und entfalten gemeinsam eine neue Kraft
|
||||
- **Memoro als Startpunkt**: Die erste Applikation für KI-gestützte Audio-Transkription und -analyse
|
||||
- **Erweiterung geplant**: Weitere Applikationen folgen noch in diesem Jahr
|
||||
|
||||
## Das revolutionäre Mana-Creditsystem
|
||||
|
||||
### Grundprinzip: Pay-per-Value statt Abonnement-Falle
|
||||
|
||||
Das Mana-System kombiniert die Vorteile von Abonnements mit der Fairness verbrauchsbasierter Abrechnung:
|
||||
|
||||
**Regenerationsmodell**
|
||||
- Tägliche Mana-Gutschrift je nach Abo-Stufe
|
||||
- Sammlung nicht genutzter Credits bis zum Speicherlimit
|
||||
- Kein Verfallsdatum für gesammelte Mana
|
||||
- Zusätzliche Mana-Tränke bei Bedarf verfügbar
|
||||
|
||||
**Transparente Kostenstruktur**
|
||||
- **40%** Compute Costs (KI-Verarbeitung und Infrastruktur)
|
||||
- **25%** Entwicklungskosten (Wartung, Features, Innovation)
|
||||
- **15%** App Store / Play Store Provisionen
|
||||
- **10%** Ökologischer Ausgleich (CO2-Kompensation)
|
||||
- **10%** Free User Kontingent (kostenloses Testen, NGO-Support)
|
||||
|
||||
### Kostenbeispiele in Memoro
|
||||
- Audio-Aufnahme mit KI-Analyse: **2 Mana pro Minute** (0,02 €)
|
||||
- Frage an ein Memo stellen: **5 Mana** (0,05 €)
|
||||
- Neue Memory erstellen: **5 Mana** (0,05 €)
|
||||
- Memos kombinieren: **5 Mana pro Memo** (0,05 €)
|
||||
|
||||
## Abo-Modelle und Preisstruktur
|
||||
|
||||
### Monatliche Abonnements mit Mana-Regeneration
|
||||
|
||||
| Abo-Stufe | Preis/Monat | Start-Mana | Tägliche Regeneration | Speicherlimit | Entspricht ca. |
|
||||
|-----------|-------------|------------|---------------------|---------------|----------------|
|
||||
| **Mana Tropfen** | Kostenlos | 150 | 5 | 150 | 1,25 Stunden |
|
||||
| **Mana Fluss** | 5,99€ | 600 | 20 | 1.200 | 10 Stunden |
|
||||
| **Mana Strom** | 14,99€ | 1.500 | 50 | 3.000 | 25 Stunden |
|
||||
| **Mana See** | 29,99€ | 3.000 | 100 | 6.000 | 50 Stunden |
|
||||
| **Mana Meer** | 49,99€ | 5.000 | 200 | 10.000 | 83 Stunden |
|
||||
|
||||
### Jährliche Abonnements (bis zu 33% Ersparnis)
|
||||
- **Mana Fluss**: 47,99€/Jahr (3,99€/Monat)
|
||||
- **Mana Strom**: 119,99€/Jahr (9,99€/Monat)
|
||||
- **Mana See**: 239,99€/Jahr (19,99€/Monat)
|
||||
- **Mana Meer**: 399,99€/Jahr (33,33€/Monat)
|
||||
|
||||
### Einmalkäufe (Mana-Tränke)
|
||||
- **Kleiner Trank**: 4,99€ für 350 Mana
|
||||
- **Mittlerer Trank**: 9,99€ für 700 Mana
|
||||
- **Großer Trank**: 19,99€ für 1.400 Mana
|
||||
- **Riesiger Trank**: 39,99€ für 2.800 Mana
|
||||
|
||||
## Vorteile gegenüber klassischen Lizenzmodellen
|
||||
|
||||
### Kostenersparnis-Beispiele
|
||||
|
||||
**Unternehmen mit 50 Mitarbeitern:**
|
||||
- **Manacore**: 2x Mana Meer = 99,98€/Monat
|
||||
- **Klassische Lizenzen**: 50 × 19,99€ = 999,50€/Monat
|
||||
- **Ersparnis**: 90%
|
||||
|
||||
**Universitäres Forschungsprojekt (15 Forscher, 1 Jahr):**
|
||||
- **Manacore**: 1x Mana See Jahresabo = 239,99€
|
||||
- **Klassische Lizenzen**: 15 × 9,99€ × 12 Monate = 1.798,20€
|
||||
- **Ersparnis**: 87%
|
||||
|
||||
### Weitere Vorteile
|
||||
- **Flexibilität**: Credits beliebig zwischen Nutzern verteilbar
|
||||
- **Keine Verschwendung**: Ungenutzte Credits sammeln sich statt zu verfallen
|
||||
- **Skalierbarkeit**: System wächst mit den Anforderungen
|
||||
- **Transparenz**: Echte Pay-per-Use Abrechnung
|
||||
|
||||
## Nachhaltigkeit und Verantwortung
|
||||
|
||||
### Ökologische Verantwortung
|
||||
- 10% jedes Mana für ökologischen Ausgleich
|
||||
- Aktive CO2-Kompensation und -Tracking
|
||||
- Nutzung klimaneutraler Rechenzentren
|
||||
- Bevorzugung umweltschonender Infrastruktur-Provider
|
||||
|
||||
### Europäische Unabhängigkeit
|
||||
- Aufbau eines neuen Software-Ökosystems für Europa
|
||||
- Reduzierung der Abhängigkeit von US-Technologien
|
||||
- Langfristiges Ziel: Komplette technologische Unabhängigkeit
|
||||
- Open-Source-Pläne für strategisch sinnvolle Bereiche
|
||||
|
||||
### Soziale Verantwortung
|
||||
- Kostenloses Kontingent für NGOs und Bildungseinrichtungen
|
||||
- Demokratisierung des Zugangs zu KI-Technologie
|
||||
- Transparente und faire Preisgestaltung
|
||||
|
||||
## Partizipation und Community
|
||||
|
||||
Jeder kann am Manacore-Ökosystem teilhaben:
|
||||
- **Als Nutzer** der verschiedenen Tools und Apps
|
||||
- **Durch Analytics-Opt-in** für besseres Feedback und Optimierung
|
||||
- **Durch aktives Feedback** über verschiedene Kanäle
|
||||
- **Als Empfehlungsgeber** für neue Nutzer
|
||||
- **Als Ideengeber** oder Entwickler eigener Satelliten-Applikationen
|
||||
|
||||
## Zukunftsperspektiven
|
||||
|
||||
### Technologische Entwicklung
|
||||
- **On-Device-Modelle**: Geringere Mana-Kosten durch lokale Verarbeitung
|
||||
- **Qualitätsstufen**: Wahlmöglichkeit zwischen Geschwindigkeit und Qualität
|
||||
- **Demokratisierung**: KI-Tools als allgegenwärtige Ressource
|
||||
|
||||
### Plattform-Evolution
|
||||
- **Software-as-a-Flow**: Eine neue Generation nachhaltiger, frei entwickelbarer Software
|
||||
- **Innovationsplattform**: Schnelle und nachhaltige Entwicklung neuer Lösungen
|
||||
- **Netzwerkeffekte**: Synergien zwischen verschiedenen Apps im Ökosystem
|
||||
|
||||
## Das Ziel
|
||||
|
||||
Manacore macht die digitale Welt und KI-Möglichkeiten für jeden zugänglich. Wir entwickeln Software zu etwas Fließendem und schaffen eine Plattform, auf der Innovation schnell und nachhaltig gedeihen kann – mit einem Geschäftsmodell, bei dem Software allen gehört, die daran mitwirken und es mitgestalten.
|
||||
379
apps/manacore/apps/landing/src/content/context/overview.md
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
---
|
||||
title: 'Das Mana-Creditsystem'
|
||||
description: 'Ein Pay-as-you-use Modell für KI-gestützte Transkription und Analyse in Memoro'
|
||||
order: 1
|
||||
icon: 'mdi:information'
|
||||
publishedAt: 2024-01-01
|
||||
updatedAt: 2024-01-15
|
||||
---
|
||||
|
||||
# Das Mana-Creditsystem erklärt
|
||||
|
||||
## Die Vision von Mana
|
||||
|
||||
Mana steht für ein langfristig nachhaltiges Software-Ökosystem mit KI im Kern. Die Grundidee ist es, ein niederschwelliges Angebot zu schaffen, das jedem ermöglicht, durch gutes Design und optimale Vernetzung mit anderen Tools im Netzwerk, Wissen, Erfahrungen und Ideen besser festzuhalten, zu sammeln, darzustellen und zu teilen.
|
||||
|
||||
### Das Mana-Ökosystem
|
||||
|
||||
Im Manacore-Netzwerk arbeiten verschiedene Applikationen zusammen:
|
||||
- Jede App unterstützt Menschen bei spezifischen Aufgaben
|
||||
- Verbunden entfalten sie eine ganz neue Kraft
|
||||
- Memoro ist die erste Applikation, weitere folgen noch in diesem Jahr
|
||||
|
||||
### Ein neues Geschäftsmodell
|
||||
|
||||
Die Idee hinter Mana ist revolutionär:
|
||||
- **Einheitliche Währung**: Ein Bezahlsystem für alle Apps im Ökosystem
|
||||
- **Leistungsbasierte Abrechnung**: Bezahlung nur bei tatsächlicher Nutzung - im Gegensatz zu monatlichen Abos, die auch ohne Nutzung abbuchen
|
||||
- **Nachhaltigkeit**: Ein Geschäftsmodell, bei dem Software allen gehört, die daran mitwirken und es mitgestalten
|
||||
|
||||
### Partizipation auf allen Ebenen
|
||||
|
||||
Jeder kann auf seine Weise am Mana-Ökosystem teilhaben:
|
||||
- Als Nutzer der verschiedenen Tools
|
||||
- Durch Analytics-Opt-in für besseres Feedback und Optimierung
|
||||
- Durch aktives Feedback über verschiedene Kanäle
|
||||
- Als Empfehlungsgeber für neue Nutzer
|
||||
- Als Ideengeber oder Entwickler eigener Satelliten-Applikationen
|
||||
|
||||
### Mehrwert im Fokus
|
||||
|
||||
Das gesamte System ist auf Wertschöpfung ausgelegt:
|
||||
- **Pay-per-Value**: Abrechnung nach tatsächlichem Mehrwert
|
||||
- **Faire Preise**: Nutzer zahlen nur für die tatsächlich erbrachte Leistung (Rechenleistung, Entwicklung)
|
||||
- **Transparenz**: Große generative Aktionen werden mit Mana abgerechnet
|
||||
|
||||
### Ökologische Verantwortung
|
||||
|
||||
Mana übernimmt aktiv Verantwortung für die Umwelt:
|
||||
- 10% jedes ausgegebenen Mana für ökologischen Ausgleich
|
||||
- Buchführung über CO2-Verbrauch und aktiver Ausgleich
|
||||
- Nutzung umweltschonender Infrastruktur-Provider
|
||||
- Bevorzugung klimaneutraler Rechenzentren
|
||||
|
||||
### Europäische Unabhängigkeit
|
||||
|
||||
Die Entwicklung von Mana fokussiert sich auf Europa:
|
||||
- Aufbau eines neuen Software-Ökosystems für Europa
|
||||
- Reduzierung der Abhängigkeit von US-amerikanischen Technologien
|
||||
- Langfristiges Ziel: Komplette technologische Unabhängigkeit
|
||||
- Open-Source-Pläne für den Manacore bei strategischer Sinnhaftigkeit
|
||||
|
||||
### Einheitliche Vorteile für Nutzer
|
||||
|
||||
Kunden profitieren von:
|
||||
- Einheitlichem Datenschutz
|
||||
- Einheitlicher Abrechnung
|
||||
- Einem Ansprechpartner für alle Apps
|
||||
- Nutzerfreundlichen Konditionen
|
||||
- Netzwerkeffekten in der Entwicklung
|
||||
|
||||
## Transparente Kostenstruktur: Der Mana-Aufbau
|
||||
|
||||
Jeder ausgegebene Mana wird transparent und nachhaltig verwendet:
|
||||
|
||||
### Die Mana-Verteilung im Detail
|
||||
|
||||
**40% Compute Costs (KI-Verarbeitung)**
|
||||
- Deckung der Kosten für KI-Modelle und Rechenleistung
|
||||
- Direkte Kosten für die Ausführung von Tasks
|
||||
- Skalierbare Infrastruktur für optimale Performance
|
||||
|
||||
**25% Entwicklungskosten**
|
||||
- Kontinuierliche Wartung und Verbesserung der Software
|
||||
- Aktive Entwicklerteams für neue Features
|
||||
- Sicherstellung langfristiger Qualität und Innovation
|
||||
|
||||
**15% App Store / Play Store Provision**
|
||||
- Notwendige Gebühren an Google und Apple
|
||||
- Gewährleistung breiter Verfügbarkeit
|
||||
- Einfacher Zugang über etablierte Plattformen
|
||||
|
||||
**10% Ökologischer Ausgleich**
|
||||
- Direkter Ausgleich entstandener Umweltschäden
|
||||
- Investition in klimaneutrale Infrastruktur
|
||||
- Aktiver Beitrag zum Umweltschutz
|
||||
|
||||
**10% Free User Kontingent**
|
||||
- Ermöglicht neuen Nutzern kostenloses Testen
|
||||
- Unterstützung von NGOs und Bildungseinrichtungen
|
||||
- Demokratisierung des Zugangs zu KI-Technologie
|
||||
|
||||
### Nachhaltigkeit als Kernprinzip
|
||||
|
||||
Die transparente Kostenstruktur zeigt: Bei Mana steht nicht der Profit im Vordergrund, sondern:
|
||||
- **Fairness**: Verhältnismäßig wenig bleibt bei den Entwicklern
|
||||
- **Zugänglichkeit**: Neue Nutzer können die Software kostenlos erleben
|
||||
- **Nachhaltigkeit**: Sowohl ökologisch als auch im Verhältnis zu allen Beteiligten
|
||||
- **Transparenz**: Kostenersparnisse werden direkt an Nutzer weitergegeben
|
||||
|
||||
### Zukunftsperspektiven
|
||||
|
||||
Mit fortschreitender Technologie ergeben sich neue Möglichkeiten:
|
||||
- **On-Device-Modelle**: Geringere Mana-Kosten durch lokale Verarbeitung
|
||||
- **Qualitätsstufen**: Nutzer wählen zwischen Geschwindigkeit und Qualität
|
||||
- **Demokratisierung**: KI-Tools werden zur allgegenwärtigen Ressource
|
||||
- **Software-Evolution**: Eine neue Generation nachhaltiger, frei entwickelbarer Software
|
||||
|
||||
Das Ziel ist klar: Die digitale Welt und KI-Möglichkeiten für jeden zugänglich machen, Software zu etwas Fließendem entwickeln und eine Plattform schaffen, auf der Innovation schnell und nachhaltig gedeihen kann.
|
||||
|
||||
## Was ist Mana?
|
||||
|
||||
Mana ist ein Creditsystem für die Nutzung von Memoro, einer KI-gestützten Plattform für Transkription und Analyse von Audio-Aufnahmen. Das System basiert auf einem einzigartigen Regenerationsmodell: Nutzer wählen eine Abo-Stufe, die ihnen täglich neue Mana-Credits gutschreibt. Diese sammeln sich in einem persönlichen Mana-Speicher bis zu einem definierten Limit.
|
||||
|
||||
## So funktioniert das System
|
||||
|
||||
### Die Grundlagen
|
||||
|
||||
Das Mana-System kombiniert zwei Ansätze:
|
||||
|
||||
- **Abonnements mit Regeneration**: Tägliche Mana-Gutschrift je nach Abo-Stufe
|
||||
- **Mana-Speicher**: Nicht genutzte Mana sammeln sich bis zum Speicherlimit
|
||||
- **Einmalkäufe**: Zusätzliche Mana-Tränke bei Bedarf
|
||||
- **Kein Verfallsdatum**: Mana im Speicher bleiben erhalten
|
||||
|
||||
### Kostenübersicht in Memoro
|
||||
|
||||
Die Mana-Kosten für verschiedene Funktionen:
|
||||
|
||||
- **Audio-Aufnahme mit Analyse**: 120 Mana pro Stunde (1,20 €)
|
||||
- **Audio-Aufnahme mit Analyse**: 2 Mana pro Minute (0,02 €)
|
||||
- **Frage an Memo stellen**: 5 Mana (0,05 €)
|
||||
- **Neue Memory erstellen**: 5 Mana (0,05 €)
|
||||
- **Memos kombinieren**: 5 Mana pro Memo (0,05 €)
|
||||
|
||||
## Unterschiede zum klassischen Lizenzmodell
|
||||
|
||||
### Herkömmliche Software-Lizenzen
|
||||
|
||||
Bei traditionellen Modellen zahlen Organisationen:
|
||||
|
||||
- Feste monatliche Gebühren pro Nutzer (Seats)
|
||||
- Unabhängig von der tatsächlichen Nutzung
|
||||
- Mit langfristigen Vertragsbindungen
|
||||
- Oft mit ungenutzten Lizenzen
|
||||
|
||||
### Das Mana-Modell
|
||||
|
||||
Im Gegensatz dazu bietet das Mana-System:
|
||||
|
||||
- **Tägliche Regeneration** - neue Credits jeden Tag automatisch, kein Warten auf das Monatsende
|
||||
- **Flexibler Speicher** - sammeln Sie Mana für intensive Nutzungsphasen
|
||||
- **Kostenkontrolle** - feste monatliche Kosten mit transparentem Verbrauch
|
||||
- **Skalierbarkeit** - von kostenlos bis zu Enterprise-Lösungen
|
||||
|
||||
## Das Regenerations- und Speichersystem
|
||||
|
||||
### Wie funktioniert die Mana-Regeneration?
|
||||
|
||||
Das Regenerationssystem ist das Herzstück des Mana-Modells:
|
||||
|
||||
- **Tägliche Gutschrift**: Jeden Tag um 0:00 Uhr werden neue Mana-Credits automatisch gutgeschrieben
|
||||
- **Abo-abhängig**: Die Menge hängt von der gewählten Abo-Stufe ab (5 bis 200 Mana täglich)
|
||||
- **Automatisch**: Keine manuelle Aktivierung erforderlich
|
||||
- **Zuverlässig**: Regeneration erfolgt auch bei Nicht-Nutzung
|
||||
|
||||
**Beispiel**: Mit einem Mana See Abo erhalten Sie täglich 100 neue Mana. Das entspricht etwa 50 Minuten Transkription pro Tag - oder Sie sparen für größere Projekte.
|
||||
|
||||
### Der Mana-Speicher erklärt
|
||||
|
||||
Jede Abo-Stufe hat ein Speicherlimit, das verhindert, dass Credits ins Unendliche anwachsen:
|
||||
|
||||
- **Mana Tropfen**: 150 Mana Speicher (ca. 1,25 Stunden)
|
||||
- **Mana Fluss**: 1.200 Mana Speicher (ca. 10 Stunden)
|
||||
- **Mana Strom**: 3.000 Mana Speicher (ca. 25 Stunden)
|
||||
- **Mana See**: 6.000 Mana Speicher (ca. 50 Stunden)
|
||||
- **Mana Meer**: 10.000 Mana Speicher (ca. 83 Stunden)
|
||||
|
||||
**Wichtig**: Erreicht Ihr Speicher das Limit, verfallen neue Regenerations-Credits. Nutzen Sie daher regelmäßig Ihre Mana, verschenken es, spenden es oder wählen Sie eine höhere Abo-Stufe.
|
||||
|
||||
### Praktisches Beispiel
|
||||
|
||||
Ein Forscher mit **Mana Strom** Abo:
|
||||
|
||||
- Tag 1: 1.500 Start-Mana
|
||||
- Tag 2-10: +50 Mana täglich = 1.950 Mana
|
||||
- Führt 5 Interviews à 2 Stunden = -1.200 Mana
|
||||
- Verbleibend: 750 Mana
|
||||
- Nach 30 Tagen ohne Nutzung: Speicher voll bei 3.000 Mana
|
||||
|
||||
### Kombination mit Mana-Tränken
|
||||
|
||||
Das System erlaubt die flexible Kombination von Regeneration und Einmalkäufen:
|
||||
|
||||
- **Grundversorgung**: Das Abo liefert die tägliche Basis-Regeneration
|
||||
- **Zusatzbedarf**: Mana-Tränke für intensive Phasen oder große Projekte
|
||||
- **Sofort verfügbar**: Gekaufte Mana werden sofort gutgeschrieben
|
||||
- **Speicherlimit beachten**: Auch Tränke können nur bis zum Speicherlimit aufgefüllt werden
|
||||
|
||||
**Tipp**: Wählen Sie ein Abo, das 80% Ihres durchschnittlichen Bedarfs deckt, und kaufen Sie Tränke für Spitzenzeiten.
|
||||
|
||||
## Verwaltung und Kontrolle
|
||||
|
||||
### Credit-Verteilung
|
||||
|
||||
Administratoren haben verschiedene Optionen:
|
||||
|
||||
- **Team-Kontingente**: Zuweisung von Credits an Abteilungen oder Projekte
|
||||
- **Individuelle Budgets**: Persönliche Limits für einzelne Nutzer
|
||||
- **Automatische Startkontingente**: Neue Mitarbeiter erhalten sofort Zugang
|
||||
- **Umverteilung**: Credits können bei Bedarf verschoben werden
|
||||
|
||||
### Transparenz und Überwachung
|
||||
|
||||
Das System bietet detaillierte Einblicke:
|
||||
|
||||
- **Echtzeit-Verbrauch**: Aktuelle Nutzung pro Person und Team
|
||||
- **Historische Daten**: Entwicklung des Verbrauchs über Zeit
|
||||
- **Budget-Warnungen**: Benachrichtigungen vor Erreichen von Limits
|
||||
- **Export-Funktionen**: Daten für interne Abrechnungen
|
||||
|
||||
## Anwendung in verschiedenen Bereichen
|
||||
|
||||
### Unternehmen
|
||||
|
||||
Firmen nutzen Mana in Memoro für:
|
||||
|
||||
- Transkription von Meetings und Konferenzen
|
||||
- Dokumentation von Kundengesprächen
|
||||
- Wissensmanagement durch durchsuchbare Aufnahmen
|
||||
- Projektbasierte Nutzung ohne feste Lizenzzahlen
|
||||
|
||||
### Bildungseinrichtungen
|
||||
|
||||
Hochschulen und Universitäten profitieren durch:
|
||||
|
||||
- **Vorlesungsaufzeichnungen**: Automatische Transkription für Studierende
|
||||
- **Forschungsinterviews**: Transkription und Analyse qualitativer Daten
|
||||
- **Seminarprotokolle**: Dokumentation von Diskussionen
|
||||
- **Flexible Budgets**: Angepasst an Projektlaufzeiten
|
||||
|
||||
### Forschungseinrichtungen
|
||||
|
||||
Besonders geeignet für:
|
||||
|
||||
- Transkription von Experteninterviews
|
||||
- Dokumentation von Feldforschung
|
||||
- Analyse qualitativer Forschungsdaten
|
||||
- Transparente Projektabrechnung
|
||||
|
||||
## Preisstruktur
|
||||
|
||||
### Monatliche Abonnements mit Mana-Regeneration
|
||||
|
||||
Memoro bietet verschiedene Abo-Modelle mit täglicher Mana-Regeneration:
|
||||
|
||||
- **Mana Tropfen**: Kostenlos
|
||||
- 150 Start-Mana, 5 Mana/Tag Regeneration, 150 Mana Speicher
|
||||
- **Mana Fluss**: 5,99€/Monat
|
||||
- 600 Start-Mana, 20 Mana/Tag Regeneration, 1.200 Mana Speicher
|
||||
- **Mana Strom**: 14,99€/Monat
|
||||
- 1.500 Start-Mana, 50 Mana/Tag Regeneration, 3.000 Mana Speicher
|
||||
- **Mana See**: 29,99€/Monat
|
||||
- 3.000 Start-Mana, 100 Mana/Tag Regeneration, 6.000 Mana Speicher
|
||||
- **Mana Meer**: 49,99€/Monat
|
||||
- 5.000 Start-Mana, 200 Mana/Tag Regeneration, 10.000 Mana Speicher
|
||||
|
||||
### Jährliche Abonnements (mit Ersparnis)
|
||||
|
||||
Bei jährlicher Zahlung sparen Nutzer bis zu 33%:
|
||||
|
||||
- **Mana Fluss**: 47,99€/Jahr (3,99€/Monat)
|
||||
- **Mana Strom**: 119,99€/Jahr (9,99€/Monat)
|
||||
- **Mana See**: 239,99€/Jahr (19,99€/Monat)
|
||||
- **Mana Meer**: 399,99€/Jahr (33,33€/Monat)
|
||||
|
||||
### Einmalkäufe (Mana-Tränke)
|
||||
|
||||
Für zusätzlichen Bedarf ohne Abo:
|
||||
|
||||
- **Kleiner Mana Trank**: 4,99€ für 350 Mana (1,43 Cent/Mana)
|
||||
- **Mittlerer Mana Trank**: 9,99€ für 700 Mana (1,43 Cent/Mana)
|
||||
- **Großer Mana Trank**: 19,99€ für 1.400 Mana (1,43 Cent/Mana)
|
||||
- **Riesiger Mana Trank**: 39,99€ für 2.800 Mana (1,43 Cent/Mana)
|
||||
|
||||
## Technische Integration
|
||||
|
||||
### Zugang für Nutzer
|
||||
|
||||
Verschiedene Wege der Nutzerfreischaltung:
|
||||
|
||||
- E-Mail-Einladungen durch Administratoren
|
||||
- Selbstregistrierung mit Freigabe
|
||||
|
||||
Spätere Features:
|
||||
|
||||
- Single Sign-On (SSO) Integration
|
||||
- Domain-basierte automatische Freischaltung
|
||||
|
||||
### Schnittstellen
|
||||
|
||||
- Web-Dashboard für alle gängigen Browser
|
||||
- App für iOS und Android
|
||||
|
||||
Spätere Features:
|
||||
|
||||
- REST-API für eigene Integrationen (Enterprise)
|
||||
- CSV-Export für Buchhaltung
|
||||
- Webhook-Benachrichtigungen
|
||||
|
||||
## Häufige Einsatzszenarien
|
||||
|
||||
### Pilotprojekt in großem Unternehmen
|
||||
|
||||
**Mana-Modell (50 Mitarbeiter)**:
|
||||
|
||||
1. 2x Mana Meer Abonnements (99,98€/Monat)
|
||||
2. 10.000 Start-Mana + 400 Mana tägliche Regeneration
|
||||
3. Credits werden auf alle 50 Mitarbeiter verteilt
|
||||
4. Bei intensiven Phasen: Zusätzliche Mana-Tränke
|
||||
|
||||
**Klassisches Lizenzmodell zum Vergleich**:
|
||||
|
||||
- 50 Nutzer-Lizenzen à 19,99€ = 999,50€/Monat
|
||||
- Ungenutzte Lizenzen bei Urlaub/Krankheit verfallen
|
||||
- Keine Flexibilität bei Mitarbeiterwechsel
|
||||
|
||||
### Universitäres Forschungsprojekt
|
||||
|
||||
**Mana-Modell (15 Forscher, 1 Jahr)**:
|
||||
|
||||
1. 1x Mana See Jahresabo (239,99€)
|
||||
2. 3.000 Start-Mana + 100 Mana täglich
|
||||
3. Alle 15 Forscher teilen sich die Credits
|
||||
4. Perfekt für unregelmäßige Interview-Phasen
|
||||
|
||||
**Klassisches Lizenzmodell zum Vergleich**:
|
||||
|
||||
- 15 Lizenzen à 9,99€/Monat = 1’798,20€ für 1 Jahr
|
||||
- Viele Lizenzen bleiben ungenutzt (nicht alle forschen gleichzeitig)
|
||||
- Keine Übertragbarkeit zwischen Teammitgliedern
|
||||
|
||||
### Beratungsunternehmen
|
||||
|
||||
**Mana-Modell (20 Berater)**:
|
||||
|
||||
1. 1x Mana Meer + 1x Mana See (79,98€/Monat)
|
||||
2. 8.000 Start-Mana + 300 Mana täglich
|
||||
3. Flexibel auf alle Berater verteilbar
|
||||
4. Anpassbar an Projektphasen
|
||||
|
||||
**Klassisches Lizenzmodell zum Vergleich**:
|
||||
|
||||
- 20 Lizenzen à 14,99€ = 299,80€/Monat
|
||||
- Fixkosten auch in projektarmen Zeiten
|
||||
- Neue Mitarbeiter brauchen sofort eigene Lizenz
|
||||
|
||||
## Zusammenfassung
|
||||
|
||||
Das Mana-Creditsystem in Memoro bietet erhebliche Vorteile gegenüber klassischen Lizenzmodellen:
|
||||
|
||||
**Kostenersparnis**: Die Beispiele zeigen Einsparungen von 70-90% gegenüber traditionellen Seat-Lizenzen. Ein Unternehmen mit 50 Mitarbeitern zahlt nur 99,98€ statt 999,50€ monatlich.
|
||||
|
||||
**Flexibilität**: Credits können beliebig zwischen Nutzern verteilt werden - ideal für Teams mit wechselnder Zusammensetzung oder unterschiedlichen Nutzungsintensitäten.
|
||||
|
||||
**Keine Verschwendung**: Ungenutzte Credits sammeln sich im Speicher statt zu verfallen. Bei Urlaub oder ruhigen Phasen entstehen keine ungenutzten Kosten.
|
||||
|
||||
**Skalierbarkeit**: Von der kostenlosen Variante bis zu Enterprise-Lösungen - das System wächst mit den Anforderungen.
|
||||
|
||||
Mit nur 120 Mana pro Stunde (1,20 €) erhalten Teams eine vollständige Transkription plus KI-gestützte Analyse - flexibel verteilbar auf beliebig viele Nutzer.
|
||||
215
apps/manacore/apps/landing/src/content/context/questions.md
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
---
|
||||
title: "Häufige Fragen zu Mana"
|
||||
description: "Detaillierte Antworten auf alle wichtigen Fragen rund um Mana, Credits und die Nutzung der KI-Tools"
|
||||
order: 2
|
||||
icon: "mdi:help-circle"
|
||||
publishedAt: 2024-01-01
|
||||
updatedAt: 2024-01-15
|
||||
---
|
||||
|
||||
# Häufige Fragen zu Mana
|
||||
|
||||
## Allgemeine Fragen
|
||||
|
||||
### Was genau ist Mana?
|
||||
|
||||
Mana ist eine Plattform, die Ihnen Zugang zu über 20 führenden KI-Tools mit einem einzigen Credit-System bietet. Statt multiple Abonnements bei ChatGPT, Claude, Midjourney etc. zu verwalten, kaufen Sie Mana-Credits und nutzen alle Tools flexibel nach Bedarf.
|
||||
|
||||
### Wie unterscheidet sich Mana von direkten Abonnements?
|
||||
|
||||
**Direkte Abos:**
|
||||
- Fixe monatliche Kosten pro Tool
|
||||
- Ungenutzte Kapazitäten verfallen
|
||||
- Mehrere Accounts und Logins
|
||||
- Verschiedene Rechnungen
|
||||
|
||||
**Mana:**
|
||||
- Ein Account für alle Tools
|
||||
- Credits nur bei Nutzung verbraucht
|
||||
- Keine monatlichen Fixkosten
|
||||
- Eine transparente Abrechnung
|
||||
|
||||
### Welche KI-Tools sind verfügbar?
|
||||
|
||||
Aktuelle Tool-Kategorien:
|
||||
- **Text-KI**: ChatGPT-4, Claude 3, Gemini Pro, Llama 3
|
||||
- **Bild-KI**: Midjourney, DALL-E 3, Stable Diffusion XL
|
||||
- **Code**: GitHub Copilot, Cursor, Codeium
|
||||
- **Recherche**: Perplexity Pro, You.com
|
||||
- **Spezialisiert**: Jasper AI, Copy.ai, Writesonic
|
||||
|
||||
Die vollständige Liste finden Sie unter [/apps](/apps).
|
||||
|
||||
## Credits & Preise
|
||||
|
||||
### Wie funktionieren Mana-Credits?
|
||||
|
||||
Mana-Credits sind die universelle Währung auf unserer Plattform:
|
||||
- 1 Credit = 0,01€
|
||||
- Credits werden bei jeder Nutzung abgezogen
|
||||
- Der Verbrauch hängt vom Tool und der Aktion ab
|
||||
- Credits verfallen nicht
|
||||
|
||||
### Wie viele Credits brauche ich?
|
||||
|
||||
Beispielhafte Verbräuche:
|
||||
- **ChatGPT-4 Anfrage**: 10-20 Credits
|
||||
- **Claude 3 Anfrage**: 15-25 Credits
|
||||
- **Midjourney Bild**: 40-60 Credits
|
||||
- **DALL-E 3 Bild**: 30-50 Credits
|
||||
- **1 Stunde Coding**: 150-250 Credits
|
||||
|
||||
Ein durchschnittlicher Nutzer verbraucht 2.000-5.000 Credits/Monat.
|
||||
|
||||
### Gibt es Mengenrabatte?
|
||||
|
||||
Ja! Je mehr Credits Sie kaufen, desto günstiger wird der Einzelpreis:
|
||||
- 1.000 Credits: 10€ (1 Cent/Credit)
|
||||
- 5.000 Credits: 45€ (0,9 Cent/Credit)
|
||||
- 10.000 Credits: 80€ (0,8 Cent/Credit)
|
||||
- 50.000 Credits: 350€ (0,7 Cent/Credit)
|
||||
|
||||
### Kann ich Credits zurückgeben?
|
||||
|
||||
Ungenutzte Credits können nicht zurückgegeben werden, aber sie verfallen auch nicht. Sie bleiben dauerhaft in Ihrem Account.
|
||||
|
||||
## Nutzung & Features
|
||||
|
||||
### Wie starte ich mit Mana?
|
||||
|
||||
1. **Registrierung**: Kostenloses Konto erstellen
|
||||
2. **Startguthaben**: 500 Credits gratis zum Testen
|
||||
3. **Credits kaufen**: Bei Bedarf aufstocken
|
||||
4. **Tools nutzen**: Einfach loslegen!
|
||||
|
||||
### Brauche ich API-Keys?
|
||||
|
||||
Nein! Wir verwalten alle API-Verbindungen für Sie. Sie müssen sich um nichts kümmern - einfach Tool auswählen und nutzen.
|
||||
|
||||
### Gibt es Nutzungslimits?
|
||||
|
||||
Ihre einzige Begrenzung ist Ihr Credit-Guthaben. Keine künstlichen Limits wie "30 Nachrichten in 3 Stunden" wie bei manchen Direkt-Abos.
|
||||
|
||||
### Kann ich zwischen Tools wechseln?
|
||||
|
||||
Ja, beliebig oft! Nutzen Sie ChatGPT für eine Aufgabe, wechseln Sie zu Claude für die nächste - Ihre Credits funktionieren überall.
|
||||
|
||||
## Teams & Business
|
||||
|
||||
### Gibt es Team-Accounts?
|
||||
|
||||
Ja! Team-Features umfassen:
|
||||
- Geteilte Credit-Pools
|
||||
- Nutzer-Verwaltung
|
||||
- Verbrauchsstatistiken pro Mitglied
|
||||
- Rollen & Berechtigungen
|
||||
|
||||
### Wie funktioniert die Abrechnung für Teams?
|
||||
|
||||
- Ein zentraler Credit-Pool für alle Teammitglieder
|
||||
- Monatliche Sammelrechnung möglich
|
||||
- Detaillierte Verbrauchsberichte
|
||||
- Budget-Limits pro Nutzer einstellbar
|
||||
|
||||
### Gibt es Enterprise-Lösungen?
|
||||
|
||||
Für Unternehmen ab 50 Mitarbeitern bieten wir:
|
||||
- Individuelle Preisgestaltung
|
||||
- SLA-Garantien
|
||||
- Dedizierter Support
|
||||
- On-Premise Option
|
||||
- API-Zugang für Integrationen
|
||||
|
||||
## Sicherheit & Datenschutz
|
||||
|
||||
### Sind meine Daten sicher?
|
||||
|
||||
Absolut!
|
||||
- Ende-zu-Ende Verschlüsselung
|
||||
- Server in Deutschland
|
||||
- DSGVO-konform
|
||||
- ISO 27001 zertifiziert
|
||||
- Keine Datenweitergabe
|
||||
|
||||
### Werden meine Prompts gespeichert?
|
||||
|
||||
Nein. Wir leiten Ihre Anfragen nur weiter und speichern keine Inhalte. Lediglich Metadaten (Zeitpunkt, Tool, Credit-Verbrauch) werden für die Abrechnung erfasst.
|
||||
|
||||
### Kann ich Mana für sensible Daten nutzen?
|
||||
|
||||
Ja, aber beachten Sie:
|
||||
- Wir verschlüsseln die Übertragung
|
||||
- Die Verarbeitung erfolgt bei den jeweiligen KI-Anbietern
|
||||
- Für hochsensible Daten empfehlen wir unsere Enterprise-Lösung
|
||||
|
||||
## Technische Fragen
|
||||
|
||||
### Welche Browser werden unterstützt?
|
||||
|
||||
Mana funktioniert mit allen modernen Browsern:
|
||||
- Chrome/Edge (letzte 2 Versionen)
|
||||
- Firefox (letzte 2 Versionen)
|
||||
- Safari (letzte 2 Versionen)
|
||||
|
||||
### Gibt es eine API?
|
||||
|
||||
Aktuell nur für Enterprise-Kunden. Eine öffentliche API ist für Q2 2024 geplant.
|
||||
|
||||
### Gibt es mobile Apps?
|
||||
|
||||
Mobile Apps für iOS und Android sind in Entwicklung (geplant Q2 2024). Die Web-App ist bereits mobil optimiert.
|
||||
|
||||
### Was passiert bei Ausfällen?
|
||||
|
||||
- 99,9% Uptime-Garantie
|
||||
- Automatisches Failover
|
||||
- Status-Page unter status.mana.ai
|
||||
- Bei Ausfall werden keine Credits abgezogen
|
||||
|
||||
## Zahlung & Kündigung
|
||||
|
||||
### Welche Zahlungsmethoden gibt es?
|
||||
|
||||
- Kreditkarte (Visa, Mastercard, Amex)
|
||||
- PayPal
|
||||
- SEPA-Lastschrift
|
||||
- Rechnung (ab 1.000€)
|
||||
- Krypto (Bitcoin, Ethereum)
|
||||
|
||||
### Kann ich jederzeit kündigen?
|
||||
|
||||
Es gibt nichts zu kündigen! Mana hat keine Abonnements oder Vertragslaufzeiten. Sie kaufen Credits bei Bedarf.
|
||||
|
||||
### Was passiert mit meinen Credits bei Inaktivität?
|
||||
|
||||
Credits verfallen nicht. Selbst wenn Sie Mana ein Jahr nicht nutzen, sind Ihre Credits noch da.
|
||||
|
||||
### Gibt es eine Geld-zurück-Garantie?
|
||||
|
||||
Für Erstnutzer bieten wir eine 14-tägige Zufriedenheitsgarantie auf den ersten Credit-Kauf.
|
||||
|
||||
## Support & Hilfe
|
||||
|
||||
### Wie erreiche ich den Support?
|
||||
|
||||
- Live-Chat: Direkt in der App
|
||||
- E-Mail: support@mana.ai
|
||||
- Telefon: +49 30 12345678 (Mo-Fr 9-18 Uhr)
|
||||
- Help Center: help.mana.ai
|
||||
|
||||
### In welchen Sprachen gibt es Support?
|
||||
|
||||
- Deutsch (Hauptsprache)
|
||||
- Englisch
|
||||
- Italienisch
|
||||
- Weitere Sprachen folgen
|
||||
|
||||
### Gibt es Schulungen?
|
||||
|
||||
Ja! Wir bieten:
|
||||
- Video-Tutorials für alle Tools
|
||||
- Wöchentliche Webinare
|
||||
- 1:1 Onboarding für Teams
|
||||
- Ausführliche Dokumentation
|
||||
|
||||
Haben Sie weitere Fragen? Kontaktieren Sie uns gerne!
|
||||
204
apps/manacore/apps/landing/src/content/legal/agb.md
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
---
|
||||
title: Allgemeine Geschäftsbedingungen
|
||||
description: Allgemeine Geschäftsbedingungen für die Nutzung von Mana und zugehörigen Services
|
||||
lastUpdated: 2024-01-15
|
||||
order: 2
|
||||
---
|
||||
|
||||
## 1. Geltungsbereich
|
||||
|
||||
### 1.1 Anbieter
|
||||
|
||||
Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für alle Verträge zwischen der Mana Systems GmbH (nachfolgend "Mana", "wir" oder "uns") und unseren Kunden (nachfolgend "Nutzer" oder "Sie") über die Nutzung der Mana-Plattform und aller damit verbundenen Dienste.
|
||||
|
||||
### 1.2 Leistungsumfang
|
||||
|
||||
Mana bietet ein Credit-basiertes System für die Nutzung verschiedener KI-Tools und Services. Die genaue Beschreibung der Leistungen ergibt sich aus der jeweiligen Leistungsbeschreibung auf unserer Website.
|
||||
|
||||
### 1.3 Geltung
|
||||
|
||||
Mit der Registrierung und Nutzung unserer Services akzeptieren Sie diese AGB. Abweichende Bedingungen des Nutzers gelten nur, wenn wir diesen ausdrücklich schriftlich zustimmen.
|
||||
|
||||
## 2. Vertragsschluss
|
||||
|
||||
### 2.1 Registrierung
|
||||
|
||||
Die Nutzung von Mana setzt eine Registrierung voraus. Bei der Registrierung müssen Sie wahrheitsgemäße und vollständige Angaben machen.
|
||||
|
||||
### 2.2 Account-Erstellung
|
||||
|
||||
Mit erfolgreicher Registrierung kommt ein Nutzungsvertrag zustande. Sie erhalten Zugangsdaten, die Sie vertraulich behandeln müssen.
|
||||
|
||||
### 2.3 Vertragspartner
|
||||
|
||||
Verträge für Privatpersonen und Unternehmen unterliegen diesen AGB. Für Bildungseinrichtungen und NGOs können Sonderkonditionen gelten.
|
||||
|
||||
## 3. Mana-Credits
|
||||
|
||||
### 3.1 Credit-System
|
||||
|
||||
- 1 Mana entspricht 0,01 EUR (1 Cent)
|
||||
- Credits verfallen nicht
|
||||
- Credits sind nicht übertragbar (außer bei Team-Accounts)
|
||||
- Credits können nicht in Bargeld umgewandelt werden
|
||||
|
||||
### 3.2 Erwerb von Credits
|
||||
|
||||
Credits können erworben werden durch:
|
||||
- Einmalkauf
|
||||
- Abonnements mit automatischer Regeneration
|
||||
- Sonderaktionen und Promotions
|
||||
|
||||
### 3.3 Preise
|
||||
|
||||
Alle Preise verstehen sich inklusive der gesetzlichen Mehrwertsteuer. Preisänderungen behalten wir uns vor, bereits erworbene Credits sind davon nicht betroffen.
|
||||
|
||||
## 4. Nutzung der Services
|
||||
|
||||
### 4.1 Bestimmungsgemäße Nutzung
|
||||
|
||||
Die Services dürfen nur für legale Zwecke genutzt werden. Insbesondere untersagt ist:
|
||||
- Erstellung illegaler oder schädlicher Inhalte
|
||||
- Verstoß gegen Urheberrechte oder andere Schutzrechte
|
||||
- Spam oder Belästigung
|
||||
- Umgehung von Sicherheitsmaßnahmen
|
||||
|
||||
### 4.2 Fair Use
|
||||
|
||||
Wir behalten uns vor, bei missbräuchlicher oder übermäßiger Nutzung Accounts zu limitieren oder zu sperren.
|
||||
|
||||
### 4.3 Verfügbarkeit
|
||||
|
||||
Wir bemühen uns um eine hohe Verfügbarkeit unserer Services, können diese aber nicht garantieren. Geplante Wartungsarbeiten werden rechtzeitig angekündigt.
|
||||
|
||||
## 5. Abonnements
|
||||
|
||||
### 5.1 Laufzeit
|
||||
|
||||
Abonnements haben eine Mindestlaufzeit von einem Monat und verlängern sich automatisch, sofern nicht gekündigt wird.
|
||||
|
||||
### 5.2 Kündigung
|
||||
|
||||
- Monatliche Abos: Kündigung bis zum Ende des Abrechnungszeitraums
|
||||
- Jährliche Abos: Kündigung mit 30 Tagen Vorlauf zum Jahresende
|
||||
- Kündigung erfolgt über das Nutzer-Dashboard oder per E-Mail
|
||||
|
||||
### 5.3 Credit-Regeneration
|
||||
|
||||
Bei Abonnements regenerieren sich Credits täglich bis zum vereinbarten Speicherlimit. Nicht genutzte Regeneration verfällt nicht.
|
||||
|
||||
## 6. Team- und Business-Accounts
|
||||
|
||||
### 6.1 Verwaltung
|
||||
|
||||
Der Account-Inhaber ist verantwortlich für:
|
||||
- Verwaltung der Nutzer
|
||||
- Verteilung der Credits
|
||||
- Einhaltung der AGB durch alle Nutzer
|
||||
|
||||
### 6.2 Haftung
|
||||
|
||||
Der Account-Inhaber haftet für die Nutzung durch alle autorisierten Nutzer.
|
||||
|
||||
## 7. Datenschutz
|
||||
|
||||
### 7.1 Datenverarbeitung
|
||||
|
||||
Die Verarbeitung personenbezogener Daten erfolgt gemäß unserer Datenschutzerklärung.
|
||||
|
||||
### 7.2 Vertraulichkeit
|
||||
|
||||
Wir behandeln Ihre Daten und Inhalte vertraulich. Eine Nutzung für KI-Training findet nicht statt.
|
||||
|
||||
## 8. Geistiges Eigentum
|
||||
|
||||
### 8.1 Nutzer-Inhalte
|
||||
|
||||
Sie behalten alle Rechte an Ihren Eingaben und generierten Inhalten. Sie räumen uns lediglich die für die Serviceerbringung notwendigen Nutzungsrechte ein.
|
||||
|
||||
### 8.2 Mana-Inhalte
|
||||
|
||||
Alle Rechte an der Mana-Plattform, dem Design und der Marke verbleiben bei uns.
|
||||
|
||||
## 9. Haftung
|
||||
|
||||
### 9.1 Haftungsbeschränkung
|
||||
|
||||
Wir haften unbeschränkt bei:
|
||||
- Vorsatz und grober Fahrlässigkeit
|
||||
- Verletzung von Leben, Körper oder Gesundheit
|
||||
- Übernahme einer Garantie
|
||||
|
||||
Im Übrigen ist unsere Haftung auf den vorhersehbaren, vertragstypischen Schaden begrenzt.
|
||||
|
||||
### 9.2 Keine Haftung für KI-Inhalte
|
||||
|
||||
Wir übernehmen keine Haftung für die Richtigkeit, Vollständigkeit oder Rechtmäßigkeit von KI-generierten Inhalten.
|
||||
|
||||
## 10. Support
|
||||
|
||||
### 10.1 Support-Leistungen
|
||||
|
||||
- E-Mail-Support für alle Nutzer
|
||||
- Priority-Support für Business-Kunden
|
||||
- Dokumentation und FAQ
|
||||
|
||||
### 10.2 Reaktionszeiten
|
||||
|
||||
Wir bemühen uns um schnelle Bearbeitung, können aber keine garantierten Reaktionszeiten zusichern (außer bei SLA-Vereinbarungen).
|
||||
|
||||
## 11. Änderungen
|
||||
|
||||
### 11.1 AGB-Änderungen
|
||||
|
||||
Wir behalten uns vor, diese AGB zu ändern. Änderungen werden Ihnen mindestens 30 Tage vorher mitgeteilt.
|
||||
|
||||
### 11.2 Service-Änderungen
|
||||
|
||||
Wir können Services erweitern, ändern oder einstellen. Bei wesentlichen Änderungen informieren wir Sie rechtzeitig.
|
||||
|
||||
## 12. Kündigung und Sperrung
|
||||
|
||||
### 12.1 Ordentliche Kündigung
|
||||
|
||||
Beide Parteien können den Vertrag unter Einhaltung der vereinbarten Fristen kündigen.
|
||||
|
||||
### 12.2 Außerordentliche Kündigung
|
||||
|
||||
Bei schwerwiegenden Verstößen gegen diese AGB können wir Ihren Account sofort sperren.
|
||||
|
||||
### 12.3 Folgen der Kündigung
|
||||
|
||||
- Verbleibende Credits verfallen
|
||||
- Daten werden gemäß Datenschutzerklärung gelöscht
|
||||
- Keine Rückerstattung von Credits
|
||||
|
||||
## 13. Streitbeilegung
|
||||
|
||||
### 13.1 Anwendbares Recht
|
||||
|
||||
Es gilt deutsches Recht unter Ausschluss des UN-Kaufrechts.
|
||||
|
||||
### 13.2 Gerichtsstand
|
||||
|
||||
Gerichtsstand für Kaufleute ist unser Geschäftssitz.
|
||||
|
||||
### 13.3 Online-Streitbeilegung
|
||||
|
||||
Die EU-Kommission stellt eine Plattform zur Online-Streitbeilegung bereit: https://ec.europa.eu/consumers/odr
|
||||
|
||||
## 14. Salvatorische Klausel
|
||||
|
||||
Sollten einzelne Bestimmungen dieser AGB unwirksam sein, bleibt die Wirksamkeit der übrigen Bestimmungen unberührt.
|
||||
|
||||
## 15. Kontakt
|
||||
|
||||
Bei Fragen zu diesen AGB kontaktieren Sie uns:
|
||||
|
||||
Mana Systems GmbH
|
||||
E-Mail: legal@mana.ai
|
||||
Telefon: [Telefonnummer]
|
||||
|
||||
---
|
||||
|
||||
*Stand: Januar 2024*
|
||||
248
apps/manacore/apps/landing/src/content/legal/datenschutz.md
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
---
|
||||
title: Datenschutzerklärung
|
||||
description: Informationen zum Datenschutz und zur Verarbeitung personenbezogener Daten bei Mana
|
||||
lastUpdated: 2024-01-15
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 1. Datenschutz auf einen Blick
|
||||
|
||||
### Allgemeine Hinweise
|
||||
|
||||
Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie unsere Website besuchen und unsere Dienste nutzen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
|
||||
|
||||
### Datenerfassung bei Mana
|
||||
|
||||
**Wer ist verantwortlich für die Datenerfassung?**
|
||||
Die Datenverarbeitung erfolgt durch den Betreiber der Website. Die Kontaktdaten finden Sie im Impressum.
|
||||
|
||||
**Wie erfassen wir Ihre Daten?**
|
||||
Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.B. um Daten handeln, die Sie bei der Registrierung oder in Kontaktformularen eingeben.
|
||||
|
||||
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).
|
||||
|
||||
**Wofür nutzen wir Ihre Daten?**
|
||||
- Zur Bereitstellung und Abrechnung unserer Mana-Services
|
||||
- Zur Verwaltung Ihrer Mana-Credits
|
||||
- Zur Kommunikation mit Ihnen
|
||||
- Zur Verbesserung unserer Dienste
|
||||
- Zur Erfüllung rechtlicher Verpflichtungen
|
||||
|
||||
**Welche Rechte haben Sie?**
|
||||
Sie haben jederzeit das Recht auf:
|
||||
- Auskunft über Ihre gespeicherten Daten
|
||||
- Berichtigung oder Löschung Ihrer Daten
|
||||
- Einschränkung der Verarbeitung
|
||||
- Widerspruch gegen die Verarbeitung
|
||||
- Datenübertragbarkeit
|
||||
|
||||
## 2. Hosting und Content Delivery Networks (CDN)
|
||||
|
||||
### Hosting
|
||||
|
||||
Unsere Website und Services werden auf Servern in Deutschland gehostet. Dies gewährleistet, dass Ihre Daten innerhalb der EU verarbeitet werden und den strengen deutschen Datenschutzbestimmungen unterliegen.
|
||||
|
||||
**Server-Standort:** Frankfurt am Main, Deutschland
|
||||
**Sicherheit:** SSL-Verschlüsselung, regelmäßige Backups, Firewall-Schutz
|
||||
|
||||
## 3. Allgemeine Hinweise und Pflichtinformationen
|
||||
|
||||
### Datenschutz
|
||||
|
||||
Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
|
||||
|
||||
### Hinweis zur verantwortlichen Stelle
|
||||
|
||||
Verantwortliche Stelle für die Datenverarbeitung ist:
|
||||
|
||||
Mana Systems GmbH
|
||||
[Adresse]
|
||||
[PLZ Ort]
|
||||
Deutschland
|
||||
|
||||
Telefon: [Telefonnummer]
|
||||
E-Mail: datenschutz@mana.ai
|
||||
|
||||
### Speicherdauer
|
||||
|
||||
Wir speichern Ihre personenbezogenen Daten nur so lange, wie es für die Zwecke erforderlich ist, für die sie erhoben wurden, oder wie es gesetzliche Aufbewahrungsfristen vorsehen.
|
||||
|
||||
### Pflichtangaben
|
||||
|
||||
Die Bereitstellung bestimmter personenbezogener Daten kann gesetzlich vorgeschrieben sein (z.B. Steuervorschriften) oder sich aus vertraglichen Regelungen ergeben. Für die Nutzung unserer Mana-Services ist die Angabe einer E-Mail-Adresse erforderlich.
|
||||
|
||||
## 4. Datenerfassung bei Mana
|
||||
|
||||
### Registrierung und Account-Erstellung
|
||||
|
||||
Bei der Registrierung für Mana erfassen wir:
|
||||
- E-Mail-Adresse
|
||||
- Passwort (verschlüsselt gespeichert)
|
||||
- Optional: Name, Unternehmen, Telefonnummer
|
||||
|
||||
**Rechtsgrundlage:** Art. 6 Abs. 1 lit. b DSGVO (Vertragserfüllung)
|
||||
|
||||
### Mana-Credit-System
|
||||
|
||||
Für die Verwaltung Ihrer Mana-Credits speichern wir:
|
||||
- Transaktionshistorie
|
||||
- Credit-Stand
|
||||
- Nutzungsstatistiken
|
||||
- Abrechnungsdaten
|
||||
|
||||
Diese Daten sind erforderlich für die ordnungsgemäße Abrechnung und Bereitstellung unserer Services.
|
||||
|
||||
### Nutzung von KI-Tools
|
||||
|
||||
Bei der Nutzung von KI-Tools über Mana:
|
||||
- Wir leiten Ihre Anfragen verschlüsselt an die jeweiligen KI-Anbieter weiter
|
||||
- Ihre Eingaben werden NICHT für das Training von KI-Modellen verwendet
|
||||
- Temporäre Speicherung nur zur Servicebereitstellung
|
||||
- Automatische Löschung nach Verarbeitung
|
||||
|
||||
### Memoro App
|
||||
|
||||
Bei Nutzung der Memoro-App:
|
||||
- Audio-Aufnahmen werden verschlüsselt übertragen
|
||||
- Transkripte werden in Ihrem Account gespeichert
|
||||
- Sie haben volle Kontrolle über Ihre Aufnahmen
|
||||
- Löschung jederzeit möglich
|
||||
|
||||
## 5. Zahlungsdaten
|
||||
|
||||
### Zahlungsabwicklung
|
||||
|
||||
Die Zahlungsabwicklung erfolgt über zertifizierte Zahlungsdienstleister:
|
||||
- Stripe (für Kreditkarten)
|
||||
- PayPal
|
||||
- SEPA-Lastschrift
|
||||
|
||||
Wir speichern keine Kreditkartendaten. Diese werden direkt beim Zahlungsdienstleister verarbeitet.
|
||||
|
||||
### Rechnungsdaten
|
||||
|
||||
Für die Rechnungsstellung speichern wir:
|
||||
- Name/Firmenname
|
||||
- Anschrift
|
||||
- Steuernummer (bei Unternehmen)
|
||||
- Zahlungshistorie
|
||||
|
||||
**Aufbewahrungsfrist:** 10 Jahre gemäß steuerrechtlichen Vorschriften
|
||||
|
||||
## 6. Newsletter
|
||||
|
||||
### Newsletter-Versand
|
||||
|
||||
Mit Ihrer Einwilligung senden wir Ihnen unseren Newsletter mit:
|
||||
- Produkt-Updates
|
||||
- Tipps zur Mana-Nutzung
|
||||
- Sonderangebote
|
||||
|
||||
**Abmeldung:** Jeder Newsletter enthält einen Abmeldelink. Sie können sich jederzeit abmelden.
|
||||
|
||||
## 7. Cookies und Tracking
|
||||
|
||||
### Technisch notwendige Cookies
|
||||
|
||||
Wir verwenden nur technisch notwendige Cookies für:
|
||||
- Session-Management
|
||||
- Spracheinstellungen
|
||||
- Sicherheitsfunktionen
|
||||
|
||||
### Analytics
|
||||
|
||||
Wir verwenden datenschutzfreundliche Analytics-Tools:
|
||||
- Anonymisierte IP-Adressen
|
||||
- Kein Cross-Site-Tracking
|
||||
- Opt-Out möglich
|
||||
|
||||
## 8. Ihre Rechte
|
||||
|
||||
### Auskunftsrecht
|
||||
|
||||
Sie haben das Recht, Auskunft über Ihre gespeicherten personenbezogenen Daten zu erhalten.
|
||||
|
||||
### Berichtigungsrecht
|
||||
|
||||
Sie haben das Recht, unrichtige Daten berichtigen zu lassen.
|
||||
|
||||
### Löschungsrecht
|
||||
|
||||
Sie können die Löschung Ihrer Daten verlangen, soweit keine gesetzlichen Aufbewahrungspflichten entgegenstehen.
|
||||
|
||||
### Datenübertragbarkeit
|
||||
|
||||
Sie haben das Recht, Ihre Daten in einem strukturierten, maschinenlesbaren Format zu erhalten.
|
||||
|
||||
### Widerspruchsrecht
|
||||
|
||||
Sie können der Verarbeitung Ihrer Daten jederzeit widersprechen.
|
||||
|
||||
### Beschwerderecht
|
||||
|
||||
Sie haben das Recht, sich bei der zuständigen Aufsichtsbehörde zu beschweren.
|
||||
|
||||
## 9. Datensicherheit
|
||||
|
||||
### Unsere Sicherheitsmaßnahmen
|
||||
|
||||
- Ende-zu-Ende-Verschlüsselung für sensible Daten
|
||||
- SSL/TLS-Verschlüsselung aller Verbindungen
|
||||
- Regelmäßige Sicherheitsaudits
|
||||
- Zugriffskontrolle und Berechtigungsmanagement
|
||||
- Regelmäßige Backups
|
||||
- Incident-Response-Plan
|
||||
|
||||
### Ihre Verantwortung
|
||||
|
||||
- Sicheres Passwort wählen
|
||||
- Zugangsdaten vertraulich behandeln
|
||||
- Zwei-Faktor-Authentifizierung aktivieren (empfohlen)
|
||||
|
||||
## 10. Datenübermittlung an Dritte
|
||||
|
||||
### KI-Anbieter
|
||||
|
||||
Für die Bereitstellung der KI-Services übermitteln wir Daten an:
|
||||
- OpenAI (ChatGPT)
|
||||
- Anthropic (Claude)
|
||||
- Weitere KI-Anbieter
|
||||
|
||||
**Wichtig:** Wir haben mit allen Anbietern Vereinbarungen getroffen, dass Ihre Daten nicht für Trainingszwecke verwendet werden.
|
||||
|
||||
### Keine Weitergabe zu Werbezwecken
|
||||
|
||||
Wir geben Ihre Daten niemals zu Werbezwecken an Dritte weiter.
|
||||
|
||||
## 11. Internationale Datenübermittlung
|
||||
|
||||
### EU-Datenschutz
|
||||
|
||||
Ihre Daten werden primär innerhalb der EU verarbeitet. Bei Übermittlungen außerhalb der EU (z.B. an KI-Anbieter in den USA) stellen wir sicher, dass:
|
||||
- Standardvertragsklauseln vereinbart sind
|
||||
- Angemessene Schutzmaßnahmen bestehen
|
||||
- Ihre Rechte gewahrt bleiben
|
||||
|
||||
## 12. Minderjährigenschutz
|
||||
|
||||
Unsere Services richten sich nicht an Personen unter 16 Jahren. Wir erfassen wissentlich keine Daten von Minderjährigen.
|
||||
|
||||
## 13. Änderungen der Datenschutzerklärung
|
||||
|
||||
Wir behalten uns vor, diese Datenschutzerklärung anzupassen. Die aktuelle Version finden Sie immer auf unserer Website. Bei wesentlichen Änderungen informieren wir Sie per E-Mail.
|
||||
|
||||
## 14. Kontakt
|
||||
|
||||
Bei Fragen zum Datenschutz erreichen Sie uns unter:
|
||||
|
||||
**E-Mail:** datenschutz@mana.ai
|
||||
**Telefon:** [Telefonnummer]
|
||||
**Post:** Mana Systems GmbH, Datenschutz, [Adresse]
|
||||
|
||||
Unser Datenschutzbeauftragter:
|
||||
[Name des Datenschutzbeauftragten]
|
||||
[Kontaktdaten]
|
||||
|
||||
---
|
||||
|
||||
*Stand: Januar 2024*
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
title: "Unser Team: Die Menschen hinter Mana"
|
||||
description: "Lernen Sie das leidenschaftliche Team kennen, das Tag für Tag daran arbeitet, KI für alle zugänglich zu machen."
|
||||
category: team
|
||||
order: 3
|
||||
featured: false
|
||||
---
|
||||
|
||||
## Ein Team, eine Mission
|
||||
|
||||
Hinter Mana steht ein diverses Team von Visionären, Entwicklern und KI-Enthusiasten. Was uns vereint? Die Überzeugung, dass KI-Technologie für jeden zugänglich sein sollte.
|
||||
|
||||
### Unsere Gründungsgeschichte
|
||||
|
||||
Mana wurde 2023 aus einer einfachen Beobachtung heraus geboren: Während große Unternehmen problemlos Zugang zu allen KI-Tools hatten, kämpften kleine Teams und Einzelpersonen mit hohen Kosten und komplexen Integrationen.
|
||||
|
||||
Unser Gründer, Till Schneider, erlebte diese Frustration hautnah:
|
||||
|
||||
> "Ich jonglierte zwischen fünf verschiedenen KI-Abonnements, zahlte über 500€ monatlich und nutzte trotzdem nur einen Bruchteil der gebuchten Leistungen. Da wusste ich: Es muss einen besseren Weg geben."
|
||||
|
||||
## Die Menschen, die Mana möglich machen
|
||||
|
||||
### Führungsteam
|
||||
|
||||
**Till Schneider** - CEO & Gründer
|
||||
- Serienunternehmer mit 10+ Jahren Erfahrung im SaaS-Bereich
|
||||
- Leidenschaft für Demokratisierung von Technologie
|
||||
- Vision: "KI sollte so einfach zugänglich sein wie Strom aus der Steckdose"
|
||||
|
||||
**Dr. Sarah Chen** - CTO
|
||||
- KI-Forscherin mit Doktortitel von Stanford
|
||||
- Früher: Lead Engineer bei OpenAI
|
||||
- Fokus: Nahtlose Integration verschiedener KI-Modelle
|
||||
|
||||
**Michael Okonkwo** - Head of Product
|
||||
- Product Designer mit Hintergrund in User Psychology
|
||||
- Mission: "Komplexe Technologie einfach nutzbar machen"
|
||||
- Verantwortlich für das intuitive Mana-Interface
|
||||
|
||||
### Unser wachsendes Team
|
||||
|
||||
Heute besteht Mana aus über 30 talentierten Menschen aus 15 verschiedenen Ländern:
|
||||
|
||||
- **Engineering**: 15 Entwickler, die an der perfekten Integration arbeiten
|
||||
- **Customer Success**: 8 Experten, die Ihnen bei jedem Schritt helfen
|
||||
- **Business Development**: 5 Strategen, die neue Partnerschaften schmieden
|
||||
- **Operations**: 3 Profis, die alles am Laufen halten
|
||||
|
||||
## Unsere Kultur
|
||||
|
||||
### Remote-First, aber verbunden
|
||||
|
||||
Wir arbeiten von überall auf der Welt, aber unsere wöchentlichen All-Hands und quartalsweisen Team-Retreats halten uns eng verbunden.
|
||||
|
||||
### Diversity & Inclusion
|
||||
|
||||
- 40% Frauen in Führungspositionen
|
||||
- Team-Mitglieder aus 15+ Ländern
|
||||
- Aktive Förderung von unterrepräsentierten Gruppen in Tech
|
||||
|
||||
### Work-Life-Balance
|
||||
|
||||
- Flexible Arbeitszeiten
|
||||
- Unlimited PTO (und wir sorgen dafür, dass es genutzt wird!)
|
||||
- Mental Health Days und Wellness-Budget
|
||||
|
||||
## Werden Sie Teil unseres Teams
|
||||
|
||||
Mana wächst schnell, und wir suchen immer nach talentierten Menschen, die unsere Vision teilen. Egal ob Engineering, Sales oder Customer Success - wenn Sie leidenschaftlich daran interessiert sind, KI zugänglicher zu machen, wollen wir von Ihnen hören!
|
||||
|
||||
### Offene Positionen
|
||||
|
||||
- Senior Backend Engineer (Go/Python)
|
||||
- Product Marketing Manager
|
||||
- Customer Success Engineer
|
||||
- Business Development Representative
|
||||
|
||||
Besuchen Sie unsere [Karriereseite](/careers) für alle offenen Stellen.
|
||||
|
||||
## Gemeinsam gestalten wir die Zukunft
|
||||
|
||||
Unser Team ist unsere Superkraft. Jeder bringt einzigartige Perspektiven und Fähigkeiten mit, aber wir alle teilen die gleiche Mission: Eine Welt zu schaffen, in der jeder die Kraft der KI nutzen kann.
|
||||
|
||||
Möchten Sie uns auf dieser Reise begleiten? Wir freuen uns darauf, Sie kennenzulernen!
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
title: "Unsere Vision: KI für alle zugänglich machen"
|
||||
description: "Wir glauben an eine Welt, in der jeder Zugang zu den besten KI-Tools hat - unabhängig von Unternehmensgröße oder Budget."
|
||||
category: vision
|
||||
order: 1
|
||||
featured: true
|
||||
---
|
||||
|
||||
## Die Zukunft der KI-Nutzung
|
||||
|
||||
Bei Mana haben wir eine klare Vision: Wir wollen die Art und Weise revolutionieren, wie Menschen und Unternehmen auf KI-Tools zugreifen. Statt sich an einzelne Anbieter zu binden oder zwischen verschiedenen Abonnements zu jonglieren, ermöglichen wir einen einheitlichen, flexiblen Zugang zu allen führenden KI-Technologien.
|
||||
|
||||
### Warum Mana?
|
||||
|
||||
Die KI-Landschaft entwickelt sich rasant. Neue Tools und Modelle erscheinen ständig, und was heute state-of-the-art ist, kann morgen schon überholt sein. Traditionelle Abonnement-Modelle können mit dieser Geschwindigkeit nicht mithalten:
|
||||
|
||||
- **Vendor Lock-in**: Bindung an einzelne Anbieter verhindert Innovation
|
||||
- **Hohe Kosten**: Multiple Abonnements summieren sich schnell
|
||||
- **Mangelnde Flexibilität**: Feste Pakete passen selten zum tatsächlichen Bedarf
|
||||
|
||||
### Unsere Lösung
|
||||
|
||||
Mit dem Mana-Kreditsystem schaffen wir eine neue Kategorie: **AI-as-a-Service** im wahrsten Sinne des Wortes. Ein Konto, ein Guthaben, unendliche Möglichkeiten.
|
||||
|
||||
## Der Weg vor uns
|
||||
|
||||
Unsere Vision geht über ein reines Zahlungssystem hinaus. Wir bauen an einer Zukunft, in der:
|
||||
|
||||
1. **KI demokratisiert wird**: Jeder hat Zugang zu den besten Tools, unabhängig von technischem Know-how
|
||||
2. **Innovation gefördert wird**: Entwickler können neue Apps bauen, ohne sich um Zahlungsinfrastruktur zu kümmern
|
||||
3. **Fairness herrscht**: Nutzer zahlen nur für das, was sie wirklich verwenden
|
||||
|
||||
### Die nächsten Schritte
|
||||
|
||||
- **2024**: Expansion auf 50+ integrierte KI-Tools
|
||||
- **2025**: Einführung von Mana Enterprise für Großunternehmen
|
||||
- **2026**: Globale Verfügbarkeit in 100+ Ländern
|
||||
|
||||
## Gemeinsam gestalten wir die Zukunft
|
||||
|
||||
Unsere Vision kann nur mit Ihnen Realität werden. Jeder Nutzer, jede App, jedes Feedback bringt uns einen Schritt näher an eine Welt, in der KI-Technologie wirklich für alle zugänglich ist.
|
||||
|
||||
Seien Sie Teil dieser Revolution. Seien Sie Teil von Mana.
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: "Unsere Werte: Was uns antreibt"
|
||||
description: "Transparenz, Fairness und Innovation - die Grundpfeiler, auf denen Mana aufgebaut ist."
|
||||
category: values
|
||||
order: 2
|
||||
featured: true
|
||||
---
|
||||
|
||||
## Die Werte, die uns leiten
|
||||
|
||||
Bei Mana sind unsere Werte nicht nur Worte auf einer Webseite - sie sind die Grundlage jeder Entscheidung, die wir treffen. Sie prägen unsere Produkte, unsere Partnerschaften und unseren Umgang mit Kunden.
|
||||
|
||||
### 1. Transparenz über alles
|
||||
|
||||
Wir glauben an radikale Transparenz:
|
||||
|
||||
- **Klare Preise**: Keine versteckten Gebühren, keine Überraschungen
|
||||
- **Offene Kommunikation**: Wir teilen unsere Roadmap und hören auf Ihr Feedback
|
||||
- **Datenschutz**: Sie wissen immer, was mit Ihren Daten passiert
|
||||
|
||||
### 2. Fairness als Standard
|
||||
|
||||
Fairness ist kein Luxus, sondern eine Notwendigkeit:
|
||||
|
||||
- **Pay-per-Use**: Sie zahlen nur für das, was Sie nutzen
|
||||
- **Keine Diskriminierung**: Gleicher Zugang für alle, unabhängig von Unternehmensgröße
|
||||
- **Sonderkonditionen**: Bildung und NGOs erhalten vergünstigte Tarife
|
||||
|
||||
### 3. Innovation durch Einfachheit
|
||||
|
||||
Komplexität ist der Feind der Innovation:
|
||||
|
||||
- **Ein System**: Keine komplizierten Integrationen oder APIs
|
||||
- **Sofort startklar**: Von der Anmeldung zur Nutzung in unter 5 Minuten
|
||||
- **Ständige Verbesserung**: Wir fügen kontinuierlich neue Tools hinzu
|
||||
|
||||
## Wie wir arbeiten
|
||||
|
||||
Unsere Werte spiegeln sich in unserer täglichen Arbeit wider:
|
||||
|
||||
### Kundenorientierung
|
||||
|
||||
Der Kunde steht im Mittelpunkt:
|
||||
- 24/7 Support in Ihrer Sprache
|
||||
- Persönliche Beratung für Enterprise-Kunden
|
||||
- Community-getriebene Feature-Entwicklung
|
||||
|
||||
### Nachhaltigkeit
|
||||
|
||||
Verantwortung für die Zukunft:
|
||||
- CO2-neutrale Server-Infrastruktur
|
||||
- Förderung von KI-Bildung
|
||||
- Ethische KI-Nutzung als Priorität
|
||||
|
||||
### Teamgeist
|
||||
|
||||
Gemeinsam sind wir stärker:
|
||||
- Diverse Teams aus 15+ Ländern
|
||||
- Flache Hierarchien und offene Türen
|
||||
- Work-Life-Balance als Grundrecht
|
||||
|
||||
## Unser Versprechen
|
||||
|
||||
Diese Werte sind unser Versprechen an Sie. Sie können uns daran messen. Wenn wir diesen Standards nicht gerecht werden, sagen Sie es uns - denn nur durch Ihr Feedback können wir besser werden.
|
||||
|
||||
Bei Mana bauen wir nicht nur ein Produkt. Wir bauen eine Bewegung für faireren, transparenteren Zugang zu KI-Technologie. Und diese Werte sind unser Kompass auf diesem Weg.
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
title: "Our Vision: Making AI Accessible to Everyone"
|
||||
description: "We believe in a world where everyone has access to the best AI tools - regardless of company size or budget."
|
||||
category: vision
|
||||
order: 1
|
||||
featured: true
|
||||
lang: en
|
||||
---
|
||||
|
||||
## The Future of AI Usage
|
||||
|
||||
At Mana, we have a clear vision: We want to revolutionize the way people and businesses access AI tools. Instead of being tied to individual providers or juggling between different subscriptions, we enable unified, flexible access to all leading AI technologies.
|
||||
|
||||
### Why Mana?
|
||||
|
||||
The AI landscape is evolving rapidly. New tools and models appear constantly, and what is state-of-the-art today may be outdated tomorrow. Traditional subscription models cannot keep up with this pace:
|
||||
|
||||
- **Vendor Lock-in**: Being tied to individual providers prevents innovation
|
||||
- **High Costs**: Multiple subscriptions add up quickly
|
||||
- **Lack of Flexibility**: Fixed packages rarely match actual needs
|
||||
|
||||
### Our Solution
|
||||
|
||||
With the Mana credit system, we're creating a new category: **AI-as-a-Service** in the truest sense of the word. One account, one balance, infinite possibilities.
|
||||
|
||||
## The Road Ahead
|
||||
|
||||
Our vision goes beyond a mere payment system. We're building a future where:
|
||||
|
||||
1. **AI is democratized**: Everyone has access to the best tools, regardless of technical know-how
|
||||
2. **Innovation is fostered**: Developers can build new apps without worrying about payment infrastructure
|
||||
3. **Fairness prevails**: Users only pay for what they actually use
|
||||
|
||||
### Next Steps
|
||||
|
||||
- **2024**: Expansion to 50+ integrated AI tools
|
||||
- **2025**: Introduction of Mana Enterprise for large corporations
|
||||
- **2026**: Global availability in 100+ countries
|
||||
|
||||
## Together We Shape the Future
|
||||
|
||||
Our vision can only become reality with you. Every user, every app, every piece of feedback brings us one step closer to a world where AI technology is truly accessible to everyone.
|
||||
|
||||
Be part of this revolution. Be part of Mana.
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
---
|
||||
title: DSGVO-Konformität bei Mana
|
||||
description: Umfassende Informationen zur Einhaltung der Datenschutz-Grundverordnung (DSGVO) bei allen Mana-Services
|
||||
category: compliance
|
||||
lastUpdated: 2024-01-15
|
||||
order: 1
|
||||
featured: true
|
||||
tags: ["DSGVO", "GDPR", "Compliance", "Datenschutz", "EU-Recht"]
|
||||
---
|
||||
|
||||
## Unser Bekenntnis zum Datenschutz
|
||||
|
||||
Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamentaler Bestandteil unserer Plattform-Architektur. Wir haben unser System von Grund auf so konzipiert, dass es die höchsten Datenschutzstandards erfüllt und übertrifft.
|
||||
|
||||
## Grundprinzipien der DSGVO-Umsetzung
|
||||
|
||||
### 1. Rechtmäßigkeit, Fairness und Transparenz
|
||||
|
||||
**Unsere Maßnahmen:**
|
||||
- Klare und verständliche Datenschutzerklärung
|
||||
- Explizite Einwilligungen für alle Datenverarbeitungen
|
||||
- Transparente Information über Datennutzung
|
||||
- Keine versteckten Datensammlungen
|
||||
|
||||
**Konkrete Umsetzung:**
|
||||
- Pop-up-freie Cookie-Nutzung (nur technisch notwendige Cookies)
|
||||
- Opt-in für alle optionalen Features
|
||||
- Detaillierte Protokollierung aller Datenverarbeitungen
|
||||
|
||||
### 2. Zweckbindung
|
||||
|
||||
**Strikte Zweckbindung bei Mana:**
|
||||
- Nutzerdaten werden ausschließlich für die Servicebereitstellung verwendet
|
||||
- Keine Weitergabe an Dritte zu Werbezwecken
|
||||
- Keine Profilbildung für Marketing
|
||||
- KI-Eingaben werden NICHT für Modelltraining verwendet
|
||||
|
||||
**Dokumentierte Zwecke:**
|
||||
1. Bereitstellung der Mana-Credit-Funktionalität
|
||||
2. Abrechnung und Buchhaltung
|
||||
3. Technischer Support
|
||||
4. Gesetzliche Aufbewahrungspflichten
|
||||
|
||||
### 3. Datenminimierung
|
||||
|
||||
**Minimale Datenerfassung:**
|
||||
- Bei Registrierung: Nur E-Mail-Adresse erforderlich
|
||||
- Optionale Angaben klar gekennzeichnet
|
||||
- Keine unnötigen Pflichtfelder
|
||||
- Automatische Datenlöschung nach Zweckerfüllung
|
||||
|
||||
**Praktische Beispiele:**
|
||||
- Memoro: Audio-Dateien werden nach Transkription automatisch gelöscht (außer auf Nutzerwunsch)
|
||||
- KI-Anfragen: Keine dauerhafte Speicherung von Prompts
|
||||
- Analytics: Nur anonymisierte, aggregierte Daten
|
||||
|
||||
### 4. Richtigkeit der Daten
|
||||
|
||||
**Nutzer-Kontrolle:**
|
||||
- Selbstverwaltung aller persönlichen Daten im Dashboard
|
||||
- Sofortige Aktualisierungsmöglichkeiten
|
||||
- API für Datenexport und -import
|
||||
- Benachrichtigungen bei Datenänderungen
|
||||
|
||||
### 5. Speicherbegrenzung
|
||||
|
||||
**Automatische Löschkonzepte:**
|
||||
- Inaktive Accounts: Erinnerung nach 12 Monaten, Löschung nach 18 Monaten
|
||||
- Transaktionsdaten: 10 Jahre (gesetzliche Aufbewahrungsfrist)
|
||||
- Support-Tickets: 2 Jahre nach Abschluss
|
||||
- KI-Interaktionen: Sofortige Löschung nach Verarbeitung
|
||||
|
||||
### 6. Integrität und Vertraulichkeit
|
||||
|
||||
**Technische Sicherheitsmaßnahmen:**
|
||||
- Ende-zu-Ende-Verschlüsselung für sensible Daten
|
||||
- TLS 1.3 für alle Verbindungen
|
||||
- Verschlüsselte Datenspeicherung (AES-256)
|
||||
- Multi-Faktor-Authentifizierung verfügbar
|
||||
- Regelmäßige Sicherheitsaudits
|
||||
|
||||
## Betroffenenrechte - Vollständig umgesetzt
|
||||
|
||||
### Auskunftsrecht (Art. 15 DSGVO)
|
||||
|
||||
**Self-Service im Dashboard:**
|
||||
- Download aller persönlichen Daten mit einem Klick
|
||||
- Maschinenlesbares Format (JSON/CSV)
|
||||
- Vollständige Transaktionshistorie
|
||||
- Übersicht aller Datenverarbeitungen
|
||||
|
||||
**Prozess:**
|
||||
1. Login ins Dashboard
|
||||
2. Datenschutz-Bereich aufrufen
|
||||
3. "Datenauskunft anfordern" klicken
|
||||
4. Sofortiger Download oder E-Mail-Versand
|
||||
|
||||
### Recht auf Berichtigung (Art. 16 DSGVO)
|
||||
|
||||
**Direkte Bearbeitung:**
|
||||
- Alle Profildaten selbst editierbar
|
||||
- Änderungshistorie einsehbar
|
||||
- Sofortige Synchronisation über alle Services
|
||||
- Validierung zur Vermeidung von Fehlern
|
||||
|
||||
### Recht auf Löschung (Art. 17 DSGVO)
|
||||
|
||||
**Löschoptionen:**
|
||||
- Einzelne Daten gezielt löschen
|
||||
- Komplette Account-Löschung
|
||||
- Automatische Löschung nach Inaktivität
|
||||
- Ausnahmen nur bei gesetzlichen Aufbewahrungspflichten
|
||||
|
||||
**Was wird gelöscht:**
|
||||
- Persönliche Daten
|
||||
- Nutzungsdaten
|
||||
- Gespeicherte Inhalte
|
||||
- Backup-Daten (innerhalb von 30 Tagen)
|
||||
|
||||
### Recht auf Datenübertragbarkeit (Art. 20 DSGVO)
|
||||
|
||||
**Export-Funktionen:**
|
||||
- Standardformate: JSON, CSV, XML
|
||||
- Strukturierte Daten mit Dokumentation
|
||||
- API für automatisierten Export
|
||||
- Direkte Übertragung zu anderen Diensten möglich
|
||||
|
||||
### Widerspruchsrecht (Art. 21 DSGVO)
|
||||
|
||||
**Granulare Kontrolle:**
|
||||
- Widerspruch gegen einzelne Verarbeitungen
|
||||
- Opt-out für Analytics
|
||||
- Newsletter-Abmeldung mit einem Klick
|
||||
- Keine Nachteile bei Widerspruch
|
||||
|
||||
## Technische und organisatorische Maßnahmen (TOMs)
|
||||
|
||||
### Zutrittskontrolle
|
||||
- Serverstandorte mit 24/7 Sicherheitspersonal
|
||||
- Biometrische Zugangskontrollen
|
||||
- Videoüberwachung der Rechenzentren
|
||||
|
||||
### Zugangskontrolle
|
||||
- Starke Passwort-Richtlinien
|
||||
- Multi-Faktor-Authentifizierung
|
||||
- Automatische Session-Timeouts
|
||||
- IP-Whitelisting für Admin-Zugriffe
|
||||
|
||||
### Zugriffskontrolle
|
||||
- Role-Based Access Control (RBAC)
|
||||
- Principle of Least Privilege
|
||||
- Regelmäßige Berechtigungsreviews
|
||||
- Audit-Logs aller Zugriffe
|
||||
|
||||
### Weitergabekontrolle
|
||||
- Verschlüsselte Datenübertragung
|
||||
- VPN für Mitarbeiterzugriffe
|
||||
- Data Loss Prevention (DLP) Systeme
|
||||
- Vertraulichkeitsvereinbarungen
|
||||
|
||||
### Eingabekontrolle
|
||||
- Vollständige Audit-Trails
|
||||
- Unveränderbare Logs
|
||||
- Vier-Augen-Prinzip bei kritischen Änderungen
|
||||
- Versionskontrolle
|
||||
|
||||
### Auftragskontrolle
|
||||
- Sorgfältige Auswahl von Subunternehmern
|
||||
- Auftragsverarbeitungsverträge (AVV)
|
||||
- Regelmäßige Audits der Partner
|
||||
- Keine Datenweitergabe ohne Ihre Zustimmung
|
||||
|
||||
### Verfügbarkeitskontrolle
|
||||
- Redundante Systeme
|
||||
- Tägliche Backups
|
||||
- Disaster Recovery Plan
|
||||
- 99.9% Uptime-Garantie
|
||||
|
||||
### Trennungskontrolle
|
||||
- Mandantenfähige Architektur
|
||||
- Logische Datentrennung
|
||||
- Separate Verschlüsselungsschlüssel
|
||||
- Isolierte Verarbeitungsumgebungen
|
||||
|
||||
## Datenschutz-Folgenabschätzung (DSFA)
|
||||
|
||||
Für alle neuen Features führen wir DSFAs durch:
|
||||
|
||||
### Bewertete Risikobereiche:
|
||||
1. **Memoro Audio-Verarbeitung**: Minimales Risiko durch sofortige Löschung
|
||||
2. **KI-Tool-Integration**: Vertragsgestaltung ohne Trainingsrechte
|
||||
3. **Team-Features**: Strikte Rechteverwaltung
|
||||
4. **Payment-Integration**: PCI-DSS-konforme Partner
|
||||
|
||||
### Risikominimierung:
|
||||
- Privacy by Design in der Entwicklung
|
||||
- Datenschutz-Schulungen für alle Mitarbeiter
|
||||
- Regelmäßige Sicherheitsreviews
|
||||
- Penetrationstests
|
||||
|
||||
## Internationale Datenübermittlung
|
||||
|
||||
### EU-US Datentransfers
|
||||
- Nutzung von Standardvertragsklauseln (SCCs)
|
||||
- Zusätzliche technische Schutzmaßnahmen
|
||||
- Verschlüsselung vor Übertragung
|
||||
- Rechtliche Absicherungen
|
||||
|
||||
### Drittländer
|
||||
- Angemessenheitsbeschlüsse beachten
|
||||
- Binding Corporate Rules (BCRs) wo möglich
|
||||
- Individuelle Risikoanalysen
|
||||
- Transparente Information der Nutzer
|
||||
|
||||
## Auftragsverarbeiter und Subunternehmer
|
||||
|
||||
### Aktuelle Partner (Stand: Januar 2024):
|
||||
1. **Hosting**: AWS Frankfurt (EU)
|
||||
2. **Payment**: Stripe (EU-Entity)
|
||||
3. **E-Mail**: Eigenentwicklung (keine Drittanbieter)
|
||||
4. **KI-Anbieter**: Siehe separate Dokumentation
|
||||
|
||||
### Auswahlkriterien:
|
||||
- DSGVO-Zertifizierung
|
||||
- EU-Standorte bevorzugt
|
||||
- Technische Sicherheitsstandards
|
||||
- Vertragliche Absicherungen
|
||||
|
||||
## Zertifizierungen und Audits
|
||||
|
||||
### Aktuelle Zertifizierungen:
|
||||
- ISO 27001 (in Vorbereitung)
|
||||
- SOC 2 Type II (geplant Q2 2024)
|
||||
- Trusted Cloud Datenschutzprofil (TCDP)
|
||||
|
||||
### Regelmäßige Überprüfungen:
|
||||
- Jährliche externe Datenschutz-Audits
|
||||
- Quartalsweise interne Reviews
|
||||
- Monatliche Sicherheitsscans
|
||||
- Kontinuierliche Compliance-Überwachung
|
||||
|
||||
## Datenschutzbeauftragter
|
||||
|
||||
**Interner Datenschutzbeauftragter:**
|
||||
[Name]
|
||||
datenschutz@mana.ai
|
||||
+49 [Telefonnummer]
|
||||
|
||||
**Erreichbarkeit:**
|
||||
- Direkter Kontakt über Dashboard
|
||||
- Monatliche Sprechstunden
|
||||
- Datenschutz-Hotline für dringende Fälle
|
||||
|
||||
## Incident Response
|
||||
|
||||
### 72-Stunden-Meldepflicht
|
||||
- Automatisierte Erkennung von Datenschutzverletzungen
|
||||
- Sofortige interne Eskalation
|
||||
- Meldung an Aufsichtsbehörde innerhalb von 72 Stunden
|
||||
- Information betroffener Nutzer ohne Verzögerung
|
||||
|
||||
### Incident Response Team:
|
||||
- 24/7 Bereitschaft
|
||||
- Definierte Eskalationswege
|
||||
- Regelmäßige Übungen
|
||||
- Dokumentierte Prozesse
|
||||
|
||||
## Transparenzbericht
|
||||
|
||||
### Jährliche Veröffentlichung:
|
||||
- Anzahl der Auskunftsersuchen
|
||||
- Behördliche Anfragen
|
||||
- Datenschutzverletzungen (anonymisiert)
|
||||
- Verbesserungsmaßnahmen
|
||||
|
||||
### Aktuelle Statistiken (2023):
|
||||
- Auskunftsersuchen bearbeitet: 127
|
||||
- Durchschnittliche Bearbeitungszeit: 48 Stunden
|
||||
- Löschanfragen: 89
|
||||
- Datenschutzverletzungen: 0
|
||||
|
||||
## Kontinuierliche Verbesserung
|
||||
|
||||
### Unser Datenschutz-Versprechen:
|
||||
1. Regelmäßige Überprüfung aller Prozesse
|
||||
2. Proaktive Anpassung an neue Rechtsprechung
|
||||
3. Investition in Datenschutz-Technologien
|
||||
4. Offene Kommunikation mit Nutzern
|
||||
|
||||
### Geplante Verbesserungen 2024:
|
||||
- Erweiterte Verschlüsselungsoptionen
|
||||
- Noch granularere Datenkontrolle
|
||||
- KI-basierte Datenschutz-Assistenz
|
||||
- Blockchain-Audit-Trail
|
||||
|
||||
## Kontakt und Beschwerden
|
||||
|
||||
### Bei Datenschutz-Anliegen:
|
||||
**Primärer Kontakt:**
|
||||
datenschutz@mana.ai
|
||||
|
||||
**Eskalation:**
|
||||
Geschäftsführung Mana Systems GmbH
|
||||
|
||||
**Aufsichtsbehörde:**
|
||||
[Zuständige Landesdatenschutzbehörde]
|
||||
[Adresse]
|
||||
[Kontaktdaten]
|
||||
|
||||
---
|
||||
|
||||
*Dieses Dokument wird regelmäßig aktualisiert. Letzte Überprüfung: Januar 2024*
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
---
|
||||
title: Umgang mit KI-Modellen bei Mana
|
||||
description: Transparenz und Sicherheit beim Einsatz von KI-Modellen - Ihre Daten bleiben geschützt
|
||||
category: ai-ethics
|
||||
lastUpdated: 2024-01-15
|
||||
order: 2
|
||||
featured: true
|
||||
tags: ["KI-Modelle", "Datenschutz", "Transparenz", "Ethik", "Sicherheit"]
|
||||
---
|
||||
|
||||
## Unser Versprechen: Ihre Daten gehören Ihnen
|
||||
|
||||
Bei Mana verstehen wir die Bedenken bezüglich KI und Datenschutz. Deshalb haben wir klare Prinzipien etabliert, die sicherstellen, dass Ihre Daten niemals für das Training von KI-Modellen verwendet werden.
|
||||
|
||||
## Grundprinzipien im Umgang mit KI
|
||||
|
||||
### 1. Kein Training mit Nutzerdaten
|
||||
|
||||
**Unsere eiserne Regel:**
|
||||
- Ihre Eingaben werden NIEMALS für das Training von KI-Modellen verwendet
|
||||
- Wir haben vertragliche Vereinbarungen mit allen KI-Anbietern
|
||||
- Opt-out ist bei uns Standard, nicht die Ausnahme
|
||||
- Ihre kreativen Arbeiten bleiben Ihr geistiges Eigentum
|
||||
|
||||
**Technische Umsetzung:**
|
||||
- API-Aufrufe mit explizitem "No-Training"-Flag
|
||||
- Verschlüsselte Übertragung ohne Zwischenspeicherung
|
||||
- Sofortige Löschung nach Verarbeitung
|
||||
- Keine Protokollierung von Inhalten
|
||||
|
||||
### 2. Transparenz über verwendete Modelle
|
||||
|
||||
**Aktuelle KI-Partner (Stand: Januar 2024):**
|
||||
|
||||
| Anbieter | Modelle | Verwendungszweck | Datenschutz-Status |
|
||||
|----------|---------|------------------|-------------------|
|
||||
| OpenAI | GPT-4, GPT-3.5, DALL-E 3 | Text & Bildgenerierung | Enterprise Agreement ohne Training |
|
||||
| Anthropic | Claude 3, Claude 2 | Textverarbeitung | Privacy-First Policy |
|
||||
| Stability AI | Stable Diffusion | Bildgenerierung | Lokale Verarbeitung möglich |
|
||||
| Midjourney | v6, v5 | Kreative Bildgestaltung | Kommerzielle Lizenz |
|
||||
| Cohere | Command, Embed | Textanalyse | EU-Server verfügbar |
|
||||
| Mistral AI | Mistral Large | Mehrsprachige Aufgaben | Französisches Datenschutzrecht |
|
||||
|
||||
### 3. Auswahl der KI-Modelle
|
||||
|
||||
**Unsere Auswahlkriterien:**
|
||||
1. **Datenschutz-Garantien**: Nur Partner mit No-Training-Optionen
|
||||
2. **Ethische Standards**: Verantwortungsvolle KI-Entwicklung
|
||||
3. **Transparenz**: Offenlegung der Trainingsmethoden
|
||||
4. **Compliance**: DSGVO-konforme Verarbeitung
|
||||
5. **Qualität**: Beste Ergebnisse für unsere Nutzer
|
||||
|
||||
## Technische Schutzmaßnahmen
|
||||
|
||||
### API-Sicherheit
|
||||
|
||||
**Verschlüsselte Kommunikation:**
|
||||
```
|
||||
Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
||||
```
|
||||
|
||||
**Unsere Sicherheitsarchitektur:**
|
||||
- Ende-zu-Ende-Verschlüsselung
|
||||
- Keine Klartext-Speicherung
|
||||
- Token-basierte Authentifizierung
|
||||
- Rate-Limiting zum Schutz vor Missbrauch
|
||||
|
||||
### Datenminimierung
|
||||
|
||||
**Was wir NICHT speichern:**
|
||||
- Ihre Prompts und Eingaben
|
||||
- Generierte Inhalte (außer auf Ihren Wunsch)
|
||||
- Persönliche Präferenzen
|
||||
- Konversationsverläufe
|
||||
|
||||
**Was wir speichern (anonymisiert):**
|
||||
- Anzahl der API-Aufrufe
|
||||
- Verwendete Credits
|
||||
- Fehlerstatistiken
|
||||
- Performance-Metriken
|
||||
|
||||
### Isolierte Verarbeitung
|
||||
|
||||
**Jede Anfrage ist unabhängig:**
|
||||
- Keine Session-übergreifende Datenhaltung
|
||||
- Keine Nutzerprofile für KI-Anpassungen
|
||||
- Keine Verknüpfung zwischen Anfragen
|
||||
- Frische Instanz bei jeder Nutzung
|
||||
|
||||
## Kontrolle und Transparenz
|
||||
|
||||
### Echtzeit-Monitoring
|
||||
|
||||
**Was Sie im Dashboard sehen:**
|
||||
- Welches Modell verwendet wurde
|
||||
- Exakte Credit-Kosten
|
||||
- Zeitstempel der Nutzung
|
||||
- Status der Verarbeitung
|
||||
|
||||
**Export-Funktionen:**
|
||||
- Download Ihrer Nutzungshistorie
|
||||
- Detaillierte Abrechnungsdaten
|
||||
- API-Logs (ohne Inhalte)
|
||||
- Compliance-Berichte
|
||||
|
||||
### Modell-Auswahl
|
||||
|
||||
**Sie haben die Wahl:**
|
||||
- Präferenz für bestimmte Anbieter setzen
|
||||
- Modelle ausschließen
|
||||
- Eigene API-Keys verwenden
|
||||
- Lokale Modelle anbinden (geplant)
|
||||
|
||||
## Ethische KI-Nutzung
|
||||
|
||||
### Verantwortungsvolle Inhaltsfilterung
|
||||
|
||||
**Automatische Sicherheitschecks:**
|
||||
- Keine illegalen Inhalte
|
||||
- Schutz vor Missbrauch
|
||||
- Altersgerechte Filterung
|
||||
- Respekt vor Urheberrechten
|
||||
|
||||
**Transparente Ablehnung:**
|
||||
- Klare Kommunikation bei Filterung
|
||||
- Keine heimliche Zensur
|
||||
- Einspruchsmöglichkeiten
|
||||
- Alternative Formulierungen
|
||||
|
||||
### Bias-Minimierung
|
||||
|
||||
**Unsere Maßnahmen:**
|
||||
- Diverse Modellauswahl
|
||||
- Regelmäßige Qualitätschecks
|
||||
- Nutzer-Feedback-System
|
||||
- Kontinuierliche Verbesserung
|
||||
|
||||
## Spezielle Anwendungsfälle
|
||||
|
||||
### Memoro - Audiotranskription
|
||||
|
||||
**Datenschutz bei Sprachaufnahmen:**
|
||||
- Lokale Vorverarbeitung möglich
|
||||
- Verschlüsselte Übertragung
|
||||
- Sofortige Löschung der Audiodaten
|
||||
- Nur Text wird gespeichert (optional)
|
||||
|
||||
**Ihre Kontrolle:**
|
||||
- Löschung jederzeit möglich
|
||||
- Export in verschiedenen Formaten
|
||||
- Keine Stimmprofile
|
||||
- Keine biometrische Erfassung
|
||||
|
||||
### Team-Nutzung
|
||||
|
||||
**Datentrennung im Team:**
|
||||
- Individuelle Verschlüsselung
|
||||
- Keine gemeinsamen KI-Profile
|
||||
- Getrennte Abrechnungen
|
||||
- Rollenbasierte Zugriffe
|
||||
|
||||
### Sensible Branchen
|
||||
|
||||
**Besondere Schutzmaßnahmen für:**
|
||||
- **Gesundheitswesen**: HIPAA-konforme Verarbeitung
|
||||
- **Rechtsberatung**: Anwaltliche Schweigepflicht
|
||||
- **Finanzsektor**: Verschärfte Sicherheitsprotokolle
|
||||
- **Bildung**: Jugendschutz-konform
|
||||
|
||||
## Zukunftssichere KI-Integration
|
||||
|
||||
### Geplante Features
|
||||
|
||||
**Q1-Q2 2024:**
|
||||
- On-Premise Deployment für Unternehmen
|
||||
- Bring-Your-Own-Model (BYOM)
|
||||
- Föderiertes Lernen ohne Datenaustausch
|
||||
- Zero-Knowledge-Architektur
|
||||
|
||||
**Langfristige Vision:**
|
||||
- 100% lokale Verarbeitung optional
|
||||
- Open-Source-Modelle Integration
|
||||
- Blockchain-basierte Nutzungsnachweise
|
||||
- Dezentralisierte KI-Infrastruktur
|
||||
|
||||
### Forschung und Entwicklung
|
||||
|
||||
**Unsere Investitionen:**
|
||||
- Privacy-Preserving ML-Techniken
|
||||
- Homomorphe Verschlüsselung
|
||||
- Differential Privacy
|
||||
- Secure Multi-Party Computation
|
||||
|
||||
## Häufige Fragen (FAQ)
|
||||
|
||||
### Kann OpenAI meine Daten sehen?
|
||||
|
||||
**Kurze Antwort: Ja, aber...**
|
||||
- Nur verschlüsselt während der Verarbeitung
|
||||
- Keine Speicherung bei OpenAI
|
||||
- Keine Verwendung für Training
|
||||
- Vertragliche Absicherung
|
||||
|
||||
### Was passiert mit kreativen Werken?
|
||||
|
||||
**Ihre Rechte bleiben erhalten:**
|
||||
- Sie behalten alle Urheberrechte
|
||||
- Keine Lizenzübertragung an Mana
|
||||
- Keine Weitergabe an KI-Anbieter
|
||||
- Kommerzielle Nutzung erlaubt
|
||||
|
||||
### Wie sicher sind meine Geschäftsgeheimnisse?
|
||||
|
||||
**Maximaler Schutz durch:**
|
||||
- Enterprise-Agreements
|
||||
- NDAs mit allen Partnern
|
||||
- Verschlüsselung
|
||||
- Optionale On-Premise-Lösung
|
||||
|
||||
## Audit und Zertifizierung
|
||||
|
||||
### Externe Überprüfungen
|
||||
|
||||
**Regelmäßige Audits durch:**
|
||||
- TÜV Rheinland (Datenschutz)
|
||||
- BSI (IT-Sicherheit)
|
||||
- Unabhängige Ethik-Kommission
|
||||
- Nutzer-Beirat
|
||||
|
||||
### Transparenzberichte
|
||||
|
||||
**Vierteljährliche Veröffentlichung:**
|
||||
- Anzahl der KI-Anfragen
|
||||
- Genutzte Modelle (aggregiert)
|
||||
- Sicherheitsvorfälle (falls vorhanden)
|
||||
- Verbesserungsmaßnahmen
|
||||
|
||||
## Ihre Rechte und Optionen
|
||||
|
||||
### Opt-Out-Möglichkeiten
|
||||
|
||||
**Granulare Kontrolle:**
|
||||
- Einzelne Modelle deaktivieren
|
||||
- Anbieter ausschließen
|
||||
- Funktionen einschränken
|
||||
- Vollständige Deaktivierung
|
||||
|
||||
### Datenportabilität
|
||||
|
||||
**Export Ihrer KI-Interaktionen:**
|
||||
- Strukturierte Formate (JSON, CSV)
|
||||
- Maschinenlesbare Dokumentation
|
||||
- API für automatisierten Export
|
||||
- Migration zu anderen Diensten
|
||||
|
||||
## Kontakt bei KI-Fragen
|
||||
|
||||
### Spezialisiertes KI-Ethik-Team
|
||||
|
||||
**Für Ihre Anliegen:**
|
||||
- ki-ethik@mana.ai
|
||||
- Monatliche Sprechstunden
|
||||
- Community-Forum
|
||||
- Direkter Draht zur Geschäftsführung
|
||||
|
||||
### Melden von Bedenken
|
||||
|
||||
**Wir nehmen Feedback ernst:**
|
||||
- Anonyme Meldungen möglich
|
||||
- Garantierte Bearbeitungszeit: 48h
|
||||
- Transparente Nachverfolgung
|
||||
- Öffentliche Stellungnahmen
|
||||
|
||||
## Verpflichtung zur kontinuierlichen Verbesserung
|
||||
|
||||
Bei Mana ist der verantwortungsvolle Umgang mit KI kein statisches Konzept. Wir verpflichten uns zu:
|
||||
|
||||
1. **Ständiger Weiterbildung** unseres Teams
|
||||
2. **Proaktiver Anpassung** an neue Entwicklungen
|
||||
3. **Offenem Dialog** mit der Community
|
||||
4. **Transparenter Kommunikation** bei Änderungen
|
||||
5. **Ethik vor Profit** in allen Entscheidungen
|
||||
|
||||
---
|
||||
|
||||
*Dieses Dokument wird monatlich überprüft und aktualisiert. Letzte Revision: Januar 2024*
|
||||
|
||||
*Für technische Details und API-Dokumentation besuchen Sie unsere [Entwickler-Dokumentation](/docs)*
|
||||
236
apps/manacore/apps/landing/src/data/pricing.js
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
export const pricingPlans = {
|
||||
monthly: [
|
||||
{
|
||||
id: 'tropfen',
|
||||
name: 'Mana Tropfen',
|
||||
price: 0,
|
||||
priceText: 'Kostenlos',
|
||||
startMana: 150,
|
||||
regeneration: 5,
|
||||
storage: 150,
|
||||
icon: '💧',
|
||||
popular: false,
|
||||
features: [
|
||||
'150 Start-Mana',
|
||||
'5 Mana täglich',
|
||||
'150 Mana Speicher',
|
||||
'Basis KI-Tools'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'kleiner-stream',
|
||||
name: 'Kleiner Stream',
|
||||
price: 5.99,
|
||||
priceText: '5,99€',
|
||||
startMana: 600,
|
||||
regeneration: 20,
|
||||
storage: 600,
|
||||
icon: '🌊',
|
||||
popular: false,
|
||||
features: [
|
||||
'600 Start-Mana',
|
||||
'20 Mana täglich',
|
||||
'600 Mana Speicher',
|
||||
'Alle Apps verfügbar'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'mittlerer-stream',
|
||||
name: 'Mittlerer Stream',
|
||||
price: 14.99,
|
||||
priceText: '14,99€',
|
||||
startMana: 1500,
|
||||
regeneration: 50,
|
||||
storage: 1500,
|
||||
icon: '💫',
|
||||
popular: true,
|
||||
features: [
|
||||
'1.500 Start-Mana',
|
||||
'50 Mana täglich',
|
||||
'1.500 Mana Speicher',
|
||||
'Priority Support'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'grosser-stream',
|
||||
name: 'Großer Stream',
|
||||
price: 29.99,
|
||||
priceText: '29,99€',
|
||||
startMana: 3000,
|
||||
regeneration: 100,
|
||||
storage: 3000,
|
||||
icon: '⭐',
|
||||
popular: false,
|
||||
features: [
|
||||
'3.000 Start-Mana',
|
||||
'100 Mana täglich',
|
||||
'3.000 Mana Speicher',
|
||||
'Premium Support'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'riesiger-stream',
|
||||
name: 'Riesiger Stream',
|
||||
price: 49.99,
|
||||
priceText: '49,99€',
|
||||
startMana: 5000,
|
||||
regeneration: 167,
|
||||
storage: 5000,
|
||||
icon: '🌟',
|
||||
popular: false,
|
||||
features: [
|
||||
'5.000 Start-Mana',
|
||||
'167 Mana täglich',
|
||||
'5.000 Mana Speicher',
|
||||
'Enterprise Features'
|
||||
]
|
||||
}
|
||||
],
|
||||
yearly: [
|
||||
{
|
||||
id: 'tropfen',
|
||||
name: 'Mana Tropfen',
|
||||
price: 0,
|
||||
priceText: 'Kostenlos',
|
||||
monthlyEquivalent: 0,
|
||||
startMana: 150,
|
||||
regeneration: 5,
|
||||
storage: 150,
|
||||
icon: '💧',
|
||||
popular: false,
|
||||
features: [
|
||||
'150 Start-Mana',
|
||||
'5 Mana täglich',
|
||||
'150 Mana Speicher',
|
||||
'Basis KI-Tools'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'kleiner-stream',
|
||||
name: 'Kleiner Stream',
|
||||
price: 59.90,
|
||||
priceText: '59,90€',
|
||||
monthlyEquivalent: 4.99,
|
||||
startMana: 600,
|
||||
regeneration: 20,
|
||||
storage: 600,
|
||||
icon: '🌊',
|
||||
popular: false,
|
||||
features: [
|
||||
'600 Start-Mana',
|
||||
'20 Mana täglich',
|
||||
'600 Mana Speicher',
|
||||
'Alle Apps verfügbar',
|
||||
'✨ 2 Monate gespart'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'mittlerer-stream',
|
||||
name: 'Mittlerer Stream',
|
||||
price: 149.90,
|
||||
priceText: '149,90€',
|
||||
monthlyEquivalent: 12.49,
|
||||
startMana: 1500,
|
||||
regeneration: 50,
|
||||
storage: 1500,
|
||||
icon: '💫',
|
||||
popular: true,
|
||||
features: [
|
||||
'1.500 Start-Mana',
|
||||
'50 Mana täglich',
|
||||
'1.500 Mana Speicher',
|
||||
'Priority Support',
|
||||
'✨ 2 Monate gespart'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'grosser-stream',
|
||||
name: 'Großer Stream',
|
||||
price: 299.90,
|
||||
priceText: '299,90€',
|
||||
monthlyEquivalent: 24.99,
|
||||
startMana: 3000,
|
||||
regeneration: 100,
|
||||
storage: 3000,
|
||||
icon: '⭐',
|
||||
popular: false,
|
||||
features: [
|
||||
'3.000 Start-Mana',
|
||||
'100 Mana täglich',
|
||||
'3.000 Mana Speicher',
|
||||
'Premium Support',
|
||||
'✨ 2 Monate gespart'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'riesiger-stream',
|
||||
name: 'Riesiger Stream',
|
||||
price: 499.90,
|
||||
priceText: '499,90€',
|
||||
monthlyEquivalent: 41.66,
|
||||
startMana: 5000,
|
||||
regeneration: 167,
|
||||
storage: 5000,
|
||||
icon: '🌟',
|
||||
popular: false,
|
||||
features: [
|
||||
'5.000 Start-Mana',
|
||||
'167 Mana täglich',
|
||||
'5.000 Mana Speicher',
|
||||
'Enterprise Features',
|
||||
'✨ 2 Monate gespart'
|
||||
]
|
||||
}
|
||||
],
|
||||
oneTime: [
|
||||
{
|
||||
id: 'small',
|
||||
name: 'Kleiner Mana Trank',
|
||||
price: 4.99,
|
||||
priceText: '4,99€',
|
||||
mana: 350,
|
||||
icon: '🧪',
|
||||
pricePerMana: 0.0143
|
||||
},
|
||||
{
|
||||
id: 'medium',
|
||||
name: 'Mittlerer Mana Trank',
|
||||
price: 9.99,
|
||||
priceText: '9,99€',
|
||||
mana: 700,
|
||||
icon: '⚗️',
|
||||
pricePerMana: 0.0143
|
||||
},
|
||||
{
|
||||
id: 'large',
|
||||
name: 'Großer Mana Trank',
|
||||
price: 19.99,
|
||||
priceText: '19,99€',
|
||||
mana: 1400,
|
||||
icon: '🏺',
|
||||
pricePerMana: 0.0143
|
||||
},
|
||||
{
|
||||
id: 'huge',
|
||||
name: 'Riesiger Mana Trank',
|
||||
price: 39.99,
|
||||
priceText: '39,99€',
|
||||
mana: 2800,
|
||||
icon: '🏛️',
|
||||
pricePerMana: 0.0143
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
export function getMonthlyValue(regenerationPerDay, daysInMonth = 30) {
|
||||
return regenerationPerDay * daysInMonth;
|
||||
}
|
||||
|
||||
export function getYearlyValue(regenerationPerDay) {
|
||||
return regenerationPerDay * 365;
|
||||
}
|
||||
|
||||
export function formatMana(value) {
|
||||
return value.toLocaleString('de-DE');
|
||||
}
|
||||
1
apps/manacore/apps/landing/src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
287
apps/manacore/apps/landing/src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
---
|
||||
import AlternateLinks from '../components/seo/AlternateLinks.astro';
|
||||
import Sidebar from '../components/navigation/Sidebar.astro';
|
||||
import { getLangFromUrl } from '../lib/i18n/config';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description = "Manacore - AI-powered platform to measure and improve team performance through intelligent analytics and insights.",
|
||||
image = "/og-image.png"
|
||||
} = Astro.props;
|
||||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script is:inline>
|
||||
// Apply dark mode immediately to prevent flash
|
||||
(() => {
|
||||
const theme = localStorage.getItem('theme');
|
||||
// Always apply dark color scheme and add bg class to body
|
||||
document.documentElement.style.colorScheme = 'dark';
|
||||
if (theme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
// Add background class to body when it's available
|
||||
if (document.body) {
|
||||
document.body.classList.add('bg-mana-background');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/icons/mana-icon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://manacore.ai/" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={image} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://manacore.ai/" />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={image} />
|
||||
|
||||
<!-- Font -->
|
||||
<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" />
|
||||
|
||||
<!-- Umami Analytics -->
|
||||
<script defer src="https://umami.manacore.ai/script.js" data-website-id="dbafd5bb-f192-4cea-a857-593956c5ef00"></script>
|
||||
|
||||
<!-- Alternate language links for SEO -->
|
||||
<AlternateLinks />
|
||||
|
||||
<!-- Critical dark mode styles -->
|
||||
<style>
|
||||
/* Ensure dark mode styles are applied immediately */
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-mana-background">
|
||||
<!-- Skip Navigation for Accessibility -->
|
||||
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-mana-orange text-white px-4 py-2 rounded-lg z-50">
|
||||
Zum Hauptinhalt springen
|
||||
</a>
|
||||
|
||||
<!-- Gradient Overlay for Buttons - Desktop (Top) -->
|
||||
<div class="fixed top-0 left-0 right-0 h-20 z-[100] pointer-events-none hidden md:block" id="nav-gradient-top"></div>
|
||||
|
||||
<!-- Gradient Overlay for Buttons - Mobile (Bottom) -->
|
||||
<div class="fixed bottom-0 left-0 right-0 h-48 z-[100] pointer-events-none md:hidden" id="nav-gradient-bottom"></div>
|
||||
|
||||
<!-- Logo Home Button -->
|
||||
<a
|
||||
href="/"
|
||||
id="logo-home-button"
|
||||
class="fixed md:top-6 bottom-6 md:bottom-auto left-6 z-[101] w-14 h-14 rounded-full shadow-2xl flex items-center justify-center transition-all text-white"
|
||||
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);"
|
||||
aria-label="Zur Startseite"
|
||||
>
|
||||
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<main id="main-content">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- FAB Sidebar Navigation -->
|
||||
<Sidebar />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
:root {
|
||||
/* Grid Paper System - 10mm Grid (40px) */
|
||||
--grid-unit: 40px; /* 10mm ~= 40px */
|
||||
--grid-small: 10px; /* 2.5mm for finer grid lines */
|
||||
--grid-cols: 12; /* Default: Desktop 12 Spalten */
|
||||
|
||||
/* === Shared Landing UI CSS Variables === */
|
||||
/* Primary colors - ManaCore Blue */
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-hover: #2563eb;
|
||||
--color-primary-glow: rgba(59, 130, 246, 0.3);
|
||||
|
||||
/* Text colors */
|
||||
--color-text-primary: #f9fafb;
|
||||
--color-text-secondary: #d1d5db;
|
||||
--color-text-muted: #6b7280;
|
||||
|
||||
/* Background colors */
|
||||
--color-background-page: #081320;
|
||||
--color-background-card: #1e293b;
|
||||
--color-background-card-hover: #334155;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #334155;
|
||||
--color-border-hover: #475569;
|
||||
}
|
||||
|
||||
/* Responsive Grid Columns */
|
||||
@media (min-width: 1200px) {
|
||||
:root {
|
||||
--grid-cols: 12; /* Desktop: 12 Spalten */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1199px) {
|
||||
:root {
|
||||
--grid-cols: 8; /* Tablet: 8 Spalten */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
:root {
|
||||
--grid-cols: 4; /* Mobile: 4 Spalten */
|
||||
}
|
||||
}
|
||||
|
||||
/* Grid System */
|
||||
.page-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
|
||||
gap: var(--grid-gutter);
|
||||
max-width: var(--container-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--grid-gutter);
|
||||
}
|
||||
|
||||
/* Baseline Grid - all elements align to 8px baseline */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, div, section {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Visual Grid Overlay - Kariertes Papier Effect (10mm Grid) */
|
||||
.grid-visual-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 99999;
|
||||
/* Main 10mm grid */
|
||||
background-size: var(--grid-unit) var(--grid-unit);
|
||||
background-image:
|
||||
/* Bold lines every 10mm (40px) */
|
||||
linear-gradient(to right, rgba(59, 130, 246, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.dark .grid-visual-overlay {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(59, 130, 246, 0.25) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(59, 130, 246, 0.25) 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* Fine grid lines (optional - can be toggled) */
|
||||
.grid-visual-overlay.with-fine-grid {
|
||||
background-size: var(--grid-small) var(--grid-small), var(--grid-unit) var(--grid-unit);
|
||||
background-image:
|
||||
/* Fine lines every 2.5mm (10px) */
|
||||
linear-gradient(to right, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
|
||||
/* Bold lines every 10mm (40px) */
|
||||
linear-gradient(to right, rgba(59, 130, 246, 0.3) 2px, transparent 2px),
|
||||
linear-gradient(to bottom, rgba(59, 130, 246, 0.3) 2px, transparent 2px);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.focus\:not-sr-only:focus {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Logo Home Button hover effect */
|
||||
#logo-home-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5), 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
#logo-home-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Navigation Gradient Overlays */
|
||||
#nav-gradient-top {
|
||||
background-image:
|
||||
/* Diagonal shadow from top-left corner */
|
||||
radial-gradient(ellipse 250px 150px at top left, rgba(0, 0, 0, 0.4) 0%, transparent 85%),
|
||||
/* Diagonal shadow from top-right corner */
|
||||
radial-gradient(ellipse 250px 150px at top right, rgba(0, 0, 0, 0.4) 0%, transparent 85%),
|
||||
/* Main gradient from top to bottom */
|
||||
linear-gradient(to bottom, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.3) 40%, rgba(15, 23, 42, 0.05) 70%, transparent 100%);
|
||||
}
|
||||
|
||||
#nav-gradient-bottom {
|
||||
background-image:
|
||||
/* Diagonal shadow from bottom-left corner */
|
||||
radial-gradient(ellipse 600px 400px at bottom left, rgba(0, 0, 0, 0.7) 0%, transparent 60%),
|
||||
/* Diagonal shadow from bottom-right corner */
|
||||
radial-gradient(ellipse 600px 400px at bottom right, rgba(0, 0, 0, 0.7) 0%, transparent 60%),
|
||||
/* Main gradient from bottom to top */
|
||||
linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 30%, transparent 100%);
|
||||
}
|
||||
</style>
|
||||
394
apps/manacore/apps/landing/src/lib/i18n/config.ts
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
export const languages = {
|
||||
de: 'Deutsch',
|
||||
en: 'English',
|
||||
it: 'Italiano',
|
||||
fr: 'Français',
|
||||
es: 'Español'
|
||||
} as const;
|
||||
|
||||
export type Language = keyof typeof languages;
|
||||
|
||||
export const defaultLang: Language = 'de';
|
||||
|
||||
// Helper to get the language from a URL
|
||||
export function getLangFromUrl(url: URL): Language {
|
||||
const [, lang] = url.pathname.split('/');
|
||||
if (lang in languages) return lang as Language;
|
||||
return defaultLang;
|
||||
}
|
||||
|
||||
// Helper to use translations
|
||||
export function useTranslations(lang: Language) {
|
||||
return function t(key: string): string {
|
||||
return ui[lang][key as keyof typeof ui[typeof defaultLang]] || key;
|
||||
}
|
||||
}
|
||||
|
||||
// UI translations
|
||||
export const ui = {
|
||||
de: {
|
||||
// Navigation
|
||||
'nav.mission': 'Mission',
|
||||
'nav.apps': 'Apps',
|
||||
'nav.pricing': 'Preise',
|
||||
'nav.forWhom': 'Für wen?',
|
||||
'nav.references': 'Referenzen',
|
||||
'nav.privacy': 'Datenschutz',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Kostenlos testen',
|
||||
'button.bookDemo': 'Demo buchen',
|
||||
'button.learnMore': 'Mehr erfahren',
|
||||
'button.back': 'Zurück',
|
||||
'button.backToOverview': 'Zurück zur Übersicht',
|
||||
|
||||
// Homepage Hero
|
||||
'home.hero.title': 'Gemeinnützige',
|
||||
'home.hero.titleHighlight': 'unabhängige Software',
|
||||
'home.hero.subtitle': 'Wir entwickeln quelloffene KI-Anwendungen für Bildung, Forschung und Gesellschaft. Transparent, datenschutzfreundlich und für alle zugänglich.',
|
||||
'home.hero.imageAlt': 'Manacore - Gemeinnützige KI-Software',
|
||||
|
||||
// Homepage Apps Section
|
||||
'home.apps.title': 'Entdecke unsere',
|
||||
'home.apps.titleHighlight': 'KI-Apps',
|
||||
'home.apps.subtitle': 'Zugriff auf ein wachsendes Ökosystem leistungsstarker KI-Anwendungen - alles mit einem Mana-Account',
|
||||
'home.apps.scrollHint': 'Scrolle für mehr',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Produktivität',
|
||||
'app.category.creative': 'Kreativ',
|
||||
'app.category.wellness': 'Wellness',
|
||||
'app.category.research': 'Forschung',
|
||||
|
||||
// App Descriptions
|
||||
'app.memoro.description': 'KI-gestützte Wissensplattform für intelligentes Lernen und Dokumentation',
|
||||
'app.maerchenzauber.description': 'Erstelle magische Kindergeschichten mit KI-Unterstützung',
|
||||
'app.moodlit.description': 'Deine persönliche KI für emotionales Wohlbefinden und mentale Gesundheit',
|
||||
'app.zitare.description': 'Intelligente Zitatverwaltung und Literaturrecherche für akademisches Arbeiten',
|
||||
'app.manadeck.description': 'KI-gestützte Karteikarten-App für effektives Lernen und Wissensmanagement',
|
||||
'app.pictus.description': 'Kreativer KI-Bildgenerator für beeindruckende Bilder und Kunstwerke',
|
||||
'app.orakel.description': 'Intelligente KI-Chat-Assistentin für alle Lebenslagen',
|
||||
'app.nutriphi.description': 'Intelligente Ernährungs-App mit KI-gestütztem Foto-Tracking',
|
||||
'app.traces.description': 'Entdecke deine Stadt neu mit KI-gestütztem Bewegungs-Tracking',
|
||||
|
||||
// Footer
|
||||
'footer.product': 'Produkt',
|
||||
'footer.company': 'Unternehmen',
|
||||
'footer.resources': 'Ressourcen',
|
||||
'footer.legal': 'Rechtliches',
|
||||
'footer.aboutUs': 'Über uns',
|
||||
'footer.blog': 'Blog',
|
||||
'footer.contact': 'Kontakt',
|
||||
'footer.partners': 'Partner',
|
||||
'footer.documentation': 'Dokumentation',
|
||||
'footer.apiReference': 'API Reference',
|
||||
'footer.support': 'Support',
|
||||
'footer.faq': 'FAQ',
|
||||
'footer.privacyCenter': 'Datenschutz-Center',
|
||||
'footer.terms': 'AGB',
|
||||
'footer.privacyPolicy': 'Datenschutzerklärung',
|
||||
'footer.imprint': 'Impressum',
|
||||
'footer.rights': 'Alle Rechte vorbehalten.',
|
||||
|
||||
// Common
|
||||
'common.and': 'und',
|
||||
'common.or': 'oder',
|
||||
'common.new': 'Neu',
|
||||
'common.comingSoon': 'Demnächst',
|
||||
'common.beta': 'Beta',
|
||||
'common.readMore': 'Weiterlesen',
|
||||
'common.showLess': 'Weniger anzeigen',
|
||||
},
|
||||
en: {
|
||||
// Navigation
|
||||
'nav.mission': 'Mission',
|
||||
'nav.apps': 'Apps',
|
||||
'nav.pricing': 'Pricing',
|
||||
'nav.forWhom': 'For whom?',
|
||||
'nav.references': 'References',
|
||||
'nav.privacy': 'Privacy',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Start for free',
|
||||
'button.bookDemo': 'Book a demo',
|
||||
'button.learnMore': 'Learn more',
|
||||
'button.back': 'Back',
|
||||
'button.backToOverview': 'Back to overview',
|
||||
|
||||
// Homepage Hero
|
||||
'home.hero.title': 'AI Power',
|
||||
'home.hero.titleHighlight': 'Without Limits',
|
||||
'home.hero.subtitle': 'Use the latest AI models flexibly and transparently with our innovative Mana credit system. One platform, unlimited possibilities.',
|
||||
'home.hero.imageAlt': 'Manacore AI - Flexible AI Usage',
|
||||
|
||||
// Homepage Apps Section
|
||||
'home.apps.title': 'Discover our',
|
||||
'home.apps.titleHighlight': 'AI Apps',
|
||||
'home.apps.subtitle': 'Access to a growing ecosystem of powerful AI applications - all with one Mana account',
|
||||
'home.apps.scrollHint': 'Scroll for more',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productivity',
|
||||
'app.category.creative': 'Creative',
|
||||
'app.category.wellness': 'Wellness',
|
||||
'app.category.research': 'Research',
|
||||
|
||||
// App Descriptions
|
||||
'app.memoro.description': 'AI-powered knowledge platform for intelligent learning and documentation',
|
||||
'app.maerchenzauber.description': 'Create magical children\'s stories with AI support',
|
||||
'app.moodlit.description': 'Your personal AI for emotional well-being and mental health',
|
||||
'app.zitare.description': 'Intelligent citation management and literature research for academic work',
|
||||
'app.manadeck.description': 'AI-powered flashcard app for effective learning and knowledge management',
|
||||
'app.pictus.description': 'Creative AI image generator for stunning pictures and artwork',
|
||||
'app.orakel.description': 'Intelligent AI chat assistant for all aspects of life',
|
||||
'app.nutriphi.description': 'Smart nutrition app with AI-powered photo tracking',
|
||||
'app.traces.description': 'Rediscover your city with AI-powered movement tracking',
|
||||
|
||||
// Footer
|
||||
'footer.product': 'Product',
|
||||
'footer.company': 'Company',
|
||||
'footer.resources': 'Resources',
|
||||
'footer.legal': 'Legal',
|
||||
'footer.aboutUs': 'About us',
|
||||
'footer.blog': 'Blog',
|
||||
'footer.contact': 'Contact',
|
||||
'footer.partners': 'Partners',
|
||||
'footer.documentation': 'Documentation',
|
||||
'footer.apiReference': 'API Reference',
|
||||
'footer.support': 'Support',
|
||||
'footer.faq': 'FAQ',
|
||||
'footer.privacyCenter': 'Privacy Center',
|
||||
'footer.terms': 'Terms & Conditions',
|
||||
'footer.privacyPolicy': 'Privacy Policy',
|
||||
'footer.imprint': 'Imprint',
|
||||
'footer.rights': 'All rights reserved.',
|
||||
|
||||
// Common
|
||||
'common.and': 'and',
|
||||
'common.or': 'or',
|
||||
'common.new': 'New',
|
||||
'common.comingSoon': 'Coming soon',
|
||||
'common.beta': 'Beta',
|
||||
'common.readMore': 'Read more',
|
||||
'common.showLess': 'Show less',
|
||||
},
|
||||
it: {
|
||||
// Navigation
|
||||
'nav.mission': 'Missione',
|
||||
'nav.apps': 'App',
|
||||
'nav.pricing': 'Prezzi',
|
||||
'nav.forWhom': 'Per chi?',
|
||||
'nav.references': 'Referenze',
|
||||
'nav.privacy': 'Privacy',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Prova gratuita',
|
||||
'button.bookDemo': 'Prenota una demo',
|
||||
'button.learnMore': 'Scopri di più',
|
||||
'button.back': 'Indietro',
|
||||
'button.backToOverview': 'Torna alla panoramica',
|
||||
|
||||
// Homepage Hero
|
||||
'home.hero.title': 'Potenza AI',
|
||||
'home.hero.titleHighlight': 'Senza Limiti',
|
||||
'home.hero.subtitle': 'Utilizza i modelli AI più recenti in modo flessibile e trasparente con il nostro innovativo sistema di crediti Mana. Una piattaforma, possibilità illimitate.',
|
||||
'home.hero.imageAlt': 'Manacore AI - Utilizzo flessibile dell\'AI',
|
||||
|
||||
// Homepage Apps Section
|
||||
'home.apps.title': 'Scopri le nostre',
|
||||
'home.apps.titleHighlight': 'App AI',
|
||||
'home.apps.subtitle': 'Accesso a un ecosistema in crescita di potenti applicazioni AI - tutto con un account Mana',
|
||||
'home.apps.scrollHint': 'Scorri per vedere di più',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Produttività',
|
||||
'app.category.creative': 'Creativo',
|
||||
'app.category.wellness': 'Benessere',
|
||||
'app.category.research': 'Ricerca',
|
||||
|
||||
// App Descriptions
|
||||
'app.memoro.description': 'Piattaforma di conoscenza basata su AI per apprendimento e documentazione intelligenti',
|
||||
'app.maerchenzauber.description': 'Crea storie magiche per bambini con il supporto dell\'AI',
|
||||
'app.moodlit.description': 'La tua AI personale per il benessere emotivo e la salute mentale',
|
||||
'app.zitare.description': 'Gestione intelligente delle citazioni e ricerca bibliografica per lavoro accademico',
|
||||
'app.manadeck.description': 'App di flashcard basata su AI per apprendimento efficace e gestione della conoscenza',
|
||||
'app.pictus.description': 'Generatore di immagini AI creativo per immagini e opere d\'arte straordinarie',
|
||||
'app.orakel.description': 'Assistente chat AI intelligente per tutti gli aspetti della vita',
|
||||
'app.nutriphi.description': 'App di nutrizione intelligente con tracciamento fotografico basato su AI',
|
||||
'app.traces.description': 'Riscopri la tua città con il tracciamento dei movimenti basato su AI',
|
||||
|
||||
// Footer
|
||||
'footer.product': 'Prodotto',
|
||||
'footer.company': 'Azienda',
|
||||
'footer.resources': 'Risorse',
|
||||
'footer.legal': 'Legale',
|
||||
'footer.aboutUs': 'Chi siamo',
|
||||
'footer.blog': 'Blog',
|
||||
'footer.contact': 'Contatti',
|
||||
'footer.partners': 'Partner',
|
||||
'footer.documentation': 'Documentazione',
|
||||
'footer.apiReference': 'Riferimento API',
|
||||
'footer.support': 'Supporto',
|
||||
'footer.faq': 'FAQ',
|
||||
'footer.privacyCenter': 'Centro Privacy',
|
||||
'footer.terms': 'Termini e Condizioni',
|
||||
'footer.privacyPolicy': 'Informativa sulla Privacy',
|
||||
'footer.imprint': 'Imprint',
|
||||
'footer.rights': 'Tutti i diritti riservati.',
|
||||
|
||||
// Common
|
||||
'common.and': 'e',
|
||||
'common.or': 'o',
|
||||
'common.new': 'Nuovo',
|
||||
'common.comingSoon': 'Prossimamente',
|
||||
'common.beta': 'Beta',
|
||||
'common.readMore': 'Leggi di più',
|
||||
'common.showLess': 'Mostra meno',
|
||||
},
|
||||
fr: {
|
||||
// Navigation
|
||||
'nav.mission': 'Mission',
|
||||
'nav.apps': 'Applications',
|
||||
'nav.pricing': 'Tarifs',
|
||||
'nav.forWhom': 'Pour qui?',
|
||||
'nav.references': 'Références',
|
||||
'nav.privacy': 'Confidentialité',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Essai gratuit',
|
||||
'button.bookDemo': 'Réserver une démo',
|
||||
'button.learnMore': 'En savoir plus',
|
||||
'button.back': 'Retour',
|
||||
'button.backToOverview': 'Retour à l\'aperçu',
|
||||
|
||||
// Homepage Hero
|
||||
'home.hero.title': 'Puissance IA',
|
||||
'home.hero.titleHighlight': 'Sans Limites',
|
||||
'home.hero.subtitle': 'Utilisez les derniers modèles d\'IA de manière flexible et transparente avec notre système de crédits Mana innovant. Une plateforme, des possibilités illimitées.',
|
||||
'home.hero.imageAlt': 'Manacore AI - Utilisation flexible de l\'IA',
|
||||
|
||||
// Homepage Apps Section
|
||||
'home.apps.title': 'Découvrez nos',
|
||||
'home.apps.titleHighlight': 'Applications IA',
|
||||
'home.apps.subtitle': 'Accès à un écosystème croissant d\'applications IA puissantes - le tout avec un compte Mana',
|
||||
'home.apps.scrollHint': 'Faites défiler pour plus',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productivité',
|
||||
'app.category.creative': 'Créatif',
|
||||
'app.category.wellness': 'Bien-être',
|
||||
'app.category.research': 'Recherche',
|
||||
|
||||
// App Descriptions
|
||||
'app.memoro.description': 'Plateforme de connaissances basée sur l\'IA pour l\'apprentissage et la documentation intelligents',
|
||||
'app.maerchenzauber.description': 'Créez des histoires magiques pour enfants avec le soutien de l\'IA',
|
||||
'app.moodlit.description': 'Votre IA personnelle pour le bien-être émotionnel et la santé mentale',
|
||||
'app.zitare.description': 'Gestion intelligente des citations et recherche bibliographique pour le travail académique',
|
||||
'app.manadeck.description': 'Application de cartes mémoire basée sur l\'IA pour un apprentissage efficace et la gestion des connaissances',
|
||||
'app.pictus.description': 'Générateur d\'images IA créatif pour des images et œuvres d\'art époustouflantes',
|
||||
'app.orakel.description': 'Assistant de chat IA intelligent pour tous les aspects de la vie',
|
||||
'app.nutriphi.description': 'Application de nutrition intelligente avec suivi photographique basé sur l\'IA',
|
||||
'app.traces.description': 'Redécouvrez votre ville avec le suivi des déplacements basé sur l\'IA',
|
||||
|
||||
// Footer
|
||||
'footer.product': 'Produit',
|
||||
'footer.company': 'Entreprise',
|
||||
'footer.resources': 'Ressources',
|
||||
'footer.legal': 'Mentions légales',
|
||||
'footer.aboutUs': 'À propos',
|
||||
'footer.blog': 'Blog',
|
||||
'footer.contact': 'Contact',
|
||||
'footer.partners': 'Partenaires',
|
||||
'footer.documentation': 'Documentation',
|
||||
'footer.apiReference': 'Référence API',
|
||||
'footer.support': 'Support',
|
||||
'footer.faq': 'FAQ',
|
||||
'footer.privacyCenter': 'Centre de confidentialité',
|
||||
'footer.terms': 'Conditions générales',
|
||||
'footer.privacyPolicy': 'Politique de confidentialité',
|
||||
'footer.imprint': 'Mentions légales',
|
||||
'footer.rights': 'Tous droits réservés.',
|
||||
|
||||
// Common
|
||||
'common.and': 'et',
|
||||
'common.or': 'ou',
|
||||
'common.new': 'Nouveau',
|
||||
'common.comingSoon': 'Bientôt disponible',
|
||||
'common.beta': 'Bêta',
|
||||
'common.readMore': 'Lire plus',
|
||||
'common.showLess': 'Afficher moins',
|
||||
},
|
||||
es: {
|
||||
// Navigation
|
||||
'nav.mission': 'Misión',
|
||||
'nav.apps': 'Aplicaciones',
|
||||
'nav.pricing': 'Precios',
|
||||
'nav.forWhom': '¿Para quién?',
|
||||
'nav.references': 'Referencias',
|
||||
'nav.privacy': 'Privacidad',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Prueba gratuita',
|
||||
'button.bookDemo': 'Reservar demo',
|
||||
'button.learnMore': 'Saber más',
|
||||
'button.back': 'Atrás',
|
||||
'button.backToOverview': 'Volver al resumen',
|
||||
|
||||
// Homepage Hero
|
||||
'home.hero.title': 'Potencia IA',
|
||||
'home.hero.titleHighlight': 'Sin Límites',
|
||||
'home.hero.subtitle': 'Utiliza los últimos modelos de IA de forma flexible y transparente con nuestro innovador sistema de créditos Mana. Una plataforma, posibilidades ilimitadas.',
|
||||
'home.hero.imageAlt': 'Manacore AI - Uso flexible de IA',
|
||||
|
||||
// Homepage Apps Section
|
||||
'home.apps.title': 'Descubre nuestras',
|
||||
'home.apps.titleHighlight': 'Aplicaciones IA',
|
||||
'home.apps.subtitle': 'Acceso a un ecosistema creciente de potentes aplicaciones de IA - todo con una cuenta Mana',
|
||||
'home.apps.scrollHint': 'Desplázate para más',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productividad',
|
||||
'app.category.creative': 'Creativo',
|
||||
'app.category.wellness': 'Bienestar',
|
||||
'app.category.research': 'Investigación',
|
||||
|
||||
// App Descriptions
|
||||
'app.memoro.description': 'Plataforma de conocimiento impulsada por IA para aprendizaje y documentación inteligentes',
|
||||
'app.maerchenzauber.description': 'Crea historias mágicas para niños con soporte de IA',
|
||||
'app.moodlit.description': 'Tu IA personal para el bienestar emocional y la salud mental',
|
||||
'app.zitare.description': 'Gestión inteligente de citas e investigación bibliográfica para trabajo académico',
|
||||
'app.manadeck.description': 'App de tarjetas de memoria impulsada por IA para aprendizaje efectivo y gestión del conocimiento',
|
||||
'app.pictus.description': 'Generador de imágenes IA creativo para imágenes y obras de arte impresionantes',
|
||||
'app.orakel.description': 'Asistente de chat IA inteligente para todos los aspectos de la vida',
|
||||
'app.nutriphi.description': 'App de nutrición inteligente con seguimiento fotográfico basado en IA',
|
||||
'app.traces.description': 'Redescubre tu ciudad con seguimiento de movimiento basado en IA',
|
||||
|
||||
// Footer
|
||||
'footer.product': 'Producto',
|
||||
'footer.company': 'Empresa',
|
||||
'footer.resources': 'Recursos',
|
||||
'footer.legal': 'Legal',
|
||||
'footer.aboutUs': 'Sobre nosotros',
|
||||
'footer.blog': 'Blog',
|
||||
'footer.contact': 'Contacto',
|
||||
'footer.partners': 'Socios',
|
||||
'footer.documentation': 'Documentación',
|
||||
'footer.apiReference': 'Referencia API',
|
||||
'footer.support': 'Soporte',
|
||||
'footer.faq': 'Preguntas frecuentes',
|
||||
'footer.privacyCenter': 'Centro de privacidad',
|
||||
'footer.terms': 'Términos y condiciones',
|
||||
'footer.privacyPolicy': 'Política de privacidad',
|
||||
'footer.imprint': 'Aviso legal',
|
||||
'footer.rights': 'Todos los derechos reservados.',
|
||||
|
||||
// Common
|
||||
'common.and': 'y',
|
||||
'common.or': 'o',
|
||||
'common.new': 'Nuevo',
|
||||
'common.comingSoon': 'Próximamente',
|
||||
'common.beta': 'Beta',
|
||||
'common.readMore': 'Leer más',
|
||||
'common.showLess': 'Mostrar menos',
|
||||
}
|
||||
} as const;
|
||||
92
apps/manacore/apps/landing/src/lib/i18n/utils.ts
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import type { Language } from './config';
|
||||
import { defaultLang } from './config';
|
||||
|
||||
// Get route without language prefix
|
||||
export function getRouteFromUrl(url: URL): string {
|
||||
const pathname = url.pathname;
|
||||
const parts = pathname.split('/');
|
||||
|
||||
// Check if first part is a language code
|
||||
if (parts[1] === 'en' || parts[1] === 'it' || parts[1] === 'fr' || parts[1] === 'es') {
|
||||
parts.splice(1, 1);
|
||||
}
|
||||
|
||||
return parts.join('/') || '/';
|
||||
}
|
||||
|
||||
// Get localized route
|
||||
export function getLocalizedRoute(route: string, lang: Language): string {
|
||||
if (lang === defaultLang) {
|
||||
return route;
|
||||
}
|
||||
return `/${lang}${route}`;
|
||||
}
|
||||
|
||||
// Get alternate language links for SEO
|
||||
export function getAlternateLinks(currentRoute: string) {
|
||||
return [
|
||||
{ lang: 'de', href: currentRoute },
|
||||
{ lang: 'en', href: `/en${currentRoute}` },
|
||||
{ lang: 'it', href: `/it${currentRoute}` },
|
||||
{ lang: 'fr', href: `/fr${currentRoute}` },
|
||||
{ lang: 'es', href: `/es${currentRoute}` },
|
||||
];
|
||||
}
|
||||
|
||||
// Get browser language preference
|
||||
export function getBrowserLang(): Language {
|
||||
if (typeof window === 'undefined') return defaultLang;
|
||||
|
||||
const browserLang = navigator.language.split('-')[0];
|
||||
if (browserLang === 'de' || browserLang === 'en' || browserLang === 'it' || browserLang === 'fr' || browserLang === 'es') {
|
||||
return browserLang as Language;
|
||||
}
|
||||
|
||||
return defaultLang;
|
||||
}
|
||||
|
||||
// Format date based on locale
|
||||
export function formatDate(date: Date, lang: Language): string {
|
||||
const locales: Record<Language, string> = {
|
||||
de: 'de-DE',
|
||||
en: 'en-US',
|
||||
it: 'it-IT',
|
||||
fr: 'fr-FR',
|
||||
es: 'es-ES'
|
||||
};
|
||||
|
||||
return new Intl.DateTimeFormat(locales[lang], {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
// Format number based on locale
|
||||
export function formatNumber(num: number, lang: Language): string {
|
||||
const locales: Record<Language, string> = {
|
||||
de: 'de-DE',
|
||||
en: 'en-US',
|
||||
it: 'it-IT',
|
||||
fr: 'fr-FR',
|
||||
es: 'es-ES'
|
||||
};
|
||||
|
||||
return new Intl.NumberFormat(locales[lang]).format(num);
|
||||
}
|
||||
|
||||
// Format currency based on locale
|
||||
export function formatCurrency(amount: number, lang: Language, currency = 'EUR'): string {
|
||||
const locales: Record<Language, string> = {
|
||||
de: 'de-DE',
|
||||
en: 'en-US',
|
||||
it: 'it-IT',
|
||||
fr: 'fr-FR',
|
||||
es: 'es-ES'
|
||||
};
|
||||
|
||||
return new Intl.NumberFormat(locales[lang], {
|
||||
style: 'currency',
|
||||
currency: currency
|
||||
}).format(amount);
|
||||
}
|
||||
1313
apps/manacore/apps/landing/src/pages/apps/[slug].astro
Normal file
302
apps/manacore/apps/landing/src/pages/apps/index.astro
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Navbar from '../../components/navigation/Navbar.astro';
|
||||
import Footer from '../../components/navigation/Footer.astro';
|
||||
import Section from '../../components/content/Section.astro';
|
||||
import Container from '../../components/layout/Container.astro';
|
||||
import Grid from '../../components/layout/Grid.astro';
|
||||
import Card from '../../components/ui/Card.astro';
|
||||
import Button from '../../components/ui/Button.astro';
|
||||
import Heading from '../../components/typography/Heading.astro';
|
||||
import Text from '../../components/typography/Text.astro';
|
||||
import HeroSection from '../../components/content/HeroSection.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const apps = await getCollection('apps');
|
||||
const germanApps = apps.filter(app => app.slug.endsWith('-de'));
|
||||
const availableApps = germanApps
|
||||
.filter(app => app.data.status === 'available')
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
const comingSoonApps = germanApps
|
||||
.filter(app => app.data.status === 'coming-soon')
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
const betaApps = germanApps
|
||||
.filter(app => app.data.status === 'beta')
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
---
|
||||
|
||||
<Layout title="Apps mit Mana - Alle KI-Tools im Überblick">
|
||||
<div class="bg-gradient-to-b from-blue-50/30 via-white to-blue-50/30 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 -bottom-32">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/50 to-transparent dark:from-gray-900 dark:to-transparent"></div>
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-mana-blue/10 dark:bg-mana-blue/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/10 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<HeroSection
|
||||
title="Apps & Tools mit Mana"
|
||||
subtitle="Ein Credit-System, unzählige Möglichkeiten. Entdecken Sie alle verfügbaren KI-Tools und Apps, die Sie mit Ihren Mana-Credits nutzen können."
|
||||
background="none"
|
||||
minHeight="small"
|
||||
spacing="small"
|
||||
containerClass="py-16 relative z-10"
|
||||
centered={true}
|
||||
debug={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Available Apps -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32"></div>
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/15 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-mana-blue/15 dark:bg-mana-blue/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:apps" class="w-8 h-8 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Verfügbare Apps
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Sofort einsatzbereit mit Ihren Mana-Credits
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-6xl mx-auto">
|
||||
{availableApps.map((app) => (
|
||||
<div class="group relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-green-500/0 via-green-500/20 to-green-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 group-hover:border-green-500/50 transition-all duration-300">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-2xl blur-xl group-hover:from-green-500/30 group-hover:to-emerald-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-2xl flex items-center justify-center text-4xl">
|
||||
{app.data.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">
|
||||
<Icon name="mdi:check-circle" class="w-3 h-3 inline mr-1" />
|
||||
Verfügbar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h3" size="5" class="mb-3 group-hover:text-green-600 transition-colors">{app.data.title}</Heading>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
{app.data.description}
|
||||
</Text>
|
||||
|
||||
<!-- Category Badge -->
|
||||
<div class="mb-4">
|
||||
<span class="inline-block bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-gray-700 dark:to-gray-700 px-3 py-1 rounded-full text-xs font-medium border border-blue-100 dark:border-gray-600">
|
||||
{app.data.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Mana Usage Info -->
|
||||
<div class="bg-gradient-to-r from-mana-blue/5 to-blue-500/5 dark:from-gray-700 dark:to-gray-700 rounded-xl p-4 mb-6 border border-mana-blue/10 dark:border-gray-600">
|
||||
<Text size="sm" weight="semibold" class="mb-2">Mana-Verbrauch:</Text>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">Durchschnitt:</Text>
|
||||
<Text size="sm" weight="semibold" class="text-mana-blue">
|
||||
{app.data.manaUsage.average} Mana
|
||||
</Text>
|
||||
</div>
|
||||
<div class="text-center mt-2">
|
||||
<Text size="xs" class="text-gray-500 dark:text-gray-500">
|
||||
pro {app.data.manaUsage.unit === 'per-minute' ? 'Minute' :
|
||||
app.data.manaUsage.unit === 'per-request' ? 'Anfrage' :
|
||||
app.data.manaUsage.unit === 'per-image' ? 'Bild' :
|
||||
app.data.manaUsage.unit === 'per-token' ? 'Token' : 'Aktion'}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<ul class="space-y-2 mb-8">
|
||||
{app.data.features.slice(0, 3).map((feature) => (
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 w-5 h-5 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mt-0.5">
|
||||
<Icon name="mdi:check" class="w-3 h-3 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-700 dark:text-gray-300">{feature}</Text>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<!-- CTA with new style -->
|
||||
<a
|
||||
href={`/apps/${app.slug.replace('-de', '')}`}
|
||||
class="inline-flex items-center justify-center w-full px-6 py-3 rounded-lg font-medium transition-all duration-300 border-2 border-gray-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-500 hover:bg-green-500/5"
|
||||
>
|
||||
<Icon name="mdi:arrow-right-circle" class="w-5 h-5 mr-2" />
|
||||
Details ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Beta Apps -->
|
||||
{betaApps.length > 0 && (
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32 bg-gradient-to-b from-transparent via-yellow-50/30 to-transparent dark:from-transparent dark:via-yellow-500/3 dark:to-transparent"></div>
|
||||
<div class="absolute top-1/3 right-0 w-[500px] h-[500px] bg-yellow-500/20 dark:bg-yellow-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-1/3 left-0 w-[500px] h-[500px] bg-orange-500/20 dark:bg-orange-500/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:flask" class="w-8 h-8 text-yellow-600 dark:text-yellow-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Beta Apps
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Testen Sie unsere neuesten Innovationen
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-5xl mx-auto">
|
||||
{betaApps.map((app) => (
|
||||
<div class="group relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-yellow-500/0 via-yellow-500/20 to-yellow-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 group-hover:border-yellow-500/50 transition-all duration-300">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-2xl blur-xl group-hover:from-yellow-500/30 group-hover:to-orange-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-2xl flex items-center justify-center text-4xl opacity-80">
|
||||
{app.data.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">
|
||||
<Icon name="mdi:beta" class="w-3 h-3 inline mr-1" />
|
||||
Beta
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h3" size="5" class="mb-3 group-hover:text-yellow-600 transition-colors">{app.data.title}</Heading>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-8">
|
||||
{app.data.description}
|
||||
</Text>
|
||||
|
||||
<a
|
||||
href={`/apps/${app.slug.replace('-de', '')}`}
|
||||
class="inline-flex items-center justify-center w-full px-6 py-3 rounded-lg font-medium transition-all duration-300 border-2 border-gray-300 dark:border-gray-600 hover:border-yellow-500 dark:hover:border-yellow-500 hover:bg-yellow-500/5"
|
||||
>
|
||||
<Icon name="mdi:flask-outline" class="w-5 h-5 mr-2" />
|
||||
Beta testen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- Coming Soon -->
|
||||
{comingSoonApps.length > 0 && (
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32"></div>
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/15 dark:bg-purple-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-pink-500/15 dark:bg-pink-500/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:rocket-launch-outline" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Demnächst verfügbar
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Freuen Sie sich auf diese kommenden Tools
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={4} gap="medium" class="max-w-5xl mx-auto">
|
||||
{comingSoonApps.map((app) => (
|
||||
<div class="group relative">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500/0 via-purple-500/10 to-purple-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
<div class="relative bg-white/60 backdrop-blur-sm dark:bg-gray-800/60 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 text-center opacity-75 group-hover:opacity-100 transition-all duration-300">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl mb-3 group-hover:scale-110 transition-transform">
|
||||
<span class="text-2xl opacity-60">{app.data.icon}</span>
|
||||
</div>
|
||||
<Text weight="semibold" class="mb-1">{app.data.title}</Text>
|
||||
<Text size="sm" class="text-gray-500 dark:text-gray-500">Bald verfügbar</Text>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- CTA Section -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute -inset-y-32 left-1/2 -translate-x-1/2 w-[200vw]"></div>
|
||||
<div class="absolute bottom-0 right-1/3 w-[600px] h-[600px] bg-mana-blue/25 dark:bg-mana-blue/8 rounded-full blur-3xl"></div>
|
||||
<div class="absolute top-0 left-1/3 w-[600px] h-[600px] bg-blue-500/25 dark:bg-blue-500/8 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="relative group">
|
||||
<div class="relative bg-white/95 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-12 md:p-16 text-center border border-gray-200 dark:border-gray-700 shadow-xl">
|
||||
<div class="relative inline-block mb-8">
|
||||
<div class="absolute inset-0 bg-mana-blue/20 rounded-full blur-2xl scale-150"></div>
|
||||
<div class="relative w-20 h-20 bg-gradient-to-br from-mana-blue to-blue-600 rounded-2xl flex items-center justify-center transform rotate-3 group-hover:rotate-6 transition-transform duration-300">
|
||||
<Icon name="mdi:apps" class="w-10 h-10 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Starten Sie jetzt mit Mana
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" class="mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Ein System, alle Tools. Keine Abos, keine Verschwendung.
|
||||
Entdecken Sie die Zukunft der KI-Nutzung.
|
||||
</Text>
|
||||
|
||||
<a
|
||||
href="/start"
|
||||
class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-mana-blue to-blue-600 hover:from-blue-600 hover:to-mana-blue text-white rounded-lg text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<Icon name="mdi:rocket-launch" class="w-5 h-5 mr-2" />
|
||||
Kostenlos starten mit 150 Mana
|
||||
</a>
|
||||
|
||||
<div class="flex items-center justify-center gap-8 pt-8 mt-8 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:check-circle" class="w-5 h-5 text-green-500" />
|
||||
<Text size="sm">Keine Kreditkarte</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:infinity" class="w-5 h-5 text-blue-500" />
|
||||
<Text size="sm">Credits verfallen nie</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:flash" class="w-5 h-5 text-purple-500" />
|
||||
<Text size="sm">20+ KI-Tools</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
255
apps/manacore/apps/landing/src/pages/clients/[slug].astro
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
---
|
||||
import { getCollection, getEntry } from 'astro:content';
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Navbar from '../../components/navigation/Navbar.astro';
|
||||
import Footer from '../../components/navigation/Footer.astro';
|
||||
import Section from '../../components/content/Section.astro';
|
||||
import Container from '../../components/layout/Container.astro';
|
||||
import Heading from '../../components/typography/Heading.astro';
|
||||
import Text from '../../components/typography/Text.astro';
|
||||
import Button from '../../components/ui/Button.astro';
|
||||
import Card from '../../components/ui/Card.astro';
|
||||
import Grid from '../../components/layout/Grid.astro';
|
||||
import Flex from '../../components/layout/Flex.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const clients = await getCollection('clients');
|
||||
return clients.map(client => ({
|
||||
params: { slug: client.slug },
|
||||
props: { client },
|
||||
}));
|
||||
}
|
||||
|
||||
const { client } = Astro.props;
|
||||
const { Content } = await client.render();
|
||||
|
||||
// Get other client stories
|
||||
const allClients = await getCollection('clients');
|
||||
const otherClients = allClients
|
||||
.filter(c => c.slug !== client.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order)
|
||||
.slice(0, 2);
|
||||
---
|
||||
|
||||
<Layout title={`${client.data.company} - Erfolgsgeschichte mit Mana`}>
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-32">
|
||||
<Container>
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-12">
|
||||
<div class="mb-6">
|
||||
<img
|
||||
src={client.data.logo}
|
||||
alt={`${client.data.company} Logo`}
|
||||
class="h-16 mx-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Heading as="h1" size="1" class="mb-4">
|
||||
{client.data.company}
|
||||
</Heading>
|
||||
|
||||
<div class="flex items-center justify-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>{client.data.industry}</span>
|
||||
<span>·</span>
|
||||
<span>{client.data.location}</span>
|
||||
<span>·</span>
|
||||
<span>
|
||||
{client.data.size === 'startup' && 'Startup'}
|
||||
{client.data.size === 'mittelstand' && 'Mittelstand'}
|
||||
{client.data.size === 'enterprise' && 'Enterprise'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial Quote -->
|
||||
<Card variant="elevated" padding="large" class="mb-12 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
|
||||
<div class="text-center">
|
||||
<Icon name="mdi:format-quote-open" class="w-8 h-8 text-mana-blue mb-4 mx-auto" />
|
||||
<Text size="xl" class="mb-6 italic">
|
||||
"{client.data.testimonial.quote}"
|
||||
</Text>
|
||||
<div>
|
||||
<Text weight="semibold">{client.data.testimonial.author}</Text>
|
||||
<Text size="sm" color="muted">{client.data.testimonial.role}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Key Stats -->
|
||||
<Grid cols={client.data.stats.length} gap="large" class="mb-16 max-w-4xl mx-auto">
|
||||
{client.data.stats.map(stat => (
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold text-mana-blue mb-2">{stat.value}</div>
|
||||
<Text color="muted">{stat.label}</Text>
|
||||
</div>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<!-- Content Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-24 space-y-6">
|
||||
<!-- Quick Facts -->
|
||||
<Card variant="bordered" padding="medium">
|
||||
<Heading as="h3" size="6" class="mb-4">
|
||||
<Icon name="mdi:information" class="w-5 h-5 inline mr-2" />
|
||||
Quick Facts
|
||||
</Heading>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<Text size="sm" color="muted">Challenge</Text>
|
||||
<Text size="sm" weight="semibold">{client.data.challenge}</Text>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text size="sm" color="muted">Lösung</Text>
|
||||
<Text size="sm" weight="semibold">{client.data.solution}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Mana Usage -->
|
||||
<Card variant="bordered" padding="medium">
|
||||
<Heading as="h3" size="6" class="mb-4">
|
||||
<Icon name="mdi:chart-line" class="w-5 h-5 inline mr-2" />
|
||||
Mana-Nutzung
|
||||
</Heading>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<Text size="sm" color="muted">Monatliche Credits</Text>
|
||||
<Text size="sm" weight="semibold">{client.data.manaUsage.monthlyCredits.toLocaleString('de-DE')}</Text>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<Text size="sm" color="muted">Team-Größe</Text>
|
||||
<Text size="sm" weight="semibold">{client.data.manaUsage.teamSize} Nutzer</Text>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text size="sm" color="muted" class="mb-2">Hauptsächlich genutzte Tools</Text>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{client.data.manaUsage.mainTools.map(tool => (
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800">
|
||||
{tool}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Key Results -->
|
||||
<Card variant="bordered" padding="medium">
|
||||
<Heading as="h3" size="6" class="mb-4">
|
||||
<Icon name="mdi:check-circle" class="w-5 h-5 inline mr-2 text-green-500" />
|
||||
Wichtigste Ergebnisse
|
||||
</Heading>
|
||||
|
||||
<ul class="space-y-2">
|
||||
{client.data.results.map(result => (
|
||||
<li class="flex items-start gap-2">
|
||||
<Icon name="mdi:check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<Text size="sm">{result}</Text>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<!-- CTA -->
|
||||
<Card variant="elevated" padding="medium" class="bg-mana-blue text-white">
|
||||
<Heading as="h3" size="6" class="mb-3 text-white">
|
||||
Bereit für Ihren Erfolg?
|
||||
</Heading>
|
||||
<Text size="sm" class="mb-4 text-gray-100">
|
||||
Starten Sie noch heute mit Mana und transformieren Sie Ihre KI-Nutzung.
|
||||
</Text>
|
||||
<Button href="/start" variant="secondary" size="small" class="w-full">
|
||||
Kostenlos testen
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other Success Stories -->
|
||||
{otherClients.length > 0 && (
|
||||
<div>
|
||||
<Heading as="h2" size="3" align="center" class="mb-8">
|
||||
Weitere Erfolgsgeschichten
|
||||
</Heading>
|
||||
|
||||
<Grid cols={2} gap="large" class="max-w-4xl mx-auto">
|
||||
{otherClients.map(otherClient => (
|
||||
<a href={`/clients/${otherClient.slug}`} class="block group">
|
||||
<Card variant="bordered" padding="large" class="h-full hover:border-mana-blue transition-all hover:shadow-lg">
|
||||
<div class="mb-4">
|
||||
<img
|
||||
src={otherClient.data.logo}
|
||||
alt={`${otherClient.data.company} Logo`}
|
||||
class="h-12 grayscale group-hover:grayscale-0 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Heading as="h3" size="5" class="mb-2 group-hover:text-mana-blue transition-colors">
|
||||
{otherClient.data.company}
|
||||
</Heading>
|
||||
|
||||
<Text size="sm" color="muted" class="mb-4">
|
||||
{otherClient.data.industry} · {otherClient.data.location}
|
||||
</Text>
|
||||
|
||||
<Text size="sm" class="italic">
|
||||
"{otherClient.data.testimonial.quote.substring(0, 100)}..."
|
||||
</Text>
|
||||
</Card>
|
||||
</a>
|
||||
))}
|
||||
</Grid>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.prose h2 {
|
||||
@apply text-2xl font-bold mt-8 mb-4;
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
@apply text-xl font-semibold mt-6 mb-3;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
@apply mb-4 leading-relaxed;
|
||||
}
|
||||
|
||||
.prose ul {
|
||||
@apply space-y-2 mb-4;
|
||||
}
|
||||
|
||||
.prose li {
|
||||
@apply ml-6 list-disc;
|
||||
}
|
||||
|
||||
.prose strong {
|
||||
@apply font-semibold text-gray-900 dark:text-gray-100;
|
||||
}
|
||||
</style>
|
||||
402
apps/manacore/apps/landing/src/pages/clients/index.astro
Normal file
|
|
@ -0,0 +1,402 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Navbar from '../../components/navigation/Navbar.astro';
|
||||
import Footer from '../../components/navigation/Footer.astro';
|
||||
import Section from '../../components/content/Section.astro';
|
||||
import Container from '../../components/layout/Container.astro';
|
||||
import Heading from '../../components/typography/Heading.astro';
|
||||
import Text from '../../components/typography/Text.astro';
|
||||
import Card from '../../components/ui/Card.astro';
|
||||
import Grid from '../../components/layout/Grid.astro';
|
||||
import HeroSection from '../../components/content/HeroSection.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const clients = await getCollection('clients');
|
||||
const sortedClients = clients.sort((a, b) => a.data.order - b.data.order);
|
||||
|
||||
// Group clients by size
|
||||
const clientsBySize = {
|
||||
enterprise: sortedClients.filter(c => c.data.size === 'enterprise'),
|
||||
mittelstand: sortedClients.filter(c => c.data.size === 'mittelstand'),
|
||||
startup: sortedClients.filter(c => c.data.size === 'startup'),
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title="Erfolgsgeschichten - Kunden berichten über Mana">
|
||||
<div class="bg-gradient-to-b from-blue-50/30 via-white to-blue-50/30 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 -bottom-32">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/50 to-transparent dark:from-gray-900 dark:to-transparent"></div>
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-mana-blue/10 dark:bg-mana-blue/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/10 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<HeroSection
|
||||
title="Erfolgsgeschichten unserer Kunden"
|
||||
subtitle="Von Startups bis zu Großunternehmen - entdecken Sie, wie Teams mit Mana ihre KI-Nutzung revolutioniert haben."
|
||||
background="none"
|
||||
minHeight="small"
|
||||
spacing="small"
|
||||
containerClass="py-16 relative z-10"
|
||||
centered={true}
|
||||
debug={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Summary Stats Section -->
|
||||
<Section spacing="medium" class="relative -mt-16">
|
||||
<Container class="relative z-10">
|
||||
<div class="grid grid-cols-3 gap-8 max-w-3xl mx-auto">
|
||||
{/* Kostenersparnis */}
|
||||
<div class="group relative h-full">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/0 to-emerald-500/0 rounded-2xl group-hover:from-green-500/10 group-hover:to-emerald-500/10 transition-all duration-300"></div>
|
||||
<div class="relative bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-2xl p-6 text-center border border-gray-200 dark:border-gray-700 group-hover:border-green-500/30 transition-all duration-300 h-full flex flex-col justify-center">
|
||||
<div class="text-4xl font-bold bg-gradient-to-br from-green-600 to-emerald-600 bg-clip-text text-transparent mb-2">60%</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Durchschnittliche<br />Kostenersparnis</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Produktivität */}
|
||||
<div class="group relative h-full">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 rounded-2xl group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300"></div>
|
||||
<div class="relative bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-2xl p-6 text-center border border-gray-200 dark:border-gray-700 group-hover:border-purple-500/30 transition-all duration-300 h-full flex flex-col justify-center">
|
||||
<div class="text-4xl font-bold bg-gradient-to-br from-purple-600 to-pink-600 bg-clip-text text-transparent mb-2">3x</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Produktivitäts-<br />steigerung</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nutzer */}
|
||||
<div class="group relative h-full">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-cyan-500/0 rounded-2xl group-hover:from-blue-500/10 group-hover:to-cyan-500/10 transition-all duration-300"></div>
|
||||
<div class="relative bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-2xl p-6 text-center border border-gray-200 dark:border-gray-700 group-hover:border-blue-500/30 transition-all duration-300 h-full flex flex-col justify-center">
|
||||
<div class="text-4xl font-bold bg-gradient-to-br from-blue-600 to-cyan-600 bg-clip-text text-transparent mb-2">5000+</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Zufriedene<br />Nutzer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Enterprise Clients -->
|
||||
{clientsBySize.enterprise.length > 0 && (
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32"></div>
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/15 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-mana-blue/15 dark:bg-mana-blue/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:domain" class="w-8 h-8 text-blue-600 dark:text-blue-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Enterprise
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Große Organisationen vertrauen auf Mana für ihre unternehmensweite KI-Strategie
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={clientsBySize.enterprise.length === 1 ? 1 : 2} gap="large" class="max-w-5xl mx-auto">
|
||||
{clientsBySize.enterprise.map(client => (
|
||||
<a href={`/clients/${client.slug}`} class="block group">
|
||||
<div class="relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-mana-blue/0 via-mana-blue/20 to-mana-blue/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue/50 transition-all duration-300 overflow-hidden">
|
||||
<div class="p-8">
|
||||
{/* Logo */}
|
||||
<div class="mb-6">
|
||||
<img
|
||||
src={client.data.logo}
|
||||
alt={client.data.company}
|
||||
class="h-16 w-auto max-w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Company Info */}
|
||||
<Heading as="h3" size="4" class="mb-3 group-hover:text-mana-blue transition-colors">
|
||||
{client.data.company}
|
||||
</Heading>
|
||||
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
|
||||
{client.data.industry}
|
||||
</span>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{client.data.manaUsage.teamSize} Nutzer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<div class="relative mb-6">
|
||||
<Icon name="mdi:format-quote-open" class="absolute -top-2 -left-2 w-8 h-8 text-mana-blue/20" />
|
||||
<Text size="base" class="italic text-gray-700 dark:text-gray-300 pl-6">
|
||||
{client.data.testimonial.quote}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div class="flex items-end justify-between pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{client.data.stats.slice(0, 2).map(stat => (
|
||||
<div>
|
||||
<div class="text-2xl font-bold bg-gradient-to-br from-mana-blue to-blue-600 bg-clip-text text-transparent">
|
||||
{stat.value}
|
||||
</div>
|
||||
<Text size="xs" class="text-gray-600 dark:text-gray-400">
|
||||
{stat.label}
|
||||
</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Icon name="mdi:arrow-right" class="w-6 h-6 text-gray-400 group-hover:text-mana-blue group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- Mittelstand Clients -->
|
||||
{clientsBySize.mittelstand.length > 0 && (
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32 bg-gradient-to-b from-transparent via-purple-50/30 to-transparent dark:from-transparent dark:via-purple-500/3 dark:to-transparent"></div>
|
||||
<div class="absolute top-1/3 right-0 w-[500px] h-[500px] bg-purple-500/20 dark:bg-purple-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-1/3 left-0 w-[500px] h-[500px] bg-pink-500/20 dark:bg-pink-500/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:office-building" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Mittelstand
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Mittelständische Unternehmen optimieren ihre Prozesse mit flexiblen KI-Tools
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={clientsBySize.mittelstand.length === 1 ? 1 : 2} gap="large" class="max-w-5xl mx-auto">
|
||||
{clientsBySize.mittelstand.map(client => (
|
||||
<a href={`/clients/${client.slug}`} class="block group">
|
||||
<div class="relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500/0 via-purple-500/20 to-purple-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 group-hover:border-purple-500/50 transition-all duration-300 overflow-hidden">
|
||||
<div class="p-8">
|
||||
{/* Logo */}
|
||||
<div class="mb-6">
|
||||
<img
|
||||
src={client.data.logo}
|
||||
alt={client.data.company}
|
||||
class="h-16 w-auto max-w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Company Info */}
|
||||
<Heading as="h3" size="4" class="mb-3 group-hover:text-purple-600 transition-colors">
|
||||
{client.data.company}
|
||||
</Heading>
|
||||
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
|
||||
{client.data.industry}
|
||||
</span>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{client.data.manaUsage.teamSize} Nutzer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<div class="relative mb-6">
|
||||
<Icon name="mdi:format-quote-open" class="absolute -top-2 -left-2 w-8 h-8 text-purple-500/20" />
|
||||
<Text size="base" class="italic text-gray-700 dark:text-gray-300 pl-6">
|
||||
{client.data.testimonial.quote}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div class="flex items-end justify-between pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{client.data.stats.slice(0, 2).map(stat => (
|
||||
<div>
|
||||
<div class="text-2xl font-bold bg-gradient-to-br from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||
{stat.value}
|
||||
</div>
|
||||
<Text size="xs" class="text-gray-600 dark:text-gray-400">
|
||||
{stat.label}
|
||||
</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Icon name="mdi:arrow-right" class="w-6 h-6 text-gray-400 group-hover:text-purple-600 group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- Startup Clients -->
|
||||
{clientsBySize.startup.length > 0 && (
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<div class="absolute inset-0 -top-32 -bottom-32"></div>
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-green-500/15 dark:bg-green-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/15 dark:bg-emerald-500/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-2xl mb-4">
|
||||
<Icon name="mdi:rocket-launch" class="w-8 h-8 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Startups
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Innovative Startups skalieren mit Mana ohne hohe Fixkosten
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Grid cols={clientsBySize.startup.length === 1 ? 1 : 2} gap="large" class="max-w-5xl mx-auto">
|
||||
{clientsBySize.startup.map(client => (
|
||||
<a href={`/clients/${client.slug}`} class="block group">
|
||||
<div class="relative h-full">
|
||||
<div class="absolute -inset-0.5 bg-gradient-to-r from-green-500/0 via-green-500/20 to-green-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur"></div>
|
||||
|
||||
<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 group-hover:border-green-500/50 transition-all duration-300 overflow-hidden">
|
||||
<div class="p-8">
|
||||
{/* Logo */}
|
||||
<div class="mb-6">
|
||||
<img
|
||||
src={client.data.logo}
|
||||
alt={client.data.company}
|
||||
class="h-16 w-auto max-w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Company Info */}
|
||||
<Heading as="h3" size="4" class="mb-3 group-hover:text-green-600 transition-colors">
|
||||
{client.data.company}
|
||||
</Heading>
|
||||
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
|
||||
{client.data.industry}
|
||||
</span>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{client.data.manaUsage.teamSize} Nutzer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<div class="relative mb-6">
|
||||
<Icon name="mdi:format-quote-open" class="absolute -top-2 -left-2 w-8 h-8 text-green-500/20" />
|
||||
<Text size="base" class="italic text-gray-700 dark:text-gray-300 pl-6">
|
||||
{client.data.testimonial.quote}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div class="flex items-end justify-between pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{client.data.stats.slice(0, 2).map(stat => (
|
||||
<div>
|
||||
<div class="text-2xl font-bold bg-gradient-to-br from-green-600 to-emerald-600 bg-clip-text text-transparent">
|
||||
{stat.value}
|
||||
</div>
|
||||
<Text size="xs" class="text-gray-600 dark:text-gray-400">
|
||||
{stat.label}
|
||||
</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Icon name="mdi:arrow-right" class="w-6 h-6 text-gray-400 group-hover:text-green-600 group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- CTA Section -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
{/* Continuous background flow - final crescendo */}
|
||||
<div class="absolute -inset-y-32 left-1/2 -translate-x-1/2 w-[200vw]"></div>
|
||||
<div class="absolute bottom-0 right-1/3 w-[600px] h-[600px] bg-mana-blue/25 dark:bg-mana-blue/8 rounded-full blur-3xl"></div>
|
||||
<div class="absolute top-0 left-1/3 w-[600px] h-[600px] bg-blue-500/25 dark:bg-blue-500/8 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
{/* Main CTA Card */}
|
||||
<div class="relative group">
|
||||
<div class="relative bg-white/95 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-12 md:p-16 text-center border border-gray-200 dark:border-gray-700 shadow-xl">
|
||||
{/* Icon */}
|
||||
<div class="relative inline-block mb-8">
|
||||
<div class="absolute inset-0 bg-mana-blue/20 rounded-full blur-2xl scale-150"></div>
|
||||
<div class="relative w-20 h-20 bg-gradient-to-br from-mana-blue to-blue-600 rounded-2xl flex items-center justify-center transform rotate-3 group-hover:rotate-6 transition-transform duration-300">
|
||||
<Icon name="mdi:rocket-launch-outline" class="w-10 h-10 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Schreiben Sie Ihre eigene Erfolgsgeschichte
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" class="mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Starten Sie noch heute mit Mana und transformieren Sie die Art,
|
||||
wie Ihr Team KI-Tools nutzt.
|
||||
</Text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<a href="/start" class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-mana-blue to-blue-600 hover:from-blue-600 hover:to-mana-blue text-white rounded-lg text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
<Icon name="mdi:sparkles" class="w-5 h-5 mr-2" />
|
||||
Kostenlos starten mit 150 Mana
|
||||
</a>
|
||||
<a href="/demo" class="inline-flex items-center justify-center px-8 py-4 border-2 border-gray-300 dark:border-gray-600 hover:border-mana-blue dark:hover:border-mana-blue rounded-lg text-lg transition-all duration-300">
|
||||
<Icon name="mdi:calendar-check" class="w-5 h-5 mr-2" />
|
||||
Demo vereinbaren
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Trust indicators */}
|
||||
<div class="flex items-center justify-center gap-8 pt-8 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:account-check" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">Keine Kreditkarte nötig</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:shield-check" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">DSGVO-konform</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:clock-start" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">In 2 Minuten startklar</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
130
apps/manacore/apps/landing/src/pages/context/[slug].astro
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Navbar from '../../components/navigation/Navbar.astro';
|
||||
import Footer from '../../components/navigation/Footer.astro';
|
||||
import Section from '../../components/content/Section.astro';
|
||||
import Container from '../../components/layout/Container.astro';
|
||||
import Card from '../../components/ui/Card.astro';
|
||||
import Heading from '../../components/typography/Heading.astro';
|
||||
import Text from '../../components/typography/Text.astro';
|
||||
import Button from '../../components/ui/Button.astro';
|
||||
import { getCollection, getEntry } from 'astro:content';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const contextPages = await getCollection('context');
|
||||
return contextPages.map((page) => ({
|
||||
params: { slug: page.slug },
|
||||
props: { page },
|
||||
}));
|
||||
}
|
||||
|
||||
const { page } = Astro.props;
|
||||
const { Content } = await page.render();
|
||||
|
||||
// Get other context pages for navigation
|
||||
const allPages = await getCollection('context');
|
||||
const otherPages = allPages
|
||||
.filter(p => p.slug !== page.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
---
|
||||
|
||||
<Layout title={`${page.data.title} - Mana Kontext`}>
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-24 pb-8">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Button href="/context" variant="ghost" size="small" class="mb-6">
|
||||
<Icon name="mdi:arrow-left" class="w-4 h-4 mr-2" />
|
||||
Zurück zur Übersicht
|
||||
</Button>
|
||||
|
||||
<div class="mb-8">
|
||||
{page.data.icon && (
|
||||
<div class="w-16 h-16 bg-mana-blue/10 rounded-xl flex items-center justify-center mb-6">
|
||||
<Icon name={page.data.icon} class="w-8 h-8 text-mana-blue" />
|
||||
</div>
|
||||
)}
|
||||
<Heading as="h1" size="1" class="mb-4">{page.data.title}</Heading>
|
||||
<Text size="xl" color="muted" class="mb-6">{page.data.description}</Text>
|
||||
|
||||
<div class="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
|
||||
{page.data.publishedAt && (
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:calendar" class="w-4 h-4" />
|
||||
<span>Veröffentlicht: {new Date(page.data.publishedAt).toLocaleDateString('de-DE')}</span>
|
||||
</div>
|
||||
)}
|
||||
{page.data.updatedAt && (
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:update" class="w-4 h-4" />
|
||||
<span>Aktualisiert: {new Date(page.data.updatedAt).toLocaleDateString('de-DE')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none
|
||||
prose-headings:text-gray-900 dark:prose-headings:text-gray-100
|
||||
prose-h1:text-4xl prose-h1:font-bold prose-h1:mb-6
|
||||
prose-h2:text-3xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4
|
||||
prose-h3:text-2xl prose-h3:font-semibold prose-h3:mt-6 prose-h3:mb-3
|
||||
prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-p:mb-4
|
||||
prose-a:text-mana-blue prose-a:no-underline hover:prose-a:underline
|
||||
prose-strong:text-gray-900 dark:prose-strong:text-gray-100
|
||||
prose-ul:list-disc prose-ul:pl-6 prose-ul:mb-4
|
||||
prose-ol:list-decimal prose-ol:pl-6 prose-ol:mb-4
|
||||
prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-li:mb-2
|
||||
prose-blockquote:border-l-4 prose-blockquote:border-mana-blue prose-blockquote:pl-4 prose-blockquote:italic
|
||||
prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
|
||||
prose-pre:bg-gray-900 prose-pre:text-gray-100">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
{otherPages.length > 0 && (
|
||||
<div class="mt-16 pt-8 border-t border-gray-200 dark:border-gray-800">
|
||||
<Heading as="h3" size="4" class="mb-6">Weitere Artikel</Heading>
|
||||
<div class="grid gap-4">
|
||||
{otherPages.map((otherPage) => (
|
||||
<Card variant="bordered" padding="medium" class="hover:border-mana-blue transition-colors">
|
||||
<a href={`/context/${otherPage.slug}`} class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
{otherPage.data.icon && (
|
||||
<Icon name={otherPage.data.icon} class="w-5 h-5 text-mana-blue" />
|
||||
)}
|
||||
<div>
|
||||
<Text weight="semibold">{otherPage.data.title}</Text>
|
||||
<Text size="sm" color="muted">{otherPage.data.description}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Icon name="mdi:arrow-right" class="w-5 h-5 text-gray-400" />
|
||||
</a>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="mt-12">
|
||||
<Card variant="elevated" padding="large" class="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
|
||||
<div class="flex items-start gap-4">
|
||||
<Icon name="mdi:lightbulb" class="w-8 h-8 text-mana-blue flex-shrink-0" />
|
||||
<div>
|
||||
<Heading as="h4" size="5" class="mb-2">Bereit durchzustarten?</Heading>
|
||||
<Text color="muted" class="mb-4">
|
||||
Testen Sie Mana kostenlos mit 500 Credits Startguthaben
|
||||
</Text>
|
||||
<Button href="/start" variant="primary">
|
||||
Jetzt kostenlos starten
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
96
apps/manacore/apps/landing/src/pages/context/index.astro
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Navbar from '../../components/navigation/Navbar.astro';
|
||||
import Footer from '../../components/navigation/Footer.astro';
|
||||
import HeroSection from '../../components/content/HeroSection.astro';
|
||||
import Section from '../../components/content/Section.astro';
|
||||
import Container from '../../components/layout/Container.astro';
|
||||
import Grid from '../../components/layout/Grid.astro';
|
||||
import Card from '../../components/ui/Card.astro';
|
||||
import Heading from '../../components/typography/Heading.astro';
|
||||
import Text from '../../components/typography/Text.astro';
|
||||
import Button from '../../components/ui/Button.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const contextPages = await getCollection('context');
|
||||
const sortedPages = contextPages.sort((a, b) => a.data.order - b.data.order);
|
||||
---
|
||||
|
||||
<Layout title="Kontext - Alles über Mana">
|
||||
<Navbar />
|
||||
|
||||
<HeroSection
|
||||
title="Verstehen Sie Mana"
|
||||
subtitle="Detaillierte Informationen und Antworten auf alle Ihre Fragen"
|
||||
background="gradient"
|
||||
minHeight="small"
|
||||
titleSize="2"
|
||||
containerClass="pt-16 pb-8"
|
||||
/>
|
||||
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Grid cols={1} gap="large">
|
||||
{sortedPages.map((page) => (
|
||||
<Card variant="bordered" padding="large" class="hover:border-mana-blue transition-colors">
|
||||
<a href={`/context/${page.slug}`} class="block">
|
||||
<div class="flex items-start gap-4">
|
||||
{page.data.icon && (
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 bg-mana-blue/10 rounded-lg flex items-center justify-center">
|
||||
<Icon name={page.data.icon} class="w-6 h-6 text-mana-blue" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div class="flex-1">
|
||||
<Heading as="h2" size="4" class="mb-2 group-hover:text-mana-blue transition-colors">
|
||||
{page.data.title}
|
||||
</Heading>
|
||||
<Text color="muted" class="mb-4">
|
||||
{page.data.description}
|
||||
</Text>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500">
|
||||
{page.data.publishedAt && (
|
||||
<span>
|
||||
Veröffentlicht: {new Date(page.data.publishedAt).toLocaleDateString('de-DE')}
|
||||
</span>
|
||||
)}
|
||||
{page.data.updatedAt && (
|
||||
<span>
|
||||
Aktualisiert: {new Date(page.data.updatedAt).toLocaleDateString('de-DE')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="ghost" size="small">
|
||||
Weiterlesen
|
||||
<Icon name="mdi:arrow-right" class="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<Card variant="elevated" padding="large" class="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
|
||||
<Icon name="mdi:help-circle" class="w-12 h-12 text-mana-blue mx-auto mb-4" />
|
||||
<Heading as="h3" size="4" class="mb-2">Noch Fragen?</Heading>
|
||||
<Text color="muted" class="mb-6">
|
||||
Unser Support-Team hilft Ihnen gerne weiter
|
||||
</Text>
|
||||
<Button href="/kontakt" variant="primary">
|
||||
Kontakt aufnehmen
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||