79 lines
4.4 KiB
PHP
79 lines
4.4 KiB
PHP
<section class="bg-home-primary text-home-foreground font-sans py-24 relative overflow-hidden">
|
|
|
|
<div class="container mx-auto px-4 md:px-8 lg:px-24 xl:px-32 relative z-10">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-24 items-center">
|
|
|
|
<div class="space-y-8">
|
|
<h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight text-home-background">
|
|
Bergabung dengan Member Eksklusif.
|
|
</h2>
|
|
<p class="text-home-background/40 text-lg leading-relaxed max-w-md">
|
|
Dapatkan akses awal ke koleksi terbaru, diskon member khusus, dan tips perawatan parfum langsung
|
|
dari ahlinya.
|
|
</p>
|
|
|
|
<form onsubmit="event.preventDefault();" class="flex flex-col sm:flex-row gap-4 w-full">
|
|
<button type="submit"
|
|
class="px-8 py-4 rounded-xl bg-home-background text-home-foreground font-bold hover:bg-home-secondary hover:text-home-foreground transition-all duration-300 shadow-lg shadow-home-background/20 whitespace-nowrap">
|
|
Gabung Sekarang
|
|
</button>
|
|
</form>
|
|
|
|
<div class="flex items-center gap-4 text-sm text-home-background/40">
|
|
<div class="flex -space-x-2">
|
|
@foreach ($latestMembers as $member)
|
|
<img class="w-8 h-8 rounded-full border-2 border-white"
|
|
src="https://ui-avatars.com/api/?name={{ urlencode($member->name) }}&background=random&color=fff"
|
|
alt="{{ $member->name }}">
|
|
@endforeach
|
|
</div>
|
|
<p>Bergabung bersama <span
|
|
class="text-home-background font-bold">{{ number_format($totalMembersCount) }}+</span>
|
|
member lainnya.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative hidden lg:block">
|
|
<div
|
|
class="w-full h-full min-h-[300px] bg-gradient-to-tr from-home-secondary/30 to-home-primary/10 rounded-full blur-3xl absolute inset-0">
|
|
</div>
|
|
|
|
<div
|
|
class="relative bg-home-foreground text-white rounded-2xl p-8 transform rotate-3 hover:rotate-0 transition-transform duration-500 shadow-2xl">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-home-primary rounded-full flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-white">Member Card</h3>
|
|
<p class="text-xs text-gray-400">Exclusive Access</p>
|
|
</div>
|
|
</div>
|
|
<img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
|
|
class="w-8 h-8 opacity-80 brightness-0 invert">
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="h-2 w-2/3 bg-white/10 rounded-full"></div>
|
|
<div class="h-2 w-1/2 bg-white/10 rounded-full"></div>
|
|
</div>
|
|
<div class="mt-8 flex justify-between items-end">
|
|
<div class="text-xs text-gray-400">Valid thru<br><span class="text-white font-mono">12/28</span>
|
|
</div>
|
|
<div class="text-2xl font-bold text-white tracking-widest">•••• 8892</div>
|
|
</div>
|
|
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-2xl pointer-events-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|