371 lines
26 KiB
PHP
371 lines
26 KiB
PHP
<div>
|
|
{{-- Hero Section --}}
|
|
<section class="relative h-[500px] flex items-center justify-center overflow-hidden">
|
|
{{-- Background Image --}}
|
|
<div class="absolute inset-0 z-0">
|
|
<img src="https://images.unsplash.com/photo-1752042143353-e6dcc822a023?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
|
alt="Perfume Background" class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-black/40"></div>
|
|
</div>
|
|
|
|
{{-- Content --}}
|
|
<div class="relative z-10 container mx-auto px-6 text-center">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">Artikel Terbaru</h1>
|
|
<p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
|
|
Baca tips profesional seputar perawatan wewangian, tren lifestyle, dan rekomendasi terbaik.
|
|
</p>
|
|
|
|
{{-- Search Bar --}}
|
|
<div class="max-w-xl mx-auto relative group">
|
|
<input type="search" placeholder="Cari artikel menarik..." aria-label="Cari artikel"
|
|
class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
|
|
<button
|
|
class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
|
|
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
|
|
|
|
<section class="lg:col-span-3">
|
|
|
|
{{-- Toolbar (Sort Only) --}}
|
|
<div class="flex justify-start mb-10">
|
|
<div class="relative w-full md:w-auto">
|
|
<select aria-label="Urutkan artikel"
|
|
class="appearance-none px-6 py-3 pr-10 rounded-xl border border-home-foreground/10 bg-white text-home-foreground font-medium focus:outline-none focus:ring-2 focus:ring-home-primary focus:border-transparent transition cursor-pointer min-w-[160px] shadow-sm">
|
|
<option value="">Urutkan</option>
|
|
<option value="latest">Terbaru</option>
|
|
<option value="name">Nama</option>
|
|
<option value="views">Terpopuler</option>
|
|
</select>
|
|
<svg class="absolute right-4 top-4 w-4 h-4 text-home-foreground/50 pointer-events-none"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
|
<div class="flex flex-col sm:flex-row h-full">
|
|
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
|
<img src="https://placehold.co/600x400/png?text=Tips+Parfum" alt="Tips Memilih Parfum"
|
|
loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
<div
|
|
class="absolute inset-0 bg-home-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
</div>
|
|
</div>
|
|
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span
|
|
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Perawatan</span>
|
|
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
5 min read
|
|
</span>
|
|
</div>
|
|
<h3
|
|
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
|
Tips Memilih Parfum yang Tepat Sesuai Kepribadian Anda
|
|
</h3>
|
|
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
|
Memilih parfum yang tepat bukan hanya tentang aroma yang disukai, tetapi juga
|
|
tentang menemukan signature scent yang mencerminkan karakter...
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
|
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
|
<div>
|
|
<p class="text-sm font-bold text-home-foreground">Siti Rahma</p>
|
|
<p class="text-xs text-home-foreground/50">5 Nov 2024</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
|
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
|
<div class="flex flex-col sm:flex-row h-full">
|
|
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
|
<img src="https://placehold.co/600x400/png?text=Menyimpan+Parfum"
|
|
alt="Cara Menyimpan Parfum" loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
</div>
|
|
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span
|
|
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Lifestyle</span>
|
|
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
8 min read
|
|
</span>
|
|
</div>
|
|
<h3
|
|
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
|
Panduan Lengkap Cara Menyimpan Parfum agar Tahan Lama
|
|
</h3>
|
|
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
|
Parfum adalah investasi yang berharga. Penyimpanan yang tepat adalah kunci untuk
|
|
menjaga kualitas aroma agar tetap orisinil...
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
|
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
|
<div>
|
|
<p class="text-sm font-bold text-home-foreground">Ahmad Rizki</p>
|
|
<p class="text-xs text-home-foreground/50">3 Nov 2024</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
|
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden hover:shadow-xl hover:shadow-home-primary/5 hover:border-home-primary/20 transition-all duration-300 group">
|
|
<div class="flex flex-col sm:flex-row h-full">
|
|
<div class="sm:w-2/5 h-64 sm:h-auto overflow-hidden relative">
|
|
<img src="https://placehold.co/600x400/png?text=Parfum+Unisex" alt="Parfum Unisex"
|
|
loading="lazy"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
|
|
</div>
|
|
<div class="p-8 sm:w-3/5 flex flex-col justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span
|
|
class="text-xs font-bold text-home-primary bg-home-primary/10 px-3 py-1 rounded-full border border-home-primary/10 uppercase tracking-wider">Tren</span>
|
|
<span class="text-xs text-home-foreground/50 flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
7 min read
|
|
</span>
|
|
</div>
|
|
<h3
|
|
class="text-2xl font-bold text-home-foreground mb-3 group-hover:text-home-primary transition-colors line-clamp-2 leading-tight">
|
|
Parfum Unisex Terbaik 2024: Pilihan Untuk Semua
|
|
</h3>
|
|
<p class="text-home-foreground/60 text-sm mb-4 line-clamp-3 leading-relaxed">
|
|
Parfum unisex semakin populer karena fleksibilitas dan keunikannya. Kami
|
|
mengumpulkan rekomendasi terbaik tahun ini...
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-6 border-t border-home-foreground/5">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://placehold.co/100x100/png?text=User" alt="Author"
|
|
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
|
<div>
|
|
<p class="text-sm font-bold text-home-foreground">Budi Santoso</p>
|
|
<p class="text-xs text-home-foreground/50">28 Oct 2024</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-home-foreground/5 flex items-center justify-center group-hover:bg-home-primary group-hover:text-white transition-all duration-300">
|
|
<svg class="w-5 h-5 transition-transform group-hover:translate-x-0.5"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
<nav class="flex items-center justify-center mt-16" aria-label="Pagination">
|
|
<div
|
|
class="flex items-center gap-3 bg-white p-2 rounded-full shadow-sm border border-home-foreground/5">
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground/30 cursor-not-allowed hover:bg-gray-50 transition-colors"
|
|
disabled>
|
|
<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="w-10 h-10 flex items-center justify-center rounded-full bg-home-primary text-white font-bold shadow-md shadow-home-primary/20"
|
|
aria-current="page">{{ $page }}</button>
|
|
@else
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-full text-home-foreground hover:bg-home-primary/10 hover:text-home-primary transition-colors font-medium">{{ $page }}</button>
|
|
@endif
|
|
@endfor
|
|
|
|
<button
|
|
class="w-10 h-10 flex items-center justify-center rounded-full border border-home-foreground/10 text-home-foreground hover:bg-home-primary/10 hover:text-home-primary hover:border-home-primary transition-all">
|
|
<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-32 space-y-8">
|
|
|
|
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
|
|
<h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
|
|
Kategori</h3>
|
|
<div class="space-y-1">
|
|
<button
|
|
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
|
Perawatan Parfum
|
|
<span
|
|
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
|
Lifestyle
|
|
<span
|
|
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
|
Tren Terkini
|
|
<span
|
|
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
|
</button>
|
|
<button
|
|
class="w-full text-left px-4 py-3 rounded-xl text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary transition-all text-sm font-medium flex justify-between items-center group">
|
|
Tips & Trik
|
|
<span
|
|
class="text-home-primary opacity-0 -translate-x-2 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">→</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<nav class="bg-white rounded-2xl border border-home-foreground/10 p-8 shadow-sm">
|
|
<h3 class="text-lg font-bold text-home-primary mb-6 border-b border-home-foreground/5 pb-4">
|
|
Populer</h3>
|
|
<div class="space-y-5">
|
|
<a href="#" class="block group">
|
|
<p
|
|
class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
|
|
Tips Memilih Parfum yang Tepat Sesuai Kepribadian
|
|
</p>
|
|
<p class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
|
|
</path>
|
|
</svg>
|
|
2.5K views
|
|
</p>
|
|
</a>
|
|
<div class="border-t border-home-foreground/5"></div>
|
|
<a href="#" class="block group">
|
|
<p
|
|
class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
|
|
Panduan Lengkap Cara Menyimpan Parfum
|
|
</p>
|
|
<p class="text-xs text-home-foreground/40 mt-2 font-medium flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
|
|
</path>
|
|
</svg>
|
|
1.8K views
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section
|
|
class="bg-home-primary rounded-2xl p-8 text-center relative overflow-hidden group shadow-lg shadow-home-primary/20">
|
|
<div
|
|
class="absolute top-0 right-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -mr-10 -mt-10">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<div
|
|
class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 text-white">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-2">Newsletter</h3>
|
|
<p class="text-sm text-white/80 mb-6 leading-relaxed">Dapatkan tips eksklusif dan artikel
|
|
terbaru langsung ke email Anda.</p>
|
|
|
|
<form onsubmit="event.preventDefault();" class="space-y-3">
|
|
<input type="email" placeholder="Email Anda..." required aria-label="Alamat Email"
|
|
class="w-full py-3 px-4 rounded-xl border border-white/20 bg-white/10 text-white placeholder-white/50 text-sm focus:outline-none focus:bg-white/20 focus:border-home-secondary transition-all">
|
|
<button type="submit"
|
|
class="w-full bg-home-secondary text-home-primary font-bold py-3 rounded-xl hover:bg-white transition-all duration-300 text-sm shadow-lg">Subscribe</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|