updated gallery

resources/views/news/_article_card.blade.php

@@ -1,31 +1,37 @@
-{{-- Reusable article card partial --}}
-<div class="card h-100 border-0 shadow-sm news-card">
-    @if($article->cover_url)
-        <a href="{{ route('news.show', $article->slug) }}">
-            <img src="{{ $article->cover_url }}" class="card-img-top"
-                 alt="{{ $article->title }}"
-                 style="height:180px;object-fit:cover;">
-        </a>
-    @endif
-    <div class="card-body d-flex flex-column">
-        @if($article->category)
-            <a href="{{ route('news.category', $article->category->slug) }}"
-               class="badge badge-primary mb-2 align-self-start">{{ $article->category->name }}</a>
-        @endif
+<article class="group overflow-hidden rounded-[28px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] shadow-[0_18px_45px_rgba(0,0,0,0.22)] transition hover:-translate-y-0.5 hover:border-white/[0.12]">
+    <a href="{{ route('news.show', $article->slug) }}" class="block">
+        <div class="relative aspect-[16/9] overflow-hidden bg-black/20">
+            @if($article->cover_url)
+                <img src="{{ $article->cover_url }}" alt="{{ $article->title }}" class="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]">
+            @else
+                <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_45%),linear-gradient(180deg,rgba(15,23,42,0.92),rgba(2,6,23,0.98))]"></div>
+            @endif
+            <div class="absolute inset-0 bg-gradient-to-t from-[#020611cc] via-transparent to-transparent"></div>
+        </div>
+    </a>
 
-        <h6 class="card-title mb-1">
-            <a href="{{ route('news.show', $article->slug) }}" class="text-dark text-decoration-none">
-                {{ $article->title }}
-            </a>
-        </h6>
+    <div class="flex h-full flex-col p-5">
+        <div class="flex flex-wrap items-center gap-2">
+            @if($article->category)
+                <a href="{{ route('news.category', $article->category->slug) }}" class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-500/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-sky-200">{{ $article->category->name }}</a>
+            @endif
+            <span class="text-[11px] uppercase tracking-[0.16em] text-white/30">{{ $article->published_at?->format('d M Y') }}</span>
+        </div>
+
+        <h3 class="mt-3 text-xl font-semibold leading-tight text-white/95">
+            <a href="{{ route('news.show', $article->slug) }}" class="transition hover:text-sky-200">{{ $article->title }}</a>
+        </h3>
 
         @if($article->excerpt)
-            <p class="card-text text-muted small flex-grow-1">{{ Str::limit($article->excerpt, 100) }}</p>
+            <p class="mt-3 flex-1 text-sm leading-7 text-white/55">{{ Str::limit(strip_tags((string) $article->excerpt), 135) }}</p>
         @endif
 
-        <div class="text-muted small mt-2 d-flex justify-content-between">
-            <span>{{ $article->published_at?->format('d M Y') }}</span>
-            <span><i class="fas fa-eye mr-1"></i>{{ number_format($article->views) }}</span>
+        <div class="mt-4 flex items-center justify-between gap-3 text-sm text-white/40">
+            <span class="truncate">{{ $article->author?->name ?? 'Skinbase' }}</span>
+            <span class="shrink-0 inline-flex items-center gap-1.5">
+                <i class="fa-regular fa-eye text-[11px]"></i>
+                {{ number_format((int) $article->views) }}
+            </span>
         </div>
     </div>
-</div>
+</article>

resources/views/news/_sidebar.blade.php

@@ -1,59 +1,58 @@
-{{-- Sidebar partial for news frontend --}}
-
-{{-- Categories widget --}}
 @if(!empty($categories) && $categories->isNotEmpty())
-<div class="card mb-4">
-    <div class="card-header"><strong>Categories</strong></div>
-    <div class="list-group list-group-flush">
+<section class="rounded-[24px] border border-white/[0.06] bg-white/[0.025] p-5">
+    <div class="mb-4 flex items-center justify-between gap-3">
+        <h2 class="text-sm font-semibold uppercase tracking-[0.18em] text-white/45">Categories</h2>
+        <span class="text-xs text-white/30">{{ $categories->count() }}</span>
+    </div>
+    <div class="space-y-1.5">
     @foreach($categories as $cat)
