<template>
     <!-- Pricing start -->
     <section class="section" id="pricing">
            <b-container>
                <b-row class="justify-content-center mb-5">
                    <b-col md="8" lg="6" class="text-center">
                        <h6 class="subtitle">Our <span class="fw-bold">Pricing</span></h6>
                        <h2 class="title">Pricing Plan</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 cols="12">
                        <ul class="nav nav-pills pricing-tab mb-4" id="pills-tab" role="tablist">
                            <li class="nav-item me-2" role="presentation">
                                <button class="nav-link active" id="pills-monthly-tab" data-bs-toggle="pill" data-bs-target="#pills-monthly" type="button" role="tab" aria-controls="pills-monthly" aria-selected="true">Monthly</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-yearly-tab" data-bs-toggle="pill" data-bs-target="#pills-yearly" type="button" role="tab" aria-controls="pills-yearly" aria-selected="false">Yearly</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-monthly" role="tabpanel" aria-labelledby="pills-monthly-tab">
                                <b-row>
                                    <b-col lg="4">
                                        <div class="pricing-box">
                                            <div class="text-center mb-4 bg-light p-4 rounded">
                                                <h5>Free</h5>
                                                <h1 class="mt-3 mb-0 text-primary">$0.00<span class="text-muted fs-16 fw-normal"> /Month</span></h1>
                                            </div>
                                            <ul class="list-unstyled text-secondary mb-5 pt-2">
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">3</span> Projects</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">580GB</span> Storage</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">Unlimited</span> Contacts</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">5</span> Domains</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> Free Support <span class="fw-semibold text-dark">24/7</span></li>
                                            </ul>
                                            <a href="javascript:void(0);" class="btn btn-gradient-primary w-100">Choose Plan</a>
                                        </div>
                                    </b-col>
                                    <b-col lg="4">
                                        <div class="pricing-box">
                                            <span class="pricing-badge">Most Popular</span>
                                            <div class="text-center mb-4 bg-light p-4 rounded">
                                                <h5>Standard</h5>
                                                <h1 class="mt-3 mb-0 text-primary">$29.00<span class="text-muted fs-16 fw-normal"> /Month</span></h1>
                                            </div>
                                            <ul class="list-unstyled text-secondary mb-5 pt-2">
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">10</span> Projects</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">1TB</span> Storage</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">Unlimited</span> Contacts</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">12</span> Domains</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> Free Support <span class="fw-semibold text-dark">24/7</span></li>
                                            </ul>
                                            <a href="javascript:void(0);" class="btn btn-gradient-primary w-100">Choose Plan</a>
                                        </div>
                                    </b-col>
                                    <b-col lg="4">
                                        <div class="pricing-box">
                                            <div class="text-center mb-4 bg-light p-4 rounded">
                                                <h5>Enterprice</h5>
                                                <h1 class="mt-3 mb-0 text-primary">$49.00<span class="text-muted fs-16 fw-normal"> /Month</span></h1>
                                            </div>
                                            <ul class="list-unstyled text-secondary mb-5 pt-2">
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">20</span> Projects</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">2.5TB</span> Storage</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">Unlimited</span> Contacts</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">18</span> Domains</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> Free Support <span class="fw-semibold text-dark">24/7</span></li>
                                            </ul>
                                            <a href="javascript:void(0);" class="btn btn-gradient-primary w-100">Choose Plan</a>
                                        </div>
                                    </b-col>
                                </b-row>
                            </div>

                            <div class="tab-pane fade" id="pills-yearly" role="tabpanel" aria-labelledby="pills-yearly-tab">
                                <b-row>
                                    <b-col lg="4">
                                        <div class="pricing-box">
                                            <div class="text-center mb-4 bg-light p-4 rounded">
                                                <h5>Basic</h5>
                                                <h1 class="mt-3 mb-0 text-primary">$39.00<span class="text-muted fs-16 fw-normal"> /Year</span></h1>
                                            </div>
                                            <ul class="list-unstyled text-secondary mb-5 pt-2">
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">15</span> Projects</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">3TB</span> Storage</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">Unlimited</span> Contacts</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">20</span> Domains</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> Free Support <span class="fw-semibold text-dark">24/7</span></li>
                                            </ul>
                                            <a href="javascript:void(0);" class="btn btn-gradient-primary w-100">Choose Plan</a>
                                        </div>
                                    </b-col>
                                    <b-col lg="4">
                                        <div class="pricing-box">
                                            <span class="pricing-badge">Most Popular</span>
                                            <div class="text-center mb-4 bg-light p-4 rounded">
                                                <h5>Standard</h5>
                                                <h1 class="mt-3 mb-0 text-primary">$79.00<span class="text-muted fs-16 fw-normal"> /Year</span></h1>
                                            </div>
                                            <ul class="list-unstyled text-secondary mb-5 pt-2">
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">32</span> Projects</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">6TB</span> Storage</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">Unlimited</span> Contacts</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">35</span> Domains</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> Free Support <span class="fw-semibold text-dark">24/7</span></li>
                                            </ul>
                                            <a href="javascript:void(0);" class="btn btn-gradient-primary w-100">Choose Plan</a>
                                        </div>
                                    </b-col>
                                    <b-col lg="4">
                                        <div class="pricing-box">
                                            <div class="text-center mb-4 bg-light p-4 rounded">
                                                <h5>Enterprice</h5>
                                                <h1 class="mt-3 mb-0 text-primary">$99.00<span class="text-muted fs-16 fw-normal"> /Year</span></h1>
                                            </div>
                                            <ul class="list-unstyled text-secondary mb-5 pt-2">
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">50</span> Projects</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">10TB</span> Storage</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">Unlimited</span> Contacts</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> <span class="fw-semibold text-dark">55</span> Domains</li>
                                                <li class="my-3"><i class="mdi mdi-check me-1"></i> Free Support <span class="fw-semibold text-dark">24/7</span></li>
                                            </ul>
                                            <a href="javascript:void(0);" class="btn btn-gradient-primary w-100">Choose Plan</a>
                                        </div>
                                    </b-col>
                                </b-row>
                            </div>
                        </div>
                    </b-col>
                </b-row>
            </b-container>
        </section>
        <!-- Pricing end -->

</template>

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

<style scoped>

</style>