@extends('front.master')

@section('content')
<main>
    <!-- Slider Start -->
    <div class="slider-section slider-active navigation-arrows-style-1">
        <div class="swiper">
            <div class="swiper-wrapper">
                <!-- Slider Item Start -->
                <div class="slider-item home-2-slider-style d-flex align-items-center swiper-slide home-2-slider-animation" style="
                            background-image: url({{asset('theme/assets/images/slider-2/slider-1.jpg')}});
                        ">
                    <div class="container-fluid custom-container">
                        <!-- Slider Content Start -->
                        <div class="home-2-slider-content-style-1 mx-auto text-center">
                            <h3 class="home-2-slider-content-style-1__sub-title">
                                FROM ITALY
                            </h3>
                            <h2 class="home-2-slider-content-style-1__title">
                                Balbi Soprani Barolo
                            </h2>
                            <p class="home-2-slider-content-style-1__description">
                                We are your premier beverage delivery partner, renowned for its swift and reliable delivery service
                            </p>
                            <a class="home-2-slider-content-style-1__btn" href="{{url('/')}}/order">
                                Discover more
                            </a>
                        </div>
                        <!-- Slider Content End -->
                    </div>
                </div>
                <!-- Slider Item End -->
            </div>
            {{-- <div class="swiper-button-next">
                <i class="lastudioicon-arrow-right"></i>
            </div>
            <div class="swiper-button-prev">
                <i class="lastudioicon-arrow-left"></i>
            </div> --}}
        </div>
    </div>
    <!-- Slider End -->



    <!-- Category Start -->
    <div class="category-section section-padding-02-1">
        <div class="container-fluid home-container">
            <!-- Section Title Start -->
            <div class="section-title-2 text-center js-scroll ShortFadeInUp scrolled">
                <h2 class="section-title-2__title">
                    Discover Our Collection
                </h2>
                <div class="section-title-2__shape">
                    <img src="{{asset('theme/assets/images/section-shape-2.png')}}" alt="shape" width="129" height="136" loading="lazy" />
                </div>
            </div>
            <!-- Section Title End -->

            <div class="row gy-xxl-3 gx-xxl-5">