Homepage Rooms

Prototype

Notes
Info
HTML
View
Context

No notes defined.

Handle: @mtl-homepage-rooms
Preview:
- With layout
- Component only
Filesystem Path: components/10-projects/mountaineer/02-modules/homepage/homepage-rooms.hbs
References (1): @mtl-card-preview-room
Referenced by (1): @mtl-homepage


        
        <div class="bg-gray-50 py-20 px-4">

    <h2 class="font-mtl-heading text-4xl sm:text-5xl text-red-600 uppercase text-center">
        Comfy Rooms & Fireplace Suites
    </h2>

    <p class="max-w-2xl mx-auto mt-4 text-center text-gray-500">
        Nothing says comfy like; sleep-inducing pillow-top mattresses, a convenient mini-fridge, microwave, and in-room
        coffee station, as well as super-fast fiber optic Wifi.
    </p>

    <div class="mt-12 mx-auto flex flex-col max-w-6xl mx-auto md:grid sm:grid-cols-3 gap-x-8 gap-y-8">

        <div class="">
            <a class="group" href="">

                <div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">

                    <div class="sm:aspect-w-4 sm:aspect-h-3">

                        <img class="w-48 h-full sm:w-full sm:h-full object-center object-cover" src="/dist/images/temp/Mountaineer-Suite-Living-Room.jpg" alt="Random Image">

                    </div>

                    <h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl  tracking-wider text-red-600 uppercase">
                        Mountaineer Suite
                    </h3>

                    <div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">

                        <div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
                            View Details
                        </div>

                    </div>
                </div>

            </a>
        </div>
        <div class="">
            <a class="group" href="">

                <div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">

                    <div class="sm:aspect-w-4 sm:aspect-h-3">

                        <img class="w-48 h-full sm:w-full sm:h-full object-center object-cover" src="/dist/images/temp/Queen-Explorer-LR.jpg" alt="Random Image">

                    </div>

                    <h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl  tracking-wider text-red-600 uppercase">
                        Queen Explorer Suite
                    </h3>

                    <div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">

                        <div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
                            View Details
                        </div>

                    </div>
                </div>

            </a>
        </div>
        <div class="">
            <a class="group" href="">

                <div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">

                    <div class="sm:aspect-w-4 sm:aspect-h-3">

                        <img class="w-48 h-full sm:w-full sm:h-full object-center object-cover" src="/dist/images/temp/KEX.jpg" alt="Random Image">

                    </div>

                    <h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl  tracking-wider text-red-600 uppercase">
                        King Explorer Suite
                    </h3>

                    <div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">

                        <div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
                            View Details
                        </div>

                    </div>
                </div>

            </a>
        </div>
    </div>
</div>


        {{!--{# Homepage rooms section #}--}}
<div class="bg-gray-50 py-20 px-4">

  <h2 class="font-mtl-heading text-4xl sm:text-5xl text-red-600 uppercase text-center">
    Comfy Rooms & Fireplace Suites
  </h2>

  <p class="max-w-2xl mx-auto mt-4 text-center text-gray-500">
    Nothing says comfy like; sleep-inducing pillow-top mattresses, a convenient mini-fridge, microwave, and in-room
    coffee station, as well as super-fast fiber optic Wifi.
  </p>

  {{!--    {# Rooms #}--}}

  <div class="mt-12 mx-auto flex flex-col max-w-6xl mx-auto md:grid sm:grid-cols-3 gap-x-8 gap-y-8">

    {{#each rooms }}
      {{> @mtl-card-preview-room }}
    {{/each}}

  </div>
</div>


        
            
            {
  "rooms": [
    {
      "title": "Mountaineer Suite",
      "image": "/dist/images/temp/Mountaineer-Suite-Living-Room.jpg"
    },
    {
      "title": "Queen Explorer Suite",
      "image": "/dist/images/temp/Queen-Explorer-LR.jpg"
    },
    {
      "title": "King Explorer Suite",
      "image": "/dist/images/temp/KEX.jpg"
    }
  ]
}