@extends('frontend.layouts.default')
@section('pageTitle', config('meta.home.title'))
@section('pageDescription'){!! config('meta.home.description') !!}
@endsection
@section('pageKeywords'){!! config('meta.home.keywords') !!}
@endsection
@section('plugins-style')

@endsection
@section('page-style')
@endsection
@section('content')
    <section>
        <div class="container section-grid">
            <div class="row" style="--bs-gutter-x: 80px">
                <div class="col-lg-6">
                    <div class="prouct-swiper overflow-x-hidden swiper-container position-relative">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img class="w-100 h-100 object-fit-cover"
                                    src="https://placehold.co/800x800/D1C6EC/462C84?text=Blitztech+Solutions&font=inter-variable"
                                    loading="lazy" />
                                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                            </div>
                            <div class="swiper-slide">
                                <img class="w-100 h-100 object-fit-cover"
                                    src="https://placehold.co/800x800/D1C6EC/462C84?text=Blitztech+Solutions&font=inter-variable"
                                    loading="lazy" />
                                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                            </div>
                            <div class="swiper-slide">
                                <img class="w-100 h-100 object-fit-cover"
                                    src="https://placehold.co/800x800/D1C6EC/462C84?text=Blitztech+Solutions&font=inter-variable"
                                    loading="lazy" />
                                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                            </div>
                            <div class="swiper-slide">
                                <img class="w-100 h-100 object-fit-cover"
                                    src="https://placehold.co/800x800/D1C6EC/462C84?text=Blitztech+Solutions&font=inter-variable"
                                    loading="lazy" />
                                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                            </div>
                        </div>
                        <div class="swiper-button-next">
                            <div class="button-icon">
                                <svg width="16" height="16" viewBox="-32 0 512 512"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                    <path
                                        d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h306.7L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160Z" />
                                </svg>
                            </div>
                        </div>
                        <div class="swiper-button-prev">
                            <div class="button-icon">
                                <svg width="16" height="16" viewBox="-32 0 512 512"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                    <path
                                        d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H109.3l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160Z" />
                                </svg>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="col-lg-6 mt-6 mt-lg-0">
                    <div class="breadcrumbs text-small-normal mb-4">
                        <a class="text-decoration-none"
                            href="{{ route('frontend.page', ['page' => 'products']) }}">Products</a>
                        <span>
                            <svg width="14" height="14" viewBox="-96 0 512 512" xmlns="http://www.w3.org/2000/svg"
                                fill="currentColor">
                                <path
                                    d="M273 239c9.4 9.4 9.4 24.6 0 33.9L113 433c-9.4 9.4-24.6 9.4-33.9 0 -9.3-9.4-9.4-24.6 0-33.9l143-143L79 113c-9.4-9.4-9.4-24.6 0-33.9 9.4-9.3 24.6-9.4 33.9 0L273 239Z" />
                            </svg>
                        </span>
                        <span class="text-small-semi-bold">Product name</span>
                    </div>
                    <h3 class="mb-4">Product name</h3>
                    <h5 class="mb-4">$55 </h5>
                    <div class="text-regular-normal mb-4">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
                            elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo
                            diam libero vitae erat.</p>
                        <ul>
                            <li class="mb-2">Lorem ipsum dolor sit amet.</li>
                            <li class="mb-2">Lorem ipsum dolor sit amet.</li>
                            <li class="mb-2">Lorem ipsum dolor sit amet.</li>
                        </ul>
                    </div>
                    <div class="product-detailed-area">
                        <div>
                            <div class="text-medium-semi-bold mb-2">
                                Main features
                            </div>
                            <div class="text-regular-normal">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
                                    elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut
                                    commodo
                                    diam libero vitae erat.</p>
                            </div>
                        </div>
                        <div>
                            <div class="text-medium-semi-bold mb-2">
                                Specifications
                            </div>
                            <div class="text-regular-normal">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
                                    elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut
                                    commodo
                                    diam libero vitae erat.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('plugins-scripts')
    @vite('resources/js/plugins/swiper/swiper.js')
@endsection
@section('page-scripts')

@endsection