@extends('front.layouts.app')
@section('style1')
<style>
</style>

@endsection
@section('content')
	

<div class="page home-layout home">

  <div class="home-page-content">

      <div id="intro-wrapper">

          <section id="intro">

              <div class="container-start-padding h-100 level">

                  <div class="intro-content-wrapper">

                      <div class="top">
                        <div class="start">
                          <div class="text-images-wrapper">
                                <img src="/assets/images/logo2.png" class="intro-logo d-block mb-2">
                                <img src="/assets/images/intro-text-1.png" class="intro-text-1 d-block mb-4">
                                <img src="/assets/images/intro-text-2.png" class="intro-text-2 d-block">
                          </div>
                        </div>
                        
                        <div class="end">


                            <div class="end-content">


                                <div class="images-wrapper">
                                    <img src="/assets/images/sponsor-logo-2.png" class="sponsor-logo-2 d-block mb-4">
                                    <img src="/assets/images/sponsor-logo-1.png" class="sponsor-logo-1 d-block mb-4">
                                </div>


                                <div class="social-media-and-statistics-wrapper mb-4">

                                    <div class="social-media-icons-wrapper bg-primary-icons mb-4">

                                        <ul class="reset-ul">

                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('facebook')}}">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
        
                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('twitter')}}">
                                                    <i class="fab fa-x-twitter"></i>
                                                </a>
                                            </li>
        
                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('instagram')}}">
                                                    <i class="fab fa-instagram"></i>
                                                </a>
                                            </li>
        
                                            
                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('youtube')}}">
                                                    <i class="fab fa-youtube"></i>
                                                </a>
                                            </li>


                                        </ul>
                                    </div>

                                    <ul class="reset-list statistics-numbers-wrapper d-flex">
                                        <li class="d-block me-4">
                                            <p class="number lead color-primary mb-0 js-count-up" data-value="{{getCount('publishers')}}"> {{getCount('publishers')}}</p>
                                            <p class="text color-black h4 mb-0"> دار نشر </p>
                                        </li>
                                        <li class="d-block me-4">
                                            <p class="number lead color-primary mb-0 js-count-up" data-value="{{getCount('writers')}}"> + {{getCount('writers')}}</p>
                                            <p class="text color-black h4 mb-0">المؤلفون </p>
                                        </li>
                                        <li class="d-block">
                                            <p class="number lead color-primary mb-0 js-count-up" data-value="{{getCount('books')}}">{{getCount('books')}} </p>
                                            <p class="text color-black h4 mb-0"> الكتب </p>
                                        </li>
                                    </ul><!-- statistics-numbers-wrapper -->

                                </div><!-- social-media-and-statistics-wrapper -->

                                <div class="download-app-links mb-4 d-nones">
                                    <a target="_blank" href="https://apps.apple.com/eg/app/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D9%83%D8%AA%D8%A7%D8%A8-%D8%A7%D9%84%D8%A5%D8%B3%D9%84%D8%A7%D9%85%D9%8A/id6744659960">
                                        <img src="assets/images/app-store.png" class="download-image">
                                    </a>
                                    <a target="_blank" href="https://www.installonair.com/app-download-link/pjKdGR">
                                        <img src="assets/images/google-play.png" class="download-image">
                                    </a>
                                </div>

                            </div>

                        </div>
                        
                      </div> <!-- top -->


                  </div> <!-- intro-content-wrapper -->

              </div> <!-- container-start-padding -->
              <div class="intro-video video-sea">
                    
                    <video
                        id="intro-video-v2"
                        class="video-js"
                        poster="/assets/images/intro-video-poster.png">
                        <source src="/assets/images/intro-video.mp4" type="video/mp4" />
                    </video>

            </div>
        </section>
          <div class="intro-image-wrapper">
              <img src="/assets/images/intro-book.svg" class="intro-book">
          </div>
      </div>
      <section id="live-frame" class="mb-5 d-none">

            <div class="container">

                <div class="row">

                    <div class="col-12 col-lg-9 m-auto">

                        <div class="live-wrapper d-none">

                            <img src="assets/images/live-frame.png" class="live-image">

                            <iframe
                                id="live-video"
                                src="https://www.youtube.com/embed/K8HuXiPLWWI"
                                title="YouTube Live Stream"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>

                        </div>

                    </div>
                    
                </div>
                
            </div>
  </section>
    
      <section id="winners">

          <div class="container">

              <div class="headline-wrapper mb-5">

                  <div class="d-flex justify-content-between align-items-center mb-3">
                      <h1 class="headline text-center"> الفائزون بمسابقة تحدي الثقافة الإسلامية 
(الموسم الأول)  </h1>
                  </div>

                  <div class="row">
                      <div class="col-lg-6 mb-5 mb-lg-0">
                          <!--<p> في معرض الكتاب الإسلامي 47 بالكويت، تُنظم العديد من الأنشطة والفعاليات التي تهدف إلى تعزيز الثقافة الإسلامية، وتوفير منصة للتفاعل بين الزوار والمشاركين. تتنوع الأنشطة بين محاضرات علمية، ورش عمل، ندوات ثقافية، وعروض ترفيهية </p>-->
                      </div>

                      <div class="col-lg-6 d-flex justify-content-lg-end justify-content-center align-items-center">

                          <div class="arrows-wrapper custom-arrow w-100px">
                              <div class="winners-swiper-button-prev swiper-button-prev">
                                  <img src="/assets/images/arrow-left.svg">
                              </div>
                              <div class="winners-swiper-button-next swiper-button-next">
                                  <img src="/assets/images/arrow-right.svg">
                              </div>
                          </div>

                      </div>
                  </div>

              </div> <!-- headline-wrapper -->


              <div class="swiper-slider-wrapper">

                  <div class="swiper winners-swiper ">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                                                        <div class="swiper-slide">
                                  <div class="slide-content">
                                      <img src='{{"/imgs/$item.jpg"}}'/>
                                  </div>
                              </div>
                          
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->


          </div>

      </section><!-- activities -->
@if( getSettingValue('about') != '' &&  0 )
      <section>
          <div class="container">
              <div class="row">
                <div class="col-12">
                    <a href="{{ route('page.compitation') }}">
                    <img src="{{getImage(getSettingValue('about'))}}" style="max-height: 18rem;" />
                        
                    </a>
                    
                </div>
                  
              </div>
              
          </div>
      </section>
      @endif
      <section id="activities">

          <div class="container">

              <div class="headline-wrapper mb-5">

                  <div class="d-flex justify-content-between align-items-center mb-3">
                      <h1 class="headline"> الأنشطة والفعاليات </h1>
                      <a href="{{route('page.events')}}" class="btn btn-outline-primary"> عرض الكل </a>
                  </div>

                  <div class="row">
                      <div class="col-lg-6 mb-5 mb-lg-0">
                          <!--<p> في معرض الكتاب الإسلامي 47 بالكويت، تُنظم العديد من الأنشطة والفعاليات التي تهدف إلى تعزيز الثقافة الإسلامية، وتوفير منصة للتفاعل بين الزوار والمشاركين. تتنوع الأنشطة بين محاضرات علمية، ورش عمل، ندوات ثقافية، وعروض ترفيهية </p>-->
                      </div>

                      <div class="col-lg-6 d-flex justify-content-lg-end justify-content-center align-items-center">

                          <div class="arrows-wrapper custom-arrow w-100px">
                              <div class="activities-swiper-button-prev swiper-button-prev">
                                  <img src="/assets/images/arrow-left.svg">
                              </div>
                              <div class="activities-swiper-button-next swiper-button-next">
                                  <img src="/assets/images/arrow-right.svg">
                              </div>
                          </div>

                      </div>
                  </div>

              </div> <!-- headline-wrapper -->


              <div class="swiper-slider-wrapper">

                  <div class="swiper activities-swiper ">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->


          </div>

      </section><!-- activities -->
      <section id="news" style="padding: 60px 0;">

          <div class="container">

              <div class="headline-wrapper mb-5">

                  <div class="d-flex justify-content-between align-items-center mb-3">
                      <h1 class="headline"> أخبار وتقارير  </h1>
                      <a href="{{route('page.news')}}" class="btn btn-outline-primary"> عرض الكل </a>
                  </div>

                  <div class="row">
                      <div class="col-lg-6 mb-5 mb-lg-0">
                          <!--<p> في معرض الكتاب الإسلامي 47 بالكويت، تُنظم العديد من الأنشطة والفعاليات التي تهدف إلى تعزيز الثقافة الإسلامية، وتوفير منصة للتفاعل بين الزوار والمشاركين. تتنوع الأنشطة بين محاضرات علمية، ورش عمل، ندوات ثقافية، وعروض ترفيهية </p>-->
                      </div>

                      <div class="col-lg-6 d-flex justify-content-lg-end justify-content-center align-items-center">

                          <div class="arrows-wrapper custom-arrow w-100px">
                              <div class="news-swiper-button-prev swiper-button-prev">
                                  <img src="/assets/images/arrow-left.svg">
                              </div>
                              <div class="news-swiper-button-next swiper-button-next">
                                  <img src="/assets/images/arrow-right.svg">
                              </div>
                          </div>

                      </div>
                  </div>

              </div> <!-- headline-wrapper -->


              <div class="swiper-slider-wrapper">

                  <div class="swiper news-swiper ">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->


          </div>

      </section><!-- activities -->

      <section id="publishers">

          <div class="container">

              <div class="headline-wrapper mb-5">
                  <div class="d-flex justify-content-between align-items-center mb-2">
                      <h1 class="headline color-white"> دور النشر </h1>
                      <a href="{{route('page.publishers')}}" class="btn btn-outline-light"> عرض الكل </a>
                  </div>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                  <div class="swiper publishers-swiper ">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          



                      </div>
                  </div>

                  <div class="arrows-wrapper">
                      <div class="publishers-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="publishers-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->

          </div>

      </section><!-- publishers -->

      <section id="books" class="d-none">

          <div class="container">

              <div class="headline-wrapper mb-5">
                  <div class="d-flex justify-content-between align-items-center mb-2">
                      <h1 class="headline"> الكتب </h1>
                      <a href="{{route('page.books')}}" class="btn btn-outline-primary"> عرض الكل </a>
                  </div>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                  <div class="swiper books-swiper">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          
                      </div>
                  </div>

                  <div class="arrows-wrapper">
                      <div class="books-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="books-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->

          </div> <!-- container -->

      </section><!-- books -->




      <section id="books">

          <div class="container">

              <div class="headline-wrapper mb-5">
                  <div class="d-flex justify-content-between align-items-center mb-2">
                      <h1 class="headline"> برنامج (كاتب وكتاب) </h1>
                      <a href="{{route('post-list', "كتاب وكاتب")}}" class="btn btn-outline-primary"> عرض الكل </a>
                  </div>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                  <div class="swiper u-books-swiper">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          
                      </div>
                  </div>

                  <div class="arrows-wrapper">
                      <div class="books-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="books-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->

          </div> <!-- container -->

      </section><!-- books -->
      
      
      
      
        <section id="fans-gallery-section">

            <div class="container">

                <div class="headline-wrapper mb-5">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h1 class="headline"> جمهور معرض الكتاب </h1>
                        <a href="https://islamicbookfairkw.com/gallery" class="btn btn-outline-primary"> عرض الكل </a>
                    </div>
                </div> <!-- headline-wrapper -->

                <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                    <div class="swiper fans-gallery">
                        <!-- Additional required wrapper -->
                        <div class="swiper-wrapper">
                            <!-- Slides -->
                
                        </div>
                    </div>

                    <div class="arrows-wrapper">
                        <div class="fans-gallery-button-prev swiper-button-prev">
                            <img src="assets/images/arrow-left.svg">
                        </div>
                        <div class="fans-gallery-button-next swiper-button-next">
                            <img src="assets/images/arrow-right.svg">
                        </div>
                    </div>

                </div><!-- swiper-slider-wrapper -->

            </div> <!-- container -->

        </section><!-- books -->



      
      

      <section id="authers" class="mb-5 d-none">

          <div class="container">

              <div class="headline-wrapper mb-5">   ///            
                  <div class="d-flex justify-content-between align-items-center mb-2">
                      <h1 class="headline"> المؤلفون </h1>
                      <a href="{{route('page.authers')}}" class="btn btn-outline-primary"> عرض الكل </a>
                  </div>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                  <div class="swiper authers-swiper">

                      <div class="swiper-wrapper">

                          
                      </div>

                  </div>

                  <div class="arrows-wrapper">
                      <div class="authers-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="authers-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->

          </div> <!-- container -->

      </section><!-- authers -->



    <section id="reels">

        <div class="container">

            <div class="headline-wrapper mb-5">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h1 class="headline"> ريلزات توعوية </h1>
                    <a href="{{route('post-list', "ريلز")}}" class="btn btn-outline-primary"> عرض الكل </a>
                </div>
            </div> <!-- headline-wrapper -->

            <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                <div class="swiper reels-swiper">

                    <div class="swiper-wrapper">

                        
                    </div>

                </div>

                <div class="arrows-wrapper">
                    <div class="reels-swiper-button-prev swiper-button-prev">
                        <img src="/assets/images/arrow-left.svg">
                    </div>
                    <div class="reels-swiper-button-next swiper-button-next">
                        <img src="/assets/images/arrow-right.svg">
                    </div>
                </div>

            </div><!-- swiper-slider-wrapper -->

        </div> <!-- container -->

    </section><!-- reels -->



      <section id="quotes">

        <div class="container">

            <div class="headline-wrapper mb-5">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h1 class="headline"> روائع المقولات </h1>
                    <a href="{{route('post-list', 'روائع المقولات')}}" class="btn btn-outline-primary"> عرض الكل </a>
                </div>
            </div> <!-- headline-wrapper -->

            <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                <div class="swiper quotes-swiper">

                    <div class="swiper-wrapper">

                        
                    </div>

                </div>

                <div class="arrows-wrapper">
                    <div class="quotes-swiper-button-prev swiper-button-prev">
                        <img src="/assets/images/arrow-left.svg">
                    </div>
                    <div class="quotes-swiper-button-next swiper-button-next">
                        <img src="/assets/images/arrow-right.svg">
                    </div>
                </div>

            </div><!-- swiper-slider-wrapper -->

        </div> <!-- container -->

    </section><!-- quotes -->






    <section id="infographic">

        <div class="container">

            <div class="headline-wrapper mb-5">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h1 class="headline"> وايت بورد </h1>
                    <a href="{{route('post-list', "وايت بورد")}}" class="btn btn-outline-primary"> عرض الكل </a>
                </div>
            </div> <!-- headline-wrapper -->

            <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                <div class="swiper infographic-swiper">

                    <div class="swiper-wrapper">

                        
                    </div>

                </div>

                <div class="arrows-wrapper">
                    <div class="infographic-swiper-button-prev swiper-button-prev">
                        <img src="/assets/images/arrow-left.svg">
                    </div>
                    <div class="infographic-swiper-button-next swiper-button-next">
                        <img src="/assets/images/arrow-right.svg">
                    </div>
                </div>

            </div><!-- swiper-slider-wrapper -->

        </div> <!-- container -->

    </section><!-- infographic -->





      <section id="statistics" class="d-none">
          <div class="container">
              <div class="row">

                  <div class="col-lg-6">
                      <div class="start">

                          <div class="details-wrapper">

                              <img src="/assets/images/intro-text-1.svg" class="mb-4">

                              <div class="text lead mb-4">

                                  <p> معرض الكتاب الإسلامي هو حدث سنوي تنظمه جمعية الإصلاح الاجتماعي في الكويت منذ عام 1978، بهدف نشر الثقافة والفكر الإسلامي الوسطي وتعزيز الوعي المجتمعي. في نسخته السادسة والأربعين، التي أقيمت في أبريل 2024 تحت شعار "وعي يتشكل"، شارك في المعرض أكثر من 120 جهة ودار نشر من 11 دولة، بما في ذلك مؤسسات حكومية وجمعيات نفع عام وجهات تعليمية. </p>

                                  <p> تضمن المعرض فعاليات ثقافية متنوعة، منها محاضرات وندوات وأمسيات أدبية، مثل محاضرة "الوعي والتغيير المنشود" للأستاذ عواد الزايد، وأمسية أدبية بعنوان "فلسطين بعين أدبية" للأستاذ أيمن العتوم. </p>

                                  <p> يُتوقع أن تُقام النسخة السابعة والأربعون من المعرض في عام 2025، استمرارًا لجهود الجمعية في تعزيز الثقافة الإسلامية والوعي المجتمعي. لمزيد من المعلومات حول المعرض والفعاليات المستقبلية، يُنصح بمتابعة الموقع الرسمي لجمعية الإصلاح الاجتماعي. </p>

                              </div>

                              <a href="{{route('page.publishers')}}" class="btn btn-primary mb-5"> تعرف على المزيد </a>

                              <ul class="reset-list statistics-numbers-wrapper d-flex gap-5">
                                  <li class="d-block text-center">
                                      <p class="h3  mb-0 js-count-up" data-value="{{getCount('publishers')}}"> +{{getCount('publishers')}} </p>
                                      <p class="lead mb-0"> دار نشر </p>
                                  </li>
                                  <li class="d-block text-center">
                                      <p class="h3  mb-0 js-count-up" data-value="{{getCount('writers')}}"> +{{getCount('writers')}} </p>
                                      <p class="lead mb-0">المؤلفون </p>
                                  </li>
                                  <li class="d-block text-center">
                                      <p class="h3  mb-0 js-count-up" data-value="{{getCount('books')}}"> +{{getCount('books')}} </p>
                                      <p class="lead mb-0"> الكتب </p>
                                  </li>
                              </ul><!-- statistics-numbers-wrapper -->


                          </div> <!-- details-wrapper -->

                      </div><!-- start -->
                  </div>

                  <div class="col-lg-6">

                      <div class="end">

                          <div class="gallery-images-wrapper mb-4">

                              {{-- <div class="row no-gutters ">
                                  <div class="col-lg-4">
                                      <img src="/assets/images/thums/gallery/01.jpg" class="image img-1">
                                  </div>
                                  <div class="col-lg-4">
                                      <img src="/assets/images/thums/gallery/02.jpg" class="image img-2">
                                  </div>
                                  <div class="col-lg-4">
                                      <img src="/assets/images/thums/gallery/03.jpg" class="image img-3">
                                      <img src="/assets/images/thums/gallery/04.jpg" class="image img-4">
                                  </div>
                              </div> --}}
                              

                              <div class="row no-gutters ">
                                  <div class="col-lg-4">
                                    @if (isset($f_images[0]))
                                        <img src="{{asset('storage/'. $f_images[0]->name)}}" class="image img-1">
                                    @endif
                                  </div>
                                  <div class="col-lg-4">
                                    @if (isset($f_images[1]))
                                        <img src="{{asset('storage/'. $f_images[1]->name)}}" class="image img-2">
                                    @endif
                                  </div>
                                  <div class="col-lg-4">
                                    @if (isset($f_images[2]))
                                        <img src="{{asset('storage/'. $f_images[2]->name)}}" class="image img-3">
                                    @endif
                                    @if (isset($f_images[3]))
                                        <img src="{{asset('storage/'. $f_images[3]->name)}}" class="image img-4">
                                    @endif
                                  </div>
                              </div>
                              


                              <div class="row no-gutters">
                                  <div class="col-lg-5">
                                    @if (isset($f_images[4]))
                                        <img src="{{asset('storage/'. $f_images[4]->name)}}" class="image img-5">
                                    @endif
                                  </div>
                                  <div class="col-lg-4">
                                    @if (isset($f_images[5]))
                                    <img src="{{asset('storage/'. $f_images[5]->name)}}" class="image img-6">
                                @endif
                                  </div>
                                  <div class="col-lg-3">
                                      <a href="{{route('page.gallery')}}" class="show-gallery-button">
                                          <p class="text"> معرض <br /> الصور </p>
                                          <img src="/assets/images/arrow-left-white.svg" class="arrow">
                                      </a><!-- show-gallery-button -->
                                  </div>
                              </div>

                          </div> <!-- images-wrapper -->

                          <div class="buttons-cards-wrapper">

                              <div class="row">
                                  <div class="col-lg-4 mb-3 mb-lg-0">
                                      <div class="button-card">
                                          <img src="/assets/images/btn-1.svg" class="mb-2 image">
                                          <a href="{{route('page.media')}}" class="button"> المركز الإعلامي <i class="fa fa-arrow-left"></i> </a>
                                      </div>
                                  </div>
                                  <div class="col-lg-4 mb-3 mb-lg-0">
                                      <div class="button-card">
                                          <img src="/assets/images/btn-2.svg" class="mb-2 image">
                                          <a href="{{route('page.guide')}}" class="button"> دليل المعرض <i class="fa fa-arrow-left"></i> </a>
                                      </div>
                                  </div>
                                  <div class="col-lg-4 mb-3 mb-lg-0">
                                      <div class="button-card">
                                          <img src="/assets/images/btn-3.svg" class="mb-2 image">
                                          <a href="{{route('page.events')}}" class="button"> الفعاليات <i class="fa fa-arrow-left"></i> </a>
                                      </div>
                                  </div>
                              </div>

                          </div>
                      </div><!-- end -->

                  </div>

              </div>
          </div>
      </section><!-- statistics -->

      <section id="exhibition-guide">
          <div class="exhibition-guide-wrapper text-center">

              <div class="text mb-5">
                  <h1 class="display-3 font-weight-400"> دليل المعرض</h1>
                  <h1 class="display-3 font-weight-400"> هل تبحث عن قراءة جديدة؟ </h1>
                  <h3 class="display-4"> هنا ستجد كل ما تحتاجه من كتب لتغذي ذهنك. </h3>
              </div> <!-- text -->

              <div class="search-wrapper p-3">
                  <form action="{{route('page.guide')}}" method="get">
                      <div class="form-group input-with-start-icon m-0">
                          <div class="relative">
                              <input type="text" class="form-control" name="s" placeholder="البحث...">
                              <i class="fa fa-search start-icon"></i>
                          </div>
                      </div>
                      
                  </form>
              </div> <!-- search-wrapper  -->

          </div><!-- exhibition-guide-wrapper -->

          <div class="shape-warpper">
              <img src="/assets/images/exhibition-guide-shape.svg" class="w-100">
          </div>

      </section><!-- exhibition-guide -->

      <section id="sponsors">

          <div class="container">

              <div class="headline-wrapper text-center mb-5">
                  <h1 class="headline"> رعاة المعرض </h1>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-start-end-arrows">

                  <div class="swiper sponsors-swiper">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          @foreach ($partners as $item) 
                              <div class="swiper-slide">
                                  <div class="slide-content">
                                      @include('front.shared-html.sponsor-card')
                                  </div>
                              </div>
                              @endforeach

                      </div>
                  </div>

                  <div class="arrows-wrapper">
                      <div class="sponsors-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="sponsors-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>
              </div><!-- swiper-slider-wrapper -->

          </div>

      </section><!-- sponsors -->

  </div> <!-- home-layout -->

</div> <!-- page -->


@endsection
@section('js')
<script src="/assets/vendors/waypoints/noframework.waypoints.min.js"></script>

<script type="module">
  import {
      CountUp
  } from "{{ url('assets/vendors/countup/CountUp.js')}}"

  function countStart() {
      const $counters = document.querySelectorAll(".js-count-up"),
          options = {
              useEasing: true,
              useGrouping: true,
              separator: ",",
              decimal: "."
          };

      $counters.forEach((item) => {
          const value = item.dataset.value;
          const counter = new CountUp(item, value, options);
          counter.start();
      });
  }

  new Waypoint({
      element: document.querySelector('#intro'),
      handler: function() {
          countStart()
      },
      offset: '20%'
  });


  new Waypoint({
      element: document.querySelector('#statistics'),
      handler: function() {
          countStart()
      },
      offset: '20%'
  });
</script>

<script>
  $(function() {
      initSponsorsSwiper();
      initActivitiesSwiper();
      initPublishersSwiper();
      initBooksSwiper();
      initAuthersSwiper();
      initMediaSwiper();
  });
</script>
    
@endsection