-        <a href="{{ route('news.category', $cat->slug) }}"
-           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
-            {{ $cat->name }}
-            <span class="badge badge-secondary badge-pill">{{ $cat->published_articles_count ?? 0 }}</span>
+        <a href="{{ route('news.category', $cat->slug) }}" class="flex items-center justify-between rounded-2xl px-3 py-2.5 text-sm text-white/65 transition hover:bg-white/[0.04] hover:text-white">
+            <span>{{ $cat->name }}</span>
+            <span class="rounded-full border border-white/[0.06] bg-white/[0.04] px-2 py-0.5 text-[11px] text-white/45">{{ number_format((int) ($cat->published_articles_count ?? 0)) }}</span>
         </a>
     @endforeach
     </div>
-</div>
+</section>
 @endif
 
-{{-- Trending articles --}}
 @if(!empty($trending) && $trending->isNotEmpty())
-<div class="card mb-4">
-    <div class="card-header"><strong><i class="fas fa-fire mr-1 text-danger"></i> Trending</strong></div>
-    <div class="list-group list-group-flush">
+<section class="rounded-[24px] border border-white/[0.06] bg-white/[0.025] p-5">
+    <div class="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.18em] text-white/45">
+        <i class="fa-solid fa-fire text-[11px] text-rose-300"></i>
+        Trending
+    </div>
+    <div class="space-y-3">
     @foreach($trending as $item)
-        <a href="{{ route('news.show', $item->slug) }}"
-           class="list-group-item list-group-item-action py-2">
-            <div class="d-flex justify-content-between align-items-start">
-                <span class="font-weight-bold small">{{ Str::limit($item->title, 55) }}</span>
-                <span class="badge badge-info badge-pill ml-2">{{ number_format($item->views) }}</span>
+        <a href="{{ route('news.show', $item->slug) }}" class="block rounded-2xl border border-white/[0.04] bg-black/10 px-4 py-3 transition hover:border-white/[0.08] hover:bg-white/[0.03]">
+            <div class="flex items-start justify-between gap-3">
+                <span class="text-sm font-medium leading-6 text-white/80">{{ Str::limit($item->title, 70) }}</span>
+                <span class="shrink-0 rounded-full border border-sky-400/20 bg-sky-500/10 px-2 py-0.5 text-[11px] text-sky-200">{{ number_format((int) $item->views) }}</span>
             </div>
-            <small class="text-muted">{{ $item->published_at?->diffForHumans() }}</small>
+            <p class="mt-1 text-xs text-white/35">{{ $item->published_at?->diffForHumans() }}</p>
         </a>
     @endforeach
     </div>
-</div>
+</section>
 @endif
 
-{{-- Tags cloud --}}
 @if(!empty($tags) && $tags->isNotEmpty())
-<div class="card mb-4">
-    <div class="card-header"><strong><i class="fas fa-tags mr-1"></i> Tags</strong></div>
-    <div class="card-body">
+<section class="rounded-[24px] border border-white/[0.06] bg-white/[0.025] p-5">
+    <div class="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.18em] text-white/45">
+        <i class="fa-solid fa-tags text-[11px] text-sky-300"></i>
+        Topics
+    </div>
+    <div class="flex flex-wrap gap-2">
     @foreach($tags as $tag)
-        <a href="{{ route('news.tag', $tag->slug) }}" class="badge badge-secondary mr-1 mb-1">
-            {{ $tag->name }}
-        </a>
+        <a href="{{ route('news.tag', $tag->slug) }}" class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/60 transition hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-white">#{{ $tag->name }}</a>
     @endforeach
     </div>
-</div>
+</section>
 @endif
 
