@extends('ui.layout')
@section('content')

    <!-- Banner Section Start Here -->
    <section class="banner_area">
        <div class="swiper mySwiper">
            <img src="{{ asset('ui') }}/images/Header Arc.png" alt="" class="img-fluid bannerArc">
            <div class="swiper-wrapper">
                @foreach ($sliders->items as $slider)
                    <div class="swiper-slide">
                        <img src="{{ asset($slider->image_path) }}" alt{{ $slider->slider_name }}" class="img-fluid">
                        <div class="overlay"></div>
                        <div class="slider_content">
                            <div class="slide_outerbox">
                                <div class="slide_innerbox">
                                    <div class="slide_box">
                                        <div class="slide_heading">
                                            <h2>{{ $slider->slider_name }}</h2>
                                        </div>
                                        <div class="slide_para">
                                            <p>{!! $slider->caption !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-line-animation">

            </div>
            <div class="slider_footer">
                <div class="swiper-button-prev">PREV</div>
                <div class="swiper-button-next">NEXT</div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <!-- Banner Section End Here -->

    <!-- Overview Section Start Here -->
    <section class="overview_section_intro plr ptb">
        <div class="overview_img">
            <img src="{{ asset('ui') }}/images/overview-1.png" alt="Overview" class="img-fluid">
        </div>
        <div class="overview_content">
            <h3>We are a</h3>
            <h2><span class="count-up">35</span> + Years</h2>
            <h3>old export-import logistics major in India</h3>
            <p class="body_typography">We specialize in 3PL, Warehousing and Distribution, Customs Clearance, Customs Refunds & Advisory and Freight Forwarding.</p>
        </div>
    </section>
    <!-- Overview Section End Here -->
    
    <!-- Static section Start Here 
   <section class="horizontal_scroll_text_static ptb" >
        <div class="scroll_div_one">
            <h1 class="static_heading title wow animate__animated animate__fadeInUp">WE DELIVER CARE,<br>NOT JUST CARGO</h1>
        </div>
    </section>
    <!-- Static section End Here -->

    <!-- Service Section Start Here -->
    @if (isset($service_menu['service']) && count($service_menu['service']))
        <section class="service_area plr ptb">
            <div class="section_header">
                <h2 class="title wow animate__animated animate__fadeInUp">Integrated services & solutions<br>for your
                    business</h2>
            </div>
            <div class="service_list">
                @foreach ($service_menu['service']->take(4) as $service)
                    <div class="service_column wow animate__animated animate__fadeInUp">
                        <div class="service_box">
                            <div class="service_img">
                                <img src="{{ asset($service->service_thumb_image) }}" alt="{{ $service->service_name }}"
                                    class="img-fluid">
                            </div>
                            <div class="service_name">
                                <h2>{{ $service->service_name }}</h2>
                            </div>
                            <div class="service_content">
                                <p class="body_typography_medium">
                                    {!! $service->short_content !!}
                                </p>
                                <a href="{{ route('front.service', $service->service_slug) }}" class="readMoreBtn">Read
                                    More</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif
    <!-- Service Section End Here -->

    <!-- Marquee Section Start Here -->
    <section class="horizontal_scroll_text ptb">
        <div class="scroll_div_one">
            <marquee width="100%" direction="left" class="marqueeOne">
                <span>Trusted Logistics Partner. International Freight Forwarding. </span>
                <span>Trusted Logistics Partner. International Freight Forwarding. </span>
                <span>Trusted Logistics Partner. International Freight Forwarding. </span>
                <span>Trusted Logistics Partner. International Freight Forwarding. </span>
                <span>Trusted Logistics Partner. International Freight Forwarding.</span>
            </marquee>
        </div>
        <div class="scroll_div_two">
            <marquee width="100%" direction="right" class="marqueeTwo">
                <span>&nbsp;&nbsp;Custom Clearances. Warehousing. Custom Clearances. Warehousing. Custom Clearances. Warehousing.</span>
                <span>&nbsp;Custom Clearances. Warehousing. Custom Clearances. Warehousing. Custom Clearances. Warehousing.</span>
            </marquee>
        </div>
    </section>
    <!-- Marquee Section End Here -->

    <!-- Why Us Section Start here -->
    <section class="why_us_section plr ptb">
        <div class="mob_whyus_img wow animate__animated animate__fadeInLeft">
            <img src="{{ asset('ui') }}/images/whyus.png" alt="Why Us Image" class="img-fluid">
        </div>
        <div class="why_us_img_one wow animate__animated animate__fadeInLeft">
            <img src="{{ asset('ui') }}/images/why_us_one.png" alt="Container loaded Ship" class="img-fluid">
        </div>
        <div class="why_us_content">
            <div class="section_header wow animate__animated animate__fadeInUp">
                <h2 class="title">Why Us?</h2>
            </div>
            <div class="body_typography why_us_para wow animate__animated animate__fadeInUp">
                <p>
                    When it comes to global trade, logistics has a significant impact on business performance.<br><br>We
                    at Nagarkot Forwarders possess a strong combination of expertise, experience, processes, tools and
                    infrastructure to offer you solutions that help you move goods with efficiency & ease.<br><br>We are
                    the trusted logistics partners to several prestigious clients with long-standing relationships based
                    on trust and performance.<br><br>No matter what the size of your need is, we serve you with passion
                    and ensure that the job is well done.
                </p>
            </div>
        </div>
        <div class="why_us_img_two wow animate__animated animate__fadeInRight">
            <img src="{{ asset('ui') }}/images/why_us_two.png" alt="Container Image" class="img-fluid">
        </div>
    </section>
    <!-- Why Us Section End here -->

    <!-- Key Figures Section Start Here -->
    <section class="key_figure_section ptb">
        <img src="{{ asset('ui') }}/images/keyfigArc.png" alt="" class="img-fluid keyFigArc">
        <div class="section_header wow animate__animated animate__fadeInUp">
            <h2 class="title">Key Figures</h2>
        </div>
        <div class="figures">
            <!-- <div class="figure_column counter_box">
                <h2 id="num1"><span class="wow animate__animated animate__fadeInUp">3</span><span
                        class="wow animate__animated animate__fadeInUp">5</span><span
                        class="wow animate__animated animate__fadeInUp">+</span></h2>
                <span>Years of Experience</span>
            </div> -->
            <div class="figure_column counter_box">
                <h2 id="num1">
                    <span class="wow animate__animated animate__fadeInUp">1</span>
                    <span class="wow animate__animated animate__fadeInUp">0,</span>
                    <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0,</span>
                        <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0</span>        
                        <span class="wow animate__animated animate__fadeInUp">0+</span>
                </h2>
                <span>Sq.ft of owned storage space</span>
            </div>
            <div class="figure_column counter_box">
                <h2 id="num1">
                    <span class="wow animate__animated animate__fadeInUp">1</span>
                    <span class="wow animate__animated animate__fadeInUp">0,</span>
                        <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0,</span>
                        <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0+</span>
                </h2>
                <span>CBUs cleared till date (one of India’s largest automobile CHAs)</span>
            </div>
            <div class="figure_column counter_box">
                <h2 id="num1">
                    <span class="wow animate__animated animate__fadeInUp">1,</span>
                    <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0,</span>
                        <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0</span>
                        <span class="wow animate__animated animate__fadeInUp">0+</span>
                </h2>
                <!--<span>TEU annual capacity at CFS</span>-->
                <span>sq.ft of 3PL space</span>
            </div>
            <div class="figure_column counter_box">
                <h2 id="num1">
                    <span class="wow animate__animated animate__fadeInUp">3,</span><span
                        class="wow animate__animated animate__fadeInUp">0</span><span
                        class="wow animate__animated animate__fadeInUp">0</span><span
                        class="wow animate__animated animate__fadeInUp">0</span><span
                        class="wow animate__animated animate__fadeInUp">+</span>
                </h2>
                <span>Port pairs covered for Freight Forwarding</span>
            </div>
            <!--<div class="figure_column counter_box">-->
            <!--    <h2 id="num1">-->
            <!--        <span class="wow animate__animated animate__fadeInUp">3</span><span class="wow animate__animated animate__fadeInUp">5</span><span class="wow animate__animated animate__fadeInUp">+</span>-->
            <!--    </h2>-->
            <!--    <span>Years of Experience</span>-->
            <!--</div>-->
        </div>
    </section>
    <!-- Key Figures Section End Here -->

    <!-- Client Section Start Here -->
    <section class="client_section">
        <div class="section_header wow animate__animated animate__fadeInUp plr ptb">
            <h2 class="title">
                We are a proud logistics business partner to<br>several Indian and multinational companies
            </h2>
        </div>
        <div class="client_logo_area plr">
            @foreach ($partners as $partner)
                <div class="logo_box">
                    <img src="{{ asset($partner->client_logo) }}" alt="{{ $partner->name }}" class="img-fluid">
                </div>
            @endforeach
        </div>
    </section>
    <!-- Client Section End Here -->
    <!-- Industry Section Start Here -->
    <!-- <section class="industry_service_section ptb">
                    <div class="industry_service_content plr">
                        <div class="section_header wow animate__animated animate__fadeInUp">
                            <h2 class="title">Industry Solutions</h2>
                        </div>
                        <div class="industry_para body_typography_medium wow animate__animated animate__fadeInUp">
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                        </div>
                        <div class="industry_para body_typography_medium wow animate__animated animate__fadeInUp">
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                                massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                        </div>
                    </div>
                    @if (isset($service_menu['industries']) && count($service_menu['industries']))
    <div class="industry_flex">
                            <div class="industry_column wow animate__animated animate__fadeInUp">
                                @foreach ($service_menu['industries']->take(7) as $industry)
    <div class="industry_box">
                                        <div class="industry_img">
                                            <img src="{{ asset($industry->service_thumb_image) }}"
                                                alt="{{ $industry->service_name }}" class="img-fluid">
                                        </div>
                                        <div class="industry_content">
                                            <h3>{{ $industry->service_name }}</h3>
                                            <a href="{{ route('front.industry', $industry->service_slug) }}"
                                                class="industryReadMore">Read More</a>
                                        </div>
                                    </div>
    @endforeach
                            </div>
                        </div>
    @endif
                </section> -->
    <!-- Industry Section End Here -->

    <!-- Automobiles Section Start Here -->
    @if ($footer_sliders && $footer_sliders->items->count())
        @for ($i = 0; $i < $footer_sliders->items->count(); $i++)
            @php
                $class = 'automobile';
                if ($i % 2 !== 0) {
                    $class = 'pharma';
                }
            @endphp
            <section class="{{ $class }}_section plr">
                <div class="inner_{{ $class }}_section"
                    style="background: url({{ asset($footer_sliders->items[$i]->image_path) }});">
                    <div class="{{ $class }}_content">
                        <img src="{{ asset('ui') }}/images/icon/red_arc.png" class="img-fluid" alt="Red Arc Image" />
                        <div class="content_outerbox">
                            <div class="content_innerbox">
                                <div class="content_box">
                                    <div class="content_heading">
                                        <p class="body_typography">{{ $footer_sliders->items[$i]->slider_name }}</p>
                                        <h2>{{ $footer_sliders->items[$i]->heading }}</h2>
                                    </div>
                                    <div class="content_para">
                                        <p class="body_typography_medium">{!! $footer_sliders->items[$i]->caption !!}
                                        </p>
                                        @if ($slider->link)
                                            <a href="{{ $slider->link }}" class="industry_link">Read More</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endfor
    @endif
    <!-- Automobiles Section End Here -->

    <!-- Client Testimonial Start Here -->
    <section class="client_testimonial_slider_section plr pt">
        <div class="client_said_area">
            <div class="section_header">
                <h2 class="title">What they said about us</h2>
            </div>
            <div class="testimonial_slider">
                <div class="swiper swiper-horizontal-3d">
                    <div class="swiper-wrapper">
                        @foreach ($testimonials as $testimonial)
                            <div class="swiper-slide">
                                <p class="client_para body_typography_medium">
                                    <img src="{{ asset('ui') }}/images/icon/red_arc.png" class="img-fluid"
                                        alt="Red Arc Image" />
                                    <span class="iconify" data-icon="bxs:quote-left"></span>
                                    {!! $testimonial->content !!}
                                </p>
                                <p class="author body_typography_medium">
                                    - {{ $testimonial->name }}, {{ $testimonial->designation }}<br>
                                    <strong>{{ $testimonial->title }}</strong>
                                </p>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>

            </div>
        </div>
    </section>
    <!-- Client Testimonial End Here -->

    <!-- Blog Section Start Here -->
    <section class="blog_section">
        <div class="section_header plr">
            <h2 class="title">Blog</h2>
        </div>
        <div class="blog_area">
            @foreach ($blogs as $blog)
                <div class="blog_column">
                    <div class="blog_content">
                        <a href="{{ route('front.blogDetail', $blog->slug) }}">
                            {{ Str::words($blog->title, 4) }}.
                        </a>
                    </div>
                    <div class="blog_img">
                        <a href="{{ route('front.blogDetail', $blog->slug) }}">
                            <img src="{{ asset($blog->thumb_image) }}" alt="{{ $blog->title }}." class="img-fluid">
                        </a>
                    </div>
                    <div class="blog_footer">
                        <p class="blog_date body_typography_medium">{{ user_date($blog->published_at) }}</p>
                        @if ($blog->category->count())
                            <p class="blog_category body_typography_medium">{{ $blog->category->first()->name }}</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </section>
    <!-- Blog Section End Here -->

    <!-- Quote Section Start Here -->
    @include('ui.components.get-free-quote')


    <!-- Quote Section End Here -->
@endsection