fix improve custom nginx error pages

site/src/pages/404.astro

@@ -0,0 +1,51 @@
+---
+export const prerender = true;
+
+import BaseLayout from "../layouts/BaseLayout.astro";
+import CtaLink from "../components/CtaLink.astro";
+import { LINKS } from "../lib/links";
+---
+
+<BaseLayout
+  title="Page Not Found | SanthoshJ"
+  description="The page you're looking for doesn't exist. Explore tech videos, podcasts, and more."
+  canonicalPath="/404"
+>
+  <section class="error-hero">
+    <div class="error-code" aria-label="Error code">404</div>
+    <h1 class="error-title">Page not found</h1>
+    <p class="error-message">
+      The page you're looking for doesn't exist or has been moved.
+      <br />
+      Let's get you back on track.
+    </p>
+    <div class="error-actions">
+      <a href="/" class="error-btn error-btn-primary"> Go home </a>
+      <a href="/videos" class="error-btn error-btn-secondary"> Browse videos </a>
+    </div>
+    <div class="error-divider" />
+    <div class="error-suggestions">
+      <h2 class="error-suggestions-title">Popular destinations</h2>
+      <div class="error-links">
+        <CtaLink
+          platform="youtube"
+          placement="error_page"
+          url={LINKS.youtubeChannel}
+          label="YouTube"
+        />
+        <CtaLink
+          platform="podcast"
+          placement="error_page"
+          url={LINKS.podcast}
+          label="Podcast"
+        />
+        <CtaLink
+          platform="instagram"
+          placement="error_page"
+          url={LINKS.instagramProfile}
+          label="Instagram"
+        />
+      </div>
+    </div>
+  </section>
+</BaseLayout>