@include('/frontend/' . $dir . '/header')
<!-- end navbar -->
<!-- hero page ----start -->
@if ($settings['header']['hide'])
    <div class="container-fluid" style="background-color:{{ $settings['header']['colors']['background_color'] }};">
        <div class="container">
            <div class="row align-items-center marginTop">
                <div class="col-md-6 " style="color:{{ $settings['header']['colors']['sub_heading_color'] }};">
                        <!--    <h1 class="mb-0 head_hero" style="color:{{ $settings['header']['colors']['heading_color'] }};">{{ $content_settings['header']['title'][$locale] }}</h1> -->
                            <h2 class="h2 mb-4"> {!! $content_settings['header']['title'][$locale] !!}</h2>
                            <p class="h4">{!! $content_settings['header']['description'][$locale] !!}</p>
                </div>
                <div class="col-md-6 d-flex justify-content-center">
                        <img src="{{ asset($content_settings['header']['photo']) }}" class="img-fluid top-header-image"  alt="product image">
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="d-flix container mt-5 nb-0">
        <a href="#about" class="btn Scroll"
            style="background:{{ $settings['header']['colors']['scrol_down_button_color'] }} !important;"> Scroll Down
            </a>
    </div> -->
@endif
<div class="spacer"></div>
<!-- --------------------------------------------------------------------------------custom session start -->

 <section class="container-fluid bg-light py-5">
  <div class="container">
    <div class="row align-items-center w-100 m-0 p-0">
      
      <!-- Text Section -->
      <div class="col-sm-6 col-12 mb-4 mb-sm-0">
        <div class="pt-3 lineSpacing features-list rtl-overflow-0"
             style="color:black; border-radius:20px; font-size:1.1rem; line-height:1.8;">
          من خلال تكامل تطبيق <strong>صرف</strong> مع نظام <strong>تقريري</strong>، أصبح بإمكان العميل عند وصوله إلى الكاشير
          استلام فاتورته بشكل رقمي عبر تطبيق صرف، بدلاً من الفاتورة الورقية التقليدية.
          يتم إرسال الفاتورة بشكل مباشر وآمن باستخدام واجهة <strong>صرف SDK</strong> المتقدمة،
          مما يعزز من التحول الرقمي في قطاع الأعمال، ويُسهم في تحسين تجربة العميل ورفع جودة الحياة
          وفقاً لرؤية المملكة 2030.
        </div>
      </div>

      <!-- Image Section -->
      <div class="col-md-6 d-flex justify-content-center">
        <div style="width:100%; text-align:center;">
          <img src="https://sarf.sa/project/taqreri-banner2.png"
               class="img-fluid feature-image rounded shadow-sm"
               alt="فاتورة تقريري مع تطبيق صرف"
               style="width:100%; max-height:500px; object-fit:contain;">
        </div>
      </div>
    </div>
  </div>
</section>

<div class="spacer"></div>

<style>
  .feature-image {
    display: block;
    margin: auto;
  }

  @media (max-width: 768px) {
    .feature-image {
      max-height: 350px;
      object-fit: contain;
    }
  }
</style>

 <!-- ----------------------------------custom session end -->