-{{-- RSS link --}}
-<div class="card mb-4">
-    <div class="card-body text-center">
-        <a href="{{ route('news.rss') }}" class="btn btn-outline-warning btn-sm" target="_blank">
-            <i class="fas fa-rss mr-1"></i> RSS Feed
-        </a>
-    </div>
-</div>
+<section class="rounded-[24px] border border-amber-400/20 bg-amber-500/10 p-5 text-center">
+    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-amber-100/70">Stay updated</p>
+    <a href="{{ route('news.rss') }}" class="mt-3 inline-flex items-center gap-2 rounded-full border border-amber-300/25 bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-100 transition hover:bg-amber-500/20" target="_blank" rel="noopener noreferrer">
+        <i class="fa-solid fa-rss text-xs"></i>
+        RSS Feed
+    </a>
+</section>

resources/views/news/category.blade.php

@@ -1,30 +1,44 @@
 @extends('news.layout', [
     'metaTitle' => $category->name . ' — News',
+    'metaDescription' => $category->description ?: ('Announcements in the ' . $category->name . ' category.'),
+    'metaCanonical' => route('news.category', $category->slug),
 ])
 
 @section('news_content')
-<div class="container py-5">
-    <h1 class="mb-1">{{ $category->name }}</h1>
-    @if($category->description)
-        <p class="text-muted mb-4">{{ $category->description }}</p>
-    @endif
+@php
+    $headerBreadcrumbs = collect([
+        (object) ['name' => 'Community', 'url' => route('community.activity')],
+        (object) ['name' => 'Announcements', 'url' => route('news.index')],
+        (object) ['name' => $category->name, 'url' => route('news.category', $category->slug)],
+    ]);
+@endphp
 
-    <div class="row">
-        <div class="col-lg-8">
-            <div class="row">
-            @forelse($articles as $article)
-                <div class="col-sm-6 mb-4">
-                    @include('news._article_card', ['article' => $article])
+<x-nova-page-header
+    section="Community"
+    :title="$category->name"
+    icon="fa-folder-open"
+    :breadcrumbs="$headerBreadcrumbs"
+    :description="$category->description ?: ('Announcements filed under ' . $category->name . '.')"
+    headerClass="pb-6"
+/>
+
+<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
+    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
+        <section>
+            @if($articles->isEmpty())
+                <div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">No articles in this category yet.</div>
+            @else
+                <div class="grid gap-5 md:grid-cols-2">
+                    @foreach($articles as $article)
+                        @include('news._article_card', ['article' => $article])
+                    @endforeach
                 </div>
-            @empty
-                <div class="col-12 text-center text-muted py-5">No articles in this category.</div>
-            @endforelse
-            </div>
-            <div class="mt-3">{{ $articles->links() }}</div>
-        </div>
-        <div class="col-lg-4">
-            @include('news._sidebar', ['categories' => $categories])
-        </div>
+                <div class="mt-8 flex justify-center">{{ $articles->links() }}</div>
+            @endif
+        </section>
+        <aside class="space-y-4">
+            @include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
+        </aside>
     </div>
 </div>
 @endsection

resources/views/news/index.blade.php

@@ -1,69 +1,105 @@
 @extends('news.layout', [
     'metaTitle'       => config('news.rss_title', 'News'),
     'metaDescription' => config('news.rss_description', ''),
+    'metaCanonical'   => route('news.index'),
 ])
 
 @section('news_content')
-<div class="news-index">
-    <div class="container py-5">
+@php
+    $headerBreadcrumbs = collect([
+        (object) ['name' => 'Community', 'url' => route('community.activity')],
+        (object) ['name' => 'Announcements', 'url' => route('news.index')],
+    ]);
+@endphp
 
