{**
 * 2007-2019 PrestaShop and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}


<div class=" mx-auto h-[50vh] flex flex-col justify-center ">
  <h1 class="lg:font-semibold 
             font-bold 
             lg:text-4xl 
             md:text-2xl 
             text-xl 
             text-center">
      Curate a Perfect Wardrobe with Our Custom-Made Apparel </h1>
  <p class="lg:px-36 
            lg:text-xl 
            text-lg 
            font-medium 
            px-5 
            text-center 
            xl:w-9/12 
            mx-auto 
            pt-8">
      Step into our world of custom-made luxury with Brooks Bingham, offering you Custom Business Shirts, 
      Custom Sport Jackets, Custom Made Tuxedos, and more. </p>
</div>

<div id="js-product-list" class="flex flex-col">
  <div class="products flex flex-wrap">
    {foreach from=$listing.products item="product"}
      {block name='product_miniature'}
        {include file='catalog/_partials/miniatures/product.tpl' product=$product}
      {/block}
    {/foreach}
  </div>

  {block name='pagination'}
    {include file='_partials/pagination.tpl' pagination=$listing.pagination}
  {/block}

  <div class="flex justify-center md:hidden my-8">
    <a href="#js-product-list-header" class="btn btn-secondary font-semibold">
      {l s='Back to top' d='Shop.Theme.Actions'}
    </a>
  </div>
</div>
i

