Initial commit: breakpilot-lehrer - Lehrer KI Platform
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Boenisch
288
studio-v2/components/Logo.tsx
Normal file
288
studio-v2/components/Logo.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
'use client'
|
||||
|
||||
// ============================================
|
||||
// BREAKPILOT LOGO KOMPONENTEN
|
||||
// Drei Design-Varianten für das Studio
|
||||
// ============================================
|
||||
|
||||
interface LogoProps {
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl'
|
||||
showText?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
const sizes = {
|
||||
sm: { icon: 'w-8 h-8', text: 'text-base', subtitle: 'text-[10px]' },
|
||||
md: { icon: 'w-10 h-10', text: 'text-lg', subtitle: 'text-xs' },
|
||||
lg: { icon: 'w-12 h-12', text: 'text-xl', subtitle: 'text-sm' },
|
||||
xl: { icon: 'w-16 h-16', text: 'text-2xl', subtitle: 'text-base' },
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// VARIANTE A: Cupertino Clean
|
||||
// Minimalistisch, SF-Style, subtile Schatten
|
||||
// ============================================
|
||||
|
||||
export function LogoCupertinoClean({ size = 'md', showText = true, className = '' }: LogoProps) {
|
||||
const s = sizes[size]
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-3 ${className}`}>
|
||||
{/* Icon: Abgerundetes Quadrat mit Gradient */}
|
||||
<div className={`${s.icon} relative`}>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-500 to-red-700 rounded-xl shadow-lg shadow-red-500/20" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
{/* Stilisiertes "BP" mit Piloten-Motiv */}
|
||||
<svg viewBox="0 0 40 40" className="w-3/4 h-3/4">
|
||||
{/* Hintergrund-Kreis (Cockpit-Fenster) */}
|
||||
<circle cx="20" cy="20" r="14" fill="rgba(255,255,255,0.15)" />
|
||||
{/* B und P kombiniert */}
|
||||
<text
|
||||
x="20"
|
||||
y="26"
|
||||
textAnchor="middle"
|
||||
className="fill-white font-bold"
|
||||
style={{ fontSize: '16px', fontFamily: 'system-ui' }}
|
||||
>
|
||||
BP
|
||||
</text>
|
||||
{/* Kleine Flügel-Andeutung */}
|
||||
<path
|
||||
d="M6 22 L12 20 M28 20 L34 22"
|
||||
stroke="rgba(255,255,255,0.5)"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showText && (
|
||||
<div>
|
||||
<div className={`font-semibold text-slate-900 ${s.text} leading-none tracking-tight`}>
|
||||
Break<span className="text-red-600">Pilot</span>
|
||||
</div>
|
||||
<div className={`text-slate-400 ${s.subtitle} mt-0.5`}>Studio</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// VARIANTE B: Glassmorphism Pro
|
||||
// Frosted Glass, lebendige Farben, Glow-Effekte
|
||||
// ============================================
|
||||
|
||||
export function LogoGlassmorphism({ size = 'md', showText = true, className = '' }: LogoProps) {
|
||||
const s = sizes[size]
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-4 ${className}`}>
|
||||
{/* Icon: Glasmorphism mit Glow */}
|
||||
<div className={`${s.icon} relative`}>
|
||||
{/* Outer Glow */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-400 to-red-600 rounded-2xl blur-md opacity-50" />
|
||||
{/* Glass Card */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-400/90 to-red-600/90 backdrop-blur-xl rounded-2xl border border-white/20 shadow-xl" />
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<svg viewBox="0 0 40 40" className="w-3/4 h-3/4">
|
||||
{/* Pilot-Silhouette stilisiert */}
|
||||
<defs>
|
||||
<linearGradient id="glassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="rgba(255,255,255,0.9)" />
|
||||
<stop offset="100%" stopColor="rgba(255,255,255,0.7)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{/* Stilisierter Flieger/Papierflugzeug */}
|
||||
<path
|
||||
d="M8 28 L20 8 L32 28 L20 22 Z"
|
||||
fill="url(#glassGradient)"
|
||||
opacity="0.9"
|
||||
/>
|
||||
{/* Innerer Akzent */}
|
||||
<path
|
||||
d="M14 24 L20 12 L26 24 L20 20 Z"
|
||||
fill="rgba(255,255,255,0.3)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showText && (
|
||||
<div>
|
||||
<div className={`font-semibold text-white ${s.text} leading-none`}>
|
||||
BreakPilot
|
||||
</div>
|
||||
<div className={`text-white/60 ${s.subtitle} mt-0.5`}>Studio</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// VARIANTE C: Bento Style
|
||||
// Minimalistisch, Monoweight, Dark Mode optimiert
|
||||
// ============================================
|
||||
|
||||
export function LogoBento({ size = 'md', showText = true, className = '' }: LogoProps) {
|
||||
const s = sizes[size]
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-4 ${className}`}>
|
||||
{/* Icon: Minimal, geometrisch */}
|
||||
<div className={`${s.icon} relative`}>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-500 to-red-700 rounded-xl" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<svg viewBox="0 0 40 40" className="w-3/4 h-3/4">
|
||||
{/* Geometrisches B+P Symbol */}
|
||||
{/* B als zwei übereinander liegende Kreise */}
|
||||
<circle cx="16" cy="14" r="6" stroke="white" strokeWidth="2" fill="none" />
|
||||
<circle cx="16" cy="24" r="6" stroke="white" strokeWidth="2" fill="none" />
|
||||
{/* P als Linie mit Kreis */}
|
||||
<line x1="28" y1="10" x2="28" y2="30" stroke="white" strokeWidth="2" strokeLinecap="round" />
|
||||
<circle cx="28" cy="16" r="5" stroke="white" strokeWidth="2" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showText && (
|
||||
<div>
|
||||
<span className={`font-semibold text-white ${s.text} tracking-tight`}>
|
||||
BreakPilot
|
||||
</span>
|
||||
<span className={`text-white/40 ${s.subtitle} ml-2`}>Studio</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// ICON-ONLY VARIANTEN (für Favicon, App-Icon)
|
||||
// ============================================
|
||||
|
||||
interface IconOnlyProps {
|
||||
variant: 'cupertino' | 'glass' | 'bento'
|
||||
size?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function BPIcon({ variant, size = 40, className = '' }: IconOnlyProps) {
|
||||
const svgSize = `${size}px`
|
||||
|
||||
switch (variant) {
|
||||
case 'cupertino':
|
||||
return (
|
||||
<svg width={svgSize} height={svgSize} viewBox="0 0 40 40" className={className}>
|
||||
<defs>
|
||||
<linearGradient id="cupGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#ef4444" />
|
||||
<stop offset="100%" stopColor="#b91c1c" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="2" y="2" width="36" height="36" rx="8" fill="url(#cupGrad)" />
|
||||
<circle cx="20" cy="20" r="12" fill="rgba(255,255,255,0.15)" />
|
||||
<text x="20" y="25" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold" fontFamily="system-ui">BP</text>
|
||||
{/* Flügel */}
|
||||
<path d="M6 22 L12 20 M28 20 L34 22" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
case 'glass':
|
||||
return (
|
||||
<svg width={svgSize} height={svgSize} viewBox="0 0 40 40" className={className}>
|
||||
<defs>
|
||||
<linearGradient id="glassGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#f87171" />
|
||||
<stop offset="100%" stopColor="#dc2626" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="2" y="2" width="36" height="36" rx="10" fill="url(#glassGrad)" />
|
||||
<rect x="4" y="4" width="32" height="32" rx="8" fill="rgba(255,255,255,0.1)" />
|
||||
<path d="M10 28 L20 8 L30 28 L20 22 Z" fill="rgba(255,255,255,0.9)" />
|
||||
<path d="M14 24 L20 12 L26 24 L20 20 Z" fill="rgba(255,255,255,0.3)" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
case 'bento':
|
||||
return (
|
||||
<svg width={svgSize} height={svgSize} viewBox="0 0 40 40" className={className}>
|
||||
<defs>
|
||||
<linearGradient id="bentoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#ef4444" />
|
||||
<stop offset="100%" stopColor="#991b1b" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="2" y="2" width="36" height="36" rx="8" fill="url(#bentoGrad)" />
|
||||
<circle cx="15" cy="14" r="5" stroke="white" strokeWidth="1.5" fill="none" />
|
||||
<circle cx="15" cy="24" r="5" stroke="white" strokeWidth="1.5" fill="none" />
|
||||
<line x1="27" y1="10" x2="27" y2="30" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<circle cx="27" cy="15" r="4" stroke="white" strokeWidth="1.5" fill="none" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// LOGO SHOWCASE KOMPONENTE
|
||||
// Zeigt alle drei Varianten zum Vergleich
|
||||
// ============================================
|
||||
|
||||
export function LogoShowcase() {
|
||||
return (
|
||||
<div className="p-8 space-y-12">
|
||||
<h2 className="text-2xl font-bold text-center mb-8">Logo-Varianten</h2>
|
||||
|
||||
{/* Variante A */}
|
||||
<div className="bg-white rounded-2xl p-8 shadow-lg">
|
||||
<h3 className="text-lg font-semibold mb-6 text-slate-700">A: Cupertino Clean</h3>
|
||||
<div className="flex items-center gap-12">
|
||||
<LogoCupertinoClean size="sm" />
|
||||
<LogoCupertinoClean size="md" />
|
||||
<LogoCupertinoClean size="lg" />
|
||||
<LogoCupertinoClean size="xl" />
|
||||
<div className="flex gap-4">
|
||||
<BPIcon variant="cupertino" size={32} />
|
||||
<BPIcon variant="cupertino" size={48} />
|
||||
<BPIcon variant="cupertino" size={64} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Variante B */}
|
||||
<div className="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 rounded-2xl p-8">
|
||||
<h3 className="text-lg font-semibold mb-6 text-white/80">B: Glassmorphism Pro</h3>
|
||||
<div className="flex items-center gap-12">
|
||||
<LogoGlassmorphism size="sm" />
|
||||
<LogoGlassmorphism size="md" />
|
||||
<LogoGlassmorphism size="lg" />
|
||||
<LogoGlassmorphism size="xl" />
|
||||
<div className="flex gap-4">
|
||||
<BPIcon variant="glass" size={32} />
|
||||
<BPIcon variant="glass" size={48} />
|
||||
<BPIcon variant="glass" size={64} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Variante C */}
|
||||
<div className="bg-black rounded-2xl p-8">
|
||||
<h3 className="text-lg font-semibold mb-6 text-white/80">C: Bento Style</h3>
|
||||
<div className="flex items-center gap-12">
|
||||
<LogoBento size="sm" />
|
||||
<LogoBento size="md" />
|
||||
<LogoBento size="lg" />
|
||||
<LogoBento size="xl" />
|
||||
<div className="flex gap-4">
|
||||
<BPIcon variant="bento" size={32} />
|
||||
<BPIcon variant="bento" size={48} />
|
||||
<BPIcon variant="bento" size={64} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user