Tailwind CSS Hero Components

                            <section class="relative py-20 overflow-hidden">
  <!-- Background Image -->
  <div class="absolute inset-0 z-0">
    <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0" alt="Background" class="w-full h-full object-cover filter brightness-50">
  </div>
  
  <!-- Content -->
  <div class="relative z-10 max-w-7xl mx-auto px-4 text-center">
    <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
      Innovative Technology Solutions
    </h1>
    <p class="text-xl text-gray-200 mb-8 max-w-3xl mx-auto">
      Leverage our technical expertise and innovative thinking to give your business an unparalleled competitive advantage.
    </p>
    <div class="flex flex-wrap justify-center gap-4">
      <a href="#" class="inline-block bg-white text-blue-800 px-6 py-3 rounded-lg shadow hover:bg-gray-100 transition">
        Learn More
      </a>
      <a href="#" class="inline-block bg-transparent text-white border border-white px-6 py-3 rounded-lg hover:bg-white/10 transition">
        Contact Us
      </a>
    </div>
  </div>
</section> 
                        

                            <section class="relative h-screen overflow-hidden">
  <!-- Video Background -->
  <div class="absolute inset-0 z-0">
    <video autoplay loop muted playsinline class="w-full h-full object-cover filter brightness-[0.3]">
      <source src="https://assets.mixkit.co/videos/preview/mixkit-business-people-walking-around-the-office-in-slow-motion-13742-large.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  
  <!-- Gradient Overlay for better text readability -->
  <div class="absolute inset-0 bg-gradient-to-b from-black/50 to-black/80 z-[1]"></div>
  
  <!-- Content -->
  <div class="relative z-10 h-full flex items-center justify-center">
    <div class="text-center max-w-5xl mx-auto px-6">
      <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
        <span class="block opacity-0 animate-[fadeInUp_1s_ease_0.3s_forwards]">Lead</span>
        <span class="block opacity-0 animate-[fadeInUp_1s_ease_0.6s_forwards]">Digital</span>
        <span class="block opacity-0 animate-[fadeInUp_1s_ease_0.9s_forwards]">Revolution</span>
      </h1>
      <p class="text-xl text-gray-200 mb-10 max-w-3xl mx-auto opacity-0 animate-[fadeInUp_1s_ease_1.2s_forwards]">
        Our technical team will help your business navigate the digital wave and create unlimited business value.
      </p>
      <div class="flex flex-wrap justify-center gap-4 opacity-0 animate-[fadeInUp_1s_ease_1.5s_forwards]">
        <a href="#" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-medium hover:bg-gray-100 transition-colors shadow-lg">
          Consult Now
        </a>
        <a href="#" class="inline-block bg-transparent text-white border-2 border-white px-8 py-4 rounded-full font-medium hover:bg-white/10 transition-colors">
          Learn More
        </a>
      </div>
    </div>
  </div>
  
  <!-- Scroll Down Indicator -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 text-white animate-bounce opacity-80">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </div>
</section>
                        

                            <section class="bg-white py-12 md:py-20">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center gap-10">
      <!-- Left Content -->
      <div class="w-full md:w-1/2">
        <h5 class="text-blue-600 font-semibold mb-2">Professional Team · Excellence in Service</h5>
        <h1 class="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
          Creating Trendsetting<br />Digital Experiences
        </h1>
        <p class="text-lg text-gray-600 mb-8">
          We are committed to providing the most innovative digital solutions to help businesses achieve digital transformation, enhancing brand value and market competitiveness.
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="#" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg shadow hover:bg-blue-700 transition">
            Start Project
          </a>
          <a href="#" class="inline-flex items-center text-blue-600 font-medium hover:underline">
            <span>Explore Our Services</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
      
      <!-- Right Image -->
      <div class="w-full md:w-1/2 mt-10 md:mt-0">
        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692" alt="Working Team" class="w-full h-auto rounded-lg shadow-xl">
      </div>
    </div>
  </div>
</section> 
                        

                            <section class="bg-gray-900 py-16 md:py-24">
  <div class="max-w-7xl mx-auto px-4 text-center">
    <span class="inline-block px-3 py-1 bg-blue-900/50 text-blue-300 rounded-full text-sm font-medium mb-6">
      New Release
    </span>
    <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
      Explore Infinite Possibilities of Future <span class="text-blue-400">Technology</span>
    </h1>
    <p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
      With cutting-edge technology and innovative thinking, we help enterprises bridge the digital divide and embark on an intelligent future.
    </p>
    <div class="flex flex-wrap justify-center gap-4">
      <a href="#" class="inline-block bg-blue-500 text-white px-8 py-4 rounded-lg font-medium hover:bg-blue-600 transition-colors shadow-lg shadow-blue-500/20">
        Start Experience
      </a>
      <a href="#" class="inline-flex items-center px-8 py-4 rounded-lg border border-gray-700 text-gray-300 hover:bg-gray-800 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
        </svg>
        Watch Demo
      </a>
    </div>
    
    <!-- Statistics -->
    <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="p-6 bg-gray-800 rounded-lg">
        <div class="text-3xl font-bold text-white mb-2">500+</div>
        <div class="text-gray-400">Success Cases</div>
      </div>
      <div class="p-6 bg-gray-800 rounded-lg">
        <div class="text-3xl font-bold text-white mb-2">98%</div>
        <div class="text-gray-400">Client Satisfaction</div>
      </div>
      <div class="p-6 bg-gray-800 rounded-lg">
        <div class="text-3xl font-bold text-white mb-2">24/7</div>
        <div class="text-gray-400">Professional Support</div>
      </div>
    </div>
  </div>
</section> 
                        

                            <section class="bg-gray-100 py-16">
  <div class="max-w-7xl mx-auto px-4 text-center">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
      Welcome to Our Platform
    </h1>
    <p class="text-lg text-gray-600 mb-6 max-w-3xl mx-auto">
      We provide fast, reliable solutions to help you build modern websites easily. Experience our products and enjoy unprecedented convenience.
    </p>
    <a href="#" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg shadow hover:bg-blue-700 transition">
      Get Started
    </a>
  </div>
</section>