{% extends 'shapeprint_app/base.html' %} {% block body %} {% load static %}
<!-- main banner -->
<!-- <div class="main-banner">
  <div class="section-wrapper">
    <div class="banner-image"></div>
    <div class="content-search-box">
      <div class="main-header-form">
        <div class="section-heading">
          <h2>Search Your Choice</h2>
          <span>We make your choice and offer you the best quality
          </span>
        </div>
        <form >
          {% csrf_token %}
          <div class="form-group d-flex">
            <input type="text" class="form-control search-field" name="key" required placeholder="Search" />
            <button class="search-icon" type="submit"><i class="lnr lnr-magnifier"></i></button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div> -->
<!-- close section -->
<div class="redline" style="background:#d83f3d;height:3px"></div>
<div class="main-banner">
  <div id="main-slider" class="main-slider swiper-container" data-loop="true">
    <div class="swiper-wrapper">
      {% for m in mainbanners %}
      <div class="swiper-slide">
        <div class="container-fluid p-0">
          <div class="banner-flex">
            <div class="banner-item">
              <img src="/media/{{m.image}}" alt="shapeprint au">
              <div class="banner-content">
                <h1>{{m.heading}}</h1>
                <p>{{m.text}}</p>
                <a href="{% url 'contact' %}" class="btn btn-primary">Find out more</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    <button class="main-slider-btn slider-btn slider-btn-prev">
      <span class="lnr lnr-chevron-left"></span>
    </button>
    <button class="main-slider-btn slider-btn slider-btn-next">
      <span class="lnr lnr-chevron-right"></span>
    </button>
    <div class="main-slider-pagination slider-pagination text-center pt-5"></div>
  </div>
</div>
<!-- product section -->
<section class="section-wrap section-wrap-md feature-product-section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="section-heading text-center">
          <h2 style="color:#d83f3d">YOUR ONLINE PRINT SHOP </h2>
          <!-- <span>We offer the best
          </span> -->
        </div>
      </div>
    </div>
    <div class="product-nav">
      <div class="prod row m-0 justify-content-center">
        <ul class="product-navigation custom nav nav-pills mb-5">
          <li class="prod-tab-item active" onmouseover="openProd(event, 'printproducts')">
            <span>Print Products</span>
          </li>
          <li class="prod-tab-item" onmouseover="openProd(event, 'promotionalproducts')">
            <span>Promotional Products</span>
          </li>
          <li class="prod-tab-item" onmouseover="openProd(event, 'backdropdisplays')">
            <span>Backdrop Displays</span>
          </li>
        </ul>
      </div>

      <div class="prod">
        <div class="masproduct-tab" id="printproducts">
          <div class="prod row m-0 justify-content-center">
            <ul class="product-navigation custom nav nav-pills mb-5">
              {% for h in header %}
              {% if h.du == "Print-Products" %}
              <li class="product-tab-item active" onmouseover="openCity(event, '{{h.name}}')">
                <span>{{h.dname}}</span>
              </li>
              {% endif %}
              {% endfor %}
          
            
            </ul>
          </div>
          <div class="prod">
            {% for h in header %}
            {% if h.du == "Print-Products" %}
            <div class="product-tab" id="{{h.name}}">
              <div class="row product-display-row">
                {% for c in category %}
                {% if c.header.id == h.id %}
                <div class="col-xs-12 col-sm-6 col-lg-3 product-display-section">
                  <a href="/product/{{c.name}}">
                    <div class="product-card">
                      <div class="card">                        
                        <span style="border:1px solid #8e8e8e;padding:15px 2px;color:black">{{c.dname}}</span>
                      </div>

                    </div>
                  </a>
                </div>
                {% endif %}
                {% endfor %}
               
                
              </div>
              
            </div>
            {% endif %}
            {% endfor %}
         
          </div>
        </div>
        <div class="masproduct-tab" id="promotionalproducts">
          <div class="prod row m-0 justify-content-center">
            <ul class="product-navigation custom nav nav-pills mb-5">
              {% for h in header %}
              {% if h.du == "Promotional-Products" %}
              <li class="product-tab-item active" onmouseover="openCity(event, '{{h.name}}')">
                <span>{{h.dname}}</span>
              </li>
              {% endif %}
              {% endfor %}
          
            
            </ul>
          </div>
          <div class="prod">
            {% for h in header %}
            {% if h.du == "Promotional-Products" %}
            <div class="product-tab" id="{{h.name}}">
              <div class="row product-display-row">
                {% for c in category %}
                {% if c.header.id == h.id %}
                <div class="col-xs-12 col-sm-6 col-lg-3 product-display-section">
                  <a href="/product/{{c.name}}">
                    <div class="product-card">
                      <div class="card">                        
                        <span style="border:1px solid #8e8e8e;padding:15px 2px;color:black">{{c.dname}}</span>
                      </div>

                    </div>
                  </a>
                </div>
                {% endif %}
                {% endfor %}
               
                
              </div>
              
            </div>
            {% endif %}
            {% endfor %}
         
          </div>
        </div>
        <div class="masproduct-tab" id="backdropdisplays">
          <div class="prod row m-0 justify-content-center">
            <ul class="product-navigation custom nav nav-pills mb-5">
              {% for h in header %}
              {% if h.du == "Backdrop-Displays" %}
              <li class="product-tab-item active" onmouseover="openCity(event, '{{h.name}}')">
                <span>{{h.dname}}</span>
              </li>
              {% endif %}
              {% endfor %}
          
            
            </ul>
          </div>
          <div class="prod">
            {% for h in header %}
            {% if h.du == "Backdrop-Displays" %}
            <div class="product-tab" id="{{h.name}}">
              <div class="row product-display-row">
                {% for c in category %}
                {% if c.header.id == h.id %}
                <div class="col-xs-12 col-sm-6 col-lg-3 product-display-section">
                  <a href="/product/{{c.name}}">
                    <div class="product-card">
                      <div class="card">                        
                        <span style="border:1px solid #8e8e8e;padding:15px 2px;color:black">{{c.dname}}</span>
                      </div>

                    </div>
                  </a>
                </div>
                {% endif %}
                {% endfor %}
               
                
              </div>
              
            </div>
            {% endif %}
            {% endfor %}
         
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
<!-- close section -->


