feature: login and my page

resources/views/components/stat-card.blade.php

@@ -1,14 +1,34 @@
-@props(['title', 'user', 'value', 'bgClass' => 'bg-[#0f4c81]', 'valueLabel' => 'Tổng thẻ đã nhận'])
+@props(['title' => '', 'value' => '', 'growth' => '', 'growthType' => 'up', 'iconBgClass' => '', 'iconColorClass' => '', 'subtitle' => ''])
 
-<div class="card-stat-active {{ $bgClass }}">
-    <div class="space-y-2">
-        <div class="flex justify-between items-center">
-            <span class="text-white/90 text-xs font-bold uppercase tracking-wider">{{ $title }}</span>
-            <span class="text-2xl font-black">{{ $user && $value > 0 ? $user : 'Chưa có' }}</span>
+<div class="bg-white rounded-2xl p-5 md:p-6 border border-gray-100 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] hover:shadow-md transition-shadow h-full flex flex-col justify-center">
+    <div class="flex items-center gap-5">
+        <!-- Icon -->
+        <div class="w-[52px] h-[52px] rounded-2xl flex items-center justify-center shrink-0 {{ $iconBgClass }}">
+            <div class="{{ $iconColorClass }}">
+                {{ $slot }}
+            </div>
         </div>
-        <div class="flex justify-between items-center pt-2 border-t border-white/20">
-            <span class="text-white/80 text-[10px] font-bold">{{ $valueLabel }}</span>
-            <span class="text-lg font-bold text-yellow-300">{{ $value }} thẻ</span>
+        
+        <!-- Content -->
+        <div class="flex flex-col">
+            <span class="text-[13px] font-semibold text-gray-500 mb-1.5">{{ $title }}</span>
+            <div class="flex items-end gap-3 mb-1">
+                <span class="text-[34px] font-bold text-[#1e293b] leading-none">{{ $value }}</span>
+            </div>
+            
+            @if($growth)
+            <div class="flex items-center gap-1.5 mt-1">
+                <span class="flex items-center text-[12px] font-bold {{ $growthType === 'up' ? 'text-[#10b981]' : 'text-[#ef4444]' }}">
+                    @if($growthType === 'up')
+                        <svg class="w-3.5 h-3.5 mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
+                    @else
+                        <svg class="w-3.5 h-3.5 mr-0.5 transform rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
+                    @endif
+                    {{ $growth }}
+                </span>
+                <span class="text-[11px] text-gray-400 font-medium">{{ $subtitle }}</span>
+            </div>
+            @endif
         </div>
     </div>
 </div>