104 lines
6.6 KiB
PHP
104 lines
6.6 KiB
PHP
<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 overflow-hidden">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-20">
|
|
<div class="order-2 lg:order-1 space-y-6">
|
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
|
|
Temukan Parfum Favorit dengan Kualitas Terbaik
|
|
</h2>
|
|
<p class="text-base md:text-lg text-gray-600 leading-relaxed">
|
|
Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma
|
|
dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap
|
|
tetesnya asli dan terpercaya.
|
|
</p>
|
|
<div class="pt-4">
|
|
<button
|
|
class="text-home-primary font-bold hover:opacity-80 transition-opacity flex items-center gap-2">
|
|
Pelajari Selengkapnya
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-1 lg:order-2 relative">
|
|
<div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform rotate-2"></div>
|
|
<img src="https://plus.unsplash.com/premium_photo-1723579353390-f4dd36758856?q=80&w=1469&auto=format&fit=crop"
|
|
alt="Koleksi Parfum Eksklusif"
|
|
class="rounded-2xl w-full h-[400px] lg:h-[500px] object-cover shadow-xl">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<article
|
|
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
|
<div
|
|
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Keaslian 100%</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
|
Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni.
|
|
</p>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
|
<div
|
|
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Pengiriman Cepat</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
|
Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman.
|
|
</p>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
|
<div
|
|
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 4c-2.485 0-4.5 1.567-4.5 3.5V18h9v-2.5c0-1.933-2.015-3.5-4.5-3.5z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Harga Bersahabat</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
|
Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium.
|
|
</p>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
|
|
<div
|
|
class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
|
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Layanan Terbaik</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
|
Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|