<h2 class="filterproduct-title"><span class="content"><strong>FEATURED PRODUCTS</strong></span></h2>
<div id="featured_product" class="owl-top-narrow">
    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="1" image_width="272" image_height="337" template="owl_list.phtml"}}
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owl.carousel/owl.carousel.min'
    ], function ($) {
        $("#featured_product .owl-carousel").owlCarousel({
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            loop: true,
            navRewind: true,
            margin: 10,
            nav: true,
            navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
            dots: false,
            responsive: {
                0: {
                    items:2
                },
                768: {
                    items:3
                },
                992: {
                    items:3
                },
                1200: {
                    items:4
                }
            }
        });
    });
</script>
<h2 class="filterproduct-title" style="margin-bottom: 4px; margin-top: 20px;"><span class="content"><strong>BROWSE OUR CATEGORIES</strong></span></h2>
<div id="category_slider" class="owl-top-narrow">
    <div class="owl-carousel">
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category1.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">HOME & GARDEN</span></p>
            </a>
        </div>
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category2.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">SPORTS</span></p>
            </a>
        </div>
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category3.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">FASHION</span></p>
            </a>
        </div>
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category4.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">ELECTRONICS</span></p>
            </a>
        </div>
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category1.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">HOME & GARDEN</span></p>
            </a>
        </div>
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category2.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">SPORTS</span></p>
            </a>
        </div>
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category3.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">FASHION</span></p>
            </a>
        </div>
        <div class="item" style="padding-top:0;">
            <a class="single-image" href="#">
                <img src="{{media url="wysiwyg/smartwave/porto/homepage/10/content/category4.jpg"}}" alt="" />
                <p style="position:absolute;width:100%;bottom:13px;text-align:center;"><span style="background-color:#333;background-color:rgba(23,23,23,.9);font-size:20.28px;color:#fff;font-weight:800;line-height:37px;display:inline-block;padding:0 10px;">ELECTRONICS</span></p>
            </a>
        </div>
    </div>
</div>
<script type="text/javascript">
    require([
        'jquery',
        'owl.carousel/owl.carousel.min'
    ], function ($) {
        $("#category_slider .owl-carousel").owlCarousel({
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            loop: true,
            navRewind: true,
            margin: 10,
            nav: true,
            navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
            dots: false,
            responsive: {
                0: {
                    items:2
                },
                768: {
                    items:3
                },
                992: {
                    items:3
                },
                1200: {
                    items:4
                }
            }
        });
    });
</script>
<h2 class="filterproduct-title" style="margin-top:20px;margin-bottom:5px;"><span class="content"><strong>JUST ARRIVED</strong></span></h2>
{{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="12" column_count="6" move_actions="1" aspect_ratio="0" image_width="250" image_height="250" template="grid.phtml"}}
<div class="row" style="margin-top:20px;">
    <div class="col-sm-6">
        <h2 class="filterproduct-title" style="margin-top:20px;margin-bottom:5px;background:none;"><span class="content"><strong>LATEST BLOG POSTS</strong></span></h2>
        <div id="latest_news" class="recent-posts">
            <div class="owl-carousel">
                <div class="item">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="post-image">
                                <img src="{{media url="wysiwyg/smartwave/porto/blog/03.jpg"}}" alt="" />
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <div class="post-date">
                                <span class="day">08</span>
                                <span class="month">Dec</span>
                            </div>
                            <div class="postTitle">
                                <h2><a href="#">Post Format – Video</a></h2>
                            </div>
                            <div class="postContent"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non placerat mi…</p></div>
                            <a class="readmore" href="#">Read more &gt;</a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="post-image">
                                <img src="{{media url="wysiwyg/smartwave/porto/blog/04.jpg"}}" alt="" />
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <div class="post-date">
                                <span class="day">08</span>
                                <span class="month">Dec</span>
                            </div>
                            <div class="postTitle">
                                <h2><a href="#">Post Format – Image Gallery</a></h2>
                            </div>
                            <div class="postContent"><p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent…</p></div>
                            <a class="readmore" href="#">Read more &gt;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#latest_news .owl-carousel").owlCarousel({
                    items: 1,
                    loop: true,
                    nav: false,
                    dots: true
                });
            });
        </script>
    </div>
    <div class="col-sm-6">
        <h2 class="filterproduct-title" style="margin-top:20px;margin-bottom:5px;background:none;"><span class="content"><strong>WHAT CLIENT'S SAY</strong></span></h2>
        <div id="testimonials-slider-demo-9" class="owl-carousel">
            <div class="item">
                <blockquote class="testimonial">
                    <p>Hello, I want to thank you for creating a great template and for the excellent and quick support and help that you have been providing to me as I begin to work with it.</p>
                </blockquote>
                <div class="testimonial-arrow-down"></div>
                <div class="testimonial-author">
                    <div class="img-thumbnail img-thumbnail-small"><img width="60" height="60" src="{{media url="wysiwyg/smartwave/porto/testimonials/client-1-11.jpg"}}" alt=""></div>
                    <p><strong>John Smith</strong><span>CEO &amp; Founder - Okler</span></p>
                </div>
            </div>
            <div class="item">
                <blockquote class="testimonial">
                    <p>Hello, I want to thank you for creating a great template and for the excellent and quick support and help that you have been providing to me as I begin to work with it.</p>
                </blockquote>
                <div class="testimonial-arrow-down"></div>
                <div class="testimonial-author">
                    <div class="img-thumbnail img-thumbnail-small"><img width="60" height="60" src="{{media url="wysiwyg/smartwave/porto/testimonials/client-1-11.jpg"}}" alt=""></div>
                    <p><strong>John Smith</strong><span>CEO &amp; Founder - Okler</span></p>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            require([
                'jquery',
                'owl.carousel/owl.carousel.min'
            ], function ($) {
                $("#testimonials-slider-demo-9").owlCarousel({
                    items: 1,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    dots: true,
                    nav: false,
                    navRewind: true,
                    animateIn: 'fadeIn',
                    animateOut: 'fadeOut',
                    loop: true
                });
            });
        </script>
    </div>
</div>
<h2 class="filterproduct-title" style="margin-bottom: 4px;"><span class="content"><strong>Featured Brands</strong></span></h2>
<div id="brands-slider-demo-10" class="brands-slider owl-top-narrow">
    <div class="owl-carousel">
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand1.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand2.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand3.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand4.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand5.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand6.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand1.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand2.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand3.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand4.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand5.jpg"}}" alt="" /></div>
        <div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/homepage/brand_logos/brand6.jpg"}}" alt="" /></div>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel.min'
        ], function ($) {
            $("#brands-slider-demo-10 .owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                margin: 30,
                nav: true,
                navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
                dots: false,
                loop: true,
                responsive: {
                    0: {
                        items:2
                    },
                    640: {
                        items:3
                    },
                    768: {
                        items:4
                    },
                    992: {
                        items:5
                    },
                    1200: {
                        items:6
                    }
                }
            });
        });
    </script>
</div>