<template>
     <!-- How it work start -->
     <section class="section">
            <b-container>
                <b-row class="justify-content-center mb-5">
                    <b-col md="8" lg="6" class="text-center">
                        <h6 class="subtitle">How it <span class="fw-bold">Work</span></h6>
                        <h2 class="title">How dose it work ?</h2>
                        <p class="text-muted">Sed ut perspiciatis unde omnis iste natus error voluptatem accusantium doloremque rem aperiam.</p>
                    </b-col>
                </b-row>

                <b-row>
                    <b-col lg="4">
                        <div class="work-box px-lg-5 text-center mb-5 mb-lg-0">
                            <div class="work-icon bg-soft-primary mb-4">
                                <i class="mdi mdi-format-list-bulleted"></i>
                            </div>
                            <h5 class="fw-semibold">1. Intuitive visual editor</h5>
                            <p class="text-muted">Nemo enim ipsam quia voluptas sit aspernatur ist dolores.</p>
                            <img src="../assets/images/arrow-top.png" alt="" class="work-arrow" />
                        </div>
                    </b-col>
                    <b-col lg="4">
                        <div class="work-box px-lg-5 text-center mb-5 mb-lg-0">
                            <div class="work-icon bg-soft-success mb-4">
                                <i class="mdi mdi-palette-outline"></i>
                            </div>
                            <h5 class="fw-semibold">2. Huge design collection</h5>
                            <p class="text-muted">Nemo enim ipsam quia voluptas sit aspernatur ist dolores.</p>
                            <img src="../assets/images/arrow-bottom.png" alt="" class="work-arrow" />
                        </div>
                    </b-col>
                    <b-col lg="4">
                        <div class="work-box px-lg-5 text-center mb-5 mb-lg-0">
                            <div class="work-icon bg-soft-warning mb-4">
                                <i class="mdi mdi-layers-triple"></i>
                            </div>
                            <h5 class="fw-semibold">3. One click installation</h5>
                            <p class="text-muted">Nemo enim ipsam quia voluptas sit aspernatur ist dolores.</p>
                        </div>
                    </b-col>
                </b-row>
            </b-container>
        </section>
        <!-- How it work end -->

</template>

<script lang="ts">
    export default {
        
    }
</script>

<style scoped>

</style>