1133 lines
57 KiB
TypeScript
1133 lines
57 KiB
TypeScript
'use client'
|
||
|
||
/**
|
||
* Brandbook - Corporate Design & Styleguide
|
||
*
|
||
* Compliance SDK Brandbook mit:
|
||
* - Violet/Purple Farbschema
|
||
* - Compliance-spezifischen Komponenten
|
||
* - Inter Font Family
|
||
*/
|
||
|
||
import { useState } from 'react'
|
||
|
||
// Primary brand color (Violet)
|
||
const PRIMARY_COLORS = {
|
||
name: 'Primary (Violet)',
|
||
description: 'Haupt-Markenfarbe fuer Buttons, Links und Akzente im Compliance SDK',
|
||
shades: [
|
||
{ name: '50', value: '#f5f3ff', text: 'dark' },
|
||
{ name: '100', value: '#ede9fe', text: 'dark' },
|
||
{ name: '200', value: '#ddd6fe', text: 'dark' },
|
||
{ name: '300', value: '#c4b5fd', text: 'dark' },
|
||
{ name: '400', value: '#a78bfa', text: 'dark' },
|
||
{ name: '500', value: '#8b5cf6', text: 'light' },
|
||
{ name: '600', value: '#7c3aed', text: 'light' },
|
||
{ name: '700', value: '#6d28d9', text: 'light' },
|
||
{ name: '800', value: '#5b21b6', text: 'light' },
|
||
{ name: '900', value: '#4c1d95', text: 'light' },
|
||
],
|
||
}
|
||
|
||
// Accent brand color (Purple) - for highlights and compliance accents
|
||
const ACCENT_COLORS = {
|
||
name: 'Accent (Purple)',
|
||
description: 'Akzentfarbe fuer Logo-Gradient und Compliance-Highlights',
|
||
shades: [
|
||
{ name: '50', value: '#faf5ff', text: 'dark' },
|
||
{ name: '100', value: '#f3e8ff', text: 'dark' },
|
||
{ name: '200', value: '#e9d5ff', text: 'dark' },
|
||
{ name: '300', value: '#d8b4fe', text: 'dark' },
|
||
{ name: '400', value: '#c084fc', text: 'dark' },
|
||
{ name: '500', value: '#a855f7', text: 'light' },
|
||
{ name: '600', value: '#9333ea', text: 'light' },
|
||
{ name: '700', value: '#7e22ce', text: 'light' },
|
||
{ name: '800', value: '#6b21a8', text: 'light' },
|
||
{ name: '900', value: '#581c87', text: 'light' },
|
||
],
|
||
}
|
||
|
||
// Category colors for navigation and modules
|
||
const CATEGORY_COLORS = [
|
||
{
|
||
id: 'dsgvo',
|
||
name: 'DSGVO-Grundlagen (Violet)',
|
||
description: 'Datenschutz, VVT, DSFA, TOM, Einwilligungen',
|
||
main: '#7c3aed',
|
||
shades: [
|
||
{ name: '100', value: '#ede9fe', text: 'dark' },
|
||
{ name: '500', value: '#8b5cf6', text: 'light' },
|
||
{ name: '600', value: '#7c3aed', text: 'light' },
|
||
{ name: '700', value: '#6d28d9', text: 'light' },
|
||
],
|
||
},
|
||
{
|
||
id: 'compliance',
|
||
name: 'Compliance-Management (Purple)',
|
||
description: 'Audit, Controls, Requirements, Risks',
|
||
main: '#9333ea',
|
||
shades: [
|
||
{ name: '100', value: '#f3e8ff', text: 'dark' },
|
||
{ name: '500', value: '#a855f7', text: 'light' },
|
||
{ name: '600', value: '#9333ea', text: 'light' },
|
||
{ name: '700', value: '#7e22ce', text: 'light' },
|
||
],
|
||
},
|
||
{
|
||
id: 'ai',
|
||
name: 'KI & Automatisierung (Teal)',
|
||
description: 'AI Act, Screening, RAG, Advisory Board',
|
||
main: '#14b8a6',
|
||
shades: [
|
||
{ name: '100', value: '#ccfbf1', text: 'dark' },
|
||
{ name: '500', value: '#14b8a6', text: 'light' },
|
||
{ name: '600', value: '#0d9488', text: 'light' },
|
||
{ name: '700', value: '#0f766e', text: 'light' },
|
||
],
|
||
},
|
||
{
|
||
id: 'documents',
|
||
name: 'Dokumente & Legal (Orange)',
|
||
description: 'Document Generator, Notfallplan, Cookie-Banner',
|
||
main: '#f97316',
|
||
shades: [
|
||
{ name: '100', value: '#ffedd5', text: 'dark' },
|
||
{ name: '500', value: '#f97316', text: 'light' },
|
||
{ name: '600', value: '#ea580c', text: 'light' },
|
||
{ name: '700', value: '#c2410c', text: 'light' },
|
||
],
|
||
},
|
||
{
|
||
id: 'vendor',
|
||
name: 'Vendor & Extern (Green)',
|
||
description: 'Lieferanten-Compliance, DSMS, Import',
|
||
main: '#22c55e',
|
||
shades: [
|
||
{ name: '100', value: '#dcfce7', text: 'dark' },
|
||
{ name: '500', value: '#22c55e', text: 'light' },
|
||
{ name: '600', value: '#16a34a', text: 'light' },
|
||
{ name: '700', value: '#15803d', text: 'light' },
|
||
],
|
||
},
|
||
{
|
||
id: 'development',
|
||
name: 'Entwicklung (Slate)',
|
||
description: 'Docs, Screen Flow, Brandbook',
|
||
main: '#64748b',
|
||
shades: [
|
||
{ name: '100', value: '#f1f5f9', text: 'dark' },
|
||
{ name: '500', value: '#64748b', text: 'light' },
|
||
{ name: '600', value: '#475569', text: 'light' },
|
||
{ name: '700', value: '#334155', text: 'light' },
|
||
],
|
||
},
|
||
]
|
||
|
||
// Semantic colors
|
||
const SEMANTIC_COLORS = {
|
||
success: {
|
||
name: 'Success (Emerald)',
|
||
shades: [
|
||
{ name: '100', value: '#d1fae5', text: 'dark' },
|
||
{ name: '500', value: '#10b981', text: 'light' },
|
||
{ name: '600', value: '#059669', text: 'light' },
|
||
],
|
||
},
|
||
warning: {
|
||
name: 'Warning (Amber)',
|
||
shades: [
|
||
{ name: '100', value: '#fef3c7', text: 'dark' },
|
||
{ name: '500', value: '#f59e0b', text: 'dark' },
|
||
{ name: '600', value: '#d97706', text: 'light' },
|
||
],
|
||
},
|
||
danger: {
|
||
name: 'Danger (Red)',
|
||
shades: [
|
||
{ name: '100', value: '#fee2e2', text: 'dark' },
|
||
{ name: '500', value: '#ef4444', text: 'light' },
|
||
{ name: '600', value: '#dc2626', text: 'light' },
|
||
],
|
||
},
|
||
neutral: {
|
||
name: 'Neutral (Slate)',
|
||
shades: [
|
||
{ name: '50', value: '#f8fafc', text: 'dark' },
|
||
{ name: '100', value: '#f1f5f9', text: 'dark' },
|
||
{ name: '200', value: '#e2e8f0', text: 'dark' },
|
||
{ name: '300', value: '#cbd5e1', text: 'dark' },
|
||
{ name: '400', value: '#94a3b8', text: 'dark' },
|
||
{ name: '500', value: '#64748b', text: 'light' },
|
||
{ name: '600', value: '#475569', text: 'light' },
|
||
{ name: '700', value: '#334155', text: 'light' },
|
||
{ name: '800', value: '#1e293b', text: 'light' },
|
||
{ name: '900', value: '#0f172a', text: 'light' },
|
||
],
|
||
},
|
||
}
|
||
|
||
const TYPOGRAPHY = {
|
||
fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
|
||
weights: [
|
||
{ weight: 400, name: 'Regular', usage: 'Fliesstext, Beschreibungen' },
|
||
{ weight: 500, name: 'Medium', usage: 'Labels, Buttons, Navigation' },
|
||
{ weight: 600, name: 'Semi-Bold', usage: 'Ueberschriften H3-H6, Card-Titel' },
|
||
{ weight: 700, name: 'Bold', usage: 'Ueberschriften H1-H2, CTAs' },
|
||
],
|
||
sizes: [
|
||
{ name: 'xs', size: '0.75rem (12px)', usage: 'Footnotes, Badges' },
|
||
{ name: 'sm', size: '0.875rem (14px)', usage: 'Nebentext, Labels' },
|
||
{ name: 'base', size: '1rem (16px)', usage: 'Fliesstext, Body' },
|
||
{ name: 'lg', size: '1.125rem (18px)', usage: 'Lead Text' },
|
||
{ name: 'xl', size: '1.25rem (20px)', usage: 'H4, Card Titles' },
|
||
{ name: '2xl', size: '1.5rem (24px)', usage: 'H3' },
|
||
{ name: '3xl', size: '1.875rem (30px)', usage: 'H2' },
|
||
{ name: '4xl', size: '2.25rem (36px)', usage: 'H1, Hero' },
|
||
],
|
||
}
|
||
|
||
const SPACING = [
|
||
{ name: '1', value: '0.25rem (4px)', usage: 'Minimaler Abstand' },
|
||
{ name: '2', value: '0.5rem (8px)', usage: 'Kompakter Abstand' },
|
||
{ name: '3', value: '0.75rem (12px)', usage: 'Standard klein' },
|
||
{ name: '4', value: '1rem (16px)', usage: 'Standard' },
|
||
{ name: '6', value: '1.5rem (24px)', usage: 'Card Padding' },
|
||
{ name: '8', value: '2rem (32px)', usage: 'Section Spacing' },
|
||
]
|
||
|
||
const VOICE_TONE = {
|
||
attributes: [
|
||
'Fachlich-praezise & Vertrauenswuerdig',
|
||
'DSGVO-konform & Rechtssicher',
|
||
'Klar & Strukturiert',
|
||
'Audit-tauglich & Nachvollziehbar',
|
||
'Modern & Professionell',
|
||
],
|
||
doList: [
|
||
'Fachbegriffe korrekt verwenden (Art. 30 DSGVO, TOM, DSFA)',
|
||
'Klare, strukturierte Formulierungen nutzen',
|
||
'Rechtsgrundlagen immer referenzieren',
|
||
'Handlungsanweisungen priorisiert darstellen',
|
||
'Vertraulichkeit und Datenschutz betonen',
|
||
],
|
||
dontList: [
|
||
'Rechtsbegriffe ungenau verwenden',
|
||
'Technisches Marketing-Speak',
|
||
'Compliance-Garantien ohne Einschraenkung',
|
||
'Informelle oder saloppe Sprache',
|
||
'Fehlende Quellenangaben bei Verordnungen',
|
||
],
|
||
}
|
||
|
||
function ColorSwatch({ color }: { color: { name: string; value: string; text: string } }) {
|
||
const [copied, setCopied] = useState(false)
|
||
|
||
const copyToClipboard = () => {
|
||
navigator.clipboard.writeText(color.value)
|
||
setCopied(true)
|
||
setTimeout(() => setCopied(false), 2000)
|
||
}
|
||
|
||
return (
|
||
<button
|
||
onClick={copyToClipboard}
|
||
className="group flex flex-col items-center"
|
||
title={`Klicken zum Kopieren: ${color.value}`}
|
||
>
|
||
<div
|
||
className="w-16 h-16 rounded-xl shadow-sm border border-slate-200 transition-transform group-hover:scale-110 flex items-center justify-center"
|
||
style={{ backgroundColor: color.value }}
|
||
>
|
||
{copied && (
|
||
<svg className={`w-5 h-5 ${color.text === 'light' ? 'text-white' : 'text-slate-900'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)}
|
||
</div>
|
||
<span className="text-xs text-slate-600 mt-1 font-medium">{color.name}</span>
|
||
<span className="text-xs text-slate-400 font-mono">{color.value}</span>
|
||
</button>
|
||
)
|
||
}
|
||
|
||
export default function BrandbookPage() {
|
||
const [activeTab, setActiveTab] = useState<'colors' | 'typography' | 'components' | 'logo' | 'voice'>('colors')
|
||
|
||
return (
|
||
<div>
|
||
{/* Header */}
|
||
<div className="mb-6">
|
||
<h1 className="text-2xl font-bold text-slate-900">Brandbook</h1>
|
||
<p className="text-slate-500 mt-1">Corporate Design & Styleguide fuer BreakPilot Compliance SDK</p>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="mb-6">
|
||
<div className="flex gap-1 bg-slate-100 p-1 rounded-xl w-fit">
|
||
{[
|
||
{ id: 'colors', label: 'Farben' },
|
||
{ id: 'typography', label: 'Typografie' },
|
||
{ id: 'components', label: 'Komponenten' },
|
||
{ id: 'logo', label: 'Logo' },
|
||
{ id: 'voice', label: 'Tonalitaet' },
|
||
].map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
||
className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
|
||
activeTab === tab.id
|
||
? 'bg-white text-slate-900 shadow-sm'
|
||
: 'text-slate-600 hover:text-slate-900'
|
||
}`}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Colors Tab */}
|
||
{activeTab === 'colors' && (
|
||
<div className="space-y-6">
|
||
{/* Primary Color */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-2">{PRIMARY_COLORS.name}</h3>
|
||
<p className="text-sm text-slate-500 mb-4">{PRIMARY_COLORS.description}</p>
|
||
<div className="flex gap-4 flex-wrap">
|
||
{PRIMARY_COLORS.shades.map((shade) => (
|
||
<ColorSwatch key={shade.name} color={shade} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Accent Color */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-2">{ACCENT_COLORS.name}</h3>
|
||
<p className="text-sm text-slate-500 mb-4">{ACCENT_COLORS.description}</p>
|
||
<div className="flex gap-4 flex-wrap">
|
||
{ACCENT_COLORS.shades.map((shade) => (
|
||
<ColorSwatch key={shade.name} color={shade} />
|
||
))}
|
||
</div>
|
||
{/* Logo Gradient Preview */}
|
||
<div className="mt-6 pt-4 border-t border-slate-200">
|
||
<h4 className="text-sm font-medium text-slate-700 mb-3">Logo-Gradient</h4>
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-16 h-16 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-2xl font-bold text-white">B</span>
|
||
</div>
|
||
<div className="text-sm text-slate-600">
|
||
<code className="bg-slate-100 px-2 py-1 rounded font-mono text-xs">
|
||
bg-gradient-to-br from-violet-500 to-purple-600
|
||
</code>
|
||
<p className="mt-1 text-slate-500">Violet (#8b5cf6) → Purple (#9333ea)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Category Colors */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Farben</h3>
|
||
<p className="text-sm text-slate-500 mb-6">
|
||
Jede Kategorie hat eine eigene Farbe fuer Navigation, Module und Akzente.
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{CATEGORY_COLORS.map((cat) => (
|
||
<div key={cat.id} className="border border-slate-200 rounded-xl p-4">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div
|
||
className="w-8 h-8 rounded-lg"
|
||
style={{ backgroundColor: cat.main }}
|
||
/>
|
||
<div>
|
||
<h4 className="font-medium text-slate-900">{cat.name}</h4>
|
||
<p className="text-xs text-slate-500">{cat.description}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
{cat.shades.map((shade) => (
|
||
<ColorSwatch key={shade.name} color={shade} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Semantic Colors */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Semantische Farben</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{Object.entries(SEMANTIC_COLORS).map(([key, palette]) => (
|
||
<div key={key} className="border border-slate-200 rounded-xl p-4">
|
||
<h4 className="font-medium text-slate-900 mb-3">{palette.name}</h4>
|
||
<div className="flex gap-2">
|
||
{palette.shades.map((shade) => (
|
||
<ColorSwatch key={shade.name} color={shade} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Usage Guidelines */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Verwendungsrichtlinien</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h4 className="font-medium text-slate-700 mb-2">Primary (Violet)</h4>
|
||
<ul className="text-sm text-slate-600 space-y-1">
|
||
<li>- Primaere Buttons und CTAs</li>
|
||
<li>- Links und interaktive Elemente</li>
|
||
<li>- Fokuszustaende</li>
|
||
<li>- Ausgewaehlte Navigation</li>
|
||
<li>- SDK Pipeline Sidebar Akzente</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-slate-700 mb-2">Kategorie-Farben</h4>
|
||
<ul className="text-sm text-slate-600 space-y-1">
|
||
<li>- Sidebar-Navigation Icons</li>
|
||
<li>- Modul-Cards und Badges</li>
|
||
<li>- Compliance-Status Indikatoren</li>
|
||
<li>- Breadcrumbs und Headers</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Typography Tab */}
|
||
{activeTab === 'typography' && (
|
||
<div className="space-y-6">
|
||
{/* Font Family */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftart: Inter</h3>
|
||
<div className="bg-slate-50 rounded-lg p-4 font-mono text-sm text-slate-600 mb-4">
|
||
font-family: {TYPOGRAPHY.fontFamily};
|
||
</div>
|
||
<p className="text-sm text-slate-600">
|
||
Inter ist eine moderne, variable Sans-Serif Schrift, optimiert fuer Bildschirme.
|
||
Sie ist unter der SIL Open Font License verfuegbar und frei fuer kommerzielle Nutzung.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Font Licenses */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Lizenzen</h3>
|
||
<div className="space-y-4">
|
||
<div className="border border-slate-200 rounded-xl p-4">
|
||
<div className="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h4 className="font-semibold text-slate-900">Inter Font</h4>
|
||
<p className="text-sm text-slate-500">Designer: Rasmus Andersson</p>
|
||
</div>
|
||
<span className="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
|
||
OFL-1.1
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4 mt-3 text-sm">
|
||
<div>
|
||
<span className="text-slate-500">Lizenz:</span>
|
||
<span className="ml-2 text-slate-700">SIL Open Font License 1.1</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-slate-500">Kommerzielle Nutzung:</span>
|
||
<span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border border-slate-200 rounded-xl p-4">
|
||
<div className="flex items-start justify-between mb-2">
|
||
<div>
|
||
<h4 className="font-semibold text-slate-900">Lucide Icons</h4>
|
||
<p className="text-sm text-slate-500">Community-driven Icon Library</p>
|
||
</div>
|
||
<span className="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
|
||
ISC
|
||
</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4 mt-3 text-sm">
|
||
<div>
|
||
<span className="text-slate-500">Lizenz:</span>
|
||
<span className="ml-2 text-slate-700">ISC License</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-slate-500">Kommerzielle Nutzung:</span>
|
||
<span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-green-50 border border-green-200 rounded-xl p-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<svg className="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<h4 className="font-semibold text-green-800">Lizenz-Compliance</h4>
|
||
</div>
|
||
<p className="text-sm text-green-700">
|
||
Alle verwendeten Schriftarten und Icons sind Open Source und fuer kommerzielle Nutzung freigegeben.
|
||
Vollstaendige Dokumentation in der SBOM verfuegbar.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Font Weights */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftschnitte</h3>
|
||
<div className="space-y-4">
|
||
{TYPOGRAPHY.weights.map((w) => (
|
||
<div key={w.weight} className="flex items-center gap-6 pb-4 border-b border-slate-100 last:border-0 last:pb-0">
|
||
<span
|
||
className="text-2xl w-64"
|
||
style={{ fontWeight: w.weight }}
|
||
>
|
||
Compliance SDK
|
||
</span>
|
||
<div className="flex-1">
|
||
<span className="font-medium text-slate-900">{w.name} ({w.weight})</span>
|
||
<span className="text-sm text-slate-500 ml-4">{w.usage}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Font Sizes */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftgroessen</h3>
|
||
<div className="space-y-3">
|
||
{TYPOGRAPHY.sizes.map((s) => (
|
||
<div key={s.name} className="flex items-baseline gap-4 border-b border-slate-100 pb-3 last:border-0">
|
||
<span className="w-16 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded">{s.name}</span>
|
||
<span className="w-36 text-sm text-slate-600">{s.size}</span>
|
||
<span className="text-sm text-slate-500">{s.usage}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Headings Preview */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Ueberschriften-Hierarchie</h3>
|
||
<div className="space-y-4">
|
||
<div className="text-4xl font-bold text-slate-900">H1: Compliance Dashboard</div>
|
||
<div className="text-3xl font-bold text-slate-900">H2: DSGVO-Grundlagen</div>
|
||
<div className="text-2xl font-semibold text-slate-900">H3: Verarbeitungsverzeichnis</div>
|
||
<div className="text-xl font-semibold text-slate-900">H4: TOM-Massnahmen</div>
|
||
<div className="text-lg font-medium text-slate-900">H5: Risikobewertung</div>
|
||
<div className="text-base font-medium text-slate-900">H6: Control-ID</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Spacing */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Spacing Scale</h3>
|
||
<div className="space-y-3">
|
||
{SPACING.map((s) => (
|
||
<div key={s.name} className="flex items-center gap-4">
|
||
<span className="w-12 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded text-center">{s.name}</span>
|
||
<div
|
||
className="h-4 rounded"
|
||
style={{ width: `${parseInt(s.value) * 16}px`, backgroundColor: '#8b5cf6' }}
|
||
/>
|
||
<span className="text-sm text-slate-600">{s.value}</span>
|
||
<span className="text-sm text-slate-400">{s.usage}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Components Tab */}
|
||
{activeTab === 'components' && (
|
||
<div className="space-y-6">
|
||
{/* Buttons */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Buttons</h3>
|
||
<div className="flex flex-wrap gap-4 mb-6">
|
||
<button className="px-6 py-2 bg-violet-600 text-white font-medium rounded-lg hover:bg-violet-700 transition-colors">
|
||
Primary
|
||
</button>
|
||
<button className="px-6 py-2 bg-slate-100 text-slate-700 font-medium rounded-lg hover:bg-slate-200 transition-colors">
|
||
Secondary
|
||
</button>
|
||
<button className="px-6 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-colors">
|
||
Outline
|
||
</button>
|
||
<button className="px-6 py-2 text-violet-600 font-medium rounded-lg hover:bg-violet-50 transition-colors">
|
||
Ghost
|
||
</button>
|
||
<button className="px-6 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors">
|
||
Danger
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-wrap gap-4">
|
||
<button className="px-4 py-1.5 bg-violet-600 text-white text-sm font-medium rounded-lg">
|
||
Small
|
||
</button>
|
||
<button className="px-6 py-2 bg-violet-600 text-white font-medium rounded-lg">
|
||
Medium
|
||
</button>
|
||
<button className="px-8 py-3 bg-violet-600 text-white text-lg font-medium rounded-lg">
|
||
Large
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Checkpoint Status Badges */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Checkpoint-Status Badges</h3>
|
||
<p className="text-sm text-slate-500 mb-4">Fuer Pipeline-Checkpoints im SDK.</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-100 text-green-700 text-sm font-medium rounded-full">
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
|
||
Passed
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-100 text-red-700 text-sm font-medium rounded-full">
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||
Failed
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-100 text-amber-700 text-sm font-medium rounded-full">
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
|
||
Warning
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-600 text-sm font-medium rounded-full">
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||
Pending
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Risk Level Badges */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Risk-Level Badges</h3>
|
||
<p className="text-sm text-slate-500 mb-4">Fuer Risikobewertung in der Compliance-Pipeline.</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-100 text-green-800 text-sm font-semibold rounded-lg border border-green-200">
|
||
Low
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-100 text-amber-800 text-sm font-semibold rounded-lg border border-amber-200">
|
||
Medium
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-orange-100 text-orange-800 text-sm font-semibold rounded-lg border border-orange-200">
|
||
High
|
||
</span>
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-100 text-red-800 text-sm font-semibold rounded-lg border border-red-200">
|
||
Critical
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Compliance Status Cards */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Compliance-Status Cards</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="rounded-xl border border-green-200 bg-green-50 p-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-3 h-3 rounded-full bg-green-500" />
|
||
<span className="text-sm font-semibold text-green-800">Konform</span>
|
||
</div>
|
||
<div className="text-2xl font-bold text-green-700">342</div>
|
||
<div className="text-xs text-green-600 mt-1">Controls erfuellt</div>
|
||
</div>
|
||
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-3 h-3 rounded-full bg-amber-500" />
|
||
<span className="text-sm font-semibold text-amber-800">In Bearbeitung</span>
|
||
</div>
|
||
<div className="text-2xl font-bold text-amber-700">89</div>
|
||
<div className="text-xs text-amber-600 mt-1">Controls offen</div>
|
||
</div>
|
||
<div className="rounded-xl border border-red-200 bg-red-50 p-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-3 h-3 rounded-full bg-red-500" />
|
||
<span className="text-sm font-semibold text-red-800">Nicht konform</span>
|
||
</div>
|
||
<div className="text-2xl font-bold text-red-700">43</div>
|
||
<div className="text-xs text-red-600 mt-1">Controls fehlend</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Module Cards with Progress */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Modul-Cards mit Fortschritt</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{CATEGORY_COLORS.slice(0, 3).map((cat) => (
|
||
<div
|
||
key={cat.id}
|
||
className="rounded-xl border p-4 hover:shadow-lg transition-all cursor-pointer"
|
||
style={{
|
||
borderColor: cat.shades[0].value,
|
||
backgroundColor: cat.shades[0].value + '40'
|
||
}}
|
||
>
|
||
<div
|
||
className="w-10 h-10 rounded-lg flex items-center justify-center mb-3"
|
||
style={{ backgroundColor: cat.main }}
|
||
>
|
||
<svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
</div>
|
||
<h4 className="font-semibold text-slate-900 mb-1">{cat.name.split(' (')[0]}</h4>
|
||
<p className="text-sm text-slate-600 mb-3">{cat.description}</p>
|
||
{/* Progress Bar */}
|
||
<div className="w-full bg-slate-200 rounded-full h-2">
|
||
<div
|
||
className="h-2 rounded-full"
|
||
style={{ width: `${60 + Math.random() * 30}%`, backgroundColor: cat.main }}
|
||
/>
|
||
</div>
|
||
<div className="text-xs text-slate-500 mt-1">Fortschritt</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Command Bar */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Command Bar (Cmd+K)</h3>
|
||
<div className="max-w-lg mx-auto">
|
||
<div className="bg-slate-900 rounded-xl p-4 shadow-2xl">
|
||
<div className="flex items-center gap-3 bg-slate-800 rounded-lg px-4 py-3 mb-3">
|
||
<svg className="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
<span className="text-slate-400 text-sm">Suche Module, Dokumente, Aktionen...</span>
|
||
<span className="ml-auto text-xs bg-slate-700 px-2 py-0.5 rounded text-slate-400">ESC</span>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-3 px-3 py-2 bg-violet-600/20 rounded-lg">
|
||
<span>📋</span>
|
||
<span className="text-white text-sm">VVT - Verarbeitungsverzeichnis</span>
|
||
<span className="ml-auto text-xs text-slate-400">DSGVO</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-slate-800">
|
||
<span>⚖️</span>
|
||
<span className="text-slate-300 text-sm">DSFA - Folgenabschaetzung</span>
|
||
<span className="ml-auto text-xs text-slate-400">DSGVO</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-slate-800">
|
||
<span>✅</span>
|
||
<span className="text-slate-300 text-sm">Compliance Hub</span>
|
||
<span className="ml-auto text-xs text-slate-400">GRC</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Standard Inputs */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Eingabefelder</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">Standard Input</label>
|
||
<input
|
||
type="text"
|
||
placeholder="Verarbeitungszweck eingeben..."
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 outline-none"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-slate-700 mb-1">Mit Icon</label>
|
||
<div className="relative">
|
||
<input
|
||
type="text"
|
||
placeholder="Controls durchsuchen..."
|
||
className="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 outline-none"
|
||
/>
|
||
<svg className="w-5 h-5 text-slate-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Compliance Advisor Widget */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Compliance Advisor Widget</h3>
|
||
<div className="max-w-md">
|
||
<div className="border border-violet-200 rounded-xl overflow-hidden">
|
||
<div className="bg-violet-600 px-4 py-3 flex items-center gap-2">
|
||
<div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
|
||
<svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||
</svg>
|
||
</div>
|
||
<span className="text-white font-medium text-sm">Compliance Advisor</span>
|
||
</div>
|
||
<div className="p-4 bg-violet-50">
|
||
<div className="bg-white rounded-lg p-3 text-sm text-slate-700 shadow-sm">
|
||
Basierend auf Ihrer aktuellen Konfiguration empfehle ich die Durchfuehrung einer DSFA fuer die KI-gestuetzte Dokumentenanalyse (Art. 35 DSGVO).
|
||
</div>
|
||
<div className="flex gap-2 mt-3">
|
||
<button className="px-3 py-1.5 bg-violet-600 text-white text-xs font-medium rounded-lg">
|
||
DSFA starten
|
||
</button>
|
||
<button className="px-3 py-1.5 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">
|
||
Spaeter
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Badges */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Badges</h3>
|
||
<div className="flex flex-wrap gap-2">
|
||
{CATEGORY_COLORS.map((cat) => (
|
||
<span
|
||
key={cat.id}
|
||
className="px-2.5 py-1 text-xs font-medium rounded-full"
|
||
style={{
|
||
backgroundColor: cat.shades[0].value,
|
||
color: cat.shades[3].value
|
||
}}
|
||
>
|
||
{cat.name.split(' (')[0]}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Border Radius */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Border Radius</h3>
|
||
<div className="flex gap-6 items-end">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 rounded" style={{ backgroundColor: '#8b5cf6' }} />
|
||
<span className="text-xs text-slate-500 mt-2 block">rounded (4px)</span>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 rounded-lg" style={{ backgroundColor: '#8b5cf6' }} />
|
||
<span className="text-xs text-slate-500 mt-2 block">rounded-lg (8px)</span>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 rounded-xl" style={{ backgroundColor: '#8b5cf6' }} />
|
||
<span className="text-xs text-slate-500 mt-2 block">rounded-xl (12px)</span>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 rounded-2xl" style={{ backgroundColor: '#8b5cf6' }} />
|
||
<span className="text-xs text-slate-500 mt-2 block">rounded-2xl (16px)</span>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 rounded-full" style={{ backgroundColor: '#8b5cf6' }} />
|
||
<span className="text-xs text-slate-500 mt-2 block">rounded-full</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Logo Tab */}
|
||
{activeTab === 'logo' && (
|
||
<div className="space-y-6">
|
||
{/* Logo Display */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Logo</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div className="bg-white border border-slate-200 rounded-xl p-8 flex items-center justify-center">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-2xl font-bold text-white">B</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-2xl font-bold text-slate-900">BreakPilot</span>
|
||
<span className="text-sm text-slate-500 block">Compliance SDK</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-slate-900 rounded-xl p-8 flex items-center justify-center">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #a78bfa, #c084fc)' }}>
|
||
<span className="text-2xl font-bold text-white">B</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-2xl font-bold text-white">BreakPilot</span>
|
||
<span className="text-sm text-slate-400 block">Compliance SDK</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* Gradient Info */}
|
||
<div className="mt-6 pt-4 border-t border-slate-200">
|
||
<div className="flex items-center gap-4">
|
||
<code className="bg-slate-100 px-3 py-1.5 rounded-lg font-mono text-xs text-slate-700">
|
||
background: linear-gradient(to bottom right, #8b5cf6, #9333ea)
|
||
</code>
|
||
<span className="text-sm text-slate-500">Primary → Accent (Violet → Purple)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Logo Variations */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Logo-Varianten</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
|
||
<div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-2xl font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-xs text-slate-600">Icon Only</span>
|
||
</div>
|
||
<div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
|
||
<span className="text-xl font-bold text-slate-900">BreakPilot</span>
|
||
<span className="text-xs text-slate-600">Text Only</span>
|
||
</div>
|
||
<div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-lg font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-lg font-bold text-slate-900">BreakPilot</span>
|
||
</div>
|
||
<span className="text-xs text-slate-600">Horizontal</span>
|
||
</div>
|
||
<div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
|
||
<div className="flex flex-col items-center">
|
||
<div className="w-10 h-10 rounded-xl flex items-center justify-center mb-1" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-xl font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-sm font-bold text-slate-900">BreakPilot</span>
|
||
</div>
|
||
<span className="text-xs text-slate-600">Stacked</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* SDK Badge */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">SDK Badge / Shield</h3>
|
||
<div className="flex gap-6 items-center">
|
||
<div className="flex items-center gap-2 px-4 py-2 rounded-full border-2 border-violet-500 bg-violet-50">
|
||
<svg className="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
<span className="font-semibold text-violet-700 text-sm">Compliance SDK</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-violet-600 text-white">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
<span className="font-semibold text-sm">DSGVO konform</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-900 text-white">
|
||
<span className="text-violet-400 font-mono text-xs">v1.0</span>
|
||
<span className="font-medium text-sm">BreakPilot SDK</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Favicon */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Favicon & App Icon</h3>
|
||
<div className="flex gap-6 items-end">
|
||
<div className="text-center">
|
||
<div className="w-8 h-8 rounded flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-sm font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-xs text-slate-500 mt-2 block">16x16</span>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-12 h-12 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-xl font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-xs text-slate-500 mt-2 block">32x32</span>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-2xl font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-xs text-slate-500 mt-2 block">180x180</span>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="w-24 h-24 rounded-2xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-4xl font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-xs text-slate-500 mt-2 block">512x512</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Donts */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Nicht erlaubt</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
|
||
<div className="flex items-center gap-2 justify-center opacity-50">
|
||
<div className="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
|
||
<span className="text-lg font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-lg font-bold text-red-500">BreakPilot</span>
|
||
</div>
|
||
<span className="text-xs text-red-600 mt-2 block">Falsche Farben</span>
|
||
</div>
|
||
<div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
|
||
<div className="flex items-center gap-2 justify-center" style={{ transform: 'skewX(-10deg)' }}>
|
||
<div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-lg font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-lg font-bold text-slate-900">BreakPilot</span>
|
||
</div>
|
||
<span className="text-xs text-red-600 mt-2 block">Verzerrt</span>
|
||
</div>
|
||
<div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
|
||
<div className="flex items-center gap-2 justify-center">
|
||
<div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #8b5cf6, #9333ea)' }}>
|
||
<span className="text-lg font-bold text-white">B</span>
|
||
</div>
|
||
<span className="text-lg font-bold text-slate-900">Break Pilot</span>
|
||
</div>
|
||
<span className="text-xs text-red-600 mt-2 block">Falsche Schreibweise</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Voice & Tone Tab */}
|
||
{activeTab === 'voice' && (
|
||
<div className="space-y-6">
|
||
{/* Brand Attributes */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Markenpersoenlichkeit</h3>
|
||
<div className="flex flex-wrap gap-3">
|
||
{VOICE_TONE.attributes.map((attr) => (
|
||
<span
|
||
key={attr}
|
||
className="px-4 py-2 bg-violet-100 text-violet-700 rounded-full font-medium"
|
||
>
|
||
{attr}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Do & Dont */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-green-600 mb-4 flex items-center gap-2">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
So schreiben wir
|
||
</h3>
|
||
<ul className="space-y-2">
|
||
{VOICE_TONE.doList.map((item) => (
|
||
<li key={item} className="flex items-start gap-2 text-slate-600">
|
||
<span className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0 mt-2"></span>
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-red-600 mb-4 flex items-center gap-2">
|
||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
Das vermeiden wir
|
||
</h3>
|
||
<ul className="space-y-2">
|
||
{VOICE_TONE.dontList.map((item) => (
|
||
<li key={item} className="flex items-start gap-2 text-slate-600">
|
||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0 mt-2"></span>
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Example Texts */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Beispieltexte</h3>
|
||
<div className="space-y-4">
|
||
<div className="p-4 bg-green-50 border border-green-200 rounded-xl">
|
||
<span className="text-xs text-green-600 font-medium mb-2 block">GUT</span>
|
||
<p className="text-slate-700">
|
||
"Gemaess Art. 30 DSGVO ist ein Verarbeitungsverzeichnis verpflichtend. Erfassen Sie hier alle Verarbeitungstaetigkeiten mit Rechtsgrundlage, Zweck und Empfaengerkategorien."
|
||
</p>
|
||
</div>
|
||
<div className="p-4 bg-green-50 border border-green-200 rounded-xl">
|
||
<span className="text-xs text-green-600 font-medium mb-2 block">GUT</span>
|
||
<p className="text-slate-700">
|
||
"Ihre DSFA fuer die KI-gestuetzte Dokumentenanalyse zeigt ein mittleres Risiko. Empfohlene Massnahme: Implementierung einer Pseudonymisierung vor der Verarbeitung."
|
||
</p>
|
||
</div>
|
||
<div className="p-4 bg-red-50 border border-red-200 rounded-xl">
|
||
<span className="text-xs text-red-600 font-medium mb-2 block">SCHLECHT</span>
|
||
<p className="text-slate-700">
|
||
"Unsere revolutionaere KI garantiert 100% DSGVO-Compliance und macht Datenschutzbeauftragte ueberfluessig."
|
||
</p>
|
||
</div>
|
||
<div className="p-4 bg-red-50 border border-red-200 rounded-xl">
|
||
<span className="text-xs text-red-600 font-medium mb-2 block">SCHLECHT</span>
|
||
<p className="text-slate-700">
|
||
"Hey, check mal die coolen neuen Compliance-Features! Einfach draufklicken und schon bist du DSGVO-konform!"
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Target Audience */}
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<h3 className="text-lg font-semibold text-slate-900 mb-4">Zielgruppe</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<div className="p-4 bg-slate-50 rounded-xl text-center">
|
||
<div className="w-12 h-12 bg-violet-100 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||
<svg className="w-6 h-6 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
</div>
|
||
<h4 className="font-semibold text-slate-900">DSB</h4>
|
||
<p className="text-sm text-slate-600 mt-1">DSGVO-Compliance, Art. 37-39 Pflichten</p>
|
||
</div>
|
||
<div className="p-4 bg-slate-50 rounded-xl text-center">
|
||
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||
<svg className="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||
</svg>
|
||
</div>
|
||
<h4 className="font-semibold text-slate-900">Compliance Officer</h4>
|
||
<p className="text-sm text-slate-600 mt-1">GRC, Audit, Controls & Evidence</p>
|
||
</div>
|
||
<div className="p-4 bg-slate-50 rounded-xl text-center">
|
||
<div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||
<svg className="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
</div>
|
||
<h4 className="font-semibold text-slate-900">Auditoren</h4>
|
||
<p className="text-sm text-slate-600 mt-1">Pruefberichte, Nachweise, Checklisten</p>
|
||
</div>
|
||
<div className="p-4 bg-slate-50 rounded-xl text-center">
|
||
<div className="w-12 h-12 bg-slate-100 rounded-xl flex items-center justify-center mx-auto mb-2">
|
||
<svg className="w-6 h-6 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||
</svg>
|
||
</div>
|
||
<h4 className="font-semibold text-slate-900">Entwickler</h4>
|
||
<p className="text-sm text-slate-600 mt-1">SDK-Integration, APIs, DevOps</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|