Uberblick

Die Matzka Cloud Website hat ein vollstandiges Redesign erhalten. Das neue Design-System basiert auf dem Glassmorphism-Trend, kombiniert mit einem dunklen "Homelab"-Farbschema und modernen Animationen.

Design-Prinzipien

• Dark-First: Dunkler Hintergrund fur optimale Lesbarkeit
• Glassmorphism: Semi-transparente Elemente mit Blur-Effekten
• Electric Cyan: Leuchtende Akzentfarbe fur CTAs und Highlights
• Smooth Animations: Subtile Bewegungen fur bessere UX

Homelab Theme - Farbpalette

Das neue Farbschema wurde speziell fur das Homelab-Branding entwickelt:

Farbe	Hex-Code	Verwendung
Background Main	#050a14	Haupthintergrund (tiefes Dunkelblau)
Background Secondary	#0f172a	Cards, Surfaces
Electric Cyan	#00e1ff	Primary Accent, CTAs, Links
Accent Blue	#3b82f6	Sekundare Akzente
Text Primary	#f8fafc	Haupttext (fast weiss)
Text Muted	#94a3b8	Sekundarer Text
Border Subtle	#1e293b	Subtile Rahmen

Glassmorphism-Effekte

Das Design nutzt drei Varianten von Glass-Effekten:

Glass Standard

.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

Glass Strong (Header, wichtige Cards)

.glass-strong {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

Glass Subtle (Inputs, sekundare Elemente)

.glass-subtle {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

Neue Komponenten

GlassCard

Wiederverwendbare Card-Komponente mit Glassmorphism:

<GlassCard variant="strong" hover glow>
  <h2>Titel</h2>
  <p>Inhalt...</p>
</GlassCard>

AnimatedSection

Scroll-triggered Animationen mit Framer Motion:

<AnimatedSection animation="fadeUp" delay={0.2}>
  <ServiceCard />
</AnimatedSection>

BackgroundBlobs

Animierte Gradient-Orbs im Hintergrund:

<BackgroundBlobs variant="hero" />
// Varianten: "hero" | "section" | "subtle"

HeroSection mit Parallax

Die Hero-Section nutzt useScroll und useTransform von Framer Motion fur Parallax-Effekte beim Scrollen.

Animationen

Element	Animation	Trigger
Hero Content	Gestaffeltes fadeUp	Page Load
Background Blobs	CSS blob Animation (20s)	Kontinuierlich
Service Cards	fadeUp mit Delay	Scroll InView
Glass Cards	translateY + Glow	Hover
Chat Button	pulse-glow (3s cycle)	Kontinuierlich
Page Transitions	Opacity + Y fade	Route Change

Pulse-Glow Animation

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 225, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 225, 255, 0.5),
                0 0 60px rgba(59, 130, 246, 0.2);
  }
}

Technische Umsetzung

CSS Custom Properties

Alle Farben und Effekte sind als CSS Variables definiert:

:root {
  --background: #050a14;
  --foreground: #f8fafc;
  --primary: #00e1ff;
  --glow-cyan: #00e1ff;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-blur: 16px;
  --gradient-primary: linear-gradient(135deg,
    #050a14 0%, #0f172a 50%, #0a101f 100%);
}

Tailwind CSS 4 Utilities

Custom Utility-Klassen in @layer utilities:

• .glass - Standard Glassmorphism
• .glass-strong - Starkerer Effekt
• .glass-subtle - Subtiler Effekt
• .glass-hover - Hover-Animation
• .text-gradient - Cyan-Blue Gradient Text
• .nav-link-animated - Animierte Underline

Performance-Optimierungen

Browser-Kompatibilitat

• backdrop-filter: Chrome 76+, Firefox 103+, Safari 9+
• CSS Variables: Alle modernen Browser
• Framer Motion: Alle modernen Browser

Fazit

Das neue Glassmorphism-Design verleiht der Matzka Cloud Website einen modernen, professionellen Look. Die Kombination aus dunklem Theme, leuchtenden Cyan-Akzenten und subtilen Animationen schafft eine einladende Atmosphare fur Besucher.