homepage layout done

4 files changed, 298 insertions, 11 deletions

diff --git a/homepage/utils.py b/homepage/utils.py
index 9466afe..2c238bb 100644
--- a/homepage/utils.py
+++ b/homepage/utils.py
@@ -43,9 +43,9 @@ def get_next_season_year():
     current_season = get_current_season()
     current_year = get_current_year()
     if current_season == "WINTER":
-        return current_year
-    else:
         return current_year + 1
+    else:
+        return current_year
 
 
 def get_trending_anime(page=1, per_page=34):
diff --git a/homepage/views.py b/homepage/views.py
index eb782fc..8a0812d 100644
--- a/homepage/views.py
+++ b/homepage/views.py
@@ -5,6 +5,7 @@ from homepage.utils import (
     get_top_anime,
     get_top_airing_anime,
     get_upcoming_anime,
+    get_next_season,
 )
 
 
@@ -14,6 +15,7 @@ def index(request):
     top_anime = get_top_anime()
     top_airing_anime = get_top_airing_anime()
     upcoming_anime = get_upcoming_anime()
+    next_season = get_next_season()
 
     context = {
         "trending_anime": trending_anime["results"],
@@ -21,6 +23,7 @@ def index(request):
         "top_anime": top_anime["results"],
         "top_airing_anime": top_airing_anime["results"],
         "upcoming_anime": upcoming_anime["results"],
+        "next_season": next_season
     }
 
     return render(request, "home/index.html", context)
