@extends('layouts.master')

@section('hero')
<section class="hero-banner-style bg-5 bg-image top-section-gap hero-banner-style-4">
    <div class="hero-banner_inner">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-xl-7 col-lg-6 col-md-12">
            <div class="banner-content">
              <h1 class="mb-5 title" data-aos="fade-up">Producing Album Art<br>
                <span>Live Since 2010</span>
              </h1>
              <p data-aos="fade-up" data-aos-delay="100">A community collaboration producing the best 
                <br> album art in the universe!
              </p>
              <div class="group-btn mt-8" data-aos="fade-up" data-aos-delay="200">
                <a href="explore-filter-sidebar.html" class="btn btn-gradient"><span><i class="ri-rocket-line"></i>
                    Explore</span></a>
                <a href="create.html" class="btn btn-outline"><span><i class="ri-edit-line"></i> Create</span></a>
              </div>
              <div class="counter-wrapper counter-wrapper-style-two">
                <div class="counter-style-1" data-aos="fade-up" data-aos-delay="250">
                  <div class="d-flex-center">
                    <div class="number counter-item-active">28</div>
                    <div class="count-kilo">K <span>+</span></div>
                  </div>
                  <div class="counter-title">Artworks</div>
                </div>
                <!-- End .single-counter -->

                <div class="counter-style-1" data-aos="fade-up" data-aos-delay="300">
                  <div class="d-flex-center">
                    <div class="number counter-item-active">2.9</div>
                    <div class="count-kilo">K <span>+</span></div>
                  </div>
                  <div class="counter-title">Artists</div>
                </div>
                <!-- End .single-counter -->

                <div class="counter-style-1" data-aos="fade-up" data-aos-delay="350">
                  <div class="d-flex-center">
                    <div class="number counter-item-active">1.6</div>
                    <div class="count-kilo">K <span>+</span></div>
                  </div>
                  <div class="counter-title">Episodes</div>
                </div>
                <!-- End .single-counter -->
              </div>
              <!-- End .counter-wrapper -->
            </div>
            <!-- End banner-content -->

          </div>
          <!-- End .col -->
          <div class="col-xl-5 col-lg-6 col-md-12">
            <div class="slider slider-activation-banner-4 slick-gutter-15 slick-pagination-50">

              <div class="explore-style-one">
                <div class="thumb">
                  <a href="product-details.html"> <img src="https://noagendaartgenerator.com/assets/artwork/episode/1528/PDzxZp7SxR.png"
                      alt="nft live auction thumbnail"></a>
                  <button class="reaction-btn"><i class="ri-heart-fill"></i><span>49</span></button>
                  <!-- End .reaction-count -->
                </div>
                <!-- End .thumb -->
                <div class="content">
                  <div class="header d-flex-between pt-4 pb-3">
                    <h3 class="title"><a href="product-details.html">No Agenda (1528)<br>"HABIDAT"</a></h3>
                    <div class="more-dropdown "><i class="ri-more-fill" data-bs-toggle="dropdown"></i>
                      <ul class="dropdown-menu dropdown-menu-dark">
                        <li><a class="dropdown-item" href="#">New bid</a></li>
                        <li>
                          <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Refresh Metadata</a></li>
                        <li><a class="dropdown-item" href="#">Share</a></li>
                        <li><a class="dropdown-item" href="#">Report</a></li>

                      </ul>
                    </div>
                  </div>
                  <!-- .header -->
                  <div class="product-owner py-4 d-flex-between">
                    <span class="bid-owner">Artwork By<br><strong><a
                          href="author-profile.html">KorrectDaRekard</a></strong></span>
                    <span class="profile-share d-flex-center"><a href="author-profile.html" class="avatar" data-bs-toggle="tooltip" data-bs-placement="top"
                        title="Banuri Bari"><img src="{{ Vite::asset('resources/img/explore/avatar/1.png') }}" alt="Nft_Profile"></a></span>
                  </div>
                  <!-- End .product-owner -->
                </div>
                <!-- End .content -->
              </div>
              <!-- End explore-style-one -->

              <div class="explore-style-one">
                <div class="thumb">
                  <a href="product-details.html"> <img src="https://noagendaartgenerator.com/assets/artwork/episode/1527/obxPmNDIzeE.png"
                      alt="nft live auction thumbnail"></a>
                  <button class="reaction-btn"><i class="ri-heart-fill"></i><span>32</span></button>
                  <!-- End .reaction-count -->
                </div>
                <!-- End .thumb -->
                <div class="content">
                  <div class="header d-flex-between pt-4 pb-3">
                    <h3 class="title"><a href="product-details.html">No Agenda (1527)<br>"Grip & Grin"</a></h3>
                    <div class="more-dropdown "><i class="ri-more-fill" data-bs-toggle="dropdown"></i>
                      <ul class="dropdown-menu dropdown-menu-dark">
                        <li><a class="dropdown-item" href="#">New bid</a></li>
                        <li>
                          <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Refresh Metadata</a></li>
                        <li><a class="dropdown-item" href="#">Share</a></li>
                        <li><a class="dropdown-item" href="#">Report</a></li>

                      </ul>
                    </div>
                  </div>
                  <!-- .header -->
                  <div class="product-owner py-4 d-flex-between">
                    <span class="bid-owner">Artwork By<br><strong><a
                          href="author-profile.html">Capitalist Agenda</a></strong></span>
                    <span class="profile-share d-flex-center"><a href="author-profile.html" class="avatar" data-bs-toggle="tooltip" data-bs-placement="top"
                        title="Capitalist Agenda"><img src="{{ Vite::asset('resources/img/avatar/capitalistagenda.png') }}" style="width:100%;height:auto;" alt="Nft_Profile"></a></span>
                  </div>
                  <!-- End .product-owner -->
                </div>
                <!-- End .content -->
              </div>
              <!-- End explore-style-one -->

              <div class="explore-style-one">
                <div class="thumb">
                  <a href="product-details.html"> <img src="https://noagendaartgenerator.com/assets/artwork/episode/1528/PDzxZp7SxR.png"
                      alt="nft live auction thumbnail"></a>
                  <button class="reaction-btn"><i class="ri-heart-fill"></i><span>49</span></button>
                  <!-- End .reaction-count -->
                </div>
                <!-- End .thumb -->
                <div class="content">
                  <div class="header d-flex-between pt-4 pb-3">
                    <h3 class="title"><a href="product-details.html">No Agenda<br>"HABIDAT"</a></h3>
                    <div class="more-dropdown "><i class="ri-more-fill" data-bs-toggle="dropdown"></i>
                      <ul class="dropdown-menu dropdown-menu-dark">
                        <li><a class="dropdown-item" href="#">New bid</a></li>
                        <li>
                          <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Refresh Metadata</a></li>
                        <li><a class="dropdown-item" href="#">Share</a></li>
                        <li><a class="dropdown-item" href="#">Report</a></li>

                      </ul>
                    </div>
                  </div>
                  <!-- .header -->
                  <div class="product-owner py-4 d-flex-between">
                    <span class="bid-owner">Artwork By<br><strong><a
                          href="author-profile.html">KorrectDaRekard</a></strong></span>
                    <span class="profile-share d-flex-center"><a href="author-profile.html" class="avatar" data-bs-toggle="tooltip" data-bs-placement="top"
                        title="Banuri Bari"><img src="{{ Vite::asset('resources/img/explore/avatar/1.png') }}" alt="Nft_Profile"></a></span>
                  </div>
                  <!-- End .product-owner -->
                </div>
                <!-- End .content -->
              </div>
              <!-- End explore-style-one -->

            </div>
          </div>
          <!-- End .col -->
        </div>
      </div>
      <!-- End .container -->
    </div>
  </section>
@endsection