Web Components Library

Homepage Perfect Fit

Nav Titlebar with reveal on scroll up

  • uses GSAP to show titlebar when scrolling back up
<div class="slide-up bg-gray-100 py-16 md:py-24 px-4">
    <div class="max-w-4xl mx-auto">

        <h2 class="font-heading tracking-widest uppercase text-4xl text-purple-950 text-center pb-2 border-b border-white">
            Find your <span class="font-heading-bold whitespace-nowrap">Perfect Fit</span>
        </h2>

        <p class="mt-4 text-lg text-center">
            Three sizes of suites, one that fits just right. A great night's sleep, fully outfitted gourmet
            kitchens, space to put up your feet and relax - just a few things we think are important.
        </p>
    </div>

    <div class="mt-8 max-w-7xl mx-auto">

        <div class="flex flex-col md:flex-row justify-center gap-x-4 lg:gap-x-8 xl:gap-x-10 gap-y-8">

        </div>

    </div>

</div>
 
<div class="slide-up bg-gray-100 py-16 md:py-24 px-4">
  <div class="max-w-4xl mx-auto">

    <h2 class="font-heading tracking-widest uppercase text-4xl text-purple-950 text-center pb-2 border-b border-white">
      Find your <span class="font-heading-bold whitespace-nowrap">Perfect Fit</span>
    </h2>

    <p class="mt-4 text-lg text-center">
      Three sizes of suites, one that fits just right. A great night's sleep, fully outfitted gourmet
      kitchens, space to put up your feet and relax - just a few things we think are important.
    </p>
  </div>

  <div class="mt-8 max-w-7xl mx-auto">

    <div class="flex flex-col md:flex-row justify-center gap-x-4 lg:gap-x-8 xl:gap-x-10 gap-y-8">

      {{!-- room cards --}}

    </div>

  </div>


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