feat(not-found): add click-to-copy functionality to 404 terminal (JhaSourav07#1880)

## Description

Fixes JhaSourav07#1798

This PR adds click-to-copy functionality to the custom 404 terminal
page, making the terminal block interactive and allowing users to easily
copy the displayed terminal output.

### Changes Made

* Added clipboard copy support using `navigator.clipboard.writeText()`
* Added success notification using the existing Sonner toast system
* Added error handling for clipboard failures
* Added hover and pointer states to indicate clickability
* Added a "Click to copy" indicator in the terminal header
* Preserved the existing UI and terminal aesthetics

## Pillar

* [ ] 🎨 Pillar 1 — New Theme Design
* [ ] 📐 Pillar 2 — Geometric SVG Improvement
* [ ] 🕐 Pillar 3 — Timezone Logic Optimization
* [x] 🛠️ Other (Bug fix, refactoring, docs)

## Checklist

* [x] I have read the CONTRIBUTING.md file
* [x] I have tested these changes locally
* [x] I have run formatting and build checks
* [x] My commit follows the Conventional Commits format
* [x] This change does not introduce breaking changes
* [x] The UI remains consistent with the existing design system

## Visual Preview

### Before

Users had to manually highlight and copy terminal content.

### After

Users can click anywhere on the terminal block to instantly copy the
terminal output and receive visual feedback through a toast
notification.

### Screenshots
<img width="1920" height="1020" alt="Screenshot 2026-05-31 004706"
src="https://github.com/user-attachments/assets/69cee3c7-093e-492e-8f94-35531580ecf6"
/>
<img width="1707" height="744" alt="Screenshot 2026-05-31 004728"
src="https://github.com/user-attachments/assets/1bc756d3-ecdb-4944-80f1-c1e7661cd361"
/>

Author: JhaSourav07

app/not-found.tsx

@@ -1,8 +1,25 @@
+'use client';
 import Link from 'next/link';
 
+import { toast } from 'sonner';
 export default function NotFound() {
+  const terminalContent = `git checkout this-page
+
+ The page you're looking for has been rebased out of existence. No stash. No reflog. Just vibes.
+
+ hint: Did you mean some other username?`;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(terminalContent);
+      toast.success('Terminal output copied!');
+    } catch {
+      toast.error('Failed to copy terminal output');
+    }
+  };
+
   return (
-    <main className="relative min-h-screen  text-white overflow-hidden flex flex-col items-center font-sans ">
+    <main className="relative min-h-screen text-white overflow-hidden flex flex-col items-center font-sans">
       <div
         aria-hidden="true"
         className="pointer-events-none fixed inset-0"
@@ -14,8 +31,8 @@ export default function NotFound() {
       />
 
       <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
-        <div className="absolute top-[-10%] left-[20%] h-screen w-screen rounded-full  blur-[140px]" />
-        <div className="absolute bottom-[-10%] right-[15%] h-screen w-screen rounded-full  blur-[120px]" />
+        <div className="absolute top-[-10%] left-[20%] h-screen w-screen rounded-full blur-[140px]" />
+        <div className="absolute bottom-[-10%] right-[15%] h-screen w-screen rounded-full blur-[120px]" />
       </div>
 
       <div className="relative z-10 flex flex-col items-center justify-start gap-8 max-w-lg w-full text-center">
@@ -38,12 +55,16 @@ export default function NotFound() {
           </h1>
         </div>
 
-        <div className="w-full rounded-2xl border border-white/10 bg-white/3 backdrop-blur-md overflow-hidden ">
+        <div
+          onClick={handleCopy}
+          className="w-full rounded-2xl border border-white/10 bg-white/3 backdrop-blur-md overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-200"
+        >
           <div className="flex items-center gap-2 border-b border-white/10 bg-white/4 px-4 py-3">
             <span className="h-3 w-3 rounded-full bg-red-500/70" />
             <span className="h-3 w-3 rounded-full bg-yellow-500/70" />
             <span className="h-3 w-3 rounded-full bg-green-500/70" />
             <span className="ml-3 text-xs font-mono text-white/30">commitpulse — bash</span>
+            <span className="ml-auto text-xs text-white/40">Click to copy</span>
           </div>
 
           <div className="px-6 py-5 font-mono text-sm text-left space-y-2">
@@ -54,12 +75,14 @@ export default function NotFound() {
                 git checkout <span className="text-cyan-400">this-page</span>
               </span>
             </p>
-            <p className="text-red-400/80 ">
-              {' '}
+
+            <p className="text-red-400/80">
               The page you&apos;re looking for has been rebased out of existence. No stash. No
               reflog. Just vibes.
             </p>
+
             <p className="text-white/30 text-xs mt-1">hint: Did you mean some other username?</p>
+
             <p className="flex items-center gap-1 pt-1">
               <span className="text-violet-400">~</span>
               <span className="text-white/40"> $ </span>
@@ -81,15 +104,14 @@ export default function NotFound() {
           >
             git checkout main
           </Link>
+
           <Link
             href="/"
             className="flex-1 py-3 rounded-xl font-semibold text-sm text-white/60 text-center border border-white/10 hover:bg-white/5 hover:text-white transition-all"
           >
             Go back home
           </Link>
         </div>
-
-        {/* <p className="text-white/20 text-xs font-mono">exit code 404 · no such file or directory</p> */}
       </div>
     </main>
   );