@extends('quanlynhatro.landing_layout')
@section('title')
    <title>Tìm nhà nhận thưởng với ITRO</title>
@endsection
@section('meta')
    <meta property="og:url" content="{{ url()->current() }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Tìm nhà nhận thưởng với ITRO"/>
    <meta property="og:description"
          content="iTro.vn - Tìm là thấy, ở là thích"/>
    <meta property="og:image"
          content="https://quanlynhatro.com/ogimage_qlnt.jpg"/>
@endsection

@section('content')
    <!-- header -->
    <header id="pageHeader" class="page-header page-header--ld fixtop js-header-landing-bg animated fadeInDown">
        <nav class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="/">
                <img src="/quanlynhatro/assets/img/itro-logo-colored.png">
            </a>
            <button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarSupportedContent">
                <i class="mdi mdi-menu"></i>
                <i class="mdi mdi-close"></i>
            </button>
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
                <ul class="navbar-nav navbar-nav--left">
                    <li class="nav-item nav-item--text"><a href="#BlockTenantBenefits" class="nav-link js-smooth-scroll">Lợi ích</a></li>
                    <li class="nav-item nav-item--text"><a href="#BlockTenantSteps" class="nav-link js-smooth-scroll">Hướng dẫn</a></li>
                    <li class="nav-item nav-item--text"><a href="#BlockTenantDownload" class="nav-link js-smooth-scroll">Tải app</a></li>
                </ul>
                <!-- <ul class="navbar-nav navbar-nav--right">
                    <li class="nav-item nav-item--btn"><a class="btn btn-primary" href="#">Phần mềm quản lý</a></li>
                </ul> -->
            </div>
        </nav>
    </header>
    <!-- END header -->
    <!--=======================================================================-->
    <!-- app -->
    <section class="block-app block-app--top-fixed">
        <div class="block-app__background">
            <div class="hero-background">
                <div class="hero-background__shapes">
                    <div class="hero-background__shape hero-background__shape--fill1" style="left: -35.3333px; top: 1096.67px;">
                        <div class="hero-background__shape__transform">
                            <svg width="1001" height="585" style="transform: scale(1.33333) translate(-500.5px, -500.5px);">
                                <g x="0" y="0">
                                    <polygon class="fill1" fill="#ec8056" points="0,585 1001,270 452,0"></polygon>
                                </g>
                            </svg>
                        </div>
                    </div>
                    <div class="hero-background__shape hero-background__shape--stroke" style="left: -35.3333px; top: 1125px;">
                        <div class="hero-background__shape__transform">
                            <svg width="1080" height="608" style="transform: scale(1.33333) translate(-539px, -539px);">
                                <g x="1" y="1">
                                    <polygon class="stroke" points="0,606 1078,291 486,0"></polygon>
                                </g>
                            </svg>
                        </div>
                    </div>
                    <div class="hero-background__shape hero-background__shape--fill3" style="left: 1960.67px; top: 986.667px;">
                        <div class="hero-background__shape__transform">
                            <svg width="683" height="438" style="transform: scale(1.33333) translate(-341.5px, -341.5px);">
                                <g x="0" y="0">
                                    <polygon class="fill3" fill="#FDE7A9" points="0,0 324,438 683,117"></polygon>
                                </g>
                            </svg>
                        </div>
                    </div>
                    <div class="hero-background__shape hero-background__shape--stroke" style="left: 1914px; top: 971.333px;">
                        <div class="hero-background__shape__transform">
                            <svg width="685" height="441" style="transform: scale(1.33333) translate(-341.5px, -341.5px);">
                                <g x="1" y="1">
                                    <polygon class="stroke" points="0,0 323,439 683,117"></polygon>
                                </g>
                            </svg>
                        </div>
                    </div>
                    <div class="hero-background__shape hero-background__shape--stroke" style="left: 1258px; top: 179.333px;">
                        <div class="hero-background__shape__transform">
                            <svg width="1017" height="683" style="transform: scale(1.33333) translate(-507.5px, -507.5px);">
                                <g x="1" y="1">
                                    <polygon class="stroke" points="0,681 1015,202 432,0"></polygon>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block-app__wrap">
            <div class="row justify-content-center align-items-center m-0">
                <div class="col-12 col-lg-5 order-2 order-lg-1">
                    <div class="block-app__sc">
                        <div class="app-sc-wrap">
                            <div class="app-sc-tablet element-animated" data-animation="fadeInRight--sm" animation-delay="0">
                                <img src="/quanlynhatro/assets/img/tenant-ipad.svg" alt="Tablet">
                            </div>
                            <div class="app-sc-mobile element-animated" data-animation="fadeInLeft--sm" animation-delay="0">
                                <img src="/quanlynhatro/assets/img/tenant-step4.svg" alt="Phone">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 col-xl-5 order-1 order-lg-2">
                    <div class="block-app__cnt">
                        <h1 class="block-app__tle text-uppercase element-animated" data-animation="a-ldTitle" animation-delay=".1s">
                            Tìm nhà nhận thưởng với ITRO
                        </h1>
                        <div class="block-app__stl element-animated" data-animation="a-ldSubtitle" animation-delay=".2s">
                            <p>Một ý tưởng mới mẻ giúp người thuê vừa tìm được nhà lại vừa có thưởng.</p>
                            <p>Hãy cài đặt ngay và gửi yêu cầu tìm kiếm lên cho chúng chúng tôi. ITRO sẽ giúp bạn tìm kiếm và kết nối trực tiếp đến chủ nhà. Bạn có thể trao đổi luôn thay vì xem những tin đăng cho thuê như hiện nay mà không tiếp cận được với chủ nhà.</p>
                        </div>
                        <div class="block-app__dwl">
                            <div class="dwl-btn-wrp element-animated" data-animation="fadeInUp--sm" animation-delay=".2s">
                                <div class="single-download-btn">
                                    <a target="_blank"
                                       href="https://apps.apple.com/us/app/itro-tìm-phòng-nhanh/id1500516141?ls=1"><img
                                                src="/quanlynhatro/assets/img/download-app-store.png" height="72"
                                                alt="App Store"></a>
                                </div>
                                <div class="single-download-btn">
                                    <a target="_blank"
                                       href="https://play.google.com/store/apps/details?id=com.itro.findroom"><img
                                                src="/quanlynhatro/assets/img/download-google-play.png" height="72"
                                                alt="CH Play"></a>
                                </div>
                            </div>
                            <div class="dwl-qrc-wrp element-animated" data-animation="fadeInUp--sm" animation-delay=".25s">
                                <div class="qr-txt">Quét mã QR bên dưới để tải app</div>
                                <div class="qr-img">
                                    <img src="/quanlynhatro/assets/img/qrcode.svg" alt="Alternate Text" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END app -->
    <!--=======================================================================-->
    <!-- benefits -->
    <section id="BlockTenantBenefits" class="block-ld block-benefits block-ld--bg-gray01">
        <div class="container">
            <div class="block-benefits__wrap">
                <div class="block-ld__header text-center">
                    <h2 class="block-ld__title text-uppercase element-animated" data-animation="a-ldTitle" animation-delay="0">
                        Lợi ích khi sử dụng itro để tìm khách thuê
                    </h2>
                    <p class="block-ld__subtitle element-animated" data-animation="a-ldSubtitle" animation-delay=".2s">
                        Chúng tôi mang đến những khác biệt dành cho bạn trong quá trình tiếp cận đến khách thuê nhà
                    </p>
                </div>
                <div class="block-ld__main">
                    <div class="row">
                        <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                            <div class="element-animated" style="height: 100%" data-animation="fadeInUp--sm" animation-delay=".1s">
                                <div class="c-card c-card-bnf c-card--bd c-card--sd">
                                    <div class="c-card-bnf__wrp">
                                        <div class="c-card-bnf__icn">
                                            <img src="/quanlynhatro/assets/img/icon/loi-ich-1.svg" alt="">
                                        </div>
                                        <div class="c-card-bnf__cnt">
                                            <h3 class="c-card-bnf__tle">Nhiều lựa chọn, thông tin bảo mật tránh bị spam</h3>
                                            <p class="c-card-bnf__dcr">Chúng tôi chỉ gửi thông tin tìm kiếm của bạn cho chủ nhà đang có phòng trống quanh khu vực bạn tìm. Số điện thoại của bạn sẽ được bảo mật, không hiển thị với chủ nhà.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                            <div class="element-animated" style="height: 100%" data-animation="fadeInUp--sm" animation-delay="0">
                                <div class="c-card c-card-bnf c-card-bnf--fet c-card--bd c-card--sd">
                                    <div class="c-card-bnf__wrp">
                                        <div class="c-card-bnf__icn">
                                            <img src="/quanlynhatro/assets/img/icon/loi-ich-2.svg" alt="">
                                        </div>
                                        <div class="c-card-bnf__cnt">
                                            <h3 class="c-card-bnf__tle">Được trao đổi trực tiếp với chủ nhà </h3>
                                            <p class="c-card-bnf__dcr">Bạn có thể nhắn tin trực tiếp với chủ nhà và trao đổi kỹ càng về các thông tin nhà, giúp bạn có thể nắm được các thông tin cần thiết và dễ dàng đưa ra quyết định.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                            <div class="element-animated" style="height: 100%" data-animation="fadeInUp--sm" animation-delay=".15s">
                                <div class="c-card c-card-bnf c-card--bd c-card--sd">
                                    <div class="c-card-bnf__wrp">
                                        <div class="c-card-bnf__icn">
                                            <img src="/quanlynhatro/assets/img/icon/loi-ich-3.svg" alt="">
                                        </div>
                                        <div class="c-card-bnf__cnt">
                                            <h3 class="c-card-bnf__tle">Vừa tìm được nhà lại vừa có thưởng</h3>
                                            <p class="c-card-bnf__dcr">Bạn không nhầm đâu, chúng tôi sẽ trích 1 phần phí thu từ chủ nhà để tặng cho bạn như là một sự cảm ơn đến bạn vì đã tin tưởng và ủng hộ chúng tôi.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END benefits -->
    <!--=======================================================================-->
    <!-- steps -->
    <section id="BlockTenantSteps" class="block-ld block-steps">
        <div class="container">
            <div class="block-steps__wrap">
                <div class="block-ld__header text-center">
                    <h2 class="block-ld__title text-uppercase element-animated" data-animation="a-ldTitle" animation-delay="0">
                        4 bước tìm nhà trên ITRO siêu tiện lợi
                    </h2>
                    <p class="block-ld__subtitle element-animated" data-animation="a-ldSubtitle" animation-delay=".2s">
                        Khách tìm nhà sẽ không phải mất bất kỳ một chi phí nào cả. Ngoài ra, nếu bạn tìm thấy được nhà trên hệ thống của chúng tôi thì chúng tôi sẽ trích một phần phí thu được từ chủ nhà để thưởng cho bạn
                    </p>
                </div>
                <div class="block-ld__main">
                    <div class="row justify-content-center align-items-center">
                        <div class="col-12 col-lg-6 mt-2 mt-lg-0 order-2 order-lg-2">
                            <div class="block-steps__sc element-animated" data-animation="fadeInRight--sm" animation-delay="0">
                                <div id="TabContent__FindCustomer" class="tab-content">
                                    <div id="TabPane__FindCustomer-1" class="tab-pane fade show active">
                                        <img src="/quanlynhatro/assets/img/tenant-step1.svg" alt="App Listing">
                                    </div>
                                    <div id="TabPane__FindCustomer-2" class="tab-pane fade">
                                        <img src="/quanlynhatro/assets/img/tenant-step2.svg" alt="App Listing">
                                    </div>
                                    <div id="TabPane__FindCustomer-3" class="tab-pane fade">
                                        <img src="/quanlynhatro/assets/img/tenant-step3.svg" alt="App Listing">
                                    </div>
                                    <div id="TabPane__FindCustomer-4" class="tab-pane fade">
                                        <img src="/quanlynhatro/assets/img/tenant-step4.svg" alt="App Listing">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6 order-1 order-lg-1">
                            <div class="block-steps__steps">
                                <div class="c-process c-process--screen">
                                    <div class="c-process__wrap nav" role="tablist">
                                        <a href="#TabPane__FindCustomer-1" data-toggle="tab" role="tab" class="c-process__step active element-animated" data-animation="fadeInUp--sm" animation-delay="0">
                                            <div class="single-step">
                                                <div class="single-step__wrp">
                                                    <div class="single-step__lvl">Bước 1</div>
                                                    <h4 class="single-step__tle">Gửi yêu cầu tìm nhà</h4>
                                                    <div class="single-step__dcr">
                                                        <p>Khách có nhu cầu tìm nhà mở ứng dụng lên và nhập các thông tin cần tìm: khu vực, khoảng giá, loại hình.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="#TabPane__FindCustomer-2" data-toggle="tab" role="tab" class="c-process__step element-animated" data-animation="fadeInUp--sm" animation-delay="0">
                                            <div class="single-step">
                                                <div class="single-step__wrp">
                                                    <div class="single-step__lvl">Bước 2</div>
                                                    <h4 class="single-step__tle">Nhận thông tin từ chủ nhà</h4>
                                                    <div class="single-step__dcr">
                                                        <p>Bạn sẽ nhận được thông báo qua ứng dụng khi có 1 chủ nhà gửi tin nhắn cho bạn về việc có phòng trống phù hợp với nhu cầu của bạn.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="#TabPane__FindCustomer-3" data-toggle="tab" role="tab" class="c-process__step element-animated" data-animation="fadeInUp--sm" animation-delay="0">
                                            <div class="single-step">
                                                <div class="single-step__wrp">
                                                    <div class="single-step__lvl">Bước 3</div>
                                                    <h4 class="single-step__tle">Trao đổi và lựa chọn nhà</h4>
                                                    <div class="single-step__dcr">
                                                        <p>Nhắn tin trao đổi với nhiều chủ nhà để lựa chọn căn nhà ưng ý và phù hợp nhất với nhu cầu bản thân.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="#TabPane__FindCustomer-4" data-toggle="tab" role="tab" class="c-process__step element-animated" data-animation="fadeInUp--sm" animation-delay="0">
                                            <div class="single-step">
                                                <div class="single-step__wrp">
                                                    <div class="single-step__lvl">Bước 4</div>
                                                    <h4 class="single-step__tle">Xác nhận cho thuê nhà và nhận thưởng</h4>
                                                    <div class="single-step__dcr">
                                                        <p>Sau khi thuê nhà của chủ trên hệ thống, ấn xác nhận thuê nhà và nhận tiền thưởng. Tiền thưởng có thể dùng để nạp điện thoại, order giặt là…</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END steps -->
    <!--=======================================================================-->
    <!-- download -->
    <section id="BlockTenantDownload" class="block-ld block-download block-ld--bg-gray01">
        <div class="container">
            <div class="block-download__wrap">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-5 mt-5 mt-lg-0 order-2 order-lg-1">
                        <div class="block-download__sc element-animated" data-animation="fadeInLeft--sm" animation-delay=".1s">
                            <img src="/quanlynhatro/assets/img/tenant-step3.svg" alt="App Service">
                        </div>
                    </div>
                    <div class="col-12 col-lg-7 order-1 order-lg-2">
                        <div class="block-download__cnt">
                            <div class="block-ld__header text-center">
                                <h2 class="block-ld__title text-uppercase element-animated" data-animation="a-ldTitle" animation-delay="0">
                                    Chúng tôi đã sẵn sàng phục vụ bạn
                                </h2>
                                <p class="block-ld__subtitle element-animated" data-animation="a-ldSubtitle" animation-delay=".2s">
                                    Hãy tham gia trải nghiệm ngay những tính năng tuyệt vời và tìm kiếm cho mình những khách thuê nhà
                                </p>
                            </div>
                            <div class="block-ld__main">
                                <div class="block-download__btn text-center">
                                    <div class="single-dwn-btn element-animated" data-animation="fadeInUp--sm" animation-delay=".1s"><a href="#" class="m-2"><img src="/quanlynhatro/assets/img/download-app-store.png" alt=""></a></div>
                                    <div class="single-dwn-btn element-animated" data-animation="fadeInUp--sm" animation-delay=".2s"><a href="#" class="m-2"><img src="/quanlynhatro/assets/img/download-google-play.png" alt=""></a></div>
                                </div>
                                <div class="block-download__qr element-animated animated fadeInUp--sm" data-animation="fadeInUp--sm" animation-delay=".25s" style="animation-delay: 0.25s;">
                                    <div class="qr-txt">Quét mã QR bên dưới để tải app</div>
                                    <div class="qr-img">
                                        <img src="/quanlynhatro/assets/img/qrcode.svg" alt="Alternate Text">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endsection