@extends('website.client.client_dashboard')
@section('css')
@endsection
@section('content')
    <div class="row p-3 pt-0">
        <div class="banner-4 radius-20">
            <div class="w-50 float-end pt-3">
                <h2 class="fw-bold ">you want to travel ! use destino with your friend</h2>
                <p class=" fs-8">Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry.
                    Lorem Ipsum has been the industry's standard dummy text </p>
            </div>
        </div>
        <div class="  mt-5 mb-3">
            <h2 class="fs-3 fw-bold"><span class="pink">pink </span> trips</h2>
            <p class="fs-8 text-secondary mb-0">
                welcome to destino please fill the information
            </p>
        </div>


        <div class="d-flex  justify-content-lg-between align-items-center shadow mb-3 p-3 radius-20 flex-wrap">
            <div class="d-flex align-items-center">
                <img src="images/slide1.png" class="radius-10 me-3 mb-2" width="90px" height="90px" alt="" />
                <div class="m-2">
                    <h2 class="fs-7 fw-bold mb-1">omar ahmed</h2>
                    <span class="fs-8 gray">Singapore, officially the </span>
                </div>
            </div>

            <div class="m-1">
                <p class="fs-8 gray mb-2">
                    <i class="fa-solid fa-location-arrow me-1 blue"></i> Approx
                    2 night trip
                </p>
                <p class="fs-8 gray m-0">
                    <i class="fa-solid fa-user me-2 blue"></i> check in 15 Sep
                    2022
                </p>
            </div>
            <div class="m-1">
                <p class="fs-8 gray mb-2">
                    <i class="fa-regular fa-calendar me-1 blue"></i> Approx 2
                    night trip
                </p>
                <p class="fs-8 gray m-0">
                    <i class="fa-regular fa-calendar me-1 blue"></i> check in 15
                    Sep 2022
                </p>
            </div>

            <div class="m-1">
                <p class="fs-5 blue mb-1">$420</p>
                <p class="fs-8 gray m-0">20/8/2022</p>
            </div>
            <div class="m-1">
                <div class="pt-3 position-relative rate">
                    <div class="float-end rate-image-2 position-absolute me-2">
                        <div class="overlay text-center p-1  fs-7 rounded-circle">
                            +7
                        </div>
                        <img class="rounded-circle z-index-1" style="margin-right: -9px;" src="images/slide1.png"
                            alt="">
                        <img class="rounded-circle z-index-2" src="images/slide2.png" alt="">
                    </div>
                    <p class="fs-8 gray" style="margin-top:30px; margin-right: 10px;"><i
                            class="fa-solid fa-eye-slash  blue bg-transparent"></i> 15 views</p>
                </div>
            </div>
            <div class="m-1 flex-column d-block d-xl-flex">
                <button class="yellow-btn btn m-1" style="width: 80px;"> edit</button>
                <button class="btn text-capitalize m-1" style="width: 80px;"> invite</button>
            </div>

        </div>
        <div class="d-flex  justify-content-lg-between align-items-center shadow mb-3 p-3 radius-20 flex-wrap">
            <div class="d-flex align-items-center">
                <img src="images/slide1.png" class="radius-10 me-3 mb-2" width="90px" height="90px" alt="" />
                <div class="m-2">
                    <h2 class="fs-7 fw-bold mb-1">omar ahmed</h2>
                    <span class="fs-8 gray">Singapore, officially the </span>
                </div>
            </div>

            <div class="m-1">
                <p class="fs-8 gray mb-2">
                    <i class="fa-solid fa-location-arrow me-1 blue"></i> Approx
                    2 night trip
                </p>
                <p class="fs-8 gray m-0">
                    <i class="fa-solid fa-user me-2 blue"></i> check in 15 Sep
                    2022
                </p>
            </div>
            <div class="m-1">
                <p class="fs-8 gray mb-2">
                    <i class="fa-regular fa-calendar me-1 blue"></i> Approx 2
                    night trip
                </p>
                <p class="fs-8 gray m-0">
                    <i class="fa-regular fa-calendar me-1 blue"></i> check in 15
                    Sep 2022
                </p>
            </div>

            <div class="m-1">
                <p class="fs-5 blue mb-1">$420</p>
                <p class="fs-8 gray m-0">20/8/2022</p>
            </div>
            <div class="m-1">
                <div class="pt-3 position-relative rate">
                    <div class="float-end rate-image-2 position-absolute me-2">
                        <div class="overlay text-center p-1  fs-7 rounded-circle">
                            +7
                        </div>
                        <img class="rounded-circle z-index-1" style="margin-right: -9px;" src="images/slide1.png"
                            alt="">
                        <img class="rounded-circle z-index-2" src="images/slide2.png" alt="">
                    </div>
                    <p class="fs-8 gray" style="margin-top:30px; margin-right: 10px;"><i
                            class="fa-solid fa-eye-slash  blue bg-transparent"></i> 15 views</p>
                </div>
            </div>
            <div class="m-1 flex-column d-block d-xl-flex">
                <button class="yellow-btn btn m-1" style="width: 80px;"> edit</button>
                <button class="btn text-capitalize m-1" style="width: 80px;"> invite</button>
            </div>

        </div>

    </div>
@endsection
@section('js')
@endsection