Home
QQ-VVN
Hero simple

Hero simple

hero design simple

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero Navbar

Author QQ-VVN

1.2k

Fork Fullscreen

<div class="relative min-h-screen overflow-hidden bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900">
  
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute -top-40 -left-40 w-80 h-80 bg-purple-500/30 rounded-full filter blur-3xl animate-blob"></div>
    <div class="absolute top-0 -right-20 w-80 h-80 bg-indigo-500/20 rounded-full filter blur-3xl animate-blob animation-delay-2000"></div>
    <div class="absolute bottom-40 left-20 w-80 h-80 bg-blue-500/20 rounded-full filter blur-3xl animate-blob animation-delay-4000"></div>
    <div class="absolute -bottom-40 right-40 w-80 h-80 bg-pink-500/20 rounded-full filter blur-3xl animate-blob animation-delay-3000"></div>
  </div>
  
  
  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4MCIgaGVpZ2h0PSI2NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik03MzkuNSAzOTguNWwtNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4=')] opacity-10"></div>
  
  
  <nav class="relative z-10 px-6 py-6 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <div class="w-10 h-10 bg-gradient-to-tr from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-500/30">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
        </svg>
      </div>
      <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-300">NexusFlow</span>
    </div>
    
    <div class="hidden md:flex items-center space-x-8">
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Ana Sayfa</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Özellikler</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Fiyatlandırma</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Hakkımızda</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">İletişim</a>
    </div>
    
    <div class="flex items-center space-x-4">
      <a href="#" class="px-4 py-2 text-sm text-white bg-transparent border border-indigo-400/30 rounded-lg hover:bg-indigo-500/10 transition-all duration-300">Giriş Yap</a>
      <a href="#" class="px-4 py-2 text-sm text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:from-indigo-500 hover:to-purple-500 shadow-lg shadow-indigo-600/30 transition-all duration-300">Ücretsiz Başla</a>
    </div>
  </nav>
  
  
  <div class="relative z-10 container mx-auto px-6 py-16 md:py-24 flex flex-col md:flex-row items-center">
    
    <div class="md:w-1/2 space-y-8 text-center md:text-left">
      <div class="inline-block px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-sm font-medium">
        <span class="flex items-center">
          <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse mr-2"></span>
          Yeni Nesil Teknoloji Platformu
        </span>
      </div>
      
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight">
        <span class="block text-white">Geleceğin Teknolojisi</span>
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">Bugün Elinizde</span>
      </h1>
      
      <p class="text-gray-300 text-lg md:text-xl max-w-xl">
        Dijital dönüşümünüzü hızlandırın. Yapay zeka destekli çözümlerimizle işletmenizi geleceğe taşıyın ve rekabet avantajı elde edin.
      </p>
      
      <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
        <a href="#" class="px-8 py-4 text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl hover:from-indigo-500 hover:to-purple-500 shadow-lg shadow-indigo-600/30 transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center space-x-2">
          <span>Hemen Başla</span>
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </a>
        
        <a href="#" class="px-8 py-4 text-white bg-transparent border border-indigo-400/30 rounded-xl hover:bg-indigo-500/10 transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center space-x-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <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>
          <span>Demo İzle</span>
        </a>
      </div>
      
      <div class="pt-8">
        <p class="text-gray-400 text-sm mb-4">Güvendikleri için teşekkürler</p>
        <div class="flex flex-wrap items-center justify-center md:justify-start gap-6">
          <img src="https://tailwindui.com/img/logos/tuple-logo-gray-300.svg" alt="Tuple" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
          <img src="https://tailwindui.com/img/logos/mirage-logo-gray-300.svg" alt="Mirage" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
          <img src="https://tailwindui.com/img/logos/statickit-logo-gray-300.svg" alt="StaticKit" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
          <img src="https://tailwindui.com/img/logos/transistor-logo-gray-300.svg" alt="Transistor" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
        </div>
      </div>
    </div>
    
    
    <div class="md:w-1/2 mt-12 md:mt-0 flex justify-center">
      <div class="relative">
        
        <div class="relative z-10 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 backdrop-blur-xl border border-indigo-500/10 rounded-2xl p-1 shadow-2xl shadow-indigo-500/20">
          <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1965&q=80" alt="Dashboard" class="rounded-xl w-full max-w-lg">
        </div>
        
        
        <div class="absolute -top-6 -right-6 w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full filter blur-xl opacity-50 animate-pulse"></div>
        <div class="absolute -bottom-6 -left-6 w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full filter blur-xl opacity-50 animate-pulse animation-delay-2000"></div>
        
        
        <div class="absolute -left-16 top-1/4 bg-gradient-to-br from-gray-900 to-gray-800 border border-indigo-500/20 rounded-lg p-4 shadow-lg shadow-indigo-500/10 backdrop-blur-xl w-48 transform -rotate-6 hover:rotate-0 transition-all duration-300">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
              </svg>
            </div>
            <span class="text-white font-medium">Analitik</span>
          </div>
          <div class="mt-3 text-gray-300 text-sm">Gerçek zamanlı veri analitiği ile işletmenizi izleyin</div>
        </div>
        
        <div class="absolute -right-16 bottom-1/4 bg-gradient-to-br from-gray-900 to-gray-800 border border-indigo-500/20 rounded-lg p-4 shadow-lg shadow-indigo-500/10 backdrop-blur-xl w-48 transform rotate-6 hover:rotate-0 transition-all duration-300">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <span class="text-white font-medium">Performans</span>
          </div>
          <div class="mt-3 text-gray-300 text-sm">%300 daha hızlı yükleme süreleri ve optimizasyon</div>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="absolute bottom-0 left-0 right-0">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full h-auto">
      <path fill="rgba(255,255,255,0.03)" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,224C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
  </div>
</div>

</div>

Related Examples