update

Views/DetailPenjemputan/Index.cshtml

@@ -6,10 +6,8 @@
        <!-- Header -->
         <div class="bg-orange-500 text-white px-4 py-6 rounded-b-3xl relative pb-12">
             <div class="flex items-center justify-center relative">
-                <a href="@Url.Action("Index", "Home")" class="absolute left-0">
+                <a href="@Url.Action("Index", "Home")" class="absolute left-0 p-1 hover:bg-white/10 rounded-full transition-colors">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <i class="w-5 h-5" data-lucide="chevron-left"></i>
-                        <polyline points="15,18 9,12 15,6"></polyline>
-                    </svg>
                 </a>
                 <h1 class="text-xl font-bold">Detail Lokasi</h1>
             </div>

Views/Home/Index.cshtml

@@ -6,18 +6,17 @@
     
         <!-- Header -->
         <div class="absolute top-0 max-w-sm container mx-auto bg-orange-500 text-white rounded-br-[125px] h-[250px] flex flex-row justify-between items-start px-6 py-6 shadow-lg z-20">
-            <div class="flex flex-col gap-1">
+            <div class="flex flex-col">
-                @* <div class="flex items-center gap-2 text-base font-medium">
+                <h1 class="text-md font-bold leading-tight text-white">Bonny Agung Putra</h1>
-                    <span>Hallo</span>
+                <p class="text-xs opacity-90 font-medium text-orange-100">Driver UPST</span></p>
-                    <span>👋</span>
-                </div>
-                <h1 class="text-xl font-bold leading-tight">Bonny Agung Putra</h1>
-                <p class="text-base opacity-90">Driver UPST</p> *@
                 <!-- Your Location -->
-            <p class="text-sm mt-2 opacity-90">Your Location:</p>
+                <div class="mt-5 flex items-center gap-2">
-               <p id="userLocation" class="font-semibold text-sm tracking-wide cursor-pointer underline">
+                    <i class="w-4 h-4 text-white" data-lucide="map-pin"></i>
-                Mendeteksi lokasi...
+                    <span class="text-sm opacity-90">Lokasi Anda:</span>
-            </p>
+                </div>
+                <p id="userLocation" class="font-semibold text-sm tracking-wide cursor-pointer underline text-white hover:text-orange-200 transition">
+                    Mendeteksi lokasi...
+                </p>
             </div>
             <div class="flex items-center justify-center">
                 <div class="w-14 h-14 rounded-full border-4 border-white overflow-hidden shadow-md">
@@ -27,7 +26,7 @@
         </div>
 
         <!-- SPJ Data Card -->
-        <div class="bg-green-500 text-white mx-4 px-6 py-6 mt-32 rounded-2xl relative overflow-hidden shadow-lg z-21">
+        <div class="bg-green-500 text-white mx-4 px-6 py-6 mt-40 rounded-2xl relative overflow-hidden shadow-lg z-21">
             <!-- Background pattern -->
             <div class="absolute right-0 bottom-0 opacity-30 pointer-events-none select-none" style="width: 160px; height: 160px;">
                 <img src="@Url.Content("~/tree.svg")" alt="tree" class="w-full h-full object-contain">

Views/Profil/Index.cshtml

@@ -6,9 +6,9 @@
     <!-- Header with Orange Background -->
     <div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
         <div class="flex items-center justify-between">
-            <button class="p-1 hover:bg-white/10 rounded-full transition-colors">
+            <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
-            </button>
+            </a>
             <h1 class="text-lg font-bold">Profil</h1>
             <div class="w-8"></div>
         </div>

wwwroot/css/watch.css

@@ -586,6 +586,9 @@
   .mt-32 {
     margin-top: calc(var(--spacing) * 32);
   }
+  .mt-40 {
+    margin-top: calc(var(--spacing) * 40);
+  }
   .mt-auto {
     margin-top: auto;
   }
@@ -715,6 +718,9 @@
   .h-\[250px\] {
     height: 250px;
   }
+  .h-\[280px\] {
+    height: 280px;
+  }
   .h-auto {
     height: auto;
   }
@@ -1369,6 +1375,10 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1458,6 +1468,9 @@
   .text-green-700 {
     color: var(--color-green-700);
   }
+  .text-orange-100 {
+    color: var(--color-orange-100);
+  }
   .text-orange-500 {
     color: var(--color-orange-500);
   }
@@ -1704,6 +1717,13 @@
       }
     }
   }
+  .hover\:text-orange-200 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-orange-200);
+      }
+    }
+  }
   .hover\:text-orange-600 {
     &:hover {
       @media (hover: hover) {