-        {{-- Featured article --}}
-        @if($featured)
-        <section class="mb-5">
-            <a href="{{ route('news.show', $featured->slug) }}" class="text-decoration-none">
-                <div class="card border-0 shadow-sm overflow-hidden news-featured">
-                    @if($featured->cover_url)
-                        <img src="{{ $featured->cover_url }}" class="card-img" alt="{{ $featured->title }}"
-                             style="height:400px;object-fit:cover;">
-                    @endif
-                    <div class="card-img-overlay d-flex align-items-end p-4"
-                         style="background:linear-gradient(transparent,rgba(0,0,0,0.75))">
-                        <div class="text-white">
-                            @if($featured->category)
-                                <span class="badge badge-primary mb-2">{{ $featured->category->name }}</span>
+<x-nova-page-header
+    section="Community"
+    title="News"
+    icon="fa-newspaper"
+    :breadcrumbs="$headerBreadcrumbs"
+    :description="config('news.rss_description', 'Latest news, feature rollouts, and team updates from Skinbase.')"
+    headerClass="pb-6"
+>
+    <x-slot name="actions">
+        <div class="flex flex-wrap items-center gap-2 text-sm">
+            @if(($articles->total() ?? 0) > 0)
+                <span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-white/65">
+                    <i class="fa-solid fa-file-lines text-xs text-sky-300"></i>
+                    {{ number_format($articles->total()) }} articles
+                </span>
+            @endif
+            <a href="{{ route('news.rss') }}" class="inline-flex items-center gap-2 rounded-lg border border-amber-400/20 bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-200 transition hover:bg-amber-500/15">
+                <i class="fa-solid fa-rss text-xs"></i>
+                RSS feed
+            </a>
+        </div>
+    </x-slot>
+</x-nova-page-header>
+
+<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
+    @if($featured)
+        <section class="mb-8">
+            <a href="{{ route('news.show', $featured->slug) }}" class="group block overflow-hidden rounded-[32px] border border-white/[0.08] bg-white/[0.03] shadow-[0_24px_60px_rgba(0,0,0,0.24)] transition hover:border-white/[0.12]">
+                <div class="grid lg:grid-cols-[1.25fr_0.95fr]">
+                    <div class="relative min-h-[280px] overflow-hidden bg-black/20">
+                        @if($featured->cover_url)
+                            <img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]">
+                        @else
+                            <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_45%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.98))]"></div>
+                        @endif
+                        <div class="absolute inset-0 bg-gradient-to-t from-[#020611] via-[#02061166] to-transparent"></div>
+                    </div>
+                    <div class="flex flex-col justify-between gap-5 p-6 lg:p-8">
+                        <div>
+                            <div class="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/45">
+                                <span class="text-sky-300">Featured story</span>
+                                @if($featured->category)
+                                    <span class="rounded-full border border-sky-400/20 bg-sky-500/10 px-2.5 py-1 text-[11px] tracking-[0.12em] text-sky-200">{{ $featured->category->name }}</span>
+                                @endif
+                            </div>
+                            <h2 class="mt-4 text-3xl font-bold leading-tight text-white/95">{{ $featured->title }}</h2>
+                            @if($featured->excerpt)
+                                <p class="mt-4 text-sm leading-7 text-white/60">{{ Str::limit(strip_tags((string) $featured->excerpt), 220) }}</p>
                             @endif
-                            <h2 class="font-weight-bold">{{ $featured->title }}</h2>
-                            <p class="mb-1">{{ Str::limit(strip_tags((string)$featured->excerpt), 180) }}</p>
-                            <small>
-                                {{ $featured->author?->name }} &middot;
-                                {{ $featured->published_at?->format('d M Y') }} &middot;
-                                {{ $featured->reading_time }} min read
-                            </small>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
+                            <span>{{ $featured->author?->name ?? 'Skinbase' }}</span>
+                            <span>{{ $featured->published_at?->format('d M Y') }}</span>
+                            <span>{{ $featured->reading_time }} min read</span>
+                            <span>{{ number_format((int) $featured->views) }} views</span>
                         </div>
                     </div>
                 </div>
             </a>
         </section>
-        @endif
+    @endif
 
-        <div class="row">
-            {{-- Articles grid --}}
-            <div class="col-lg-8">
-                <div class="row">
-                @forelse($articles as $article)
-                    <div class="col-sm-6 mb-4">
+    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
+        <section>
+            @if($articles->isEmpty())
+                <div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">
+                    No announcements have been published yet.
+                </div>
+            @else
+                <div class="grid gap-5 md:grid-cols-2">
+                    @foreach($articles as $article)
                         @include('news._article_card', ['article' => $article])
-                    </div>
-                @empty
-                    <div class="col-12 text-center text-muted py-5">No news articles published yet.</div>
-                @endforelse
+                    @endforeach
                 </div>
 
