complete story 14.5

resources/views/livewire/pages/home.blade.php

@@ -1,4 +1,23 @@
-<x-layouts.public>
+<?php
+
+use App\Models\Post;
+use Livewire\Attributes\Layout;
+use Livewire\Volt\Component;
+
+new #[Layout('components.layouts.public')] class extends Component
+{
+    public function with(): array
+    {
+        return [
+            'latestPosts' => Post::published()
+                ->latest('published_at')
+                ->take(3)
+                ->get(),
+        ];
+    }
+}; ?>
+
+<div>
     {{-- Hero Section --}}
     <section class="bg-background py-8 sm:py-12 lg:py-16">
         <div class="container mx-auto px-4 text-center">
@@ -113,4 +132,45 @@
             </div>
         </div>
     </section>
-</x-layouts.public>
+
+    {{-- Latest Posts Section --}}
+    @if($latestPosts->count() > 0)
+        <section id="posts" class="py-16 lg:py-20 bg-background">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-12">
+                    <h2 class="text-2xl lg:text-3xl font-semibold text-text mb-4">
+                        {{ __('home.posts_title') }}
+                    </h2>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+                    @foreach($latestPosts as $post)
+                        <article class="bg-card p-6 rounded-lg shadow-card hover:shadow-card-hover transition-shadow">
+                            <time class="text-xs text-body/70 mb-2 block">
+                                {{ $post->published_at?->translatedFormat('j F Y') ?? $post->created_at->translatedFormat('j F Y') }}
+                            </time>
+                            <h3 class="text-lg font-bold text-text mb-3">
+                                <a href="{{ route('posts.show', $post) }}" class="hover:text-cta transition-colors" wire:navigate>
+                                    {{ $post->getTitle() }}
+                                </a>
+                            </h3>
+                            <p class="text-body text-sm mb-4 line-clamp-3">
+                                {{ $post->getExcerpt() }}
+                            </p>
+                            <a href="{{ route('posts.show', $post) }}" class="text-cta font-medium text-sm hover:text-cta-hover" wire:navigate>
+                                {{ __('home.read_more') }} →
+                            </a>
+                        </article>
+                    @endforeach
+                </div>
+
+                <div class="text-center">
+                    <a href="{{ route('posts.index') }}" class="btn-secondary inline-flex items-center gap-2" wire:navigate>
+                        {{ __('home.view_all_posts') }}
+                        <span aria-hidden="true">→</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+    @endif
+</div>