50 lines
2.9 KiB
PHP
50 lines
2.9 KiB
PHP
<section
|
|
class="relative w-full lg:w-[65%] min-h-[600px] lg:min-h-screen hidden lg:flex flex-col lg:flex-row justify-end items-end pb-8 pr-0 lg:pr-10 z-10">
|
|
|
|
<div
|
|
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1591925463023-1ca6b0636780?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-home-background/90 via-home-background/50 to-transparent lg:hidden">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative w-full px-6 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24 lg:mb-0">
|
|
|
|
@foreach ($bestSellingPerfumes as $perfume)
|
|
<article
|
|
class="bg-white backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">
|
|
|
|
<figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
|
|
<img src="{{ $perfume['image'] }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
alt="{{ $perfume['name'] }}">
|
|
</figure>
|
|
|
|
<div class="flex-1 ml-4 lg:ml-6 flex flex-col justify-center space-y-2 lg:space-y-4">
|
|
<div>
|
|
<h3 class="text-lg lg:text-2xl text-black font-bold line-clamp-1">{{ $perfume['name'] }}</h3>
|
|
<p class="text-black/60 text-xs lg:text-lg line-clamp-2">
|
|
{{ $perfume['concentration_label'] }}</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 mt-auto">
|
|
<button wire:click="goToProduct"
|
|
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-home-primary rounded-full text-xs lg:text-sm font-medium hover:bg-home-primary/80 transition-colors text-home-background">
|
|
Belanja Sekarang
|
|
</button>
|
|
<button wire:click="goToProduct"
|
|
class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary flex justify-center items-center rounded-full hover:bg-home-primary/80 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor" class="size-4 lg:size-5 text-home-background">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
|
|
</div>
|
|
</section>
|