235 lines
16 KiB
PHP
235 lines
16 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.pexels.com/photos/4057663/pexels-photo-4057663.jpeg" alt="Article 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">{{ $pageTitle }}</h1>
|
|
<p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
|
|
{{ $pageDesc }}
|
|
</p>
|
|
|
|
{{-- Search Bar --}}
|
|
<div class="max-w-xl mx-auto relative group">
|
|
<input wire:model.live.debounce.500="search" type="search" placeholder="Temukan 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 text-black 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 wire:model.live="sort" 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="Alphabetic">Alfabet</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">
|
|
@forelse($articles as $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="{{ $article->thumbnail }}" alt="{{ $article->title }}" 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 flex-wrap">
|
|
@foreach ($article->categories->take(3) as $category)
|
|
<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">
|
|
{{ $category->name }}
|
|
</span>
|
|
@endforeach
|
|
|
|
@if ($article->categories->count() > 3)
|
|
<span
|
|
class="text-xs font-bold text-home-foreground/50 px-3 py-1 rounded-full border border-home-foreground/10">
|
|
+{{ $article->categories->count() - 3 }}
|
|
</span>
|
|
@endif
|
|
|
|
<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>
|
|
{{ ceil(str_word_count(strip_tags($article->content)) / 200) }} menit
|
|
baca
|
|
</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">
|
|
<a href="{{ route('article.show', $article->slug) }}" wire:navigate>
|
|
{{ $article->title }}
|
|
</a>
|
|
</h3>
|
|
<div class="text-base text-home-foreground/60 mb-4 line-clamp-6 leading-relaxed"
|
|
style="text-align: justify !important;">
|
|
{!! $article->excerpt !!}
|
|
</div>
|
|
</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://ui-avatars.com/api/?name={{ urlencode($article->author?->employee?->full_name) }}&background=random&color=fff"
|
|
alt="{{ $article->author?->employee?->full_name }}"
|
|
class="w-9 h-9 rounded-full ring-2 ring-white shadow-sm">
|
|
<div>
|
|
<p class="text-sm font-bold text-home-foreground">
|
|
{{ $article->author?->employee?->full_name }}</p>
|
|
<p class="text-xs text-home-foreground/50">
|
|
{{ formatDateLocalized($article->published_at) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<a href="{{ route('article.show', $article->slug) }}" wire:navigate
|
|
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>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@empty
|
|
@include('components.animations.lottie.boxing-cat')
|
|
@endforelse
|
|
</div>
|
|
|
|
<div class="mt-16">
|
|
{{ $articles->links('livewire::custom-pagination') }}
|
|
</div>
|
|
</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 Pilihan ✨</h3>
|
|
<div class="space-y-1">
|
|
<button wire:click="setCategory(null)"
|
|
class="w-full text-left px-4 py-3 rounded-xl transition-all text-sm font-medium flex justify-between items-center group {{ !$categorySlug ? 'bg-home-primary/10 text-home-primary' : 'text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary' }}">
|
|
Semua Artikel
|
|
<span
|
|
class="text-home-primary transition-all duration-300 {{ !$categorySlug ? 'translate-x-0 opacity-100' : '-translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100' }}">→</span>
|
|
</button>
|
|
@foreach ($categories as $category)
|
|
<button wire:click="setCategory('{{ $category['slug'] }}')"
|
|
class="w-full text-left px-4 py-3 rounded-xl transition-all text-sm font-medium flex justify-between items-center group {{ $categorySlug === $category['slug'] ? 'bg-home-primary/10 text-home-primary' : 'text-home-foreground/70 hover:bg-home-primary/5 hover:text-home-primary' }}">
|
|
{{ $category['name'] }}
|
|
<span
|
|
class="text-home-primary transition-all duration-300 {{ $categorySlug === $category['slug'] ? 'translate-x-0 opacity-100' : '-translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100' }}">→</span>
|
|
</button>
|
|
@endforeach
|
|
</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">
|
|
Lagi Rame Dibaca 🔥</h3>
|
|
<div class="space-y-5">
|
|
@foreach ($popularArticles as $popular)
|
|
<a href="{{ route('article.show', $popular['slug']) }}" class="block group">
|
|
<p
|
|
class="text-sm font-bold text-home-foreground group-hover:text-home-primary transition-colors line-clamp-2 leading-snug">
|
|
{{ $popular['title'] }}
|
|
</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>
|
|
{{ $popular['views'] }}x dilihat
|
|
</p>
|
|
</a>
|
|
<div class="border-t border-home-foreground/5"></div>
|
|
@endforeach
|
|
</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>
|
|
|
|
@assets
|
|
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
|
@endassets
|