Nav Titlebar with reveal on scroll up

  • uses GSAP to show titlebar when scrolling back up
  • Handle: @swr-feature-with-side-image-suites
  • Preview:
  • Filesystem Path: components/10-projects/summerland/02-modules/feature-with-side-image-suites.hbs
<div class="flex flex-col md:flex-row">

    <div class="w-full md:w-1/2">
        <img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
    </div>

    <div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
        <p class="uppercase text-4xl py-6 text-purple-700">studio suite</p>
        <div class="flex items-center justify-center space-x-6">
            <div class="flex items-center">
                <i class="fas fa-bed py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">sleeps 2</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-chart-area py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">350sq ft</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-utensils py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">kitchen</p>
            </div>
        </div>
        <p class="text-gray-800 py-4 text-lg">The perfect place for two. One large room with everything you need.</p>
        <div class="py-6">
            <button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
        </div>
    </div>

</div>

<div class="flex flex-col md:flex-row-reverse">

    <div class="md:w-1/2">
        <img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
    </div>

    <div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
        <p class="uppercase text-4xl py-6 text-purple-700">play: at the resort</p>
        <div class="flex items-center justify-center space-x-6">
            <div class="flex items-center">
                <i class="fas fa-bed py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">sleeps 4</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-chart-area py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">550sq ft</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-utensils py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">kitchen</p>
            </div>
        </div>
        <p class="text-gray-800 py-4">Expect more space than our studio suite, and a private bedroom. This suite gives you a larger layout for quality down-time.</p>
        <div class="py-6">
            <button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
        </div>
    </div>

</div>
<div class="flex flex-col md:flex-row">

    <div class="w-full md:w-1/2">
        <img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
    </div>
    
    <div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
        <p class="uppercase text-4xl py-6 text-purple-700">studio suite</p>
        <div class="flex items-center justify-center space-x-6">
            <div class="flex items-center">
                <i class="fas fa-bed py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">sleeps 2</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-chart-area py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">350sq ft</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-utensils py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">kitchen</p>
            </div>
        </div>
        <p class="text-gray-800 py-4 text-lg">The perfect place for two.  One large room with everything you need.</p>
        <div class="py-6">
            <button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
        </div>
    </div>

</div>

<div class="flex flex-col md:flex-row-reverse">

    <div class="md:w-1/2">
        <img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
    </div>

    <div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
        <p class="uppercase text-4xl py-6 text-purple-700">play: at the resort</p>
        <div class="flex items-center justify-center space-x-6">
            <div class="flex items-center">
                <i class="fas fa-bed py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">sleeps 4</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-chart-area py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">550sq ft</p>
            </div>
            <div class="flex items-center">
                <i class="fas fa-utensils py-4 text-xl"></i>
                <p class="pl-2 uppercase text-sm">kitchen</p>
            </div>
        </div>
        <p class="text-gray-800 py-4">Expect more space than our studio suite, and a private bedroom.  This suite gives you a larger layout for quality down-time.</p>
        <div class="py-6">
            <button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
        </div>
    </div>

</div>
/* No context defined. */