complete story 5.4 with qa tests

resources/css/app.css

@@ -76,3 +76,19 @@ select:focus[data-flux-control] {
 /* \[:where(&)\]:size-4 {
     @apply size-4;
 } */
+
+/* Prose Navy styling for blog posts */
+.prose-navy {
+    --tw-prose-headings: var(--color-navy);
+    --tw-prose-links: var(--color-gold);
+    --tw-prose-bold: var(--color-navy);
+    --tw-prose-body: var(--color-charcoal);
+}
+
+.prose-navy a {
+    text-decoration: underline;
+}
+
+.prose-navy a:hover {
+    color: var(--color-gold-light);
+}

resources/views/livewire/pages/posts/index.blade.php

@@ -0,0 +1,57 @@
+<?php
+
+use App\Models\Post;
+use Livewire\Attributes\Layout;
+use Livewire\Volt\Component;
+use Livewire\WithPagination;
+
+new #[Layout('components.layouts.public')] class extends Component
+{
+    use WithPagination;
+
+    public function with(): array
+    {
+        return [
+            'posts' => Post::published()
+                ->latest()
+                ->paginate(10),
+        ];
+    }
+}; ?>
+
+<div class="max-w-4xl mx-auto">
+    <flux:heading size="xl" class="text-navy">{{ __('posts.posts') }}</flux:heading>
+
+    <div class="mt-8 space-y-6">
+        @forelse($posts as $post)
+            <article wire:key="post-{{ $post->id }}" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
+                <h2 class="text-xl font-semibold text-navy">
+                    <a href="{{ route('posts.show', $post) }}" class="hover:text-gold" wire:navigate>
+                        {{ $post->getTitle() }}
+                    </a>
+                </h2>
+
+                <time class="text-sm text-charcoal/70 mt-2 block">
+                    {{ $post->published_at?->translatedFormat('d F Y') ?? $post->created_at->translatedFormat('d F Y') }}
+                </time>
+
+                <p class="mt-3 text-charcoal">
+                    {{ $post->getExcerpt() }}
+                </p>
+
+                <a href="{{ route('posts.show', $post) }}" class="text-gold hover:underline mt-4 inline-block" wire:navigate>
+                    {{ __('posts.read_more') }} &rarr;
+                </a>
+            </article>
+        @empty
+            <div class="text-center text-charcoal/70 py-12 bg-white rounded-lg">
+                <flux:icon name="document-text" class="w-12 h-12 mx-auto mb-4 text-charcoal/40" />
+                <p>{{ __('posts.no_posts') }}</p>
+            </div>
+        @endforelse
+    </div>
+
+    <div class="mt-8">
+        {{ $posts->links() }}
+    </div>
+</div>

resources/views/livewire/pages/posts/show.blade.php

@@ -0,0 +1,39 @@
+<?php
+
+use App\Enums\PostStatus;
+use App\Models\Post;
+use Livewire\Attributes\Layout;
+use Livewire\Volt\Component;
+
+new #[Layout('components.layouts.public')] class extends Component
+{
+    public Post $post;
+
+    public function mount(Post $post): void
+    {
+        // Only show published posts
+        abort_unless($post->status === PostStatus::Published, 404);
+
+        $this->post = $post;
+    }
+}; ?>
+
+<article class="max-w-3xl mx-auto">
+    <header class="mb-8">
+        <flux:heading size="xl" class="text-navy">{{ $post->getTitle() }}</flux:heading>
+
+        <time class="text-charcoal/70 mt-2 block">
+            {{ $post->published_at?->translatedFormat('l, d F Y') ?? $post->created_at->translatedFormat('l, d F Y') }}
+        </time>
+    </header>
+
+    <div class="prose prose-lg prose-navy max-w-none">
+        {!! $post->getBody() !!}
+    </div>
+
+    <footer class="mt-12 pt-6 border-t border-charcoal/20">
+        <a href="{{ route('posts.index') }}" class="text-gold hover:underline" wire:navigate>
+            &larr; {{ __('posts.back_to_posts') }}
+        </a>
+    </footer>
+</article>

resources/views/pages/posts/index.blade.php

@@ -1,8 +0,0 @@
-<x-layouts.public>
-    <div class="py-8">
-        <h1 class="text-3xl font-bold text-navy mb-6">{{ __('navigation.posts') }}</h1>
-        <div class="bg-white p-8 rounded-lg shadow-md">
-            <p class="text-charcoal">{{ __('Legal insights and articles will be displayed here.') }}</p>
-        </div>
-    </div>
-</x-layouts.public>