@extends('layouts.landing', ['title' => 'Electronics Store - Categories'])

@section('content')
    @include('layouts.partials/offcanvas')

    @include('layouts.partials/navbar', ['wishlist' => True])

    <main class="content-wrapper">

      <!-- Breadcrumb -->
      <nav class="container pt-3 my-3 my-md-4" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">Categories</li>
        </ol>
      </nav>


      <!-- Page title -->
      <h1 class="h3 container mb-sm-4">Shop categories</h1>


      <!-- Brands -->
      <section class="container mb-4">
        <div class="overflow-auto" data-simplebar data-simplebar-auto-hide="false">
          <div class="row row-cols-6 g-0" style="min-width: 960px">
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="max-width: 164px; --cz-aspect-ratio: calc(80 / 164 * 100%)">
                  <img src="/img/shop/electronics/brands/apple-light-mode.svg" class="d-none-dark" alt="Apple">
                  <img src="/img/shop/electronics/brands/apple-dark-mode.svg" class="d-none d-block-dark" alt="Apple">
                </div>
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <img src="/img/shop/electronics/brands/motorola-light-mode.svg" class="d-none-dark" alt="Motorola">
                <img src="/img/shop/electronics/brands/motorola-dark-mode.svg" class="d-none d-block-dark" alt="Motorola">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <img src="/img/shop/electronics/brands/xiaomi-light-mode.svg" class="d-none-dark" alt="Xiaomi">
                <img src="/img/shop/electronics/brands/xiaomi-dark-mode.svg" class="d-none d-block-dark" alt="Xiaomi">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <img src="/img/shop/electronics/brands/canon-light-mode.svg" class="d-none-dark" alt="Canon">
                <img src="/img/shop/electronics/brands/canon-dark-mode.svg" class="d-none d-block-dark" alt="Canon">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <img src="/img/shop/electronics/brands/samsung-light-mode.svg" class="d-none-dark" alt="Samsung">
                <img src="/img/shop/electronics/brands/samsung-dark-mode.svg" class="d-none d-block-dark" alt="Samsung">
              </a>
            </div>
            <div class="col">
              <a class="d-flex justify-content-center py-3 px-2 px-xl-3" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <img src="/img/shop/electronics/brands/sony-light-mode.svg" class="d-none-dark" alt="Sony">
                <img src="/img/shop/electronics/brands/sony-dark-mode.svg" class="d-none d-block-dark" alt="Sony">
              </a>
            </div>
          </div>
        </div>
      </section>


      <!-- Category cards -->
      <section class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 gy-5">

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/01.png" class="hover-effect-target" alt="Smartphones">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smartphones</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple iPhone</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Samsung</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xiaomi</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nokia</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Meizu</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/02.png" class="hover-effect-target" alt="Powerbank">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessories</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Accessory Kits</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Batteries &amp; Battery Packs</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cables</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Car Accessories</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Charges &amp; Power Adapters</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">FM Transmitters</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/03.png" class="hover-effect-target" alt="Tablets">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tablets</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple iPad</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Android Tablets</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Samsung</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xiaomi</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lenovo</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/04.png" class="hover-effect-target" alt="Wearable Electronics">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Wearable Electronics</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart Watches</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Fitness Trackers</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Smart Glasses</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">E-books</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Clips, Arm &amp; Wristbands</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Voice Recorders</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/05.png" class="hover-effect-target" alt="Computers">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Computers &amp; Laptops</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Asus</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Acer</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">HP (Hewlett Packard)</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Lenovo</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple MacBook</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/06.png" class="hover-effect-target" alt="Cameras">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Cameras, Photo &amp; Video</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Photo Cameras</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video Cameras</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Action Cameras</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Camcorders</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Studio Equipment</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Tripods</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Bags and Covers</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/07.png" class="hover-effect-target" alt="Headphones">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Headphones</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Apple</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Defunc</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">HyperX</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">JBL</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Logitech</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Panasonic</a>
                </li>
              </ul>
            </div>
          </div>

          <!-- Category -->
          <div class="col">
            <div class="hover-effect-scale">
              <a class="d-block bg-body-tertiary rounded p-4 mb-4" href="{{ route('second', ['shop', 'catalog-electronics']) }}">
                <div class="ratio" style="--cz-aspect-ratio: calc(184 / 258 * 100%)">
                  <img src="/img/shop/electronics/categories/08.png" class="hover-effect-target" alt="Video Games">
                </div>
              </a>
              <h2 class="h6 d-flex w-100 pb-2 mb-1">
                <a class="animate-underline animate-target d-inline text-truncate" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Video Games</a>
              </h2>
              <ul class="nav flex-column gap-2 mt-n1">
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation 5</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation Controllers</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">PlayStation Games</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming PCs</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Nintendo Switch</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Xbox Series X/S</a>
                </li>
                <li class="d-flex w-100 pt-1">
                  <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0" href="{{ route('second', ['shop', 'catalog-electronics']) }}">Gaming Peripherals</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>


      <!-- Banners -->
      <section class="container pb-4 pt-5 mb-3">
        <div class="row g-3 g-lg-4">
          <div class="col-md-7">
            <div class="position-relative d-flex flex-column flex-sm-row align-items-center h-100 rounded-5 overflow-hidden px-5 px-sm-0 pe-sm-4">
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%)"></span>
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #1b273a 0%, #1f2632 100%)"></span>
              <div class="position-relative z-1 text-center text-sm-start pt-4 pt-sm-0 ps-xl-4 mt-2 mt-sm-0 order-sm-2">
                <h2 class="h3 mb-2">iPhone 14</h2>
                <p class="fs-sm text-light-emphasis mb-sm-4">Apple iPhone 14 128GB Blue</p>
                <a class="btn btn-primary" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  From $899
                  <i class="ci-arrow-up-right fs-base ms-1 me-n1"></i>
                </a>
              </div>
              <div class="position-relative z-1 w-100 align-self-end order-sm-1" style="max-width: 416px">
                <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(320 / 416 * 100%)">
                  <img src="/img/shop/electronics/banners/iphone-1.png" alt="iPhone 14">
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="position-relative d-flex flex-column align-items-center justify-content-between h-100 rounded-5 overflow-hidden pt-3">
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark rtl-flip" style="background: linear-gradient(90deg, #fdcbf1 0%, #fdcbf1 1%, #ffecfa 100%)"></span>
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark rtl-flip" style="background: linear-gradient(90deg, #362131 0%, #322730 100%)"></span>
              <div class="position-relative z-1 text-center pt-3 mx-4">
                <i class="ci-apple text-body-emphasis fs-3 mb-3"></i>
                <p class="fs-sm text-light-emphasis mb-1">Deal of the week</p>
                <h2 class="h3 mb-4">iPad Pro M1</h2>
              </div>
              <a class="position-relative z-1 d-block w-100" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                <div class="ratio rtl-flip" style="--cz-aspect-ratio: calc(159 / 525 * 100%)">
                  <img src="/img/shop/electronics/banners/ipad.png" width="525" alt="iPad">
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>


      <!-- Trending products (Grid) -->
      <section class="container pb-5 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4">

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="position-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <span class="badge bg-danger position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">-21%</span>
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/01.png" alt="VR Glasses">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star text-body-tertiary opacity-75"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(123)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">VRB01 Virtual Reality Glasses</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$340.99 <del class="text-body-tertiary fs-sm fw-normal">$430.00</del></div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Display:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">OLED 1440x1600</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Graphics:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Adreno 540</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Sound:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">2x3.5mm jack</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Input:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">4 built-in cameras</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="position-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/02.png" alt="iPhone 14">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-half text-warning"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(142)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">Apple iPhone 14 128GB White</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$899.00</div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Display:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">6.1" XDR</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Capacity:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Chip:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">A15 Bionic</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Camera:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 + 12 MP</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Weight:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">172 grams</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="position-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/03.png" alt="Smart Watch">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(67)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">Smart Watch Series 7, White</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$429.00</div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Display:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">45mm OLED</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Chip:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">64-bit Dual-core</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Connectivity:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Wi-Fi, Bluetooth</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Power:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Lithium-ion battery</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Weight:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">37.0 grams</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="position-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <span class="badge bg-info position-absolute top-0 start-0 mt-2 ms-2 mt-lg-3 ms-lg-3">New</span>
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/04.png" alt="MacBook">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-half text-warning"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(51)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">Laptop Apple MacBook Pro 13 M2</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$1,200.00</div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Chip:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M2</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Memory:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">8 GB unified</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Storage:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">256 GB SSD</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Display:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">13.3-inch Retina</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="posittion-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/05.png" alt="iPad Air">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(12)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">Tablet Apple iPad Air M1</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$540.00</div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Display:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">10.9" LED</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Capacity:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">64 GB</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Chip:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Camera:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Weight:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">462 grams</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="position-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/06.png" alt="AirPods 2">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star text-body-tertiary opacity-75"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(78)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">Headphones Apple AirPods 2 Pro</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$224.00</div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Audio:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Sensors:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Touch control</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Chip:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple H2</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Weight:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">50.8 grams</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="posittion-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/07.png" alt="iPad Pro">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-half text-warning"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(49)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">Tablet Apple iPad Pro M1</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$739.00</div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Display:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">11" LED</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Capacity:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">128 GB</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Chip:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Apple M1</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Camera:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">12 MP Wide</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Weight:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">470 grams</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <!-- Item -->
          <div class="col">
            <div class="product-card animate-underline hover-effect-opacity bg-body rounded">
              <div class="posittion-relative">
                <div class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 mt-3 me-3">
                  <div class="d-flex flex-column gap-2">
                    <button type="button" class="btn btn-icon btn-secondary animate-pulse d-none d-lg-inline-flex" aria-label="Add to Wishlist">
                      <i class="ci-heart fs-base animate-target"></i>
                    </button>
                    <button type="button" class="btn btn-icon btn-secondary animate-rotate d-none d-lg-inline-flex" aria-label="Compare">
                      <i class="ci-refresh-cw fs-base animate-target"></i>
                    </button>
                  </div>
                </div>
                <div class="dropdown d-lg-none position-absolute top-0 end-0 z-2 mt-2 me-2">
                  <button type="button" class="btn btn-icon btn-sm btn-secondary bg-body" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
                    <i class="ci-more-vertical fs-lg"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end fs-xs p-2" style="min-width: auto">
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-heart fs-sm ms-n1 me-2"></i>
                        Add to Wishlist
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="#!">
                        <i class="ci-refresh-cw fs-sm ms-n1 me-2"></i>
                        Compare
                      </a>
                    </li>
                  </ul>
                </div>
                <a class="d-block rounded-top overflow-hidden p-3 p-sm-4" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                  <div class="ratio" style="--cz-aspect-ratio: calc(240 / 258 * 100%)">
                    <img src="/img/shop/electronics/08.png" alt="Bluetooth Headphones">
                  </div>
                </a>
              </div>
              <div class="w-100 min-w-0 px-1 pb-2 px-sm-3 pb-sm-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <div class="d-flex gap-1 fs-xs">
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-filled text-warning"></i>
                    <i class="ci-star-half text-warning"></i>
                    <i class="ci-star text-body-tertiary opacity-75"></i>
                  </div>
                  <span class="text-body-tertiary fs-xs">(136)</span>
                </div>
                <h3 class="pb-1 mb-2">
                  <a class="d-block fs-sm fw-medium text-truncate" href="{{ route('second', ['shop', 'product-general-electronics']) }}">
                    <span class="animate-target">Wireless Bluetooth Headphones Sony</span>
                  </a>
                </h3>
                <div class="d-flex align-items-center justify-content-between">
                  <div class="h5 lh-1 mb-0">$299.00</div>
                  <button type="button" class="product-card-button btn btn-icon btn-secondary animate-slide-end ms-2" aria-label="Add to Cart">
                    <i class="ci-shopping-cart fs-base animate-target"></i>
                  </button>
                </div>
              </div>
              <div class="product-card-details position-absolute top-100 start-0 w-100 bg-body rounded-bottom shadow mt-n2 p-3 pt-1">
                <span class="position-absolute top-0 start-0 w-100 bg-body mt-n2 py-2"></span>
                <ul class="list-unstyled d-flex flex-column gap-2 m-0">
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Audio:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Noise Cancellation</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Connectivity:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Bluetooth, 3.5mm jack</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Material:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">Leather, Plastic</span>
                  </li>
                  <li class="d-flex align-items-center">
                    <span class="fs-xs">Weight:</span>
                    <span class="d-block flex-grow-1 border-bottom border-dashed px-1 mt-2 mx-2"></span>
                    <span class="text-dark-emphasis fs-xs fw-medium text-end">185 grams</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- Subscription form + Vlog -->
      <section class="bg-body-tertiary py-5">
        <div class="container pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5">
          <div class="row">
            <div class="col-md-6 col-lg-5 mb-5 mb-md-0">
              <h2 class="h4 mb-2">Sign up to our newsletter</h2>
              <p class="text-body pb-2 pb-ms-3">Receive our latest updates about our products &amp; promotions</p>
              <form class="d-flex needs-validation pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5" novalidate>
                <div class="position-relative w-100 me-2">
                  <input type="email" class="form-control form-control-lg" placeholder="Your email" required>
                </div>
                <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
              </form>
              <div class="d-flex gap-3">
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Instagram">
                  <i class="ci-instagram fs-base"></i>
                </a>
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Facebook">
                  <i class="ci-facebook fs-base"></i>
                </a>
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="YouTube">
                  <i class="ci-youtube fs-base"></i>
                </a>
                <a class="btn btn-icon btn-secondary rounded-circle" href="#!" aria-label="Telegram">
                  <i class="ci-telegram fs-base"></i>
                </a>
              </div>
            </div>
            <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
              <ul class="list-unstyled d-flex flex-column gap-4 ps-md-4 ps-lg-0 mb-3">
                <li class="nav flex-nowrap align-items-center position-relative">
                  <img src="/img/home/electronics/vlog/01.jpg" class="rounded" width="140" alt="Video cover">
                  <div class="ps-3">
                    <div class="fs-xs text-body-secondary lh-sm mb-2">6:16</div>
                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 New Cool Gadgets You Must See on AsiaGolf - Cheap Budget</a>
                  </div>
                </li>
                <li class="nav flex-nowrap align-items-center position-relative">
                  <img src="/img/home/electronics/vlog/02.jpg" class="rounded" width="140" alt="Video cover">
                  <div class="ps-3">
                    <div class="fs-xs text-body-secondary lh-sm mb-2">10:20</div>
                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">5 Super Useful Gadgets on AsiaGolf You Must Have in 2023</a>
                  </div>
                </li>
                <li class="nav flex-nowrap align-items-center position-relative">
                  <img src="/img/home/electronics/vlog/03.jpg" class="rounded" width="140" alt="Video cover">
                  <div class="ps-3">
                    <div class="fs-xs text-body-secondary lh-sm mb-2">8:40</div>
                    <a class="nav-link fs-sm hover-effect-underline stretched-link p-0" href="#!">Top 5 New Amazing Gadgets on AsiaGolf You Must See</a>
                  </div>
                </li>
              </ul>
              <div class="nav ps-md-4 ps-lg-0">
                <a class="btn nav-link animate-underline text-decoration-none px-0" href="#!">
                  <span class="animate-target">View all</span>
                  <i class="ci-chevron-right fs-base ms-1"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    @include('layouts.partials/footer')

@endsection

@section('scripts')
@endsection
