@extends('web.layouts.container')

@section('content')
<main>
    <!-- Start pg-header -->
    <section class="pg-header section">
        <div class="container">
            <h1 class="title text-white text-uppercase fw-bold text-center">{{$pages[0]->currentDescription->page_title}}</h1>
        </div>
        <img src="{{ asset($pages[0]->image ?? 'assets/web/images/header-1.png')}}" alt="{{$pages[0]->currentDescription->page_title}}" class="bg"/>
    </section>
    
    <!-- Start drives-pg -->
    <section class="drives-pg section">
        <div class="container">
            <div class="box bg_primary">
                <div class="row align-items-center">
                    <div class="col-lg-4 px-0">
                        <div class="txt_content">
                            <h1 class="title text-white sec_head mb-4">
                                {{ $pages[0]->currentDescription->title }}
                                {{-- {!! footerLink($pages[0]->currentDescription->title) !!} --}}
                                
                            </h1>
                            {!! $pages[0]->currentDescription->description !!}
                        </div>
                    </div>
                    <div class="col-lg-8 px-0 order-first order-lg-last">
                        <img src="{{ asset($pages[0]->image ?? 'assets/web/images/drives-1.png')}}" alt="" class="sec-img"/>
                    </div>
                </div>
            </div>
            <div class="box bg_primary mt-5">
                <div class="row align-items-center">
                    <div class="col-lg-8 px-0">
                        <img src="{{ asset($pages[1]->image ?? 'assets/web/images/drives-2.png')}}" alt="" class="sec-img"/>
                    </div>
                    <div class="col-lg-4 px-0">
                        <div class="txt_content">
                            <h1 class="title text-white sec_head mb-4">
                                {{ $pages[1]->currentDescription->title }}
                            </h1>
                            <div class="p">
                                {!! $pages[1]->currentDescription->description !!}
                            </div>
                        </div>
                    </div>
                 
                </div>
            </div>
            <div class="values_wrapper mt-5 pt-4">
                <h1 class="title text-center sec_head mb-5 pb-3">
                    {!! footerLink($values[0]->category_name) !!}
                </h1>
                <div class="swiper-container values_swiper">
                    <div class="swiper-wrapper pb-5">
                        @foreach ($values as $item)
                        <div class="swiper-slide">
                            <div class="value_item">
                                <div class="row justify-content-around align-items-center">
                                    <div class="col-lg-5">
                                        <img src="{{ asset($item->image?: 'assets/web/images/values-1.png')}}" alt="" class="sec-img"/>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="text-box">
                                            <h3 class="title mb-4">{{ $item->currentDescription->title}}</h3>
                                            <p class="p col-lg-11">
                                                {!! nl2br($item->currentDescription->description) !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Start downloading-sec -->
    @include('web.layouts.downloading')
    
    <!-- Start contact-sec -->
    {{-- @include('web.layouts.contactus') --}}

</main>

@endsection

@section('inner_js')
@endsection