@include('layouts.header')

<!-- Slider -->
<section class="section-slide">
    <div class="wrap-slick1">
        <div class="slick1">
            <div class="item-slick1" style="background-image: url(images/odell/banner-8.webp)">
                <div class="container h-full">
                    <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
                            <span class="ltext-101 cl2 respon10 uppercase"> HOODIES </span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">
                            <h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1 uppercase" >
                                <span style="color: black; background-color: #c5cfda73">NEW SEASON</span>
                            </h2>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
                            <a href="{{ route('products') }}"
                                class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 uppercase">
                                SHOP NOW
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-slick1" style="background-image: url(images/odell/BANNER0012.webp)" loading="lazy">
                <div class="container h-full">
                    <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="rollIn" data-delay="0">
                            <span class="ltext-101 cl2 respon2 uppercase"> ORGANIC COTTON </span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="lightSpeedIn" data-delay="800">
                            <h5 class="ltext-201 cl2 p-t-19 p-b-43 respon1 uppercase">
                                HOODIES<span style="color: black; background-color: #c5cfda73"> & SWEATPANTS</span>
                            </h5>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="slideInUp" data-delay="1600">
                            <a href="{{ route('products') }}"
                                class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 uppercase">
                                SHOP NOW
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-slick1" style="background-image: url(images/odell/BANNER0015.webp)" loading="lazy">
                <div class="container h-full">
                    <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="rotateInDownLeft" data-delay="0">
                            <span class="ltext-101 cl2 respon2 uppercase"> COLLECTION 2024 </span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="rotateInUpRight" data-delay="800">
                            <h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1 uppercase">
                                <span style="color: black; background-color: #c5cfda73">NEW ARRIVALS</span>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="item-slick1" style="background-image: url(images/odell/hhhhh.jpeg)" loading="lazy">
                <div class="container h-full">
                    <div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="rotateInDownLeft" data-delay="0">
                            <span class="ltext-101 cl2 respon2 uppercase"> COLLECTION 2024 </span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="rotateInUpRight" data-delay="800">
                            <h2 class="ltext-201 cl2 p-t-19 p-b-43 respon1 uppercase">
                                <span style="color: black; background-color: #c5cfda73">NEW ARRIVALS</span>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Banner -->
<div class="sec-banner bg0">
    <div class="flex-w flex-c-m">
        <div class="size-202 m-lr-auto respon4">
            <!-- Block1 -->
            <div class="block1 wrap-pic-w">
                <img data-src="{{asset('images/odell/gray_banner-003.webp')}}" alt="IMG-BANNER" class="lozad" loading="lazy" />

                <a href="{{ route('products') }}"
                    class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                    <div class="block1-txt-child1 flex-col-l">
                        <span class="block1-name ltext-102 trans-04 p-b-8 uppercase">
                        <span>HOODIES</span>
                    </span>

                        <span class="block1-info stext-102 trans-04 uppercase">
                            ORGANIC COTTON HOODIES
                        </span>
                    </div>

                    <div class="block1-txt-child2 p-b-4 trans-05">
                        <div class="block1-link stext-101 cl0 trans-09 uppercase">SHOP NOW</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="size-202 m-lr-auto respon4">
            <!-- Block1 -->
            <div class="block1 wrap-pic-w">
                <img data-src="{{asset('images/odell/black_banner001.jpg')}}" alt="IMG-BANNER" class="lozad" loading="lazy" />

                <a href="{{ route('products') }}"
                    class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                    <div class="block1-txt-child1 flex-col-l">
                        <span class="block1-name ltext-102 trans-04 p-b-8 uppercase">
                            <span class="sweatpants-text uppercase">SWEATPANTS</span>
                        </span>

                        <span class="block1-info stext-102 trans-04 uppercase" style="font-size: 12px;">
                            ORGANIC COTTON SWEATPANTS
                        </span>
                    </div>

                    <div class="block1-txt-child2 p-b-4 trans-05">
                        <div class="block1-link stext-101 cl0 trans-09 uppercase">SHOP NOW</div>
                    </div>
                </a>
            </div>
        </div>

        <div class="size-202 m-lr-auto respon4">
            <!-- Block1 -->
            <div class="block1 wrap-pic-w">
                <img data-src="{{asset('images/odell/brown_banner-001.webp')}}" alt="IMG-BANNER" class="lozad" loading="lazy"/>

                <a href="{{ route('products') }}"
                    class="block1-txt ab-t-l s-full flex-col-l-sb p-lr-38 p-tb-34 trans-03 respon3">
                    <div class="block1-txt-child1 flex-col-l">
                        <span class="block1-name ltext-102 trans-04 p-b-8 uppercase">
                            NEW
                            <span style="border: #c5cfda89 solid 1px; background-color: #f5f6f725;" class="uppercase">ARRIVALS</span>
                        </span>

                        <span class="block1-info stext-102 trans-04 uppercase"> NEW TREND </span>
                    </div>

                    <div class="block1-txt-child2 p-b-4 trans-05">
                        <div class="block1-link stext-101 cl0 trans-09 uppercase">SHOP NOW</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

@include('product-section')
@include('layouts.footer')