diff --git a/Controllers/SpjDriverUpstController/SubmitController.cs b/Controllers/SpjDriverUpstController/SubmitController.cs
index 9e700ab..a6ee9a9 100644
--- a/Controllers/SpjDriverUpstController/SubmitController.cs
+++ b/Controllers/SpjDriverUpstController/SubmitController.cs
@@ -31,7 +31,13 @@ namespace eSPJ.Controllers.SpjDriverUpstController
         [HttpGet("struk-rdf")]
         public IActionResult StrukRDF()
         {
-            return View("~/Views/Admin/Transport/SpjDriverUpst/Submit/Struk.cshtml");
+            return View("~/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_RDF.cshtml");
+        }
+
+        [HttpGet("struk-bg")]
+        public IActionResult StrukBG()
+        {
+            return View("~/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_BG.cshtml");
         }
 
         [HttpGet("struk-index")]
diff --git a/Views/Admin/Transport/SpjDriverUpst/Home/Index.cshtml b/Views/Admin/Transport/SpjDriverUpst/Home/Index.cshtml
index 2829d72..55f4a04 100644
--- a/Views/Admin/Transport/SpjDriverUpst/Home/Index.cshtml
+++ b/Views/Admin/Transport/SpjDriverUpst/Home/Index.cshtml
@@ -61,7 +61,7 @@
 
         <div class="relative">
 
-            <div id="spjCardPanel" class="bg-upst rounded-[32px] overflow-hidden shadow-xl flex flex-col h-[340px]">
+            <div id="spjCardPanel" class="bg-upst rounded-[32px] overflow-y-auto shadow-xl flex flex-col h-[350px]">
                 
                 <div class="px-6 py-5 bg-black/10 border-b border-white/5 flex justify-between items-center shrink-0">
                     <div>
@@ -73,15 +73,15 @@
                     </div>
                 </div>
 
-                <div class="p-6 flex-1 flex flex-col justify-center relative overflow-hidden">
+                <div class="p-6 flex-1 flex flex-col justify-center relative overflow-auto">
                     <img src="@Url.Content("~/driver/tree.svg")" class="absolute -right-6 -bottom-6 w-40 h-40 opacity-10 pointer-events-none" alt="">
                     
                     <div class="z-10 flex flex-row justify-between items-center w-full mt-2">
                         <div class="flex-1 pr-4">
                             <p class="text-[10px] text-green-100 font-bold uppercase tracking-wider mb-2">Tujuan Pembuangan</p>
-                            <h2 class="text-3xl font-black text-white leading-tight mb-2">JRC Rorotan</h2>
+                            <h2 class="text-3xl font-black text-white leading-tight mb-2">JGC</h2>
                             <span class="bg-white/10 text-green-50 text-xs font-bold px-3 py-1 rounded-lg border border-white/10 inline-block">
-                                JRC 005
+                                JGC 005
                             </span>
                         </div>
 
@@ -89,11 +89,33 @@
                             <img src="@Url.Content("~/driver/images/qr.png")" alt="QR" class="w-10 h-10 object-contain group-hover:scale-110 transition-transform">
                         </button>
                     </div>
+
+                    <div class="mt-6 space-y-3">
+                        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 border border-white/20">
+                            <div class="flex items-start gap-3">
+                                <div class="flex-1">
+                                    <p class="text-[10px] font-black text-yellow-200 uppercase tracking-wider mb-2">Catatan</p>
+                                    <div class="flex flex-wrap gap-2">
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS A</span>
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS B</span>
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS C</span>
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS A</span>
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS A</span>
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS B</span>
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS C</span>
+                                        <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">TPS A</span>
+                                       
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
             </div>
 
 
-            <div id="mapsCardPanel" class="bg-upst rounded-[32px] overflow-hidden shadow-xl hidden flex-col h-[340px]">
+            <div id="mapsCardPanel" class="bg-upst rounded-[32px] overflow-hidden shadow-xl hidden flex-col h-[350px]">
                 
                 <div class="px-6 py-5 bg-black/10 flex justify-between items-center shrink-0 z-20">
                     <div>
diff --git a/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml b/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml
index 07adaef..684c7a2 100644
--- a/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml
+++ b/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml
@@ -41,7 +41,7 @@
                 </span> *@
 
                 <!-- ini untuk yang struk -->   