<!-- video section -->
<!-- <section class="section-wrap section-wrap-md best-example-section">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="best-example-image">
          <div class="image-wrapper">
            <img
              src="https://www.saxoprint.co.uk/-/media/saxoprint/products/special-box/samples/product-samples.ashx?mh=470&mw=845&hash=7F589845F24FF78FA680C404A0913FB5"
              title="Product samples"
              alt="Product samples"
            />
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="det-example-section">
          <h2>Branded or Neutral Product Samples</h2>
          <p>
            Our product samples give you a good overview of our products and the
            selection of materials available to you. If you are a reseller, you
            also have the opportunity to impress your customers with the quality
            of our products thanks to the neutral sample versions.
          </p>
          <a href="#" class="btn btn-mastery">See Product Samples</a>
        </div>
      </div>
    </div>
  </div>
</section> -->
<!-- <section class="section-wrap section-wrap-video">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="embed-responsive embed-responsive-21by9">
					<iframe class="embed-responsive-item" width="560" height="315"
						src="https://www.youtube.com/embed/iHkqfjgs6fg?autoplay=0&showinfo=0&modestbranding=1&rel=0"
						frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;"
						allowfullscreen></iframe>
				</div>
			</div>
		</div>
	</div>
</section> -->

<!-- popular product section -->
<section class="section-wrap section-wrap-md product-section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-9">
        <div class="section-heading text-center">
          <h2>Most Popular Products</h2>
          <span></span>
        </div>
      </div>
    </div>
    <div class="more-product-listing">
      <div class="row">
        {% for p in products|slice:"12" %}
        <div class="col-12 col-sm-6 col-lg-3 mb-3">
          <a href="/shop/{{p.category.name}}?q={{p.id}}">
            <div class="seller-container">
              <div class="seller-image-icon">
                <div class="image-wrapper">
                  <img src="/media/{{p.image}}" alt="{{p.dname}}" />
                </div>
              </div>
              <div class="content-section">
                <h3 class="seller-title-text">{{p.name}}</h3>
                <div class="content-product">
                    {% autoescape off %}
                        {{p.description}}
                    {% endautoescape %}
                </div>

              </div>
            </div>
          </a>
        </div>
        {% endfor %}
      </div>
      <div class="text-center"><a href="{% url 'viewall' %}" class="btn btn-danger text-white">See More</a></div>
    </div>
  </div>
</section>
<!-- end section -->

