@extends('layouts/contentNavbarLayout')

@section('title', 'Boxicons - Icons')

@section('page-style')
@vite('resources/assets/vendor/scss/pages/page-icons.scss')
@endsection

@section('content')
<p class="ms-3">You can check complete list of box icons from <a href="https://boxicons.com/" target="_blank">https://boxicons.com</a></p>

<!-- Icon container -->
<div class="d-flex flex-wrap" id="icons-container">
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-adobe mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">adobe</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-algolia mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">algolia</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-audible mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">audible</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-figma mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">figma</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-redbubble mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">redbubble</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-etsy mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">etsy</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-gitlab mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">gitlab</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-patreon mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">patreon</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-facebook-circle mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">facebook-circle</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-imdb mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">imdb</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-jquery mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">jquery</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-pinterest-alt mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">pinterest-alt</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-500px mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">500px</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-airbnb mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">airbnb</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-amazon mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">amazon</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-android mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">android</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-angular mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">angular</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-apple mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">apple</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-baidu mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">baidu</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-behance mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">behance</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-bing mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">bing</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-bitcoin mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">bitcoin</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-blogger mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">blogger</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body"> <i class="bx bxl-bootstrap mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">bootstrap</p>
    </div>
  </div>
</div>

<!-- Buttons -->
<div class="d-flex justify-content-center mx-auto gap-4">
  <a href="https://boxicons.com/" target="_blank" class="btn btn-primary">View All Icons</a>
  <a href="{{config('variables.documentation')}}/Icons.html" class="btn btn-primary" target="_blank">How to use icons?</a>
</div>
@endsection