<div class="relative 
            flex 
            mt-16 
            lg:h-2/3
            mx-auto">
    <img class="w-full scale-down" 
         src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/custom_page_banner_image.jpeg" 
         alt="Image">
    <div class="absolute 
                xl:right-56 
                right-4 
                lg:bottom-48 
                bottom-9 
                text-[#000E2A] 
                text-left 
                lg:text-5xl 
                md:text-2xl 
                text-sm 
                lg:font-semibold 
                font-bold">
        <h1> Because You Are Unique. </h1>
        <h1> So Is Your Body… </h1>
     </div>
</div>

<div class="flex flex-col-reverse md:flex-row items-center md:mt-24 mt-16 mx-auto">
    <div class="mx-3 w-full md:w-1/2 text-center md:text-left">
        <h1 class="font-bold lg:text-3xl md:text-2xl text-xl">
            Custom Fit for your Comfort 
        </h1>
        <p class="lg:text-xl font-medium pt-5">
            Custom-made shirts and tuxedos are tailored just for you, offering a fit like no other. 
            Experience unmatched comfort and style with our tailored suits, celebrating your uniqueness.
        </p>
        <a class="all-product-link text-xl font-bold mt-8 flex items-center justify-center md:justify-start" 
           href="https://brooksbingham.com/17-custom-made-clothing"> 
           Design Your Suit
            <svg xmlns="http://www.w3.org/2000/svg" 
                 class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" 
                 width="24" 
                 height="24" 
                 viewBox="0 0 24 24" 
                 stroke-width="2" 
                 stroke="currentColor" 
                 fill="none" 
                 stroke-linecap="round" 
                 stroke-linejoin="round">
                <path stroke="none" 
                      d="M0 0h24v24H0z" 
                      fill="none"/>
                <path d="M9 6l6 6l-6 6" />
            </svg>
        </a>
    </div>
    <div class="w-full md:w-1/2">
        <img class="image p-3 object-cover w-full" 
             src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg">
    </div>
</div>



<div class="flex 
            mt-20 
            md:mt-24
            md:flex-row 
            flex-col
            items-center
            mx-auto">
    <div class="w-full md:w-1/2">
      <img class="image   
                p-3 
                object-cover 
                w-full" 
         src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg">
     </div>     
    <div class="mx-3 w-full md:w-1/2 text-center md:text-left">
      <h1 class="font-bold 
                 lg:text-3xl 
                 md:text-2xl 
                 text-xl">
          Not Just Made-To-Order </h1>
      <p class="lg:text-xl 
                font-medium 
                pt-5">
         Our Custom Designed Suits are made to last. Enjoy a personalized, custom-fit experience that not only sets you apart  
         from ready-to-wear options but is also designed to be durable.</p>
      <a class="all-product-link 
                text-xl 
                font-bold 
                mt-8 
                flex 
                items-center
                justify-center
                md:justify-start" 
         href="https://brooksbingham.com/17-custom-made-clothing"> Design Your Suit
       <svg xmlns="http://www.w3.org/2000/svg" 
            class="icon 
                   stroke-gray-600 
                   stroke-[3px] 
                   icon-tabler 
                   icon-tabler-chevron-right" 
            width="24" 
            height="24" 
            viewBox="0 0 24 24" 
            stroke-width="2" 
            stroke="currentColor" 
            fill="none" 
            stroke-linecap="round" 
            stroke-linejoin="round">
        <path stroke="none" 
              d="M0 0h24v24H0z" 
              fill="none"/>
        <path d="M9 6l6 6l-6 6" /></svg>
      </a>
     </div>
</div>





<div class="mx-auto">
  <div class="max-w-screen-lg 
              mx-auto 
              px-4 
              sm:px-6 
              flex 
              flex-col
              lg:px-8 
              justify-between 
              my-20">
    <div class="center pb-6">
      <h2 class="text-4xl 
                 font-bold 
                 text-center">
          Customize Your Apparel in 3 Steps: </h2>
     </div>
    <div class="mt-19">
        <ul class="md:grid 
                   md:grid-cols-3 
                   md:gap-10 
                   gap-12">
            <li class="bg-gray-100 
                       p-5 
                       pb-10 
                       text-center">
              <div class="flex 
                          flex-col 
                          items-center">
                <div>
                  <img class="w-full 
                              lg:w-80 
                              h-auto 
                              pt-4 
                              pb-3" 
                       src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg" alt="Select the Fabric">
                  </div>
                <div class="mt-4">
                  <h4 class="text-xl 
                             leading-6 
                             font-bold 
                             text-gray-900 
                             pb-2">
                      Select the Fabric </h4>
                  <p class="mt-3 
                             font-semibold 
                            text-lg 
                            leading-6 
                            text-gray-500">
                      Choose from a wide range of trendy fabrics updated every seasons </p>
                 </div>
               </div>
            </li>

           <li class="bg-gray-100 
                     p-5 
                     pb-10 
                     text-center 
                     md:mt-0 
                     mt-8">
            <div class="flex 
                        flex-col 
                        items-center">
              <div>
                <img class="w-full 
                            lg:w-80 
                            h-auto 
                            pt-4 
                            pb-3" 
                    src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_892-min.jpg" alt="Finalize the Design">
                </div>
              <div class="mt-4">
                <h4 class="text-xl 
                           leading-6 
                           font-bold 
                           text-gray-900 
                           pb-2">
                    Finalize the Design </h4>
                <p class="mt-3 
                          text-lg 
                          font-semibold 
                          leading-6 
                          text-gray-500">
                    Personalize details like lapels, pockets, and lining through online platform. </p>
                </div>
              </div>
          </li>

         <li class="bg-gray-100 
                    p-5 pb-10 
                    text-center 
                    md:mt-0 
                    mt-8">
            <div class="flex 
                        flex-col 
                        items-center">
              <div>
                <img class="w-full 
                            lg:w-80 
                            h-auto 
                            pt-4 
                            pb-3" 
                     src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/20-06-23%20Brooks%20Bingham%20Summer_992-min.jpg" alt="Get Measured">
                </div>
              <div class="mt-4">
                <h4 class="text-xl 
                         leading-6 
                         font-bold 
                         text-gray-900 
                         pb-2">
                    Get Measured </h4>
                <p class="mt-3 
                        text-lg 
                        font-semibold 
                        leading-6 
                        text-gray-500">
                  Ensure your custom apparel fits you flawlessly by getting measured. </p>
               </div>
             </div>
          </li>
        </ul>
      </div>
  </div>
</div>
