nyan

<!doctype html>
<html lang="id-ID">

<head>
    @vite(['resources/css/cgm.min.css', 'resources/css/section-usp.min.css'])
    @include('components.head')
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/bootstrap.min.css') }}">
</head>

<link rel="stylesheet" href="{{ asset('assets/css/plugins/swiper-bundle.min.css') }}">
    
    
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/main.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/flaticon.css') }}">

<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">

<link rel="stylesheet" href="{{ asset('assets/css/inline-style.css') }}">

<main class="main__content_wrapper">
        
        <section class="hero__slider--section">
            <div class="hero__slider--inner hero__slider--activation--atap swiper">
                <div class="hero__slider--wrapper swiper-wrapper">
                    @foreach ($banner as $item)
                        <div class="swiper-slide">
                            <div class="hero__slider--items hero-atap-slide">
                                <a href="#form-section" class="image-banner-wrapper">
                                    <img class="hero__slider--bg {{ $loop->first ? '' : 'lazyload' }}"
                                        src="{{ $loop->first ? asset('assets/img/banner/' . getLazyLoadBannerImage($item)) . '.webp' : '' }}"
                                        data-src="{{ asset('assets/img/banner/' . getLazyLoadBannerImage($item)) }}.webp"
                                        alt="slider banner">
                                </a>

@if ($loop->first)
                                    <a href="#form-section" class="hero-atap-cta">
                                        Konsultasi Sekarang!
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-prev hero-atap-nav"></div>
                <div class="swiper-button-next hero-atap-nav"></div>
            </div>
        </section>

@include('components.detail-company')

@include('components.review-product')

<section>
            <div class="product__container">
                <div class="product__text-lavatory-container">
                    <img src="{{ asset('assets/img/logo/title-lavatory.png') }}" width="700" alt="title">
                    <p class="product__text-lavatory-desc">Kami menyediakan wastafel premium berkualitas dengan desain
                        elegan yang kuat dan tidak mudah retak. Lavatory by GNET menggunakan teknologi glasir pada
                        lapisan keramik sehingga lebih halus dan mudah dibersihkan.</p>
                </div>

</div>
        </section>

