← Back

Hero

Pitch Pitch Rooms Events Hall Sports Track Court Field Facility Venue League Membership booking

The Leading Online Solution for Booking, Payments, Facility Management, Events, Leagues, and more.

Code:

<section class="hero relative">
  <div class="absolute z-0 overflow-hidden inset-0 after:content-[''] after:inset-0 after:absolute after:bg-zinc-950/80">
  
    
      <img src="/assets/images/hero/hero-1.webp" class="absolute inset-0 w-full h-full object-cover hero-image">
    
  
    
      <img src="/assets/images/hero/hero-2.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-3.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-4.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-5.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-6.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-7.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-8.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-9.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-10.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-11.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
    
      <img src="/assets/images/hero/hero-12.webp" class="absolute inset-0 w-full h-full object-cover hero-image opacity-0">
    
  
  </div>

  <header class="flex flex-col space-y-6 p-5 md:p-10 lg:p-20 xl:p-32 mt-4 z-10">
    <h1 class="h4 sm:h3 md:h2 lg:h1 2xl:display">
      <span class="block relative overflow-hidden pb-3 md:pb-4 2xl:pb-5">
        <span class="invisible">Pitch</span>
        
          
          <span class="text-mint-500 bg-mint-500 bg-transparent absolute top-0 left-0 hero-title" data-theme="mint-500">Pitch</span>
          
        
          
          <span class="text-sky-500 bg-sky-500 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="sky-500">Rooms</span>
          
        
          
          <span class="text-amber-500 bg-amber-500 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="amber-500">Events</span>
          
        
          
          <span class="text-lemon-500 bg-lemon-500 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="lemon-500">Hall</span>
          
        
          
          <span class="text-lime-500 bg-lime-500 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="lime-500">Sports</span>
          
        
          
          <span class="text-orange-500 bg-orange-500 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="orange-500">Track</span>
          
        
          
          <span class="text-green-500 bg-green-500 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="green-500">Court</span>
          
        
          
          <span class="text-green-300 bg-green-300 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="green-300">Field</span>
          
        
          
          <span class="text-amber-300 bg-amber-300 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="amber-300">Facility</span>
          
        
          
          <span class="text-purple-400 bg-purple-400 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="purple-400">Venue</span>
          
        
          
          <span class="text-cyan-400 bg-cyan-400 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="cyan-400">League</span>
          
        
          
          <span class="text-fuchsia-500 bg-fuchsia-500 bg-transparent absolute top-0 left-0 hero-title opacity-0" data-theme="fuchsia-500">Membership</span>
          
        
      </span>
      <span class="block -mt-3 md:-mt-4 xl:-mt-5">booking</span>
    </h1>

    <p class="text-base">The Leading Online Solution for Booking, Payments, Facility Management, Events, Leagues, and more.</p>

    <div class="flex flex-wrap gap-y-3 md:space-x-3 mt-2 hero-button-container text-mint-500">
      <button class="button button--primary rounded-full w-full md:w-auto text-inherit bg-current transition-all duration-500">
        <p class="text-zinc-950 opacity-75">Get started</p>
      </button>
      <button class="button button--secondary rounded-full w-full md:w-auto text-inherit border-current transition-all duration-500">
        <p class="text-white">Book a demo</p>
      </button>
    </div>
  </header>
</section>

const titles = document.querySelectorAll('.hero-title');
const images = document.querySelectorAll('.hero-image');
const delay = 3500;

const heroButtonContainer = document.querySelector('.hero-button-container');

if (titles.length > 0) {
  function loop(titles, delay) {
    let index = 0;
    let itemPrevious = null;
    let themePrevious = 'mint-500';

    let imagePrevious = null;

    function processItem() {
      const itemCurrent = titles[index];
      const themeCurrent = titles[index].getAttribute("data-theme");

      const imageCurrent = images[index];

      const textThemePrevious = 'text-' + themePrevious;
      const textThemeCurrent = 'text-' + themeCurrent;

      if (itemPrevious && imagePrevious) {
        imagePrevious.classList.remove('hero-image--show');
        imagePrevious.classList.add('hero-image--hide');

        imageCurrent.classList.remove('hero-image--hide');
        imageCurrent.classList.add('hero-image--show');

        itemPrevious.classList.remove('hero-title--show');
        itemPrevious.classList.add('hero-title--hide');

        itemCurrent.classList.remove('hero-title--hide');
        itemCurrent.classList.add('hero-title--show');
      }
      
      heroButtonContainer.classList.replace(textThemePrevious, textThemeCurrent);

      imagePrevious = imageCurrent;
      itemPrevious = itemCurrent;
      themePrevious = themeCurrent;
      index = (index + 1) % titles.length;

      // Delay before looping 
      setTimeout(processItem, delay);
    }

    processItem();
  }
  loop(titles, delay);
}