-                <a href="@Url.Action("Struk", "Submit")" id="strukBtn" class="hover:cursor-pointer w-14 h-14 bg-green-700 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-green-200">
+                <a href="@Url.Action("StrukIndex", "Submit")" id="strukBtn" class="hover:cursor-pointer w-14 h-14 bg-green-700 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-green-200">
                     <i class="w-6 h-6 text-white" data-lucide="file-text"></i>
                 </a>
                 <span class="bg-green-700 px-2 py-1 rounded-full text-xs text-white font-medium mt-2 text-center">
diff --git a/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_BG.cshtml b/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_BG.cshtml
new file mode 100644
index 0000000..7547d1c
--- /dev/null
+++ b/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_BG.cshtml
@@ -0,0 +1,116 @@
+@{
+    Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
+    ViewData["Title"] = "Submit Struk";
+}
+
+@section Styles {
+    <link rel="stylesheet" href="@Url.Content("~/driver/css/scanner.css")" asp-append-version="true" />
+}
+
+<div class="max-w-sm mx-auto container bg-white min-h-screen">
+    <div class="bg-upst text-white px-6 pt-10 pb-16 rounded-b-[40px] shadow-lg relative overflow-hidden">
+        <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-16 -mt-16"></div>
+            <div class="flex items-center justify-between relative z-10">
+                <a href="@Url.Action("Index", "Home")" class="w-10 h-10 flex items-center justify-center bg-white/20 hover:bg-white/30 rounded-xl transition-colors">
+                    <i class="w-5 h-5" data-lucide="arrow-left"></i>
+                </a>
+                <div class="text-center">
+                    <h1 class="text-lg font-bold tracking-wide uppercase">Submit Struk</h1>
+                    <p class="text-[10px] text-white/70 font-medium">Upload Struk SPJ</p>
+                </div>
+                <img src="@Url.Content("~/driver/upst_white.svg")" alt="UPST Logo" class="absolute top-6 left-8 w-20 h-auto opacity-20">
+                <div class="w-10"></div>
+            </div>
+        </div>
+
+        <div class="px-6 py-6 space-y-4">
+            <div id="loadingState" class="text-center py-8">
+                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-upst"></div>
+                <p class="mt-2 text-sm text-gray-600">Memeriksa data dari API...</p>
+            </div>
+
+            <div id="errorState" class="hidden">
+                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
+                    <div class="flex items-center gap-3">
+                        <i class="w-5 h-5 text-red-500" data-lucide="alert-circle"></i>
+                        <div>
+                            <p class="text-sm font-medium text-red-800">Data tidak ditemukan</p>
+                            <p class="text-xs text-red-600">Gagal mengambil data dari API Titik Buang</p>
+                        </div>
+                    </div>
+                </div>
+                <a href="@Url.Action("StrukRDF", "Submit")" class="block w-full py-3 bg-upst text-white rounded-lg font-medium  transition-colors text-center">
+                    Upload Struk Manual
+                </a>
+            </div>
+
+            <div id="formState" class="hidden space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Nomor Struk</label>
+                    <input type="text" id="nomorStruk" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-upst focus:border-transparent" placeholder="Masukkan nomor struk">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Berat Sampah (kg)</label>
+                    <input type="number" id="beratSampah" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-upst focus:border-transparent" placeholder="Masukkan berat sampah">
+                </div>
+                <button type="submit" class="w-full py-3 bg-upst text-white rounded-lg font-medium hover:bg-upst-dark transition-colors">
+                    Simpan
+                </button>
+            </div>
+        </div>
+        
+        <partial name="~/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml" />
+
+    </div>
+</div>
+
+@section Scripts {
+    <script>
+        document.addEventListener('DOMContentLoaded', async function() {
+            const loadingState = document.getElementById('loadingState');
+            const errorState = document.getElementById('errorState');
+            const formState = document.getElementById('formState');
+
+            try {
+                const urlParams = new URLSearchParams(window.location.search);
+                const doorId = urlParams.get('door_id') || '0744 U';
+
+                const formData = new FormData();
+                formData.append('door_id', doorId);
+
+                const response = await fetch('https://bgmiota.upstdlh.id/bgmiota/public/api/get-spj', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    throw new Error('API request failed');
+                }
+
+                const data = await response.json();
+
+                if (!data || (Array.isArray(data) && data.length === 0)) {
+                    throw new Error('No data found');
+                }
+
+                loadingState.classList.add('hidden');
+                formState.classList.remove('hidden');
+
+                if (data && typeof data === 'object') {
+                    if (data.id_struk) {
+                        document.getElementById('nomorStruk').value = data.id_struk;
+                    }
+                    if (data.weight && data.weight_after) {
+                        const beratNetto = data.weight - data.weight_after;
+                        document.getElementById('beratSampah').value = beratNetto;
+                    }
+                }
+
+            } catch (error) {
+                console.error('API Error:', error);
+                loadingState.classList.add('hidden');
+                errorState.classList.remove('hidden');
+            }
+        });
+    </script>
+}
\ No newline at end of file
diff --git a/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_Index.cshtml b/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_Index.cshtml
index 6070f8e..4d62854 100644
--- a/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_Index.cshtml
+++ b/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_Index.cshtml
@@ -30,9 +30,8 @@
             </div>
 
             <div class="grid grid-cols-1 gap-4">
