added swiper

7 files changed, 340 insertions, 197 deletions

diff --git a/homepage/utils.py b/homepage/utils.py
new file mode 100644
index 0000000..05c088b
--- /dev/null
+++ b/homepage/utils.py
@@ -0,0 +1,61 @@
+import os
+import dotenv
+import requests
+import time
+
+dotenv.load_dotenv()
+
+CONSUMET_URL = os.getenv("CONSUMET_URL")
+
+
+def get_current_season():
+    current_month = time.localtime().tm_mon
+
+    if current_month in [1, 2, 3]:
+        season = "WINTER"
+    elif current_month in [4, 5, 6]:
+        season = "SPRING"
+    elif current_month in [7, 8, 9]:
+        season = "SUMMER"
+    else:
+        season = "FALL"
+
+    return season
+
+
+def get_current_year():
+    return time.localtime().tm_year
+
+
+def get_trending_anime():
+    request_url = f"{CONSUMET_URL}/meta/anilist/trending?page=1&perPage=34"
+    response = requests.get(request_url)
+    return response.json()
+
+
+def get_popular_anime():
+    request_url = f"{CONSUMET_URL}/meta/anilist/advanced-search?type=ANIME&sort=[%22POPULARITY_DESC%22]&?page=1&perPage=34"
+    response = requests.get(request_url)
+    return response.json()
+
+
+def get_top_anime():
+    request_url = f"{CONSUMET_URL}/meta/anilist/advanced-search?type=ANIME&sort=[%22SCORE_DESC%22]&?page=1&perPage=34"
+    response = requests.get(request_url)
+    return response.json()
+
+
+def get_top_airing_anime():
+    season = get_current_season()
+    year = get_current_year()
+    request_url = f"{CONSUMET_URL}/meta/anilist/advanced-search?type=ANIME&status=RELEASING&sort=[%22POPULARITY_DESC%22]&season={season}&year={year}&?page=1&perPage=6"
+    response = requests.get(request_url)
+    return response.json()
+
+
+def get_upcoming_anime():
+    season = get_current_season()
+    year = get_current_year()
+    request_url = f"{CONSUMET_URL}/meta/anilist/advanced-search?type=ANIME&status=NOT_YET_RELEASED&sort=[%22POPULARITY_DESC%22]&season={season}&year={year}&?page=1&perPage=6"
+    response = requests.get(request_url)
+    return response.json()
diff --git a/homepage/views.py b/homepage/views.py
index cd56e37..eb782fc 100644
--- a/homepage/views.py
+++ b/homepage/views.py
@@ -1,5 +1,26 @@
 from django.shortcuts import render
+from homepage.utils import (
+    get_trending_anime,
+    get_popular_anime,
+    get_top_anime,
+    get_top_airing_anime,
+    get_upcoming_anime,
+)
 
 
 def index(request):
-    return render(request, "home/index.html")
+    trending_anime = get_trending_anime()
+    popular_anime = get_popular_anime()
+    top_anime = get_top_anime()
+    top_airing_anime = get_top_airing_anime()
+    upcoming_anime = get_upcoming_anime()
+
+    context = {
+        "trending_anime": trending_anime["results"],
+        "popular_anime": popular_anime["results"],
+        "top_anime": top_anime["results"],
+        "top_airing_anime": top_airing_anime["results"],
+        "upcoming_anime": upcoming_anime["results"],
+    }
+
+    return render(request, "home/index.html", context)
diff --git a/static/css/input.css b/static/css/input.css
index c6c1859..796cb34 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -2,6 +2,33 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
 * {
   font-family: "Tsukimi Rounded", sans-serif;
 }
