404lab 1.0.0

package/templates/Terminal404.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+const Terminal404 = () => {
+  const [text, setText] = useState("");
+  const [commandVisible, setCommandVisible] = useState(false);
+  const [cursorBlink, setCursorBlink] = useState(true);
+
+  useEffect(() => {
+    const message = "$ ERROR 404 | Page not found in the digital void";
+    let i = 0;
+
+    const interval = setInterval(() => {
+      setText(message.slice(0, i));
+      i++;
+      if (i > message.length) {
+        clearInterval(interval);
+        setTimeout(() => setCommandVisible(true), 500);
+      }
+    }, 50);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const blink = setInterval(() => {
+      setCursorBlink((prev) => !prev);
+    }, 530);
+    return () => clearInterval(blink);
+  }, []);
+
+  return (
+    <main className="min-h-screen w-full bg-black p-8 font-mono overflow-hidden relative">
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-black opacity-20"></div>
+        <div className="absolute inset-0 scanlines"></div>
+      </div>
+
+      <style jsx>{`
+        @keyframes glitch {
+          0% {
+            clip-path: inset(40% 0 61% 0);
+            transform: translate(0);
+          }
+          20% {
+            clip-path: inset(92% 0 1% 0);
+            transform: translate(-2px, 2px);
+          }
+          40% {
+            clip-path: inset(43% 0 1% 0);
+            transform: translate(-2px, -2px);
+          }
+          60% {
+            clip-path: inset(25% 0 58% 0);
+            transform: translate(2px, 2px);
+          }
+          80% {
+            clip-path: inset(54% 0 7% 0);
+            transform: translate(2px, -2px);
+          }
+          100% {
+            clip-path: inset(58% 0 43% 0);
+            transform: translate(0);
+          }
+        }
+
+        @keyframes flicker {
+          0%,
+          19%,
+          21%,
+          23%,
+          25%,
+          54%,
+          56%,
+          100% {
+            opacity: 1;
+            text-shadow:
+              0 0 10px rgba(31, 240, 66, 0.8),
+              0 0 20px rgba(31, 240, 66, 0.6),
+              0 0 30px rgba(31, 240, 66, 0.4);
+          }
+          20%,
+          24%,
+          55% {
+            opacity: 0.8;
+            text-shadow:
+              0 0 5px rgba(31, 240, 66, 0.4),
+              0 0 10px rgba(31, 240, 66, 0.2);
+          }
+        }
+
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes pulse-glow {
+          0%,
+          100% {
+            text-shadow:
+              0 0 10px rgba(31, 240, 66, 0.8),
+              0 0 20px rgba(31, 240, 66, 0.5),
+              0 0 30px rgba(31, 240, 66, 0.3);
+          }
+          50% {
+            text-shadow:
+              0 0 15px rgba(31, 240, 66, 1),
+              0 0 30px rgba(31, 240, 66, 0.7),
+              0 0 45px rgba(31, 240, 66, 0.4);
+          }
+        }
+
+        @keyframes typewriter {
+          from {
+            width: 0;
+          }
+          to {
+            width: 100%;
+          }
+        }
+
+        .scanlines {
+          background: repeating-linear-gradient(
+            0deg,
+            rgba(0, 0, 0, 0.15),
+            rgba(0, 0, 0, 0.15) 1px,
+            transparent 1px,
+            transparent 2px
+          );
+          pointer-events: none;
+          animation: scanlines 8s linear infinite;
+        }
+
+        @keyframes scanlines {
+          0% {
+            transform: translateY(0);
+          }
+          100% {
+            transform: translateY(10px);
+          }
+        }
+
+        .terminal-text {
+          color: #1ff042;
+          font-size: 1.4rem;
+          line-height: 1.8;
+          text-shadow:
+            0 0 10px rgba(31, 240, 66, 0.8),
+            0 0 20px rgba(31, 240, 66, 0.5),
+            0 0 30px rgba(31, 240, 66, 0.3);
+          animation: flicker 4s infinite;
+        }
+
+        .cursor {
+          display: inline-block;
+          width: 1em;
+          height: 1.4em;
+          background: #1ff042;
+          margin-left: 4px;
+          box-shadow:
+            0 0 10px rgba(31, 240, 66, 0.8),
+            0 0 20px rgba(31, 240, 66, 0.5);
+          animation: pulse-glow 1.5s ease-in-out infinite;
+        }
+
+        .cursor.hidden {
+          opacity: 0;
+        }
+
+        .command-line {
+          font-size: 1.25rem;
+          line-height: 1.7;
+          animation: fadeInUp 0.6s ease-out forwards;
+          opacity: 0;
+        }
+
+        .command-line:nth-child(1) {
+          animation-delay: 0s;
+        }
+        .command-line:nth-child(2) {
+          animation-delay: 0.3s;
+        }
+        .command-line:nth-child(3) {
+          animation-delay: 0.6s;
+        }
+
+        .link-button {
+          display: inline-block;
+          margin-top: 2rem;
+          padding: 1rem 2rem;
+          border: 2px solid #1ff042;
+          color: #1ff042;
+          background: rgba(31, 240, 66, 0.05);
+          text-decoration: none;
+          font-size: 1.15rem;
+          font-weight: 600;
+          letter-spacing: 0.12em;
+          transition: all 200ms ease;
+          animation: fadeInUp 0.6s ease-out 0.9s forwards;
+          opacity: 0;
+          cursor: pointer;
+        }
+
+        .link-button:hover {
+          background: rgba(31, 240, 66, 0.15);
+          box-shadow: 0 0 20px rgba(31, 240, 66, 0.6);
+          text-shadow:
+            0 0 10px rgba(31, 240, 66, 0.8),
+            0 0 20px rgba(31, 240, 66, 0.6);
+          transform: translateY(-2px);
+        }
+
+        .link-button:active {
+          transform: translateY(0);
+        }
+      `}</style>
+
+      <div className="relative z-10 max-w-3xl">
+        <div className="terminal-text font-bold tracking-wider">
+          <div className="mb-6">
+            <span className="inline">{text}</span>
+            <span
+              className={`cursor ${cursorBlink ? "" : "hidden"}`}
+              aria-hidden="true"
+            />
+          </div>
+
+          {commandVisible && (
+            <>
+              <div className="command-line mb-4 text-xs sm:text-sm">
+                <span className="text-green-400">$</span> searching through
+                dimensional rift...
+              </div>
+
+              <div className="command-line mb-4 text-xs sm:text-sm">
+                <span className="text-green-400">$</span> [404_VOID_DETECTED]
+                attempting recovery protocol
+              </div>
+
+              <div className="command-line mb-6 text-xs sm:text-sm">
+                <span className="text-green-400">$</span> [FAILED] page lost in
+                the digital void
+              </div>
+
+              <div className="mb-4 text-sm opacity-80">
+                Type &apos;help&apos; for available commands...
+              </div>
+            </>
+          )}
+        </div>
+
+        <Link href="/" className="link-button">
+          → Return to homepage
+        </Link>
+      </div>
+    </main>
+  );
+};
+
+export default Terminal404;