<section>
            <div class="general__container">
                <div class="general__main-text">
                    <h1 class="general__main-title text-brand text-center mt-6">Keunggulan Produk</h1>
                    <img class="advantage__text-image" src="{{ asset('assets/img/logo/title-lavatory.png') }}"
                        width="600" alt="title" class="mt-6">
                    <div class="advantage__item-grid">
                        <div class="advantage__item-card align-content-center text-sm-center">
                            <img class="" src="{{ asset('assets/img/other/advantage-door-1.webp') }}" alt="">
                            <h3 class="mt-4">Desain Elegan</h3>
                            <div class="mt-3">Desain elegan yang sangat cocok untuk berbagai konsep desain interior.
                            </div>
                        </div>
                        <div class="advantage__item-card align-content-center text-sm-center">
                            <img class="" src="{{ asset('assets/img/other/advantage-door-2.webp') }}" alt="">
                            <h3 class="mt-4">Tidak Mudah Rusak</h3>
                            <div class="mt-3">Terbuat dari material berkualitas tinggi sehingga tidak mudah retak.</div>
                        </div>
                        <div class="advantage__itlineem-card align-content-center text-sm-center">
                            <img class="" src="{{ asset('assets/img/other/advantage-door-3.webp') }}" alt="">
                            <h3 class="mt-4">Halus & Mudah Dibersihkan</h3>
                            <div class="mt-3">Memiliki tekstur halus sehingga lebih mudah dibersihkan.</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<div class="swiper specSwiper">
            <div class="swiper-wrapper">
                @foreach ($variantList as $variants)
                    <div class="swiper-slide">
                        <div
                            class="{{ str_contains($variants['color'], 'White') ? 'variant__spec-container-lavatory-black' : 'variant__spec-container-lavatory'}}">
                            <div class="variant__detail-container-lavatory">
                                <div class="variant__title">
                                    <h1
                                        class="general__main-title {{ str_contains($variants['color'], 'White') ? 'text-white' : 'text-brand'}}">
                                        Spesifikasi Produk</h1>
                                    <img class="advantage__text-image mt-4"
                                        src="{{ str_contains($variants['color'], 'White') ? asset('assets/img/logo/title-lavatory-white.png') : asset('assets/img/logo/title-lavatory.png') }}"
                                        width="550" alt="title">
                                </div>
                                <div
                                    class="variant__text-code {{ str_contains($variants['color'], 'White') ? 'text-white' : 'text-brand'}}">
                                    <div>{{ $variants['code'] }}</div>
                                </div>
                                <div class="variant__types-item">
                                    <img src="{{ asset('assets/img/products/lavatory-variants/' . $variants['tipe-1']) }}"
                                        @class([
                                            'variant-img',
                                            'variant-active' => str_contains($variants['tipe-1'], 'selected')
                                        ]) data-index="0">
                                    <img src="{{ asset('assets/img/products/lavatory-variants/' . $variants['tipe-2']) }}"
                                        @class([
                                            'variant-img',
                                            'variant-active' => str_contains($variants['tipe-2'], 'selected')
                                        ]) data-index="1">
                                    <img src="{{ asset('assets/img/products/lavatory-variants/' . $variants['tipe-3']) }}"
                                        @class([
                                            'variant-img',
                                            'variant-active' => str_contains($variants['tipe-3'], 'selected')
                                        ]) data-index="2">
                                    <img src="{{ asset('assets/img/products/lavatory-variants/' . $variants['tipe-4']) }}"
                                        @class([
                                            'variant-img',
                                            'variant-active' => str_contains($variants['tipe-4'], 'selected')
                                        ]) data-index="3">
                                    <img src="{{ asset('assets/img/products/lavatory-variants/' . $variants['tipe-5']) }}"
                                        @class([
                                            'variant-img',
                                            'variant-active' => str_contains($variants['tipe-5'], 'selected')
                                        ]) data-index="4">
                                </div>
                            </div>
                            <img src="{{ asset('assets/img/products/lavatory-variants/' . $variants['image']) }}"
                                width="500">
                        </div>
                        <div class="spec__scale-wrapper">
                            <div class="spec__container-lavatory">
                                <div class="spec__item-grid-lavatory">
                                    <div class="spec__item-card-lavatory">
                                        <p class="text-brand spec__title-lavatory">Tipe</p>
                                        <p>{{ $variants['code'] }}</p>
                                    </div>
                                    <div class="line-vertical-lavatory"></div>
                                    <div class="spec__item-card-lavatory">
                                        <p class="text-brand spec__title-lavatory">Warna</p>
                                        <p>{{ $variants['color'] }}</p>
                                    </div>
                                    <div class="line-vertical-lavatory"></div>
                                    <div class="spec__item-card-lavatory">
                                        <p class="text-brand spec__title-lavatory">Instalasi</p>
                                        <p>Above Counter</p>
                                        @if ($variants['code'] == '1274')
                                            <p>Wail-Hung</p>
                                        @endif
                                    </div>
                                    <div class="line-vertical-lavatory"></div>
                                    <div class="spec__item-card-lavatory">
                                        <p class="text-brand spec__title-lavatory">Diameter Panjang</p>
                                        <p>{{ $variants['length'] }}</p>
                                    </div>
                                    <div class="line-vertical-lavatory"></div>
                                    <div class="spec__item-card-lavatory">
                                        <p class="text-brand spec__title-lavatory">Diameter Lebar</p>
                                        <p>{{ $variants['width'] }}</p>
                                    </div>
                                    <div class="line-vertical-lavatory"></div>
                                    <div class="spec__item-card-lavatory">
                                        <p class="text-brand spec__title-lavatory">Diameter Tinggi</p>
                                        <p>{{ $variants['heigth'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

@include('components.contact-leads', ['product' => $product, 'chooseVariant' => $chooseVariant, 'variantInput' => $variantInput])

<section>
                <div class="faq-wrapper">
                    <h2 class="faq-title text-brand">Frequently Asked Question (FAQ)</h2>

@foreach ($faqList as $faq)
                        <details class="faq-item">
                            <summary class="faq-question">
                                <p class="faq-content text-white">{{ $faq['question'] }}</p>
                            </summary>
                            <div class="faq-answer">
                                <p class="text-black">{{ $faq['answer'] }}</p>
                            </div>
                        </details>
                    @endforeach

</div>
            </section>

</main>

<button aria-label="scroll top btn" id="scroll__top">
        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
                d="M112 244l144-144 144 144M256 120v292" />
        </svg>
    </button>

{{-- @include('components.floating-whatsapp') --}}

<script src="assets/js/vendor/bootstrap.min.js" defer="defer"></script>
    <script src="assets/js/plugins/swiper-bundle.min.js" defer="defer"></script>
    <script src="assets/js/plugins/glightbox.min.js" defer="defer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"
        integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script nonce="{{ $nonce }}" src="https://cdn.jsdelivr.net/countupjs/1.8.5/countUp.min.js"></script>
    <script nonce="{{ $nonce }}" src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script src="assets/js/script.min.js" defer="defer"></script>
    <script src="assets/js/swiper-products-homepage.min.js" defer="defer"></script>
    <link href="https://fonts.googleapis.com">
    <link href="https://fonts.gstatic.com" crossorigin>
</body>

</html>