SnippetUI
← Back to snippets

Bölünmüş Hero Bölümü

Cesur tipografi ve görseller, yük altında kayan bir kahraman bölümü ile sol ve sağ bölümlere ayrılmıştır.

HTMLTailwind CSS

Önizleme

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.

Kullanım Durumları ve Özellikler

  • SaaS ve ürün açılış sayfaları: Önemli mesajların ve görsel görsellerin etkili bir şekilde iletilmesi için idealdir.

  • Bölünmüş Düzen: Metin ve görselleri karşılaştırarak kullanıcının dikkatini çekmek için ekranı ikiye bölün.

  • Kaydırma animasyonu: Sayfa yüklenirken öğeler soldan ve sağdan kayar ve dinamik ve modern bir görünüm kazandırır.

  • Glasmorfizm öğesi: Derinlikli, güzel bir kullanıcı arayüzü oluşturmak için sağ model penceresinde bir arka plan bulanıklığı (Arka Plan Bulanıklığı) kullanılır.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

  • Kalın tipografi: Başlıklar kalındır, daha büyük yazı tipi boyutları kullanılır ve degrade metinle vurgulanır.

  • Net Harekete Geçirici Mesaj (CTA): Kullanıcıları harekete geçmeye teşvik etmek için birincil ve ikincil düğmeler arasında görsel olarak ayrım yapın.

  • Sosyal Kanıt: Güvenilirliği göstermek için kullanıcı simgesini ve abone sayısını gösteren bir bölüm ekledik.

  • Duyarlı tasarım: Mobil cihazlarda dikey olarak (Yığın), tabletlerde ve daha geniş ekran genişliklerinde yatay olarak (Bölünmüş) görüntülenecek şekilde tasarlanmıştır.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

  • Renk şemaları ve degradeler: Markanızın renklerine uyacak şekilde özelleştirmek için “indigo-600”, “mor-800” gibi renk sınıflarını değiştirin.

  • Sağdaki görsel: Şu anda CSS ile oluşturulmuş bir model görüntüleniyor, ancak bunu gerçek bir ürün görselinin veya illüstrasyonunun “img” etiketiyle değiştirebilirsiniz.

  • Animasyon ayarı: “style” etiketindeki “@keyframes” değerini veya satır içi stilin “animation” özelliğinin saatini değiştirerek animasyonun hızını ve hareketini ayarlayabilirsiniz.

Uygulama kodu (Uygulama)

<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>

Tarayıcı Desteği

| Tarayıcı | Destek durumu | Notlar |

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

| Google Chrome | ✅ | |

| Elma Safarisi | ✅ | Arka Plan Bulanıklaştırması Safari 9+‘da desteklenmektedir |

| MozillaFirefox | ✅ | 103 sürümünden itibaren Arka Plan Bulanıklığı için tam destek |

| Microsoft Kenar | ✅ | |