{% extends 'base.html.twig' %}
{% block body %}

 <section class="hero-layout content" data-bg-src="assets/img/banner/banner-bg-1.png">
    <div class="hero-mask">
      <div class="vs-carousel" id="hero-slider" data-slide-show="1" autoplay="false">
	  {% for ban in FTCHBan %}
        <div class="hero-slide">
          <div class="container">
            <div class="row align-items-center justify-content-between">
              <div class="col-lg-6">
                <div class="hero-content">
                  <span class="hero-subtitle">{{ban.banner_title}}</span>
                  <h1 class="hero-title">{{ban.banner_heading}}</h1>
                  <p class="hero-text">{{ban.banner_desc | raw}}
                  </p>
				  {% if(ban.banner_link) !='' %}
                  <a href="{{ban.banner_link}}" target="_blank" class="vs-btn style4">Check More</a>
				  {% endif %}
                </div>
              </div>
              <div class="col-lg-6">
                <div class="hero-img">
                   <img class="img1" src="{{ban_img_url}}{{ban.banner_image}}" alt="hero">
                  <img class="img2" src="{{ban_img_url}}{{ban.banner_img1}}" alt="hero">
                </div>
              </div>
            </div>
          </div>
        </div>
		{% endfor %}
      </div>
      <div class="slide-count vs-slider-tab" data-asnavfor="#hero-slider">
	  {% set b=1 %}
	  {% for ban in FTCHBan %}
	        <button class="tab-btn {% if(b==1) %} active {% endif %}" > {{b}}</button>
		{% set b=b+1 %}
	  {% endfor %}
      </div>
    </div>
  </section>
 <div class="space-top space-extra-bottom blog-wrapper1 shape-mockup-wrap">
    <div class="shape-mockup d-none d-xl-block spin z-index-negative" data-top="-5%" data-left="-5%">
      <img src="assets/img/shape/circle1.png" alt="circle">
    </div>
    <div class="shape-mockup d-none d-xl-block jump z-index-negative" data-bottom="5%" data-right="5%">
      <img src="assets/img/shape/Dot.png" alt="Dots">
    </div>
    <div class="container">
      <div class="row justify-content-center text-center">
        <div class="col-xxl-6 col-xl-7 col-lg-8 wow fadeInUp" data-wow-delay="0.3s">
          <div class="title-area">
            <span class="sec-subtitle">FOT Products</span>
            <h2 class="sec-title h2"><!--Any Time Food, Travel anywhere with Healthy Ready Drink-->80's Kids Favourite Drink is Back</h2>
          </div>
        </div>
      </div>
{% for prdc in FTCHProd %}
       <div class="blog-style4">
        <div class="blog-image">
          <img src="{{pro_img_url}}{{prdc.prd_image}}" alt="blog image">
          <div class="category-tag"><a href="product/{{prdc.product_name}}/{{prdc.product_id}}" style="color:green"><i class="fa fa-info-circle" aria-hidden="true"></i>More Details</a></div>
        </div>
        <div class="blog-content" data-bg-src="assets/img/shape/blog-bg.png" style="width:500px;">
          {#
          <a class="blog-date" href="javascript:void(0);">{{prdc.subcat_name}}</a>
          #}
          <h5 class="blog-title"><a href="product/{{prdc.product_name}}/{{prdc.product_id}}">{{prdc.product_name}}</a></h5>
		  <a class="blog-date" href="javascript:void(0);">From Rs. {{prd_price[prdc.product_id] | number_format(2)}}</a>
          <p class="blog-text">{{(prdc.prod_info |raw) }}</p>
		  {#<a href="product/{{prdc.product_name}}/{{prdc.product_id}}" class="vs-btn style4">View More</a>#}
		  <div class="icon-box-KSiT">
            <div class="box-KSiT">
              <a href="product/{{prdc.product_name}}/{{prdc.product_id}}" style="text-decoration:none; color:#FFFFFF; font-size:12px; font-weight:600;">35<small>g</small> x 1
              </a>
            </div>
            <div class="box-KSiT">
              <a href="product/{{prdc.product_name}}/{{prdc.product_id}}" style="text-decoration:none; color:#FFFFFF; font-size:12px; font-weight:600;">105<small>g</small> x 3
              </a>
            </div>
            <div class="box-KSiT">
              <a href="product/{{prdc.product_name}}/{{prdc.product_id}}" style="text-decoration:none; color:#FFFFFF; font-size:12px; font-weight:600;">175<small>g</small> x 5
              </a>
            </div>
          </div>
        </div>
      </div>
		{% endfor %}
    </div>
  </div>
 <section class="space bg-light shape-mockup-wrap" data-bg-src="assets/img/shape/Bg.png">
    <div class="shape-mockup d-none d-xl-block jump z-index-negative" data-bottom="20%" data-left="5%">
      <img src="assets/img/shape/Dot.png" alt="Dots">
    </div>
    <div class="shape-mockup d-none d-xl-block spin z-index-negative" data-bottom="-5%" data-right="-5%">
      <img src="assets/img/shape/circle1.png" alt="Circle">
    </div>
    <div class="shape-mockup d-none d-xl-block ripple-animation z-index-negative" data-top="10%" data-left="10%">
      <img src="assets/img/shape/Plane.png" alt="plane">
    </div>
    <div class="container">
      <div class="row justify-content-center text-center">
        <div class="col-xl-6 col-lg-8 wow fadeInUp" data-wow-delay="0.3s">
          <div class="title-area">
            <span class="sec-subtitle">Something Interesting Reviews</span>
            <h2 class="sec-title h1">Travel Anywhere with FOT Products</h2>
          </div>
        </div>
      </div>
      <div class="row vs-carousel" data-slide-show="4" data-arrows="false" data-lg-slide-show="3" data-md-slide-show="2"
        data-sm-slide-show="1">
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style1">
            <div class="package-img">
              <a href="javascript:void(0)"><img class="w-100" src="assets/img/tours/tour-1-1.jpg"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <div class="package-review">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
              </div>
              <h3 class="package-title"><a href="javascript:void(0)">John Fracklin</a></h3>
              <p class="package-text">Paris, Erope</p>
              <div class="package-meta">
                <a href="javascript:void(0);"><i class="fas fa-calendar-alt"></i> Dec 02, 2024</a>
                <!--<a href="javascript:void(0);"><i class="fas fa-user"></i> People: 3</a>-->
              </div>
              <div class="package-footer" align="center">
                <!--<span class="package-price">$399</span>-->
                <a href="javascript:void(0)" class="sec-subtitle"><i class="fas fa-shopping-basket"></i> Sugarcan Juice</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style1">
            <div class="package-img">
              <a href="javascript:void(0)"><img class="w-100" src="assets/img/tours/tour-1-2.jpg"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <div class="package-review">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
              <h3 class="package-title"><a href="javascript:void(0)">Clement Rosario</a></h3>
              <p class="package-text">Newyork, US</p>
              <div class="package-meta">
                <a href="javascript:void(0);"><i class="fas fa-calendar-alt"></i> Nov 28, 2024</a>
                <!--<a href="javascript:void(0);"><i class="fas fa-user"></i> People: 3</a>-->
              </div>
              <div class="package-footer">
                <!--<span class="package-price">$259</span>-->
                <a href="javascript:void(0)" class="sec-subtitle"><i class="fas fa-shopping-basket"></i> Sugarcan Juice</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style1">
            <div class="package-img">
              <a href="javascript:void(0)"><img class="w-100" src="assets/img/tours/tour-1-3.jpg"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <div class="package-review">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
              </div>
              <h3 class="package-title"><a href="javascript:void(0)">Fazil</a></h3>
              <p class="package-text">Dubai, UAE</p>
              <div class="package-meta">
                <a href="javascript:void(0);"><i class="fas fa-calendar-alt"></i> Nov 23, 2024</a>
                <!--<a href="javascript:void(0);"><i class="fas fa-user"></i> People: 3</a>-->
              </div>
              <div class="package-footer">
                <!--<span class="package-price">$259</span>-->
                <a href="javascript:void(0)" class="sec-subtitle"><i class="fas fa-shopping-basket"></i> Sugarcan Juice</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style1">
            <div class="package-img">
              <a href="javascript:void(0)"><img class="w-100" src="assets/img/tours/tour-1-4.jpg"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <div class="package-review">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
                <i class="far fa-star"></i>
              </div>
              <h3 class="package-title"><a href="javascript:void(0)">Maria</a></h3>
              <p class="package-text">Mumbai, India</p>
              <div class="package-meta">
                <a href="javascript:void(0);"><i class="fas fa-calendar-alt"></i> Nov 12, 2024</a>
                <!--<a href="javascript:void(0);"><i class="fas fa-user"></i> People: 3</a>-->
              </div>
              <div class="package-footer">
                <!--<span class="package-price">$259</span>-->
                <a href="javascript:void(0)" class="sec-subtitle"><i class="fas fa-shopping-basket"></i> Sugarcan Juice</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style1">
            <div class="package-img">
              <a href="javascript:void(0)"><img class="w-100" src="assets/img/tours/tour-1-5.jpg"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <div class="package-review">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
              </div>
              <h3 class="package-title"><a href="javascript:void(0)">Sivagurunadhan</a></h3>
              <p class="package-text">Dubai, UAE</p>
              <div class="package-meta">
                <a href="javascript:void(0);"><i class="fas fa-calendar-alt"></i> Nov 13, 2024</a>
              </div>
              <div class="package-footer">
                <a href="javascript:void(0)" class="sec-subtitle"><i class="fas fa-shopping-basket"></i> Sugarcan Juice</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-sm-6">
          <div class="package-style1">
            <div class="package-img">
              <a href="javascript:void(0)"><img class="w-100" src="assets/img/tours/tour-1-6.jpg"
                  alt="Package Image"></a>
            </div>
            <div class="package-content">
              <div class="package-review">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
              <h3 class="package-title"><a href="javascript:void(0)">Sundar</a></h3>
              <p class="package-text">Coimbatore, India</p>
              <div class="package-meta">
                <a href="javascript:void(0);"><i class="fas fa-calendar-alt"></i> Nov 03, 2024</a>
                <!--<a href="javascript:void(0);"><i class="fas fa-user"></i> People: 3</a>-->
              </div>
              <div class="package-footer">
                <!--<span class="package-price">$259</span>-->
                <a href="javascript:void(0)" class="sec-subtitle"><i class="fas fa-shopping-basket"></i> Sugarcan Juice</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--
      <div class="text-center pt-lg-2">
        <a href="javascript:void(0);" class="vs-btn">View More</a>
      </div>
      -->
    </div>
  </section>
 <section class="space space-extra-bottom gallery-style1">
    <div class="container">
      <div class="row">
        <div class="col-xl-6">
          <div class="title-area">
            <span class="sec-subtitle">Discover More</span>
            <h2 class="sec-title h1"><!--Some Interesting Fact-->What Drives Us:</h2>
            <p class="sec-text" align="justify">
                <b>- Passion for Purity:</b> Every product is crafted with care, ensuring it remains as close to nature as possible. <br>
                <b>- Customer Focus:</b> We prioritize your health, convenience, and satisfaction above all else. <br>
                <b>- Innovation at Heart:</b> Constantly evolving to bring better, healthier, and more diverse options to your table.
            </p>
          </div>
        </div>
        <div class="col-xl-6">
          <div class="gallery-video">
            <img src="assets/img/gallery/gallery-1-3.jpg" alt="gallery-image">
            <div class="gallery-btn">
              <span>Watch Video</span>
              <a href="javascript:void(0)" class="play-btn popup-video-STOPPED" onclick="alert('We are working on Video Presentation !!');"><i
                  class="fas fa-play"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>   
{% endblock %}