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

    <main>

        <!-- Start Header -->
        <header class="header section pt-4">
            <div class="container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-lg-6">
                        <div class="txt_box">
                            <h6 class="fs-5 color-primary mb-3"> تطبيق مميز </h6>
                            <h1 class="title">
                                 تحكم ذكي في مشتريات طفلك المدرسية!
                            </h1>
                            <div class="p col-lg-11 my-4">
                                قم بشحن الرصيد، حوّله إلى نقاط، وحدد المنتجات والميزانية اليومية بكل سهولة. تابع مشتريات طفلك عبر الفواتير، وامنحهم تجربة آمنة في المقصف المدرسي
                            </div>
                            <div class="down_butns d-flex mt-5 ">
                                <a href="#" class="butn primary_butn">
                                    <span> جوجل بلاي <img src="{{url('')}}/assets/web/images/icons/google_play.png" class="icon filterWhite ms-1" alt="" /> </span>
                                </a>
                                <a href="#" class="butn secondary_border_butn ms-4">
                                    <span>   اب ستور <img src="{{url('')}}/assets/web/images/icons/apple_store.svg" class="icon filterSecondary ms-1" alt="" /> </span>
        
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{url('')}}/assets/web/images/header-1.png " class="secImg" alt="" />
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/pattern_circle.svg" class="pattern_circle" alt="" />
        </header>

        <!-- Start section -->
        <section class="features_sec section">
            <div class="container">
                <div class="sec_head text-center mb-5 pb-3">
                    <h6 class="fs-5 color-primary mb-4"> تطبيق مميز </h6>
                    <h1 class="title fw-bold">  مميزات التطبيق </h1>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="item">
                            <img src="{{url('')}}/assets/web/images/icons/features/1.svg" class="icon" alt="" />
                            <h5 class="title"> واجهة مستخدم بسيطة وسهلة  </h5>
                            <div class="p">
                                التطبيق يحتوي على واجهة مستخدم سلسة وبسيطة تتيح للمستخدمين التفاعل بسهولة وسرعة، مما يجعل عملية الشحن والمتابعة في غاية السهولة.
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="item">
                            <img src="{{url('')}}/assets/web/images/icons/features/2.svg" class="icon" alt="" />
                            <h5 class="title">     الأمان الكامل <br> للبيانات    </h5>
                            <div class="p">
                                تطبيقنا يضمن حماية تامة للبيانات الشخصية والمالية بفضل تقنيات الأمان المتطورة، مما يحافظ على خصوصية معلوماتك أثناء التعامل مع النظام. 
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="item">
                            <img src="{{url('')}}/assets/web/images/icons/features/3.svg" class="icon" alt="" />
                            <h5 class="title"> تحكم كامل في ميزانية الطفل       </h5>
                            <div class="p">
                                يمكن لولي الأمر تحديد النقاط اليومية المتاحة للطفل، مما يوفر تحكمًا دقيقًا في المشتريات ويساعد على إدارة الميزانية بشكل فعال.
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="item">
                            <img src="{{url('')}}/assets/web/images/icons/features/4.svg" class="icon" alt="" />
                            <h5 class="title">     تحكم كامل في ميزانية الطفل    </h5>
                            <div class="p">
                                التطبيق يحتوي على واجهة مستخدم سلسة وبسيطة تتيح للمستخدمين التفاعل بسهولة وسرعة، مما يجعل عملية الشحن والمتابعة في غاية السهولة.
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="item">
                            <img src="{{url('')}}/assets/web/images/icons/features/5.svg" class="icon" alt="" />
                            <h5 class="title">  تقارير مفصلة للمتابعة المستمرة </h5>
                            <div class="p">
                                تطبيقنا يضمن حماية تامة للبيانات الشخصية والمالية بفضل تقنيات الأمان المتطورة، مما يحافظ على خصوصية معلوماتك أثناء التعامل مع النظام. 
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="item">
                            <img src="{{url('')}}/assets/web/images/icons/features/6.svg" class="icon" alt="" />
                            <h5 class="title">دعم متكامل لجميع <br> المدارس  </h5>
                            <div class="p">
                                يمكن لولي الأمر تحديد النقاط اليومية المتاحة للطفل، مما يوفر تحكمًا دقيقًا في المشتريات ويساعد على إدارة الميزانية بشكل فعال.
                            </div>
                        </div>
                    </div>
                    
                </div>

            </div>
        </section>

        


        <!-- Start section -->
        <section class="user_features section">
            <div class="container">
                <div class="sec_head text-center mb-5 ">
                    <h6 class="fs-5 color-primary mb-4"> تطبيق مميز </h6>
                    <h1 class="title fw-bold">  مميزات المستخدم </h1>
                </div>
                <div class="row justify-content-between align-items-center">
                    <div class="col-lg-5">
                        <img src="{{url('')}}/assets/web/images/user_features.svg" class="secImg" alt="" />
                    </div>
                    <div class="col-lg-7">
                        <div class="row justify-content-between">
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/user_features/1.svg" class="icon" alt="" /> إدارة المنتجات بسهولة
                                    </h5>
                                    <div class="p">
                                        إمكانية إضافة وتعديل المنتجات التي يتم بيعها في المقصف بسهولة.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/user_features/2.svg" class="icon" alt="" />  تحديث الفواتير بشكل تلقائي    
                                    </h5>
                                    <div class="p">
                                        إصدار فواتير تلقائية لكل عملية شراء، مع تفاصيل دقيقة عن المنتجات المشتراة.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/user_features/3.svg" class="icon" alt="" />  تحديد الأسعار والتخفيضات   
                                    </h5>
                                    <div class="p">
                                        القدرة على تعديل أسعار المنتجات حسب الحاجة، مع إمكانية إضافة عروض أو تخفيضات خاصة.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/user_features/4.svg" class="icon" alt="" />  متابعة العمليات بشكل لحظي 
                                    </h5>
                                    <div class="p">
                                        متابعة جميع عمليات الشراء لحظيًا ومعرفة رصيد النقاط المتبقي للطلاب.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/user_features/5.svg" class="icon" alt="" />  إدارة المخزون بشكل دقيق
                                    </h5>
                                    <div class="p">
                                        متابعة المخزون المتاح من كل منتج والتأكد من توفره باستمرار.
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="download_sec section">
            <div class="container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-lg-6">
                        <div class="txt_box">
                            <h1 class="title text-white fw-bold">
                                 تحكم ذكي في مشتريات طفلك المدرسية!
                            </h1>
                            <div class="p text-white-50 col-lg-11">
                                قم بشحن الرصيد، حوّله إلى نقاط، وحدد المنتجات والميزانية اليومية بكل سهولة. تابع مشتريات طفلك عبر الفواتير، وامنحهم تجربة آمنة في المقصف المدرسي
                            </div>
                            <div class="down_butns d-flex mt-5 ">
                                <a href="#" class="butn primary_butn">
                                    <span> جوجل بلاي <img src="{{url('')}}/assets/web/images/icons/google_play.png" class="icon filterWhite ms-1" alt="" /> </span>
                                </a>
                                <a href="#" class="butn white_border_butn ms-4">
                                    <span>   اب ستور <img src="{{url('')}}/assets/web/images/icons/apple_store.svg" class="icon filterWhite ms-1" alt="" /> </span>
        
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <img src="{{url('')}}/assets/web/images/downloading-1.png" class="secImg" alt="" />
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/pattern_icon.svg" class="pattern_bl" alt="" />
            <img src="{{url('')}}/assets/web/images/pattern_icon.svg" class="pattern_tr" alt="" />
        </section>

        <!-- Start section -->
        <section class="user_features section">
            <div class="container">
                <div class="sec_head text-center mb-5 ">
                    <h6 class="fs-5 color-primary mb-4"> تطبيق مميز </h6>
                    <h1 class="title fw-bold">   مميزات المقصف </h1>
                </div>
                <div class="row justify-content-between align-items-center">
                  
                    <div class="col-lg-7">
                        <div class="row justify-content-between">
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/cafeteria/1.svg" class="icon" alt="" /> تقارير شاملة
                                    </h5>
                                    <div class="p">
                                        اطلع على تقارير تفصيلية لشراء الطفل مع تواريخ المشتريات.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/cafeteria/2.svg" class="icon" alt="" />  إدارة النقاط بسهولة 
                                    </h5>
                                    <div class="p">
                                        شحن الرصيد وتحويله إلى نقاط مع تحديد ميزانية يومية لطفلك.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/cafeteria/3.svg" class="icon" alt="" />  تحكم في المشتريات اليومية
                                    </h5>
                                    <div class="p">
                                        حدد عدد النقاط التي يمكن لطفلك استخدامها يوميًا.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/cafeteria/4.svg" class="icon" alt="" />  إشعارات لحظية
                                    </h5>
                                    <div class="p">
                                        استلم إشعارات فورية عند أي عملية شراء باستخدام النقاط.
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="item">
                                    <h5 class="title">
                                        <img src="{{url('')}}/assets/web/images/icons/cafeteria/5.svg" class="icon" alt="" /> حظر المنتجات غير المرغوب فيها
                                    </h5>
                                    <div class="p">
                                        تحديد المنتجات التي يمكن لطفلك شراؤها، مع إمكانية حظر أي منتج.
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="col-lg-5">
                        <img src="{{url('')}}/assets/web/images/cafeteria-1.png" class="secImg" alt="" />
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="feedback_sec section">
            <div class="container">
                <div class="sec_head text-center mb-5 ">
                    <h6 class="fs-5 color-primary mb-4"> اراء مميزه   </h6>
                    <h1 class="title fw-bold">   اراء العملاء   </h1>
                </div>

                <div class="feedback_swiper swiper-container">
                    <div class="swiper-wrapper pb-5">
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        تطبيق رائع! أصبح لدي تحكم كامل في ميزانية ابني المدرسية، وأستطيع تحديد النقاط اليومية بسهولة. أحب فكرة متابعة مشترياته عبر الفواتير التلقائية، وأشعر براحة كبيرة في معرفة أنه آمن تمامًا من حيث حماية البيانات. أنصح به جميع أولياء الأمور!
                                    </div>
                                    <h6 class="name"> أحمد العلي </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        التطبيق ممتاز جدًا! يسهل عليّ شحن الرصيد وتحويله إلى نقاط، مما يجعل عملية التحكم في المصاريف اليومية لابنتي أكثر تنظيمًا. كما أنني أستطيع متابعة مشترياتها بشكل لحظي عبر إشعارات فورية، وهذا أمر مهم جدًا بالنسبة لي. واجهة المستخدم سهلة للغاية.
                                    </div>
                                    <h6 class="name"> جمال علاء </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        تطبيق رائع جدًا! صار عندي تحكم كامل في مشتريات ابني، وأقدر أتابع كل شيء بسهولة. الفواتير والإشعارات جعلتني مطمئن دائمًا على حسابات ابني.
                                    </div>
                                    <h6 class="name"> أحمد العلي </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        أفضل ما في هذا التطبيق هو الأمان وحماية البيانات الشخصية. مع هذا التطبيق، يمكنني تحديد المنتجات التي يمكن لطفلي شراؤها في المقصف، وهذا يساعدني في التحكم بشكل دقيق في ما يشتريه. كما أن تقارير الشراء التي يوفرها التطبيق مفيدة جدًا لمتابعة الصرف.
                                    </div>
                                    <h6 class="name"> وليد المحمدي   </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        تطبيق رائع! أصبح لدي تحكم كامل في ميزانية ابني المدرسية، وأستطيع تحديد النقاط اليومية بسهولة. أحب فكرة متابعة مشترياته عبر الفواتير التلقائية، وأشعر براحة كبيرة في معرفة أنه آمن تمامًا من حيث حماية البيانات. أنصح به جميع أولياء الأمور!
                                    </div>
                                    <h6 class="name"> أحمد العلي </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        التطبيق ممتاز جدًا! يسهل عليّ شحن الرصيد وتحويله إلى نقاط، مما يجعل عملية التحكم في المصاريف اليومية لابنتي أكثر تنظيمًا. كما أنني أستطيع متابعة مشترياتها بشكل لحظي عبر إشعارات فورية، وهذا أمر مهم جدًا بالنسبة لي. واجهة المستخدم سهلة للغاية.
                                    </div>
                                    <h6 class="name"> جمال علاء </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        تطبيق رائع جدًا! صار عندي تحكم كامل في مشتريات ابني، وأقدر أتابع كل شيء بسهولة. الفواتير والإشعارات جعلتني مطمئن دائمًا على حسابات ابني.
                                    </div>
                                    <h6 class="name"> أحمد العلي </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="card-body">
                                    <div class="p">
                                        أفضل ما في هذا التطبيق هو الأمان وحماية البيانات الشخصية. مع هذا التطبيق، يمكنني تحديد المنتجات التي يمكن لطفلي شراؤها في المقصف، وهذا يساعدني في التحكم بشكل دقيق في ما يشتريه. كما أن تقارير الشراء التي يوفرها التطبيق مفيدة جدًا لمتابعة الصرف.
                                    </div>
                                    <h6 class="name"> وليد المحمدي   </h6>
                                    <div class="stars">
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star active"></i>
                                        <i class="fa-solid fa-star"></i>
                                    </div>
                                </div>
                                <div class="avatar_box">
                                    <img src="{{url('')}}/assets/web/images/avatar-1.png" class="avatar" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="swiper-pagination"></div> -->
                </div>

            </div>
            <img src="{{url('')}}/assets/web/images/feedback_pattern.svg" class="pattern" alt="">
        </section>

        <!-- Start section -->
        <section class="contact_sec section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 pe-lg-5">
                        <div class="sec_head mb-5 ">
                            <h6 class="fs-5 color-primary mb-4"> للتواصل     </h6>
                            <h1 class="title fw-bold">   تواصل معنا     </h1>
                            <div class="p fs-5 mt-4">
                                نحن هنا لخدمتك! إذا كان لديك أي استفسارات أو تعليقات حول التطبيق، أو إذا واجهت أي مشكلة أثناء استخدامه، لا تتردد في التواصل معنا. 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-12">
                                <div class="contact_item">
                                    <h6 class="title "> العنوان </h6>
                                    <div class="p">
                                        السعوديه
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-6">
                                <div class="contact_item">
                                    <h6 class="title "> البريد الالكتروني </h6>
                                    <div class="p">
                                        Abdulazizalnahil@gmail.com
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-4 col-6">
                                <div class="contact_item">
                                    <h6 class="title "> رقم الجوال </h6>
                                    <div class="p">
                                        0541242726
                                    </div>
        
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-6">
                        <div class="form_box">
                            <form>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="  الاسم*"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="  رقم الجوال*  "/>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder=" البريد الالكتروني  "/>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder=" عنوان الرسالة    "/>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <textarea  class="form-control" placeholder="الرسالة..." rows="5"></textarea>
                                        </div>
                                    </div>
                          
                                </div>
        
                                <button class="butn px-5 primary_butn rounded-pill mx-auto mt-4 ">
                                    <span class="px-2"> ارسال  </span>
                                </button>
        
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/pattern_circle.svg" class="pattern_circle" alt="" />
        </section>

    </main>

@endsection

@section('inject_js')

@endsection
