@extends('layouts.master')

@section('content')
        <main>
            <div class="container">
                <div class="flex flex-wrap items-center">
                    <div class="w-full lg:w-2/5">
                        <div class="text-center text-white lg:text-left">
                            <h1 class="text-2xl font-semibold leading-10 lg:text-4xl">Explore the Travel Packages All Around the World</h1>

                            <div class="flex justify-center mt-16 lg:justify-end lg:m-0 lg:hidden">
                                <div class="w-full">
                                    <img src="{{ asset('/images/screens.png') }}" class="w-full h-full " alt="">
                                </div>
                            </div>

                            <p class="my-10 ">We’re collecting & giving you the access to the best possible travel experiences around the world!</p>
                        </div>
                        <div class="flex items-center justify-center lg:justify-start">
                            <a class="mx-1 my-2 store-icons" href="https://play.google.com/store/apps/details?id=com.rgbrochurebox" data-os="Android" target="_blank">
                                <img src="{{ asset('/images/google_play.png') }}" class="mr-2" alt="">
                            </a>
                            <a class="mx-1 my-2 store-icons" href="https://apps.apple.com/lk/app/rgbrochurebox/id1536906860" data-os="iOS" target="_blank">
                                <img src="{{ asset('/images/apple_store.png') }}" class="mr-2" alt="">
                            </a>
                            <a class="mx-1 my-2 store-icons" href="https://appgallery.huawei.com/#/app/C103153935" data-os="Android" target="_blank">
                                <img src="{{ asset('/images/huawei_app_gallery.png') }}" class="mr-2" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="w-full lg:w-3/5">
                        <div class="justify-center hidden mt-16 lg:justify-end lg:m-0 lg:flex">
                            <img src="{{ asset('/images/screens.png') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </main>
@endsection