From dd6091d0e404d8a29295ad6c3daf0599f29133c3 Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Wed, 21 Oct 2026 10:31:52 +0300
Subject: [PATCH] feat(errors): branded 404 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Any URL that doesn't resolve to a known route or model now renders a
page that matches the app shell: header, sidebar, dark theme. The
page explains what happened in one sentence and offers three next-
step buttons — Home, Browse Videos, Watch Shorts. Previously /shorts/1
(and every other unknown URL) rendered the bare framework 404 with no
header, no navigation and no theme.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 resources/views/errors/404.blade.php | 74 ++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 resources/views/errors/404.blade.php

diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
new file mode 100644
index 0000000..e5b18c7
--- /dev/null
+++ b/resources/views/errors/404.blade.php
@@ -0,0 +1,74 @@
+@extends('layouts.app')
+
+@section('title', 'Page not found | ' . config('app.name'))
+
+@section('content')
+<style>
+    .err-404 {
+        max-width: 560px;
+        margin: 80px auto;
+        padding: 48px 32px;
+        text-align: center;
+    }
+    .err-404-emoji {
+        font-size: 72px;
+        line-height: 1;
+        margin-bottom: 12px;
+    }
+    .err-404 h1 {
+        font-size: 28px;
+        font-weight: 700;
+        margin: 0 0 10px;
+        color: var(--text-primary);
+    }
+    .err-404 p {
+        font-size: 15px;
+        color: var(--text-secondary);
+        margin: 0 0 24px;
+        line-height: 1.6;
+    }
+    .err-404-code {
+        font-size: 11px;
+        letter-spacing: .18em;
+        text-transform: uppercase;
+        color: var(--text-secondary);
+        margin-bottom: 4px;
+    }
+    .err-404-actions {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 24px;
+    }
+    @media (max-width: 480px) {
+        .err-404 { margin: 32px 12px; padding: 32px 16px; }
+        .err-404-emoji { font-size: 56px; }
+        .err-404 h1 { font-size: 22px; }
+    }
+</style>
+
+<div class="err-404">
+    <div class="err-404-emoji" aria-hidden="true">🎞️</div>
+    <div class="err-404-code">Error 404</div>
+    <h1>Can't find that one</h1>
+    <p>
+        The page or video you were looking for isn't here. It might have
+        been removed, renamed, or the link might have a typo.
+    </p>
+    <div class="err-404-actions">
+        <a href="{{ route('home') }}" class="action-btn action-btn-primary">
+            <i class="bi bi-house-door-fill" aria-hidden="true"></i>
+            <span>Back to Home</span>
+        </a>
+        <a href="{{ route('videos.index') }}" class="action-btn">
+            <i class="bi bi-grid-fill" aria-hidden="true"></i>
+            <span>Browse Videos</span>
+        </a>
+        <a href="{{ route('videos.shorts') }}" class="action-btn">
+            <i class="bi bi-lightning-charge-fill" aria-hidden="true"></i>
+            <span>Watch Shorts</span>
+        </a>
+    </div>
+</div>
+@endsection