+
+/* Style for the active pagination bullet */
+.swiper-pagination-bullet-active {
+  background-color: white !important; /* Make active bullet white */
+}
+
+/* Optional: Style for inactive pagination bullets */
+.swiper-pagination-bullet {
+  background-color: rgba(
+    255,
+    255,
+    255,
+    0.5
+  ); /* Light gray for inactive bullets */
+}
diff --git a/static/css/main.css b/static/css/main.css
index d0a4c9e..ff5a2db 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -566,32 +566,32 @@ video {
   position: relative;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
-.top-1\/2 {
-  top: 50%;
+.inset-0 {
+  inset: 0px;
 }
 
 .left-1\/2 {
   left: 50%;
 }
 
-.ml-4 {
-  margin-left: 1rem;
+.z-10 {
+  z-index: 10;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
-.mr-4 {
-  margin-right: 1rem;
+.ml-4 {
+  margin-left: 1rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
+.mr-2 {
+  margin-right: 0.5rem;
 }
 
 .block {
@@ -615,16 +615,28 @@ video {
   height: 1.5rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-8 {
   height: 2rem;
 }
 
-.h-6 {
-  height: 1.5rem;
+.h-96 {
+  height: 24rem;
 }
 
-.w-64 {
-  width: 16rem;
+.h-full {
+  height: 100%;
+}
+
+.max-h-24 {
+  max-height: 6rem;
+}
+
+.w-6 {
+  width: 1.5rem;
 }
 
 .w-8 {
@@ -635,20 +647,12 @@ video {
   width: 24rem;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-full {
   width: 100%;
 }
 
-.flex-grow {
-  flex-grow: 1;
-}
-
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -657,16 +661,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-1 {
-  --tw-translate-y: -0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -679,16 +673,16 @@ video {
   flex-direction: column;
 }
 
-.place-content-center {
-  place-content: center;
+.items-end {
+  align-items: flex-end;
 }
 
 .items-center {
   align-items: center;
 }
 
-.justify-center {
-  justify-content: center;
+.justify-end {
+  justify-content: flex-end;
 }
 
 .justify-between {
@@ -699,8 +693,8 @@ video {
   justify-content: space-around;
 }
 
-.justify-evenly {
-  justify-content: space-evenly;
+.gap-2 {
+  gap: 0.5rem;
 }
 
 .gap-4 {
@@ -711,26 +705,20 @@ video {
   gap: 2rem;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.space-x-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(2rem * var(--tw-space-x-reverse));
-  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+.overflow-auto {
+  overflow: auto;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
+.rounded-full {
+  border-radius: 9999px;
 }
 
 .rounded-lg {
   border-radius: 0.5rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
+.rounded-xl {
+  border-radius: 0.75rem;
 }
 
 .border {
@@ -741,11 +729,6 @@ video {
   border-bottom-width: 1px;
 }
 
-.border-stone-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(41 37 36 / var(--tw-border-opacity));
-}
-
 .border-neutral-800 {
   --tw-border-opacity: 1;
   border-color: rgb(38 38 38 / var(--tw-border-opacity));
@@ -756,47 +739,40 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-stone-900 {
+.bg-neutral-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
 
-.bg-stone-950 {
+.bg-neutral-950 {
   --tw-bg-opacity: 1;
-  background-color: rgb(12 10 9 / var(--tw-bg-opacity));
+  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
 }
 
-.bg-neutral-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+.bg-cover {
+  background-size: cover;
 }
 
-.bg-neutral-950 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
+.bg-center {
+  background-position: center;
 }
 
 .p-4 {
   padding: 1rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .py-3 {
@@ -804,15 +780,6 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -821,13 +788,14 @@ video {
   padding-right: 3rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .text-sm {
@@ -835,44 +803,27 @@ video {
   line-height: 1.25rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
 
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+.font-bold {
+  font-weight: 700;
 }
 
-.text-blue-100 {
-  --tw-text-opacity: 1;
-  color: rgb(219 234 254 / var(--tw-text-opacity));
-}
-
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
-.text-blue-500 {
+.text-purple-400 {
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+  color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
-.text-fuchsia-500 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(217 70 239 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-purple-400 {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
+.opacity-65 {
+  opacity: 0.65;
 }
 
 .outline-none {
@@ -880,93 +831,64 @@ video {
   outline-offset: 2px;
 }
 
-* {
-  font-family: "Tsukimi Rounded", sans-serif;
-}
-
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
+/* Hide scrollbar for Chrome, Safari and Opera */
 
-@media (min-width: 640px) {
-  .sm\:hidden {
-    display: none;
-  }
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
 }
 
-@media (min-width: 768px) {
-  .md\:absolute {
-    position: absolute;
-  }
-
-  .md\:left-1\/2 {
-    left: 50%;
-  }
-
-  .md\:right-0 {
-    right: 0px;
-  }
-
-  .md\:order-1 {
-    order: 1;
-  }
-
-  .md\:order-2 {
-    order: 2;
-  }
-
-  .md\:ml-4 {
-    margin-left: 1rem;
-  }
+/* Hide scrollbar for IE, Edge and Firefox */
 
-  .md\:mt-0 {
-    margin-top: 0px;
-  }
+.no-scrollbar {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
 
-  .md\:mr-4 {
-    margin-right: 1rem;
-  }
+* {
+  font-family: "Tsukimi Rounded", sans-serif;
+}
 
-  .md\:block {
-    display: block;
-  }
+/* Style for the active pagination bullet */
 
-  .md\:flex {
-    display: flex;
-  }
+.swiper-pagination-bullet-active {
+  background-color: white !important;
+  /* Make active bullet white */
+}
 
-  .md\:hidden {
-    display: none;
-  }
+/* Optional: Style for inactive pagination bullets */
 
-  .md\:w-96 {
-    width: 24rem;
-  }
+.swiper-pagination-bullet {
+  background-color: rgba(
+    255,
+    255,
+    255,
+    0.5
+  );
+  /* Light gray for inactive bullets */
+}
 
-  .md\:w-auto {
-    width: auto;
-  }
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 
-  .md\:-translate-x-1\/2 {
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+@media (min-width: 1024px) {
+  .lg\:w-1\/3 {
+    width: 33.333333%;
   }
 
-  .md\:transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  .lg\:w-2\/3 {
+    width: 66.666667%;
   }
 
-  .md\:flex-row {
+  .lg\:flex-row {
     flex-direction: row;
   }
 
-  .md\:gap-8 {
-    gap: 2rem;
-  }
-
-  .md\:gap-4 {
-    gap: 1rem;
+  .lg\:justify-end {
+    justify-content: flex-end;
   }
 }
 
diff --git a/templates/home/index.html b/templates/home/index.html
index 24c439d..00e9fe4 100644
--- a/templates/home/index.html
+++ b/templates/home/index.html
@@ -1,3 +1,115 @@
-{% extends "partials/base.html" %} {% block content %}
-<h1>Home</h1>
-{% endblock %}
+{% extends "partials/base.html" %} {% block css %}
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
+/>
+{% endblock css %} {% block content %}
+<!-- Swiper: Trending Anime -->
+<section class="swiper">
+  <div class="swiper-wrapper">
+    {% for anime in trending_anime %}
+    <div class="swiper-slide">
+      <div
+        style="background-image: url('{{ anime.cover }}')"
+        class="bg-center bg-cover h-96 relative"
+      >
+        <!-- Overlay -->
+        <div class="absolute inset-0 bg-black opacity-65"></div>
+
+        <!-- Container for text and buttons -->
+        <div
+          class="flex flex-col lg:flex-row justify-end h-full p-4 relative z-10"
+        >
+          <!-- Text -->
+          <div class="flex flex-col w-full lg:w-2/3 justify-end">
+            <h2 class="text-2xl font-bold text-white mb-2">
+              {{ anime.title.english }}
+            </h2>
+            <p
+              class="max-h-24 overflow-auto text-sm text-white mb-4 no-scrollbar"
+            >
+              {{ anime.description|safe }}
+            </p>
+          </div>
+          <!-- Buttons -->
+          <div
+            class="flex flex-row w-full lg:w-1/3 gap-2 lg:justify-end items-end"
+          >
+            <a
+              href="#future_anime_details"
+              class="bg-black bg-opacity-70 text-white text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+                />
+              </svg>
+              Details
+            </a>
+            <a
+              href="#future_anime_watch"
+              class="bg-black bg-opacity-70 text-white text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                />
+              </svg>
+              Watch
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  <div class="swiper-pagination"></div>
+</section>
+
+{% endblock content %} {% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+<script>
+  const swiper = new Swiper(".swiper", {
+    // Optional parameters
+    direction: "horizontal",
+    loop: true,
+    effect: "coverflow",
+    coverflowEffect: {
+      rotate: 30,
+      slideShadows: false,
+    },
+    autoplay: {
+      delay: 5000,
+    },
+
+    // If we need pagination
+    pagination: {
+      el: ".swiper-pagination",
+      dynamicBullets: true,
+    },
+  });
+</script>
+{% endblock scripts %}
diff --git a/templates/partials/base.html b/templates/partials/base.html
index 2519955..c2252ab 100644
--- a/templates/partials/base.html
+++ b/templates/partials/base.html
@@ -13,10 +13,12 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="{% static 'css/main.css' %}" />
+    {% block css %} {% endblock %}
     <title>Yugen</title>
   </head>
   <body class="bg-black text-white">
     <header>{% include "partials/navbar.html" %}</header>
     <main>{% block content %} {% endblock %}</main>
   </body>
+  {% block scripts %} {% endblock %}
 </html>
diff --git a/templates/partials/navbar.html b/templates/partials/navbar.html
index b810064..ae129c8 100644
--- a/templates/partials/navbar.html
+++ b/templates/partials/navbar.html
@@ -111,10 +111,9 @@
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
-            d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
+            d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
           />
         </svg>
-
         <span class="text-xs">Schedule</span>
         {% endif %}
       </a>
@@ -322,10 +321,9 @@
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
+                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
               />
             </svg>
-
             <span class="text-xs">Schedule</span>
             {% endif %}
           </a>