-                <div class="mt-3">
+                <div class="mt-8 flex justify-center">
                     {{ $articles->links() }}
                 </div>
-            </div>
-
-            {{-- Sidebar --}}
-            <div class="col-lg-4">
-                @include('news._sidebar', [
-                    'categories' => $categories,
-                    'trending'   => $trending,
-                    'tags'       => $tags,
-                ])
-            </div>
-        </div>
+            @endif
+        </section>
 
+        <aside class="space-y-4">
+            @include('news._sidebar', [
+                'categories' => $categories,
+                'trending' => $trending,
+                'tags' => $tags,
+            ])
+        </aside>
     </div>
 </div>
 @endsection

resources/views/news/layout.blade.php

@@ -1,14 +1,11 @@
-{{--
-    Frontend layout wrapper for the News section.
-    Extends the main app layout.
---}}
-@extends('layouts.app')
+@extends('layouts.nova')
 
-@section('title', $metaTitle ?? config('news.rss_title', 'News'))
-
-@if(isset($metaDescription))
-@section('meta_description', $metaDescription)
-@endif
+@php
+    $page_title = $metaTitle ?? config('news.rss_title', 'News');
+    $page_meta_description = $metaDescription ?? config('news.rss_description', 'Latest announcements and community updates from Skinbase.');
+    $page_canonical = $metaCanonical ?? url()->current();
+    $page_robots = $metaRobots ?? 'index,follow';
+@endphp
 
 @section('content')
     @yield('news_content')

resources/views/news/show.blade.php

@@ -1,10 +1,22 @@
 @extends('news.layout', [
     'metaTitle'       => $article->meta_title ?: $article->title,
     'metaDescription' => $article->meta_description ?: Str::limit(strip_tags((string)$article->excerpt), 160),
+    'metaCanonical'   => route('news.show', $article->slug),
 ])
 
 @section('news_content')
 
+@php
+    $headerBreadcrumbs = collect([
+        (object) ['name' => 'Community', 'url' => route('community.activity')],
+        (object) ['name' => 'Announcements', 'url' => route('news.index')],
+        $article->category
+            ? (object) ['name' => $article->category->name, 'url' => route('news.category', $article->category->slug)]
+            : null,
+        (object) ['name' => $article->title, 'url' => route('news.show', $article->slug)],
+    ])->filter()->values();
+@endphp
+
 {{-- OpenGraph meta --}}
 @push('head')
 <meta property="og:type"        content="article">
@@ -20,94 +32,102 @@
 @endif
 @endpush
 
-<div class="news-article">
-    <div class="container py-5">
-        <div class="row">
-            <div class="col-lg-8">
+<x-nova-page-header
+    section="Community"
+    :title="$article->title"
+    icon="fa-newspaper"
+    :breadcrumbs="$headerBreadcrumbs"
+    :description="$article->excerpt ? Str::limit(strip_tags((string) $article->excerpt), 180) : 'Latest Skinbase announcement and community update.'"
+    headerClass="pb-6"
+>
+    <x-slot name="actions">
+        <div class="flex flex-wrap items-center gap-2 text-sm text-white/60">
+            @if($article->category)
+                <a href="{{ route('news.category', $article->category->slug) }}" class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1.5 text-sky-200">{{ $article->category->name }}</a>
+            @endif
+            <span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5">
+                <i class="fa-regular fa-clock text-xs"></i>
+                {{ $article->reading_time }} min read
+            </span>
+        </div>
+    </x-slot>
+</x-nova-page-header>
 
-                {{-- Cover image --}}
-                @if($article->cover_url)
-                    <img src="{{ $article->cover_url }}" class="img-fluid rounded mb-4 w-100"
-                         alt="{{ $article->title }}" style="max-height:450px;object-fit:cover;">
-                @endif
+<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
+    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
+        <article class="min-w-0">
+            @if($article->cover_url)
+                <div class="overflow-hidden rounded-[32px] border border-white/[0.06] bg-black/20 shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
+                    <img src="{{ $article->cover_url }}" alt="{{ $article->title }}" class="h-auto max-h-[520px] w-full object-cover">
+                </div>
+            @endif
 
-                {{-- Meta --}}
-                <div class="d-flex align-items-center mb-3 text-muted small">
-                    @if($article->category)
-                        <a href="{{ route('news.category', $article->category->slug) }}"
-                           class="badge badge-primary mr-2">{{ $article->category->name }}</a>
-                    @endif
-                    <span>{{ $article->author?->name }}</span>
-                    <span class="mx-2">&middot;</span>
+            <div class="mt-6 rounded-[32px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] p-6 shadow-[0_18px_45px_rgba(0,0,0,0.2)] sm:p-8">
+                <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
+                    <span>{{ $article->author?->name ?? 'Skinbase' }}</span>
                     <span>{{ $article->published_at?->format('d M Y') }}</span>
-                    <span class="mx-2">&middot;</span>
-                    <span><i class="fas fa-clock mr-1"></i>{{ $article->reading_time }} min read</span>
-                    <span class="mx-2">&middot;</span>
-                    <span><i class="fas fa-eye mr-1"></i>{{ number_format($article->views) }}</span>
+                    <span>{{ number_format((int) $article->views) }} views</span>
                 </div>
 
-                <h1 class="mb-3">{{ $article->title }}</h1>
-
                 @if($article->excerpt)
-                    <p class="lead text-muted mb-4">{{ $article->excerpt }}</p>
+                    <p class="mt-5 text-lg leading-8 text-white/65">{{ $article->excerpt }}</p>
                 @endif
 
-                <div class="news-content">
+                <div class="prose prose-invert prose-sky mt-8 max-w-none prose-p:text-white/72 prose-li:text-white/70 prose-strong:text-white prose-a:text-sky-300 hover:prose-a:text-sky-200 prose-headings:text-white">
                     {!! $article->content !!}
                 </div>
 
-                {{-- Tags --}}
                 @if($article->tags->isNotEmpty())
-                    <div class="mt-4">
-                        <strong><i class="fas fa-tags mr-1"></i></strong>
+                    <div class="mt-8 flex flex-wrap gap-2 border-t border-white/[0.06] pt-6">
                         @foreach($article->tags as $tag)
-                            <a href="{{ route('news.tag', $tag->slug) }}"
-                               class="badge badge-secondary mr-1">{{ $tag->name }}</a>
+                            <a href="{{ route('news.tag', $tag->slug) }}" class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/60 transition hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-white">#{{ $tag->name }}</a>
                         @endforeach
                     </div>
                 @endif
 
-                {{-- Share buttons --}}
-                <div class="mt-4 pt-4 border-top">
-                    <strong>Share:</strong>
-                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}"
-                       class="btn btn-sm btn-info ml-2" target="_blank" rel="noopener noreferrer">
-                        <i class="fab fa-twitter"></i> Twitter
+                <div class="mt-8 flex flex-wrap items-center gap-3 border-t border-white/[0.06] pt-6">
+                    <span class="text-sm font-medium text-white/55">Share</span>
+                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}" class="inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-500/10 px-4 py-2 text-sm text-sky-200 transition hover:bg-sky-500/15" target="_blank" rel="noopener noreferrer">
+                        <i class="fab fa-twitter text-xs"></i>
+                        Twitter
                     </a>
-                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
-                       class="btn btn-sm btn-primary ml-2" target="_blank" rel="noopener noreferrer">
-                        <i class="fab fa-facebook"></i> Facebook
+                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" class="inline-flex items-center gap-2 rounded-full border border-blue-400/20 bg-blue-500/10 px-4 py-2 text-sm text-blue-200 transition hover:bg-blue-500/15" target="_blank" rel="noopener noreferrer">
+                        <i class="fab fa-facebook text-xs"></i>
+                        Facebook
                     </a>
                 </div>
 
-                {{-- Forum discussion link --}}
                 @if($article->forum_thread_id)
