Baue eine Conversion-Landingpage
Erstelle eine conversion-starke Landingpage
Eine Conversion-Landingpage kombiniert überzeugende Botschaften, klare Vorteile, Social Proof und einen starken Call-to-Action, um Besucher zum Handeln zu bewegen — ob Anmeldung, Download oder Kauf.
In dieser Lektion baust du eine komplette Marketing-Landingpage mit Headline, Wertversprechen, drei Vorteilskarten, einem Kunden-Testimonial und einer CTA-Sektion. Am Ende hast du eine professionelle Seite, die bereit ist, echte Conversions zu liefern.
Anweisungen
Erstelle eine Hero-Sektion mit einer h1-Headline und einer Subheadline in einem farbigen Container (section-Tag mit Hintergrund-Gradient)
Tipp: Nutze: `<section class="py-20 px-4 bg-gradient-to-r from-indigo-600 to-blue-600 text-white text-center"><h1 class="text-5xl font-bold mb-4">Headline</h1><p class="text-xl">Subheadline</p></section>`
Füge drei Vorteilskarten in einem Grid-Layout hinzu. Jede Karte enthält ein Emoji, einen Vorteilstitel und eine Beschreibung
Füge eine Testimonial-Sektion mit einem blockquote sowie Name und Titel des Kunden hinzu
Füge unten eine CTA-Sektion mit h2-Headline, Beschreibung und einem großen Button hinzu
Sorge mit md:-Breakpoints für Grid und Textgrößen dafür, dass das Layout responsiv ist
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Erstelle eine Hero-Sektion mit einer h1-Headline und einer Subheadline in einem farbigen Container (section-Tag mit Hintergrund-Gradient)