77 lines
4.3 KiB
PHP
77 lines
4.3 KiB
PHP
<section
|
|
class="relative w-full lg:w-[65%] min-h-[600px] lg:min-h-screen 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-1595425959632-34f2822322ce?q=80&w=1098&auto=format&fit=crop')] bg-cover bg-center bg-no-repeat">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-white/90 via-white/50 to-transparent lg:hidden"></div>
|
|
</div>
|
|
|
|
<div class="relative w-full px-6 lg:px-0 lg:w-[80%] grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24 lg:mb-0">
|
|
|
|
<article
|
|
class="bg-white/90 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="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
alt="Product One">
|
|
</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">Product One</h3>
|
|
<p class="text-black/60 text-xs lg:text-lg">Fresh and elegant.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 mt-auto">
|
|
<button
|
|
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
|
Shop Now
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 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-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white/90 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="https://images.unsplash.com/photo-1693960794377-b388be4227c2?q=80&w=880&auto=format&fit=crop"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
alt="Product One">
|
|
</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">Product Two</h3>
|
|
<p class="text-black/60 text-xs lg:text-lg">Woody & classic.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 mt-auto">
|
|
<button
|
|
class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-white rounded-full text-xs lg:text-sm font-medium hover:bg-black hover:text-white transition-colors">
|
|
Shop Now
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 lg:w-10 lg:h-10 bg-black flex justify-center items-center rounded-full hover:bg-gray-800 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-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</section>
|