<!-- I want to add here success partners -->
<section class="container-fluid bg-light py-5">
  <div class="container">
    <div class="row align-items-center w-100 m-0 p-0">
      <!-- Text -->
      <div class="col-sm-6 col-12 mb-4 mb-sm-0">
        <div class="pt-3 lineSpacing features-list rtl-overflow-0"
             style="color:black; border-radius:20px; font-size:1.1rem;">
          تطبيق صرف هو تطبيق وطني يهدف إلى حفظ الفواتير بطريقة رقمية،
          ويعزز من التحول الرقمي في المملكة العربية السعودية.
        </div>
      </div>

      <!-- Main Image -->
      <div class="col-md-6 d-flex justify-content-center">
        <img src="https://sarf.sa/project/frontend/download/bAAkUwl233Ecok3kjLdE.jpeg"
             class="img-fluid feature-image rounded shadow-sm"
             alt="تطبيق صرف">
      </div>
    </div>

    <!-- <div class="my-5"></div> -->

    <div class="spacer"></div>
    <!-- Success Partners -->
    <div class="text-center">
      <h4 class="fw-bold mb-4">شركاء النجاح</h4>
      <div class="row justify-content-center align-items-center">
        
        <!-- Qoyod -->
        <div class="col-6 col-md-3 mb-4 partner-logo">
          <a href="https://www.qoyod.com/" target="_blank" rel="noopener">
            <img src="https://sarf.sa/project/qoyod.png"
                 class="img-fluid mb-2" alt="Qoyod Logo"
                 style="max-height:80px; object-fit:contain;">
          </a>
          <p class="fw-semibold mt-2">قُيود</p>
        </div>

        <!-- Odoo -->
        <div class="col-6 col-md-3 mb-4 partner-logo">
          <a href="https://www.odoo.com/" target="_blank" rel="noopener">
            <img height="80" width="80" src="https://odoocdn.com/web/image/website/1/favicon?unique=fb692c1"
                 class="img-fluid mb-2" alt="Odoo Logo"
                 style="max-height:80px; object-fit:contain;">
          </a>
          <p class="fw-semibold mt-2">Odoo</p>
        </div>

        <!-- Taqreri -->
        <div class="col-6 col-md-3 mb-4 partner-logo">
          <a href="https://taqreri.com/" target="_blank" rel="noopener">
            <img src="https://sarf.sa/project/taqreri.png"
                 class="img-fluid mb-2" alt="Taqreri Logo"
                 style="max-height:80px; object-fit:contain;">
          </a>
          <p class="fw-semibold mt-2">Taqreri</p>
        </div>

        <!-- Said.sa -->
        <div class="col-6 col-md-3 mb-4 partner-logo">
          <a href="https://said.sa/" target="_blank" rel="noopener">
            <img src="https://sarf.sa/project/said.png"
                 class="img-fluid mb-2" alt="Said.sa Logo"
                 style="max-height:80px; object-fit:contain;">
          </a>
          <p class="fw-semibold mt-2">Said.sa</p>
        </div>

        <!-- ONX-ERP -->
        <div class="col-6 col-md-3 mb-4 partner-logo">
          <a href="https://onxerp.com/" target="_blank" rel="noopener">
            <img src="https://sarf.sa/project/onx-erp.jpeg"
                 class="img-fluid mb-2" alt="ONX-ERP Logo"
                 style="max-height:80px; object-fit:contain;">
          </a>
          <p class="fw-semibold mt-2">ONX-ERP</p>
        </div>

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


<div class="spacer"></div>

<!-- Animation Script -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const partners = document.querySelectorAll(".partner-logo");
    const revealOffset = 100;

    function revealOnScroll() {
      const windowBottom = window.innerHeight + window.scrollY;
      partners.forEach(el => {
        const elTop = el.getBoundingClientRect().top + window.scrollY;
        if (windowBottom > elTop + revealOffset) {
          el.classList.add("visible");
        }
      });
    }

    window.addEventListener("scroll", revealOnScroll);
    revealOnScroll();
  });
</script>

<style>
  .partner-logo {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .partner-logo.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .feature-image {
    max-height: 350px;
    object-fit: cover;
  }

  h4 {
    color: #2b2b2b;
  }
</style>

<!-- --------------------------------------------------------------------------------custom session start -->

    <section class="container-fluid  bg-light">
                    <div class="container" >
                        <div class="row align-items-center w-100  m-0 p-0">
                                <div class="col-sm-6 col-12 ">
                                    <div class="pt-3 lineSpacing  features-list rtl-overflow-0"
                                        style="color:black;border-radius:20px">
                                        عند وصول العميل إلى الكاشير يجد خيار الاستلام الرقمي للفاتورة على تطبيق صرف بدلا من الاستلام الورقي ،. وهذا يعزز من التحول الرقمي للبيانات ، ورفع جودة الحياة
                                    </div>
                                </div>
                                <div class="col-md-6 d-flex justify-content-center">
                                        <img src="https://sarf.sa/project/frontend/download/bAAkUwl233Ecok3kjLdE.jpeg" class="img-fluid feature-image" alt="">
                                </div>
                            </div>
                    </div>
                </section>
            <div class="spacer"></div>
 <!-- ----------------------------------custom session end -->

@if ($settings['about']['hide'])
    <div id="about"></div>
    <!-- hero page ----End -->
    <!-- --------------------------------------------------------------------------------about -->
   <div class="container-fluid py-md-4 py-3">
        <div class="container my-3 py-3 about_page text-center rounded-3" style='background-color:#4b889f'>
            <div class="container ">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <p style="color:{{ $settings['about']['colors']['sub_heading_color'] }};">
                                {!! $content_settings['about']['heading'][$locale] !!}
                                {!! $content_settings['about']['sub_heading'][$locale] !!}
                        </p>
                    </div>
                </div>
            </div>
        </div>
   </div>
@endif
<!-- -------------------------------------------------------------------end-------------about -->
<div class="mt-2 bg-light" id="feature"></div>
@if ($settings['features']['hide'])
    @foreach ($settings['features'] as $index => $feature)
        @if (is_array($feature))
            @if ($feature['direction'] == 'ltr')
                <section class="container-fluid bg-light">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-12 col-md-6">
                                <img src="{{ asset($content_settings['features'][$index]['photo']) }}" class=" ms-0 ps-0 mobil_veiw img-fluid feature-image"
                                    alt="">
                            </div>
                            <div class="col-sm-6">
                                <p class="fw-bolder h1 heading "
                                    style="color:{{ $feature['colors']['title_color'] }};">
                                    {!! $content_settings['features'][$index]['title'][$locale] !!}
                                </p>
                                <div class="pt-3 lineSpacing features-list" style="color:{{ $feature['colors']['text_color'] }};">
                                    {!! $content_settings['features'][$index]['content'][$locale] !!}</div>
                            </div>
                        </div>
                    </div>
                </section>
            @else
                <div  id="feature" class="bg-light"></div>
                <section class="container-fluid  bg-light">
                    <div class="container">
                        <div class="row align-items-center w-100  m-0 p-0">
                                <div class="col-sm-6 col-12 ">
                                    <p class="fw-bolder h1 heading mt-md-5 mt-1 "
                                        style="color:{{ $feature['colors']['title_color'] }};">
                                        {!! $content_settings['features'][$index]['title'][$locale] !!}
                                    </p>
                                    <div class="pt-3 lineSpacing  features-list rtl-overflow-0"
                                        style="color:{{ $feature['colors']['text_color'] }};">
                                        {!! $content_settings['features'][$index]['content'][$locale] !!}
                                    </div>
                                </div>
                                <div class="col-12 col-md-5 d-flex justify-content-center">
                                    <img src="{{ asset($content_settings['features'][$index]['photo']) }}" class="img-fluid feature-image"
                                        alt="img">
                                </div>
                            </div>
                    </div>
                </section>
            @endif
        @endif
    @endforeach
    <div class="spacer"></div>
@endif
@if ($settings['slider']['hide'])
    <section class="mTop">
        <div class="container col-pink position-relative"
            style="background-color:{{ $settings['slider']['colors']['background_color'] }};">
            <div class="row">
                <div class="col-sm-7 p-3">
                    <p class="text-white" style="color:{{ $settings['slider']['colors']['heading_color'] }};">
                        {!! $content_settings['slider']['heading'][$locale] !!}
                    </p>
                    <h1 class="fw-bold font_cost" style="color:{{ $settings['slider']['colors']['text_color'] }};">
                        {!! $content_settings['slider']['sub_heading'][$locale] !!}</h1>
                </div>
            </div>
            <div class="row  mb-5 rtl_M">
                    <!-- slider -->
                    <ul id="light-slider">
                        @foreach ($content_settings['slider']['photos'] as $photo)
                            <li>
                                <img src="{{ $photo }}" class="slider-img w-100 px-3" alt="">
                            </li>
                        @endforeach
                    </ul>
                    <!-- end slider  -->
            </div>
        </div>
    </section>
    <div class="Extra_space moreInMobile"></div>
@endif
<!-- --------------------------------------------------------------------------------custom session start -->
<div class="spacer"></div><div class="spacer"></div><div class="spacer"></div>
    <section class="container-fluid  bg-light">
                    <div class="container" >
                        <div class="row align-items-center w-100  m-0 p-0">
                                <div class="col-md-6 d-flex justify-content-center">
                                        <img src="https://sarf.sa/project/frontend/download/bAAkUwl233Ecok3kjLdE.jpeg" class="img-fluid feature-image" alt="">
                                </div>
                                <div class="col-sm-6 col-12 ">
                                    <div class="pt-3 lineSpacing  features-list rtl-overflow-0"
                                        style="color:black;border-radius:20px">
                                        القيمة الأساسية في التطبيق هو استلام الفواتير بطريقة مصنفة مأرشفة حسب تصنيف النشاط واسم المنشاة ، بالتالي يسهل الرجول للفواتير وحفظها
                                    </div>
                                </div>
                                
                            </div>
                    </div>
                </section>
                <div class="spacer"></div>
 <!-- ----------------------------------custom session end -->

@if ($settings['download']['hide'])
    <!-- <div class="pt-md-4 d-none d-md-block">
        <br><br><br><br><br><br>
    </div> -->
    <section class="mTop" id="download">
        <div class="container" style="background-color:{{ $settings['download']['colors']['background_color'] }};border-radius:20px">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="text-center p-5">
                        <h1 class="font_cost" style="color:{{ $settings['download']['colors']['heading_color'] }};">
                            {!! $content_settings['download']['title'][$locale] !!}</h1>
                        <p class="mt-5 text-muted" style="color:{{ $settings['download']['colors']['text_color'] }};">
                            {!! $content_settings['download']['description'][$locale] !!}</p>
                        <div class="row">
                            <p class="mt-3 mb-4 download-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg"  width="60" height="60"
                                    viewBox="0 0 85.323 107.212">
                                    <g id="Group_12409" data-name="Group 12409"
                                        transform="translate(-174.841 -547.066)">
                                        <path id="Path_15420" data-name="Path 15420"
                                            d="M3761.145,13419.5l37.358,37.36,37.358-37.36"
                                            transform="translate(-3581 -12813.188)" fill="none" stroke="#a8ccd6"
                                            stroke-width="15" />
                                        <path id="Path_15421" data-name="Path 15421" d="M184.832,547.067v94.377"
                                            transform="translate(32.671 0)" fill="none" stroke="#a8ccd6"
                                            stroke-width="15" />
                                    </g>
                                </svg>
                            </p>
                            <div class="d-flex flex-wrap justify-content-center">
                            @if ($settings['download']['appstore_link'])
                                <!-- <a class="me-2" href="{{ $content_settings['download']['appstore_link'] }}" target="_blank">
                                    <img src="{{ asset('project/frontend/default/app_store.png') }}"
                                        class="img-fluid my-2" alt="">
                                </a> -->
                                <a class="me-2" href="https://apps.apple.com/us/app/sarf-%D8%B5%D8%B1%D9%81/id1628299290" target="_blank">
                                    <img src="{{ asset('project/frontend/default/app_store.png') }}"
                                        class="img-fluid my-2" alt="">
                                </a>
                            @endif

                            @if ($settings['download']['playstore_link'])
                                <!-- <a href="{{ $content_settings['download']['playstore_link'] }}" target="_blank">
                                    <img src="{{ asset('project/frontend/default/google.png') }}"
                                        class="img-fluid my-2" alt="">
                                </a> -->
                                <a href="https://play.google.com/store/apps/details?id=com.sarf.userapp&hl=ar" target="_blank">
                                    <img src="{{ asset('project/frontend/default/google.png') }}"
                                        class="img-fluid my-2" alt="">
                                </a>
                            @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 d-flex justify-content-center">
                        <img src="{{ asset($content_settings['download']['photo']) }}" class="img-fluid feature-image" alt="">
                </div>
            </div>
        </div>
    </section>
    <!-- <div class="Extra_space v70R"></div> -->
    <!-- <div class="mt-lg-5 mb-lg-5"><br><br></div> -->
@endif
<!-- --------------------------------------------------------------------------------custom session start -->

    <section class="container-fluid  bg-light">
                    <div class="container" >
                        <div class="row align-items-center w-100  m-0 p-0">
                                <div class="col-md-6 d-flex justify-content-center">
                                        <img src="https://sarf.sa/project/frontend/download/bAAkUwl233Ecok3kjLdE.jpeg" class="img-fluid feature-image" alt="">
                                </div>
                                <div class="col-sm-6 col-12 ">
                                    <div class="pt-3 lineSpacing  features-list rtl-overflow-0"
                                        style="color:black;border-radius:20px">
                                        التطبيق عبارة عن محفظة للفواتير بطريقة رقمية                                    
                                    </div>
                                </div>
                                
                            </div>
                    </div>
                </section>
 <!-- ----------------------------------custom session end -->
@include('/frontend/' . $dir . '/footer')