<template>
    <div class="container-fluid px-3">

       
        <div class="pb-4">
            <h5 class="pb-3">Info Box With bg-gradient-*</h5>
            <!-- Info Box With bg-gradient -->
            <div class="row">
                <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12  mb-2 px-2">
                    <div class="som_card d-flex p-2 align-items-center rounded_8">
                        <div class="px-3 text-center ">
                            <div class="icon somnab_gradient_grape">
                                <i class="fa-solid fa-usd text-white"></i>
                            </div>
                        </div>
                        <div class="w-75 d-fl align-content-center">
                            <h4 class="mb-2 text_grape"> $0.00 </h4>
                            <p class="text-secondary">
                                Daily Sale
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12 mb-2 px-2">
                    <div class="som_card d-flex p-2 align-items-center rounded_8">
                        <div class="px-3 text-center">
                            <div class="icon somnab_gradient_bluegrey">
                                <i class="fa-solid fa-fire text-white"></i>
                            </div>
                        </div>
                        <div class="w-75 d-fl align-content-center">
                            <h4 class="mb-2 text_bluegrey"> $0.00 </h4>
                            <p class="text-secondary">
                                Annual sales
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="pb-4">
            <h5 class="pb-3">Info Box With bg-*</h5>
            <!-- Info Box With bg-*t -->
            <div class="row">
                <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12  mb-2 px-2">
                    <div class="som_card d-flex p-2 align-items-center rounded_8">
                        <div class="px-3 text-center ">
                            <div class="icon" style="background-color: #1ab394">
                                <i class="fa-solid fa-usd text-white"></i>
                            </div>
                        </div>
                        <div class="w-75 d-fl align-content-center">
                            <h4 class="mb-2" style="color: #1ab394"> $0.00 </h4>
                            <p class="text-secondary">
                                Daily Sale
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12  mb-2 px-2">
                    <div class="som_card d-flex p-2 align-items-center rounded_8">
                        <div class="px-3 text-center ">
                            <div class="icon" style="background-color: #1c84c6">
                                <i class="fa-solid fa-usd text-white"></i>
                            </div>
                        </div>
                        <div class="w-75 d-fl align-content-center">
                            <h4 class="mb-2" style="color: #1c84c6"> $0.00 </h4>
                            <p class="text-secondary">
                                Daily Sale
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        
    </div>
</template>