mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 16:46:41 +02:00
c6c4c5a552
- Create @manacore/shared-landing-ui package with reusable components (FeatureSection, StepsSection, FAQSection, CTASection, Card atoms) - Add complete landing page for manadeck app - Refactor märchenzauber landing to use shared components (remove local CTA, FAQ, Features, HowItWorks sections) - Add German localization for manacore and memoro landing pages - Update workspace configuration and package dependencies 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
287 lines
No EOL
9.3 KiB
Text
287 lines
No EOL
9.3 KiB
Text
---
|
|
import AlternateLinks from '../components/seo/AlternateLinks.astro';
|
|
import Sidebar from '../components/navigation/Sidebar.astro';
|
|
import { getLangFromUrl } from '../lib/i18n/config';
|
|
|
|
export interface Props {
|
|
title: string;
|
|
description?: string;
|
|
image?: string;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
description = "Manacore - AI-powered platform to measure and improve team performance through intelligent analytics and insights.",
|
|
image = "/og-image.png"
|
|
} = Astro.props;
|
|
|
|
const lang = getLangFromUrl(Astro.url);
|
|
---
|
|
|
|
<!DOCTYPE html>
|
|
<html lang={lang}>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<script is:inline>
|
|
// Apply dark mode immediately to prevent flash
|
|
(() => {
|
|
const theme = localStorage.getItem('theme');
|
|
// Always apply dark color scheme and add bg class to body
|
|
document.documentElement.style.colorScheme = 'dark';
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
// Add background class to body when it's available
|
|
if (document.body) {
|
|
document.body.classList.add('bg-mana-background');
|
|
}
|
|
})();
|
|
</script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/svg+xml" href="/icons/mana-icon.svg" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<title>{title}</title>
|
|
<meta name="title" content={title} />
|
|
<meta name="description" content={description} />
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://manacore.ai/" />
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:image" content={image} />
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:url" content="https://manacore.ai/" />
|
|
<meta property="twitter:title" content={title} />
|
|
<meta property="twitter:description" content={description} />
|
|
<meta property="twitter:image" content={image} />
|
|
|
|
<!-- Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
|
|
<!-- Umami Analytics -->
|
|
<script defer src="https://umami.manacore.ai/script.js" data-website-id="dbafd5bb-f192-4cea-a857-593956c5ef00"></script>
|
|
|
|
<!-- Alternate language links for SEO -->
|
|
<AlternateLinks />
|
|
|
|
<!-- Critical dark mode styles -->
|
|
<style>
|
|
/* Ensure dark mode styles are applied immediately */
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-mana-background">
|
|
<!-- Skip Navigation for Accessibility -->
|
|
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-mana-orange text-white px-4 py-2 rounded-lg z-50">
|
|
Zum Hauptinhalt springen
|
|
</a>
|
|
|
|
<!-- Gradient Overlay for Buttons - Desktop (Top) -->
|
|
<div class="fixed top-0 left-0 right-0 h-20 z-[100] pointer-events-none hidden md:block" id="nav-gradient-top"></div>
|
|
|
|
<!-- Gradient Overlay for Buttons - Mobile (Bottom) -->
|
|
<div class="fixed bottom-0 left-0 right-0 h-48 z-[100] pointer-events-none md:hidden" id="nav-gradient-bottom"></div>
|
|
|
|
<!-- Logo Home Button -->
|
|
<a
|
|
href="/"
|
|
id="logo-home-button"
|
|
class="fixed md:top-6 bottom-6 md:bottom-auto left-6 z-[101] w-14 h-14 rounded-full shadow-2xl flex items-center justify-center transition-all text-white"
|
|
style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);"
|
|
aria-label="Zur Startseite"
|
|
>
|
|
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12.3047 1C12.3392 1.04573 19.608 10.6706 19.6084 14.6953C19.6084 18.7293 16.3386 21.9998 12.3047 22C8.27061 22 5 18.7294 5 14.6953C5.00041 10.661 12.3047 1 12.3047 1ZM12.3047 7.3916C12.2811 7.42276 8.65234 12.2288 8.65234 14.2393C8.65241 16.2562 10.2877 17.8916 12.3047 17.8916C14.3217 17.8916 15.957 16.2562 15.957 14.2393C15.957 12.2301 12.3331 7.42917 12.3047 7.3916Z" fill="currentColor"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<main id="main-content">
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- FAB Sidebar Navigation -->
|
|
<Sidebar />
|
|
</body>
|
|
</html>
|
|
|
|
<style is:global>
|
|
:root {
|
|
/* Grid Paper System - 10mm Grid (40px) */
|
|
--grid-unit: 40px; /* 10mm ~= 40px */
|
|
--grid-small: 10px; /* 2.5mm for finer grid lines */
|
|
--grid-cols: 12; /* Default: Desktop 12 Spalten */
|
|
|
|
/* === Shared Landing UI CSS Variables === */
|
|
/* Primary colors - ManaCore Blue */
|
|
--color-primary: #3b82f6;
|
|
--color-primary-hover: #2563eb;
|
|
--color-primary-glow: rgba(59, 130, 246, 0.3);
|
|
|
|
/* Text colors */
|
|
--color-text-primary: #f9fafb;
|
|
--color-text-secondary: #d1d5db;
|
|
--color-text-muted: #6b7280;
|
|
|
|
/* Background colors */
|
|
--color-background-page: #081320;
|
|
--color-background-card: #1e293b;
|
|
--color-background-card-hover: #334155;
|
|
|
|
/* Border colors */
|
|
--color-border: #334155;
|
|
--color-border-hover: #475569;
|
|
}
|
|
|
|
/* Responsive Grid Columns */
|
|
@media (min-width: 1200px) {
|
|
:root {
|
|
--grid-cols: 12; /* Desktop: 12 Spalten */
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1199px) {
|
|
:root {
|
|
--grid-cols: 8; /* Tablet: 8 Spalten */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
:root {
|
|
--grid-cols: 4; /* Mobile: 4 Spalten */
|
|
}
|
|
}
|
|
|
|
/* Grid System */
|
|
.page-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
|
|
gap: var(--grid-gutter);
|
|
max-width: var(--container-max-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--grid-gutter);
|
|
}
|
|
|
|
/* Baseline Grid - all elements align to 8px baseline */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, p, div, section {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Visual Grid Overlay - Kariertes Papier Effect (10mm Grid) */
|
|
.grid-visual-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 99999;
|
|
/* Main 10mm grid */
|
|
background-size: var(--grid-unit) var(--grid-unit);
|
|
background-image:
|
|
/* Bold lines every 10mm (40px) */
|
|
linear-gradient(to right, rgba(59, 130, 246, 0.3) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
|
|
}
|
|
|
|
.dark .grid-visual-overlay {
|
|
background-image:
|
|
linear-gradient(to right, rgba(59, 130, 246, 0.25) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(59, 130, 246, 0.25) 1px, transparent 1px);
|
|
}
|
|
|
|
/* Fine grid lines (optional - can be toggled) */
|
|
.grid-visual-overlay.with-fine-grid {
|
|
background-size: var(--grid-small) var(--grid-small), var(--grid-unit) var(--grid-unit);
|
|
background-image:
|
|
/* Fine lines every 2.5mm (10px) */
|
|
linear-gradient(to right, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
|
|
/* Bold lines every 10mm (40px) */
|
|
linear-gradient(to right, rgba(59, 130, 246, 0.3) 2px, transparent 2px),
|
|
linear-gradient(to bottom, rgba(59, 130, 246, 0.3) 2px, transparent 2px);
|
|
}
|
|
|
|
html {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
html.dark body {
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
.focus\:not-sr-only:focus {
|
|
position: absolute;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* Logo Home Button hover effect */
|
|
#logo-home-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5), 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
|
|
}
|
|
|
|
#logo-home-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Navigation Gradient Overlays */
|
|
#nav-gradient-top {
|
|
background-image:
|
|
/* Diagonal shadow from top-left corner */
|
|
radial-gradient(ellipse 250px 150px at top left, rgba(0, 0, 0, 0.4) 0%, transparent 85%),
|
|
/* Diagonal shadow from top-right corner */
|
|
radial-gradient(ellipse 250px 150px at top right, rgba(0, 0, 0, 0.4) 0%, transparent 85%),
|
|
/* Main gradient from top to bottom */
|
|
linear-gradient(to bottom, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.3) 40%, rgba(15, 23, 42, 0.05) 70%, transparent 100%);
|
|
}
|
|
|
|
#nav-gradient-bottom {
|
|
background-image:
|
|
/* Diagonal shadow from bottom-left corner */
|
|
radial-gradient(ellipse 600px 400px at bottom left, rgba(0, 0, 0, 0.7) 0%, transparent 60%),
|
|
/* Diagonal shadow from bottom-right corner */
|
|
radial-gradient(ellipse 600px 400px at bottom right, rgba(0, 0, 0, 0.7) 0%, transparent 60%),
|
|
/* Main gradient from bottom to top */
|
|
linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 30%, transparent 100%);
|
|
}
|
|
</style> |