<x-app-layout layout="landing">
    <div class="banner-one-app">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 banner-one-img text-center ms-2 ms-sm-0">
                    <img src="{{ asset('images/landing-pages/images/home-1/banner-top.webp') }}" alt=""
                        class="img-fluid ">
                </div>
                <div class="col-sm-6 inner-box">
                    <p class="mb-2 text-uppercase text-secondary">
                        Look fit, feel fit
                    </p>
                    <h1 class="text-secondary mb-4">The Joy Of<br><span class="text-primary">Right Health</span></h1>
                    <p class="mb-5">It is a long established fact that a reader will be distracted by the readable
                        content
                        of a page when looking at its layout. </p>
                    <div class="d-flex align-items-center store-btn">
                        <a hrer="javascript" class="btn btn-primary">Download Free</a>
                        <a hrer="javascript" class="btn btn-secondary ms-3">Download Pro</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-secondary features-card">
        <div class="container">
            <div class="row mx-2 mx-sm-0">
                <div class="col-lg-6"></div>
                <div class="col-lg-6 top-feature">
                    <div class="text-right">
                        <p class="mb-2 text-white text-uppercase">Why HopeUI rocks</p>
                        <h2 class="mb-3 text-white notch-feature-txt">Top Notch Features </h2>
                        <p class="mb-5 text-white pb-5">It is a long established fact that a reader will be distracted
                            by
                            the readable content of a page when looking at its layout. </p>
                    </div>
                </div>
            </div>
            <div class="row row-cols-sm-2 row-cols-lg-4">
                <div class="col">
                    <div class="card services-box  rounded-1">
                        <div class="card-body">
                            <h4 class="mb-3">400+ UI Components</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                            <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M5.45109 0.343108L5.46396 1.36387L10.0063 1.42104L0.0568434 11.3704L0.787737 12.1013L10.7371 2.15194L10.7943 6.6942L11.8151 6.70706L11.736 0.422159L5.45109 0.343108Z"
                                    fill="currentColor" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card services-box  rounded-1">
                        <div class="card-body">
                            <h4 class="mb-3">Refreshing<br> Design</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                            <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M5.45109 0.343108L5.46396 1.36387L10.0063 1.42104L0.0568434 11.3704L0.787737 12.1013L10.7371 2.15194L10.7943 6.6942L11.8151 6.70706L11.736 0.422159L5.45109 0.343108Z"
                                    fill="currentColor" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card services-box  rounded-1">
                        <div class="card-body">
                            <h4 class="mb-3">Universal UI Toolkit</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                            <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M5.45109 0.343108L5.46396 1.36387L10.0063 1.42104L0.0568434 11.3704L0.787737 12.1013L10.7371 2.15194L10.7943 6.6942L11.8151 6.70706L11.736 0.422159L5.45109 0.343108Z"
                                    fill="currentColor" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="col mb-4">
                    <div class="card services-box  rounded-1">
                        <div class="card-body">
                            <h4 class="mb-3">Fully<br> Responsive</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                            <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M5.45109 0.343108L5.46396 1.36387L10.0063 1.42104L0.0568434 11.3704L0.787737 12.1013L10.7371 2.15194L10.7943 6.6942L11.8151 6.70706L11.736 0.422159L5.45109 0.343108Z"
                                    fill="currentColor" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-padding bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <img src="{{ asset('images/landing-pages/images/home-1/aboutus.webp') }}" alt=""
                        class="img-fluid ">
                </div>
                <div class="col-md-6">
                    <p class="mb-2 text-secondary text-uppercase">
                        about us
                    </p>
                    <h2 class="text-secondary mb-4">What they say <br> <span class="text-primary">About Us</span></h2>
                    <p class="mb-5">It is a long established fact that a reader will be distracted by the readable
                        content
                        of a page when looking at its layout. </p>
                    <a hrer="javascript" class="btn btn-primary">Get Started</a>
                </div>
            </div>
        </div>
    </div>
    <div class="section-padding page-bg">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <p class="mb-2 text-secondary text-uppercase">
                        Download now
                    </p>
                    <h2 class="text-secondary mb-4 fast-afrd-txt">Fast, easy, and <br> <span
                            class="text-primary">Affordable</span></h2>
                    <p class="mb-5">It is a long established fact that a reader will be distracted by the readable
                        content
                        of a page when looking at its layout. </p>
                    <div class="d-flex align-items-center store-btn flex-wrap">
                        <img src="{{ asset('images/landing-pages/images/home-1/playstore.webp') }}" alt=""
                            class="img-fluid mb-3 mb-md-0">
                        <img src="{{ asset('images/landing-pages/images/home-1/appstore.webp') }}" alt=""
                            class="img-fluid ms-0 ms-md-3">
                    </div>
                </div>
                <div class="col-lg-6 mt-5 mt-lg-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <img src="{{ asset('images/landing-pages/images/home-1/dwn-1.webp') }}" alt=""
                                class="img-fluid">
                        </div>
                        <div class="col">
                            <img src="{{ asset('images/landing-pages/images/home-1/dwn-2.webp') }}" alt=""
                                class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-card-padding  bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4">
                    <p class="mb-2 text-secondary text-uppercase">
                        Pricing
                    </p>
                    <h2 class="text-secondary mb-4">Our <span class="text-primary">Price<br> Plans</span></h2>
                    <p class="mb-4">It is a long established fact that a reader will be distracted by the readable
                        content
                        of a page when looking at its layout. </p>
                    <a href="#" class="btn btn-primary mt-2">View demo</a>
                </div>
                <div class="col-lg-8 mt-lg-0 mt-4">
                    <div class="row iq-star-inserted row-cols-1 row-cols-md-2 row-cols-lg-2 text-center">
                        <div class="col iq-star-inserted-2">
                            <div class="card shadow-lg">
                                <div class="card-body">
                                    <h5 class="my-0 fw-normal mb-4">Pro</h5>
                                    <h4 class="card-title pricing-card-title mb-0 text-primary mb-4">$15<small
                                            class="text-secondary"> / month</small></h4>
                                    <p class="">Billed Yearly</p>
                                    <p>$169.99 Billed Monthly</p>
                                    <ul class="list-unstyled my-3 p-0">
                                        <li class="mb-4">20 users included</li>
                                        <li class="mb-4">10GB of storage</li>
                                        <li class="mb-4">Priority Email support</li>
                                        <li class="mb-4">Help center access</li>
                                        <li class="mb-4">Help center access</li>
                                        <li>
                                            <p>Help center access</p>
                                        </li>
                                    </ul>
                                    <button type="button" class="btn btn-primary w-100">Get Started</button>
                                </div>
                            </div>
                        </div>
                        <div class="col iq-star-inserted-3">
                            <div class="card my-5">
                                <div class="card-body page-bg">
                                    <h5 class="my-0 fw-normal mb-4">Premium</h5>
                                    <h4 class="card-title pricing-card-title mb-0 text-primary mb-4">$49 <small
                                            class="text-secondary"> / month</small></h4>
                                    <p class="">Billed Yearly</p>
                                    <p>$169.9 Billed Monthly</p>
                                    <ul class="list-unstyled my-3 p-0">
                                        <li class="mb-3">30 users included</li>
                                        <li class="mb-3">15 GB of storage</li>
                                        <li class="mb-3">Call and email support</li>
                                        <li class="mb-3">Help center access</li>
                                        <li class="mb-3">Help center access</li>
                                        <li>Help center access</li>
                                    </ul>
                                    <button type="button" class="btn btn-primary w-100">Get Started</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-padding ">
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
                <div class="col">
                    <img src="{{ asset('images/landing-pages/images/home-1/01.webp') }}" alt=""
                        class="img-fluid ">
                </div>
                <div class="col">
                    <img src="{{ asset('images/landing-pages/images/home-1/02.webp') }}" alt=""
                        class="img-fluid ">
                </div>
                <div class="col">
                    <img src="{{ asset('images/landing-pages/images/home-1/03.webp') }}" alt=""
                        class="img-fluid ">
                </div>
            </div>
        </div>
    </div>
    <div class="section-card-padding bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12 text-center">
                    <p class="mb-2 text-uppercase text-secondary">
                        team
                    </p>
                    <h2 class="text-secondary mb-4">Expert <span class="text-primary">Teams</span></h2>
                </div>
                <div class="col-md-3 col-sm-2">
                    <div class="card team-image">
                        <x-landing-pages.widgets.team teamImage="team1.webp" teamTitle="Darlene Robertson"
                            teamText="Founder" />
                    </div>
                </div>
                <div class="col-md-3 col-sm-2">
                    <div class="card team-image">
                        <x-landing-pages.widgets.team teamImage="team2.webp" teamTitle="Floyd Miles"
                            teamText="UI designer" />
                    </div>
                </div>
                <div class="col-md-3 col-sm-2">
                    <div class="card team-image">
                        <x-landing-pages.widgets.team teamImage="team-3.webp" teamTitle="Arlene McCoy"
                            teamText="Researcher" />
                    </div>
                </div>
                <div class="col-md-3 col-sm-2">
                    <div class="card team-image">
                        <x-landing-pages.widgets.team teamImage="team-4.webp" teamTitle="Darlene Robertson"
                            teamText="Founder" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-card-padding page-bg">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12 text-center">
                    <p class="mb-2 text-uppercase text-secondary">
                        Blog
                    </p>
                    <h2 class="text-secondary mb-4">All the <span class="text-primary">Support you Need</span></h2>
                </div>
                <div class="overflow-hidden slider-circle-btn mt-5" id="app-slider">
                    <ul class="p-0 m-0 swiper-wrapper list-inline">
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.blog blogImage="home-1/04.webp"
                                blogTitle="The Shaping the futures, part by part." blogText="Video" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.blog blogImage="home-1/05.webp"
                                blogTitle="Technology that unwinds your potential." blogText="Video" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.blog blogImage="home-1/06.webp"
                                blogTitle="Generating the best online environment." blogText="Video" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.blog blogImage="home-1/04.webp"
                                blogTitle="The Shaping the futures, part by part." blogText="Video" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.blog blogImage="home-1/05.webp"
                                blogTitle="Technology that unwinds your potential." blogText="Video" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.blog blogImage="home-1/06.webp"
                                blogTitle="Generating the best online environment." blogText="Video" />
                        </li>
                    </ul>
                    <div class="swiper-button swiper-button-next"></div>
                    <div class="swiper-button swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-padding bg-white">
        <div class="container">
            <div class="row align-items-center text-center row-cols-2 row-cols-sm-2 row-cols-md-2 row-cols-lg-4">
                <div class="col mb-lg-0 mb-4">
                    <x-landing-pages.widgets.counter couterVlue="3" counterTitle="Best Designer Award" />
                </div>
                <div class="col mb-lg-0 mb-4">
                    <x-landing-pages.widgets.counter couterVlue="50+" counterTitle="Loyal Clients" />
                </div>
                <div class="col">
                    <x-landing-pages.widgets.counter couterVlue="158+" counterTitle="Nominee Awards" />
                </div>
                <div class="col">
                    <x-landing-pages.widgets.counter couterVlue="92+" counterTitle="CSS Designs" />
                </div>
            </div>
        </div>
    </div>
    <div class="inner-box bg-secondary">
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-5 justify-content-center ">
                <div class="col mb-md-0 mb-5 d-flex justify-content-center">
                    <x-landing-pages.widgets.client clientImage="07.webp" />
                </div>
                <div class="col mb-md-0 mb-5 d-flex justify-content-center">
                    <x-landing-pages.widgets.client clientImage="08.webp" />
                </div>
                <div class="col mb-md-0 mb-5 d-flex justify-content-center">
                    <x-landing-pages.widgets.client clientImage="09.webp" />
                </div>
                <div class="col mb-md-0 mb-5 d-flex justify-content-center">
                    <x-landing-pages.widgets.client clientImage="10.webp" />
                </div>
                <div class="col d-flex justify-content-center">
                    <x-landing-pages.widgets.client clientImage="11.webp" />
                </div>
            </div>
        </div>
    </div>
    <div class="section-padding">
        <div class="container">
            <div class="row align-items-center text-center">
                <div class="col-lg-12">
                    <p class="mb-4 text-uppercase text-secondary">Testimony</p>
                    <h2 class="text-secondary customer-txt">What our <span class="text-primary">Customer’s <br> are
                            saying</span></h2>
                </div>
                <div class="overflow-hidden slider-circle-btn" id="testimonial-slider">
                    <ul class="p-0 m-0 swiper-wrapper list-inline">
                        <li class="swiper-slide">
                            <x-landing-pages.widgets.testiominal
                                testText="Torquatos nec eu, detr
                        periculis ex, nihil expetendis in mei. Mei an pericula euripidis.hinc partem ei est. Eos ei nisl
                        graecis, vix aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id, error
                        epicurei mea. Mea facilisis urbanitas.Torquatos nec eu, detr periculis ex, nihil expetendis in
                        mei."
                                testOwner="Elsa Schmidt" testSubtitle="Spa" />
                        </li>
                        <li class="swiper-slide">
                            <x-landing-pages.widgets.testiominal
                                testText="Torquatos nec eu, detr
                        periculis ex, nihil expetendis in mei. Mei an pericula euripidis.hinc partem ei est. Eos ei nisl
                        graecis, vix aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id, error
                        epicurei mea. Mea facilisis urbanitas.Torquatos nec eu, detr periculis ex, nihil expetendis in
                        mei."
                                testOwner="Elsa Schmidt" testSubtitle="Spa" />
                        </li>
                        <li class="swiper-slide">
                            <x-landing-pages.widgets.testiominal
                                testText="Torquatos nec eu, detr
                        periculis ex, nihil expetendis in mei. Mei an pericula euripidis.hinc partem ei est. Eos ei nisl
                        graecis, vix aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id, error
                        epicurei mea. Mea facilisis urbanitas.Torquatos nec eu, detr periculis ex, nihil expetendis in
                        mei."
                                testOwner="Elsa Schmidt" testSubtitle="Spa" />
                        </li>
                        <li class="swiper-slide">
                            <x-landing-pages.widgets.testiominal
                                testText="Torquatos nec eu, detr
                        periculis ex, nihil expetendis in mei. Mei an pericula euripidis.hinc partem ei est. Eos ei nisl
                        graecis, vix aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id, error
                        epicurei mea. Mea facilisis urbanitas.Torquatos nec eu, detr periculis ex, nihil expetendis in
                        mei."
                                testOwner="Elsa Schmidt" testSubtitle="Spa" />
                        </li>
                        <li class="swiper-slide">
                            <x-landing-pages.widgets.testiominal
                                testText="Torquatos nec eu, detr
                        periculis ex, nihil expetendis in mei. Mei an pericula euripidis.hinc partem ei est. Eos ei nisl
                        graecis, vix aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id, error
                        epicurei mea. Mea facilisis urbanitas.Torquatos nec eu, detr periculis ex, nihil expetendis in
                        mei."
                                testOwner="Elsa Schmidt" testSubtitle="Spa" />
                        </li>
                    </ul>
                    <div class="swiper-button swiper-button-next"></div>
                    <div class="swiper-button swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