-                    <div class="mt-4 alert alert-secondary">
-                        <i class="fas fa-comments mr-2"></i>
-                        <strong>Join the discussion:</strong>
-                        <a href="{{ url('/forum/thread/discussion-' . $article->slug) }}" class="ml-1">
+                    <div class="mt-6 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-4 text-sm text-emerald-100/90">
+                        <div class="flex flex-wrap items-center gap-2">
+                            <i class="fa-solid fa-comments text-xs"></i>
+                            <span class="font-medium">Join the discussion</span>
+                        </div>
+                        <a href="{{ url('/forum/thread/discussion-' . $article->slug) }}" class="mt-2 inline-flex items-center gap-2 text-emerald-200 transition hover:text-white">
                             Discussion: {{ $article->title }}
+                            <i class="fa-solid fa-arrow-right text-[11px]"></i>
                         </a>
                     </div>
                 @endif
+            </div>
 
-                {{-- Related articles --}}
-                @if($related->isNotEmpty())
-                    <div class="mt-5">
-                        <h4 class="mb-3">Related Articles</h4>
-                        <div class="row">
-                            @foreach($related as $rel)
-                                <div class="col-sm-6 mb-3">
-                                    @include('news._article_card', ['article' => $rel])
-                                </div>
-                            @endforeach
-                        </div>
+            @if($related->isNotEmpty())
+                <section class="mt-8">
+                    <div class="mb-4 flex items-center justify-between gap-3">
+                        <h2 class="text-lg font-semibold text-white/90">Related Articles</h2>
                     </div>
-                @endif
+                    <div class="grid gap-5 md:grid-cols-2">
+                        @foreach($related as $rel)
+                            @include('news._article_card', ['article' => $rel])
+                        @endforeach
+                    </div>
+                </section>
+            @endif
+        </article>
 
-            </div>{{-- col-lg-8 --}}
-
-        </div>
+        <aside class="space-y-4">
+            @include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
+        </aside>
     </div>
 </div>
 @endsection

resources/views/news/tag.blade.php

@@ -1,29 +1,44 @@
 @extends('news.layout', [
     'metaTitle' => '#' . $tag->name . ' — News',
+    'metaDescription' => 'Announcements tagged with ' . $tag->name . '.',
+    'metaCanonical' => route('news.tag', $tag->slug),
 ])
 
 @section('news_content')
-<div class="container py-5">
-    <h1 class="mb-4">
-        <i class="fas fa-tag mr-2"></i>#{{ $tag->name }}
-    </h1>
+@php
+    $headerBreadcrumbs = collect([
+        (object) ['name' => 'Community', 'url' => route('community.activity')],
+        (object) ['name' => 'Announcements', 'url' => route('news.index')],
+        (object) ['name' => '#' . $tag->name, 'url' => route('news.tag', $tag->slug)],
+    ]);
+@endphp
 
-    <div class="row">
-        <div class="col-lg-8">
-            <div class="row">
-            @forelse($articles as $article)
-                <div class="col-sm-6 mb-4">
-                    @include('news._article_card', ['article' => $article])
+<x-nova-page-header
+    section="Community"
+    :title="'#' . $tag->name"
+    icon="fa-tag"
+    :breadcrumbs="$headerBreadcrumbs"
+    :description="'Stories and announcements tagged with #' . $tag->name . '.'"
+    headerClass="pb-6"
+/>
+
+<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
+    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
+        <section>
+            @if($articles->isEmpty())
+                <div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">No articles are using this tag yet.</div>
+            @else
+                <div class="grid gap-5 md:grid-cols-2">
+                    @foreach($articles as $article)
+                        @include('news._article_card', ['article' => $article])
+                    @endforeach
                 </div>
-            @empty
-                <div class="col-12 text-center text-muted py-5">No articles with this tag.</div>
-            @endforelse
-            </div>
-            <div class="mt-3">{{ $articles->links() }}</div>
-        </div>
-        <div class="col-lg-4">
-            @include('news._sidebar', ['categories' => $categories])
-        </div>
+                <div class="mt-8 flex justify-center">{{ $articles->links() }}</div>
+            @endif
+        </section>
+        <aside class="space-y-4">
+            @include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
+        </aside>
     </div>
 </div>
 @endsection