@extends('web.layouts.container')

@section('content')
    <!--Start about-sec -->
    <section class="about-sec section" data-scroll-index="1">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="text-box center-vr">
                        <h4 class="subtitle color-primary mb-3 wow fadeInUp">{{__('abouts.head')}}</h4>
                        <h1 class="title mb-3 wow fadeInDown">{{__('main.second_section_title')}}</h1>
                        <p class="det wow fadeInUp">{{$landing->sec_2_description}}</p>
                    </div>
                </div>
                <div class="col-lg-5">
                    <img src="{{asset('assets/web/images/about-1.png')}}" alt="" class="main-img wow zoomIn"/>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern"/>
    </section>
    <!--Start features-sec -->
    <section class="features-sec section" data-scroll-index="2">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="feature_card color1">
                        <div class="content wow zoomIn">
                            <img src="{{asset('assets/web/images/icons/feature_1.svg')}}" alt="" class="icon"/>
                            <h5 class="title">{{__('main.sec_3_box_1_title')}}</h5>
                            <p class="det">{{$landing->sec_3_box_1_description}}</p>
                        </div>
                    </div>
                    <div class="feature_card color3">
                        <div class="content wow zoomIn">
                            <img src="{{asset('assets/web/images/icons/feature_3.svg')}}" alt="" class="icon"/>
                            <h5 class="title">{{__('main.sec_3_box_3_title')}}</h5>
                            <p class="det">{{$landing->sec_3_box_3_description}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mt-5 pt-4">
                    <div class="feature_card color2">
                        <div class="content wow zoomIn">
                            <img src="{{asset('assets/web/images/icons/feature_2.svg')}}" alt="" class="icon"/>
                            <h5 class="title">{{__('main.sec_3_box_2_title')}}</h5>
                            <p class="det">{{$landing->sec_3_box_2_description}}</p>
                        </div>
                    </div>
                    <div class="feature_card color4">
                        <div class="content wow zoomIn">
                            <img src="{{asset('assets/web/images/icons/feature_4.svg')}}" alt="" class="icon"/>
                            <h5 class="title">{{__('main.sec_3_box_4_title')}}</h5>
                            <p class="det">{{$landing->sec_3_box_4_description}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="text-box center-vr">
                        <h4 class="subtitle color-primary mb-3 wow fadeInUp">{{__('main.features')}}</h4>
                        <h1 class="title mb-3 wow fadeInDown"><b>{{$landing->sec_3_title}}</b></h1>
                        <p class="det wow fadeInUp">{{$landing->sec_3_description}}</p>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/pattern-2.png')}}" alt="" class="pattern"/>
    </section>
    <!--Start services-sec -->
    <section class="services-sec section" data-scroll-index="3">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 pr-0 pl-0">
                    <div class="service-inner wow fadeIn">
                        <div class="swiper-container service-swiper">
                            <div class="swiper-wrapper pb-4">
                                <div class="swiper-slide">
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/service_phone_1.png')}}" alt="" class="phone-img"/>
{{--                                        <div class="content">--}}
{{--                                            <h5 class="title">عرض تفاصيل رحلتك</h5>--}}
{{--                                            <p class="det">--}}
{{--                                                رهناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء--}}
{{--                                            </p>--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/service_phone_2.png')}}" alt="" class="phone-img"/>
{{--                                        <div class="content">--}}
{{--                                            <h5 class="title">عرض تفاصيل رحلتك</h5>--}}
{{--                                            <p class="det">--}}
{{--                                                رهناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء--}}
{{--                                            </p>--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="item">
                                        <img src="{{asset('assets/web/images/service_phone_3.png')}}" alt="" class="phone-img"/>
{{--                                        <div class="content">--}}
{{--                                            <h5 class="title">عرض تفاصيل رحلتك</h5>--}}
{{--                                            <p class="det">--}}
{{--                                                رهناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء--}}
{{--                                            </p>--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="text-box mt-5">
                        <h4 class="subtitle color-primary mb-3 wow fadeInUp">{{__('main.our_service')}}</h4>
                        <h1 class="title mb-3 wow fadeInDown"><b>{{$landing->sec_4_title}}</b></h1>
                        <p class="det wow fadeInUp">{{$landing->sec_4_description}}</p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="service_card">
                                    <div class="icon-container wow zoomIn">
                                        <img src="{{asset('assets/web/images/icons/service_1.svg')}}" alt="" class="icon"/>
                                    </div>
                                    <div class="content wow fadeInUp">
                                        <h6 class="title"><b>{{__('main.sec_4_box_1_title')}}</b></h6>
                                        <p class="det">{{$landing->sec_4_box_1_description}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="service_card">
                                    <div class="icon-container wow zoomIn">
                                        <img src="{{asset('assets/web/images/icons/service_2.svg')}}" alt="" class="icon"/>
                                    </div>
                                    <div class="content wow fadeInUp">
                                        <h6 class="title"><b>{{__('main.sec_4_box_2_title')}}</b></h6>
                                        <p class="det">{{$landing->sec_4_box_2_description}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="service_card">
                                    <div class="icon-container wow zoomIn">
                                        <img src="{{asset('assets/web/images/icons/service_3.svg')}}" alt="" class="icon"/>
                                    </div>
                                    <div class="content wow fadeInUp">
                                        <h6 class="title"><b>{{__('main.sec_4_box_3_title')}}</b></h6>
                                        <p class="det">{{$landing->sec_4_box_3_description}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="service_card">
                                    <div class="icon-container wow zoomIn">
                                        <img src="{{asset('assets/web/images/icons/service_4.svg')}}" alt="" class="icon"/>
                                    </div>
                                    <div class="content wow fadeInUp">
                                        <h6 class="title"><b>{{__('main.sec_4_box_4_title')}}</b></h6>
                                        <p class="det">{{$landing->sec_4_box_4_description}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Start app-sec -->
    <section class="app-sec section" data-scroll-index="4">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="text-box">
                        <h2 class="title mb-4 wow fadeInUp"><b>{{__('main.application'). ' ' .__('main.to_facilitate'). ' ' .__('main.muslim_life_1')}} </b></h2>
                        <p class="det wow fadeInDown">{{$landing->sec_5_description}}</p>
                        <div class="app-links mt-4">
                            @isset($settings['google_play_link'])
                                <a target="_blank" href="{{$settings['google_play_link']}}"><img src="{{asset('assets/web/images/down_play.png')}}" alt="" class="icon wow flipInY"/></a>
                            @endisset
                            @isset($settings['apple_sore_link'])
                                <a target="_blank" href="{{$settings['apple_sore_link']}}"><img src="{{asset('assets/web/images/down_apple.png')}}" alt="" class="icon wow flipInY"/></a>
                            @endisset
                        </div>
                    </div>
                </div>

            </div>
            <img src="{{asset('assets/web/images/service_phone_1.png')}}" alt="" class="phone-img wow flipInY"/>
        </div>
        <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern wow zoomIn"/>
        <img src="{{asset('assets/web/images/pattern-3.png')}}" alt="" class="pattern2 wow zoomIn"/>
    </section>
@endsection

@section('inner_js')

@endsection