antv
34 lines
2.3 KiB
PHP
34 lines
2.3 KiB
PHP
<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">
|
|
|
|
<!-- 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>
|
|
<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>
|
|
</h2>
|
|
<p class="text-[16px] text-gray-600 font-medium mb-8 leading-relaxed max-w-[320px]">
|
|
Một lời cảm ơn chân thành<br>có thể tạo nên ngày tuyệt vời của ai đó!
|
|
</p>
|
|
<a href="{{ route('user.send') }}" class="inline-flex items-center gap-2 px-8 py-3.5 bg-[#3462f7] hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/25 transition-all text-[15px]">
|
|
Gửi lời cảm ơn ngay
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Illustration Right -->
|
|
<div class="w-[340px] shrink-0 relative flex justify-end">
|
|
<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>
|
|
|
|
<!-- Background Elements -->
|
|
<div class="absolute inset-0 z-0 opacity-50 pointer-events-none overflow-hidden">
|
|
<div class="absolute top-10 left-1/3 w-2 h-2 bg-pink-400 rounded-full blur-[1px]"></div>
|
|
<div class="absolute bottom-12 left-[40%] w-3 h-3 bg-blue-400 rounded-full blur-[1px]"></div>
|
|
<div class="absolute top-1/4 right-[45%] w-3 h-3 bg-yellow-400 rounded-full blur-[1px]"></div>
|
|
</div>
|
|
</div>
|