SnippetUI
← Back to snippets

Split-Hero-Bereich

Kräftige Typografie und visuelle Elemente sind in einen linken und einen rechten Abschnitt unterteilt, wobei ein Heldenabschnitt beim Laden eingeschoben wird.

HTMLTailwind CSS

Vorschau

New Version 2.0 Released

Create digital experiences that matter.

Elevate your brand with our cutting-edge design system. Build faster, scale easier, and deliver unparalleled user experiences.

User 1User 2User 3
+2k

Trusted by over 2,000 forward-thinking teams.

Anwendungsfälle und Funktionen

  • SaaS- und Produkt-Landingpages: Ideal für die effektive Kommunikation von Kernbotschaften und visuellen Bildern.

  • Geteiltes Layout: Teilen Sie den Bildschirm in zwei Hälften, um die Aufmerksamkeit des Benutzers durch kontrastierende Texte und Bilder zu erregen.

  • Slide-in-Animation: Elemente werden beim Laden der Seite von links und rechts eingeblendet, was für ein dynamisches und modernes Erscheinungsbild sorgt.

  • Glassmorphism-Element: Übernimmt eine Hintergrundunschärfe (Backdrop Blur) im rechten Mockup-Fenster, um eine schöne Benutzeroberfläche mit Tiefe zu erstellen.

Kernpunkte von Design und UX (Design & UX)

  • Fette Typografie: Überschriften sind fett, verwenden größere Schriftgrößen und werden durch Text mit Farbverlauf akzentuiert.

  • Klarer Call-to-Action (CTA): Unterscheiden Sie visuell zwischen primären und sekundären Schaltflächen, um Benutzer zum Handeln zu ermutigen.

  • Social Proof: Um die Vertrauenswürdigkeit zu zeigen, haben wir einen Abschnitt eingefügt, der das Benutzersymbol und die Anzahl der Abonnenten anzeigt.

  • Responsives Design: Entwickelt für die vertikale (Stack)-Anzeige auf Mobilgeräten und die horizontale (Split)-Anzeige auf Tablets und größeren Bildschirmbreiten.

So passen Sie es an (Anpassungsanleitung)

  • Farbschemata und Farbverläufe: Ändern Sie Farbklassen wie „von-indigo-600“ bis „zu-lila-800“, um sie an Ihre Markenfarben anzupassen.

  • Visual auf der rechten Seite: Zeigt derzeit ein mit CSS erstelltes Modell an, Sie können es jedoch durch das „img“-Tag eines tatsächlichen Produktbilds oder einer tatsächlichen Illustration ersetzen.

  • Animationsanpassung: Sie können die Geschwindigkeit und Bewegung der Animation anpassen, indem Sie den Wert von „@keyframes“ im „style“-Tag oder die Zeit der „animation“-Eigenschaft des Inline-Stils ändern.

Implementierungscode (Implementierung)

<div class="relative min-h-screen flex flex-col md:flex-row bg-slate-900 text-white overflow-hidden font-sans w-full">

<!-- Left Content -->

<div class="w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 lg:p-24 z-10" style="animation: slideInLeft 1s ease-out forwards;">

  <div class="max-w-xl">

    <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">

      <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>

      <span>New Version 2.0 Released</span>

    </div>

    <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-6">

      Create <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">digital experiences</span> that matter.

    </h1>

    <p class="text-lg md:text-xl text-slate-400 mb-8 leading-relaxed">

      Elevate your brand with our cutting-edge design system. Build faster, scale easier, and deliver unparalleled user experiences.

    </p>

    <div class="flex flex-col sm:flex-row gap-4">

      <button class="px-8 py-4 rounded-full bg-white text-slate-900 font-bold text-lg hover:bg-slate-100 transition-transform hover:-translate-y-1 hover:shadow-xl hover:shadow-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900">

        Get Started Free

      </button>

      <button class="px-8 py-4 rounded-full bg-slate-800 text-white font-bold text-lg border border-slate-700 hover:bg-slate-700 hover:border-slate-600 transition-all focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900 flex items-center justify-center gap-2">

        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

        Watch Demo

      </button>

    </div>

    

    <div class="mt-12 flex items-center gap-6 text-slate-500 text-sm">

      <div class="flex -space-x-3">

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=1" alt="User 1" />

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=2" alt="User 2" />

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=3" alt="User 3" />

        <div class="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-xs font-bold text-white">+2k</div>

      </div>

      <p>Trusted by over 2,000 forward-thinking teams.</p>

    </div>

  </div>

</div>



<!-- Right Visual -->

<div class="w-full md:w-1/2 relative min-h-[50vh] md:min-h-screen" style="animation: slideInRight 1s ease-out forwards;">

  <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-800 overflow-hidden">

    <div class="absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-tr from-pink-500 to-orange-400 blur-3xl opacity-50 mix-blend-overlay"></div>

    <div class="absolute bottom-[10%] -left-[20%] w-[60%] h-[60%] rounded-full bg-gradient-to-tr from-blue-500 to-teal-400 blur-3xl opacity-40 mix-blend-overlay"></div>

    

    <!-- Mockup Window -->

    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] max-w-lg rounded-2xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500">

      <div class="flex items-center px-4 py-3 border-b border-white/10 bg-white/5">

        <div class="flex space-x-2">

          <div class="w-3 h-3 rounded-full bg-red-500"></div>

          <div class="w-3 h-3 rounded-full bg-yellow-500"></div>

          <div class="w-3 h-3 rounded-full bg-green-500"></div>

        </div>

      </div>

      <div class="p-6">

        <div class="h-4 w-1/3 bg-white/20 rounded mb-4"></div>

        <div class="h-8 w-3/4 bg-white/20 rounded mb-6"></div>

        <div class="space-y-3">

          <div class="h-2 w-full bg-white/10 rounded"></div>

          <div class="h-2 w-full bg-white/10 rounded"></div>

          <div class="h-2 w-5/6 bg-white/10 rounded"></div>

        </div>

        <div class="mt-8 flex gap-3">

          <div class="h-10 w-24 bg-indigo-500 rounded-lg"></div>

          <div class="h-10 w-24 bg-white/10 rounded-lg"></div>

        </div>

      </div>

    </div>

  </div>

</div>



<style>
@keyframes slideInLeft {

    from { opacity: 0; transform: translateX(-50px); }

    to { opacity: 1; transform: translateX(0); }

  }

  @keyframes slideInRight {

    from { opacity: 0; transform: translateX(50px); }

    to { opacity: 1; transform: translateX(0); }

  }
</style>

</div>

Browser-Unterstützung

| Browser | Supportstatus | Notizen |

|:---:|:---:|:---|

| Google Chrome | ✅ | |

| Apple-Safari | ✅ | Hintergrundunschärfe wird in Safari 9+ | unterstützt

| Mozilla Firefox | ✅ | Volle Unterstützung für Hintergrundunschärfe ab Version 103 |

| Microsoft Edge | ✅ | |