<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-20">
                <div class="col">
                    <div class="row m-b-50 text-center" v-if="!$store.getters.isAdmin">
                        <div class="col">
                            <div class="row align-items-center justify-content-center m-b-10">
                                <div class="col-auto p-r-10">
                                    <h5 class="light">Welcome Abroad <span class="text-primary">{{$store.getters.getUserName}}</span>, we provide logistics services.</h5>
                                </div>
                                <div class="col-auto b-a b-thick b-primary padding-5">
                                    <h5 class="light no-margin">Powered by technology, delivered by experts.</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <p class="light no-margin">Unlock your potential with digital freight forwarding that creates outstanding supply chains management. <span class="bold text-primary">From the supplier to our warehouse, then to your doorsteps.</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center justify-content-center m-b-50">
                        <div class="col-10">
                            <div class="row">
                                <div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest b-r b-grey">
                                    <div class="row m-b-15">
                                        <div class="col text-center">
                                            <img src="/images/qr-box.svg" width="150" height="150">
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col">
                                            <div class="row m-b-10">
                                                <div class="col">
                                                    <div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 1</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin">Place an order with us, and send the QR Code label document to your supplier to attach to your order's packages</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest b-r b-grey">
                                    <div class="row m-b-15">
                                        <div class="col text-center">
                                            <img src="/images/package.svg" width="120" height="150">
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col">
                                            <div class="row m-b-10">
                                                <div class="col">
                                                    <div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 2</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin">We receive your packages at the preferred warehouse you selected, and arrange for shipping.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest">
                                    <div class="row m-b-15">
                                        <div class="col">
                                            <img src="/images/package_hands.svg" width="160" height="150">
                                        </div>
                                    </div>
                                    <div class="row justify-content-center">
                                        <div class="col">
                                            <div class="row m-b-10">
                                                <div class="col">
                                                    <div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 3</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin">We deliver your packages to your doorsteps at your selected delivery address.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center justify-content-center">
                        <div class="col-10 text-center">
                            <button type="button" class="btn btn-lg fs-12 btn-outline-complete b-rad-none m-r-15 requestModal" data-type="contactUs">Ask us a Question</button>
                            <button type="button" class="btn btn-lg fs-12 btn-primary b-rad-none" @click="$store.dispatch('toggleSection', {name: 'createOrderForm', status: true})">Lets create a new order <i class="fa fa-angle-right m-l-10"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>