{**
 * 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='notifications'}
      {include file='_partials/notifications.tpl'}
    {/block}
 
    {block name='wrapperTop'}
      {hook h="displayWrapperTop"}
    {/block}
    
    
    {if $page.page_name == 'index'}

      <div class="container">
        <div class="relative flex items-center">
          <a href="https://brooksbingham.com/3d-configurator?id_product=76">
            <img
              src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooks_bingham_site_banner_compressed.png"
              alt="banner.png" />
          </a>
          <div class="hidden flex flex-col left-8 w-[40%] absolute">
            <h3 class="lg:text-lg md:text-3xl text-sm lg:font-bold font-semibold">Brooks Bingham</h3>
            <h3 class="lg:text-5xl md:text-3xl text-2xl lg:font-bold font-semibold">Black Friday Sale</h3>
          </div>
        </div>
        <h2 class="products-section-title text-2xl font-bold mt-20 text-center">Design in 3D - Choose a product to
          Start Customization</h2>
          <h3 class="text-lg font-semibold text-center mb-12">Tailored to you, at no extra cost.</h3>
        <div class="flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
          <div>
		        <a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=74">
              <img id="shirtImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/111-home_default/business-shirt.jpg" alt="business-shirt.jpg" />
              <div class="flex flex-col pt-4 items-start">
                <div class="flex flex-col items-start">
                  <h3 class="text-center text-lg font-bold">$99.00</h3>
                  <h3 class="hidden text-center line-through text-sm font-medium">$99.00</h3>
                </div>
                <h3 class="text-center text-lg font-light">Shirts</h3>
              </div>
            </a>
          </div>
          <div>
            <a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=75">
              <img id="suitImage"
                  class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
                  src="https://brooksbingham.com/107-home_default/business-suit.jpg" alt="business-suit.jpg" />
              <div class="flex flex-col pt-4 items-start">
                <div class="flex flex-col items-start">
                  <h3 class="text-center text-lg font-bold">$795.00</h3>
                  <h3 class="hidden text-center line-through text-sm font-medium">$795.00</h3>
                </div>
                <h3 class="text-center text-lg font-light">Suits</h3>
              </div>
            </a>
          </div>
          <div>
            <a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=76">
            <img id="sportsjacketImage"
                class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
                src="https://brooksbingham.com/108-home_default/sports-jacket.jpg" alt="sports-jacket.jpg" />
            <div class="flex flex-col pt-4 items-start">
                <div class="flex flex-col items-start">
                  <h3 class="text-center text-lg font-bold">$495.00</h3>
                  <h3 class="hidden text-center line-through text-sm font-medium">$495.00</h3>
                </div>
              <h3 class="text-center text-lg font-light">Sports Jackets</h3>
            </div>
            </a>
          </div>
          <div>
            <a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=77">
              <img id="tuxImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/112-home_default/tuxedo.jpg" alt="tuxedo.jpg" />
              <div class="flex flex-col pt-4 items-start">
                <div class="flex flex-col items-start">
                  <h3 class="text-center text-lg font-bold">$995.00</h3>
                  <h3 class="hidden text-center line-through text-sm font-medium">$995.00</h3>
                </div>
                <h3 class="text-center text-lg font-light">Tuxedos</h3>
              </div>
		        </a>
          </div>
        </div>
      </div>
      <div class="lg:mb-32 mb-20">
        <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
        <h3 class="text-lg font-semibold text-center mb-2">Choose what looks good on you</h3>
        <div class="relative w-full" style="height: calc(100vh - 80px);">
          <iframe class="w-full h-full" src="https://widget.thob.studio/project/dc0fadc7-9dc3-4299-b3f7-4c8b34aeead6"></iframe>
          <div id="widget-instructions-overlay" class="absolute top-0 w-full h-full bg-gray-500 bg-opacity-75 flex justify-center items-center cursor-pointer z-20">
            <div class="flex flex-col items-center text-white stroke-white gap-4 ">
              <h3 class="text-xl font-semibold">Click to unlock</h3>
              <svg  xmlns="http://www.w3.org/2000/svg"  width="48"  height="48"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icons-tabler-outline icon-tabler-hand-move"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5" /><path d="M11 11.5v-2a1.5 1.5 0 0 1 3 0v2.5" /><path d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5" /><path d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" /><path d="M2.541 5.594a13.487 13.487 0 0 1 2.46 -1.427" /><path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612" /></svg>
              <h3 class="text-xl font-semibold">3D Experience</h3>
            </div>
          </div>
        </div>
      </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 lg:mb-2 pr-1.5 xxs 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 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs 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"
            alt="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 lg:mb-2 xxs lg:p-4">
            Get the perfect fit</h3>
          <h3 class="absolute bottom-0 right-0 text-lg p-4 hide-on-small">Discover your perfect fit in minutes</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." />
        </div>
      </div>
      <div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-12">
        <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 lg:mb-2 xxs 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"
            alt="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 lg:mb-2 xxs 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 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs 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"
            alt="Left-small-img2.png" />
        </div>
</div>


    {/if}

    
    {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}
      
      {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>