-                @* ini arahin ke halaman upload struk titik buang via api ya mas ebik *@
                 
-                <a asp-controller="Submit" asp-action="TPA"
+                <a asp-controller="Submit" asp-action="StrukBG"
                 class="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 transition-all duration-200 hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                     
                     <div class="flex items-start justify-between gap-4">
diff --git a/Views/Admin/Transport/SpjDriverUpst/Submit/Struk.cshtml b/Views/Admin/Transport/SpjDriverUpst/Submit/Struk_RDF.cshtml
similarity index 100%
rename from Views/Admin/Transport/SpjDriverUpst/Submit/Struk.cshtml
rename to Views/Admin/Transport/SpjDriverUpst/Submit/Struk_RDF.cshtml
diff --git a/wwwroot/driver/css/watch.css b/wwwroot/driver/css/watch.css
index 0738033..c48fbcc 100644
--- a/wwwroot/driver/css/watch.css
+++ b/wwwroot/driver/css/watch.css
@@ -25,15 +25,18 @@
     --color-orange-700: oklch(55.3% 0.195 38.402);
     --color-orange-800: oklch(47% 0.157 37.304);
     --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-200: oklch(92.4% 0.12 95.746);
     --color-amber-300: oklch(87.9% 0.169 91.605);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-amber-700: oklch(55.5% 0.163 48.998);
+    --color-amber-800: oklch(47.3% 0.137 46.201);
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
@@ -73,10 +76,6 @@
     --color-indigo-100: oklch(93% 0.034 272.788);
     --color-indigo-300: oklch(78.5% 0.115 274.713);
     --color-purple-50: oklch(97.7% 0.014 308.299);
-    --color-purple-100: oklch(94.6% 0.033 307.174);
-    --color-purple-300: oklch(82.7% 0.119 306.383);
-    --color-purple-500: oklch(62.7% 0.265 303.9);
-    --color-purple-600: oklch(55.8% 0.288 302.321);
     --color-pink-50: oklch(97.1% 0.014 343.198);
     --color-rose-50: oklch(96.9% 0.015 12.422);
     --color-rose-500: oklch(64.5% 0.246 16.439);
@@ -435,6 +434,9 @@
   .right-full {
     right: 100%;
   }
