mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-22 13:06:42 +02:00
style: auto-format codebase with Prettier
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
This commit is contained in:
Wuesteon
parent
0241f5554c
commit
d36b321d9d
3952 changed files with 661498 additions and 739751 deletions
|
|
@ -23,6 +23,7 @@ This is a multi-tenant system where a single authentication backend supports mul
|
|||
Both web and mobile apps use Supabase for authentication with different approaches:
|
||||
|
||||
**Web App (SvelteKit)**:
|
||||
|
||||
- Server-side authentication using `@supabase/ssr`
|
||||
- Two-hook middleware system in `apps/web/src/hooks.server.ts`:
|
||||
- `supabase` hook: Creates Supabase client per request with cookie management
|
||||
|
|
@ -31,6 +32,7 @@ Both web and mobile apps use Supabase for authentication with different approach
|
|||
- Route groups: `(auth)` for login/register, `(app)` for protected dashboard pages
|
||||
|
||||
**Mobile App (Expo)**:
|
||||
|
||||
- Client-side authentication using `@supabase/supabase-js`
|
||||
- Custom memory storage implementation (`apps/mobile/utils/memoryStorage.ts`) for session persistence
|
||||
- `AuthProvider` component in `apps/mobile/app/_layout.tsx` handles auth state and navigation
|
||||
|
|
@ -39,6 +41,7 @@ Both web and mobile apps use Supabase for authentication with different approach
|
|||
### Database Schema
|
||||
|
||||
Key tables (inferred from queries):
|
||||
|
||||
- `users`: User profiles linked via `auth_id` to Supabase Auth users
|
||||
- `user_roles`: Junction table linking users to organizations (with role information)
|
||||
- `organizations`: Organization entities
|
||||
|
|
@ -48,6 +51,7 @@ Key tables (inferred from queries):
|
|||
### Routing Structure
|
||||
|
||||
**Web App** (SvelteKit file-based routing):
|
||||
|
||||
```
|
||||
routes/
|
||||
├── (auth)/ # Public authentication pages
|
||||
|
|
@ -62,6 +66,7 @@ routes/
|
|||
```
|
||||
|
||||
**Mobile App** (Expo Router):
|
||||
|
||||
```
|
||||
app/
|
||||
├── (drawer)/ # Main drawer navigation
|
||||
|
|
@ -77,6 +82,7 @@ app/
|
|||
### Path Aliases (Web App)
|
||||
|
||||
Defined in `apps/web/svelte.config.js`:
|
||||
|
||||
- `$lib` → `src/lib`
|
||||
- `$components` → `src/lib/components`
|
||||
- `$stores` → `src/lib/stores`
|
||||
|
|
@ -139,6 +145,7 @@ npm run prebuild # Generate native projects
|
|||
Both apps require Supabase credentials. Copy the `.env.example` files and configure:
|
||||
|
||||
**Web App** (`apps/web/.env`):
|
||||
|
||||
```
|
||||
PUBLIC_SUPABASE_URL=your_supabase_url
|
||||
PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
||||
|
|
@ -146,6 +153,7 @@ MIDDLEWARE_URL=https://mana-core-middleware-111768794939.europe-west3.run.app
|
|||
```
|
||||
|
||||
**Mobile App** (`apps/mobile/.env`):
|
||||
|
||||
```
|
||||
EXPO_PUBLIC_SUPABASE_URL=your_supabase_url
|
||||
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
||||
|
|
@ -154,6 +162,7 @@ EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
|||
## Technology Stack
|
||||
|
||||
### Web App
|
||||
|
||||
- **Framework**: SvelteKit 2 with Svelte 5
|
||||
- **Styling**: TailwindCSS with PostCSS
|
||||
- **Database**: Supabase (PostgreSQL)
|
||||
|
|
@ -162,6 +171,7 @@ EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
|||
- **Build**: Vite
|
||||
|
||||
### Mobile App
|
||||
|
||||
- **Framework**: Expo 52 with React Native 0.76
|
||||
- **Routing**: Expo Router 4 (file-based)
|
||||
- **Styling**: NativeWind (TailwindCSS for React Native)
|
||||
|
|
@ -178,22 +188,20 @@ Use `+page.server.ts` files for server-side data fetching with automatic auth co
|
|||
|
||||
```typescript
|
||||
export const load: PageServerLoad = async ({ locals: { supabase, session } }) => {
|
||||
if (!session) {
|
||||
throw redirect(307, '/login');
|
||||
}
|
||||
if (!session) {
|
||||
throw redirect(307, '/login');
|
||||
}
|
||||
|
||||
const { data } = await supabase
|
||||
.from('table_name')
|
||||
.select('*')
|
||||
.eq('user_id', session.user.id);
|
||||
const { data } = await supabase.from('table_name').select('*').eq('user_id', session.user.id);
|
||||
|
||||
return { data };
|
||||
return { data };
|
||||
};
|
||||
```
|
||||
|
||||
### Supabase Client Access
|
||||
|
||||
**Web**: Access via `event.locals.supabase` in server code, or use helper functions in `$server/supabase.ts`:
|
||||
|
||||
- `getUser(event)`: Get current user
|
||||
- `getSession(event)`: Get current session
|
||||
- `requireAuth(event)`: Require auth or throw error
|
||||
|
|
@ -210,6 +218,7 @@ export const load: PageServerLoad = async ({ locals: { supabase, session } }) =>
|
|||
## Multi-App Branding
|
||||
|
||||
When adding new apps to the ecosystem, update `apps/web/src/lib/config/apps.ts` with:
|
||||
|
||||
- App name and display name
|
||||
- Tagline and description
|
||||
- Logo emoji and colors
|
||||
|
|
|
|||
|
|
@ -36,12 +36,14 @@ ManaCore Apps is a monorepo containing web and mobile applications that provide
|
|||
### Setup
|
||||
|
||||
1. **Clone the repository**
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd mana-core-apps
|
||||
```
|
||||
|
||||
2. **Web App Setup**
|
||||
|
||||
```bash
|
||||
cd apps/web
|
||||
pnpm install
|
||||
|
|
@ -96,28 +98,28 @@ mana-core-apps/
|
|||
|
||||
### Web App (apps/web)
|
||||
|
||||
| Category | Technology |
|
||||
|----------|------------|
|
||||
| Framework | SvelteKit 2 with Svelte 5 (Runes) |
|
||||
| Language | TypeScript |
|
||||
| Styling | TailwindCSS 3 with PostCSS |
|
||||
| Database | Supabase (PostgreSQL) |
|
||||
| Auth | Supabase Auth with SSR |
|
||||
| Testing | Vitest (unit) + Playwright (E2E) |
|
||||
| Build Tool | Vite |
|
||||
| Category | Technology |
|
||||
| ---------- | --------------------------------- |
|
||||
| Framework | SvelteKit 2 with Svelte 5 (Runes) |
|
||||
| Language | TypeScript |
|
||||
| Styling | TailwindCSS 3 with PostCSS |
|
||||
| Database | Supabase (PostgreSQL) |
|
||||
| Auth | Supabase Auth with SSR |
|
||||
| Testing | Vitest (unit) + Playwright (E2E) |
|
||||
| Build Tool | Vite |
|
||||
|
||||
### Mobile App (apps/mobile)
|
||||
|
||||
| Category | Technology |
|
||||
|----------|------------|
|
||||
| Framework | Expo 52 with React Native 0.76 |
|
||||
| Language | TypeScript |
|
||||
| Routing | Expo Router 4 (file-based) |
|
||||
| Styling | NativeWind (TailwindCSS for RN) |
|
||||
| Category | Technology |
|
||||
| ---------- | ------------------------------- |
|
||||
| Framework | Expo 52 with React Native 0.76 |
|
||||
| Language | TypeScript |
|
||||
| Routing | Expo Router 4 (file-based) |
|
||||
| Styling | NativeWind (TailwindCSS for RN) |
|
||||
| Navigation | React Navigation (drawer, tabs) |
|
||||
| Database | Supabase |
|
||||
| Build | EAS Build |
|
||||
| Platforms | iOS, Android, Web |
|
||||
| Database | Supabase |
|
||||
| Build | EAS Build |
|
||||
| Platforms | iOS, Android, Web |
|
||||
|
||||
## Development
|
||||
|
||||
|
|
@ -204,12 +206,14 @@ App configurations are centralized in `apps/web/src/lib/config/apps.ts`, definin
|
|||
### Authentication Flow
|
||||
|
||||
**Web (SvelteKit)**:
|
||||
|
||||
1. Server-side authentication using `@supabase/ssr`
|
||||
2. Middleware in `hooks.server.ts` handles session validation
|
||||
3. Protected routes in `(app)` group require authentication
|
||||
4. JWT validation via `safeGetSession()` before allowing access
|
||||
|
||||
**Mobile (Expo)**:
|
||||
|
||||
1. Client-side authentication using `@supabase/supabase-js`
|
||||
2. Custom memory storage for session persistence
|
||||
3. `AuthProvider` in `app/_layout.tsx` manages auth state
|
||||
|
|
@ -218,6 +222,7 @@ App configurations are centralized in `apps/web/src/lib/config/apps.ts`, definin
|
|||
### Database Schema
|
||||
|
||||
Key tables:
|
||||
|
||||
- `users` - User profiles (linked via `auth_id` to Supabase Auth)
|
||||
- `organizations` - Organization entities
|
||||
- `user_roles` - User-organization relationships with roles
|
||||
|
|
@ -258,12 +263,14 @@ npm start # Start dev server
|
|||
### Web App
|
||||
|
||||
**Vercel** (Recommended):
|
||||
|
||||
```bash
|
||||
cd apps/web
|
||||
vercel
|
||||
```
|
||||
|
||||
**Netlify**:
|
||||
|
||||
```bash
|
||||
cd apps/web
|
||||
netlify deploy
|
||||
|
|
@ -272,6 +279,7 @@ netlify deploy
|
|||
### Mobile App
|
||||
|
||||
**iOS and Android** (via EAS):
|
||||
|
||||
```bash
|
||||
cd apps/mobile
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,32 @@
|
|||
# Landing Page Konzepte - Erste Vier Sektionen
|
||||
|
||||
## Konzept 1: "Die Ökosystem-Story"
|
||||
*Fokus auf das vernetzte Ökosystem und die Vision eines nachhaltigen Software-Modells*
|
||||
## 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"
|
||||
- "🇪🇺 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"
|
||||
|
|
@ -29,10 +35,12 @@
|
|||
- **+**: "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"
|
||||
|
|
@ -40,9 +48,11 @@
|
|||
**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:
|
||||
|
|
@ -56,34 +66,42 @@
|
|||
---
|
||||
|
||||
## Konzept 2: "Die Nutzen-First Approach"
|
||||
*Fokus auf konkrete Anwendungsfälle und sofortigen Mehrwert*
|
||||
|
||||
_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"
|
||||
|
|
@ -91,9 +109,11 @@
|
|||
**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")
|
||||
|
|
@ -105,40 +125,49 @@
|
|||
---
|
||||
|
||||
## Konzept 3: "Die Zukunftsvision"
|
||||
*Fokus auf Innovation, Nachhaltigkeit und europäische Unabhängigkeit*
|
||||
|
||||
_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
|
||||
|
|
@ -148,14 +177,17 @@
|
|||
**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"
|
||||
|
|
@ -173,4 +205,4 @@ Ich empfehle **Konzept 1 "Die Ökosystem-Story"** als Hauptansatz, mit Elementen
|
|||
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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,28 +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"
|
||||
}
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,22 +15,26 @@ public/
|
|||
## 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
|
||||
|
|
@ -38,7 +42,7 @@ public/
|
|||
## Quick Reference:
|
||||
|
||||
- **Logos**: `/public/logos/` - Brand identity assets
|
||||
- **Icons**: `/public/icons/` - Favicons and app icons
|
||||
- **Icons**: `/public/icons/` - Favicons and app icons
|
||||
- **Images**: `/public/images/` - Photos, illustrations, backgrounds
|
||||
|
||||
## Next Steps:
|
||||
|
|
@ -46,4 +50,4 @@ public/
|
|||
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
|
||||
4. Update the Astro components to reference these assets
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ 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
|
||||
|
|
@ -18,21 +20,26 @@ This directory is for storing favicons and app icons for the Mana landing page.
|
|||
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
|
||||
- Test icons across different browsers and devices
|
||||
|
|
|
|||
|
|
@ -5,24 +5,29 @@ This directory is for storing general images used throughout the Mana landing pa
|
|||
## 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
|
||||
|
|
@ -30,12 +35,14 @@ This directory is for storing general images used throughout the Mana landing pa
|
|||
## 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
|
||||
|
|
@ -44,12 +51,14 @@ This directory is for storing general images used throughout the Mana landing pa
|
|||
- 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
|
||||
- Implement proper caching headers
|
||||
|
|
|
|||
|
|
@ -13,14 +13,16 @@ This directory is for storing logo variations of the Mana brand.
|
|||
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
|
||||
- Extra Large: 1200px width
|
||||
|
|
|
|||
|
|
@ -9,66 +9,67 @@ 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;
|
||||
title: string;
|
||||
content: string;
|
||||
imagePosition?: 'left' | 'right';
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
content,
|
||||
imagePosition = 'left',
|
||||
imageSrc,
|
||||
imageAlt = ''
|
||||
} = Astro.props;
|
||||
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>
|
||||
<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" />
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,30 @@
|
|||
---
|
||||
export interface Props {
|
||||
background?: 'white' | 'gray' | 'primary' | 'gradient';
|
||||
spacing?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
|
||||
class?: string;
|
||||
background?: 'white' | 'gray' | 'primary' | 'gradient';
|
||||
spacing?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
background = 'white',
|
||||
spacing = 'large',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
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'
|
||||
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'
|
||||
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>
|
||||
<slot />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,68 @@
|
|||
---
|
||||
export interface Props {
|
||||
type?: 'success' | 'error' | 'warning' | 'info';
|
||||
title?: string;
|
||||
dismissible?: boolean;
|
||||
class?: string;
|
||||
type?: 'success' | 'error' | 'warning' | 'info';
|
||||
title?: string;
|
||||
dismissible?: boolean;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
type = 'info',
|
||||
title,
|
||||
dismissible = false,
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
const { type = 'info', title, dismissible = false, class: className = '', ...rest } = Astro.props;
|
||||
|
||||
const baseStyles = "p-4 rounded-lg flex items-start";
|
||||
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"
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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>`
|
||||
</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>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
---
|
||||
export interface Props {
|
||||
class?: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
const { class: className = '', ...rest } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`page-grid ${className}`} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,59 +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;
|
||||
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
|
||||
direction = 'row',
|
||||
wrap = false,
|
||||
align = 'stretch',
|
||||
justify = 'start',
|
||||
gap = 'none',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
|
||||
const baseStyles = "flex";
|
||||
const baseStyles = 'flex';
|
||||
|
||||
const directions = {
|
||||
row: "flex-row",
|
||||
column: "flex-col"
|
||||
row: 'flex-row',
|
||||
column: 'flex-col',
|
||||
};
|
||||
|
||||
const alignments = {
|
||||
start: "items-start",
|
||||
center: "items-center",
|
||||
end: "items-end",
|
||||
stretch: "items-stretch",
|
||||
baseline: "items-baseline"
|
||||
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"
|
||||
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"
|
||||
none: '',
|
||||
small: 'gap-2',
|
||||
medium: 'gap-4',
|
||||
large: 'gap-6',
|
||||
};
|
||||
|
||||
const wrapStyle = wrap ? "flex-wrap" : "";
|
||||
const wrapStyle = wrap ? 'flex-wrap' : '';
|
||||
|
||||
const classes = `${baseStyles} ${directions[direction]} ${alignments[align]} ${justifications[justify]} ${gaps[gap]} ${wrapStyle} ${className}`;
|
||||
---
|
||||
|
||||
<div class={classes} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,33 @@
|
|||
---
|
||||
export interface Props {
|
||||
cols?: 1 | 2 | 3 | 4 | 6 | 12;
|
||||
gap?: 'none' | 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
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 { cols = 1, gap = 'medium', class: className = '', ...rest } = Astro.props;
|
||||
|
||||
const baseStyles = "grid";
|
||||
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"
|
||||
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"
|
||||
none: '',
|
||||
small: 'gap-4',
|
||||
medium: 'gap-6',
|
||||
large: 'gap-8',
|
||||
};
|
||||
|
||||
const classes = `${baseStyles} ${columns[cols]} ${gaps[gap]} ${className}`;
|
||||
---
|
||||
|
||||
<div class={classes} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,103 +4,105 @@ 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' },
|
||||
{ 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>
|
||||
<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>
|
||||
<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>
|
||||
<!-- 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 {
|
||||
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-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-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-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 {
|
||||
font-size: 0.8125rem;
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
/* Mobile */
|
||||
@media (max-width: 640px) {
|
||||
.footer-content {
|
||||
padding: 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
gap: 0.375rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.footer-nav {
|
||||
gap: 0.375rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.footer-link {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
padding-top: 1rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.footer-copyright {
|
||||
padding-top: 1rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
export interface Props {
|
||||
navLinks: { href: string; label: string; }[];
|
||||
navLinks: { href: string; label: string }[];
|
||||
}
|
||||
|
||||
const { navLinks } = Astro.props;
|
||||
|
|
@ -8,65 +8,75 @@ 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import { getLangFromUrl, useTranslations } from '../../lib/i18n/config';
|
|||
import { getLocalizedRoute } from '../../lib/i18n/utils';
|
||||
|
||||
export interface Props {
|
||||
transparent?: boolean;
|
||||
sticky?: boolean;
|
||||
transparent?: boolean;
|
||||
sticky?: boolean;
|
||||
}
|
||||
|
||||
const { transparent = false, sticky = true } = Astro.props;
|
||||
|
|
@ -18,116 +18,122 @@ 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') },
|
||||
{ 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 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} />
|
||||
<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');
|
||||
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;
|
||||
function openMobileMenu() {
|
||||
if (!mobileMenu || !mobileMenuPanel) return;
|
||||
|
||||
mobileMenu.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
mobileMenu.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Trigger animation after display change
|
||||
requestAnimationFrame(() => {
|
||||
mobileMenuPanel.classList.remove('translate-x-full');
|
||||
});
|
||||
}
|
||||
// Trigger animation after display change
|
||||
requestAnimationFrame(() => {
|
||||
mobileMenuPanel.classList.remove('translate-x-full');
|
||||
});
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
if (!mobileMenu || !mobileMenuPanel) return;
|
||||
function closeMobileMenu() {
|
||||
if (!mobileMenu || !mobileMenuPanel) return;
|
||||
|
||||
mobileMenuPanel.classList.add('translate-x-full');
|
||||
document.body.style.overflow = '';
|
||||
mobileMenuPanel.classList.add('translate-x-full');
|
||||
document.body.style.overflow = '';
|
||||
|
||||
// Hide after animation completes
|
||||
setTimeout(() => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}, 300);
|
||||
}
|
||||
// Hide after animation completes
|
||||
setTimeout(() => {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
mobileMenuOpen?.addEventListener('click', openMobileMenu);
|
||||
mobileMenuClose?.addEventListener('click', closeMobileMenu);
|
||||
mobileMenuOverlay?.addEventListener('click', closeMobileMenu);
|
||||
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>
|
||||
// Close menu on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !mobileMenu?.classList.contains('hidden')) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,155 +8,197 @@ 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' },
|
||||
{ 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"
|
||||
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>
|
||||
<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>
|
||||
<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}
|
||||
/>
|
||||
</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>
|
||||
<!-- 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;
|
||||
}
|
||||
/* 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 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-toggle:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* FAB rotation when menu is open */
|
||||
#fab-toggle.menu-open #fab-icon {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/* 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);
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
/* Desktop: Horizontal layout */
|
||||
@media (min-width: 768px) {
|
||||
#sidebar > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#sidebar nav {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
#sidebar nav {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 767px) {
|
||||
#sidebar {
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
/* 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');
|
||||
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');
|
||||
// Toggle menu
|
||||
fabToggle?.addEventListener('click', () => {
|
||||
const isOpen = sidebar?.classList.contains('menu-open');
|
||||
|
||||
if (isOpen) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
});
|
||||
if (isOpen) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on overlay click
|
||||
overlay?.addEventListener('click', closeMenu);
|
||||
// Close on overlay click
|
||||
overlay?.addEventListener('click', closeMenu);
|
||||
|
||||
// Close menu on navigation
|
||||
const navLinks = sidebar?.querySelectorAll('a');
|
||||
navLinks?.forEach(link => {
|
||||
link.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 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');
|
||||
}
|
||||
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();
|
||||
}
|
||||
});
|
||||
});
|
||||
// Close on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && sidebar?.classList.contains('menu-open')) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,122 +6,157 @@ 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';
|
||||
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>
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -9,197 +9,225 @@ import { pricingPlans } from '../../data/pricing.js';
|
|||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
showOneTime?: boolean;
|
||||
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>
|
||||
<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;
|
||||
}
|
||||
.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>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -6,170 +6,176 @@ import Text from '../typography/Text.astro';
|
|||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
class?: string;
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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');
|
||||
// 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 }
|
||||
};
|
||||
const classicPricePerUser = 19.99;
|
||||
|
||||
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}%`;
|
||||
}
|
||||
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 },
|
||||
};
|
||||
|
||||
// Event listeners
|
||||
teamSizeInput?.addEventListener('input', calculateCosts);
|
||||
usageIntensitySelect?.addEventListener('change', calculateCosts);
|
||||
function calculateCosts() {
|
||||
const teamSize = parseInt(teamSizeInput.value);
|
||||
const intensity = usageIntensitySelect.value as keyof typeof manacorePlans;
|
||||
|
||||
// Initial calculation
|
||||
calculateCosts();
|
||||
</script>
|
||||
// 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>
|
||||
|
|
|
|||
|
|
@ -6,157 +6,169 @@ import Text from '../typography/Text.astro';
|
|||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export interface Props {
|
||||
class?: string;
|
||||
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>
|
||||
<Container>
|
||||
<div class="text-center mb-12">
|
||||
<Heading as="h2" size="3" class="mb-4"> Vernetzte Apps, die zusammen stark sind </Heading>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ const currentRoute = Astro.url.pathname;
|
|||
const alternateLinks = getAlternateLinks(currentRoute);
|
||||
---
|
||||
|
||||
{alternateLinks.map(link => (
|
||||
<link rel="alternate" hreflang={link.lang} href={`https://manacore.ai${link.href}`} />
|
||||
))}
|
||||
{
|
||||
alternateLinks.map((link) => (
|
||||
<link rel="alternate" hreflang={link.lang} href={`https://manacore.ai${link.href}`} />
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +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;
|
||||
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
|
||||
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'
|
||||
'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'
|
||||
normal: 'font-normal',
|
||||
medium: 'font-medium',
|
||||
semibold: 'font-semibold',
|
||||
bold: 'font-bold',
|
||||
};
|
||||
|
||||
const alignments = {
|
||||
left: 'text-left',
|
||||
center: 'text-center',
|
||||
right: 'text-right'
|
||||
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>
|
||||
<slot />
|
||||
</Tag>
|
||||
|
|
|
|||
|
|
@ -1,57 +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;
|
||||
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
|
||||
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'
|
||||
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'
|
||||
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'
|
||||
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'
|
||||
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>
|
||||
<slot />
|
||||
</Tag>
|
||||
|
|
|
|||
|
|
@ -3,80 +3,93 @@ 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;
|
||||
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'
|
||||
}
|
||||
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>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
---
|
||||
export interface Props {
|
||||
variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
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'
|
||||
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'
|
||||
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 = `
|
||||
|
|
@ -30,5 +30,5 @@ const classes = `
|
|||
---
|
||||
|
||||
<span class={classes}>
|
||||
<slot />
|
||||
</span>
|
||||
<slot />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,54 @@
|
|||
---
|
||||
export interface Props {
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
href?: string;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
class?: string;
|
||||
disabled?: boolean;
|
||||
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
|
||||
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 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"
|
||||
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"
|
||||
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>
|
||||
)}
|
||||
{
|
||||
href ? (
|
||||
<a href={href} class={classes} {...rest}>
|
||||
<slot />
|
||||
</a>
|
||||
) : (
|
||||
<button type={type} class={classes} disabled={disabled} {...rest}>
|
||||
<slot />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,31 @@
|
|||
---
|
||||
export interface Props {
|
||||
variant?: 'default' | 'bordered' | 'elevated';
|
||||
padding?: 'none' | 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
variant?: 'default' | 'bordered' | 'elevated';
|
||||
padding?: 'none' | 'small' | 'medium' | 'large';
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
variant = 'default',
|
||||
padding = 'medium',
|
||||
class: className = '',
|
||||
...rest
|
||||
} = Astro.props;
|
||||
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 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"
|
||||
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"
|
||||
none: '',
|
||||
small: 'p-4',
|
||||
medium: 'p-6',
|
||||
large: 'p-8',
|
||||
};
|
||||
|
||||
const classes = `${baseStyles} ${variants[variant]} ${paddings[padding]} ${className}`;
|
||||
---
|
||||
|
||||
<div class={classes} {...rest}>
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,60 @@
|
|||
---
|
||||
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;
|
||||
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`,
|
||||
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
|
||||
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 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'
|
||||
contain: 'object-contain',
|
||||
cover: 'object-cover',
|
||||
fill: 'object-fill',
|
||||
none: 'object-none',
|
||||
'scale-down': 'object-scale-down',
|
||||
};
|
||||
|
||||
const roundedClass = rounded ? 'rounded-lg' : '';
|
||||
|
|
@ -51,12 +62,12 @@ const classes = `${objectFitClasses[objectFit]} ${roundedClass} ${className}`;
|
|||
---
|
||||
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={alt}
|
||||
width={width}
|
||||
height={height}
|
||||
loading={loading}
|
||||
class={classes}
|
||||
decoding="async"
|
||||
{...rest}
|
||||
/>
|
||||
src={imageSrc}
|
||||
alt={alt}
|
||||
width={width}
|
||||
height={height}
|
||||
loading={loading}
|
||||
class={classes}
|
||||
decoding="async"
|
||||
{...rest}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,77 @@
|
|||
---
|
||||
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;
|
||||
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
|
||||
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 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>
|
||||
{
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { languages, type Language } from '../../lib/i18n/config';
|
|||
import { getRouteFromUrl, getLocalizedRoute } from '../../lib/i18n/utils';
|
||||
|
||||
export interface Props {
|
||||
currentLang: Language;
|
||||
currentLang: Language;
|
||||
}
|
||||
|
||||
const { currentLang } = Astro.props;
|
||||
|
|
@ -12,19 +12,19 @@ const currentRoute = getRouteFromUrl(Astro.url);
|
|||
|
||||
// Get language labels and flag emojis
|
||||
const languageLabels = {
|
||||
de: 'DE',
|
||||
en: 'EN',
|
||||
it: 'IT',
|
||||
fr: 'FR',
|
||||
es: 'ES'
|
||||
de: 'DE',
|
||||
en: 'EN',
|
||||
it: 'IT',
|
||||
fr: 'FR',
|
||||
es: 'ES',
|
||||
};
|
||||
|
||||
const flagEmojis = {
|
||||
de: '🇩🇪',
|
||||
en: '🇬🇧',
|
||||
it: '🇮🇹',
|
||||
fr: '🇫🇷',
|
||||
es: '🇪🇸'
|
||||
de: '🇩🇪',
|
||||
en: '🇬🇧',
|
||||
it: '🇮🇹',
|
||||
fr: '🇫🇷',
|
||||
es: '🇪🇸',
|
||||
};
|
||||
|
||||
// Generate unique ID for this instance
|
||||
|
|
@ -32,125 +32,129 @@ 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>
|
||||
<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);
|
||||
<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>
|
||||
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-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 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:hover .language-chevron,
|
||||
.language-switcher[data-open='true'] .language-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.language-switcher[data-open="true"] .language-menu {
|
||||
display: block;
|
||||
}
|
||||
.language-switcher[data-open='true'] .language-menu {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initLanguageSwitchers() {
|
||||
const switchers = document.querySelectorAll('.language-switcher');
|
||||
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;
|
||||
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;
|
||||
}
|
||||
if (!toggle || !menu) {
|
||||
console.log('Language switcher missing elements');
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle menu
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// Toggle menu
|
||||
toggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const isOpen = switcher.getAttribute('data-open') === 'true';
|
||||
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');
|
||||
}
|
||||
});
|
||||
// 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');
|
||||
});
|
||||
// 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();
|
||||
});
|
||||
});
|
||||
// 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');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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>
|
||||
// Init on page load
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initLanguageSwitchers);
|
||||
} else {
|
||||
initLanguageSwitchers();
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,72 +3,59 @@
|
|||
---
|
||||
|
||||
<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"
|
||||
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>
|
||||
<!-- 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>
|
||||
// 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>
|
||||
|
|
|
|||
|
|
@ -30,21 +30,27 @@ Märchenzauber revolutioniert das Geschichtenerzählen für Kinder. Mit unserer
|
|||
## 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
|
||||
|
|
@ -65,18 +71,21 @@ Der Mana-Verbrauch richtet sich nach Umfang und Komplexität:
|
|||
## 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
|
||||
|
|
@ -85,6 +94,7 @@ Der Mana-Verbrauch richtet sich nach Umfang und Komplexität:
|
|||
## 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
|
||||
|
|
@ -97,9 +107,10 @@ Mit Mana-Credits zahlen Sie nur für die Bücher, die Sie tatsächlich erstellen
|
|||
## 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.
|
||||
Alle erstellten Bücher können als PDF heruntergeladen, gedruckt oder digital geteilt werden.
|
||||
|
|
|
|||
|
|
@ -30,7 +30,9 @@ Manadeck revolutioniert das Lernen mit Karteikarten durch KI-Unterstützung. Lad
|
|||
## 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
|
||||
|
|
@ -38,7 +40,9 @@ Manadeck verwandelt Ihre Materialien intelligent in Lernkarten:
|
|||
- 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
|
||||
|
|
@ -46,7 +50,9 @@ Adaptives Lernen basierend auf Ihrer Performance:
|
|||
- Lernstatistiken und Fortschrittstracking
|
||||
|
||||
### 📚 Vielseitige Kartentypen
|
||||
|
||||
Verschiedene Formate für jeden Lernstil:
|
||||
|
||||
- Klassische Vorder-/Rückseite-Karten
|
||||
- Multiple-Choice mit Erklärungen
|
||||
- Lückentexte
|
||||
|
|
@ -67,6 +73,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
## Anwendungsfälle
|
||||
|
||||
### Für Studierende
|
||||
|
||||
- Prüfungsvorbereitung optimieren
|
||||
- Vorlesungsnotizen in Lernkarten verwandeln
|
||||
- Gemeinsame Lerndecks mit Kommilitonen
|
||||
|
|
@ -74,6 +81,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
- Vokabeln und Fachbegriffe lernen
|
||||
|
||||
### Für Schüler
|
||||
|
||||
- Hausaufgaben effektiver bewältigen
|
||||
- Für Klassenarbeiten lernen
|
||||
- Sprachen spielerisch lernen
|
||||
|
|
@ -81,6 +89,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
- Abitur-Vorbereitung
|
||||
|
||||
### Für Berufstätige
|
||||
|
||||
- Zertifizierungen vorbereiten
|
||||
- Fachkenntnisse auffrischen
|
||||
- Neue Skills erlernen
|
||||
|
|
@ -88,6 +97,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
- Produktschulungen
|
||||
|
||||
### Für Lehrkräfte
|
||||
|
||||
- Unterrichtsmaterial aufbereiten
|
||||
- Lerndecks für Klassen erstellen
|
||||
- Lernfortschritt verfolgen
|
||||
|
|
@ -97,6 +107,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
## KI-Features im Detail
|
||||
|
||||
### 📝 Automatische Kartenerstellung
|
||||
|
||||
- Upload von PDF, Word, PowerPoint
|
||||
- Texterkennung aus Bildern (OCR)
|
||||
- Strukturierte Extraktion von Informationen
|
||||
|
|
@ -104,6 +115,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
- Qualitätskontrolle der generierten Karten
|
||||
|
||||
### 💡 Intelligente Erklärungen
|
||||
|
||||
- KI-generierte Zusatzerklärungen
|
||||
- Beispiele und Analogien
|
||||
- Verwandte Konzepte verlinken
|
||||
|
|
@ -111,6 +123,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
- Eselsbrücken und Merkhilfen
|
||||
|
||||
### 📊 Lernanalyse
|
||||
|
||||
- Detaillierte Lernstatistiken
|
||||
- Stärken und Schwächen identifizieren
|
||||
- Optimale Lernzeiten ermitteln
|
||||
|
|
@ -120,6 +133,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
## Kollaboration & Sharing
|
||||
|
||||
### 👥 Team-Features
|
||||
|
||||
- Gemeinsame Lerndecks erstellen
|
||||
- Karten kommentieren und verbessern
|
||||
- Lerngruppen bilden
|
||||
|
|
@ -127,6 +141,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
- Peer-Learning fördern
|
||||
|
||||
### 🌐 Community-Bibliothek
|
||||
|
||||
- Öffentliche Decks durchsuchen
|
||||
- Bewertungen und Reviews
|
||||
- Von Experten erstellte Decks
|
||||
|
|
@ -136,6 +151,7 @@ Der Verbrauch richtet sich nach der Komplexität:
|
|||
## Integration & Kompatibilität
|
||||
|
||||
Manadeck arbeitet nahtlos mit:
|
||||
|
||||
- Anki (Import/Export)
|
||||
- Quizlet (Import/Export)
|
||||
- Google Drive & Dropbox
|
||||
|
|
@ -146,6 +162,7 @@ Manadeck arbeitet nahtlos mit:
|
|||
## Gamification & Motivation
|
||||
|
||||
### 🏆 Erfolge & Belohnungen
|
||||
|
||||
- Lernsträhnen aufbauen
|
||||
- Abzeichen sammeln
|
||||
- Level-System
|
||||
|
|
@ -153,6 +170,7 @@ Manadeck arbeitet nahtlos mit:
|
|||
- Ranglisten (optional)
|
||||
|
||||
### 🎯 Lernziele
|
||||
|
||||
- Persönliche Ziele setzen
|
||||
- Meilensteine definieren
|
||||
- Erinnerungen und Motivation
|
||||
|
|
@ -174,10 +192,11 @@ Nutzen Sie Manadeck genau nach Ihrem Bedarf. Erstellen Sie einmalig Karten für
|
|||
## 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!
|
||||
Alle Plattformen synchronisieren sich automatisch, sodass Sie überall lernen können - online und offline!
|
||||
|
|
|
|||
|
|
@ -30,16 +30,20 @@ Memoro ist Ihre persönliche KI-Assistentin für Audio-Aufnahmen. Egal ob Sie ei
|
|||
## 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
|
||||
|
|
@ -47,18 +51,22 @@ Memoro unterstützt über 20 Sprachen und kann sogar mehrsprachige Gespräche tr
|
|||
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
|
||||
|
|
@ -66,29 +74,34 @@ Der Mana-Verbrauch bei Memoro ist transparent und fix: **1 Mana = 1 Cent**
|
|||
- **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
|
||||
|
|
@ -101,9 +114,10 @@ Memoro ist vollständig in das Mana-Ökosystem integriert. Sie zahlen nur für d
|
|||
## 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.
|
||||
Alle Plattformen synchronisieren sich automatisch, sodass Sie nahtlos zwischen Geräten wechseln können.
|
||||
|
|
|
|||
|
|
@ -29,16 +29,20 @@ Memoro is your personal AI assistant for audio recordings. Whether you have an i
|
|||
## 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
|
||||
|
|
@ -53,18 +57,21 @@ Mana consumption with Memoro is transparent and fair:
|
|||
## 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
|
||||
|
|
@ -77,9 +84,10 @@ Memoro is fully integrated into the Mana ecosystem. You only pay for actual usag
|
|||
## 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.
|
||||
All platforms sync automatically, allowing you to seamlessly switch between devices.
|
||||
|
|
|
|||
|
|
@ -30,14 +30,18 @@ Moodlit ist dein digitaler Begleiter für mentale Gesundheit und emotionales Woh
|
|||
## 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
|
||||
|
|
@ -45,7 +49,9 @@ Moodlit passt sich deinen Bedürfnissen an und bietet maßgeschneiderte Übungen
|
|||
- 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
|
||||
|
|
@ -53,7 +59,9 @@ Schreibe deine Gedanken auf und erhalte einfühlsame KI-Reflexionen:
|
|||
- Export und Backup deiner Einträge
|
||||
|
||||
### 😴 Schlaf-Optimierung
|
||||
|
||||
Verbessere deine Schlafqualität mit KI-Unterstützung:
|
||||
|
||||
- Einschlaf-Meditationen
|
||||
- Beruhigende Soundscapes
|
||||
- Schlaftracking und -analyse
|
||||
|
|
@ -73,18 +81,21 @@ Der Mana-Verbrauch bei Moodlit ist transparent und fair:
|
|||
## 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
|
||||
|
|
@ -93,6 +104,7 @@ Der Mana-Verbrauch bei Moodlit ist transparent und fair:
|
|||
## 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
|
||||
|
|
@ -102,6 +114,7 @@ Deine mentale Gesundheit ist privat – und bleibt es auch:
|
|||
## Wissenschaftliche Grundlage
|
||||
|
||||
Moodlit basiert auf evidenzbasierten Methoden:
|
||||
|
||||
- Kognitive Verhaltenstherapie (CBT)
|
||||
- Achtsamkeitsbasierte Stressreduktion (MBSR)
|
||||
- Positive Psychologie
|
||||
|
|
@ -115,6 +128,7 @@ Mit Mana-Credits nutzt du Moodlit flexibel nach deinem Bedarf. An stressigen Tag
|
|||
## Verfügbarkeit
|
||||
|
||||
Moodlit ist verfügbar für:
|
||||
|
||||
- iOS (iPhone & iPad)
|
||||
- Android
|
||||
- Web-App
|
||||
|
|
|
|||
|
|
@ -30,15 +30,19 @@ Nutriphi ist dein persönlicher Ernährungs-Coach mit KI-Power. Statt mühsam je
|
|||
## 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?
|
||||
|
|
|
|||
|
|
@ -30,15 +30,19 @@ Orakel ist deine persönliche KI-Assistentin für alle Lebenslagen. Ob du komple
|
|||
## 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?
|
||||
|
|
|
|||
|
|
@ -30,15 +30,19 @@ Pictus ist dein persönlicher KI-Bildgenerator und kreativer Playground. Ob du e
|
|||
## 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?
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ features:
|
|||
- Entdeckungs-Statistiken und Achievements
|
||||
- Schöne, teilbare Karten-Visualisierungen
|
||||
- Privatsphäre-Fokus mit lokaler Datenverarbeitung
|
||||
- "Gamification: Challenges und Stadtteile freischalten"
|
||||
- 'Gamification: Challenges und Stadtteile freischalten'
|
||||
status: coming-soon
|
||||
releaseDate: Geplant Q4 2025
|
||||
order: 9
|
||||
|
|
@ -30,15 +30,19 @@ Traces verwandelt deinen täglichen Weg durch die Stadt in ein Abenteuer. Die Ap
|
|||
## 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?
|
||||
|
|
|
|||
|
|
@ -30,7 +30,9 @@ Zitare ist dein intelligenter Assistent für wissenschaftliches Arbeiten. Von de
|
|||
## 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
|
||||
|
|
@ -39,7 +41,9 @@ Finde relevante Quellen in Sekundenschnelle:
|
|||
- Volltextzugriff wo verfügbar
|
||||
|
||||
### 📑 Intelligente Zitatverwaltung
|
||||
|
||||
Organisiere deine Quellen mühelos:
|
||||
|
||||
- Automatische Metadaten-Extraktion aus PDFs
|
||||
- Drag & Drop Import von Dokumenten
|
||||
- Tagging und Kategorisierung
|
||||
|
|
@ -48,7 +52,9 @@ Organisiere deine Quellen mühelos:
|
|||
- Duplikat-Erkennung
|
||||
|
||||
### ✍️ Perfekte Formatierung
|
||||
|
||||
Zitiere korrekt in jedem Stil:
|
||||
|
||||
- Über 10.000 Zitierstile unterstützt
|
||||
- Automatische In-Text-Zitate
|
||||
- Ein-Klick Bibliografie-Erstellung
|
||||
|
|
@ -57,7 +63,9 @@ Zitiere korrekt in jedem Stil:
|
|||
- LaTeX/BibTeX Export
|
||||
|
||||
### 🤖 KI-Features
|
||||
|
||||
Verstehe Forschung schneller:
|
||||
|
||||
- Automatische Zusammenfassungen langer Artikel
|
||||
- Extraktion von Kernaussagen und Methoden
|
||||
- Vergleich mehrerer Studien
|
||||
|
|
@ -80,24 +88,28 @@ Der Mana-Verbrauch richtet sich nach der genutzten Funktion:
|
|||
## 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
|
||||
|
|
@ -106,6 +118,7 @@ Der Mana-Verbrauch richtet sich nach der genutzten Funktion:
|
|||
## Unterstützte Zitierstile
|
||||
|
||||
Zitare unterstützt alle gängigen Zitierstile:
|
||||
|
||||
- **APA** (American Psychological Association)
|
||||
- **MLA** (Modern Language Association)
|
||||
- **Chicago** (Notes & Bibliography, Author-Date)
|
||||
|
|
@ -119,6 +132,7 @@ Zitare unterstützt alle gängigen Zitierstile:
|
|||
## Integration & Export
|
||||
|
||||
Nahtlose Integration in deinen Workflow:
|
||||
|
||||
- **Microsoft Word** Plugin (Windows & Mac)
|
||||
- **Google Docs** Add-on
|
||||
- **LibreOffice** Extension
|
||||
|
|
@ -130,6 +144,7 @@ Nahtlose Integration in deinen Workflow:
|
|||
## Team-Features
|
||||
|
||||
Gemeinsam effizienter forschen:
|
||||
|
||||
- Geteilte Bibliotheken für Teams
|
||||
- Kommentare und Diskussionen
|
||||
- Aufgaben-Zuweisung
|
||||
|
|
@ -140,6 +155,7 @@ Gemeinsam effizienter forschen:
|
|||
## Datensicherheit
|
||||
|
||||
Deine Forschung ist wertvoll und geschützt:
|
||||
|
||||
- **Verschlüsselte Speicherung** aller Dokumente
|
||||
- **Automatische Backups** täglich
|
||||
- **DSGVO-konform** - Server in Europa
|
||||
|
|
@ -154,6 +170,7 @@ Mit Mana-Credits zahlst du nur für die KI-Features, die du tatsächlich nutzt.
|
|||
## Verfügbarkeit
|
||||
|
||||
Zitare ist verfügbar als:
|
||||
|
||||
- **Web-App** (alle Browser)
|
||||
- **Desktop-App** (Windows, Mac, Linux)
|
||||
- **Browser-Extension** (Chrome, Firefox, Safari, Edge)
|
||||
|
|
@ -162,18 +179,19 @@ Zitare ist verfügbar als:
|
|||
|
||||
## Vergleich zu Konkurrenz
|
||||
|
||||
| Feature | Zitare | Zotero | Mendeley | EndNote |
|
||||
|---------|--------|--------|----------|---------|
|
||||
| KI-Zusammenfassungen | ✅ | ❌ | ❌ | ❌ |
|
||||
| Flexible Abrechnung | ✅ | ✅ | ❌ | ❌ |
|
||||
| Moderne UI | ✅ | ⚠️ | ✅ | ⚠️ |
|
||||
| Open Source | ✅ | ✅ | ❌ | ❌ |
|
||||
| PDF-Annotation | ✅ | ✅ | ✅ | ✅ |
|
||||
| Team-Features | ✅ | ⚠️ | ✅ | ✅ |
|
||||
| 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
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- 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"
|
||||
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"
|
||||
discount: 'NGO-Rabatt bis 50%'
|
||||
details: 'Vergünstigte Konditionen für registrierte Non-Profit-Organisationen weltweit'
|
||||
order: 8
|
||||
---
|
||||
|
||||
|
|
@ -47,30 +47,35 @@ NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zu
|
|||
## 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
|
||||
|
|
@ -79,24 +84,28 @@ NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zu
|
|||
## 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
|
||||
|
|
@ -105,12 +114,14 @@ NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zu
|
|||
## 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%!**
|
||||
|
|
@ -118,16 +129,19 @@ NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zu
|
|||
## 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
|
||||
|
|
@ -135,21 +149,25 @@ NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zu
|
|||
## 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
|
||||
|
|
@ -157,18 +175,21 @@ NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zu
|
|||
## 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
|
||||
|
|
@ -177,12 +198,15 @@ NGOs bewegen die Welt – oft mit minimalen Ressourcen. Mit Mana bekommen Sie Zu
|
|||
## 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
|
||||
|
|
@ -204,9 +228,10 @@ Ja! Wir bieten kostenlose Webinare speziell für NGOs.
|
|||
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!
|
||||
Starten Sie heute und erleben Sie, wie KI Ihre NGO-Arbeit auf das nächste Level hebt!
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- 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: ""
|
||||
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"
|
||||
discount: ''
|
||||
details: 'Flexible Pakete perfekt für den persönlichen Bedarf'
|
||||
order: 7
|
||||
---
|
||||
|
||||
|
|
@ -47,30 +47,35 @@ Warum monatlich für Tools zahlen, die Sie nur gelegentlich brauchen? Mit Mana n
|
|||
## 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
|
||||
|
|
@ -79,12 +84,14 @@ Warum monatlich für Tools zahlen, die Sie nur gelegentlich brauchen? Mit Mana n
|
|||
## 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**
|
||||
|
|
@ -93,21 +100,25 @@ Warum monatlich für Tools zahlen, die Sie nur gelegentlich brauchen? Mit Mana n
|
|||
## 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
|
||||
|
|
@ -115,18 +126,21 @@ Warum monatlich für Tools zahlen, die Sie nur gelegentlich brauchen? Mit Mana n
|
|||
## 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
|
||||
|
|
@ -135,25 +149,33 @@ Warum monatlich für Tools zahlen, die Sie nur gelegentlich brauchen? Mit Mana n
|
|||
## 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
|
||||
|
|
@ -178,8 +200,9 @@ 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!
|
||||
Starten Sie jetzt und entdecken Sie, wie einfach und günstig Premium-KI sein kann!
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- Ü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: ""
|
||||
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"
|
||||
discount: ''
|
||||
details: 'Flexible Mana-Pakete perfekt für variable Projektgrößen'
|
||||
order: 4
|
||||
---
|
||||
|
||||
|
|
@ -47,24 +47,28 @@ Als Selbstständiger kennen Sie das: Mal läuft's, mal nicht. Warum sollten Sie
|
|||
## 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
|
||||
|
|
@ -73,18 +77,21 @@ Als Selbstständiger kennen Sie das: Mal läuft's, mal nicht. Warum sollten Sie
|
|||
## 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)
|
||||
|
|
@ -93,6 +100,7 @@ Als Selbstständiger kennen Sie das: Mal läuft's, mal nicht. Warum sollten Sie
|
|||
## Kostenvergleich
|
||||
|
||||
**Traditionelle Tool-Abos (monatlich)**:
|
||||
|
||||
- ChatGPT Plus: 20€
|
||||
- Jasper AI: 39€
|
||||
- DeepL Pro: 8€
|
||||
|
|
@ -100,6 +108,7 @@ Als Selbstständiger kennen Sie das: Mal läuft's, mal nicht. Warum sollten Sie
|
|||
- **Gesamt: 84€/Monat = 1.008€/Jahr**
|
||||
|
||||
**Mit Mana (beispielhaft)**:
|
||||
|
||||
- Ruhige Monate: 0-20€
|
||||
- Normale Monate: 30-50€
|
||||
- Projekt-Monate: 80-150€
|
||||
|
|
@ -109,17 +118,21 @@ Als Selbstständiger kennen Sie das: Mal läuft's, mal nicht. Warum sollten Sie
|
|||
## 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)
|
||||
|
|
@ -128,16 +141,19 @@ Kalkulieren Sie Mana direkt in Ihre Angebote ein:
|
|||
## 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
|
||||
|
|
@ -149,4 +165,4 @@ Kalkulieren Sie Mana direkt in Ihre Angebote ein:
|
|||
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.
|
||||
Keine Vertragsbindung, keine Kündigungsfristen, keine bösen Überraschungen. Genau die Flexibilität, die Sie als Selbstständiger brauchen.
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- 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"
|
||||
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"
|
||||
discount: 'Startup-Programm verfügbar'
|
||||
details: 'Spezielle Konditionen für Startups unter 3 Jahren mit VC-Backing'
|
||||
order: 5
|
||||
---
|
||||
|
||||
|
|
@ -47,24 +47,28 @@ Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen
|
|||
## 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
|
||||
|
|
@ -73,24 +77,28 @@ Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen
|
|||
## 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
|
||||
|
|
@ -99,22 +107,26 @@ Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen
|
|||
## 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
|
||||
|
|
@ -122,17 +134,20 @@ Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen
|
|||
## 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
|
||||
|
|
@ -141,12 +156,15 @@ Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen
|
|||
## 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
|
||||
|
|
@ -157,6 +175,7 @@ Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen
|
|||
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
|
||||
|
|
@ -165,9 +184,10 @@ Startups müssen schnell sein, flexibel bleiben und jeden Euro optimal einsetzen
|
|||
## 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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- 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"
|
||||
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"
|
||||
discount: 'Studenten-Tarif verfügbar'
|
||||
details: 'Vergünstigte Mana-Pakete für Studierende mit gültigem Nachweis'
|
||||
order: 3
|
||||
---
|
||||
|
||||
|
|
@ -47,24 +47,28 @@ Schluss mit teuren Abos, die du nur in der Prüfungsphase brauchst! Mit Mana nut
|
|||
## 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
|
||||
|
|
@ -73,12 +77,14 @@ Schluss mit teuren Abos, die du nur in der Prüfungsphase brauchst! Mit Mana nut
|
|||
## 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!**
|
||||
|
|
@ -86,16 +92,19 @@ Schluss mit teuren Abos, die du nur in der Prüfungsphase brauchst! Mit Mana nut
|
|||
## 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
|
||||
|
|
@ -128,4 +137,4 @@ 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!
|
||||
Starte jetzt und erlebe, wie KI dein Studium revolutioniert – ohne Abo-Stress und Geldverschwendung!
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- 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"
|
||||
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"
|
||||
discount: '50% Education-Rabatt'
|
||||
details: 'Spezielle Konditionen für Hochschulen und Forschungseinrichtungen'
|
||||
order: 2
|
||||
---
|
||||
|
||||
|
|
@ -47,18 +47,21 @@ Die Digitalisierung der Hochschullandschaft erfordert flexible Lösungen. Mit Ma
|
|||
## 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
|
||||
|
|
@ -67,12 +70,14 @@ Die Digitalisierung der Hochschullandschaft erfordert flexible Lösungen. Mit Ma
|
|||
## 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
|
||||
|
|
@ -81,25 +86,30 @@ Die Digitalisierung der Hochschullandschaft erfordert flexible Lösungen. Mit Ma
|
|||
## 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**:
|
||||
**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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- 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"
|
||||
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"
|
||||
discount: 'Mengenrabatte ab 10 Nutzern'
|
||||
details: 'Individuelle Enterprise-Tarife und dedizierte Betreuung für größere Teams'
|
||||
order: 1
|
||||
---
|
||||
|
||||
|
|
@ -49,21 +49,25 @@ Mit unserem Credit-System lösen sich diese Probleme in Luft auf:
|
|||
## 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
|
||||
|
|
@ -86,4 +90,4 @@ Sparen Sie durchschnittlich 40-60% Ihrer aktuellen KI-Tool-Kosten:
|
|||
|
||||
## 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.
|
||||
Testen Sie Mana unverbindlich mit Ihrem Team. Keine Kreditkarte erforderlich, keine versteckten Kosten. Erleben Sie die Zukunft der KI-Nutzung in Unternehmen.
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ useCases:
|
|||
- 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."
|
||||
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"
|
||||
discount: 'Non-Profit-Rabatt bis 40%'
|
||||
details: 'Vergünstigte Konditionen für eingetragene Vereine und gemeinnützige Organisationen'
|
||||
order: 6
|
||||
---
|
||||
|
||||
|
|
@ -47,24 +47,28 @@ Vereine leben vom Engagement ihrer Mitglieder – nicht von teuren Software-Abos
|
|||
## 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
|
||||
|
|
@ -73,24 +77,28 @@ Vereine leben vom Engagement ihrer Mitglieder – nicht von teuren Software-Abos
|
|||
## 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
|
||||
|
|
@ -99,12 +107,14 @@ Vereine leben vom Engagement ihrer Mitglieder – nicht von teuren Software-Abos
|
|||
## 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**
|
||||
|
|
@ -113,16 +123,19 @@ Vereine leben vom Engagement ihrer Mitglieder – nicht von teuren Software-Abos
|
|||
## 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
|
||||
|
|
@ -130,16 +143,19 @@ Vereine leben vom Engagement ihrer Mitglieder – nicht von teuren Software-Abos
|
|||
## 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
|
||||
|
|
@ -147,18 +163,21 @@ Vereine leben vom Engagement ihrer Mitglieder – nicht von teuren Software-Abos
|
|||
## 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
|
||||
|
|
@ -182,4 +201,4 @@ Nein, aber Sie erhalten eine ordentliche Rechnung für Ihre Buchhaltung.
|
|||
|
||||
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!
|
||||
Starten Sie noch heute und erleben Sie, wie KI Ihre Vereinsarbeit erleichtert!
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ 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."
|
||||
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."
|
||||
- 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"
|
||||
- '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"]
|
||||
mainTools: ['ChatGPT', 'Claude', 'GitHub Copilot', 'Cursor', 'Perplexity']
|
||||
teamSize: 75
|
||||
featured: true
|
||||
order: 4
|
||||
|
|
@ -41,4 +41,4 @@ Mit Mana fand edisconet die perfekte Lösung: Ein einziges Credit-System für al
|
|||
|
||||
## 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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ 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."
|
||||
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."
|
||||
- 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"
|
||||
- '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"]
|
||||
mainTools: ['ChatGPT', 'Claude', 'Midjourney', 'DALL-E', 'GitHub Copilot']
|
||||
teamSize: 1800
|
||||
featured: true
|
||||
order: 2
|
||||
|
|
@ -41,4 +41,4 @@ Mit Mana implementierte die HSLU eine zentrale KI-Plattform mit departementspezi
|
|||
|
||||
## 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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ 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."
|
||||
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."
|
||||
- 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"
|
||||
- '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"]
|
||||
mainTools: ['GPT-4', 'Claude', 'Whisper', 'Custom Models']
|
||||
teamSize: 8
|
||||
featured: false
|
||||
order: 2
|
||||
|
|
@ -38,6 +38,7 @@ MindMed entwickelt eine innovative Conversational AI App, die Menschen bei menta
|
|||
"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
|
||||
|
|
@ -48,23 +49,28 @@ MindMed entwickelt eine innovative Conversational AI App, die Menschen bei menta
|
|||
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
|
||||
|
|
@ -72,6 +78,7 @@ MindMed nutzt verschiedene KI-Modelle für unterschiedliche Funktionen:
|
|||
## Entwicklungsprozess optimiert
|
||||
|
||||
### Rapid Prototyping
|
||||
|
||||
Das Team kann neue Features innerhalb von Tagen entwickeln und testen:
|
||||
|
||||
1. **Ideation**: Brainstorming mit verschiedenen KI-Modellen
|
||||
|
|
@ -80,6 +87,7 @@ Das Team kann neue Features innerhalb von Tagen entwickeln und testen:
|
|||
4. **Deployment**: Sofortige Skalierung erfolgreicher Features
|
||||
|
||||
### Kosteneffizienz
|
||||
|
||||
- **Entwicklungsphase**: ~15.000 Mana/Monat
|
||||
- **Beta-Testing**: ~30.000 Mana/Monat
|
||||
- **Production**: ~45.000 Mana/Monat
|
||||
|
|
@ -88,9 +96,11 @@ Das Team kann neue Features innerhalb von Tagen entwickeln und testen:
|
|||
## 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
|
||||
|
|
@ -99,12 +109,14 @@ Das Team kann neue Features innerhalb von Tagen entwickeln und testen:
|
|||
## 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"
|
||||
|
|
@ -114,6 +126,7 @@ Das Team kann neue Features innerhalb von Tagen entwickeln und testen:
|
|||
## 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
|
||||
|
|
@ -121,11 +134,13 @@ MindMed arbeitet mit führenden Universitäten zusammen:
|
|||
## 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
|
||||
|
|
@ -133,6 +148,7 @@ MindMed arbeitet mit führenden Universitäten zusammen:
|
|||
## 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
|
||||
|
|
@ -142,16 +158,19 @@ Das 8-köpfige Team vereint Expertise aus:
|
|||
## 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"
|
||||
|
|
@ -161,4 +180,4 @@ Dr. Wagners Empfehlungen:
|
|||
|
||||
"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.
|
||||
**MindMed zeigt**: Mit der richtigen Technologie-Infrastruktur können Startups im Gesundheitsbereich innovative, skalierbare Lösungen entwickeln, die echten gesellschaftlichen Mehrwert schaffen.
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ 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."
|
||||
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."
|
||||
- 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"
|
||||
- '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"]
|
||||
mainTools: ['ChatGPT', 'Claude', 'Perplexity', 'GitHub Copilot', 'Wolfram Alpha']
|
||||
teamSize: 850
|
||||
featured: true
|
||||
order: 3
|
||||
|
|
@ -41,4 +41,4 @@ Mit Mana Enterprise implementierte die RWU eine sichere KI-Umgebung mit granular
|
|||
|
||||
## 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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ 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."
|
||||
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."
|
||||
- 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"
|
||||
- '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"]
|
||||
mainTools: ['ChatGPT', 'Claude', 'Wolfram Alpha', 'GitHub Copilot', 'Elicit']
|
||||
teamSize: 2500
|
||||
featured: false
|
||||
order: 5
|
||||
|
|
@ -40,12 +40,14 @@ Die Universität Heidelberg, eine der ältesten und renommiertesten Universität
|
|||
## 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
|
||||
|
|
@ -56,16 +58,19 @@ Die Universität Heidelberg, eine der ältesten und renommiertesten Universität
|
|||
### 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
|
||||
|
|
@ -73,21 +78,25 @@ Die Universität Heidelberg, eine der ältesten und renommiertesten Universität
|
|||
## 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
|
||||
|
|
@ -95,16 +104,19 @@ Die Universität Heidelberg, eine der ältesten und renommiertesten Universität
|
|||
## 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
|
||||
|
|
@ -112,19 +124,25 @@ Die Universität Heidelberg, eine der ältesten und renommiertesten Universität
|
|||
## 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
|
||||
|
|
@ -132,11 +150,13 @@ Mana ermöglichte Zusammenarbeit zwischen Fachbereichen:
|
|||
## 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
|
||||
|
|
@ -145,11 +165,13 @@ Mana ermöglichte Zusammenarbeit zwischen Fachbereichen:
|
|||
## 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
|
||||
|
|
@ -157,6 +179,7 @@ Mana ermöglichte Zusammenarbeit zwischen Fachbereichen:
|
|||
## 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
|
||||
|
|
@ -164,6 +187,7 @@ Die Universität Heidelberg plant:
|
|||
## 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"
|
||||
|
|
@ -174,4 +198,4 @@ Prof. Weber's Empfehlungen:
|
|||
|
||||
"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.**
|
||||
Die Universität Heidelberg zeigt: **Bildung und KI können Hand in Hand gehen - mit dem richtigen Partner und System.**
|
||||
|
|
|
|||
|
|
@ -1,138 +1,153 @@
|
|||
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(),
|
||||
})
|
||||
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(),
|
||||
})
|
||||
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(),
|
||||
})
|
||||
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(),
|
||||
})
|
||||
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(),
|
||||
})
|
||||
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'),
|
||||
})
|
||||
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(),
|
||||
}),
|
||||
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,
|
||||
};
|
||||
apps: appsCollection,
|
||||
branchen: targetGroupsCollection,
|
||||
legal: legalCollection,
|
||||
privacy: privacyCollection,
|
||||
clients: clientsCollection,
|
||||
mission: missionCollection,
|
||||
context: contextCollection,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ icon: 'mdi:information'
|
|||
publishedAt: 2024-01-01
|
||||
updatedAt: 2024-01-15
|
||||
---
|
||||
|
||||
# Manacore: Ein nachhaltiges KI-Ökosystem für Europa
|
||||
|
||||
## Vision und Mission
|
||||
|
|
@ -13,6 +14,7 @@ updatedAt: 2024-01-15
|
|||
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
|
||||
|
|
@ -24,12 +26,14 @@ Manacore steht für ein langfristig nachhaltiges Software-Ökosystem mit KI im K
|
|||
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
|
||||
|
|
@ -37,6 +41,7 @@ Das Mana-System kombiniert die Vorteile von Abonnements mit der Fairness verbrau
|
|||
- **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 €)
|
||||
|
|
@ -46,21 +51,23 @@ Das Mana-System kombiniert die Vorteile von Abonnements mit der Fairness verbrau
|
|||
|
||||
### 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 |
|
||||
| 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
|
||||
|
|
@ -71,16 +78,19 @@ Das Mana-System kombiniert die Vorteile von Abonnements mit der Fairness verbrau
|
|||
### 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
|
||||
|
|
@ -89,18 +99,21 @@ Das Mana-System kombiniert die Vorteile von Abonnements mit der Fairness verbrau
|
|||
## 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
|
||||
|
|
@ -108,6 +121,7 @@ Das Mana-System kombiniert die Vorteile von Abonnements mit der Fairness verbrau
|
|||
## 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
|
||||
|
|
@ -117,11 +131,13 @@ Jeder kann am Manacore-Ökosystem teilhaben:
|
|||
## 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
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ Mana steht für ein langfristig nachhaltiges Software-Ökosystem mit KI im Kern.
|
|||
### 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
|
||||
|
|
@ -23,6 +24,7 @@ Im Manacore-Netzwerk arbeiten verschiedene Applikationen zusammen:
|
|||
### 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
|
||||
|
|
@ -30,6 +32,7 @@ Die Idee hinter Mana ist revolutionär:
|
|||
### 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
|
||||
|
|
@ -39,6 +42,7 @@ Jeder kann auf seine Weise am Mana-Ökosystem teilhaben:
|
|||
### 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
|
||||
|
|
@ -46,6 +50,7 @@ Das gesamte System ist auf Wertschöpfung ausgelegt:
|
|||
### Ö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
|
||||
|
|
@ -54,6 +59,7 @@ Mana übernimmt aktiv Verantwortung für die Umwelt:
|
|||
### 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
|
||||
|
|
@ -62,6 +68,7 @@ Die Entwicklung von Mana fokussiert sich auf Europa:
|
|||
### Einheitliche Vorteile für Nutzer
|
||||
|
||||
Kunden profitieren von:
|
||||
|
||||
- Einheitlichem Datenschutz
|
||||
- Einheitlicher Abrechnung
|
||||
- Einem Ansprechpartner für alle Apps
|
||||
|
|
@ -75,26 +82,31 @@ 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
|
||||
|
|
@ -102,6 +114,7 @@ Jeder ausgegebene Mana wird transparent und nachhaltig verwendet:
|
|||
### 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
|
||||
|
|
@ -110,6 +123,7 @@ Die transparente Kostenstruktur zeigt: Bei Mana steht nicht der Profit im Vorder
|
|||
### 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
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: "Häufige Fragen zu Mana"
|
||||
description: "Detaillierte Antworten auf alle wichtigen Fragen rund um Mana, Credits und die Nutzung der KI-Tools"
|
||||
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"
|
||||
icon: 'mdi:help-circle'
|
||||
publishedAt: 2024-01-01
|
||||
updatedAt: 2024-01-15
|
||||
---
|
||||
|
|
@ -18,12 +18,14 @@ Mana ist eine Plattform, die Ihnen Zugang zu über 20 führenden KI-Tools mit ei
|
|||
### 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
|
||||
|
|
@ -32,6 +34,7 @@ Mana ist eine Plattform, die Ihnen Zugang zu über 20 führenden KI-Tools mit ei
|
|||
### 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
|
||||
|
|
@ -45,7 +48,8 @@ Die vollständige Liste finden Sie unter [/apps](/apps).
|
|||
### Wie funktionieren Mana-Credits?
|
||||
|
||||
Mana-Credits sind die universelle Währung auf unserer Plattform:
|
||||
- 1 Credit = 0,01€
|
||||
|
||||
- 1 Credit = 0,01€
|
||||
- Credits werden bei jeder Nutzung abgezogen
|
||||
- Der Verbrauch hängt vom Tool und der Aktion ab
|
||||
- Credits verfallen nicht
|
||||
|
|
@ -53,8 +57,9 @@ Mana-Credits sind die universelle Währung auf unserer Plattform:
|
|||
### Wie viele Credits brauche ich?
|
||||
|
||||
Beispielhafte Verbräuche:
|
||||
|
||||
- **ChatGPT-4 Anfrage**: 10-20 Credits
|
||||
- **Claude 3 Anfrage**: 15-25 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
|
||||
|
|
@ -64,6 +69,7 @@ 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)
|
||||
|
|
@ -99,6 +105,7 @@ Ja, beliebig oft! Nutzen Sie ChatGPT für eine Aufgabe, wechseln Sie zu Claude f
|
|||
### Gibt es Team-Accounts?
|
||||
|
||||
Ja! Team-Features umfassen:
|
||||
|
||||
- Geteilte Credit-Pools
|
||||
- Nutzer-Verwaltung
|
||||
- Verbrauchsstatistiken pro Mitglied
|
||||
|
|
@ -114,6 +121,7 @@ Ja! Team-Features umfassen:
|
|||
### Gibt es Enterprise-Lösungen?
|
||||
|
||||
Für Unternehmen ab 50 Mitarbeitern bieten wir:
|
||||
|
||||
- Individuelle Preisgestaltung
|
||||
- SLA-Garantien
|
||||
- Dedizierter Support
|
||||
|
|
@ -124,7 +132,8 @@ Für Unternehmen ab 50 Mitarbeitern bieten wir:
|
|||
|
||||
### Sind meine Daten sicher?
|
||||
|
||||
Absolut!
|
||||
Absolut!
|
||||
|
||||
- Ende-zu-Ende Verschlüsselung
|
||||
- Server in Deutschland
|
||||
- DSGVO-konform
|
||||
|
|
@ -138,6 +147,7 @@ Nein. Wir leiten Ihre Anfragen nur weiter und speichern keine Inhalte. Lediglich
|
|||
### 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
|
||||
|
|
@ -147,6 +157,7 @@ Ja, aber beachten Sie:
|
|||
### Welche Browser werden unterstützt?
|
||||
|
||||
Mana funktioniert mit allen modernen Browsern:
|
||||
|
||||
- Chrome/Edge (letzte 2 Versionen)
|
||||
- Firefox (letzte 2 Versionen)
|
||||
- Safari (letzte 2 Versionen)
|
||||
|
|
@ -207,9 +218,10 @@ Für Erstnutzer bieten wir eine 14-tägige Zufriedenheitsgarantie auf den ersten
|
|||
### 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!
|
||||
Haben Sie weitere Fragen? Kontaktieren Sie uns gerne!
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ Verträge für Privatpersonen und Unternehmen unterliegen diesen AGB. Für Bildu
|
|||
### 3.2 Erwerb von Credits
|
||||
|
||||
Credits können erworben werden durch:
|
||||
|
||||
- Einmalkauf
|
||||
- Abonnements mit automatischer Regeneration
|
||||
- Sonderaktionen und Promotions
|
||||
|
|
@ -58,6 +59,7 @@ Alle Preise verstehen sich inklusive der gesetzlichen Mehrwertsteuer. Preisände
|
|||
### 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
|
||||
|
|
@ -92,6 +94,7 @@ Bei Abonnements regenerieren sich Credits täglich bis zum vereinbarten Speicher
|
|||
### 6.1 Verwaltung
|
||||
|
||||
Der Account-Inhaber ist verantwortlich für:
|
||||
|
||||
- Verwaltung der Nutzer
|
||||
- Verteilung der Credits
|
||||
- Einhaltung der AGB durch alle Nutzer
|
||||
|
|
@ -125,6 +128,7 @@ Alle Rechte an der Mana-Plattform, dem Design und der Marke verbleiben bei uns.
|
|||
### 9.1 Haftungsbeschränkung
|
||||
|
||||
Wir haften unbeschränkt bei:
|
||||
|
||||
- Vorsatz und grober Fahrlässigkeit
|
||||
- Verletzung von Leben, Körper oder Gesundheit
|
||||
- Übernahme einer Garantie
|
||||
|
|
@ -201,4 +205,4 @@ Telefon: [Telefonnummer]
|
|||
|
||||
---
|
||||
|
||||
*Stand: Januar 2024*
|
||||
_Stand: Januar 2024_
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierb
|
|||
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
|
||||
|
|
@ -30,6 +31,7 @@ Andere Daten werden automatisch beim Besuch der Website durch unsere IT-Systeme
|
|||
|
||||
**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
|
||||
|
|
@ -76,6 +78,7 @@ Die Bereitstellung bestimmter personenbezogener Daten kann gesetzlich vorgeschri
|
|||
### Registrierung und Account-Erstellung
|
||||
|
||||
Bei der Registrierung für Mana erfassen wir:
|
||||
|
||||
- E-Mail-Adresse
|
||||
- Passwort (verschlüsselt gespeichert)
|
||||
- Optional: Name, Unternehmen, Telefonnummer
|
||||
|
|
@ -85,6 +88,7 @@ Bei der Registrierung für Mana erfassen wir:
|
|||
### Mana-Credit-System
|
||||
|
||||
Für die Verwaltung Ihrer Mana-Credits speichern wir:
|
||||
|
||||
- Transaktionshistorie
|
||||
- Credit-Stand
|
||||
- Nutzungsstatistiken
|
||||
|
|
@ -95,6 +99,7 @@ Diese Daten sind erforderlich für die ordnungsgemäße Abrechnung und Bereitste
|
|||
### 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
|
||||
|
|
@ -103,6 +108,7 @@ Bei der Nutzung von KI-Tools über Mana:
|
|||
### 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
|
||||
|
|
@ -113,6 +119,7 @@ Bei Nutzung der Memoro-App:
|
|||
### Zahlungsabwicklung
|
||||
|
||||
Die Zahlungsabwicklung erfolgt über zertifizierte Zahlungsdienstleister:
|
||||
|
||||
- Stripe (für Kreditkarten)
|
||||
- PayPal
|
||||
- SEPA-Lastschrift
|
||||
|
|
@ -122,6 +129,7 @@ Wir speichern keine Kreditkartendaten. Diese werden direkt beim Zahlungsdienstle
|
|||
### Rechnungsdaten
|
||||
|
||||
Für die Rechnungsstellung speichern wir:
|
||||
|
||||
- Name/Firmenname
|
||||
- Anschrift
|
||||
- Steuernummer (bei Unternehmen)
|
||||
|
|
@ -134,6 +142,7 @@ Für die Rechnungsstellung speichern wir:
|
|||
### Newsletter-Versand
|
||||
|
||||
Mit Ihrer Einwilligung senden wir Ihnen unseren Newsletter mit:
|
||||
|
||||
- Produkt-Updates
|
||||
- Tipps zur Mana-Nutzung
|
||||
- Sonderangebote
|
||||
|
|
@ -145,6 +154,7 @@ Mit Ihrer Einwilligung senden wir Ihnen unseren Newsletter mit:
|
|||
### Technisch notwendige Cookies
|
||||
|
||||
Wir verwenden nur technisch notwendige Cookies für:
|
||||
|
||||
- Session-Management
|
||||
- Spracheinstellungen
|
||||
- Sicherheitsfunktionen
|
||||
|
|
@ -152,6 +162,7 @@ Wir verwenden nur technisch notwendige Cookies für:
|
|||
### Analytics
|
||||
|
||||
Wir verwenden datenschutzfreundliche Analytics-Tools:
|
||||
|
||||
- Anonymisierte IP-Adressen
|
||||
- Kein Cross-Site-Tracking
|
||||
- Opt-Out möglich
|
||||
|
|
@ -204,6 +215,7 @@ Sie haben das Recht, sich bei der zuständigen Aufsichtsbehörde zu beschweren.
|
|||
### KI-Anbieter
|
||||
|
||||
Für die Bereitstellung der KI-Services übermitteln wir Daten an:
|
||||
|
||||
- OpenAI (ChatGPT)
|
||||
- Anthropic (Claude)
|
||||
- Weitere KI-Anbieter
|
||||
|
|
@ -219,6 +231,7 @@ Wir geben Ihre Daten niemals zu Werbezwecken an Dritte weiter.
|
|||
### 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
|
||||
|
|
@ -245,4 +258,4 @@ Unser Datenschutzbeauftragter:
|
|||
|
||||
---
|
||||
|
||||
*Stand: Januar 2024*
|
||||
_Stand: Januar 2024_
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
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."
|
||||
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
|
||||
|
|
@ -23,16 +23,19 @@ Unser Gründer, Till Schneider, erlebte diese Frustration hautnah:
|
|||
### 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
|
||||
|
|
@ -81,4 +84,4 @@ Besuchen Sie unsere [Karriereseite](/careers) für alle offenen Stellen.
|
|||
|
||||
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!
|
||||
Möchten Sie uns auf dieser Reise begleiten? Wir freuen uns darauf, Sie kennenzulernen!
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
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."
|
||||
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
|
||||
|
|
@ -40,4 +40,4 @@ Unsere Vision geht über ein reines Zahlungssystem hinaus. Wir bauen an einer Zu
|
|||
|
||||
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.
|
||||
Seien Sie Teil dieser Revolution. Seien Sie Teil von Mana.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Unsere Werte: Was uns antreibt"
|
||||
description: "Transparenz, Fairness und Innovation - die Grundpfeiler, auf denen Mana aufgebaut ist."
|
||||
title: 'Unsere Werte: Was uns antreibt'
|
||||
description: 'Transparenz, Fairness und Innovation - die Grundpfeiler, auf denen Mana aufgebaut ist.'
|
||||
category: values
|
||||
order: 2
|
||||
featured: true
|
||||
|
|
@ -41,6 +41,7 @@ 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
|
||||
|
|
@ -48,6 +49,7 @@ Der Kunde steht im Mittelpunkt:
|
|||
### Nachhaltigkeit
|
||||
|
||||
Verantwortung für die Zukunft:
|
||||
|
||||
- CO2-neutrale Server-Infrastruktur
|
||||
- Förderung von KI-Bildung
|
||||
- Ethische KI-Nutzung als Priorität
|
||||
|
|
@ -55,6 +57,7 @@ Verantwortung für die Zukunft:
|
|||
### Teamgeist
|
||||
|
||||
Gemeinsam sind wir stärker:
|
||||
|
||||
- Diverse Teams aus 15+ Ländern
|
||||
- Flache Hierarchien und offene Türen
|
||||
- Work-Life-Balance als Grundrecht
|
||||
|
|
@ -63,4 +66,4 @@ Gemeinsam sind wir stärker:
|
|||
|
||||
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.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
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."
|
||||
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
|
||||
|
|
@ -41,4 +41,4 @@ Our vision goes beyond a mere payment system. We're building a future where:
|
|||
|
||||
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.
|
||||
Be part of this revolution. Be part of Mana.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ category: compliance
|
|||
lastUpdated: 2024-01-15
|
||||
order: 1
|
||||
featured: true
|
||||
tags: ["DSGVO", "GDPR", "Compliance", "Datenschutz", "EU-Recht"]
|
||||
tags: ['DSGVO', 'GDPR', 'Compliance', 'Datenschutz', 'EU-Recht']
|
||||
---
|
||||
|
||||
## Unser Bekenntnis zum Datenschutz
|
||||
|
|
@ -17,12 +17,14 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 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
|
||||
|
|
@ -30,12 +32,14 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 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
|
||||
|
|
@ -44,12 +48,14 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 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
|
||||
|
|
@ -57,6 +63,7 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 4. Richtigkeit der Daten
|
||||
|
||||
**Nutzer-Kontrolle:**
|
||||
|
||||
- Selbstverwaltung aller persönlichen Daten im Dashboard
|
||||
- Sofortige Aktualisierungsmöglichkeiten
|
||||
- API für Datenexport und -import
|
||||
|
|
@ -65,6 +72,7 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 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
|
||||
|
|
@ -73,6 +81,7 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 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)
|
||||
|
|
@ -84,12 +93,14 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 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
|
||||
|
|
@ -98,6 +109,7 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### Recht auf Berichtigung (Art. 16 DSGVO)
|
||||
|
||||
**Direkte Bearbeitung:**
|
||||
|
||||
- Alle Profildaten selbst editierbar
|
||||
- Änderungshistorie einsehbar
|
||||
- Sofortige Synchronisation über alle Services
|
||||
|
|
@ -106,12 +118,14 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### 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
|
||||
|
|
@ -120,6 +134,7 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### Recht auf Datenübertragbarkeit (Art. 20 DSGVO)
|
||||
|
||||
**Export-Funktionen:**
|
||||
|
||||
- Standardformate: JSON, CSV, XML
|
||||
- Strukturierte Daten mit Dokumentation
|
||||
- API für automatisierten Export
|
||||
|
|
@ -128,6 +143,7 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
### Widerspruchsrecht (Art. 21 DSGVO)
|
||||
|
||||
**Granulare Kontrolle:**
|
||||
|
||||
- Widerspruch gegen einzelne Verarbeitungen
|
||||
- Opt-out für Analytics
|
||||
- Newsletter-Abmeldung mit einem Klick
|
||||
|
|
@ -136,47 +152,55 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
## 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
|
||||
|
|
@ -187,12 +211,14 @@ Bei Mana ist DSGVO-Konformität kein nachträglicher Gedanke, sondern fundamenta
|
|||
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
|
||||
|
|
@ -201,12 +227,14 @@ Für alle neuen Features führen wir DSFAs durch:
|
|||
## 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
|
||||
|
|
@ -215,12 +243,14 @@ Für alle neuen Features führen wir DSFAs durch:
|
|||
## 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
|
||||
|
|
@ -229,11 +259,13 @@ Für alle neuen Features führen wir DSFAs durch:
|
|||
## 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
|
||||
|
|
@ -247,6 +279,7 @@ datenschutz@mana.ai
|
|||
+49 [Telefonnummer]
|
||||
|
||||
**Erreichbarkeit:**
|
||||
|
||||
- Direkter Kontakt über Dashboard
|
||||
- Monatliche Sprechstunden
|
||||
- Datenschutz-Hotline für dringende Fälle
|
||||
|
|
@ -254,12 +287,14 @@ datenschutz@mana.ai
|
|||
## 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
|
||||
|
|
@ -268,12 +303,14 @@ datenschutz@mana.ai
|
|||
## 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
|
||||
|
|
@ -282,12 +319,14 @@ datenschutz@mana.ai
|
|||
## 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
|
||||
|
|
@ -296,6 +335,7 @@ datenschutz@mana.ai
|
|||
## Kontakt und Beschwerden
|
||||
|
||||
### Bei Datenschutz-Anliegen:
|
||||
|
||||
**Primärer Kontakt:**
|
||||
datenschutz@mana.ai
|
||||
|
||||
|
|
@ -309,4 +349,4 @@ Geschäftsführung Mana Systems GmbH
|
|||
|
||||
---
|
||||
|
||||
*Dieses Dokument wird regelmäßig aktualisiert. Letzte Überprüfung: Januar 2024*
|
||||
_Dieses Dokument wird regelmäßig aktualisiert. Letzte Überprüfung: Januar 2024_
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ category: ai-ethics
|
|||
lastUpdated: 2024-01-15
|
||||
order: 2
|
||||
featured: true
|
||||
tags: ["KI-Modelle", "Datenschutz", "Transparenz", "Ethik", "Sicherheit"]
|
||||
tags: ['KI-Modelle', 'Datenschutz', 'Transparenz', 'Ethik', 'Sicherheit']
|
||||
---
|
||||
|
||||
## Unser Versprechen: Ihre Daten gehören Ihnen
|
||||
|
|
@ -17,12 +17,14 @@ Bei Mana verstehen wir die Bedenken bezüglich KI und Datenschutz. Deshalb haben
|
|||
### 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
|
||||
|
|
@ -32,18 +34,19 @@ Bei Mana verstehen wir die Bedenken bezüglich KI und Datenschutz. Deshalb haben
|
|||
|
||||
**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 |
|
||||
| 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
|
||||
|
|
@ -55,11 +58,13 @@ Bei Mana verstehen wir die Bedenken bezüglich KI und Datenschutz. Deshalb haben
|
|||
### 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
|
||||
|
|
@ -68,12 +73,14 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### 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
|
||||
|
|
@ -82,6 +89,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Isolierte Verarbeitung
|
||||
|
||||
**Jede Anfrage ist unabhängig:**
|
||||
|
||||
- Keine Session-übergreifende Datenhaltung
|
||||
- Keine Nutzerprofile für KI-Anpassungen
|
||||
- Keine Verknüpfung zwischen Anfragen
|
||||
|
|
@ -92,12 +100,14 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### 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)
|
||||
|
|
@ -106,6 +116,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Modell-Auswahl
|
||||
|
||||
**Sie haben die Wahl:**
|
||||
|
||||
- Präferenz für bestimmte Anbieter setzen
|
||||
- Modelle ausschließen
|
||||
- Eigene API-Keys verwenden
|
||||
|
|
@ -116,12 +127,14 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### 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
|
||||
|
|
@ -130,6 +143,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Bias-Minimierung
|
||||
|
||||
**Unsere Maßnahmen:**
|
||||
|
||||
- Diverse Modellauswahl
|
||||
- Regelmäßige Qualitätschecks
|
||||
- Nutzer-Feedback-System
|
||||
|
|
@ -140,12 +154,14 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### 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
|
||||
|
|
@ -154,6 +170,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Team-Nutzung
|
||||
|
||||
**Datentrennung im Team:**
|
||||
|
||||
- Individuelle Verschlüsselung
|
||||
- Keine gemeinsamen KI-Profile
|
||||
- Getrennte Abrechnungen
|
||||
|
|
@ -162,6 +179,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Sensible Branchen
|
||||
|
||||
**Besondere Schutzmaßnahmen für:**
|
||||
|
||||
- **Gesundheitswesen**: HIPAA-konforme Verarbeitung
|
||||
- **Rechtsberatung**: Anwaltliche Schweigepflicht
|
||||
- **Finanzsektor**: Verschärfte Sicherheitsprotokolle
|
||||
|
|
@ -172,12 +190,14 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### 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
|
||||
|
|
@ -186,6 +206,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Forschung und Entwicklung
|
||||
|
||||
**Unsere Investitionen:**
|
||||
|
||||
- Privacy-Preserving ML-Techniken
|
||||
- Homomorphe Verschlüsselung
|
||||
- Differential Privacy
|
||||
|
|
@ -196,6 +217,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### 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
|
||||
|
|
@ -204,6 +226,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Was passiert mit kreativen Werken?
|
||||
|
||||
**Ihre Rechte bleiben erhalten:**
|
||||
|
||||
- Sie behalten alle Urheberrechte
|
||||
- Keine Lizenzübertragung an Mana
|
||||
- Keine Weitergabe an KI-Anbieter
|
||||
|
|
@ -212,6 +235,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Wie sicher sind meine Geschäftsgeheimnisse?
|
||||
|
||||
**Maximaler Schutz durch:**
|
||||
|
||||
- Enterprise-Agreements
|
||||
- NDAs mit allen Partnern
|
||||
- Verschlüsselung
|
||||
|
|
@ -222,6 +246,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Externe Überprüfungen
|
||||
|
||||
**Regelmäßige Audits durch:**
|
||||
|
||||
- TÜV Rheinland (Datenschutz)
|
||||
- BSI (IT-Sicherheit)
|
||||
- Unabhängige Ethik-Kommission
|
||||
|
|
@ -230,6 +255,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Transparenzberichte
|
||||
|
||||
**Vierteljährliche Veröffentlichung:**
|
||||
|
||||
- Anzahl der KI-Anfragen
|
||||
- Genutzte Modelle (aggregiert)
|
||||
- Sicherheitsvorfälle (falls vorhanden)
|
||||
|
|
@ -240,6 +266,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Opt-Out-Möglichkeiten
|
||||
|
||||
**Granulare Kontrolle:**
|
||||
|
||||
- Einzelne Modelle deaktivieren
|
||||
- Anbieter ausschließen
|
||||
- Funktionen einschränken
|
||||
|
|
@ -248,6 +275,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Datenportabilität
|
||||
|
||||
**Export Ihrer KI-Interaktionen:**
|
||||
|
||||
- Strukturierte Formate (JSON, CSV)
|
||||
- Maschinenlesbare Dokumentation
|
||||
- API für automatisierten Export
|
||||
|
|
@ -258,6 +286,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Spezialisiertes KI-Ethik-Team
|
||||
|
||||
**Für Ihre Anliegen:**
|
||||
|
||||
- ki-ethik@mana.ai
|
||||
- Monatliche Sprechstunden
|
||||
- Community-Forum
|
||||
|
|
@ -266,6 +295,7 @@ Client → [TLS 1.3] → Mana-Server → [TLS 1.3] → KI-Provider
|
|||
### Melden von Bedenken
|
||||
|
||||
**Wir nehmen Feedback ernst:**
|
||||
|
||||
- Anonyme Meldungen möglich
|
||||
- Garantierte Bearbeitungszeit: 48h
|
||||
- Transparente Nachverfolgung
|
||||
|
|
@ -283,6 +313,6 @@ Bei Mana ist der verantwortungsvolle Umgang mit KI kein statisches Konzept. Wir
|
|||
|
||||
---
|
||||
|
||||
*Dieses Dokument wird monatlich überprüft und aktualisiert. Letzte Revision: Januar 2024*
|
||||
_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)*
|
||||
_Für technische Details und API-Dokumentation besuchen Sie unsere [Entwickler-Dokumentation](/docs)_
|
||||
|
|
|
|||
|
|
@ -1,236 +1,211 @@
|
|||
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
|
||||
}
|
||||
]
|
||||
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.9,
|
||||
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.9,
|
||||
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.9,
|
||||
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.9,
|
||||
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;
|
||||
return regenerationPerDay * daysInMonth;
|
||||
}
|
||||
|
||||
export function getYearlyValue(regenerationPerDay) {
|
||||
return regenerationPerDay * 365;
|
||||
return regenerationPerDay * 365;
|
||||
}
|
||||
|
||||
export function formatMana(value) {
|
||||
return value.toLocaleString('de-DE');
|
||||
}
|
||||
return value.toLocaleString('de-DE');
|
||||
}
|
||||
|
|
|
|||
2
apps/manacore/apps/landing/src/env.d.ts
vendored
2
apps/manacore/apps/landing/src/env.d.ts
vendored
|
|
@ -1 +1 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
|
|
|
|||
|
|
@ -4,284 +4,326 @@ import Sidebar from '../components/navigation/Sidebar.astro';
|
|||
import { getLangFromUrl } from '../lib/i18n/config';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
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"
|
||||
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>
|
||||
<!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>
|
||||
<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} />
|
||||
|
||||
<!-- 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>
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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} />
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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} />
|
||||
|
||||
<main id="main-content">
|
||||
<slot />
|
||||
</main>
|
||||
<!-- 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"
|
||||
/>
|
||||
|
||||
<!-- FAB Sidebar Navigation -->
|
||||
<Sidebar />
|
||||
</body>
|
||||
<!-- 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"></path>
|
||||
</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 */
|
||||
: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);
|
||||
/* === 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;
|
||||
/* 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;
|
||||
/* Background colors */
|
||||
--color-background-page: #081320;
|
||||
--color-background-card: #1e293b;
|
||||
--color-background-card-hover: #334155;
|
||||
|
||||
/* Border colors */
|
||||
--color-border: #334155;
|
||||
--color-border-hover: #475569;
|
||||
}
|
||||
/* Border colors */
|
||||
--color-border: #334155;
|
||||
--color-border-hover: #475569;
|
||||
}
|
||||
|
||||
/* Responsive Grid Columns */
|
||||
@media (min-width: 1200px) {
|
||||
:root {
|
||||
--grid-cols: 12; /* Desktop: 12 Spalten */
|
||||
}
|
||||
}
|
||||
/* 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 (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 */
|
||||
}
|
||||
}
|
||||
@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);
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
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:
|
||||
/* 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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
.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 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);
|
||||
}
|
||||
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;
|
||||
}
|
||||
html {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
color: #f3f4f6;
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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 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);
|
||||
}
|
||||
#logo-home-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Navigation Gradient Overlays */
|
||||
#nav-gradient-top {
|
||||
background-image:
|
||||
/* 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%);
|
||||
}
|
||||
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:
|
||||
#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>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
export const languages = {
|
||||
de: 'Deutsch',
|
||||
en: 'English',
|
||||
it: 'Italiano',
|
||||
fr: 'Français',
|
||||
es: 'Español'
|
||||
de: 'Deutsch',
|
||||
en: 'English',
|
||||
it: 'Italiano',
|
||||
fr: 'Français',
|
||||
es: 'Español',
|
||||
} as const;
|
||||
|
||||
export type Language = keyof typeof languages;
|
||||
|
|
@ -12,383 +12,419 @@ 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;
|
||||
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;
|
||||
}
|
||||
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',
|
||||
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',
|
||||
// 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 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',
|
||||
// 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 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',
|
||||
// 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',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Start for free',
|
||||
'button.bookDemo': 'Book a demo',
|
||||
'button.learnMore': 'Learn more',
|
||||
'button.back': 'Back',
|
||||
'button.backToOverview': 'Back to overview',
|
||||
// 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.',
|
||||
|
||||
// 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',
|
||||
// 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',
|
||||
|
||||
// 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',
|
||||
// Buttons
|
||||
'button.startFree': 'Start for free',
|
||||
'button.bookDemo': 'Book a demo',
|
||||
'button.learnMore': 'Learn more',
|
||||
'button.back': 'Back',
|
||||
'button.backToOverview': 'Back to overview',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productivity',
|
||||
'app.category.creative': 'Creative',
|
||||
'app.category.wellness': 'Wellness',
|
||||
'app.category.research': 'Research',
|
||||
// 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',
|
||||
|
||||
// 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',
|
||||
// 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',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Prova gratuita',
|
||||
'button.bookDemo': 'Prenota una demo',
|
||||
'button.learnMore': 'Scopri di più',
|
||||
'button.back': 'Indietro',
|
||||
'button.backToOverview': 'Torna alla panoramica',
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productivity',
|
||||
'app.category.creative': 'Creative',
|
||||
'app.category.wellness': 'Wellness',
|
||||
'app.category.research': 'Research',
|
||||
|
||||
// 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',
|
||||
// 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',
|
||||
|
||||
// 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ù',
|
||||
// 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.',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Produttività',
|
||||
'app.category.creative': 'Creativo',
|
||||
'app.category.wellness': 'Benessere',
|
||||
'app.category.research': 'Ricerca',
|
||||
// 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',
|
||||
|
||||
// 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',
|
||||
// Buttons
|
||||
'button.startFree': 'Prova gratuita',
|
||||
'button.bookDemo': 'Prenota una demo',
|
||||
'button.learnMore': 'Scopri di più',
|
||||
'button.back': 'Indietro',
|
||||
'button.backToOverview': 'Torna alla panoramica',
|
||||
|
||||
// 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.',
|
||||
// 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",
|
||||
|
||||
// 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é',
|
||||
// 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ù',
|
||||
|
||||
// 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',
|
||||
// App Categories
|
||||
'app.category.productivity': 'Produttività',
|
||||
'app.category.creative': 'Creativo',
|
||||
'app.category.wellness': 'Benessere',
|
||||
'app.category.research': 'Ricerca',
|
||||
|
||||
// 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',
|
||||
// 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',
|
||||
|
||||
// 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',
|
||||
// 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.',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productivité',
|
||||
'app.category.creative': 'Créatif',
|
||||
'app.category.wellness': 'Bien-être',
|
||||
'app.category.research': 'Recherche',
|
||||
// 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é',
|
||||
|
||||
// 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',
|
||||
// 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",
|
||||
|
||||
// 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.',
|
||||
// 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",
|
||||
|
||||
// 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',
|
||||
// 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',
|
||||
|
||||
// Buttons
|
||||
'button.startFree': 'Prueba gratuita',
|
||||
'button.bookDemo': 'Reservar demo',
|
||||
'button.learnMore': 'Saber más',
|
||||
'button.back': 'Atrás',
|
||||
'button.backToOverview': 'Volver al resumen',
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productivité',
|
||||
'app.category.creative': 'Créatif',
|
||||
'app.category.wellness': 'Bien-être',
|
||||
'app.category.research': 'Recherche',
|
||||
|
||||
// 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',
|
||||
// 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",
|
||||
|
||||
// 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',
|
||||
// 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.',
|
||||
|
||||
// App Categories
|
||||
'app.category.productivity': 'Productividad',
|
||||
'app.category.creative': 'Creativo',
|
||||
'app.category.wellness': 'Bienestar',
|
||||
'app.category.research': 'Investigación',
|
||||
// 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',
|
||||
|
||||
// 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',
|
||||
// Buttons
|
||||
'button.startFree': 'Prueba gratuita',
|
||||
'button.bookDemo': 'Reservar demo',
|
||||
'button.learnMore': 'Saber más',
|
||||
'button.back': 'Atrás',
|
||||
'button.backToOverview': 'Volver al resumen',
|
||||
|
||||
// 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.',
|
||||
// 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',
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
|
|
|
|||
|
|
@ -3,90 +3,96 @@ import { defaultLang } from './config';
|
|||
|
||||
// Get route without language prefix
|
||||
export function getRouteFromUrl(url: URL): string {
|
||||
const pathname = url.pathname;
|
||||
const parts = pathname.split('/');
|
||||
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);
|
||||
}
|
||||
// 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('/') || '/';
|
||||
return parts.join('/') || '/';
|
||||
}
|
||||
|
||||
// Get localized route
|
||||
export function getLocalizedRoute(route: string, lang: Language): string {
|
||||
if (lang === defaultLang) {
|
||||
return route;
|
||||
}
|
||||
return `/${lang}${route}`;
|
||||
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}` },
|
||||
];
|
||||
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;
|
||||
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;
|
||||
}
|
||||
const browserLang = navigator.language.split('-')[0];
|
||||
if (
|
||||
browserLang === 'de' ||
|
||||
browserLang === 'en' ||
|
||||
browserLang === 'it' ||
|
||||
browserLang === 'fr' ||
|
||||
browserLang === 'es'
|
||||
) {
|
||||
return browserLang as Language;
|
||||
}
|
||||
|
||||
return defaultLang;
|
||||
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'
|
||||
};
|
||||
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);
|
||||
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'
|
||||
};
|
||||
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);
|
||||
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'
|
||||
};
|
||||
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);
|
||||
}
|
||||
return new Intl.NumberFormat(locales[lang], {
|
||||
style: 'currency',
|
||||
currency: currency,
|
||||
}).format(amount);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -14,11 +14,11 @@ 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 clients = await getCollection('clients');
|
||||
return clients.map((client) => ({
|
||||
params: { slug: client.slug },
|
||||
props: { client },
|
||||
}));
|
||||
}
|
||||
|
||||
const { client } = Astro.props;
|
||||
|
|
@ -27,229 +27,252 @@ 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);
|
||||
.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 />
|
||||
<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>
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -17,386 +17,509 @@ 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'),
|
||||
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>
|
||||
<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 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 class="absolute bottom-0 right-1/4 w-96 h-96 bg-mana-blue/15 dark:bg-mana-blue/5 rounded-full blur-3xl" />
|
||||
|
||||
<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 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 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 class="absolute bottom-1/3 left-0 w-[500px] h-[500px] bg-pink-500/20 dark:bg-pink-500/5 rounded-full blur-3xl" />
|
||||
|
||||
<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 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 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 class="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/15 dark:bg-emerald-500/5 rounded-full blur-3xl" />
|
||||
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@ 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 contextPages = await getCollection('context');
|
||||
return contextPages.map((page) => ({
|
||||
params: { slug: page.slug },
|
||||
props: { page },
|
||||
}));
|
||||
}
|
||||
|
||||
const { page } = Astro.props;
|
||||
|
|
@ -25,47 +25,58 @@ 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);
|
||||
.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>
|
||||
<Navbar />
|
||||
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none
|
||||
<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
|
||||
|
|
@ -78,53 +89,69 @@ const otherPages = allPages
|
|||
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>
|
||||
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>
|
||||
)}
|
||||
{
|
||||
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>
|
||||
<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>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -18,79 +18,91 @@ 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"
|
||||
/>
|
||||
<Navbar />
|
||||
|
||||
<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>
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -16,155 +16,161 @@ import PricingSection from '@manacore/shared-landing-ui/sections/PricingSection.
|
|||
import CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Analytics Dashboard',
|
||||
description: 'Umfassende Einblicke in Team-Performance und Produktivität.'
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'KI-Insights',
|
||||
description: 'Automatische Analysen und Empfehlungen durch Machine Learning.'
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Management',
|
||||
description: 'Organisiere Teams, Rollen und Zugriffsrechte zentral.'
|
||||
},
|
||||
{
|
||||
icon: '🔗',
|
||||
title: 'Integrationen',
|
||||
description: 'Verbinde dich mit Slack, Jira, GitHub und mehr.'
|
||||
}
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Analytics Dashboard',
|
||||
description: 'Umfassende Einblicke in Team-Performance und Produktivität.',
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'KI-Insights',
|
||||
description: 'Automatische Analysen und Empfehlungen durch Machine Learning.',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Management',
|
||||
description: 'Organisiere Teams, Rollen und Zugriffsrechte zentral.',
|
||||
},
|
||||
{
|
||||
icon: '🔗',
|
||||
title: 'Integrationen',
|
||||
description: 'Verbinde dich mit Slack, Jira, GitHub und mehr.',
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: 'Was ist ManaCore?',
|
||||
answer: 'ManaCore ist eine KI-gestützte Plattform zur Messung und Verbesserung der Team-Performance.'
|
||||
},
|
||||
{
|
||||
question: 'Welche Apps sind enthalten?',
|
||||
answer: 'ManaCore umfasst Memoro (Sprachaufnahmen), ManaDeck (Teammanagement) und Märchenzauber (Kindergeschichten).'
|
||||
},
|
||||
{
|
||||
question: 'Gibt es eine kostenlose Testversion?',
|
||||
answer: 'Ja, du kannst ManaCore 14 Tage kostenlos testen - keine Kreditkarte erforderlich.'
|
||||
}
|
||||
{
|
||||
question: 'Was ist ManaCore?',
|
||||
answer:
|
||||
'ManaCore ist eine KI-gestützte Plattform zur Messung und Verbesserung der Team-Performance.',
|
||||
},
|
||||
{
|
||||
question: 'Welche Apps sind enthalten?',
|
||||
answer:
|
||||
'ManaCore umfasst Memoro (Sprachaufnahmen), ManaDeck (Teammanagement) und Märchenzauber (Kindergeschichten).',
|
||||
},
|
||||
{
|
||||
question: 'Gibt es eine kostenlose Testversion?',
|
||||
answer: 'Ja, du kannst ManaCore 14 Tage kostenlos testen - keine Kreditkarte erforderlich.',
|
||||
},
|
||||
];
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
name: 'Starter',
|
||||
price: '€0',
|
||||
period: 'Monat',
|
||||
features: ['1 Benutzer', '100 MB Speicher', 'Basic Analytics'],
|
||||
cta: { text: 'Kostenlos starten', href: '#' }
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
price: '€29',
|
||||
period: 'Monat',
|
||||
features: ['5 Benutzer', '10 GB Speicher', 'Advanced Analytics', 'Priority Support'],
|
||||
cta: { text: 'Jetzt upgraden', href: '#' },
|
||||
highlighted: true,
|
||||
badge: 'Beliebt'
|
||||
},
|
||||
{
|
||||
name: 'Enterprise',
|
||||
price: 'Kontakt',
|
||||
features: ['Unbegrenzte Benutzer', 'Unbegrenzter Speicher', 'Custom Integrationen', 'Dedicated Support'],
|
||||
cta: { text: 'Kontakt aufnehmen', href: '#' }
|
||||
}
|
||||
{
|
||||
name: 'Starter',
|
||||
price: '€0',
|
||||
period: 'Monat',
|
||||
features: ['1 Benutzer', '100 MB Speicher', 'Basic Analytics'],
|
||||
cta: { text: 'Kostenlos starten', href: '#' },
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
price: '€29',
|
||||
period: 'Monat',
|
||||
features: ['5 Benutzer', '10 GB Speicher', 'Advanced Analytics', 'Priority Support'],
|
||||
cta: { text: 'Jetzt upgraden', href: '#' },
|
||||
highlighted: true,
|
||||
badge: 'Beliebt',
|
||||
},
|
||||
{
|
||||
name: 'Enterprise',
|
||||
price: 'Kontakt',
|
||||
features: [
|
||||
'Unbegrenzte Benutzer',
|
||||
'Unbegrenzter Speicher',
|
||||
'Custom Integrationen',
|
||||
'Dedicated Support',
|
||||
],
|
||||
cta: { text: 'Kontakt aufnehmen', href: '#' },
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title="Shared Components Demo - ManaCore">
|
||||
<HeroSection
|
||||
title="Shared Landing UI Demo"
|
||||
subtitle="Diese Seite demonstriert die wiederverwendbaren Komponenten aus @manacore/shared-landing-ui im ManaCore-Design."
|
||||
variant="centered"
|
||||
primaryCta={{
|
||||
text: 'Zurück zur Startseite',
|
||||
href: '/de'
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Features ansehen',
|
||||
href: '#features',
|
||||
variant: 'secondary'
|
||||
}}
|
||||
/>
|
||||
<HeroSection
|
||||
title="Shared Landing UI Demo"
|
||||
subtitle="Diese Seite demonstriert die wiederverwendbaren Komponenten aus @manacore/shared-landing-ui im ManaCore-Design."
|
||||
variant="centered"
|
||||
primaryCta={{
|
||||
text: 'Zurück zur Startseite',
|
||||
href: '/de',
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Features ansehen',
|
||||
href: '#features',
|
||||
variant: 'secondary',
|
||||
}}
|
||||
/>
|
||||
|
||||
<section class="py-16">
|
||||
<Container>
|
||||
<h2 class="text-3xl font-bold text-center mb-8" style="color: var(--color-text-primary)">Atom Components</h2>
|
||||
<section class="py-16">
|
||||
<Container>
|
||||
<h2 class="text-3xl font-bold text-center mb-8" style="color: var(--color-text-primary)">
|
||||
Atom Components
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<Card variant="bordered" padding="lg">
|
||||
<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">Buttons</h3>
|
||||
<div class="space-y-3">
|
||||
<Button href="#" variant="primary" fullWidth>Primary</Button>
|
||||
<Button href="#" variant="secondary" fullWidth>Secondary</Button>
|
||||
<Button href="#" variant="outline" fullWidth>Outline</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<Card variant="bordered" padding="lg">
|
||||
<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">
|
||||
Buttons
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<Button href="#" variant="primary" fullWidth>Primary</Button>
|
||||
<Button href="#" variant="secondary" fullWidth>Secondary</Button>
|
||||
<Button href="#" variant="outline" fullWidth>Outline</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="lg">
|
||||
<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">Badges</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge variant="primary">Primary</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
<Badge variant="error">Error</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
<Card variant="bordered" padding="lg">
|
||||
<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">
|
||||
Badges
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge variant="primary">Primary</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
<Badge variant="error">Error</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="lg">
|
||||
<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">Cards</h3>
|
||||
<div class="space-y-2">
|
||||
<Card variant="hover" padding="sm">
|
||||
<p class="text-sm" style="color: var(--color-text-secondary)">Hover Card</p>
|
||||
</Card>
|
||||
<Card variant="glow" padding="sm">
|
||||
<p class="text-sm" style="color: var(--color-text-secondary)">Glow Card</p>
|
||||
</Card>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
<Card variant="bordered" padding="lg">
|
||||
<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">Cards</h3>
|
||||
<div class="space-y-2">
|
||||
<Card variant="hover" padding="sm">
|
||||
<p class="text-sm" style="color: var(--color-text-secondary)">Hover Card</p>
|
||||
</Card>
|
||||
<Card variant="glow" padding="sm">
|
||||
<p class="text-sm" style="color: var(--color-text-secondary)">Glow Card</p>
|
||||
</Card>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<FeatureSection
|
||||
id="features"
|
||||
title="Feature Section"
|
||||
subtitle="Automatisch generiertes Feature-Grid"
|
||||
features={features}
|
||||
columns={4}
|
||||
/>
|
||||
<FeatureSection
|
||||
id="features"
|
||||
title="Feature Section"
|
||||
subtitle="Automatisch generiertes Feature-Grid"
|
||||
features={features}
|
||||
columns={4}
|
||||
/>
|
||||
|
||||
<PricingSection
|
||||
title="Pricing Section"
|
||||
subtitle="Vergleiche unsere Pläne"
|
||||
plans={pricingPlans}
|
||||
/>
|
||||
<PricingSection title="Pricing Section" subtitle="Vergleiche unsere Pläne" plans={pricingPlans} />
|
||||
|
||||
<FAQSection
|
||||
title="FAQ Section"
|
||||
faqs={faqs}
|
||||
/>
|
||||
<FAQSection title="FAQ Section" faqs={faqs} />
|
||||
|
||||
<CTASection
|
||||
title="Bereit loszulegen?"
|
||||
subtitle="Starte jetzt mit ManaCore und verbessere deine Team-Performance."
|
||||
primaryCta={{
|
||||
text: 'Kostenlos testen',
|
||||
href: '#'
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Demo anfragen',
|
||||
href: '#',
|
||||
variant: 'outline'
|
||||
}}
|
||||
variant="highlighted"
|
||||
/>
|
||||
<CTASection
|
||||
title="Bereit loszulegen?"
|
||||
subtitle="Starte jetzt mit ManaCore und verbessere deine Team-Performance."
|
||||
primaryCta={{
|
||||
text: 'Kostenlos testen',
|
||||
href: '#',
|
||||
}}
|
||||
secondaryCta={{
|
||||
text: 'Demo anfragen',
|
||||
href: '#',
|
||||
variant: 'outline',
|
||||
}}
|
||||
variant="highlighted"
|
||||
/>
|
||||
</Layout>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -13,11 +13,11 @@ import Flex from '../../components/layout/Flex.astro';
|
|||
import { getCollection, getEntry } from 'astro:content';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const branchen = await getCollection('branchen');
|
||||
return branchen.map((group) => ({
|
||||
params: { slug: group.slug },
|
||||
props: { group },
|
||||
}));
|
||||
const branchen = await getCollection('branchen');
|
||||
return branchen.map((group) => ({
|
||||
params: { slug: group.slug },
|
||||
props: { group },
|
||||
}));
|
||||
}
|
||||
|
||||
const { group } = Astro.props;
|
||||
|
|
@ -25,143 +25,145 @@ const { Content } = await group.render();
|
|||
---
|
||||
|
||||
<Layout title={`${group.data.title} - Mana für Ihre Branche`}>
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section spacing="large" class="bg-gray-50 dark:bg-gray-900">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="text-6xl mb-6">{group.data.icon}</div>
|
||||
<Heading as="h1" size="1" class="mb-6">
|
||||
Mana für {group.data.title}
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 mb-8">
|
||||
{group.data.description}
|
||||
</Text>
|
||||
|
||||
{group.data.pricing.special && (
|
||||
<div class="inline-block bg-mana-blue/10 text-mana-blue px-6 py-3 rounded-full text-lg font-medium mb-8">
|
||||
{group.data.pricing.discount || group.data.pricing.details}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Flex gap="medium" justify="center">
|
||||
<Button href="/start" size="large" class="bg-mana-blue hover:bg-blue-600 text-white">
|
||||
Jetzt starten
|
||||
</Button>
|
||||
<Button href="/demo" variant="outline" size="large">
|
||||
Demo anfordern
|
||||
</Button>
|
||||
</Flex>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Heading as="h2" size="2" align="center" class="mb-12">
|
||||
Ihre Vorteile mit Mana
|
||||
</Heading>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-5xl mx-auto">
|
||||
{group.data.benefits.map((benefit, index) => (
|
||||
<Card variant="elevated" padding="large">
|
||||
<div class="w-12 h-12 bg-mana-blue/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<span class="text-2xl font-bold text-mana-blue">{index + 1}</span>
|
||||
</div>
|
||||
<Text>{benefit}</Text>
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto prose prose-lg dark:prose-invert">
|
||||
<Content />
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Use Cases Section -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Heading as="h2" size="2" align="center" class="mb-12">
|
||||
So nutzen {group.data.title} Mana
|
||||
</Heading>
|
||||
|
||||
<Grid cols={2} gap="large" class="max-w-4xl mx-auto">
|
||||
{group.data.useCases.map((useCase) => (
|
||||
<Card variant="bordered" padding="medium">
|
||||
<Flex align="center" gap="small">
|
||||
<span class="text-2xl">💡</span>
|
||||
<Text>{useCase}</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Testimonial Section -->
|
||||
{group.data.testimonial && (
|
||||
<Section spacing="xlarge" class="bg-mana-blue">
|
||||
<Container>
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div class="text-6xl mb-6 text-white opacity-50">❝</div>
|
||||
<Text size="2xl" class="text-white mb-6 italic">
|
||||
{group.data.testimonial.quote}
|
||||
</Text>
|
||||
<div>
|
||||
<Text weight="semibold" class="text-white">
|
||||
{group.data.testimonial.author}
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-200">
|
||||
{group.data.testimonial.role}
|
||||
{group.data.testimonial.company && `, ${group.data.testimonial.company}`}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<!-- CTA Section -->
|
||||
<Section spacing="xlarge">
|
||||
<Container class="text-center">
|
||||
<Heading as="h2" size="2" class="mb-6">
|
||||
Bereit für flexiblere KI-Nutzung?
|
||||
</Heading>
|
||||
<Text size="xl" class="mb-8 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Starten Sie noch heute und erleben Sie, wie Mana Ihre Arbeitsweise revolutioniert.
|
||||
</Text>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-3xl mx-auto mb-8">
|
||||
<Card class="text-center">
|
||||
<div class="text-3xl mb-2">🎯</div>
|
||||
<Text weight="semibold">Kostenlos testen</Text>
|
||||
<Text size="sm" color="muted">150 Mana gratis</Text>
|
||||
</Card>
|
||||
<Card class="text-center">
|
||||
<div class="text-3xl mb-2">🚀</div>
|
||||
<Text weight="semibold">Sofort starten</Text>
|
||||
<Text size="sm" color="muted">Keine Kreditkarte</Text>
|
||||
</Card>
|
||||
<Card class="text-center">
|
||||
<div class="text-3xl mb-2">💬</div>
|
||||
<Text weight="semibold">Support inklusive</Text>
|
||||
<Text size="sm" color="muted">Persönliche Betreuung</Text>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Button href="/start" size="large" class="bg-mana-blue hover:bg-blue-600 text-white">
|
||||
Jetzt für {group.data.title} starten
|
||||
</Button>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section spacing="large" class="bg-gray-50 dark:bg-gray-900">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="text-6xl mb-6">{group.data.icon}</div>
|
||||
<Heading as="h1" size="1" class="mb-6">
|
||||
Mana für {group.data.title}
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 mb-8">
|
||||
{group.data.description}
|
||||
</Text>
|
||||
|
||||
{
|
||||
group.data.pricing.special && (
|
||||
<div class="inline-block bg-mana-blue/10 text-mana-blue px-6 py-3 rounded-full text-lg font-medium mb-8">
|
||||
{group.data.pricing.discount || group.data.pricing.details}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<Flex gap="medium" justify="center">
|
||||
<Button href="/start" size="large" class="bg-mana-blue hover:bg-blue-600 text-white">
|
||||
Jetzt starten
|
||||
</Button>
|
||||
<Button href="/demo" variant="outline" size="large"> Demo anfordern </Button>
|
||||
</Flex>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Heading as="h2" size="2" align="center" class="mb-12"> Ihre Vorteile mit Mana </Heading>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-5xl mx-auto">
|
||||
{
|
||||
group.data.benefits.map((benefit, index) => (
|
||||
<Card variant="elevated" padding="large">
|
||||
<div class="w-12 h-12 bg-mana-blue/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<span class="text-2xl font-bold text-mana-blue">{index + 1}</span>
|
||||
</div>
|
||||
<Text>{benefit}</Text>
|
||||
</Card>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto prose prose-lg dark:prose-invert">
|
||||
<Content />
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Use Cases Section -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Heading as="h2" size="2" align="center" class="mb-12">
|
||||
So nutzen {group.data.title} Mana
|
||||
</Heading>
|
||||
|
||||
<Grid cols={2} gap="large" class="max-w-4xl mx-auto">
|
||||
{
|
||||
group.data.useCases.map((useCase) => (
|
||||
<Card variant="bordered" padding="medium">
|
||||
<Flex align="center" gap="small">
|
||||
<span class="text-2xl">💡</span>
|
||||
<Text>{useCase}</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Testimonial Section -->
|
||||
{
|
||||
group.data.testimonial && (
|
||||
<Section spacing="xlarge" class="bg-mana-blue">
|
||||
<Container>
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div class="text-6xl mb-6 text-white opacity-50">❝</div>
|
||||
<Text size="2xl" class="text-white mb-6 italic">
|
||||
{group.data.testimonial.quote}
|
||||
</Text>
|
||||
<div>
|
||||
<Text weight="semibold" class="text-white">
|
||||
{group.data.testimonial.author}
|
||||
</Text>
|
||||
<Text size="sm" class="text-gray-200">
|
||||
{group.data.testimonial.role}
|
||||
{group.data.testimonial.company && `, ${group.data.testimonial.company}`}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- CTA Section -->
|
||||
<Section spacing="xlarge">
|
||||
<Container class="text-center">
|
||||
<Heading as="h2" size="2" class="mb-6"> Bereit für flexiblere KI-Nutzung? </Heading>
|
||||
<Text size="xl" class="mb-8 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Starten Sie noch heute und erleben Sie, wie Mana Ihre Arbeitsweise revolutioniert.
|
||||
</Text>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-3xl mx-auto mb-8">
|
||||
<Card class="text-center">
|
||||
<div class="text-3xl mb-2">🎯</div>
|
||||
<Text weight="semibold">Kostenlos testen</Text>
|
||||
<Text size="sm" color="muted">150 Mana gratis</Text>
|
||||
</Card>
|
||||
<Card class="text-center">
|
||||
<div class="text-3xl mb-2">🚀</div>
|
||||
<Text weight="semibold">Sofort starten</Text>
|
||||
<Text size="sm" color="muted">Keine Kreditkarte</Text>
|
||||
</Card>
|
||||
<Card class="text-center">
|
||||
<div class="text-3xl mb-2">💬</div>
|
||||
<Text weight="semibold">Support inklusive</Text>
|
||||
<Text size="sm" color="muted">Persönliche Betreuung</Text>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Button href="/start" size="large" class="bg-mana-blue hover:bg-blue-600 text-white">
|
||||
Jetzt für {group.data.title} starten
|
||||
</Button>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -18,284 +18,387 @@ const sortedBranchen = branchen.sort((a, b) => a.data.order - b.data.order);
|
|||
---
|
||||
|
||||
<Layout title="Für wen ist Mana? - Maßgeschneiderte Lösungen">
|
||||
<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="Für wen ist Mana gemacht?"
|
||||
subtitle="Egal ob Startup, Mittelstand oder Enterprise - Mana passt sich flexibel an Ihre Bedürfnisse an. Entdecken Sie maßgeschneiderte Lösungen für Ihre Branche."
|
||||
background="none"
|
||||
minHeight="small"
|
||||
spacing="small"
|
||||
containerClass="py-16 relative z-10"
|
||||
debug={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Target Groups Grid -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
{/* Continuous background flow */}
|
||||
<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">
|
||||
<Grid cols={2} gap="large" class="max-w-6xl mx-auto">
|
||||
{sortedBranchen.map((group) => (
|
||||
<a href={`/fuer/${group.slug}`} class="block group">
|
||||
<div class="relative h-full">
|
||||
{/* Gradient border effect */}
|
||||
<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>
|
||||
|
||||
{/* Card content */}
|
||||
<div class="relative h-full bg-white/80 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">
|
||||
{/* Special pricing ribbon */}
|
||||
{group.data.pricing.special && (
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-green-500 to-emerald-500 text-white shadow-lg">
|
||||
<Icon name="mdi:star" class="w-3 h-3 mr-1" />
|
||||
{group.data.pricing.discount || 'Sonderkonditionen'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="p-8">
|
||||
{/* Icon and Title Section */}
|
||||
<div class="mb-6">
|
||||
<div class="relative mb-4">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-3xl blur-2xl group-hover:from-mana-blue/20 group-hover:to-blue-500/20 transition-all duration-300"></div>
|
||||
<div class="relative w-20 h-20 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-3xl flex items-center justify-center text-5xl group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg">
|
||||
{group.data.icon}
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="3" class="mb-3 group-hover:text-mana-blue transition-colors">
|
||||
{group.data.title}
|
||||
</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400">
|
||||
{group.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Benefits Preview */}
|
||||
<div class="mb-6 space-y-3">
|
||||
{group.data.benefits.slice(0, 3).map((benefit) => (
|
||||
<div class="flex items-start gap-3 group/item">
|
||||
<div class="mt-0.5 flex-shrink-0 w-5 h-5 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center group-hover/item:scale-110 transition-transform">
|
||||
<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 leading-relaxed">
|
||||
{benefit}
|
||||
</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div class="pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-mana-blue font-medium">Mehr erfahren</span>
|
||||
<div class="flex items-center gap-2 text-mana-blue">
|
||||
<span class="text-sm opacity-0 group-hover:opacity-100 transition-opacity">Details ansehen</span>
|
||||
<Icon name="mdi:arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Benefits Overview -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
{/* Continuous background flow */}
|
||||
<div class="absolute inset-0 -top-32 -bottom-32 bg-gradient-to-b from-transparent via-blue-50/40 to-transparent dark:from-transparent dark:via-blue-500/3 dark:to-transparent"></div>
|
||||
<div class="absolute top-1/3 right-0 w-[500px] h-[500px] bg-blue-500/20 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-1/3 left-0 w-[500px] h-[500px] bg-mana-blue/20 dark:bg-mana-blue/5 rounded-full blur-3xl"></div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Warum Mana für alle funktioniert
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-3xl mx-auto text-center">
|
||||
Eine Plattform, die sich an Ihre Bedürfnisse anpasst – nicht umgekehrt
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{/* Faire Preise */}
|
||||
<div class="group relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/0 to-emerald-500/0 rounded-3xl group-hover:from-green-500/10 group-hover:to-emerald-500/10 transition-all duration-300"></div>
|
||||
<div class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-8 h-full border border-gray-200 dark:border-gray-700 group-hover:border-green-500/30 transition-all duration-300 group-hover:shadow-xl group-hover:shadow-green-500/10">
|
||||
<div class="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-green-500/10 to-emerald-500/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon name="mdi:scale-balance" class="w-8 h-8 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="4" class="mb-3">Faire Preise</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Spezielle Konditionen für Bildung, NGOs und Startups. Keine versteckten Kosten.
|
||||
</Text>
|
||||
<div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-green-600 dark:text-green-500">
|
||||
<Icon name="mdi:arrow-right" class="w-4 h-4" />
|
||||
<Text size="sm" class="font-medium">Bis zu 90% sparen</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Flexible Integration */}
|
||||
<div class="group relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 rounded-3xl group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300"></div>
|
||||
<div class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-8 h-full border border-gray-200 dark:border-gray-700 group-hover:border-purple-500/30 transition-all duration-300 group-hover:shadow-xl group-hover:shadow-purple-500/10">
|
||||
<div class="mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-2xl blur-xl group-hover:from-purple-500/30 group-hover:to-pink-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon name="mdi:puzzle" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="4" class="mb-3">Flexible Integration</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Nahtlose Einbindung in bestehende Workflows. API-first für maximale Anpassbarkeit.
|
||||
</Text>
|
||||
<div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-purple-600 dark:text-purple-500">
|
||||
<Icon name="mdi:arrow-right" class="w-4 h-4" />
|
||||
<Text size="sm" class="font-medium">Plug & Play</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skalierbar */}
|
||||
<div class="group relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-cyan-500/0 rounded-3xl group-hover:from-blue-500/10 group-hover:to-cyan-500/10 transition-all duration-300"></div>
|
||||
<div class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-8 h-full border border-gray-200 dark:border-gray-700 group-hover:border-blue-500/30 transition-all duration-300 group-hover:shadow-xl group-hover:shadow-blue-500/10">
|
||||
<div class="mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-2xl blur-xl group-hover:from-blue-500/30 group-hover:to-cyan-500/30 transition-all duration-300"></div>
|
||||
<div class="relative w-16 h-16 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon name="mdi:rocket-launch" class="w-8 h-8 text-blue-600 dark:text-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="4" class="mb-3">Unbegrenzt skalierbar</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Von Solo-Gründer bis Großkonzern. Wächst automatisch mit Ihrem Erfolg mit.
|
||||
</Text>
|
||||
<div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-blue-600 dark:text-blue-500">
|
||||
<Icon name="mdi:arrow-right" class="w-4 h-4" />
|
||||
<Text size="sm" class="font-medium">1 bis 10.000+ User</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional value props */}
|
||||
<div class="mt-16 text-center">
|
||||
<div class="inline-flex items-center gap-8 flex-wrap justify-center">
|
||||
<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-green-500" />
|
||||
<Text size="sm">DSGVO-konform</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:headset" class="w-5 h-5 text-blue-500" />
|
||||
<Text size="sm">24/7 Support</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:update" class="w-5 h-5 text-purple-500" />
|
||||
<Text size="sm">Wöchentliche Updates</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:earth" class="w-5 h-5 text-emerald-500" />
|
||||
<Text size="sm">CO2-neutral</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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:compass" class="w-10 h-10 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Finden Sie die perfekte Lösung
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" class="mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
|
||||
Nicht sicher, welches Angebot zu Ihnen passt? Wir beraten Sie gerne
|
||||
unverbindlich zu den besten Optionen für Ihre Anforderungen.
|
||||
</Text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button href="/beratung" size="large" class="bg-gradient-to-r from-mana-blue to-blue-600 hover:from-blue-600 hover:to-mana-blue text-white px-8 py-4 text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
<Icon name="mdi:calendar-check" class="w-5 h-5 mr-2" />
|
||||
Kostenlose Beratung buchen
|
||||
</Button>
|
||||
<Button href="/pricing" variant="outline" size="large" class="border-2 border-gray-300 dark:border-gray-600 hover:border-mana-blue dark:hover:border-mana-blue px-8 py-4 text-lg">
|
||||
<Icon name="mdi:currency-eur" class="w-5 h-5 mr-2" />
|
||||
Preise ansehen
|
||||
</Button>
|
||||
</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:clock-fast" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">15 Min. Gespräch</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:account-group" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">KI-Experten</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:hand-heart" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">Unverbindlich</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
<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="Für wen ist Mana gemacht?"
|
||||
subtitle="Egal ob Startup, Mittelstand oder Enterprise - Mana passt sich flexibel an Ihre Bedürfnisse an. Entdecken Sie maßgeschneiderte Lösungen für Ihre Branche."
|
||||
background="none"
|
||||
minHeight="small"
|
||||
spacing="small"
|
||||
containerClass="py-16 relative z-10"
|
||||
debug={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Target Groups Grid -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
{/* Continuous background flow */}
|
||||
<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">
|
||||
<Grid cols={2} gap="large" class="max-w-6xl mx-auto">
|
||||
{
|
||||
sortedBranchen.map((group) => (
|
||||
<a href={`/fuer/${group.slug}`} class="block group">
|
||||
<div class="relative h-full">
|
||||
{/* Gradient border effect */}
|
||||
<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" />
|
||||
|
||||
{/* Card content */}
|
||||
<div class="relative h-full bg-white/80 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">
|
||||
{/* Special pricing ribbon */}
|
||||
{group.data.pricing.special && (
|
||||
<div class="absolute top-4 right-4 z-10">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-green-500 to-emerald-500 text-white shadow-lg">
|
||||
<Icon name="mdi:star" class="w-3 h-3 mr-1" />
|
||||
{group.data.pricing.discount || 'Sonderkonditionen'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="p-8">
|
||||
{/* Icon and Title Section */}
|
||||
<div class="mb-6">
|
||||
<div class="relative mb-4">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-3xl blur-2xl group-hover:from-mana-blue/20 group-hover:to-blue-500/20 transition-all duration-300" />
|
||||
<div class="relative w-20 h-20 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-3xl flex items-center justify-center text-5xl group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg">
|
||||
{group.data.icon}
|
||||
</div>
|
||||
</div>
|
||||
<Heading
|
||||
as="h3"
|
||||
size="3"
|
||||
class="mb-3 group-hover:text-mana-blue transition-colors"
|
||||
>
|
||||
{group.data.title}
|
||||
</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400">
|
||||
{group.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Benefits Preview */}
|
||||
<div class="mb-6 space-y-3">
|
||||
{group.data.benefits.slice(0, 3).map((benefit) => (
|
||||
<div class="flex items-start gap-3 group/item">
|
||||
<div class="mt-0.5 flex-shrink-0 w-5 h-5 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center group-hover/item:scale-110 transition-transform">
|
||||
<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 leading-relaxed"
|
||||
>
|
||||
{benefit}
|
||||
</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div class="pt-4 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-mana-blue font-medium">Mehr erfahren</span>
|
||||
<div class="flex items-center gap-2 text-mana-blue">
|
||||
<span class="text-sm opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
Details ansehen
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
class="w-5 h-5 group-hover:translate-x-1 transition-transform"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Benefits Overview -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
{/* Continuous background flow */}
|
||||
<div
|
||||
class="absolute inset-0 -top-32 -bottom-32 bg-gradient-to-b from-transparent via-blue-50/40 to-transparent dark:from-transparent dark:via-blue-500/3 dark:to-transparent"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-1/3 right-0 w-[500px] h-[500px] bg-blue-500/20 dark:bg-blue-500/5 rounded-full blur-3xl"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-1/3 left-0 w-[500px] h-[500px] bg-mana-blue/20 dark:bg-mana-blue/5 rounded-full blur-3xl"
|
||||
>
|
||||
</div>
|
||||
|
||||
<Container class="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Warum Mana für alle funktioniert
|
||||
</Heading>
|
||||
<Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-3xl mx-auto text-center">
|
||||
Eine Plattform, die sich an Ihre Bedürfnisse anpasst – nicht umgekehrt
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{/* Faire Preise */}
|
||||
<div class="group relative">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-green-500/0 to-emerald-500/0 rounded-3xl group-hover:from-green-500/10 group-hover:to-emerald-500/10 transition-all duration-300"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-8 h-full border border-gray-200 dark:border-gray-700 group-hover:border-green-500/30 transition-all duration-300 group-hover:shadow-xl group-hover:shadow-green-500/10"
|
||||
>
|
||||
<div class="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-green-500/10 to-emerald-500/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:scale-balance"
|
||||
class="w-8 h-8 text-green-600 dark:text-green-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="4" class="mb-3">Faire Preise</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Spezielle Konditionen für Bildung, NGOs und Startups. Keine versteckten Kosten.
|
||||
</Text>
|
||||
<div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-green-600 dark:text-green-500">
|
||||
<Icon name="mdi:arrow-right" class="w-4 h-4" />
|
||||
<Text size="sm" class="font-medium">Bis zu 90% sparen</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Flexible Integration */}
|
||||
<div class="group relative">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 rounded-3xl group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-8 h-full border border-gray-200 dark:border-gray-700 group-hover:border-purple-500/30 transition-all duration-300 group-hover:shadow-xl group-hover:shadow-purple-500/10"
|
||||
>
|
||||
<div class="mb-6">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-2xl blur-xl group-hover:from-purple-500/30 group-hover:to-pink-500/30 transition-all duration-300"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300"
|
||||
>
|
||||
<Icon name="mdi:puzzle" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="4" class="mb-3">Flexible Integration</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Nahtlose Einbindung in bestehende Workflows. API-first für maximale Anpassbarkeit.
|
||||
</Text>
|
||||
<div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-purple-600 dark:text-purple-500">
|
||||
<Icon name="mdi:arrow-right" class="w-4 h-4" />
|
||||
<Text size="sm" class="font-medium">Plug & Play</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skalierbar */}
|
||||
<div class="group relative">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-cyan-500/0 rounded-3xl group-hover:from-blue-500/10 group-hover:to-cyan-500/10 transition-all duration-300"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-8 h-full border border-gray-200 dark:border-gray-700 group-hover:border-blue-500/30 transition-all duration-300 group-hover:shadow-xl group-hover:shadow-blue-500/10"
|
||||
>
|
||||
<div class="mb-6">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-2xl blur-xl group-hover:from-blue-500/30 group-hover:to-cyan-500/30 transition-all duration-300"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="relative w-16 h-16 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:rocket-launch"
|
||||
class="w-8 h-8 text-blue-600 dark:text-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Heading as="h3" size="4" class="mb-3">Unbegrenzt skalierbar</Heading>
|
||||
<Text size="base" class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Von Solo-Gründer bis Großkonzern. Wächst automatisch mit Ihrem Erfolg mit.
|
||||
</Text>
|
||||
<div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
|
||||
<div class="flex items-center gap-2 text-blue-600 dark:text-blue-500">
|
||||
<Icon name="mdi:arrow-right" class="w-4 h-4" />
|
||||
<Text size="sm" class="font-medium">1 bis 10.000+ User</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional value props */}
|
||||
<div class="mt-16 text-center">
|
||||
<div class="inline-flex items-center gap-8 flex-wrap justify-center">
|
||||
<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-green-500" />
|
||||
<Text size="sm">DSGVO-konform</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:headset" class="w-5 h-5 text-blue-500" />
|
||||
<Text size="sm">24/7 Support</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:update" class="w-5 h-5 text-purple-500" />
|
||||
<Text size="sm">Wöchentliche Updates</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:earth" class="w-5 h-5 text-emerald-500" />
|
||||
<Text size="sm">CO2-neutral</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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:compass" class="w-10 h-10 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Heading as="h2" size="2" class="mb-4 text-center">
|
||||
Finden Sie die perfekte Lösung
|
||||
</Heading>
|
||||
|
||||
<Text
|
||||
size="xl"
|
||||
class="mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center"
|
||||
>
|
||||
Nicht sicher, welches Angebot zu Ihnen passt? Wir beraten Sie gerne unverbindlich zu
|
||||
den besten Optionen für Ihre Anforderungen.
|
||||
</Text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||||
<Button
|
||||
href="/beratung"
|
||||
size="large"
|
||||
class="bg-gradient-to-r from-mana-blue to-blue-600 hover:from-blue-600 hover:to-mana-blue text-white px-8 py-4 text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<Icon name="mdi:calendar-check" class="w-5 h-5 mr-2" />
|
||||
Kostenlose Beratung buchen
|
||||
</Button>
|
||||
<Button
|
||||
href="/pricing"
|
||||
variant="outline"
|
||||
size="large"
|
||||
class="border-2 border-gray-300 dark:border-gray-600 hover:border-mana-blue dark:hover:border-mana-blue px-8 py-4 text-lg"
|
||||
>
|
||||
<Icon name="mdi:currency-eur" class="w-5 h-5 mr-2" />
|
||||
Preise ansehen
|
||||
</Button>
|
||||
</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:clock-fast" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">15 Min. Gespräch</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:account-group" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">KI-Experten</Text>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
|
||||
<Icon name="mdi:hand-heart" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="sm">Unverbindlich</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -12,279 +12,341 @@ import { Icon } from 'astro-icon/components';
|
|||
---
|
||||
|
||||
<Layout title="Impressum | Mana">
|
||||
<div class="bg-gradient-to-b from-gray-50/30 via-white to-gray-50/30 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900">
|
||||
<Navbar />
|
||||
<div
|
||||
class="bg-gradient-to-b from-gray-50/30 via-white to-gray-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-gray-50/50 to-transparent dark:from-gray-900 dark:to-transparent"></div>
|
||||
</div>
|
||||
<!-- Hero Section -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 -bottom-32">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-gray-50/50 to-transparent dark:from-gray-900 dark:to-transparent"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<HeroSection
|
||||
title="Impressum"
|
||||
subtitle="Angaben gemäß § 5 TMG"
|
||||
background="none"
|
||||
minHeight="small"
|
||||
spacing="small"
|
||||
containerClass="py-16 relative z-10"
|
||||
centered={true}
|
||||
debug={false}
|
||||
/>
|
||||
</div>
|
||||
<HeroSection
|
||||
title="Impressum"
|
||||
subtitle="Angaben gemäß § 5 TMG"
|
||||
background="none"
|
||||
minHeight="small"
|
||||
spacing="small"
|
||||
containerClass="py-16 relative z-10"
|
||||
centered={true}
|
||||
debug={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<Container class="relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Card variant="elevated" padding="xlarge" class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80">
|
||||
<div class="prose prose-gray dark:prose-invert max-w-none">
|
||||
<!-- Main Content -->
|
||||
<Section spacing="xlarge" class="relative">
|
||||
<Container class="relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Card
|
||||
variant="elevated"
|
||||
padding="xlarge"
|
||||
class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80"
|
||||
>
|
||||
<div class="prose prose-gray dark:prose-invert max-w-none">
|
||||
<!-- Anbieter / Betreiber -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon name="mdi:domain" class="w-6 h-6 text-mana-blue" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> Anbieter </Heading>
|
||||
</div>
|
||||
|
||||
<!-- Anbieter / Betreiber -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:domain" class="w-6 h-6 text-mana-blue" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
Anbieter
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 space-y-2 text-gray-700 dark:text-gray-300">
|
||||
<p class="font-semibold text-lg">Mana GmbH</p>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Musterstadt</p>
|
||||
<p>Deutschland</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 space-y-2 text-gray-700 dark:text-gray-300">
|
||||
<p class="font-semibold text-lg">Mana GmbH</p>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Musterstadt</p>
|
||||
<p>Deutschland</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Kontakt -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon name="mdi:email" class="w-6 h-6 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> Kontakt </Heading>
|
||||
</div>
|
||||
|
||||
<!-- Kontakt -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:email" class="w-6 h-6 text-green-600 dark:text-green-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
Kontakt
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:phone" class="w-5 h-5 text-gray-500" />
|
||||
<a href="tel:+4912345678" class="text-mana-blue hover:underline"
|
||||
>+49 (0) 123 456 78</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:email-outline" class="w-5 h-5 text-gray-500" />
|
||||
<a href="mailto:info@mana.ai" class="text-mana-blue hover:underline"
|
||||
>info@mana.ai</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:web" class="w-5 h-5 text-gray-500" />
|
||||
<a href="https://mana.ai" class="text-mana-blue hover:underline">www.mana.ai</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:phone" class="w-5 h-5 text-gray-500" />
|
||||
<a href="tel:+4912345678" class="text-mana-blue hover:underline">+49 (0) 123 456 78</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:email-outline" class="w-5 h-5 text-gray-500" />
|
||||
<a href="mailto:info@mana.ai" class="text-mana-blue hover:underline">info@mana.ai</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:web" class="w-5 h-5 text-gray-500" />
|
||||
<a href="https://mana.ai" class="text-mana-blue hover:underline">www.mana.ai</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vertreten durch -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:account-tie"
|
||||
class="w-6 h-6 text-purple-600 dark:text-purple-500"
|
||||
/>
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> Vertreten durch </Heading>
|
||||
</div>
|
||||
|
||||
<!-- Vertreten durch -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:account-tie" class="w-6 h-6 text-purple-600 dark:text-purple-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
Vertreten durch
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Geschäftsführer: [Name des Geschäftsführers]</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Geschäftsführer: [Name des Geschäftsführers]</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Registereintrag -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:file-document"
|
||||
class="w-6 h-6 text-blue-600 dark:text-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> Registereintrag </Heading>
|
||||
</div>
|
||||
|
||||
<!-- Registereintrag -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:file-document" class="w-6 h-6 text-blue-600 dark:text-blue-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
Registereintrag
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 space-y-2 text-gray-700 dark:text-gray-300">
|
||||
<p>Eintragung im Handelsregister</p>
|
||||
<p>Registergericht: Amtsgericht [Stadt]</p>
|
||||
<p>Registernummer: HRB [Nummer]</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 space-y-2 text-gray-700 dark:text-gray-300">
|
||||
<p>Eintragung im Handelsregister</p>
|
||||
<p>Registergericht: Amtsgericht [Stadt]</p>
|
||||
<p>Registernummer: HRB [Nummer]</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Umsatzsteuer-ID -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-orange-500/10 to-yellow-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:receipt-text"
|
||||
class="w-6 h-6 text-orange-600 dark:text-orange-500"
|
||||
/>
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> Umsatzsteuer-ID </Heading>
|
||||
</div>
|
||||
|
||||
<!-- Umsatzsteuer-ID -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-orange-500/10 to-yellow-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:receipt-text" class="w-6 h-6 text-orange-600 dark:text-orange-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
Umsatzsteuer-ID
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</p>
|
||||
<p class="font-mono">DE [Umsatzsteuer-ID]</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</p>
|
||||
<p class="font-mono">DE [Umsatzsteuer-ID]</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Verantwortlich für den Inhalt -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:shield-account"
|
||||
class="w-6 h-6 text-indigo-600 dark:text-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> Verantwortlich für den Inhalt </Heading>
|
||||
</div>
|
||||
|
||||
<!-- Verantwortlich für den Inhalt -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:shield-account" class="w-6 h-6 text-indigo-600 dark:text-indigo-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
Verantwortlich für den Inhalt
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Verantwortlich nach § 55 Abs. 2 RStV:</p>
|
||||
<p class="mt-2">[Name]</p>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Musterstadt</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Verantwortlich nach § 55 Abs. 2 RStV:</p>
|
||||
<p class="mt-2">[Name]</p>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Musterstadt</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- EU-Streitschlichtung -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon name="mdi:gavel" class="w-6 h-6 text-blue-600 dark:text-blue-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> EU-Streitschlichtung </Heading>
|
||||
</div>
|
||||
|
||||
<!-- EU-Streitschlichtung -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:gavel" class="w-6 h-6 text-blue-600 dark:text-blue-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
EU-Streitschlichtung
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>
|
||||
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS)
|
||||
bereit:
|
||||
</p>
|
||||
<a
|
||||
href="https://ec.europa.eu/consumers/odr/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-mana-blue hover:underline block mt-2"
|
||||
>
|
||||
https://ec.europa.eu/consumers/odr/
|
||||
</a>
|
||||
<p class="mt-4">Unsere E-Mail-Adresse finden Sie oben im Impressum.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:</p>
|
||||
<a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer" class="text-mana-blue hover:underline block mt-2">
|
||||
https://ec.europa.eu/consumers/odr/
|
||||
</a>
|
||||
<p class="mt-4">Unsere E-Mail-Adresse finden Sie oben im Impressum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Verbraucherstreitbeilegung -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div
|
||||
class="w-12 h-12 bg-gradient-to-br from-gray-500/10 to-slate-500/10 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="mdi:scale-balance"
|
||||
class="w-6 h-6 text-gray-600 dark:text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0"> Verbraucherstreitbeilegung </Heading>
|
||||
</div>
|
||||
|
||||
<!-- Verbraucherstreitbeilegung -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-gray-500/10 to-slate-500/10 rounded-xl flex items-center justify-center">
|
||||
<Icon name="mdi:scale-balance" class="w-6 h-6 text-gray-600 dark:text-gray-500" />
|
||||
</div>
|
||||
<Heading as="h2" size="3" class="!mb-0">
|
||||
Verbraucherstreitbeilegung
|
||||
</Heading>
|
||||
</div>
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>
|
||||
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
|
||||
Verbraucherschlichtungsstelle teilzunehmen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-15 text-gray-700 dark:text-gray-300">
|
||||
<p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Haftungshinweis -->
|
||||
<div class="pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<Heading as="h2" size="3" class="mb-6"> Haftung für Inhalte </Heading>
|
||||
|
||||
<!-- Haftungshinweis -->
|
||||
<div class="pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||
<Heading as="h2" size="3" class="mb-6">
|
||||
Haftung für Inhalte
|
||||
</Heading>
|
||||
<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
|
||||
<p>
|
||||
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen
|
||||
Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind
|
||||
wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder
|
||||
gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen,
|
||||
die auf eine rechtswidrige Tätigkeit hinweisen.
|
||||
</p>
|
||||
<p>
|
||||
Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach
|
||||
den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung
|
||||
ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung
|
||||
möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir
|
||||
diese Inhalte umgehend entfernen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
|
||||
<p>
|
||||
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
|
||||
</p>
|
||||
<p>
|
||||
Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Haftung für Links -->
|
||||
<div class="pt-8 border-t border-gray-200 dark:border-gray-700 mt-8">
|
||||
<Heading as="h2" size="3" class="mb-6"> Haftung für Links </Heading>
|
||||
|
||||
<!-- Haftung für Links -->
|
||||
<div class="pt-8 border-t border-gray-200 dark:border-gray-700 mt-8">
|
||||
<Heading as="h2" size="3" class="mb-6">
|
||||
Haftung für Links
|
||||
</Heading>
|
||||
<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
|
||||
<p>
|
||||
Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir
|
||||
keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine
|
||||
Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige
|
||||
Anbieter oder Betreiber der Seiten verantwortlich.
|
||||
</p>
|
||||
<p>
|
||||
Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche
|
||||
Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der
|
||||
Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten
|
||||
Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht
|
||||
zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links
|
||||
umgehend entfernen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
|
||||
<p>
|
||||
Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.
|
||||
</p>
|
||||
<p>
|
||||
Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Urheberrecht -->
|
||||
<div class="pt-8 border-t border-gray-200 dark:border-gray-700 mt-8">
|
||||
<Heading as="h2" size="3" class="mb-6"> Urheberrecht </Heading>
|
||||
|
||||
<!-- Urheberrecht -->
|
||||
<div class="pt-8 border-t border-gray-200 dark:border-gray-700 mt-8">
|
||||
<Heading as="h2" size="3" class="mb-6">
|
||||
Urheberrecht
|
||||
</Heading>
|
||||
<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
|
||||
<p>
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten
|
||||
unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung,
|
||||
Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes
|
||||
bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
|
||||
</p>
|
||||
<p>
|
||||
Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen
|
||||
Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber
|
||||
erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden
|
||||
Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine
|
||||
Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden
|
||||
Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte
|
||||
umgehend entfernen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
|
||||
<p>
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
|
||||
</p>
|
||||
<p>
|
||||
Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Links -->
|
||||
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<a href="/privacy" class="group">
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<Icon name="mdi:shield-check" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="base" weight="semibold">Datenschutz-Center</Text>
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
DSGVO, Sicherheit & KI-Ethik
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
<a href="/legal/datenschutz" class="group">
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<Icon name="mdi:file-document" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="base" weight="semibold">Datenschutzerklärung</Text>
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Vollständige Datenschutzerklärung
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<a href="/privacy" class="group">
|
||||
<div class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<Icon name="mdi:shield-check" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="base" weight="semibold">Datenschutz-Center</Text>
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
DSGVO, Sicherheit & KI-Ethik
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/legal/agb" class="group">
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<Icon name="mdi:scale-balance" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="base" weight="semibold">AGB</Text>
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Allgemeine Geschäftsbedingungen
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<a href="/legal/datenschutz" class="group">
|
||||
<div class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<Icon name="mdi:file-document" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="base" weight="semibold">Datenschutzerklärung</Text>
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Vollständige Datenschutzerklärung
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/legal/agb" class="group">
|
||||
<div class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<Icon name="mdi:scale-balance" class="w-5 h-5 text-mana-blue" />
|
||||
<Text size="base" weight="semibold">AGB</Text>
|
||||
</div>
|
||||
<Text size="sm" class="text-gray-600 dark:text-gray-400">
|
||||
Allgemeine Geschäftsbedingungen
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -11,11 +11,11 @@ import Card from '../../components/ui/Card.astro';
|
|||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const legalEntries = await getCollection('legal');
|
||||
return legalEntries.map(entry => ({
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
}));
|
||||
const legalEntries = await getCollection('legal');
|
||||
return legalEntries.map((entry) => ({
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
|
|
@ -24,115 +24,125 @@ const { Content } = await entry.render();
|
|||
// Get other legal documents
|
||||
const allLegalDocs = await getCollection('legal');
|
||||
const otherDocs = allLegalDocs
|
||||
.filter(doc => doc.slug !== entry.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
.filter((doc) => doc.slug !== entry.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
|
||||
// Format date
|
||||
const lastUpdated = new Date(entry.data.lastUpdated).toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
---
|
||||
|
||||
<Layout title={`${entry.data.title} | Mana`}>
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-32">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-12">
|
||||
<Heading as="h1" size="1" class="mb-4">
|
||||
{entry.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" color="muted" class="mb-6">
|
||||
{entry.data.description}
|
||||
</Text>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Stand: {lastUpdated}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
{otherDocs.length > 0 && (
|
||||
<Card variant="bordered" padding="large" class="mt-16">
|
||||
<Heading as="h3" size="5" class="mb-4">
|
||||
Weitere rechtliche Dokumente
|
||||
</Heading>
|
||||
|
||||
<div class="space-y-3">
|
||||
{otherDocs.map(doc => (
|
||||
<a
|
||||
href={`/legal/${doc.slug}`}
|
||||
class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
|
||||
>
|
||||
<div>
|
||||
<Text weight="semibold" class="group-hover:text-mana-blue transition-colors">
|
||||
{doc.data.title}
|
||||
</Text>
|
||||
<Text size="sm" color="muted">
|
||||
{doc.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
<Icon name="mdi:arrow-right" class="w-5 h-5 text-gray-400 group-hover:text-mana-blue transition-colors" />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<!-- Contact -->
|
||||
<Card variant="elevated" padding="large" class="mt-8 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
|
||||
<div class="text-center">
|
||||
<Heading as="h3" size="5" class="mb-3">
|
||||
Haben Sie Fragen?
|
||||
</Heading>
|
||||
<Text color="muted" class="mb-6">
|
||||
Unser Rechtsabteilung steht Ihnen gerne zur Verfügung.
|
||||
</Text>
|
||||
<a href="mailto:legal@mana.ai" class="inline-flex items-center gap-2 text-mana-blue hover:underline">
|
||||
<Icon name="mdi:email" class="w-5 h-5" />
|
||||
legal@mana.ai
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-32">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-12">
|
||||
<Heading as="h1" size="1" class="mb-4">
|
||||
{entry.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" color="muted" class="mb-6">
|
||||
{entry.data.description}
|
||||
</Text>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Stand: {lastUpdated}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
{
|
||||
otherDocs.length > 0 && (
|
||||
<Card variant="bordered" padding="large" class="mt-16">
|
||||
<Heading as="h3" size="5" class="mb-4">
|
||||
Weitere rechtliche Dokumente
|
||||
</Heading>
|
||||
|
||||
<div class="space-y-3">
|
||||
{otherDocs.map((doc) => (
|
||||
<a
|
||||
href={`/legal/${doc.slug}`}
|
||||
class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
|
||||
>
|
||||
<div>
|
||||
<Text weight="semibold" class="group-hover:text-mana-blue transition-colors">
|
||||
{doc.data.title}
|
||||
</Text>
|
||||
<Text size="sm" color="muted">
|
||||
{doc.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
class="w-5 h-5 text-gray-400 group-hover:text-mana-blue transition-colors"
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- Contact -->
|
||||
<Card
|
||||
variant="elevated"
|
||||
padding="large"
|
||||
class="mt-8 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20"
|
||||
>
|
||||
<div class="text-center">
|
||||
<Heading as="h3" size="5" class="mb-3"> Haben Sie Fragen? </Heading>
|
||||
<Text color="muted" class="mb-6">
|
||||
Unser Rechtsabteilung steht Ihnen gerne zur Verfügung.
|
||||
</Text>
|
||||
<a
|
||||
href="mailto:legal@mana.ai"
|
||||
class="inline-flex items-center gap-2 text-mana-blue hover:underline"
|
||||
>
|
||||
<Icon name="mdi:email" class="w-5 h-5" />
|
||||
legal@mana.ai
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</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>
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -17,147 +17,163 @@ const sortedDocs = legalDocs.sort((a, b) => a.data.order - b.data.order);
|
|||
---
|
||||
|
||||
<Layout title="Rechtliches - AGB, Datenschutz & mehr | Mana">
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<HeroSection
|
||||
title="Rechtliche Informationen"
|
||||
subtitle="Transparenz ist uns wichtig. Hier finden Sie alle rechtlichen Dokumente und Informationen zu unseren Services."
|
||||
background="gradient"
|
||||
minHeight="medium"
|
||||
icon="mdi:scale-balance"
|
||||
containerClass=""
|
||||
debug={true}
|
||||
/>
|
||||
|
||||
<!-- Legal Documents -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Grid cols={1} gap="large" class="max-w-4xl mx-auto">
|
||||
{sortedDocs.map((doc) => (
|
||||
<a href={`/legal/${doc.slug}`} class="block group">
|
||||
<Card variant="bordered" padding="large" class="hover:border-mana-blue transition-all hover:shadow-lg">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<Icon name="mdi:file-document" class="w-6 h-6 text-gray-400" />
|
||||
<Heading as="h3" size="4" class="group-hover:text-mana-blue transition-colors">
|
||||
{doc.data.title}
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
<Text color="muted" class="mb-4">
|
||||
{doc.data.description}
|
||||
</Text>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>
|
||||
Stand: {new Date(doc.data.lastUpdated).toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Icon name="mdi:arrow-right" class="w-6 h-6 text-gray-400 group-hover:text-mana-blue transition-colors flex-shrink-0" />
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Additional Resources -->
|
||||
<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900">
|
||||
<Container>
|
||||
<div class="text-center mb-12">
|
||||
<Heading as="h2" size="3" class="mb-4">
|
||||
Weitere wichtige Informationen
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-4xl mx-auto">
|
||||
<Card variant="bordered" padding="large" class="text-center">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="mdi:shield-check" class="w-6 h-6" />
|
||||
</div>
|
||||
<Heading as="h3" size="6" class="mb-2">
|
||||
Datenschutz-Center
|
||||
</Heading>
|
||||
<Text size="sm" color="muted" class="mb-4">
|
||||
Detaillierte Informationen zu DSGVO und KI-Ethik
|
||||
</Text>
|
||||
<a href="/privacy" class="text-mana-blue hover:underline text-sm font-medium">
|
||||
Zum Datenschutz-Center →
|
||||
</a>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="large" class="text-center">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="mdi:headset" class="w-6 h-6" />
|
||||
</div>
|
||||
<Heading as="h3" size="6" class="mb-2">
|
||||
Support
|
||||
</Heading>
|
||||
<Text size="sm" color="muted" class="mb-4">
|
||||
Hilfe und Antworten auf Ihre Fragen
|
||||
</Text>
|
||||
<a href="/support" class="text-mana-blue hover:underline text-sm font-medium">
|
||||
Zum Support →
|
||||
</a>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="large" class="text-center">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="mdi:information" class="w-6 h-6" />
|
||||
</div>
|
||||
<Heading as="h3" size="6" class="mb-2">
|
||||
Impressum
|
||||
</Heading>
|
||||
<Text size="sm" color="muted" class="mb-4">
|
||||
Angaben gemäß § 5 TMG
|
||||
</Text>
|
||||
<a href="/impressum" class="text-mana-blue hover:underline text-sm font-medium">
|
||||
Zum Impressum →
|
||||
</a>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Contact -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Card variant="elevated" padding="xlarge" class="max-w-4xl mx-auto 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:email" class="w-12 h-12 text-mana-blue mx-auto mb-4" />
|
||||
|
||||
<Heading as="h2" size="3" class="mb-4">
|
||||
Rechtliche Fragen?
|
||||
</Heading>
|
||||
|
||||
<Text size="lg" color="muted" class="mb-6 max-w-2xl mx-auto">
|
||||
Unsere Rechtsabteilung steht Ihnen für alle Fragen zu unseren
|
||||
Bedingungen und rechtlichen Dokumenten zur Verfügung.
|
||||
</Text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="mailto:legal@mana.ai" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-mana-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<Icon name="mdi:email" class="w-5 h-5" />
|
||||
legal@mana.ai
|
||||
</a>
|
||||
<a href="tel:+4912345678" class="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:border-mana-blue transition-colors">
|
||||
<Icon name="mdi:phone" class="w-5 h-5" />
|
||||
+49 123 456 78
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<HeroSection
|
||||
title="Rechtliche Informationen"
|
||||
subtitle="Transparenz ist uns wichtig. Hier finden Sie alle rechtlichen Dokumente und Informationen zu unseren Services."
|
||||
background="gradient"
|
||||
minHeight="medium"
|
||||
icon="mdi:scale-balance"
|
||||
containerClass=""
|
||||
debug={true}
|
||||
/>
|
||||
|
||||
<!-- Legal Documents -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Grid cols={1} gap="large" class="max-w-4xl mx-auto">
|
||||
{
|
||||
sortedDocs.map((doc) => (
|
||||
<a href={`/legal/${doc.slug}`} class="block group">
|
||||
<Card
|
||||
variant="bordered"
|
||||
padding="large"
|
||||
class="hover:border-mana-blue transition-all hover:shadow-lg"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<Icon name="mdi:file-document" class="w-6 h-6 text-gray-400" />
|
||||
<Heading
|
||||
as="h3"
|
||||
size="4"
|
||||
class="group-hover:text-mana-blue transition-colors"
|
||||
>
|
||||
{doc.data.title}
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
<Text color="muted" class="mb-4">
|
||||
{doc.data.description}
|
||||
</Text>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>
|
||||
Stand:{' '}
|
||||
{new Date(doc.data.lastUpdated).toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
class="w-6 h-6 text-gray-400 group-hover:text-mana-blue transition-colors flex-shrink-0"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Additional Resources -->
|
||||
<Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900">
|
||||
<Container>
|
||||
<div class="text-center mb-12">
|
||||
<Heading as="h2" size="3" class="mb-4"> Weitere wichtige Informationen </Heading>
|
||||
</div>
|
||||
|
||||
<Grid cols={3} gap="large" class="max-w-4xl mx-auto">
|
||||
<Card variant="bordered" padding="large" class="text-center">
|
||||
<div
|
||||
class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<Icon name="mdi:shield-check" class="w-6 h-6" />
|
||||
</div>
|
||||
<Heading as="h3" size="6" class="mb-2"> Datenschutz-Center </Heading>
|
||||
<Text size="sm" color="muted" class="mb-4">
|
||||
Detaillierte Informationen zu DSGVO und KI-Ethik
|
||||
</Text>
|
||||
<a href="/privacy" class="text-mana-blue hover:underline text-sm font-medium">
|
||||
Zum Datenschutz-Center →
|
||||
</a>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="large" class="text-center">
|
||||
<div
|
||||
class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<Icon name="mdi:headset" class="w-6 h-6" />
|
||||
</div>
|
||||
<Heading as="h3" size="6" class="mb-2"> Support </Heading>
|
||||
<Text size="sm" color="muted" class="mb-4"> Hilfe und Antworten auf Ihre Fragen </Text>
|
||||
<a href="/support" class="text-mana-blue hover:underline text-sm font-medium">
|
||||
Zum Support →
|
||||
</a>
|
||||
</Card>
|
||||
|
||||
<Card variant="bordered" padding="large" class="text-center">
|
||||
<div
|
||||
class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4"
|
||||
>
|
||||
<Icon name="mdi:information" class="w-6 h-6" />
|
||||
</div>
|
||||
<Heading as="h3" size="6" class="mb-2"> Impressum </Heading>
|
||||
<Text size="sm" color="muted" class="mb-4"> Angaben gemäß § 5 TMG </Text>
|
||||
<a href="/impressum" class="text-mana-blue hover:underline text-sm font-medium">
|
||||
Zum Impressum →
|
||||
</a>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Contact -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Card
|
||||
variant="elevated"
|
||||
padding="xlarge"
|
||||
class="max-w-4xl mx-auto 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:email" class="w-12 h-12 text-mana-blue mx-auto mb-4" />
|
||||
|
||||
<Heading as="h2" size="3" class="mb-4"> Rechtliche Fragen? </Heading>
|
||||
|
||||
<Text size="lg" color="muted" class="mb-6 max-w-2xl mx-auto">
|
||||
Unsere Rechtsabteilung steht Ihnen für alle Fragen zu unseren Bedingungen und
|
||||
rechtlichen Dokumenten zur Verfügung.
|
||||
</Text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="mailto:legal@mana.ai"
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-mana-blue text-white rounded-lg hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
<Icon name="mdi:email" class="w-5 h-5" />
|
||||
legal@mana.ai
|
||||
</a>
|
||||
<a
|
||||
href="tel:+4912345678"
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:border-mana-blue transition-colors"
|
||||
>
|
||||
<Icon name="mdi:phone" class="w-5 h-5" />
|
||||
+49 123 456 78
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ import Button from '../../components/ui/Button.astro';
|
|||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const missionEntries = await getCollection('mission');
|
||||
const germanMissionEntries = missionEntries.filter(entry => entry.slug.startsWith('de/'));
|
||||
return germanMissionEntries.map(entry => ({
|
||||
params: { slug: entry.slug.replace('de/', '') },
|
||||
props: { entry },
|
||||
}));
|
||||
const missionEntries = await getCollection('mission');
|
||||
const germanMissionEntries = missionEntries.filter((entry) => entry.slug.startsWith('de/'));
|
||||
return germanMissionEntries.map((entry) => ({
|
||||
params: { slug: entry.slug.replace('de/', '') },
|
||||
props: { entry },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
|
|
@ -25,133 +25,164 @@ const { Content } = await entry.render();
|
|||
|
||||
// Get other mission articles
|
||||
const allMissionArticles = await getCollection('mission');
|
||||
const germanMissionArticles = allMissionArticles.filter(article => article.slug.startsWith('de/'));
|
||||
const germanMissionArticles = allMissionArticles.filter((article) =>
|
||||
article.slug.startsWith('de/')
|
||||
);
|
||||
const otherArticles = germanMissionArticles
|
||||
.filter(article => article.slug !== entry.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
.filter((article) => article.slug !== entry.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
|
||||
const categoryIcons = {
|
||||
vision: 'mdi:eye-outline',
|
||||
values: 'mdi:heart-outline',
|
||||
approach: 'mdi:lightbulb-outline',
|
||||
team: 'mdi:account-group-outline',
|
||||
future: 'mdi:rocket-launch-outline',
|
||||
vision: 'mdi:eye-outline',
|
||||
values: 'mdi:heart-outline',
|
||||
approach: 'mdi:lightbulb-outline',
|
||||
team: 'mdi:account-group-outline',
|
||||
future: 'mdi:rocket-launch-outline',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title={`${entry.data.title} | Mana`}>
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-32">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Back Link -->
|
||||
<a href="/mission" class="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-mana-blue transition-colors mb-8">
|
||||
<Icon name="mdi:arrow-left" class="w-5 h-5" />
|
||||
<span>Zurück zur Übersicht</span>
|
||||
</a>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-12 text-center">
|
||||
<div class="w-20 h-20 bg-mana-blue/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<Icon name={categoryIcons[entry.data.category]} class="w-10 h-10 text-mana-blue" />
|
||||
</div>
|
||||
|
||||
<Heading as="h1" size="1" class="mb-4">
|
||||
{entry.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" color="muted" class="max-w-2xl mx-auto">
|
||||
{entry.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none mb-16">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- Other Articles -->
|
||||
{otherArticles.length > 0 && (
|
||||
<div class="border-t border-gray-200 dark:border-gray-700 pt-12">
|
||||
<Heading as="h3" size="4" class="mb-6">
|
||||
Weitere Artikel
|
||||
</Heading>
|
||||
|
||||
<div class="space-y-4">
|
||||
{otherArticles.map(article => (
|
||||
<a href={`/mission/${article.slug.replace('de/', '')}`} class="block group">
|
||||
<Card variant="bordered" padding="large" class="hover:border-mana-blue transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center group-hover:bg-mana-blue/10 transition-colors">
|
||||
<Icon name={categoryIcons[article.data.category]} class="w-6 h-6 text-mana-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<Text weight="semibold" class="group-hover:text-mana-blue transition-colors">
|
||||
{article.data.title}
|
||||
</Text>
|
||||
<Text size="sm" color="muted">
|
||||
{article.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Icon name="mdi:arrow-right" class="w-5 h-5 text-gray-400 group-hover:text-mana-blue transition-colors" />
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- CTA -->
|
||||
<Card variant="elevated" padding="xlarge" class="mt-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">
|
||||
<Heading as="h3" size="4" class="mb-4">
|
||||
Bereit, Teil unserer Mission zu werden?
|
||||
</Heading>
|
||||
<Text color="muted" class="mb-6 max-w-xl mx-auto">
|
||||
Starten Sie noch heute mit Mana und erleben Sie die Zukunft der KI-Nutzung.
|
||||
</Text>
|
||||
<Button href="/start" variant="primary" size="large" class="bg-mana-orange hover:bg-orange-600">
|
||||
Kostenlos testen
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-32">
|
||||
<Container>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Back Link -->
|
||||
<a
|
||||
href="/mission"
|
||||
class="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-mana-blue transition-colors mb-8"
|
||||
>
|
||||
<Icon name="mdi:arrow-left" class="w-5 h-5" />
|
||||
<span>Zurück zur Übersicht</span>
|
||||
</a>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-12 text-center">
|
||||
<div
|
||||
class="w-20 h-20 bg-mana-blue/10 rounded-2xl flex items-center justify-center mx-auto mb-6"
|
||||
>
|
||||
<Icon name={categoryIcons[entry.data.category]} class="w-10 h-10 text-mana-blue" />
|
||||
</div>
|
||||
|
||||
<Heading as="h1" size="1" class="mb-4">
|
||||
{entry.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" color="muted" class="max-w-2xl mx-auto">
|
||||
{entry.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none mb-16">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- Other Articles -->
|
||||
{
|
||||
otherArticles.length > 0 && (
|
||||
<div class="border-t border-gray-200 dark:border-gray-700 pt-12">
|
||||
<Heading as="h3" size="4" class="mb-6">
|
||||
Weitere Artikel
|
||||
</Heading>
|
||||
|
||||
<div class="space-y-4">
|
||||
{otherArticles.map((article) => (
|
||||
<a href={`/mission/${article.slug.replace('de/', '')}`} class="block group">
|
||||
<Card
|
||||
variant="bordered"
|
||||
padding="large"
|
||||
class="hover:border-mana-blue transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center group-hover:bg-mana-blue/10 transition-colors">
|
||||
<Icon
|
||||
name={categoryIcons[article.data.category]}
|
||||
class="w-6 h-6 text-mana-blue"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text
|
||||
weight="semibold"
|
||||
class="group-hover:text-mana-blue transition-colors"
|
||||
>
|
||||
{article.data.title}
|
||||
</Text>
|
||||
<Text size="sm" color="muted">
|
||||
{article.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
class="w-5 h-5 text-gray-400 group-hover:text-mana-blue transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- CTA -->
|
||||
<Card
|
||||
variant="elevated"
|
||||
padding="xlarge"
|
||||
class="mt-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">
|
||||
<Heading as="h3" size="4" class="mb-4">
|
||||
Bereit, Teil unserer Mission zu werden?
|
||||
</Heading>
|
||||
<Text color="muted" class="mb-6 max-w-xl mx-auto">
|
||||
Starten Sie noch heute mit Mana und erleben Sie die Zukunft der KI-Nutzung.
|
||||
</Text>
|
||||
<Button
|
||||
href="/start"
|
||||
variant="primary"
|
||||
size="large"
|
||||
class="bg-mana-orange hover:bg-orange-600"
|
||||
>
|
||||
Kostenlos testen
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</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;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
@apply border-l-4 border-mana-blue pl-4 italic my-6;
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
@apply border-l-4 border-mana-blue pl-4 italic my-6;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,103 +16,125 @@ import { getLangFromUrl } from '../../lib/i18n/config';
|
|||
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const missionArticles = await getCollection('mission', ({ id }) => {
|
||||
return id.startsWith(`${lang}/`);
|
||||
return id.startsWith(`${lang}/`);
|
||||
});
|
||||
const sortedArticles = missionArticles.sort((a, b) => a.data.order - b.data.order);
|
||||
|
||||
const categoryIcons = {
|
||||
vision: 'mdi:eye-outline',
|
||||
values: 'mdi:heart-outline',
|
||||
approach: 'mdi:lightbulb-outline',
|
||||
team: 'mdi:account-group-outline',
|
||||
future: 'mdi:rocket-launch-outline',
|
||||
vision: 'mdi:eye-outline',
|
||||
values: 'mdi:heart-outline',
|
||||
approach: 'mdi:lightbulb-outline',
|
||||
team: 'mdi:account-group-outline',
|
||||
future: 'mdi:rocket-launch-outline',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title="Unsere Mission | Mana">
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<HeroSection
|
||||
title="Unsere Mission"
|
||||
subtitle="Wir demokratisieren den Zugang zu KI-Technologie. Erfahren Sie mehr über unsere Vision, Werte und die Menschen, die Mana zu dem machen, was es ist."
|
||||
background="gradient"
|
||||
minHeight="large"
|
||||
sideImage={true}
|
||||
imageSrc="/images/Mana_Sea_Sun_Manacore_AI_Credits.jpg"
|
||||
imageAlt="Mana Nautilus - Evolution der KI-Nutzung"
|
||||
containerClass=""
|
||||
debug={false}
|
||||
/>
|
||||
|
||||
<!-- Mission Articles -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Grid cols={1} gap="xlarge" class="max-w-5xl mx-auto">
|
||||
{sortedArticles.map((article, index) => (
|
||||
<a href={`/mission/${article.slug}`} class="block group">
|
||||
<Card variant={article.data.featured ? "elevated" : "bordered"} padding="xlarge"
|
||||
class="hover:border-mana-blue transition-all hover:shadow-xl">
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
{/* Icon */}
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center group-hover:bg-mana-blue/10 transition-colors">
|
||||
<Icon name={categoryIcons[article.data.category]} class="w-10 h-10 text-mana-blue" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div class="flex-1">
|
||||
<Heading as="h2" size="3" class="mb-3 group-hover:text-mana-blue transition-colors">
|
||||
{article.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="lg" color="muted" class="mb-4">
|
||||
{article.data.description}
|
||||
</Text>
|
||||
|
||||
{/* Read more link */}
|
||||
<div class="flex items-center gap-2 text-mana-blue font-medium">
|
||||
<span>Mehr erfahren</span>
|
||||
<Icon name="mdi:arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<Section spacing="xlarge" class="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
|
||||
<Container>
|
||||
<Card variant="elevated" padding="xlarge" class="max-w-4xl mx-auto text-center">
|
||||
<Icon name="mdi:handshake" class="w-16 h-16 text-mana-blue mx-auto mb-6" />
|
||||
|
||||
<Heading as="h2" size="2" class="mb-4">
|
||||
Werden Sie Teil unserer Mission
|
||||
</Heading>
|
||||
|
||||
<Text size="lg" class="mb-8 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
Ob als Kunde, Partner oder Teammitglied - es gibt viele Wege,
|
||||
Teil der Mana-Revolution zu werden.
|
||||
</Text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/start" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-mana-orange text-white rounded-lg hover:bg-orange-600 transition-colors">
|
||||
<Icon name="mdi:rocket-launch" class="w-5 h-5" />
|
||||
Jetzt starten
|
||||
</a>
|
||||
<a href="/careers" class="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:border-mana-blue transition-colors">
|
||||
<Icon name="mdi:briefcase" class="w-5 h-5" />
|
||||
Karriere bei Mana
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
<Navbar />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<HeroSection
|
||||
title="Unsere Mission"
|
||||
subtitle="Wir demokratisieren den Zugang zu KI-Technologie. Erfahren Sie mehr über unsere Vision, Werte und die Menschen, die Mana zu dem machen, was es ist."
|
||||
background="gradient"
|
||||
minHeight="large"
|
||||
sideImage={true}
|
||||
imageSrc="/images/Mana_Sea_Sun_Manacore_AI_Credits.jpg"
|
||||
imageAlt="Mana Nautilus - Evolution der KI-Nutzung"
|
||||
containerClass=""
|
||||
debug={false}
|
||||
/>
|
||||
|
||||
<!-- Mission Articles -->
|
||||
<Section spacing="xlarge">
|
||||
<Container>
|
||||
<Grid cols={1} gap="xlarge" class="max-w-5xl mx-auto">
|
||||
{
|
||||
sortedArticles.map((article, index) => (
|
||||
<a href={`/mission/${article.slug}`} class="block group">
|
||||
<Card
|
||||
variant={article.data.featured ? 'elevated' : 'bordered'}
|
||||
padding="xlarge"
|
||||
class="hover:border-mana-blue transition-all hover:shadow-xl"
|
||||
>
|
||||
<div class="flex flex-col md:flex-row gap-8">
|
||||
{/* Icon */}
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center group-hover:bg-mana-blue/10 transition-colors">
|
||||
<Icon
|
||||
name={categoryIcons[article.data.category]}
|
||||
class="w-10 h-10 text-mana-blue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div class="flex-1">
|
||||
<Heading
|
||||
as="h2"
|
||||
size="3"
|
||||
class="mb-3 group-hover:text-mana-blue transition-colors"
|
||||
>
|
||||
{article.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="lg" color="muted" class="mb-4">
|
||||
{article.data.description}
|
||||
</Text>
|
||||
|
||||
{/* Read more link */}
|
||||
<div class="flex items-center gap-2 text-mana-blue font-medium">
|
||||
<span>Mehr erfahren</span>
|
||||
<Icon
|
||||
name="mdi:arrow-right"
|
||||
class="w-5 h-5 group-hover:translate-x-1 transition-transform"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- Call to Action -->
|
||||
<Section
|
||||
spacing="xlarge"
|
||||
class="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20"
|
||||
>
|
||||
<Container>
|
||||
<Card variant="elevated" padding="xlarge" class="max-w-4xl mx-auto text-center">
|
||||
<Icon name="mdi:handshake" class="w-16 h-16 text-mana-blue mx-auto mb-6" />
|
||||
|
||||
<Heading as="h2" size="2" class="mb-4"> Werden Sie Teil unserer Mission </Heading>
|
||||
|
||||
<Text size="lg" class="mb-8 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
||||
Ob als Kunde, Partner oder Teammitglied - es gibt viele Wege, Teil der Mana-Revolution zu
|
||||
werden.
|
||||
</Text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="/start"
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-mana-orange text-white rounded-lg hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
<Icon name="mdi:rocket-launch" class="w-5 h-5" />
|
||||
Jetzt starten
|
||||
</a>
|
||||
<a
|
||||
href="/careers"
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:border-mana-blue transition-colors"
|
||||
>
|
||||
<Icon name="mdi:briefcase" class="w-5 h-5" />
|
||||
Karriere bei Mana
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -11,11 +11,11 @@ import Button from '../../components/ui/Button.astro';
|
|||
import Card from '../../components/ui/Card.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const privacyEntries = await getCollection('privacy');
|
||||
return privacyEntries.map(entry => ({
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
}));
|
||||
const privacyEntries = await getCollection('privacy');
|
||||
return privacyEntries.map((entry) => ({
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
|
|
@ -24,204 +24,221 @@ const { Content } = await entry.render();
|
|||
// Get other privacy articles for sidebar
|
||||
const allPrivacyArticles = await getCollection('privacy');
|
||||
const otherArticles = allPrivacyArticles
|
||||
.filter(article => article.slug !== entry.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
.filter((article) => article.slug !== entry.slug)
|
||||
.sort((a, b) => a.data.order - b.data.order);
|
||||
|
||||
// Format date
|
||||
const lastUpdated = new Date(entry.data.lastUpdated).toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
// Get category color
|
||||
const categoryColors = {
|
||||
'compliance': 'blue',
|
||||
'security': 'green',
|
||||
'ai-ethics': 'purple',
|
||||
'transparency': 'orange'
|
||||
compliance: 'blue',
|
||||
security: 'green',
|
||||
'ai-ethics': 'purple',
|
||||
transparency: 'orange',
|
||||
};
|
||||
const categoryColor = categoryColors[entry.data.category] || 'gray';
|
||||
---
|
||||
|
||||
<Layout title={`${entry.data.title} | Mana Datenschutz`}>
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-32">
|
||||
<Container>
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:col-span-3">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-${categoryColor}-100 dark:bg-${categoryColor}-900/30 text-${categoryColor}-700 dark:text-${categoryColor}-300`}>
|
||||
{entry.data.category === 'compliance' && 'Compliance'}
|
||||
{entry.data.category === 'security' && 'Sicherheit'}
|
||||
{entry.data.category === 'ai-ethics' && 'KI-Ethik'}
|
||||
{entry.data.category === 'transparency' && 'Transparenz'}
|
||||
</span>
|
||||
{entry.data.featured && (
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300">
|
||||
⭐ Empfohlen
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Heading as="h1" size="1" class="mb-4">
|
||||
{entry.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" color="muted" class="mb-6">
|
||||
{entry.data.description}
|
||||
</Text>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Zuletzt aktualisiert: {lastUpdated}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
{entry.data.tags && entry.data.tags.length > 0 && (
|
||||
<div class="flex flex-wrap gap-2 mb-8">
|
||||
{entry.data.tags.map((tag) => (
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Article Content -->
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<Card variant="elevated" padding="large" class="mt-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">
|
||||
<Heading as="h3" size="4" class="mb-3">
|
||||
Haben Sie Fragen zum Datenschutz?
|
||||
</Heading>
|
||||
<Text color="muted" class="mb-6">
|
||||
Unser Datenschutzteam steht Ihnen gerne zur Verfügung.
|
||||
</Text>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button href="mailto:datenschutz@mana.ai" variant="primary">
|
||||
E-Mail schreiben
|
||||
</Button>
|
||||
<Button href="/kontakt" variant="outline">
|
||||
Kontaktformular
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<!-- Other Articles -->
|
||||
<Card variant="bordered" padding="medium" class="mb-6">
|
||||
<Heading as="h3" size="6" class="mb-4">
|
||||
Weitere Datenschutz-Themen
|
||||
</Heading>
|
||||
<div class="space-y-3">
|
||||
{otherArticles.map((article) => (
|
||||
<a
|
||||
href={`/privacy/${article.slug}`}
|
||||
class="block group"
|
||||
>
|
||||
<div class="p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||
<Text size="sm" weight="semibold" class="mb-1 group-hover:text-mana-blue transition-colors">
|
||||
{article.data.title}
|
||||
</Text>
|
||||
<Text size="xs" color="muted" class="line-clamp-2">
|
||||
{article.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<Card variant="bordered" padding="medium">
|
||||
<Heading as="h3" size="6" class="mb-4">
|
||||
Schnellzugriff
|
||||
</Heading>
|
||||
<div class="space-y-2">
|
||||
<a href="/datenschutz" class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors">
|
||||
<span>📄</span> Datenschutzerklärung
|
||||
</a>
|
||||
<a href="/legal/agb" class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors">
|
||||
<span>📋</span> AGB
|
||||
</a>
|
||||
<a href="/impressum" class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors">
|
||||
<span>ℹ️</span> Impressum
|
||||
</a>
|
||||
<a href="/cookies" class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors">
|
||||
<span>🍪</span> Cookie-Richtlinie
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Footer />
|
||||
<Navbar />
|
||||
|
||||
<Section spacing="large" class="pt-32">
|
||||
<Container>
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<!-- Main Content -->
|
||||
<div class="lg:col-span-3">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span
|
||||
class={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-${categoryColor}-100 dark:bg-${categoryColor}-900/30 text-${categoryColor}-700 dark:text-${categoryColor}-300`}
|
||||
>
|
||||
{entry.data.category === 'compliance' && 'Compliance'}
|
||||
{entry.data.category === 'security' && 'Sicherheit'}
|
||||
{entry.data.category === 'ai-ethics' && 'KI-Ethik'}
|
||||
{entry.data.category === 'transparency' && 'Transparenz'}
|
||||
</span>
|
||||
{
|
||||
entry.data.featured && (
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300">
|
||||
⭐ Empfohlen
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<Heading as="h1" size="1" class="mb-4">
|
||||
{entry.data.title}
|
||||
</Heading>
|
||||
|
||||
<Text size="xl" color="muted" class="mb-6">
|
||||
{entry.data.description}
|
||||
</Text>
|
||||
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span>Zuletzt aktualisiert: {lastUpdated}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
{
|
||||
entry.data.tags && entry.data.tags.length > 0 && (
|
||||
<div class="flex flex-wrap gap-2 mb-8">
|
||||
{entry.data.tags.map((tag) => (
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- Article Content -->
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<Card
|
||||
variant="elevated"
|
||||
padding="large"
|
||||
class="mt-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">
|
||||
<Heading as="h3" size="4" class="mb-3"> Haben Sie Fragen zum Datenschutz? </Heading>
|
||||
<Text color="muted" class="mb-6">
|
||||
Unser Datenschutzteam steht Ihnen gerne zur Verfügung.
|
||||
</Text>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button href="mailto:datenschutz@mana.ai" variant="primary">
|
||||
E-Mail schreiben
|
||||
</Button>
|
||||
<Button href="/kontakt" variant="outline"> Kontaktformular </Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<!-- Other Articles -->
|
||||
<Card variant="bordered" padding="medium" class="mb-6">
|
||||
<Heading as="h3" size="6" class="mb-4"> Weitere Datenschutz-Themen </Heading>
|
||||
<div class="space-y-3">
|
||||
{
|
||||
otherArticles.map((article) => (
|
||||
<a href={`/privacy/${article.slug}`} class="block group">
|
||||
<div class="p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
|
||||
<Text
|
||||
size="sm"
|
||||
weight="semibold"
|
||||
class="mb-1 group-hover:text-mana-blue transition-colors"
|
||||
>
|
||||
{article.data.title}
|
||||
</Text>
|
||||
<Text size="xs" color="muted" class="line-clamp-2">
|
||||
{article.data.description}
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<Card variant="bordered" padding="medium">
|
||||
<Heading as="h3" size="6" class="mb-4"> Schnellzugriff </Heading>
|
||||
<div class="space-y-2">
|
||||
<a
|
||||
href="/datenschutz"
|
||||
class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
|
||||
>
|
||||
<span>📄</span> Datenschutzerklärung
|
||||
</a>
|
||||
<a
|
||||
href="/legal/agb"
|
||||
class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
|
||||
>
|
||||
<span>📋</span> AGB
|
||||
</a>
|
||||
<a
|
||||
href="/impressum"
|
||||
class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
|
||||
>
|
||||
<span>ℹ️</span> Impressum
|
||||
</a>
|
||||
<a
|
||||
href="/cookies"
|
||||
class="flex items-center gap-2 text-sm hover:text-mana-blue transition-colors"
|
||||
>
|
||||
<span>🍪</span> Cookie-Richtlinie
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</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 table {
|
||||
@apply w-full border-collapse mb-6;
|
||||
}
|
||||
|
||||
.prose th {
|
||||
@apply bg-gray-50 dark:bg-gray-800 font-semibold text-left p-3 border border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
|
||||
.prose td {
|
||||
@apply p-3 border border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
@apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
@apply bg-gray-900 dark:bg-gray-950 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
@apply border-l-4 border-mana-blue pl-4 italic mb-4;
|
||||
}
|
||||
|
||||
.prose hr {
|
||||
@apply my-8 border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
</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 table {
|
||||
@apply w-full border-collapse mb-6;
|
||||
}
|
||||
|
||||
.prose th {
|
||||
@apply bg-gray-50 dark:bg-gray-800 font-semibold text-left p-3 border border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
|
||||
.prose td {
|
||||
@apply p-3 border border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
|
||||
.prose code {
|
||||
@apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
@apply bg-gray-900 dark:bg-gray-950 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
@apply border-l-4 border-mana-blue pl-4 italic mb-4;
|
||||
}
|
||||
|
||||
.prose hr {
|
||||
@apply my-8 border-gray-200 dark:border-gray-700;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@components/*": ["src/components/*"],
|
||||
"@layouts/*": ["src/layouts/*"],
|
||||
"@shared/*": ["../components/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@components/*": ["src/components/*"],
|
||||
"@layouts/*": ["src/layouts/*"],
|
||||
"@shared/*": ["../components/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,58 @@
|
|||
{
|
||||
"expo": {
|
||||
"name": "manacore",
|
||||
"slug": "manacore",
|
||||
"version": "1.0.0",
|
||||
"scheme": "manacore",
|
||||
"web": {
|
||||
"bundler": "metro",
|
||||
"output": "static",
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"plugins": [
|
||||
"expo-router",
|
||||
[
|
||||
"expo-dev-launcher",
|
||||
{
|
||||
"launchMode": "most-recent"
|
||||
}
|
||||
]
|
||||
],
|
||||
"experiments": {
|
||||
"typedRoutes": true,
|
||||
"tsconfigPaths": true
|
||||
},
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"assetBundlePatterns": [
|
||||
"**/*"
|
||||
],
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.tilljs.manacore",
|
||||
"infoPlist": {
|
||||
"ITSAppUsesNonExemptEncryption": false
|
||||
}
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"package": "com.tilljs.manacore"
|
||||
},
|
||||
"extra": {
|
||||
"router": {
|
||||
"origin": false
|
||||
},
|
||||
"eas": {
|
||||
"projectId": "59ec0181-b120-4728-bf80-82623b831dda"
|
||||
}
|
||||
},
|
||||
"owner": "memoro"
|
||||
}
|
||||
"expo": {
|
||||
"name": "manacore",
|
||||
"slug": "manacore",
|
||||
"version": "1.0.0",
|
||||
"scheme": "manacore",
|
||||
"web": {
|
||||
"bundler": "metro",
|
||||
"output": "static",
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"plugins": [
|
||||
"expo-router",
|
||||
[
|
||||
"expo-dev-launcher",
|
||||
{
|
||||
"launchMode": "most-recent"
|
||||
}
|
||||
]
|
||||
],
|
||||
"experiments": {
|
||||
"typedRoutes": true,
|
||||
"tsconfigPaths": true
|
||||
},
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"assetBundlePatterns": ["**/*"],
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.tilljs.manacore",
|
||||
"infoPlist": {
|
||||
"ITSAppUsesNonExemptEncryption": false
|
||||
}
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"package": "com.tilljs.manacore"
|
||||
},
|
||||
"extra": {
|
||||
"router": {
|
||||
"origin": false
|
||||
},
|
||||
"eas": {
|
||||
"projectId": "59ec0181-b120-4728-bf80-82623b831dda"
|
||||
}
|
||||
},
|
||||
"owner": "memoro"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,27 +3,28 @@ import { Tabs } from 'expo-router';
|
|||
import { TabBarIcon } from '~/components/TabBarIcon';
|
||||
|
||||
export default function TabLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
|
||||
tabBarActiveTintColor: 'black',
|
||||
}}>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Tab One',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="two"
|
||||
options={{
|
||||
title: 'Tab Two',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
tabBarActiveTintColor: 'black',
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Tab One',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="two"
|
||||
options={{
|
||||
title: 'Tab Two',
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import { Container } from '~/components/Container';
|
|||
import { ScreenContent } from '~/components/ScreenContent';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Tab One' }} />
|
||||
<Container>
|
||||
<ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Tab One" />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Tab One' }} />
|
||||
<Container>
|
||||
<ScreenContent path="app/(drawer)/(tabs)/index.tsx" title="Tab One" />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import { Container } from '~/components/Container';
|
|||
import { ScreenContent } from '~/components/ScreenContent';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Tab Two' }} />
|
||||
<Container>
|
||||
<ScreenContent path="app/(drawer)/(tabs)/two.tsx" title="Tab Two" />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Tab Two' }} />
|
||||
<Container>
|
||||
<ScreenContent path="app/(drawer)/(tabs)/two.tsx" title="Tab Two" />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue