@extends('web.layout.app')

@section('content')

<main id="content" class="wrapper layout-page">
    <section class="ltr">
        <div class="slick-slider hero hero-header-02 slick-slider-dots-inside"
             data-slick-options="{&#34;arrows&#34;:false,&#34;autoplay&#34;:true,&#34;autoplaySpeed&#34;:3000,&#34;cssEase&#34;:&#34;ease-in-out&#34;,&#34;dots&#34;:false,&#34;fade&#34;:true,&#34;infinite&#34;:true,&#34;slidesToShow&#34;:1,&#34;speed&#34;:600}">
            @foreach($sliders as $slider)

            <div class="vh-100 d-flex align-items-center">
              <div class="z-index-2 container container-xxl py-21 pt-xl-10 pb-xl-11">
                <div class="hero-content text-start">


                </div>
              </div>
                <div class="lazy-bg bg-overlay position-absolute z-index-1 w-100 h-100  "
                     data-bg-src="{{$slider['image_'.app()->getLocale()]}}">
                </div>
                <div data-animate="fadeInDown"
                     class="hero-creative-dots position-absolute bottom-0 mb-7 start-50 translate-middle-x"><span
                            class="fs-5 fw-semibold text-white px-5 active active-first">01.</span><span
                            class="fs-5 fw-semibold text-white px-5 ">02.</span><span
                            class="fs-5 fw-semibold text-white px-5 ">03.</span></div>
            </div>

          @endforeach

        </div>
    </section>
    <section id="our_best_sellers_1" class="ltr">
        <div class="pt-14 pb-14 pt-lg-19 pb-lg-16">
            <div class="container container-xxl mb-13 d-xl-flex">
                <div class="flex-grow-1 text-left text-center" data-animate="fadeInUp"><h2 class="mb-5">{{translate('Our Last Products')}}</h2>
                    </div>
            </div>
            <div class="container-fluid mb-4">
                <div class="slick-slider our-best-seller-4"
                     data-slick-options="{&#34;arrows&#34;:true,&#34;centerMode&#34;:true,&#34;centerPadding&#34;:&#34;calc((100% - 1440px) / 2)&#34;,&#34;dots&#34;:true,&#34;infinite&#34;:true,&#34;responsive&#34;:[{&#34;breakpoint&#34;:1200,&#34;settings&#34;:{&#34;arrows&#34;:false,&#34;dots&#34;:false,&#34;slidesToShow&#34;:3}},{&#34;breakpoint&#34;:992,&#34;settings&#34;:{&#34;arrows&#34;:false,&#34;dots&#34;:false,&#34;slidesToShow&#34;:2}},{&#34;breakpoint&#34;:576,&#34;settings&#34;:{&#34;arrows&#34;:false,&#34;dots&#34;:false,&#34;slidesToShow&#34;:1}}],&#34;slidesToShow&#34;:4}">
                    @foreach($products as $product)
                    <div data-animate="fadeInUp">
                        <div class="card card-product grid-1 bg-transparent border-0">
                            <figure class="card-img-top position-relative mb-7 overflow-hidden ">
                                <a href="{{url('product/'.$product->getTranslation('slug'))}}" class="hover-zoom-in d-block"
                                   title="Shield Conditioner">
                                    <img src="{{url('product/'.$product->getTranslation('slug'))}}" data-src="{{asset($product->image)}}"
                                         class="img-fluids lazy-image w-100" alt="Shield Conditioner" width="330"
                                         height="440">
                                </a>
                            </figure>
                            <div class="card-body text-center p-0">

                                <h4 class="product-title card-title text-primary-hover text-body-emphasis fs-15px fw-500 mb-3">
                                    <a class="text-decoration-none text-reset" href="{{url('product/'.$product->getTranslation('slug'))}}">{{$product->getTranslation('name')}}</a></h4>
                            </div>
                        </div>
                    </div>
                  @endforeach

                </div>
            </div>
        </div>
    </section>
    <section class="bg-section-3 ">
        <div class="container container-xxl">
            <div class="row align-items-end">
                <div class="col-lg-4 order-2 order-lg-1 px-xl-6 pb-16 pt-12 py-lg-18 py-xl-22" data-animate="fadeInUp">
                    <div class="text-left">
                        <h3 class=" mb-6  fw-semibold">{{translate('About us')}}</h3>
                        <p class="fs-18px mb-0 text-body-calculate text-white">
                          {{translate("Al-Taqwa Soap Manufacturing Company stands out for its beautiful, creative, and innovative production. It focuses on delivering high-quality products that perfectly meet customers' needs. With its innovative marketing strategy, the company continues to achieve consistent success in the soap manufacturing market, solidifying its position as a leading player in the industry.")}}
                        </p></div>
                    <a href="{{route('about_us')}}" class="mt-10 btn btn-white shadow-sm">{{translate('Read More')}}</a>
                </div>
                <div class="col-lg-8 order-1 order-lg-2" data-animate="fadeIn">
                    <img class="lazy-image img-fluid " src="#"

                         data-src="{{asset('assets/img/front-view-soap-made-from-green-plant-with-copy-space.png')}}" width="923" height="640" alt="other-01">
                </div>
            </div>
        </div>
    </section>
  <section class="pt-15 pb-12 pt-lg-16"  id="gallery">
    <div class="container container-xxl">
      <div class="row ">
        <div class="col-md-6 mb-md-9 text-center" data-animate="fadeInUp">
          <h2 class="fs-3 mb-0">{{translate('Our Gallery')}}</h2>
        </div>

      </div>
      <div class="mx-n6 slick-slider text-center ltr"
           data-slick-options="{&quot;slidesToShow&quot;: 5,&quot;infinite&quot;:false,&quot;autoplay&quot;:false,&quot;dots&quot;:false,&quot;arrows&quot;:false,&quot;responsive&quot;:[{&quot;breakpoint&quot;: 1366,&quot;settings&quot;: {&quot;slidesToShow&quot;:5 }},{&quot;breakpoint&quot;: 992,&quot;settings&quot;: {&quot;slidesToShow&quot;:2}},{&quot;breakpoint&quot;: 768,&quot;settings&quot;: {&quot;slidesToShow&quot;: 3}},{&quot;breakpoint&quot;: 576,&quot;settings&quot;: {&quot;slidesToShow&quot;: 2}}]}">
       @foreach($galleries as $gallery)
        <div class="px-6" data-animate="fadeInUp">
          <a href="{{asset($gallery->image)}}"  data-gallery="instagram"
             class=" hover-zoom-in hover-shine  card-img-overlay-hover hover-zoom-in hover-shine d-block">
            <img class="lazy-image  w-100" width="314" height="314"
                 data-src="{{asset($gallery->image)}}" alt="instagram-01" src="#">
            <span class="card-img-overlay bg-dark bg-opacity-30"></span>
          </a>
        </div>

        @endforeach

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

    <section class="bg-section-2 pt-lg-17 pb-lg-17 pt-15 pb-15">
        <div class="container text-center">
            <div class="mx-auto mb-11 text-center" style="max-width:500px" data-animate="fadeInUp"><h3 class="mb-6">
                {{translate('Stay Up to Date with All News and Exclusive Offers')}}
              </h3></div>
            <form class="mx-auto" action="{{url('/')}}" style="max-width: 546px" data-animate="fadeInUp">
                <div class="text-center">
                    <div class=" input-group position-relative mb-11 form-border-transparent">
                        <input type="email" class="form-control bg-body rounded-left"
                               placeholder="Enter your email address">
                        <button type="submit"
                                class=" btn btn-dark btn-hover-bg-primary btn-hover-border-primary rounded ms-0">
                            {{translate('Subscribe')}}
                        </button>
                    </div>

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

  <section id="from_our_blog">
    <div class="pt-14 pb-15 py-lg-18 mb-3 mt-1">
      <div class="container">
        <div class="text-center" data-animate="fadeInUp"><h2 class="mb-6">{{translate('From Our Blog')}}</h2>
      </div>
      <div class="container container-xxl mt-12 pt-3">
        <div class="slick-slider"
             data-slick-options="{&#34;arrows&#34;:false,&#34;dots&#34;:false,&#34;responsive&#34;:[{&#34;breakpoint&#34;:1200,&#34;settings&#34;:{&#34;slidesToShow&#34;:3}},{&#34;breakpoint&#34;:992,&#34;settings&#34;:{&#34;dots&#34;:true,&#34;slidesToShow&#34;:2}},{&#34;breakpoint&#34;:768,&#34;settings&#34;:{&#34;dots&#34;:true,&#34;slidesToShow&#34;:1}}],&#34;slidesToShow&#34;:3}">
          @foreach($blogs as $blog)
          <div>
            <article class="card card-post-grid-3 bg-transparent border-0" data-animate="fadeInUp">
              <figure class="card-img-top mb-8 position-relative"><a href="{{url('/blog/'.$blog->getTranslation('slug'))}}"
                                                                     class="hover-shine hover-zoom-in d-block"
                                                                     title="How to Plop Hair for Bouncy, Beautiful Curls">
                  <img data-src="{{asset($blog->image)}}"
                       class="img-fluids lazy-image w-100"
                       alt="How to Plop Hair for Bouncy, Beautiful Curls" width="450" height="290"
                       src="{{url('/blog/'.$blog->getTranslation('slug'))}}">
                </a></figure>
              <div class="card-body p-0">
                <ul class="post-meta list-inline lh-1 d-flex flex-wrap fs-13px text-uppercase ls-1 fw-semibold m-0">
                  <li class="border-start ps-5 ms-5 list-inline-item">{{date_format($blog->created_at,'Y m d')}}</li>
                </ul>
                <h4 class="card-title lh-base mt-5 pt-2 mb-0">
                  <a class="text-decoration-none" href="{{url('/blog/'.$blog->getTranslation('slug'))}}"
                     title="How to Plop Hair for Bouncy, Beautiful Curls">{{$blog->getTranslation('name')}}</a>
                </h4>
              </div>
            </article>
          </div>
          @endforeach
        </div>
        <div class="text-center pt-2" data-animate="fadeInUp">
          <a href="{{url('blogs')}}" class="mt-12 btn btn-outline-dark">{{translate('View All Posts')}}</a>
        </div>
      </div>
    </div>
    </div>
  </section>
</main>
@endsection