@extends('v2/base')

@section('content')
    <!-- banner -->
    <section class="slider_banner swiper-container layout">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#"><img src="/v2/img/demo/banner_index.png" alt="banner_index" /></a>
                <div class="banner_info wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <h2>Create your <br> Own shop</h2>
                    <p>Sell products your fans will love. We produce and deliver. You get commissions</p>
                    <a href="#" class="more">Start creating for free</a>
                </div>
                <div class="banner_nav flex_row wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <div class="nav_item">
                        <h3><a href="#">Launch a <br> free store</a></h3>
                        <p>Free server and domain name</p>
                    </div>
                    <div class="nav_item">
                        <h3><a href="#">Choose <br> products</a></h3>
                    </div>
                    <div class="nav_item">
                        <h3><a href="#">Sell on your <br> social channels</a></h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- web_main start -->
    <section class="web_main index_main">

        <!-- index_creators_selling -->
        <section class="index_creators_selling" id="discover-creators">
            <div class="layout">
                <div class="index_hd wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <h2 class="hd_title">Creators Selling on Shopk</h2>
                </div>
                <div class="creators_sell_wrap wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <div class="sell_item">
                        <a href="#"><img src="/v2/img/demo/selling01.png" alt=""></a>
                        <h3><a href="#">Ryan Salzer</a></h3>
                    </div>
                    <div class="sell_item">
                        <a href="#"><img src="/v2/img/demo/selling02.png" alt=""></a>
                        <h3><a href="#">Ryan Salzer</a></h3>
                    </div>
                    <div class="sell_item">
                        <a href="#"><img src="/v2/img/demo/selling03.png" alt=""></a>
                        <h3><a href="#">Ryan Salzer</a></h3>
                    </div>
                    <div class="sell_item">
                        <a href="#"><img src="/v2/img/demo/selling04.png" alt=""></a>
                        <h3><a href="#">Ryan Salzer</a></h3>
                    </div>
                    <div class="sell_item">
                        <a href="#"><img src="/v2/img/demo/selling05.png" alt=""></a>
                        <h3><a href="#">Ryan Salzer</a></h3>
                    </div>
                    <div class="sell_item">
                        <a href="#"><img src="/v2/img/demo/selling06.png" alt=""></a>
                        <h3><a href="#">Ryan Salzer</a></h3>
                    </div>
                </div>
                <a href="#" class="more">Check them out here</a>
            </div>
        </section>
        <!-- index_creators_selling end -->

        <!-- index_social_channels -->
        <section class="index_social_channels" id="social-integrations">
            <div class="layout">
                <div class="index_hd wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <h2 class="hd_title">Sell on your social channels</h2>
                </div>
                <div class="sell_social_wrap flex_row wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <div class="social_display">
                        <img src="/v2/img/demo/social.png" alt="">
                        <div class="social_tips flex_row">
                            <p>Share anything, everywhere</p>
                            <a href="#" class="bag"></a>
                        </div>
                    </div>
                    <div class="sell_social_content">
                        <p>Create on Spring, then feed your products
                            seamlessly across your social channels. Let your fans shop exactly where they are consuming your
                            content.</p>
                        <ul class="channels_list">
                            <li><a href="#"><img src="/v2/img/demo/facebook.png" alt=""></a></li>
                            <li><a href="#"><img src="/v2/img/demo/ins.png" alt=""></a></li>
                            <li><a href="#"><img src="/v2/img/demo/twitter.png" alt=""></a></li>
                            <li><a href="#"><img src="/v2/img/demo/print.png" alt=""></a></li>
                            <li><a href="#"><img src="/v2/img/demo/tiktok.png" alt=""></a></li>
                            <li><a href="#"><img src="/v2/img/demo/youtube.png" alt=""></a></li>
                        </ul>
                        <a href="#" class="start">Start creating</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- index_social_channels end -->

        <!-- index_workflow -->
        <section class="index_workflow" id="how-it-works">
            <div class="layout">
                <div class="index_hd wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <h2 class="hd_title">How it works</h2>
                </div>
                <div class="workflow_wrap flex_row wow fadeInUpA" data-wow-delay=".8s" data-wow-duration="1s">
                    <div class="step_item">
                        <div class="step_info">
                            <h3>Create</h3>
                            <p>Choose products and create acustom store for free.</p>
                        </div>
                        <a href="#"><img src="/v2/img/demo/work01.png" alt=""></a>
                    </div>
                    <div class="step_item">
                        <div class="step_info">
                            <h3>Share</h3>
                            <p>Connect your social accounts, share your products with your fans and friends.</p>
                        </div>
                        <a href="#"><img src="/v2/img/demo/work02.png" alt=""></a>
                    </div>
                    <div class="step_item">
                        <div class="step_info">
                            <h3>Earn</h3>
                            <p>Get the profit you deserve while we handle production,shipping, and customer support for you.</p>
                        </div>
                        <a href="#"><img src="/v2/img/demo/work03.png" alt=""></a>
                    </div>
                </div>
                <a href="#" class="start">Start creating</a>
            </div>
        </section>
        <!-- index_workflow end -->

    </section>
    <!--// web_main end -->

@endsection