AndrewTaras/profpak-landing – ReFaktorierung

ReFaktorierung von HTML-Komponenten

Wann anwenden

• Der Benutzer sendet fertigen HTML-Code und bittet um Verbesserung.
• Der Benutzer bittet um Überprüfung der Komponente auf Responsivität, Barrierefreiheit und Leistung.
• Der Benutzer bittet um Hinzufügen von Animationen, Änderung der Typografie oder Verstärkung der visuellen Darstellung.

Prozess

1. Erhalte den aktuellen HTML-Code der Komponente.
2. Erhalte die Liste der Verbesserungen vom Benutzer. Wenn keine Liste angegeben ist, arbeite nach den untenstehenden Prioritäten.
3. Erhalte die bestehende Struktur – schreibe nicht von Grund auf neu.
4. Gib das aktualisierte HTML sowie das nötige CSS/JS zurück (falls erforderlich).

Prioritäten der Verbesserungen (nach Wichtigkeit)

1. Typografie

• Überschriften: font-heading font-black tracking-tight, Größen text-4xl md:text-6xl
• Text: leading-relaxed text-slate-600
• Vermeide hängende Zeilen – verwende text-balance wo nötig
• Überprüfe den Kontrast: dunkler Text auf hellem Hintergrund, heller Text auf dunklem Hintergrund

2. Mikroanimationen

• Einblendung beim Scrollen: Klasse section-reveal (bereits in der Vorlage vorhanden)
• Hover auf Karten: hover:-translate-y-1 hover:shadow-xl transition-all
• Hover auf Buttons: hover:-translate-y-0.5 transition
• Icons bei Hover: group-hover:scale-110 transition-transform

3. Responsivität

• Überprüfung bei 360px: kein horizontaler Scroll, alle Elemente passen
• Überprüfung bei 768px: Grids wechseln auf 2 Spalten
• Überprüfung bei 1440px: Inhalt dehnt sich nicht über max-w-7xl aus
• Falls nötig – verwende clamp() für Schriftgrößen

4. Barrierefreiheit (a11y)

• Semantische Tags anstelle von <div>
• aria-label auf icon-basierten Buttons
• Fokus-Stile: focus:ring-2 focus:ring-industrial-orange focus:outline-none
• alt bei allen Bildern, aria-hidden="true" bei dekorativen Icons

5. Leistung

• Entferne nicht verwendete Tailwind-Klassen
• Stelle sicher, dass alle Bilder loading="lazy" verwenden
• Füge width und height bei Bildern hinzu (verhindert CLS)
• Vermeide doppeltes CSS – verwende Tailwind-Utilities

Antwortformat

Gib in dieser Reihenfolge zurück:

1. HTML-Block – aktualisierter Code der Komponente (in ```html-Umrandung, um das Kopieren zu erleichtern)
2. Änderungsliste – kurze, 3–5 Punkte, was genau verbessert wurde
3. Zusätzliches CSS/JS – falls hinzugefügt, als separater Block mit Hinweis, wo es platziert werden soll

Beispielaufruf

Benutzer:

Verbessere die Hero-Komponente: stärkere Typografie, Einblendungsanimation der Bullet-Punkte, Responsivität auf 360px. Hier ist der Code: [HTML]

Du:

<section>...aktualisierter Code...</section>

Änderungen:

• Überschrift: verstärkt auf text-5xl md:text-7xl font-black tracking-tight
• section-reveal auf Bullets hinzugefügt, mit Verzögerung über style="animation-delay: Xms"
• Grid der Bullets überarbeitet auf grid-cols-1 sm:grid-cols-2 md:grid-cols-4
• Auf 360px geprüft – kein Scrollen
• aria-label auf CTA-Buttons hinzugefügt

Zusätzliches CSS (in src/styles/custom.css):

.hero-bullet { animation: reveal .8s ease-out both; }