+  .-bottom-0 {
+    bottom: calc(var(--spacing) * -0);
+  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
@@ -474,6 +476,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -795,6 +800,9 @@
   .-mr-16 {
     margin-right: calc(var(--spacing) * -16);
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
   .mr-1\.5 {
     margin-right: calc(var(--spacing) * 1.5);
   }
@@ -888,6 +896,9 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -978,6 +989,9 @@
   .h-\[340px\] {
     height: 340px;
   }
+  .h-\[350px\] {
+    height: 350px;
+  }
   .h-auto {
     height: auto;
   }
@@ -1152,6 +1166,10 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1164,6 +1182,10 @@
     --tw-translate-x: calc(var(--spacing) * 16);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1176,6 +1198,12 @@
     --tw-translate-y: calc(var(--spacing) * 12);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-105 {
+    --tw-scale-x: 105%;
+    --tw-scale-y: 105%;
+    --tw-scale-z: 105%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .scale-110 {
     --tw-scale-x: 110%;
     --tw-scale-y: 110%;
@@ -1290,6 +1318,13 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-0 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-0\.5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1523,6 +1558,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-l-4 {
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
@@ -1735,6 +1774,9 @@
   .bg-blue-800 {
     background-color: var(--color-blue-800);
   }
+  .bg-cyan-400 {
+    background-color: var(--color-cyan-400);
+  }
   .bg-cyan-400\/10 {
     background-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1744,6 +1786,9 @@
   .bg-emerald-400 {
     background-color: var(--color-emerald-400);
   }
+  .bg-emerald-600 {
+    background-color: var(--color-emerald-600);
+  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -1801,6 +1846,9 @@
   .bg-indigo-300 {
     background-color: var(--color-indigo-300);
   }
+  .bg-lime-500 {
+    background-color: var(--color-lime-500);
+  }
   .bg-lime-500\/15 {
     background-color: color-mix(in srgb, oklch(76.8% 0.233 130.85) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1822,6 +1870,9 @@
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
+  .bg-orange-700 {
+    background-color: var(--color-orange-700);
+  }
   .bg-orange-700\/30 {
     background-color: color-mix(in srgb, oklch(55.3% 0.195 38.402) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1852,6 +1903,12 @@
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
+  .bg-slate-100\/80 {
+    background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-100) 80%, transparent);
+    }
+  }
   .bg-slate-200 {
     background-color: var(--color-slate-200);
   }
@@ -1864,6 +1921,9 @@
   .bg-slate-900 {
     background-color: var(--color-slate-900);
   }
+  .bg-slate-950 {
+    background-color: var(--color-slate-950);
+  }
   .bg-slate-950\/60 {
     background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1900,6 +1960,12 @@
       background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
     }
   }
+  .bg-white\/80 {
+    background-color: color-mix(in srgb, #fff 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
+  }
   .bg-white\/95 {
     background-color: color-mix(in srgb, #fff 95%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1915,6 +1981,12 @@
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
+  .bg-yellow-400\/20 {
+    background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-400) 20%, transparent);
+    }
+  }
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
@@ -2006,6 +2078,13 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-white\/85 {
+    --tw-gradient-from: color-mix(in srgb, #fff 85%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-white) 85%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-yellow-50 {
     --tw-gradient-from: var(--color-yellow-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2057,6 +2136,14 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .via-white\/75 {
+    --tw-gradient-via: color-mix(in srgb, #fff 75%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-via: color-mix(in oklab, var(--color-white) 75%, transparent);
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .to-amber-500 {
     --tw-gradient-to: var(--color-amber-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2065,6 +2152,17 @@
     --tw-gradient-to: var(--color-amber-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-blue-50 {
+    --tw-gradient-to: var(--color-blue-50);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-blue-50\/70 {
+    --tw-gradient-to: color-mix(in srgb, oklch(97% 0.014 254.604) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-to: color-mix(in oklab, var(--color-blue-50) 70%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-blue-200 {
     --tw-gradient-to: var(--color-blue-200);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2260,6 +2358,9 @@
   .py-7 {
     padding-block: calc(var(--spacing) * 7);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2709,6 +2810,12 @@
       color: color-mix(in oklab, var(--color-white) 90%, transparent);
     }
   }
+  .text-yellow-200 {
+    color: var(--color-yellow-200);
+  }
+  .text-yellow-300 {
+    color: var(--color-yellow-300);
+  }
   .text-yellow-500 {
     color: var(--color-yellow-500);
   }
@@ -2829,6 +2936,9 @@
       --tw-shadow-color: color-mix(in oklab, var(--color-gray-200) var(--tw-shadow-alpha), transparent);
     }
   }
+  .ring-black {
+    --tw-ring-color: var(--color-black);
+  }
   .ring-black\/5 {
     --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3158,6 +3268,14 @@
       }
     }
   }
+  .hover\:-translate-y-1 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: calc(var(--spacing) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -3241,6 +3359,13 @@
       }
     }
   }
+  .hover\:bg-emerald-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-emerald-700);
+      }
+    }
+  }
   .hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {