@extends("frontend.public_html.html.layout")

@php
    $title = 'Trở thành Bluecarer | Bluecare.vn';
    $description = 'Đăng ký MIỄN PHÍ để trở thành Bluecarer (đối tác của Bluecare). Tự do kiếm thêm thu nhập và hoàn toàn tự chủ về thời gian làm việc.';
    $url = 'tro-thanh-bluecarer';
@endphp

@section('title')
    <title>{{$title}}</title>
@stop

@section('extra-head')
    <link rel="canonical" href="{{url($url)}}" />
    <meta name="description" content="{{$description}}" />
    <meta name="keywords" content="bluecare, tiêm vắc xin, chăm sóc sức khỏe tại nhà, nhận trách nhiệm, trao yêu thương" />
    <meta property="og:title" content="{{$title}}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{url($url)}}" />
    <meta property="og:image" content="{{url('images/1%20menu%20logo.png')}}" />
    <meta property="og:site_name" content="bluecare.vn" />
    <meta property="og:description" content="{{$description}}" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="{{$title}}" />
    <meta name="twitter:description" content="{{$description}}" />
    <meta name="twitter:image" content="{{url('images/1%20menu%20logo.png')}}" />
@stop

@section("content")
    @php
        $v_time = round(microtime(true));
    @endphp
<section class="services-banner single-banner">
    <div class="banner">
        <div class="banner-image">
            <img src="images/Banner/cover tro thanh bluecare 2.jpg" alt="">
        </div>
        <div class="banner-content vertical-layout wrapper" style="left: 50%; transform: translateX(-50%);padding: 0 15px; position:absolute; ">
            <div class="banner-title primary-color" style="width: 100%">
                <p style="width: 100%;"><b>Cùng nhau trải nghiệm hạnh phúc</br>khi mang lại hạnh phúc cho mọi người</b></p>
            </div>
        </div>
    </div>
</section>
<section class="default-section become-bluecare-section shadow-section">
    <div class="wrapper horizontal-align">
        <div class="flex-1 vertical">
            <div id="be-happy-with-bluecare-slide" class="parallaxslider flex-1">
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="image-decription">
                <p class="upper-case"><span><b>Tăng kết nối, Thêm thu nhập, Thêm hạnh phúc</b></span></p>
                <p>Làm chủ nghề nghiệp, làm chủ thời gian, làm chủ cuộc đời</p>
            </div>
        </div>
        <form class="become-bluecare-form flex-1" name="register-tasker-form">
            <div class="flex-1">
                <h5>Be happy with Bluecare</h5>
                <div class="text-danger pb-3 hide" id="error-message"></div>
                <div class="row">
                    <div>
                        <input class="default-control" type="email" name="email" placeholder="Địa chỉ email"/>
                    </div>
                    <div>
                        <input class="default-control" type="text" name="telephone" placeholder="Số di động"/>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="row">
                    <div>
                        <input class="default-control" type="password" name="password" placeholder="Mật khẩu"/>
                    </div>
                    <div>
                        <input class="default-control" type="password" name="confirm_password" placeholder="Nhập lại mật khẩu"/>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="row">
                    <div>
                        <input class="default-control" type="text" name="name" placeholder="Họ Tên cá nhân, tên tổ chức"/>
                    </div>
                    <div>
                        <input class="default-control" type="text" name="invite" placeholder="Mã giới thiệu"/>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="term-and-codition">
                    <i>Khi tiếp tục, tôi đồng ý Bluecare được phép thu thập, sử dụng và tiết lộ thông tin được tôi cung cấp theo Chính sách Bảo Mật mà tôi đã đọc và hiểu</i>
                </div>
                <div class="book-service-button ">
                    <button type="button" class="orange-button flat" id="submitBtn">Đăng ký</button>
                </div>
            </div>
        </form>
    </div>
</section>


<section class="default-section wrapper excitement-service-section">
    <h2 class="primary-color default-header upper-case"><b>BẠN HỨNG THÚ VỚI DỊCH VỤ NÀO</b></h2>
    <p>"Nhấp chuột vào từng dịch vụ để tìm hiểu thêm thông tin chi tiết"</p>
    <ul class="fix-height-3">

        <li class="shadow-section">
            <div class="default-image-parent">
                <img src="images/Tro thanh Bluecare/Tro-thanh-Bluecare-9-Bac-si.png?v=1" alt=""/>
            </div>
            <h5 class="upper-case">Bác sĩ</h5>
            <div class="button">
                <a href="bac-si-bluecare" class="blue-button flat">Xem chi tiết</a>
            </div>
        </li>
        <li class="shadow-section">
            <div class="default-image-parent">
                <img src="images/Tro thanh Bluecare/Tro-thanh-Bluecare-2-Dieu-duong-thu-thuat.png?v=1" alt=""/>
            </div>
            <h5 class="upper-case">Điều đưỡng viên<br/>Y sĩ</h5>
            <div class="button">
                <a href="dieu-duong-vien-bluecare" class="blue-button flat">Xem chi tiết</a>
            </div>
        </li>
        <li class="shadow-section">
            <div class="default-image-parent">
                <img src="images/Tro thanh Bluecare/Tro-thanh-Bluecare-8-Thong-tac-tia-sua.png?v=1" alt=""/>
            </div>
            <h5 class="upper-case">Kỹ thuật viên</h5>
            <div class="button">
                <a href="ky-thuat-vien-bluecare" class="blue-button flat">Xem chi tiết</a>
            </div>
        </li>

        <li class="shadow-section">
            <div class="default-image-parent">
                <img src="images/Tro thanh Bluecare/Tro-thanh-Bluecare-10-Yoga.png?v=1" alt=""/>
            </div>
            <h5 class="upper-case">Huấn luyện viên</h5>
            <div class="button">
                <a href="huan-luyen-vien-bluecare" class="blue-button flat">Xem chi tiết</a>
            </div>
        </li>
        <li class="shadow-section">
            <div class="default-image-parent">
                <img src="images/Tro thanh Bluecare/Tro-thanh-Bluecare-6-Phuc-hoi-chuc-nang.png?v=1" alt=""/>
            </div>
            <h5 class="upper-case">Chuyên viên</br>CSSK</h5>
            <div class="button">
                <a href="chuyen-vien-cham-soc-suc-khoe-bluecare" class="blue-button flat">Xem chi tiết</a>
            </div>
        </li>
        <div class="clearfix"></div>
    </ul>
</section>
<section class="blue-section default-section why-join-bluecare">
    <div class="wrapper">
        <h2 class="upper-case align-center"><b>Tại sao nên gia nhập bluecare</b></h2>
        <ul>
            <li>
                <div class="default-image-parent">
                    <img src="images/Tro thanh Bluecare/why-join-bluecare1.png?v=1" alt=""/>
                </div>
                <h5>Tự do kiếm thêm thu nhập</h5>
                <p>Thu nhập ổn định, tùy theo dịch vụ và thời gian mà bạn tham gia</p>
            </li>
            <li>
                <div class="default-image-parent">
                    <img src="images/Tro thanh Bluecare/why-join-bluecare2.png?v=1" alt=""/>
                </div>
                <h5>Tự do về thời gian Tự chủ về tư duy</h5>
                <p>Không gò bó về mặt thời gian, chính bạn là người quyết định</p>
            </li>
            <li>
                <div class="default-image-parent">
                    <img src="images/Tro thanh Bluecare/why-join-bluecare3.png?v=1" alt=""/>
                </div>
                <h5>Được đào tạo nâng cao chuyên môn và tâm lý</h5>
            </li>
            <li>
                <div class="default-image-parent">
                    <img src="images/Tro thanh Bluecare/why-join-bluecare4.png?v=1" alt=""/>
                </div>
                <h5>Tự do gắn kết và chia sẻ</h5>
                <p>Thêm cơ hội được giao tiếp và kết nối với những người trong cộng đồng Bluecare</p>
            </li>
        </ul>
    </div>
</section>

<section class="default-section wrapper process-used-section">
    <h2 class="align-center primary-color default-header upper-case"><b>Quy trình sử dụng</b></h2>
    <div class="horizontal-align">
        <div class="flex-1">
            <div id="process-used-slide" class="parallaxslider flex-1">
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="banner">
                        <!--<div class="bgoverlay" data-bgimage="images/3 Banner Bluecare slide 2.png?v=1"></div>-->
                        <div class="bgoverlay" data-bgimage="none"></div>
                        <div class="banner-image">
                            <img src="images/Banner/3 Banner Bluecare slide 2.png?v=1" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-1">
            <ul>
                <li>
                    <div class="horizontal-align">
                        <div>
                            <div class="step-area">
                                <div class="default-image-parent">
                                    <img src="images/Tro thanh Bluecare/icon-yellow.png?v=1" alt=""/>
                                </div>
                                <p>1</p>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h5>Nhận đặt ca làm</h5>
                            <p>Mở ứng dụng để bắt đầu nhận ca làm của khách</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="horizontal-align">
                        <div>
                            <div class="step-area">
                                <div class="default-image-parent">
                                    <img src="images/Tro thanh Bluecare/icon-yellow.png?v=1" alt=""/>
                                </div>
                                <p>2</p>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h5>Nhận ca làm</h5>
                            <p>Chấp nhận đặt ca làm để nhận được thông tin đầy đủ của khách hàng.</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="horizontal-align">
                        <div>
                            <div class="step-area">
                                <div class="default-image-parent">
                                    <img src="images/Tro thanh Bluecare/icon-yellow.png?v=1" alt=""/>
                                </div>
                                <p>3</p>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h5>Bắt đầu ca làm</h5>
                            <p>Di chuyển đến địa chỉ theo yêu cầu của khách dựa trên bản đồ GPS</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="horizontal-align">
                        <div>
                            <div class="step-area">
                                <div class="default-image-parent">
                                    <img src="images/Tro thanh Bluecare/icon-yellow.png?v=1" alt=""/>
                                </div>
                                <p>4</p>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h5>Hoàn tất ca làm</h5>
                            <p>Chọn phím kết thúc khi hết ca và nhận tiền thanh toán</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>
<section class="default-section app-section">
    <div class="image-banner">
        <img src="images/Banner/Layer 66.png" alt=""/>
    </div>
    <div class="inner">
        <h3>Tải ứng dụng cho đối tác ngay để có thêm thu nhập và khuyến mãi</h3>
        <div class="app-button">
            <a href="#">
                <img src="images/App/10 app icon appstore.png?v=1" alt=""/>
            </a>
            <a href="#">
                <img src="images/App/10 app icon ch-play.png?v=1" alt=""/>
            </a>
        </div>
    </div>
</section>

<section class="popup-window rate inactive" id="alert-register-tasker">
    <div class="inner">
        <div class="alert alert-success">
            Đăng ký tài khoản tasker thành công
            <br>
            Link giới thiệu của bạn là <a href="#" id="affiliate_link"></a>
        </div>
        <div class="popup-action">
            <button class="btn btn-default to-home-btn"><i class="fa fa-home"></i></button>
            <button class="btn btn-secondary popup-close"><i class="fa fa-close"></i></button>
        </div>
    </div>
</section>
@endsection

@section('custom_script')
    <script type="text/javascript" src="{{url('frontend/js/register.js')}}?v={{$v_time}}"></script>
@stop