318 lines
23 KiB
PHP
318 lines
23 KiB
PHP
<div>
|
|
<main class="px-8 py-12 mt-24 bg-white min-h-screen">
|
|
<header class="mb-8">
|
|
<h1 class="text-3xl font-bold text-home-foreground mb-2">Artikel</h1>
|
|
<p class="text-home-foreground/60">Baca tips dan trik seputar perawatan wewangian dan lifestyle</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
|
|
<section class="lg:col-span-3">
|
|
<div class="flex flex-col sm:flex-row gap-4 mb-8">
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<svg class="absolute left-4 top-3.5 w-5 h-5 text-home-foreground/50" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
<input type="search" placeholder="Cari artikel..." aria-label="Cari artikel"
|
|
class="w-full py-3 pl-11 pr-4 rounded-lg border border-home-foreground/10 text-home-foreground placeholder-home-foreground/50 focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition">
|
|
</div>
|
|
</div>
|
|
|
|
<select aria-label="Urutkan artikel"
|
|
class="px-4 py-3 rounded-lg border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-foreground focus:border-transparent transition cursor-pointer min-w-fit">
|
|
<option value="">Urutkan</option>
|
|
<option value="latest">Terbaru</option>
|
|
<option value="name">Nama</option>
|
|
<option value="views">Paling Dilihat</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
|
<div class="flex flex-col sm:flex-row">
|
|
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
|
<img src="https://placehold.co/500x300/png" alt="Tips Memilih Parfum" loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex gap-2 mb-3">
|
|
<span
|
|
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Perawatan</span>
|
|
<span class="text-xs text-home-foreground/60">5 min read</span>
|
|
</div>
|
|
<h3
|
|
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
|
Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda</h3>
|
|
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Memilih parfum yang
|
|
tepat bukan hanya tentang aroma yang disukai, tetapi juga tentang menemukan
|
|
signature scent yang mencerminkan kepribadian Anda. Dalam artikel ini kami akan
|
|
membahas cara memilih parfum yang paling sesuai...</p>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://placehold.co/500x300/png" alt="Siti Rahma"
|
|
class="w-8 h-8 rounded-full">
|
|
<div>
|
|
<p class="text-sm font-semibold text-home-foreground">Siti Rahma</p>
|
|
<time datetime="2024-11-05" class="text-xs text-home-foreground/60">5 Nov
|
|
2024</time>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
|
fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
|
<div class="flex flex-col sm:flex-row">
|
|
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
|
<img src="https://placehold.co/500x300/png" alt="Cara Menyimpan Parfum" loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex gap-2 mb-3">
|
|
<span
|
|
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Lifestyle</span>
|
|
<span class="text-xs text-home-foreground/60">8 min read</span>
|
|
</div>
|
|
<h3
|
|
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
|
Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama</h3>
|
|
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum adalah
|
|
investasi
|
|
yang berharga, dan penyimpanan yang tepat adalah kunci untuk menjaga kualitas
|
|
dan daya tahan aroma. Temukan tips profesional tentang suhu ideal, lokasi
|
|
penyimpanan terbaik, dan cara menjaga botol parfum Anda...</p>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://placehold.co/500x300/png" alt="Ahmad Rizki"
|
|
class="w-8 h-8 rounded-full">
|
|
<div>
|
|
<p class="text-sm font-semibold text-home-foreground">Ahmad Rizki</p>
|
|
<time datetime="2024-11-03" class="text-xs text-home-foreground/60">3 Nov
|
|
2024</time>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
|
fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
|
<div class="flex flex-col sm:flex-row">
|
|
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
|
<img src="https://placehold.co/500x300/png" alt="Parfum Musim Dingin" loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex gap-2 mb-3">
|
|
<span
|
|
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Tren</span>
|
|
<span class="text-xs text-home-foreground/60">6 min read</span>
|
|
</div>
|
|
<h3
|
|
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
|
Parfum Musim Dingin: Aroma Hangat yang Sempurna untuk Liburan</h3>
|
|
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Musim dingin
|
|
membutuhkan aromaterapi yang berbeda. Kami merekomendasikan koleksi parfum
|
|
dengan nada hangat seperti vanilla, kayu cedar, dan musk yang sempurna untuk
|
|
menciptakan suasana nyaman di musim yang dingin...</p>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://placehold.co/500x300/png" alt="Rina Kusuma"
|
|
class="w-8 h-8 rounded-full">
|
|
<div>
|
|
<p class="text-sm font-semibold text-home-foreground">Rina Kusuma</p>
|
|
<time datetime="2024-11-01" class="text-xs text-home-foreground/60">1 Nov
|
|
2024</time>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
|
fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-lg transition-shadow group">
|
|
<div class="flex flex-col sm:flex-row">
|
|
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden">
|
|
<img src="https://placehold.co/500x300/png" alt="Parfum Unisex" loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
<div class="p-6 sm:w-3/5 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex gap-2 mb-3">
|
|
<span
|
|
class="text-xs font-bold text-home-foreground bg-home-foreground/10 px-3 py-1 rounded-full">Rekomendasi</span>
|
|
<span class="text-xs text-home-foreground/60">7 min read</span>
|
|
</div>
|
|
<h3
|
|
class="text-xl font-bold text-home-foreground mb-2 group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
|
Parfum Unisex Terbaik 2024: Pilihan Untuk Semua Jenis Kelamin</h3>
|
|
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3">Parfum unisex semakin
|
|
populer karena fleksibilitas dan keunikannya. Kami telah mengumpulkan
|
|
rekomendasi parfum unisex terbaik tahun ini yang dapat digunakan oleh siapa saja
|
|
dan cocok untuk berbagai kesempatan...</p>
|
|
</div>
|
|
<div class="flex items-center justify-between pt-4 border-t border-home-foreground/10">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://placehold.co/500x300/png" alt="Budi Santoso"
|
|
class="w-8 h-8 rounded-full">
|
|
<div>
|
|
<p class="text-sm font-semibold text-home-foreground">Budi Santoso</p>
|
|
<time datetime="2024-10-28" class="text-xs text-home-foreground/60">28 Oct
|
|
2024</time>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-home-foreground/60 group-hover:translate-x-1 transition-transform"
|
|
fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
<nav class="flex items-center justify-center mt-12" aria-label="Pagination">
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground/50 cursor-not-allowed"
|
|
disabled aria-label="Halaman sebelumnya">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
@for ($page = 1; $page <= 3; $page++)
|
|
@if ($page == 1)
|
|
<button
|
|
class="px-4 py-2 rounded-lg bg-home-foreground text-white font-bold cursor-default"
|
|
aria-current="page">{{ $page }}</button>
|
|
@else
|
|
<button
|
|
class="px-4 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors font-medium">{{ $page }}</button>
|
|
@endif
|
|
@endfor
|
|
|
|
<button
|
|
class="px-3 py-2 rounded-lg border border-home-foreground/20 text-home-foreground hover:bg-home-foreground/5 transition-colors"
|
|
aria-label="Halaman selanjutnya">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</section>
|
|
|
|
<aside class="lg:col-span-1">
|
|
<div class="sticky top-24 space-y-6">
|
|
|
|
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
|
aria-labelledby="cat-heading">
|
|
<h3 id="cat-heading" class="text-lg font-bold text-home-foreground mb-4">Kategori</h3>
|
|
<div class="space-y-2">
|
|
<button
|
|
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Perawatan
|
|
Parfum</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Lifestyle</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tren
|
|
Terkini</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Tips
|
|
& Trik</button>
|
|
<button
|
|
class="w-full text-left px-3 py-2 rounded-lg text-home-foreground/70 hover:bg-home-foreground/10 hover:text-home-foreground transition-colors text-sm font-medium">Review
|
|
Produk</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-6"
|
|
aria-labelledby="pop-heading">
|
|
<h3 id="pop-heading" class="text-lg font-bold text-home-foreground mb-4">Artikel Populer</h3>
|
|
<div class="space-y-4">
|
|
<a href="#" class="block group">
|
|
<p
|
|
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
|
Tips Memilih Parfum yang Tepat Sesuai Kepribadian</p>
|
|
<p class="text-xs text-home-foreground/60 mt-1">2.5K views</p>
|
|
</a>
|
|
<div class="border-t border-home-foreground/10"></div>
|
|
<a href="#" class="block group">
|
|
<p
|
|
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
|
Panduan Lengkap Cara Menyimpan Parfum</p>
|
|
<p class="text-xs text-home-foreground/60 mt-1">1.8K views</p>
|
|
</a>
|
|
<div class="border-t border-home-foreground/10"></div>
|
|
<a href="#" class="block group">
|
|
<p
|
|
class="text-sm font-semibold text-home-foreground group-hover:text-home-foreground/70 transition-colors line-clamp-2">
|
|
Parfum Musim Dingin: Aroma Hangat</p>
|
|
<p class="text-xs text-home-foreground/60 mt-1">1.2K views</p>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-6"
|
|
aria-labelledby="newsletter-heading">
|
|
<h3 id="newsletter-heading" class="text-lg font-bold text-home-foreground mb-2">Newsletter
|
|
</h3>
|
|
<p class="text-sm text-home-foreground/60 mb-4">Dapatkan tips dan artikel terbaru langsung ke
|
|
email Anda</p>
|
|
<form onsubmit="event.preventDefault();">
|
|
<input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
|
|
class="w-full py-2 px-3 rounded-lg border border-home-foreground/20 text-home-foreground placeholder-home-foreground/50 text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-home-foreground">
|
|
<button type="submit"
|
|
class="w-full bg-home-foreground text-white font-bold py-2.5 rounded-lg hover:opacity-90 transition-opacity text-sm">Subscribe</button>
|
|
</form>
|
|
</section>
|
|
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|