SpotlightCards

Inhalt

Card-Grid im Linear-Stil: Ein leuchtender Rand folgt der Mausposition (radial-gradient unter der Kartenfläche), dazu ein subtiles Spotlight auf der Oberfläche. Nutzt CSS Custom Properties und color-mix().

Live Demo

Blitzschnell

Statisch generiert und weltweit über CDN ausgeliefert — Ladezeiten unter einer Sekunde.

DSGVO-konform

Hosting in Deutschland, Zwei-Klick-Consent für externe Inhalte, keine Tracking-Cookies.

Responsive

Perfekte Darstellung auf jedem Gerät — vom Smartphone bis zum 4K-Display.

SEO-optimiert

Saubere Struktur, Meta-Tags und Sitemap — damit Kunden Sie bei Google finden.

Wartungsfrei

Updates, Backups und SSL-Zertifikate übernehmen wir — Sie kümmern sich ums Geschäft.

Persönlicher Support

Direkter Draht statt Ticketsystem: Anruf genügt, wir kümmern uns.

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`cards`	`SpotlightCard[]`	Ja	—	Karten {icon?, title, text, href?}
`columns`	`2 \| 3 \| 4`	Nein	`3`	Anzahl der Spalten (Desktop)
`accentColor`	`string`	Nein	`'#5eead4'`	Akzentfarbe des Spotlight-Rands
`cardBackground`	`string`	Nein	`'#0c1018'`	Hintergrundfarbe der Kartenfläche
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<SpotlightCards
  accentColor="#5eead4"
  columns={3}
  cards={[
    { icon: '⚡', title: 'Blitzschnell', text: 'Statisch generiert, weltweit über CDN ausgeliefert.' },
    { icon: '🔒', title: 'DSGVO-konform', text: 'Hosting in Deutschland, keine Tracking-Cookies.' },
    { icon: '📱', title: 'Responsive', text: 'Perfekt auf jedem Gerät — vom Smartphone bis 4K.' },
  ]}
/>