42 lines
1.8 KiB
PHP
42 lines
1.8 KiB
PHP
<?php
|
|
|
|
use App\Models\Post;
|
|
use Livewire\Component;
|
|
|
|
new class extends Component {
|
|
public Post $featured;
|
|
|
|
public function mount()
|
|
{
|
|
$this->featured = Post::whereNotNull('published_at')->orderBy('published_at', 'desc')->first();
|
|
}
|
|
};
|
|
?>
|
|
|
|
<div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
|
|
<div class="lg:col-span-6" x-cloak>
|
|
<div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-700 mb-6">
|
|
Featured Post
|
|
</div>
|
|
<h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight mb-6">
|
|
{{ $featured->title }}
|
|
</h1>
|
|
<p class="text-lg text-gray-500 mb-8 leading-relaxed">
|
|
{{ $featured->excerpt }}
|
|
</p>
|
|
<div class="flex items-center space-x-4">
|
|
<img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name={{ $featured->author->name }}&background=4F46E5&color=fff" alt="Author">
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-900">{{ $featured->author->name }}</p>
|
|
<p class="text-xs text-gray-500">{{ $featured->published_at->format('F d, Y') }} • {{ $featured->avg_reading_time }} min read</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0 lg:col-span-6">
|
|
<div class="aspect-video bg-gray-100 rounded-3xl overflow-hidden shadow-2xl relative group">
|
|
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=1200" alt="Code Background" class="object-cover w-full h-full group-hover:scale-105 transition duration-700">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|