404lab 2.0.1 → 2.0.2

package/templates/Terminal404.tsx

@@ -1,268 +1,150 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/components/ui/cn";
 
-const Terminal404 = () => {
-  const [text, setText] = useState("");
-  const [commandVisible, setCommandVisible] = useState(false);
-  const [cursorBlink, setCursorBlink] = useState(true);
+const Terminal404 = ({ className }: { className?: string }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [displayText, setDisplayText] = useState("");
+  const [isDecrypted, setIsDecrypted] = useState(false);
 
   useEffect(() => {
-    const message = "$ ERROR 404 | Page not found in the digital void";
-    let i = 0;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
-    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-gradient-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);
-          }
-        }
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
 
-        .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;
-        }
+    const characters = "0123456789ABCDEFHIJKLMNOPQRSTUVWXYZ";
+    const fontSize = 16;
+    const columns = canvas.width / fontSize;
+    const drops: number[] = [];
 
-        .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;
-        }
+    for (let i = 0; i < columns; i++) {
+      drops[i] = 1;
+    }
 
-        .cursor.hidden {
-          opacity: 0;
-        }
+    const draw = () => {
+      ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-        .command-line {
-          font-size: 1.25rem;
-          line-height: 1.7;
-          animation: fadeInUp 0.6s ease-out forwards;
-          opacity: 0;
-        }
+      ctx.fillStyle = "#0F0";
+      ctx.font = fontSize + "px monospace";
 
-        .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;
-        }
+      for (let i = 0; i < drops.length; i++) {
+        const text = characters.charAt(Math.floor(Math.random() * characters.length));
+        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
 
-        .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);
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+          drops[i] = 0;
         }
+        drops[i]++;
+      }
+    };
+
+    const interval = setInterval(draw, 33);
+    const handleResize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
 
-        .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>
+  useEffect(() => {
+    const target = "404 // ACCESS DENIED";
+    let iterations = 0;
+    
+    const interval = setInterval(() => {
+      setDisplayText(prev => 
+        target.split("").map((char, index) => {
+          if (index < iterations) return target[index];
+          return "0123456789ABCDEF"[Math.floor(Math.random() * 16)];
+        }).join("")
+      );
+
+      if (iterations >= target.length) {
+        clearInterval(interval);
+        setIsDecrypted(true);
+      }
+      iterations += 1/3;
+    }, 30);
 
-          {commandVisible && (
-            <>
-              <div className="command-line mb-4 text-xs sm:text-sm">
-                <span className="text-green-400">$</span> searching through
-                dimensional rift...
-              </div>
+    return () => clearInterval(interval);
+  }, []);
 
-              <div className="command-line mb-4 text-xs sm:text-sm">
-                <span className="text-green-400">$</span> [404_VOID_DETECTED]
-                attempting recovery protocol
-              </div>
+  return (
+    <div
+      className={cn(
+        "min-h-screen bg-black flex flex-col items-center justify-center p-8 overflow-hidden font-mono relative",
+        className
+      )}
+    >
+      <canvas 
+        ref={canvasRef} 
+        className="absolute inset-0 z-0 opacity-20 pointer-events-none" 
+      />
+
+      <div className="absolute inset-0 z-1 pointer-events-none bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.8)_100%)]" />
+
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="z-10 w-full max-w-4xl bg-black/40 backdrop-blur-sm border border-[#0f0]/20 p-8 sm:p-12 rounded-lg shadow-[0_0_50px_rgba(0,255,0,0.1)] relative overflow-hidden group"
+      >
+        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#0f0]/40 to-transparent" />
+        
+        <div className="flex items-center gap-2 mb-8 text-[#0f0]/60 text-xs sm:text-sm tracking-widest uppercase">
+          <div className="w-2 h-2 bg-[#0f0] rounded-full animate-pulse" />
+          System Status: Breach Detected
+        </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>
+        <h1 className="text-3xl sm:text-6xl font-bold text-[#0f0] mb-6 tracking-tighter drop-shadow-[0_0_15px_rgba(0,255,0,0.5)] min-h-[1.2em]">
+          {displayText}
+        </h1>
+
+        <p className="text-[#0f0]/80 text-lg sm:text-xl md:text-2xl mb-12 max-w-2xl leading-relaxed">
+          The node you are attempting to ping is non-responsive. 
+          The packets have been lost in the digital aether.
+        </p>
+
+        <div className="flex flex-col sm:flex-row gap-6">
+          <Link
+            href="/"
+            className="px-8 py-4 bg-[#0f0] text-black font-black uppercase tracking-tighter hover:bg-[#00cc00] transition-colors flex items-center justify-center gap-2 group/btn active:scale-95"
+          >
+            Terminal Home
+            <span className="group-hover/btn:translate-x-1 transition-transform">_</span>
+          </Link>
+          <button className="px-8 py-4 border border-[#0f0]/40 text-[#0f0] font-bold uppercase tracking-widest hover:bg-[#0f0]/5 transition-colors">
+            Brute Force Recovery
+          </button>
+        </div>
 
-              <div className="mb-4 text-sm opacity-80">
-                Type &apos;help&apos; for available commands...
-              </div>
-            </>
-          )}
+        <div className="mt-12 pt-8 border-t border-[#0f0]/10 grid grid-cols-2 md:grid-cols-4 gap-4 text-[10px] text-[#0f0]/40 font-bold uppercase tracking-wider">
+          <div>IP: 127.0.0.1</div>
+          <div>Port: 404</div>
+          <div>Hash: MD5(VOID)</div>
+          <div>Sig: 0xDEADBEEF</div>
         </div>
 
-        <Link href="/" className="link-button">
-          → Return to homepage
-        </Link>
+        <div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#0f0]/20 to-transparent" />
+      </motion.div>
+
+      <div className="absolute bottom-6 right-6 text-[#0f0]/20 text-sm italic pointer-events-none">
+        root@void:/# _
       </div>
-    </main>
+    </div>
   );
 };
 
 export default Terminal404;
