@extends('layouts.frontend.app')
@section('style')
<style>
    .list-group-item {
        margin-left: 0;
    }

    .btn-packge-buy {
        background-color: white;
        width: 100%;
        border: 2px solid rgb(255, 228, 24);
        border-radius: 10px;
        height: 50px;
        font-weight: 500;
        color: gray;
        transition: 0.5s;
    }

    .btn-packge-buy-1 {
        background-color: white;
        width: 100%;
        border: 2px solid rgb(78, 211, 51);
        border-radius: 10px;
        height: 50px;
        font-weight: 500;
        color: gray;
        transition: 0.5s;
    }


    .btn-packge-buy-2 {
        background-color: white;
        width: 100%;
        border: 2px solid rgb(72, 129, 214);
        border-radius: 10px;
        height: 50px;
        font-weight: 500;
        color: gray;
        transition: 0.5s;
    }

    .btn-packge-buy:hover {
        width: 100%;
        background-color: rgb(255, 228, 24);
        border: 2px solid rgb(255, 228, 24);
        box-shadow: 0px 1px 10px 0px rgb(196, 196, 196);
        height: 50px;
        font-weight: 500;
        color: white;
    }


    .btn-packge-buy-1:hover {
        background-color: rgb(78, 211, 51);
        width: 100%;
        border: 2px solid rgb(78, 211, 51);
        border-radius: 10px;
        height: 50px;
        font-weight: 500;
        color: white;
        transition: 0.5s;
        box-shadow: 0px 1px 10px 0px rgb(196, 196, 196);
    }


    .btn-packge-buy-2:hover {
        background-color: rgb(72, 129, 214);
        width: 100%;
        border: 2px solid rgb(72, 129, 214);
        border-radius: 10px;
        height: 50px;
        font-weight: 500;
        color: white;
        transition: 0.5s;
        box-shadow: 0px 1px 10px 0px rgb(196, 196, 196);
    }

    .text-secondary {
        padding: 0;
        font-size: 16px;
    }

    .card-box-packages {
        border: 1px solid rgb(255, 228, 24);
        border-radius: 10px;
    }

    .card-box-packages-1 {
        border: 1px solid rgb(78, 211, 51);
        border-radius: 10px;
    }

    .card-box-packages-2 {
        border: 1px solid rgb(72, 129, 214);
        border-radius: 10px;
    }

    .background-price {
        background-color: rgb(255, 228, 24);
    }

    .background-price-1 {
        background-color: rgb(78, 211, 51);
    }

    .background-price-2 {
        background-color: rgb(72, 129, 214);
    }

    .price-child {
        color: rgb(87, 87, 87);
        margin-top: -10px;
        font-size: 14px;
        color: white;
    }
</style>
@endsection
@section('content')
<div class="container">
    <div class="row mb-5 mt-5">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="card card-box-packages mb-3">
                        <div class="background-packages py-3 text-center">
                            <h4 style="font-size: 35px; color: #2B2A35;">Paket 1</h4>
                            <p class="text-secondary">Pembayaran Tahunan</p>
                        </div>
                        <div class="background-price">
                            <h2 class="text-white text-center py-2">Rp.6.000,-</h2>
                            <p class="price-child text-center">/user/bulan</p>
                        </div>
                        <div class="card-body">
                            <div class="list  mt-4" style="line-height: 10px;">
                                <p class="text-secondary">Full akses dashboard</p>
                                <hr>
                                <p class="text-secondary">Laporan kepegawaian</p>
                                <hr>
                                <p class="text-secondary">Full akses absensi mobile</p>
                                <hr>
                                <p class="text-secondary">Support chat & setup sistem</p>
                                <div class="col-md-12 mb-2">
                                    <button type="button" class="mt-2 btn btn-packge-buy">Beli paket</button>
                                </div>
                            </div>
                            <p style="font-size: 13px;" class="text-secondary">Harga ini adalah bila pembayaran
                                dilakukan didepan untuk
                                1
                                tahun atau 12
                                bulan sekaligus. Pembayaran dilakukan di awal
                                sebelum sistem digunakan atau setelah masa trial berakhir.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-box-packages-1 mb-3">
                        <div class="background-packages py-3 text-center">
                            <h4 style="font-size: 35px; color: #2B2A35;">Paket 2</h4>
                            <p class="text-secondary">Pembayaran Tahunan</p>
                        </div>
                        <div class="background-price-1">
                            <h2 class="text-white text-center py-2">Rp.6.000,- </h2>
                            <p class="price-child text-center">/user/bulan</p>
                        </div>
                        <div class="card-body">

                            <div class="list  mt-4" style="line-height: 10px;">
                                <p class="text-secondary">Full akses dashboard</p>
                                <hr>
                                <p class="text-secondary">Laporan kepegawaian</p>
                                <hr>
                                <p class="text-secondary">Full akses absensi mobile</p>
                                <hr>
                                <p class="text-secondary">Support chat & setup sistem</p>
                                <div class="col-md-12 mb-2">
                                    <button type="button" class="mt-2 btn btn-packge-buy-1">Beli paket</button>
                                </div>
                            </div>
                            <p style="font-size: 13px;" class="text-secondary">Harga ini adalah bila pembayaran
                                dilakukan didepan untuk
                                1
                                tahun atau 12
                                bulan sekaligus. Pembayaran dilakukan di awal
                                sebelum sistem digunakan atau setelah masa trial berakhir.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card card-box-packages-2 mb-3">
                        <div class="background-packages py-3 text-center">
                            <h4 style="font-size: 35px; color: #2B2A35;">Paket 3</h4>
                            <p class="text-secondary">Pembayaran Tahunan</p>
                        </div>
                        <div class="background-price-2">
                            <h2 class="text-white text-center py-2">Rp.6.000,-</h2>
                            <p class="price-child text-center">/user/bulan</p>
                        </div>
                        <div class="card-body">

                            <div class="list  mt-4" style="line-height: 10px;">
                                <p class="text-secondary">Full akses dashboard</p>
                                <hr>
                                <p class="text-secondary">Laporan kepegawaian</p>
                                <hr>
                                <p class="text-secondary">Full akses absensi mobile</p>
                                <hr>
                                <p class="text-secondary">Support chat & setup sistem</p>
                                <div class="col-md-12 mb-2">
                                    <button type="button" class="mt-2 btn btn-packge-buy-2">Beli paket</button>
                                </div>
                            </div>
                            <p style="font-size: 13px;" class="text-secondary">Harga ini adalah bila pembayaran
                                dilakukan didepan untuk
                                1
                                tahun atau 12
                                bulan sekaligus. Pembayaran dilakukan di awal
                                sebelum sistem digunakan atau setelah masa trial berakhir.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection