{**
 * 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
 *}
<!doctype html>
<html lang="{$language.iso_code}">

  <head>
    {block name='head'}
      {include file='_partials/head.tpl'}
    {/block}
  </head>

  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5RQJPSV4"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    {block name='hook_after_body_opening_tag'}
      {hook h='displayAfterBodyOpeningTag'}
    {/block}

    {block name='product_activation'}
      {include file='catalog/_partials/product-activation.tpl'}
    {/block}

    <header class="relative flex items-center w-full">
      {block name='header'}
        {include file='_partials/header.tpl'}
      {/block}
    </header>

    {block name='displayBeforeWrapper'}
      {hook h='displayBeforeWrapper'}
    {/block}

    <section class="container mx-auto">
      {block name='breadcrumb'}
        {include file='_partials/breadcrumb.tpl'}
      {/block}

      {block name='wrapperTop'}
        {hook h="displayWrapperTop"}
      {/block}

      {block name="left_column"}
        <div id="left-column" class="col-xs-12 col-sm-4 col-md-3">
          {if $page.page_name == 'product'}
            {hook h='displayLeftColumnProduct'}
          {else}
            {hook h="displayLeftColumn"}
          {/if}
        </div>
      {/block}

      {block name="content_wrapper"}
        <div id="content-wrapper" class="flex w-full">
          {hook h="displayContentWrapperTop"}
          {block name="content"}
            <p>Hello world! This is HTML5 Boilerplate.</p>
          {/block}
          {hook h="displayContentWrapperBottom"}
        </div>
      {/block}

      {if $page.page_name == 'index'}
      <div class="container">
 <h2 class="products-section-title text-2xl font-bold mb-16 mt-20 text-center"> Custom design by you</h2>
 <div  class=" flex md:flex-row flex-col gap-8 lg:mb-32 mb-24">
  <div href="https://brooksbingham.com/module/thob/configurator?id_product=74">
   <a href="https://brooksbingham.com/module/thob/configurator?id_product=74">
   <img class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/111-home_default/business-shirt.jpg"/>
   <h3 class="text-center text-lg pt-4 font-semibold"> Shirts</h3>
   </a>
  </div>

  <div> 
   <a  href="https://brooksbingham.com/module/thob/configurator?id_product=75">
   <img  class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/107-home_default/business-suit.jpg"/>
   <h3 class="text-center text-lg pt-4 font-semibold"> Suits</h3>
   </a>
  </div>

  <div>
   <a href="https://brooksbingham.com/module/thob/configurator?id_product=76">
   <img  class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/108-home_default/sports-jacket.jpg"/>
   <h3 class="text-center text-lg pt-4 font-semibold">Sport Jackets</h3>
   </a>
  </div>

  <div>
   <a href="https://brooksbingham.com/module/thob/configurator?id_product=77">
   <img  class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://stage.brooksbingham.com/112-home_default/tuxedo.jpg"/>
   <h3 class="text-center text-lg pt-4 font-semibold"> Tuxedos</h3>
   </a>
  </div>

 </div>
</div>


<div class="lg:mb-32 mb-24" >
 <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
 <h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you </h3>
 <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/>
</div>

   <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1">
   <div class="row-span-3 col-start-1 row-end-2 relative">
    <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl mb-2 pr-1.5 text-xs lg:p-4">Business Suits for Men</h3>
    <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Make a powerful impression and radiate confidence</h3>
    <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-big%20img.jpg" alt="Tailored business Suits designed for you to make a                         
    powerful impression and radiate confidence." />
    </div>
   <div class="col-span-1 col-start-2 row-span-2  flex relative">
    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 text-end lg:font-bold font-medium lg:text-xl text-xs mb-2 lg:w-full w-32 lg:p-4">Browse through our design</h3>
    <h3 class="absolute bottom-0 right-0 text-lg hide-on-small  p-4">Get inspired with our curated outfit ideas</h3>
    <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img1.png" />
    </div>
    <div class="row-start-1 col-start-2 col-span-1 row-span-1 relative ">
    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl mb-2 text-xs lg:p-4">Get the perfect fit</h3>
    <h3 class="absolute bottom-0 right-0 text-lg p-4 hide-on-small">Get inspired with our curated outfit ideas</h3>
    <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img2.jpg" 
    alt="The future of fashion with our innovative designs. Customization options tailored to your measurements and discover your perfect fit in minutes" />
    </div>
    </div> 
   </div>

   <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1">
   <div class="row-span-3 col-start-2 row-end-2 relative">
    <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium pr-1.5 lg:text-xl mb-2 text-xs lg:p-4">Wear Your Identity</h3>
    <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Fashion that speaks volumes</h3>
    <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-big%20img.jpg" />
    </div>
   <div class="col-span-1 col-start-1 row-span-2  flex relative">
    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl mb-2 text-xs lg:p-4">Timeless Quality </h3>
    <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Fashion that stands the test of time</h3>
    <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg" alt="Invest in enduring fashion with our commitment to quality and 
    durability.From custom-made tuxedos to business suits, each piece stands the test of time." />
    </div>
    <div class="row-start-1 col-start-1 col-span-1 row-span-1 relative ">
    <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 text-end pr-2 lg:font-bold font-medium lg:text-xl mb-2 text-xs lg:p-4">Tailored to your specifications </h3>
    <h3 class="absolute bottom-0 right-0 hide-on-small text-lg p-4">Tailor every detail to match your preferences</h3>
    <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img2.png" /> </div>
    </div> 
   </div>


         <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mt-8 mb-8" href="https://brooksbingham.com/content/9-gallery">
          {l s='View More' d='Shop.Theme.Catalog'}
          <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 class="flex">
         <div class="flex justify-center p-8">
          <div class="md:w-3/5 relative text-center">
            <p class="md:text-3xl text-xl p-4 font-medium"><b class="md:text-4xl text-xl ">“</b>
            <b>BrooksBingham</b> is your destination for custom-tailored menswear, where authenticity is woven into every stitch.<b class="md:text-4xl text-xl">”</b></p>
            
            <p class="text-sm"> Our perfect fit guarantee ensures that every piece you order is tailored to your exact specifications, delivering a perfect fit every time.</p>
          </div>
         </div>
         </div>

      {/if}

      {block name="right_column"}
        <div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
          {if $page.page_name == 'product'}
            {hook h='displayRightColumnProduct'}
          {else}
            {hook h="displayRightColumn"}
          {/if}
        </div>
      {/block}

      {block name='wrapperBottom'}
        {hook h="displayWrapperBottom"}
      {/block}
    </section>

    {block name='displayAfterWrapper'}
      {hook h='displayAfterWrapper'}
    {/block}

    <footer id="footer" class="relative pt-20 lg:pt-24">
      {block name="footer"}
        {include file="_partials/footer.tpl"}
      {/block}
    </footer>

    {block name='javascript_bottom'}
      {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
    {/block}

    {block name='hook_before_body_closing_tag'}
      {hook h='displayBeforeBodyClosingTag'}
    {/block}
  </body>

</html>