---
description: 'The Homepage'
template: home
protocol: all
published: true
name: Home
url: /
---
<section class="section-home-banner">
    <div class="container">
      <img class="lazy" src="{{ theme.homepageImageHero.thumbnail(500, 'auto')}}" />
    </div>
</section>

<section id="homepage-products-tab" class="section-products-grid">
    <div class="container">

        {# Nav tabs #}
        <div class="tab-nav-holder">
            <ul class="nav-tabs">
                <li class="active">
                    <a class="active-tab tab-control" href="#featured" data-toggle="featured">featured</a>
                </li>

                <li>
                    <a class="active-tab tab-control" href="#whats-new" data-toggle="whats-new">what's new</a>
                </li>
            </ul>
        </div>

        <div class="tab-tag-line uppercase bold">
            we have over 2000 products in our shop
        </div>

        {{ flash() }}

        {# Tab panes #}
        <div class="tab-content product-grid no-move-down">
            <div class="tab-pane active" id="featured">
                <div class="row">
                    {{ partial('home-featured-products', {'featuredCollection': 'featured'|collection}) }}
                </div>
            </div>{# /featured #}

            <div class="tab-pane" id="whats-new">
                <div class="row">
                    {{ partial('home-featured-products', {'featuredCollection': 'new'|collection}) }}
                </div>
            </div>{# /whats-new #}
        </div>{# /tab-content #}

    </div>
</section>

<section class="section-newsletter">
    <div class="container">
        <div class="news-letter-holder">
            <form>
                <div class="row">
                    <div class="newsletter-title col-xs-12 col-sm-4">
                        <h2>sign up to our newsletter</h2>

                        <h3>and get $30 coupon</h3>
                    </div>

                    <div class=" col-xs-12 col-sm-8">
                        <div class="newsletter-body">
                            <input class="md-input col-xs-12 col-sm-7" placeholder="Enter here your email"> <button class="md-button black narrow">sign up</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

<section class="section-banners">
    <div class="container">
        <div class="col-lg-6 col-md-12">
            <div class="homepage-banner">
                <a href="#"><img class="lazy" width="584" height="211" data-original="{{ theme.homepageImageBannerA.thumbnail('auto','auto') }}"></a>
            </div>
        </div>

        <div class="col-lg-6 col-md-12">
            <div class="homepage-banner">
                <a href="#"><img class="lazy" width="584" height="211" data-original="{{ theme.homepageImageBannerB.thumbnail('auto','auto') }}"></a>
            </div>
        </div>
    </div>
</section>