antv
54 lines
2.5 KiB
PHP
54 lines
2.5 KiB
PHP
<div class="flex flex-col items-center justify-center h-full w-full text-center px-6 py-12 md:py-20">
|
|
<!-- Illustration Wrapper -->
|
|
<div class="relative w-full max-w-[280px] md:max-w-[340px] aspect-square mb-10 mx-auto flex items-center justify-center">
|
|
<!-- Floating decorative elements -->
|
|
<div class="absolute top-10 left-4 animate-[bounce_3s_infinite]">
|
|
<x-icon-star class="w-8 h-8 text-yellow-400 opacity-80" />
|
|
</div>
|
|
<div class="absolute bottom-20 left-10 animate-[pulse_4s_infinite]">
|
|
<x-icon-sparkle class="w-6 h-6 text-pink-400 opacity-60" />
|
|
</div>
|
|
<div class="absolute top-20 right-10 animate-[bounce_4s_infinite_reverse]">
|
|
<x-icon-star class="w-10 h-10 text-blue-400 opacity-70" />
|
|
</div>
|
|
<div class="absolute bottom-16 right-4 animate-[pulse_3s_infinite]">
|
|
<x-icon-sparkle class="w-8 h-8 text-purple-400 opacity-80" />
|
|
</div>
|
|
|
|
<!-- Background blob glows -->
|
|
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
<div class="w-48 h-48 bg-blue-100/60 rounded-full blur-3xl absolute animate-blob"></div>
|
|
<div class="w-40 h-40 bg-pink-100/50 rounded-full blur-3xl absolute translate-x-12 animate-blob animation-delay-2000"></div>
|
|
</div>
|
|
|
|
<!-- Main Custom Rocket SVG -->
|
|
<div class="relative z-10 animate-float">
|
|
<x-icon-rocket class="w-64 h-64 md:w-72 md:h-72 drop-shadow-2xl" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<h1 class="text-[28px] md:text-[34px] font-extrabold text-[#1a2b49] mb-4 tracking-tight">
|
|
Tính năng đang phát triển
|
|
</h1>
|
|
<p class="text-gray-500 font-medium max-w-[420px] mx-auto mb-10 leading-relaxed text-[15px]">
|
|
Chúng tôi đang nỗ lực để mang đến trải nghiệm tốt nhất cho bạn. Vui lòng quay lại sau nhé!
|
|
</p>
|
|
|
|
<!-- Primary Button -->
|
|
<a href="{{ route('user.dashboard') }}" class="inline-flex items-center justify-center gap-2.5 px-8 py-3.5 bg-[#3462f7] hover:bg-blue-700 text-white font-bold rounded-xl shadow-[0_8px_16px_-4px_rgba(52,98,247,0.4)] transition-all hover:-translate-y-1 active:translate-y-0 text-[15px]">
|
|
<x-icon-arrow-left class="w-5 h-5 stroke-2" />
|
|
Quay về trang chủ
|
|
</a>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-15px) rotate(2deg); }
|
|
}
|
|
.animate-float {
|
|
animation: float 5s ease-in-out infinite;
|
|
}
|
|
</style>
|