@section('meta')
<title>{{__('message.web app')}}</title>
    <meta property="og:title" content="{{__('message.web app')}}" />
    <meta property="og:description" content="{{__('message.mobile desc')}}" />
    <meta name="twitter:title" content="{{__('message.web app')}}" />
    <meta name="twitter:description" content="{{__('message.mobile desc')}}" />
@endsection

@push('header')
    <x-header />
@endpush

<div>
    <section class="photo-video py-50">
        <div class="container">
            <div class="row">
                <div class="col-md-6 align-self-center">
                    <h1 class="font-title text-warning text-uppercase fw-bolder" data-aos="zoom-in">{{__('message.web app')}}</h1>
                    <p data-aos="zoom-in">{{__('message.mobile desc')}}</p>
                </div>
                <div class="col-md-6">
                    <div class="d-flex justify-content-center js-tilt">
                        <img src="{{ asset('img/web-app/web-app.png') }}" alt="animation" class="w-75 h-100" data-aos="zoom-in">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pv-type py-50">
        <div class="container">
            <div class="row">
                <div class="card col-md-4 border-0 bg-switch my-1">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title">{{__('message.mobile app')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/web-app/mobile.jpg') }}" width="100%" alt="mobile">
                    </a> 
                </div>
                <div class="card col-md-4 border-0 bg-switch my-1">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title">{{__('message.website')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/web-app/website.jpg') }}" width="100%" alt="website">
                    </a>                        
                </div>
                <div class="card col-md-4 border-0 bg-switch my-1">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title">{{__('message.web application')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/web-app/web-application.jpg') }}" width="100%" alt="web-application">
                    </a>                         
                </div>

                <div class="card col-md-4 border-0 bg-switch my-1">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title">{{__('message.pos system')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/web-app/pos-sytem.jpg') }}" width="100%" alt="pos-sytem">
                    </a> 
                </div>
                <div class="card col-md-4 border-0 bg-switch my-1">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title">{{__('message.blog website')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/web-app/blog-web.jpg') }}" width="100%" alt="blog-web">
                    </a>                        
                </div>
                <div class="card col-md-4 border-0 bg-switch my-1">
                    <a href="#" class="sale text-decoration-none">
                        <h6 class="text-center text-uppercase font-title">{{__('message.news website')}}</h6>
                        <img class="img-thumbnail" src="{{ asset('img/web-app/news-web.jpg') }}" width="100%" alt="news-web">
                    </a>                         
                </div>
            </div>
        </div>
    </section>
</div>