+

package/templates/Vercel.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { cn } from "@/components/ui/cn";
+import { useEffect, useState } from "react";
+
+const allLogs = [
+  "Compiling page /404...",
+  "Analyzing dependencies...",
+  "Error: Module not found",
+  "Deployment failed [404]"
+];
+
+const Vercel = ({ className }: { className?: string }) => {
+  const [logs, setLogs] = useState<{ text: string, time: string }[]>([]);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    let i = 0;
+    const interval = setInterval(() => {
+      if (i < allLogs.length) {
+        const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+        setLogs(prev => [...prev, { text: allLogs[i], time }]);
+        i++;
+      } else {
+        clearInterval(interval);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "min-h-screen bg-black text-white flex flex-col items-center justify-center p-8 overflow-hidden font-sans relative",
+        className
+      )}
+    >
+      <div className="absolute inset-0 z-0 opacity-20 [background-image:radial-gradient(#333_1px,transparent_1px)] [background-size:40px_40px]" />
+      
+      <div className="relative z-10 w-full max-w-2xl flex flex-col items-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className="mb-16"
+        >
+          <svg width="80" height="80" viewBox="0 0 75 65" fill="none">
+            <path d="M37.5 0L75 65H0L37.5 0Z" fill="white" />
+          </svg>
+        </motion.div>
+
+        <div className="text-center mb-16">
+          <motion.h1 
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-8xl sm:text-9xl font-bold tracking-tighter mb-4"
+          >
+            404
+          </motion.h1>
+          <motion.p 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+            className="text-gray-400 text-lg sm:text-xl font-medium"
+          >
+            This deployment could not be found.
+          </motion.p>
+        </div>
+
+        <div className="w-full bg-[#111] border border-white/10 rounded-lg p-6 font-mono text-sm mb-12 shadow-2xl">
+          <div className="flex gap-2 mb-4 border-b border-white/5 pb-4">
+            <div className="w-3 h-3 rounded-full bg-red-500" />
+            <div className="w-3 h-3 rounded-full bg-[#333]" />
+            <div className="w-3 h-3 rounded-full bg-[#333]" />
+          </div>
+          <div className="space-y-2">
+            {logs.map((log, i) => (
+              <motion.div 
+                key={i}
+                initial={{ opacity: 0, x: -5 }}
+                animate={{ opacity: 1, x: 0 }}
+                className={cn(
+                  "flex gap-4",
+                  log.text.includes("Error") || log.text.includes("failed") ? "text-red-400" : "text-gray-400"
+                )}
+              >
+                <span className="text-gray-600">[{log.time}]</span>
+                <span>{log.text}</span>
+              </motion.div>
+            ))}
+            <motion.span 
+              animate={{ opacity: [1, 0] }}
+              transition={{ repeat: Infinity, duration: 0.8 }}
+              className="inline-block w-2 h-4 bg-white/40 ml-1"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col sm:flex-row gap-4 w-full">
+          <Link
+            href="/"
+            className="flex-1 bg-white text-black font-bold py-4 rounded-md text-center hover:bg-gray-200 transition-colors active:scale-95 shadow-lg shadow-white/5"
+          >
+            View Documentation
+          </Link>
+          <button className="flex-1 border border-white/10 text-white font-bold py-4 rounded-md hover:bg-white/5 transition-colors active:scale-95">
+            Check Status
+          </button>
+        </div>
+
+        <div className="mt-20 flex gap-8 text-[10px] text-gray-600 font-bold uppercase tracking-widest">
+          <div className="flex items-center gap-2">
+            <div className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />
+            Vercel System
+          </div>
+          <div>Region: SFO1</div>
+          <div>ID: 404-VOID</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Vercel;