@extends('website.layouts.main')
@section('title')
    @lang('website.links.navigation.labels.download_app') | Sale Y Vale
@endsection
@section('content')
    <!-- ========= Inner Breabcrumb ======= -->
    <section id="breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-sm-6">
                    <div class="page-title">
                        <h3>@lang('website.links.navigation.labels.download_app')</h3>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="page-path">
                        <ul>
                            <li><a href="{{ route('website.home') }}">@lang('website.links.navigation.labels.home')</a></li>
                            <li>
                                <p>@lang('website.links.navigation.labels.download_app')</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========= Inner Page ======= -->
    <section id="inner-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-sm-6">
                    <div class="app-screens">
                        <img src="{{ asset('website-assets/img/screenshots.png') }}" class="img-fluid" alt="appscreens">
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6">
                    <div class="app-screen-text">
                        <h2>@lang('website.app_promo.title')</h2>
                        <p>@lang('website.app_promo.description')</p>
                        <ul>
                            <li><a href="https://play.google.com/store/apps/details?id=com.it.saleyvale"><img
                                        src="{{ asset('website-assets/img/playstore-2.png') }}" class="img-fluid"
                                        alt="Playstore"></a></li>
                            <li><a href="https://apps.apple.com/us/app/sale-y-vale/id6754445011"><img
                                        src="{{ asset('website-assets/img/playstore-1.png') }}" class="img-fluid"
                                        alt="Playstore"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-lg-12" data-aos="fade-up" data-aos-duration="2000">
                    <div class="section-title">
                        <span>@lang('website.app_download.sub_title')</span>
                        <h2>@lang('website.app_download.title')</h2>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-lg-4 col-sm-6 mb-2" data-aos="fade-up" data-aos-duration="2000">
                    <div class="steps-box">
                        <div class="steps-info">
                            <div class="list-steps-img">
                                <img src="{{ asset('website-assets/img/icon-1.png') }}" class="img-fluid" alt="steps">
                            </div>
                            <div class="lists-text">
                                <h3>@lang('website.app_download.grid1.title')</h3>
                                <p>@lang('website.app_download.grid1.description')</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 mb-2" data-aos="fade-up" data-aos-duration="2000">
                    <div class="steps-box">
                        <div class="steps-info">
                            <div class="list-steps-img">
                                <img src="{{ asset('website-assets/img/icon-2.png') }}" class="img-fluid" alt="steps">
                            </div>
                            <div class="lists-text">
                                <h3>@lang('website.app_download.grid2.title')</h3>
                                <p>@lang('website.app_download.grid2.description')</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 mb-2" data-aos="fade-up" data-aos-duration="2000">
                    <div class="steps-box">
                        <div class="steps-info">
                            <div class="list-steps-img">
                                <img src="{{ asset('website-assets/img/icon-3.png') }}" class="img-fluid" alt="steps">
                            </div>
                            <div class="lists-text">
                                <h3>@lang('website.app_download.grid3.title')</h3>
                                <p>@lang('website.app_download.grid3.description')</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection