fix: make hero banner responsive on mobile viewports

resources/views/components/hero-banner.blade.php

@@ -1,9 +1,9 @@
-<div class="bg-gradient-to-r from-[#eff4ff] to-[#faeffa] rounded-[24px] p-10 flex flex-col md:flex-row items-center justify-between w-full h-full border border-white shadow-sm overflow-hidden relative">
+<div class="bg-gradient-to-r from-[#eff4ff] to-[#faeffa] rounded-[24px] p-6 md:p-10 flex flex-col md:flex-row items-center justify-between w-full h-full border border-white shadow-sm overflow-hidden relative">
     
     <!-- Content Left -->
     <div class="flex-1 relative z-10 w-full md:pr-4">
-        <h2 class="text-[42px] font-extrabold text-[#1a2b49] flex items-center gap-3 mb-3 leading-none tracking-tight">
-            Thanks <span class="text-[#8b98e8] font-medium tracking-wider" style="font-family: 'Caveat', cursive, sans-serif; font-size: 52px; transform: translateY(-4px);">Card</span>
+        <h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] flex items-center gap-3 mb-3 leading-none tracking-tight">
+            Thanks <span class="text-[#8b98e8] font-medium tracking-wider text-[38px] md:text-[52px]" style="font-family: 'Caveat', cursive, sans-serif; transform: translateY(-4px);">Card</span>
             <svg class="w-8 h-8 text-[#8b98e8]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
             </svg>
@@ -20,7 +20,7 @@
     </div>
 
     <!-- Illustration Right -->
-    <div class="w-[340px] shrink-0 relative flex justify-end">
+    <div class="w-full max-w-[280px] md:w-[340px] shrink-0 relative flex justify-center md:justify-end mt-6 md:mt-0">
         <img src="{{ asset('images/hero_banner_illustration.png') }}" alt="Illustration" class="w-full max-w-[320px] object-contain drop-shadow-xl z-10 mix-blend-multiply">
     </div>