@extends('layouts.app')
@section('style-sheets')

    <link href="{{ asset('css/appBootstrap.css?v=') . config('constants.VERSION') }}" rel="stylesheet">
    <link href="{{ asset('css/appStyle.css?v=') . config('constants.VERSION') }}" rel="stylesheet">
    <link href="{{ asset('css/appResponsive.css?v=') . config('constants.VERSION') }}" rel="stylesheet">

@endsection
@section('page-title', 'Home')

@section('body-content')

    <!-- Main Section -->
    <section class="main-slider">

        {{-- for desktop  --}}
        @if (empty(isMobile()))
            <div class="main-slider-carousel owl-carousel owl-theme d-none d-md-block">


                <!-- Slide One -->
                <div class="slide">
                    <!-- Ct Dot Animated -->

                    <div class="image-layer" style="background-image: url()">
                        <img src="images/home-slider/banners/first-slide.webp" alt="slide">
                    </div>

                </div>
                <!-- End Slide One -->


                <!-- Slide Two -->

                <div class="slide">


                    <div class="image-layer" style="background-image: url()">
                        <img src="images/home-slider/banners/second-slide.webp" alt="slide">
                    </div>

                </div>

                <!-- End Slide Two -->




            </div>
        @elseif (!empty(isMobile()))
            {{-- for mobile  --}}
            <div class="main-slider-carousel owl-carousel owl-theme d-md-none">





                <!-- Mobile Slide One Start-->

                <div class="slide">
                    <!-- Ct Dot Animated -->

                    <div class="image-layer" style="background-image: url()">
                        <img src="images/home-slider/banners/mob-first-slide.webp" alt="slide">
                    </div>

                </div>

                <!-- Mobile Slide One End-->

                <!-- Mobile Slide Two Start-->



                <!-- Mobile Slide Two End-->



            </div>
        @endif

    </section>
    <!-- End Main Section -->

    <!-- Business Section -->
    <section class="business-section">
        <div class="small-circle-layer"></div>
        <div class="auto-container">
            <div class="row clearfix">
                <!-- Images Column -->
                <div class="images-column col-lg-6 col-md-6 col-sm-12">
                    <div class="inner-column">
                        <div class="image titlt" data-tilt data-tilt-max="4">
                            <img src="images/resource/technology-partner.webp" alt="technology-partner" />
                        </div>
                    </div>
                </div>
                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-6 col-sm-12">
                    <div class="inner-column">
                        <!-- Sec Title -->
                        <div class="sec-title">
                            <div class="title">About Us</div>
                            <h1>Your Trusted Technology Partner</h1>
                            <div class="text">We are dedicated to providing our customers with the best technology
                                solutions available.We make technology accessible with affordable prices and a wide product
                                range.</div>
                        </div>


                        <!-- Options List -->
                        <ul class="options-list">
                            <li>Trusted supplier of new and refurbished IT equipment.
                            </li>
                            <li>Wide range of products from leading brands.</li>
                            <li>Fast and reliable shipping for all orders.</li>
                            <li>Competitive pricing on all products.</li>

                            <li>Commitment to excellence.</li>
                        </ul>




                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Business Section -->

    <!-- Project Section -->
    <section class="project-section">

        <div class="outer-container">

            <div class="project-carousel owl-carousel owl-theme">

                <!-- Project Block -->
                <div class="project-block">
                    <div class="inner-box">
                        <div class="image">
                            <div class="color-layer"></div>


                            <a href="{{ route('list-product', ['categorySlug' => 'computer-systems', 'subCategorySlug' => 'desktop-computers']) }}" aria-label="choose specific category"> <img
                                    src="images/gallery/thinkstation.webp" alt="category-thinkstation" loading="lazy"/></a>
                            <div class="post-number">01</div>
                            <div class="content">
                                <h6><a href="{{ route('list-product', ['categorySlug' => 'computer-systems', 'subCategorySlug' => 'desktop-computers']) }}" aria-label="choose specific category">Desktop PC</a></h6>
                                <a class="arrow flaticon-right-arrow" href="{{ route('list-product', ['categorySlug' => 'computer-systems', 'subCategorySlug' => 'desktop-computers']) }}"
                                    aria-label="choose specific category"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Project Block -->
                <div class="project-block">
                    <div class="inner-box">
                        <div class="image">
                            <div class="color-layer"></div>
                            <a href="{{ route('category-list-product', ['categorySlug' => 'computer-displays']) }}"> <img loading="lazy"
                                    src="images/gallery/lcd.webp" alt="category-lcd" /></a>
                            <div class="post-number">02</div>
                            <div class="content">
                                <h6><a href="{{ route('category-list-product', ['categorySlug' => 'computer-displays']) }}">TV Screens</a></h6>
                                <a class="arrow flaticon-right-arrow" href="{{ route('category-list-product', ['categorySlug' => 'computer-displays']) }}"
                                    aria-label="choose specific category"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Project Block -->
                <div class="project-block">

                    <div class="inner-box">
                        <div class="image">
                            <div class="color-layer"></div>
                            <a href="{{ route('list-product', ['categorySlug' => 'computer-systems', 'subCategorySlug' => 'notebooks']) }}" aria-label="choose specific category"> <img loading="lazy"
                                    src="images/gallery/laptop.webp" alt="category-laptop" /></a>
                            <div class="post-number">03</div>
                            <div class="content">
                                <h6><a href="{{ route('list-product', ['categorySlug' => 'computer-systems', 'subCategorySlug' => 'notebooks']) }}" aria-label="choose specific category">Laptops</a></h6>
                                <a class="arrow flaticon-right-arrow" href="{{ route('list-product', ['categorySlug' => 'computer-systems', 'subCategorySlug' => 'notebooks']) }}"
                                    aria-label="choose specific category"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Project Block -->
                <div class="project-block">
                    <div class="inner-box">
                        <div class="image">
                            <div class="color-layer"></div>
                            <a href="{{ route('list-product', ['categorySlug' => 'network-communication', 'subCategorySlug' => 'routers-gateways']) }}" aria-label="choose specific category"> <img loading="lazy"
                                    src="images/gallery/router.webp" alt="category-router" /></a>
                            <div class="post-number">04</div>
                            <div class="content">
                                <h6><a href="{{ route('list-product', ['categorySlug' => 'network-communication', 'subCategorySlug' => 'routers-gateways']) }}" aria-label="choose specific category">Routers</a></h6>
                                <a class="arrow flaticon-right-arrow" href="{{ route('list-product', ['categorySlug' => 'network-communication', 'subCategorySlug' => 'routers-gateways']) }}"
                                    aria-label="choose specific category"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Project Block -->
                <div class="project-block">
                    <div class="inner-box">
                        <div class="image">
                            <div class="color-layer"></div>
                            <a href="{{ route('list-product', ['categorySlug' => 'network-communication', 'subCategorySlug' => 'switches-bridges']) }}" aria-label="choose specific category"> <img loading="lazy"
                                    src="images/gallery/switch.webp" alt="category-switch" /></a>
                            <div class="post-number">05</div>
                            <div class="content">
                                <h6><a href="{{ route('list-product', ['categorySlug' => 'network-communication', 'subCategorySlug' => 'switches-bridges']) }}" aria-label="choose specific category">Switches</a></h6>
                                <a class="arrow flaticon-right-arrow" href="{{ route('list-product', ['categorySlug' => 'network-communication', 'subCategorySlug' => 'switches-bridges']) }}"
                                    aria-label="choose specific category"></a>
                            </div>
                        </div>
                    </div>
                </div>




            </div>
        </div>












    </section>
    <!-- End Project Section -->

    <!-- Call to Action RFQ Start -->

    <a class="align-middle" href="/rfq" aria-label="Request for Quote">
        <section class="cta-btn">

            <div class="container-fluid">
                <div class="row">
                    <img src="images/resource/rfq-banner.webp" alt="request for quote" id="home-call-to-action"
                        loading="lazy">
                </div>
            </div>

        </section>
    </a>

    <!-- Call to Action RFQ End -->

    <!-- Services Section Two -->
    <section class="services-section-two">
        <div class="icon-one"></div>
        <div class="icon-two"></div>
        <div class="icon-three"></div>
        <div class="icon-four"></div>
        <div class="auto-container">
            <!-- Title Box -->
            <div class="title-box text-center">
                <h2>The Process</h2>
            </div>
            <div class="inner-container">
                <div class="row clearfix">

                    <!-- Service Block Two -->
                    <div class="service-block-two col-lg-3 col-md-6 col-sm-12">
                        <div class="inner-box">
                            <div class="icon-box">
                                <div class="service-number">01</div>
                                <div class="icon flaticon-catalogue"></div>
                            </div>
                            <h5><a href="javascript:void(0)">Product Catalogue</a></h5>
                            <div class="text">Display products and organize them into categories.</div>
                        </div>
                    </div>

                    <!-- Service Block Two -->
                    <div class="service-block-two col-lg-3 col-md-6 col-sm-12">
                        <div class="inner-box">
                            <div class="icon-box">
                                <div class="service-number">02</div>
                                <div class="icon flaticon-cart"></div>
                            </div>
                            <h5><a href="javascript:void(0)">Shopping Cart</a></h5>
                            <div class="text"> Allow customers to add products, view cart, and checkout.</div>
                        </div>
                    </div>

                    <!-- Service Block Two -->
                    <div class="service-block-two col-lg-3 col-md-6 col-sm-12">
                        <div class="inner-box">
                            <div class="icon-box">
                                <div class="service-number">03</div>
                                <div class="icon flaticon-payment"></div>
                            </div>
                            <h5><a href="javascript:void(0)">Payment Processing</a></h5>
                            <div class="text"> Securely process customer payments with integrated payment gateway.</div>
                        </div>
                    </div>

                    <!-- Service Block Two -->
                    <div class="service-block-two col-lg-3 col-md-6 col-sm-12">
                        <div class="inner-box">
                            <div class="icon-box">
                                <div class="service-number">04</div>
                                <div class="icon flaticon-order-fulfill"></div>
                            </div>
                            <h5><a href="javascript:void(0)">Order Fulfillment</a></h5>
                            <div class="text">Package products, ship them to customers, and provide tracking.</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- End Services Section Two -->

    <!-- Quality Section -->
    <section class="quality-section">

        <div class="auto-container">
            <div class="row clearfix">
                <!-- Images Column -->
                <div class="images-column col-lg-6 col-md-6 col-sm-12">
                    <div class="inner-column">
                        <div class="image titlt" data-tilt data-tilt-max="4">
                            <img src="images/resource/logos.webp" loading="lazy" alt="brands-partners" />
                        </div>
                    </div>
                </div>
                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-6 col-sm-12">
                    <div class="inner-column">
                        <!-- Sec Title -->
                        <div class="sec-title">
                            <div class="title style-two">High Fidality Service</div>


                            <h2>Discover the <span>Latest Tech</span> <br> from Leading Brands</h2>
                            <div class="text">Upgrade Your Tech Game with Our Wide Range of Products</div>
                        </div>
                        <!-- Options List -->
                        <ul class="options-list">
                            <li>Providing latest trends and innovations in the tech industry, all in one place.</li>
                            <li>Get More Savings on Top Tech with Regular Sales and Discounts.</li>
                            <li>Enjoy Secure Shopping with Our Checkout Protection</li>
                        </ul>
                        <!-- Demand -->
                        <div class="demand">We provide fast on-demand <span>delivery.</span></div>

                        <!-- Info Box -->
                        <div class="info-box d-flex">

                            <!-- Button Box -->
                            <div class="button-box">
                                <a href="/all-brands" class="theme-btn btn-style-one clearfix">
                                    <span class="btn-wrap">
                                        <span class="text-one">Click To Explore</span>
                                        <span class="text-two">Click To Explore</span>
                                    </span>
                                    <span class="icon flaticon-right-arrow"></span>
                                </a>
                            </div>
                            <!-- Play Box -->

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Quality Section -->


@include('sections.brands')
@section('scripts')

    <script src="{{ asset('js/jquery.js') }}" defer></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
    <script src="{{ asset('js/jquery.mCustomScrollbar.concat.min.js') }}" defer></script>
    <script src="{{ asset('js/header.js?v=') . config('constants.VERSION') }}" defer></script>
    <script src="{{ asset('js/owl.js') }}" defer></script>
    <script src="{{ asset('js/nav-tool.js') }}" defer></script>
    <script src="{{ asset('js/jquery-ui.js') }}" defer></script>
    <script src="{{ asset('js/tilt.jquery.min.js') }}" defer></script>
    <script src="{{ asset('js/appScript.js?v=') . config('constants.VERSION') }}" defer></script>
    <script src="{{ asset('js/footer.js?v=') . config('constants.VERSION') }}" defer></script>

@endsection

@endsection


@section('scripts-only')
@endsection