diff --git a/static/css/main.css b/static/css/main.css
index 84d3eed..0b5b74c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -683,10 +683,26 @@ video {
   height: 1rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
+.h-56 {
+  height: 14rem;
+}
+
+.h-40 {
+  height: 10rem;
+}
+
 .max-h-24 {
   max-height: 6rem;
 }
 
+.max-h-12 {
+  max-height: 3rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -728,6 +744,28 @@ video {
   width: 1rem;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.max-w-max {
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+
 .-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));
@@ -812,6 +850,32 @@ video {
   overflow: auto;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-clip {
+  overflow: clip;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.whitespace-normal {
+  white-space: normal;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -828,6 +892,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1047,10 +1115,19 @@ video {
   line-height: 1rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .text-purple-400 {
   --tw-text-opacity: 1;
   color: rgb(192 132 252 / var(--tw-text-opacity));
@@ -1130,6 +1207,21 @@ video {
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1177,6 +1269,10 @@ main {
   /* Light gray for inactive bullets */
 }
 
+.hover\:bg-opacity-20:hover {
+  --tw-bg-opacity: 0.2;
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/templates/home/index.html b/templates/home/index.html
index d3c878b..b37f887 100644
--- a/templates/home/index.html
+++ b/templates/home/index.html
@@ -95,22 +95,22 @@
 
 <!-- Split: Anime List: Sidebar -->
 <section class="flex flex-col lg:flex-row mt-4 gap-4">
-  <section class="w-full lg:w-3/4 flex flex-col items-center">
+  <section class="w-full lg:w-3/4 flex flex-col items-center p-2">
     <!-- Top Bar: Trending, Popular, Top Rated: Purple Text: Active Tab -->
     <section class="inline-flex w-max flex-row gap-4 rounded-full bg-white bg-opacity-10 mx-auto">
-      <button class="flex flex-row items-center gap-2 text-sm font-bold py-2 px-4 rounded-full bg-purple-600 category-switch active-category" data-target="trending">
+      <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full bg-purple-600 category-switch active-category" data-target="trending">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
           <path fill-rule="evenodd" d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z" clip-rule="evenodd" />
         </svg>
         <span>Trending</span>
       </button>
-      <button class="flex flex-row items-center gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="popular">
+      <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="popular">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
           <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
         </svg>        
         <span>Popular</span>
       </button>      
-      <button class="flex flex-row items-center gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="top_rated">
+      <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="top_rated">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
           <path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z" />
         </svg>
@@ -121,8 +121,30 @@
     <section id="trending" class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp">
       {% for anime in trending_anime %}
       {% if anime.title.english %}
-        <a href="#" class="w-1/2 lg:w-1/6 px-4 pb-4 text-gray-500 hover:text-white flex flex-col gap-2">
+        <a href="#" class="w-1/2 lg:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
           <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg h-72 w-auto object-cover"/>
+          <div class="inline-flex gap-2 flex-wrap">
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
+                <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+                <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+                <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+              </svg>
+              {{ anime.type }}
+            </span>
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+                <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+              </svg>              
+              {{ anime.releaseDate }}
+            </span>
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+              </svg>
+              {{ anime.rating }}
+            </span>
+          </div>
           <span class="text-sm font-bold flex gap-1 flex-row items-start">
             {% if anime.status == "Ongoing" %}
               <span class="text-green-500 pt-1">
@@ -155,8 +177,30 @@
     <section id="popular" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp">
       {% for anime in popular_anime %}
       {% if anime.title.english %}
-        <a href="#" class="w-1/2 lg:w-1/6 px-4 pb-4 text-gray-500 hover:text-white flex flex-col gap-2">
+        <a href="#" class="w-1/2 lg:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
           <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg h-72 w-auto object-cover"/>
+          <div class="inline-flex gap-2 flex-wrap">
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
+                <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+                <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+                <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+              </svg>
+              {{ anime.type }}
+            </span>
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+                <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+              </svg>              
+              {{ anime.releaseDate }}
+            </span>
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+              </svg>
+              {{ anime.rating }}
+            </span>
+          </div>
           <span class="text-sm font-bold flex gap-1 flex-row items-start">
             {% if anime.status == "Ongoing" %}
               <span class="text-green-500 pt-1">
@@ -189,8 +233,30 @@
     <section id="top_rated" class="flex-wrap justify-center mt-4 hidden animate__animated animate__slideInUp">
       {% for anime in top_anime %}
       {% if anime.title.english %}
-        <a href="#" class="w-1/2 lg:w-1/6 px-4 pb-4 text-gray-500 hover:text-white flex flex-col gap-2">
+        <a href="#" class="w-1/2 lg:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
           <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg h-72 w-auto object-cover"/>
+          <div class="inline-flex gap-2 flex-wrap">
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
+                <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+                <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+                <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+              </svg>
+              {{ anime.type }}
+            </span>
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+                <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+              </svg>              
+              {{ anime.releaseDate }}
+            </span>
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+              </svg>
+              {{ anime.rating }}
+            </span>
+          </div>
           <span class="text-sm font-bold flex gap-1 flex-row items-start">
             {% if anime.status == "Ongoing" %}
               <span class="text-green-500 pt-1">
@@ -220,8 +286,130 @@
       {% endfor %}
     </section>
   </section>
-  <section class="w-full lg:w-1/4">
-    <!-- Other content -->
+  <section class="w-full lg:w-1/4 px-4 py-2">
+    <h2 class="text-2xl font-bold text-white uppercase">Top Airing</h2>
+    <!-- Wide Cards: Upcoming -->
+    <section class="flex flex-col gap-4 mt-4 animate__animated animate__slideInUp">
+      {% for anime in top_airing_anime %}
+      {% if anime.title.english %}
+        <a href="#" class="flex flex-row gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-opacity-20">
+          <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg h-40 w-32 object-cover"/>
+          <div class="flex flex-col gap-2">
+            <span class="text-sm font-bold flex gap-1 flex-row items-start">
+              {% if anime.status == "Ongoing" %}
+                <span class="text-green-500 pt-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+                    <circle cx="12" cy="12" r="12" />
+                  </svg>                
+                </span>
+              {% elif anime.status == "Not yet aired" %}
+                <span class="text-yellow-500 pt-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+                    <circle cx="12" cy="12" r="12" />
+                  </svg>
+                </span>
+              {% else %}
+                <span class="text-blue-500 pt-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+                    <circle cx="12" cy="12" r="12" />
+                  </svg>
+                </span>
+              {% endif %}
+              <span>
+                {{ anime.title.english }}
+              </span>
+            </span>
+            <div class="text-sm text-gray-400 w-full overflow-hidden text-ellipsis max-h-24 max-w-max mb-2">
+              {{ anime.description|safe }}
+            </div>
+            <div class="inline-flex gap-2">
+              <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
+                  <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+                  <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+                  <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+                </svg>
+                {{ anime.type }}
+              </span>
+              <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+                  <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+                </svg>              
+                {{ anime.releaseDate }}
+              </span>
+              <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+                </svg>
+                {{ anime.rating }}
+              </span>
+              <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/>
+                </svg>
+                {{ anime.currentEpisode }} / {{ anime.totalEpisodes }}
+              </span>
+            </div>
+          </div>
+        </a>
+      {% endif %}
+      {% endfor %}
+  </section>
+  <h2 class="text-2xl font-bold text-white uppercase mt-4">Upcoming {{ next_season }}</h2>
+  <!-- Wide Cards: Upcoming -->
+  <section class="flex flex-col gap-4 mt-4 animate__animated animate__slideInUp">
+    {% for anime in upcoming_anime %}
+    {% if anime.title.english %}
+      <a href="#" class="flex flex-row gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-opacity-20">
+        <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg h-40 w-32 object-cover"/>
+        <div class="flex flex-col gap-2">
+          <span class="text-sm font-bold flex gap-1 flex-row items-start">
+            {% if anime.status == "Ongoing" %}
+              <span class="text-green-500 pt-1">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+                  <circle cx="12" cy="12" r="12" />
+                </svg>                
+              </span>
+            {% elif anime.status == "Not yet aired" %}
+              <span class="text-yellow-500 pt-1">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+                  <circle cx="12" cy="12" r="12" />
+                </svg>
+              </span>
+            {% else %}
+              <span class="text-blue-500 pt-1">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
+                  <circle cx="12" cy="12" r="12" />
+                </svg>
+              </span>
+            {% endif %}
+            <span>
+              {{ anime.title.english }}
+            </span>
+          </span>
+          <div class="text-sm text-gray-400 w-full overflow-hidden text-ellipsis max-h-24 max-w-max mb-2">
+            {{ anime.description|safe }}
+          </div>
+          <div class="inline-flex gap-2">
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
+                <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+                <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+                <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+              </svg>
+              {{ anime.type }}
+            </span>
+            <span class="text-xs font-bold bg-white bg-opacity-10 text-white px-2 py-1 rounded flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+                <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+              </svg>              
+              {{ anime.releaseDate }}
+            </span>
+          </div>
+        </div>
+      </a>
+    {% endif %}
+    {% endfor %}
   </section>
 </section>