@extends('web.layouts.main')
@section('content')

    <header id="header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="info">
                        <small>تطبيق لراحتك وخدمتك بأسرع وقت </small>
                        <h1>{{$intro->descriptions(currentLanguage()->id)['title']}} </h1>
                        <p>{!! $intro->descriptions(currentLanguage()->id)['description'] !!}</p>
                    </div>
                </div>
                <div class="col-lg-5 offset-lg-1">
                    <div class="img text-end">
                        <img src="{{asset($intro->image)}}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <img src="{{url('')}}/assets/web/images/head_back.png" alt="" class="head_img">
    </header>
    <!--End-Header-->
    <!--Contents-->
    <main>
        <!-- ---------- features ----------- -->
        <section class="features section_padding" id="features">
            <div class="container">
                <div class="content">
                    <div class="section_head text-center">
                        <img src="{{url('')}}/assets/web/images/logo_shape.png" alt="" class="icon">
                        <h6>المميزات</h6>
                        <h2>مميزات التطبيق</h2>
                    </div>
                    <div class="row">
                        @foreach($benefits as $row)
                        <div class="col-lg-4">
                            <div class="feat_card">
                                <div class="icon">
                                    <img src="{{asset($row->image)}}" alt="">
                                </div>
                                <div class="cont">
                                    <h4>{{$row->descriptions(currentLanguage()->id)['name']}}</h4>
                                    <p>{{$row->descriptions(currentLanguage()->id)['description']}}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- about ----------- -->
        <section class="about" id="about">
            <div class="content section_padding">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-lg-5">
                            <div class="img">
                                <img src="{{asset($first->image)}}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="info">
                                <div class="side_title mb-4">
                                    <h6> <span class="circle me-2"></span> خصائص التطبيق</h6>
                                    <h2>{{$first->descriptions(currentLanguage()->id)['title']}}</h2>
                                </div>
                                <div class="text">
                                    {!! $first->descriptions(currentLanguage()->id)['description'] !!}
                                </div>
                                <ul class="mt-4">
                                   @foreach($first->items as $row)
                                    <li>
                                        <img src="{{url('')}}/assets/web/images/logo_shape.png" alt="">
                                        <span>{{$row->descriptions(currentLanguage()->id)['name']}}</span>
                                    </li>
                                   @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content section_padding">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-lg-6 order-2 order-lg-0">
                            <div class="info">
                                <div class="side_title mb-4">
                                    <h6> <span class="circle me-2"></span> خصائص التطبيق</h6>
                                    <h2>{{$second->descriptions(currentLanguage()->id)['title']}}</h2>
                                </div>
                                <div class="text">
                                    {!! $second->descriptions(currentLanguage()->id)['description'] !!}
                                </div>
                                <ul class="mt-4">
                                    @foreach($second->items as $row)
                                    <li>
                                        <img src="{{url('')}}/assets/web/images/logo_shape.png" alt="">
                                        <span>{{$row->descriptions(currentLanguage()->id)['name']}}</span>
                                    </li>
                                   @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-5 order-0 order-lg-2">
                            <div class="img">
                                <img src="{{asset($second->image)}}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- services ----------- -->
        <section class="services section_padding" id="services">
            <div class="container">
                <div class="section_head text-center mb-5">
                    <img src="{{url('')}}/assets/web/images/logo_shape.png" alt="" class="icon">
                    <h6>الخدمات</h6>
                    <h2> خدمات التطبيق</h2>
                </div>
                <div class="content">
                    <div class="row">
        @foreach($services as $key=>$row)
                        <div class="col-lg-4 col-md-6">
                          <div class="item">
                                <h5>{{$row->descriptions(currentLanguage()->id)['name']}}</h5>
                                <p>{{$row->descriptions(currentLanguage()->id)['description']}}</p>
                                <div class="numb">{{$key+1}}</div>
                            </div>
                        </div>
          @endforeach
                      </div>
                </div>
            </div>
        </section>
        <!-- ---------- download ----------- -->
        <section class="download" id="download">
            <div class="container">
                <div class="content">
                    <div class="row align-items-center">
                        <div class="col-lg-5 order-2 order-lg-0">
                            <div class="img">
                                <img src="{{url('')}}/assets/web/images/mob_hand.png" alt="">
                            </div>
                        </div>
                        <div class="col-lg-6 order-0 order-lg-2">
                            <div class="info py-5 px-4">
                                <div class="side_title mb-4">
                                    <h6 class="text-white"> <span class="circle me-2"></span> تحميل التطبيق</h6>
                                    <h2 class="text-white fs-4">{{$app->descriptions(currentLanguage()->id)['title']}}</h2>
                                </div>
                                <div class="text text-white">
                                    {!! $app->descriptions(currentLanguage()->id)['description'] !!} .
                                </div>
                                <div class="btns mt-5">
                                    <a href="{{settings('android')}}" target="_blank" class="butn py-3 me-3">
                                        <span> <i class="fab fa-google-play me-2"></i> جوجل بلاي</span>
                                    </a>
                                    <a href="{{settings('apple')}}" target="_blank" class="butn butn_light py-3">
                                        <span> <i class="fab fa-app-store me-2"></i> أبل ستور</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ---------- screens ----------- -->


    </main>

@stop