<script setup>
import Group2444 from '@images/svg/Group-2444.svg';
import Group2477 from '@images/svg/Group-2477.svg';
import Group2478 from '@images/svg/Group-2478.svg';
import Group4 from '@images/svg/Group_4.svg';
</script>
<template>
    <section id="landingFeatures" class="pt-5 landing-features">
        <div class="container">
            <div class="text-center">
                <span class="">SAFE, HIGH-QUALITY & EFFECTIVE</span>
            </div>
            <h1 class="text-center">
                <span class=""><b>Daily Testosterone Treatment Online</b></span>
            </h1>
            <p class="text-center fs-5 mb-1">
                HGH provides the safest testosterone optimization with daily testosterone Injections and topical creams. Our
                fully
                licensed medical providers offer online testosterone prescriptions and comprehensive medical support.
            </p>
            <p class="text-center fs-5 mt-3">
                Differing from weekly treatments, our method incorporates daily testosterone treatments that closely mirror
                your body's natural hormone production cycle. This highly effective approach ensures optimal results from
                your online Testosterone Replacement Therapy (TRT) while minimizing discomfort from potential side effects.
            </p>

            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="accordion" id="accordionExample">
                        <ul class="list-unstyled">
                            <li>
                                <h5>
                                    <span class="badge badge-center rounded-pill bg-primary p-0 me-2"><i
                                            class="ti ti-check ti-xs"></i></span>
                                    Low risk of side effects
                                </h5>
                            </li>
                            <li>
                                <h5>
                                    <span class="badge badge-center rounded-pill bg-primary p-0 me-2"><i
                                            class="ti ti-check ti-xs"></i></span>
                                    Safe and effective
                                </h5>
                            </li>
                            <li>
                                <h5>
                                    <span class="badge badge-center rounded-pill bg-primary p-0 me-2"><i
                                            class="ti ti-check ti-xs"></i></span>
                                    Optimal results
                                </h5>
                            </li>
                            <li>
                                <h5>
                                    <span class="badge badge-center rounded-pill bg-primary p-0 me-2"><i
                                            class="ti ti-check ti-xs"></i></span>
                                    Customized for your body
                                </h5>
                            </li>
                            <li>
                                <h5>
                                    <span class="badge badge-center rounded-pill bg-primary p-0 me-2"><i
                                            class="ti ti-check ti-xs"></i></span>
                                    The preferred method for TRT
                                </h5>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="landingFeatures" class="section-py landing-features">
        <div class="container">
            <div class="">
                <span class="">OUR PROCESS</span>
            </div>
            <h1 class="">
                <span class=""><b>How to Get Testosterone Online</b></span>
            </h1>
            <h2 class="text-center">
                <span class="">4 Simple Steps to Feeling Better Than Ever</span>
            </h2>

            <div class="features-icon-wrapper row gx-0 gy-4 g-sm-5">
                <div class="col-lg-3 col-sm-6 features-icon-box">
                    <div class="mb-3">
                        <img :src="Group2444" alt="laptop charging" style="width: 100px;" />
                    </div>
                    <h5 class=""><b>Check Your Symptoms</b></h5>
                    <p class="features-icon-description">
                        Complete an online assessment to discover what's happening within your body. </p>
                </div>
                <div class="col-lg-3 col-sm-6 features-icon-box">
                    <div class=" mb-3 mt-3">
                        <img :src="Group2477" alt="laptop charging" style="width: 100px;" />
                    </div>
                    <h5 class="mb-3"><b>Learn More</b></h5>
                    <p class="features-icon-description">
                        In your online consultation, receive your personalized treatment plan from our medical provider.
                    </p>
                </div>
                <div class="col-lg-3 col-sm-6  features-icon-box">
                    <div class=" mb-3 mt-3">
                        <img :src="Group2478" alt="laptop charging" style="width: 100px;" />
                    </div>
                    <h5 class="mb-3"><b>Test Your Levels</b></h5>
                    <p class="features-icon-description">
                        We will send you a convenient hormone test kit at you door step.
                    </p>
                </div>
                <div class="col-lg-3 col-sm-6 features-icon-box">
                    <div class=" mb-3 mt-3">
                        <img :src="Group4" alt="laptop charging" style="width: 100px;" />
                    </div>
                    <h5 class="mb-3 mt-3"><b>Change Your Life</b></h5>
                    <p class="features-icon-description">
                        Receive your TRT medication by mail.
                    </p>
                </div>
            </div>
            <p class="text-center">

                All prescription medications necessitate medical monitoring. Depending on DEA and state regulations, your
                testosterone treatment plan may mandate an in-person medical examination. Additional details will be
                provided by your HGH provider during your online consultations.
            </p>
        </div>
    </section>
</template>
<style>
@media (max-width:567px) {
    .features-icon-box {
        text-align: center;
    }

}

#accordionExample {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Set a specific height if needed, or remove it to take the height of the content */
}

.list-unstyled {
    padding: 0;
    margin: 0;
}

.list-unstyled li {
    list-style: none;
    margin-bottom: 10px;
    /* Adjust the spacing between each list item as needed */
}

.list-unstyled h5 {
    display: flex;
    align-items: center;
}

.list-unstyled h5 span {
    margin-right: 10px;
    /* Adjust the spacing between the badge and text as needed */
}
</style>