<!-- Benefits Section -->
<section class="section-wrap section-wrap-xs">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-9">
        <div class="section-heading text-center">
          <h2>Your Benefits for Online Printing at Shape Print</h2>
          <span>We are best at what we do
          </span>
        </div>
      </div>
    </div>
    <div class="benefits-wrapper mt-5 row">
      <div class="benefit-item swiper-slide col-12 col-md-4 mb-3">
        <div class="content">
          <div class="benefit-image">
            <img src="{% static 'assets/images/undraw_coolness_dtmq.svg' %}" />
          </div>
          <div class="benefit-headline-title">
            <span>High-Quality Print</span>
          </div>
          <div class="benefit-text text bulletlist">
            <p>
              We only use modern high-end digital equipment and substrates to deliver the very best print outcomes
              of premium quality. Our commitment to ensuring our customers to enjoy market-leading quality is
              unquestionable. If we do not accept it for our own business, we're not going to offer it for you.
            </p>
          </div>
        </div>
      </div>
      <div class="benefit-item swiper-slide col-12 col-md-4 mb-3">
        <div class=" content">
          <div class="benefit-image">
            <img src="{% static 'assets/images/undraw_Savings_re_eq4w.svg' %}" />
          </div>
          <div class="benefit-headline-title">
            <span>Competitive Price</span>
          </div>
          <div class="benefit-text text bulletlist">
            <p>
              Our printing company provides very competitive prices for high-quality printing. We frequently compare
              our printing services with the competition to ensure we offer competitive value in printing to your
              company
            </p>
          </div>
        </div>
      </div>
      <div class="benefit-item swiper-slide col-12 col-md-4 mb-3">
        <div class="content">
          <div class="benefit-image">
            <img src="{% static 'assets/images/undraw_business_deal_cpi9.svg' %}" />
          </div>
          <div class="benefit-headline-title">
            <span>Product Guarantee</span>
          </div>
          <div class="benefit-text text bulletlist">
            <p>
              We ensure you that if you provide us the file according to the specific standard provided by us, and
              we fail to satisfy the required standards we will redo your job without any hesitation for free!!!
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="benefits-slider mt-5">
      <div id="ben-slider" class="ben-slider swiper-container">
        <div class="swiper-wrapper">
          <div class="benefit-item swiper-slide">
            <div class="content">
              <div class="benefit-image">
                <img src="{% static 'assets/images/undraw_coolness_dtmq.svg' %}" />
              </div>
              <div class="benefit-headline-title">
                <span>High-Quality Print</span>
              </div>
              <div class="benefit-text text bulletlist">
                <p>
                  We only use modern high-end digital equipment and substrates to deliver the very best print outcomes
                  of premium quality. Our commitment to ensuring our customers to enjoy market-leading quality is
                  unquestionable. If we do not accept it for our own business, we're not going to offer it for you.
                </p>
              </div>
            </div>
          </div>
          <div class="benefit-item swiper-slide">
            <div class="content">
              <div class="benefit-image">
                <img src="{% static 'assets/images/undraw_Savings_re_eq4w.svg' %}" />
              </div>
              <div class="benefit-headline-title">
                <span>Competitive Price</span>
              </div>
              <div class="benefit-text text bulletlist">
                <p>
                  Our printing company provides very competitive prices for high-quality printing. We frequently compare
                  our printing services with the competition to ensure we offer competitive value in printing to your
                  company
                </p>
              </div>
            </div>
          </div>
          <div class="benefit-item swiper-slide">
            <div class="content">
              <div class="benefit-image">
                <img src="{% static 'assets/images/undraw_business_deal_cpi9.svg' %}" />
              </div>
              <div class="benefit-headline-title">
                <span>Product Guarantee</span>
              </div>
              <div class="benefit-text text bulletlist">
                <p>
                  We ensure you that if you provide us the file according to the specific standard provided by us, and
                  we fail to satisfy the required standards we will redo your job without any hesitation for free!!!
                </p>
              </div>
            </div>
          </div>
        </div>
        <button class="slider-btn ben-slider-btn slider-btn-prev">
          <span class="lnr lnr-arrow-left"></span>
        </button>
        <button class="slider-btn ben-slider-btn slider-btn-next">
          <span class="lnr lnr-arrow-right"></span>
        </button>
        <div class="ben-slider-pagination slider-pagination text-center pt-5"></div>
      </div>
    </div> -->
  </div>
</section>
<!-- end section -->


<!-- Focus section -->
<!-- <section class="section-wrap section-wrap-md section-wrap-image">
  <div class="focus-wrapper-container container">
    <div class="row justify-content-center">
      <div class="col-md-9">
        <div class="section-heading text-center mb-4">
          <h2>
            SHAPEPRINT <br />
            A Customer-Focused Online Print Shop
          </h2>
          <span></span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 p-0">
        <div class="content-parag d-flex align-items-center justify-content-center h-100">
          <p>
            Shape Print is a professional and efficient printing company, dealing with full printing arrangements in
            furnishing organisations. We deliver a vast range of high quality printing services at reasonable market
            rates, an expert record supervisory crew for assistance, and anywhere in Australia for delivery on time.
            <br><br>
            We love printing and can allow your business to make full use of yours. From the design to the executives
            and conveyors, Shape Print can do everything!
            <br><br>
            And much more!
          </p>
        </div>
      </div>
      <div class="col-md-6 p-0">
        <div class="image-container">
          <div class="image-wrapper">
            <img
              src="https://www.saxoprint.co.uk/-/media/saxoprint/products/details/content/start/saxoprint-moodfoto-dsc_9419.ashx?mh=246&mw=530&hash=7386653F3DA3C1613AB50EE83F4CEC84"
              alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 p-0">
        <div class="image-wrapper">
          <img
            src="https://www.saxoprint.co.uk/-/media/saxoprint/products/details/content/start/_dsc3040_fachbereich-produktion_3.ashx?mh=246&mw=530&hash=64B34FA70BF7CDDD655E29C11F1BC016"
            alt="" />
        </div>
      </div>
      <div class="col-md-6 p-0">
        <div class="content-parag d-flex align-items-center justify-content-center h-100">
          <p>
            Shape Print is a printing company that offers a wide range of printing services. We represent significant
            authority in dealing with organisations, offering a degree of advice and assistance to the company that is
            not offered by the regular' roll in the print shop. We will send you what your company might need about a
            printing solutions. Products such as in-store advancement, stationery printing, lightboxes, window stickers,
            signage printing, pull-up banners, short-run printing, promotional product printing, are no difficulty for
            our enthusiastic and experienced team. Call us to take advantage of our many long stretches of knowledge and
            get the best design printing customized and fair to your organizational needs!
          </p>
        </div>
      </div>
    </div>
  </div>
</section> -->
<!-- end section -->

<!-- products by industry section -->
<section class="section-wrap section-wrap-md creative-product section-product">
  <div class="container">
    <div class="section-heading text-center">
      <h2>Products By Industry</h2>
    </div>
    <div class="row mt-5 customfinal">
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('College & University')">
            College & University
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('Real Estate')">
            Real Estate
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('Restaurant')">
            Restaurant
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('Corporate Offices')">
            Corporate Offices
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('tradies')">
            Tradies
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('Warehouse Signs')">
            Warehouse Signs
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('Exhibition Displays')" >
            Exhibition Displays
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-3">
        <a class="product-item-btn" href="javascript:void(0)">
          <div class="product-item-wrapper" onclick="search('Cafe')" >
            Cafe
          </div>
        </a>
      </div>
      
    </div>
  </div>
  </div>
</section>

<!-- products gallery section -->
 <section class="mt-5 section-wrap section-wrap-md creative-product section-product">
     <div class=" container">
    <div class="section-heading text-center">
      <h2>Creative Products Gallery</h2>
    </div>
    <div class="row mt-5">
      {% for c in cag %}
      <div class="col-md-3">
        <div class="thumbnail">
          <a href="/media/{{c.image}}" class="lightcase" data-rel="lightcase:myCollection:package-gallery">
            <img src="/media/{{c.image}}" alt="shape print AU" />
          </a>
        </div>
      </div>
      {% endfor %}

    </div>
  </div>
</section> 
<!-- close section -->


<section class="section-wrap section-wrap-md">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="section-heading text-center">
          <h2>Reviews</h2>
          <span>What our Client says
          </span>
        </div>
      </div>
    </div>
    <div class="testimonial-slider mt-5">
      <div class="thumb-slider swiper-container">
        <div class="swiper-wrapper">
          {% for t in ts %}
          <div class="thumb-slider-item swiper-slide">
            <div class="content">
              <h4 class="name m-0">{{t.name}}</h4>
              <h6 class="profession mb-3">{{t.designation}}</h6>
              <p>
                {{t.description}}
              </p>
            </div>
          </div>
          {% endfor %}
        </div>
        <div class="thumb-slider-pagination slider-pagination text-center pt-5"></div>
      </div>
    </div>
  </div>
</section>


<!-- section subscription -->
<section class="section-wrap section-wrap-xs section-wrap-primary">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h4 class="m-0">Monthly Specials</h4>
        <span>Sign Up for discounts and specials</span>
      </div>
      <div class="col-md-8">
        <form action="{% url 'subscription' %}" method="POST">
          {% csrf_token %}
          <div class="row mt-2">
            <div class="col-md-4">
              <div class="form-group mb-0 mt-1">
                <input type="text" class="form-control" required name="name" placeholder="Name" />
              </div>
            </div>
            <div class="col-md-5">
              <div class="form-group mb-0 mt-1">
                <input type="text" class="form-control" required name="email" placeholder="Email" />
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group mb-0 mt-1">
                <button type="submit" class="btn btn-black">Subscribe</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- close section -->
{% endblock body %}