@extends('front.layouts.layout')
@section('meta_title'){{ $index_meta->{'title_' . App::getLocale()} }}@stop

@section('meta_description'){{ $index_meta->{'description_' . App::getLocale()} }}@stop

@section('meta_keywords')
    {{ $index_meta->{'kewords_' . App::getLocale()} }}
@stop

@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="site">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta name="twitter:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}" />
    <meta property="og:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}" />
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:type" content="og:site">
    <meta property="og:url" content="{{ route('home') }}">
    <meta property="og:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
@endsection
@section('content')
    <div class="container-fluid pages-text-container">
        <div class="row">
            <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 m-auto">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 text-container">
                        <h1 class="title">{{ translate('The Perfect Plan For You') }}</h1>
                        <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas cumque
                            aliquam pariatur ut sed sequi laboriosam ea rem, saepe et odit totam sunt culpa commodi dolore
                            doloribus amet nostrum nisi?</p>
                        <button class="btn btn-secondary">{{ translate('Contact Us') }}</button>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 img-container">
                        <img src="{{ url('front_layout/assets/imgs/store-header-img.png') }}" alt="">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- SELL PRODUCTS CONTAINER START -->
    <section class="container-fluid store-sell-products-container">
        <div class="row">
            <div class="col-lg-10 col-md-10 col-sm-12 m-auto">
                <div class="row">
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12 text-container">
                        <h2 class="title">{{ translate('Sell Anywhere With Solutions') }}</h2>
                        <p class="sub-text">{{ translate('Made Specially For You') }}</p>
                        <div class="row cards-row">
                            @forelse ($solutions as $key => $solution)
                                <div class="col-lg-6 col-md-6 col-sm-6 feature-card-item">
                                    <div class="item-wrapper {{ $key % 2 == 0 ? 'primary-bg' : 'dark-bg' }} ">
                                        <div class="number">
                                            <div
                                                class="number-wrapper {{ $key % 2 == 0 ? 'number-primary' : 'number-dark' }} ">
                                                @if ($key + 1 < 9)
                                                    0{{ $key + 1 }}
                                                @else
                                                    {{ $key + 1 }}
                                                @endif
                                            </div>
                                        </div>
                                        <div class="text">
                                            <p>
                                                {{ $solution->{'description_' . App::getLocale()} }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @empty

                            @endforelse
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 img-container">
                        <div class="img-wrapper">
                            @if (App::getLocale() == 'ar')
                                <img src="{{ url('front_layout/assets/imgs/store-sell-vector-ar.png') }}" alt="">
                            @else
                                <img src="{{ url('front_layout/assets/imgs/store-sell-vector-en.png') }}" alt="">
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- SELL PRODUCTS CONTAINER END -->
    <!-- TEMPLATES DESIGNS CONTAINER START -->
    <section class="container-fluid templates-container">
        <div class="row">
            <div class="col-lg-10 col-lg-10 col-sm-12 m-auto">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12 text-container">
                        <h2 class="title">{{ $designs->{'title_' . App::getLocale()} }}</h2>
                        <p class="desc">{{ $designs->{'description_' . App::getLocale()} }} </p>
                        <a href="{{ $designs->{'link_' . App::getLocale()} }}"
                            class="btn btn-primary text-white">{{ translate('Explore Now') }}</a>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-12 imgs-container">
                        <div class="imgs-wrapper">
                            <img src="{{ url($designs->{'them_1_' . App::getLocale()}) }}"
                                alt="{{ $designs->{'them_1_alt_' . App::getLocale()} }}">
                            <img src="{{ url($designs->{'them_2_' . App::getLocale()}) }}"
                                alt="{{ $designs->{'them_2_alt_' . App::getLocale()} }}">
                            <img src="{{ url($designs->{'them_3_' . App::getLocale()}) }}"
                                alt="{{ $designs->{'them_3_alt_' . App::getLocale()} }}">
                            <img src="{{ url($designs->{'them_4_' . App::getLocale()}) }}"
                                alt="{{ $designs->{'them_4_alt_' . App::getLocale()} }}">
                            <img src="{{ url($designs->{'them_5_' . App::getLocale()}) }}"
                                alt="{{ $designs->{'them_5_alt_' . App::getLocale()} }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- TEMPLATES DESIGNS CONTAINER END -->
    <!-- STORE FEATURES SLIDER CONTAINER START -->
    <section class="container-fluid store-features-slider-container">
        <div class="row">
            <div class="col-lg-10 col-md-10 col-sm-12 m-auto">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 text-container">
                        <h2 class="title">{{ translate('Create Your Project Now') }}</h2>
                        <div class="row features-row">
                            @forelse ($highlights as $key => $highlight)
                                <div class="col-lg-6 col-md-6 col-sm-6 card-item">
                                    <div class="icon-container">
                                        <img style="width: 30px"
                                            src="{{ url($highlight->{'image_' . App::getLocale()}) }}" alt="">
                                    </div>
                                    <div class="text-part">
                                        <p class="head">{{ $highlight->{'title_' . App::getLocale()} }}</p>
                                        <p class="text">
                                            {{ $highlight->{'description_' . App::getLocale()} }}
                                        </p>
                                    </div>
                                </div>
                            @empty

                            @endforelse
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 slider-container">
                        <div id="carouselFeaturesSlides" data-bs-touch="true" data-bs-interval="2000"
                            class="carousel carousel-fade slide" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                @forelse ($photo_slider_highloght as $key => $item)
                                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }} ">
                                        <img src="{{ url($item->{'image_' . App::getLocale()}) }}" class="d-block w-100"
                                            alt="...">
                                    </div>
                                @empty

                                @endforelse

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('modal')

@endsection
@section('script')

@endsection