Web Components Library

Homepage Hero with Video

Nav Titlebar with reveal on scroll up

  • uses GSAP to show titlebar when scrolling back up
<div class="relative" style="background: rgb(2,0,36); background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.5) 100%, rgba(0,212,255,1) 100%);">

    <div class="relative aspect-w-2 aspect-h-2 sm:aspect-w-3 sm:aspect-h-2 md:aspect-w-16 md:aspect-h-9 ie-min-600">
        <picture>
            <source media="(max-width: 640px)" srcset='https://picsum.photos/id/10/1200/1200'>
            <source media="(max-width: 999px)" srcset='https://picsum.photos/id/10/1500/1000'>
            <source media="(min-width: 1000px)" srcset='https://picsum.photos/id/10/2000/1200'>
            <img class="absolute object-cover w-full h-full" src='https://picsum.photos/id/10/1200/1200' alt="alt text" loading="eager">
        </picture>

        <video class="object-cover w-full h-full" src="/images/swr/swr-540p.mp4" autoplay loop muted></video>

        <div class="absolute inset-0 bg-black opacity-20"></div>

    </div>

    <div class="absolute inset-0 flex flex-col items-center justify-center slide-up" style="background: rgb(0,0,0,0.1);">
        <div class="pt-12 max-w-4xl mx-auto text-center text-white leading-tight tracking-wide">

            <p class="mb-4 text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-brisa px-2 leading-10">
                Escape to Summerland
            </p>

            <p class="mb-4 sm:mb-8 text-lg sm:text-xl md:text-2xl uppercase font-semibold ">
                Play, Relax & Savour
            </p>

            <button x-data @click="$dispatch('togglevideo')" class="group mt-6 flex text-white text-sm justify-center items-center mx-auto">
                <svg class="fill-current text-white h-6 w-6 transform group-hover:scale-110 transition duration-300 opacity-75 group-hover:opacity-100 transition duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M12,22c5.514,0,10-4.486,10-10c0-5.514-4.486-10-10-10S2,6.486,2,12C2,17.514,6.486,22,12,22z M10,7l6,5l-6,5V7z"></path>
                </svg>
                <span class="uppercase pl-2">Watch Full Video</span>
            </button>

        </div>
    </div>

    <div class="absolute bottom-0 left-0 right-0">
        <p class="hidden sm:block text-white text-center px-8 py-2 sm:py-4 text-sm sm:text-base opacity-75">Discover our
            Waterfront Resort on a secluded stretch of Okanagan Lake shoreline
        </p>
    </div>

</div>

<div x-data="modalVideo()" @keydown.escape.window="showModal = false" x-init="$watch('showModal', toggleOverflow)">
    <div x-show="showModal" x-cloak x-on:togglevideo.window="showModal = !showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform" x-transition:enter-end="opacity-100 transform" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform" x-transition:leave-end="opacity-0 transform" class="fixed inset-0 bg-black z-50 flex justify-center items-center bg-opacity-90">

        <button @click="showModal = false" class="absolute top-0 right-0 flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100 text-white" aria-label="Close" tabindex="-1">
            <svg class="w-12 h-12 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.57 6.57c-5.205 5.205-5.205 13.643 0 18.849 5.205 5.2 13.643 5.2 18.849 0 5.2-5.21 5.2-13.65 0-18.849-5.21-5.21-13.65-5.205-18.849 0zm18.094 18.094c-4.79 4.78-12.56 4.78-17.341 0-4.79-4.79-4.79-12.56 0-17.341 4.78-4.79 12.56-4.79 17.341 0 4.78 4.78 4.78 12.56 0 17.341z" />
                <path d="M10.722 9.96l-.76.75 5.27 5.27-5.253 5.253.75.75 5.253-5.253 5.253 5.253.75-.76-5.253-5.253 5.27-5.28-.76-.76-5.28 5.27z" />
            </svg>
        </button>
        <div class="">

            <p class="text-white">
                full video here
            </p>

        </div>

    </div>
</div>

<script>
    function modalVideo() {
        return {
            showModal: false
        }
    }
</script>
 
<div class="relative"
     style="background: rgb(2,0,36); background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.5) 100%, rgba(0,212,255,1) 100%);"
>

  <div class="relative aspect-w-2 aspect-h-2 sm:aspect-w-3 sm:aspect-h-2 md:aspect-w-16 md:aspect-h-9 ie-min-600">
    {{> @swr-image-hero }}

    <video class="object-cover w-full h-full" src="/images/swr/swr-540p.mp4" autoplay loop muted></video>

    <div class="absolute inset-0 bg-black opacity-20"></div>

  </div>

  <div class="absolute inset-0 flex flex-col items-center justify-center slide-up"
       style="background: rgb(0,0,0,0.1);">
    <div class="pt-12 max-w-4xl mx-auto text-center text-white leading-tight tracking-wide">

      <p class="mb-4 text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-brisa px-2 leading-10">
        Escape to Summerland
      </p>

      <p class="mb-4 sm:mb-8 text-lg sm:text-xl md:text-2xl uppercase font-semibold ">
        Play, Relax & Savour
      </p>


      <button x-data @click="$dispatch('togglevideo')"
              class="group mt-6 flex text-white text-sm justify-center items-center mx-auto">
        <svg class="fill-current text-white h-6 w-6 transform group-hover:scale-110 transition duration-300 opacity-75 group-hover:opacity-100 transition duration-300"
             xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M12,22c5.514,0,10-4.486,10-10c0-5.514-4.486-10-10-10S2,6.486,2,12C2,17.514,6.486,22,12,22z M10,7l6,5l-6,5V7z"></path>
        </svg>
        <span class="uppercase pl-2">Watch Full Video</span>
      </button>

    </div>
  </div>

  <div class="absolute bottom-0 left-0 right-0">
    <p class="hidden sm:block text-white text-center px-8 py-2 sm:py-4 text-sm sm:text-base opacity-75">Discover our
      Waterfront Resort on a secluded stretch of Okanagan Lake shoreline
    </p>
  </div>

</div>

{{!-- Video Modal --}}

<div x-data="modalVideo()" @keydown.escape.window="showModal = false" x-init="$watch('showModal', toggleOverflow)">
  <div x-show="showModal" x-cloak x-on:togglevideo.window="showModal = !showModal"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0 transform"
       x-transition:enter-end="opacity-100 transform"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100 transform"
       x-transition:leave-end="opacity-0 transform"
       class="fixed inset-0 bg-black z-50 flex justify-center items-center bg-opacity-90"
  >

    {{> @swr-modal-close-button }}

    <div class="">

      <p class="text-white">
        full video here
      </p>

    </div>

  </div>
</div>

<script>
  function modalVideo() {
    return {
      showModal: false
    }
  }
</script>
 
/* No context defined. */