404lab 2.0.1 → 2.0.2

package/templates/BlueGlitch.tsx

@@ -1,129 +1,219 @@
 "use client";
 
-const BlueGlitch = () => {
-  return (
-    <main className="min-h-screen flex items-center justify-center bg-[#000084] text-[#bbb]">
-      <div className="notfound">
-        <div className="centered">
-          <span className="inverted">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          </span>
-        </div>
-
-        <div className="centered">
-          <span className="inverted">&nbsp;4&nbsp;0&nbsp;4&nbsp;</span>
-          <span className="shadow">&nbsp;</span>
-        </div>
-
-        <div className="centered">
-          <span className="inverted">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          </span>
-          <span className="shadow">&nbsp;</span>
-        </div>
-
-        <div className="centered">
-          &nbsp;
-          <span className="shadow">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          </span>
-        </div>
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import Link from "next/link";
+import { cn } from "@/components/ui/cn";
+
+const BlueGlitch = ({
+  fullScreen = true,
+  className,
+}: {
+  fullScreen?: boolean;
+  className?: string;
+}) => {
+  const [bootStep, setBootStep] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setBootStep((prev) => (prev < 8 ? prev + 1 : prev));
+    }, 400);
+    return () => clearInterval(timer);
+  }, []);
 
-        <div className="row">&nbsp;</div>
-        <div className="row">
-          A fatal exception 404 has occurred at C0DE:ABAD1DEA in 0xC0DEBA5E.
-        </div>
-        <div className="row">The current request will be terminated.</div>
-        <div className="row">&nbsp;</div>
-        <div className="row">
-          * Press any key to return to the previous page.
-        </div>
-        <div className="row">
-          * Press CTRL+R to restart your server. You will
-        </div>
-        <div className="row">
-          &nbsp;&nbsp;lose any unsaved information in all applications.
-        </div>
-        <div className="row">&nbsp;</div>
-
-        <div className="centered">
-          Please refresh the page...Or Return to safety&nbsp;
-          <span className="blink">█</span>
-        </div>
-      </div>
-
-      {/* ALL CSS INLINE */}
-      <style jsx>{`
-        * {
-          box-sizing: border-box;
+  return (
+    <main
+      className={cn(
+        "relative flex items-center justify-center bg-[#000084] overflow-hidden select-none font-mono",
+        fullScreen ? "min-h-screen" : "h-full",
+        className
+      )}
+    >
+      <style jsx global>{`
+        @font-face {
+          font-family: 'DOS-VGA';
+          src: url('https://fonts.cdnfonts.com/s/17263/Perfect%20DOS%20VGA%20437.woff') format('woff');
         }
 
-        .notfound {
-          width: 70ch;
-          height: 25ch;
-          background-color: #000084;
-          font-family: "more_perfect_dos_vgaregular", "Courier New", monospace;
-          font-size: 10px;
+        .crt-container {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background: #000084;
+          display: flex;
+          flex-direction: column;
+          padding: 2rem;
+          box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
         }
 
-        @media (min-width: 600px) {
-          .notfound {
-            font-size: 16px;
-          }
+        .crt-container::before {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+          z-index: 10;
+          background-size: 100% 2px, 3px 100%;
+          pointer-events: none;
         }
 
-        @media (min-width: 900px) {
-          .notfound {
-            font-size: 24px;
-            font-weight: 400;
-          }
+        .crt-container::after {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background: rgba(18, 16, 16, 0.1);
+          opacity: 0;
+          z-index: 10;
+          pointer-events: none;
+          animation: flicker 0.15s infinite;
         }
 
-        .row {
-          text-align: left;
+        @keyframes flicker {
+          0% { opacity: 0.27861; }
+          5% { opacity: 0.34769; }
+          10% { opacity: 0.23604; }
+          15% { opacity: 0.90626; }
+          20% { opacity: 0.18128; }
+          25% { opacity: 0.83891; }
+          30% { opacity: 0.65583; }
+          35% { opacity: 0.57807; }
+          40% { opacity: 0.26559; }
+          45% { opacity: 0.84693; }
+          50% { opacity: 0.96019; }
+          55% { opacity: 0.08523; }
+          60% { opacity: 0.71056; }
+          65% { opacity: 0.73437; }
+          70% { opacity: 0.28557; }
+          75% { opacity: 0.96303; }
+          80% { opacity: 0.2268; }
+          85% { opacity: 0.20415; }
+          90% { opacity: 0.85617; }
+          95% { opacity: 0.41032; }
+          100% { opacity: 0.9576; }
         }
 
-        .centered {
-          text-align: center;
+        .dos-font {
+          font-family: 'DOS-VGA', monospace;
+          color: #bbb;
+          text-shadow: 2px 2px 0px #000;
         }
 
-        .inverted {
+        .inverted-box {
           background-color: #bbb;
           color: #000084;
+          padding: 0 10px;
+          display: inline-block;
+          text-shadow: none;
         }
 
-        .shadow {
-          background-color: #000;
-          color: #000084;
+        .scanline {
+          width: 100%;
+          height: 100px;
+          z-index: 11;
+          background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(0, 0, 0, 0.1) 100%);
+          opacity: 0.1;
+          position: absolute;
+          bottom: 100%;
+          animation: scanline 10s linear infinite;
         }
 
-        .blink {
-          animation: blink 0.8s infinite;
+        @keyframes scanline {
+          0% { bottom: 100%; }
+          100% { bottom: -100px; }
         }
+      `}</style>
 
-        @keyframes blink {
-          0% {
-            opacity: 0;
-          }
-          49% {
-            opacity: 0;
-          }
-          50% {
-            opacity: 1;
-          }
-        }
+      <div className="crt-container max-w-5xl h-[80vh] border-8 border-double border-[#bbb]/20 rounded-lg overflow-hidden flex flex-col items-center justify-center">
+        <div className="scanline" />
+        
+        <div className="w-full max-w-3xl dos-font text-xs sm:text-lg lg:text-xl space-y-4">
+          <div className="text-center mb-8">
+            <motion.div 
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              className="inline-block"
+            >
+              <div className="inverted-box text-3xl sm:text-5xl font-bold py-2 px-6">
+                WINDOWS
+              </div>
+            </motion.div>
+          </div>
+
+          <AnimatePresence>
+            {bootStep >= 1 && (
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+                A fatal exception 404 has occurred at C0DE:ABAD1DEA.
+              </motion.div>
+            )}
+            
+            {bootStep >= 2 && (
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+                * The system could not find the file you requested.
+              </motion.div>
+            )}
+
+            {bootStep >= 3 && (
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+                * Press ANY BUTTON to try finding it again in the void.
+              </motion.div>
+            )}
+
+            {bootStep >= 4 && (
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+                * Contact your network administrator if this continues.
+              </motion.div>
+            )}
+
+            {bootStep >= 5 && (
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="pt-8">
+                Current State: <span className="text-red-500 underline">ERROR_PAGE_NOT_FOUND</span>
+              </motion.div>
+            )}
+
+            {bootStep >= 6 && (
+              <motion.div 
+                initial={{ opacity: 0 }} 
+                animate={{ opacity: 1 }}
+                className="text-center pt-12"
+              >
+                Press any button to return home
+                <span className="inline-block w-3 h-6 bg-[#bbb] ml-2 animate-pulse align-middle" />
+              </motion.div>
+            )}
+
+            {bootStep >= 7 && (
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }} 
+                animate={{ opacity: 1, y: 0 }}
+                className="flex justify-center pt-8"
+              >
+                <Link
+                  href="/"
+                  className="inverted-box hover:bg-white hover:text-[#000084] transition-colors duration-200 px-8 py-2 font-bold uppercase tracking-widest text-sm sm:text-base border-2 border-transparent"
+                >
+                  Return to Safety
+                </Link>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
 
-        /* DOS VGA FONT */
-        @font-face {
-          font-family: "more_perfect_dos_vgaregular";
-          src: url("https://fonts.cdnfonts.com/s/17263/Perfect%20DOS%20VGA%20437.woff")
-            format("woff");
-          font-weight: normal;
-          font-style: normal;
-        }
-      `}</style>
+        <div className="absolute bottom-4 left-4 opacity-30 text-[10px] dos-font uppercase tracking-tighter">
+          Kernel Memory: 0x4041337 | IRQ: 07 | DMA: 02
+        </div>
+      </div>
+
+      <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.4)_100%)] z-20" />
     </main>
   );
 };
 
 export default BlueGlitch;
+

package/templates/GeeksforGeeks.tsx

@@ -1,53 +1,141 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
+import { motion } from "framer-motion";
+import { Search, GraduationCap, Code2, Terminal, BookOpen } from "lucide-react";
+import { cn } from "@/components/ui/cn";
+
+const GeeksforGeeks = ({ className }: { className?: string }) => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 },
+  };
 
-const GeeksforGeeks = () => {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-white px-4">
-      <Image
-        src="https://media.geeksforgeeks.org/auth-dashboard-uploads/Illustration.svg"
-        alt="404 Illustration"
-        width={420}
-        height={320}
-        priority
-        className="mb-8"
-      />
-
-      <h1 className="text-2xl font-semibold text-gray-900 mb-2">
-        Whoops, that page is gone.
-      </h1>
-
-      <p className="text-gray-600 text-center max-w-md mb-10">
-        While you’re here, feast your eyes upon these popular recommendations
-        for you.
-      </p>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        <Card title="Problem of the day" color="from-blue-400 to-blue-300" />
-        <Card title="Courses @90% Refund" color="from-pink-400 to-pink-300" />
-        <Card title="Interview Series" color="from-yellow-400 to-yellow-300" />
-        <Card title="Python Tutorial" color="from-green-400 to-green-300" />
-      </div>
+    <div
+      className={cn(
+        "min-h-screen flex flex-col items-center justify-center bg-[#f8f9fa] relative overflow-hidden px-4 py-12",
+        className
+      )}
+    >
+      <div className="absolute inset-0 z-0 opacity-[0.03] pointer-events-none" 
+           style={{ backgroundImage: 'radial-gradient(#2f8d46 1px, transparent 1px)', backgroundSize: '30px 30px' }} />
 
-      <Link
-        href="/"
-        className="mt-10 text-green-600 font-medium hover:underline"
+      <motion.div 
+        className="z-10 w-full max-w-5xl flex flex-col items-center"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
       >
-        Go back to Home
-      </Link>
+        <motion.div variants={itemVariants} className="mb-8">
+          <Image
+            src="https://media.geeksforgeeks.org/auth-dashboard-uploads/Illustration.svg"
+            alt="404 Illustration"
+            width={400}
+            height={300}
+            priority
+            className="w-full max-w-[380px] h-auto drop-shadow-2xl"
+          />
+        </motion.div>
+
+        <motion.h1 
+          variants={itemVariants}
+          className="text-4xl md:text-5xl font-bold text-[#2f8d46] mb-4 text-center"
+        >
+          Data Structure Not Found
+        </motion.h1>
+
+        <motion.p 
+          variants={itemVariants}
+          className="text-gray-600 text-center max-w-xl mb-12 text-lg"
+        >
+          Even the most efficient algorithms occasionally hit a null pointer. 
+          While we garbage collect this error, why not explore these popular topics?
+        </motion.p>
+
+        <motion.div 
+          variants={itemVariants}
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 w-full mb-12"
+        >
+          <Card 
+            title="DSA Self Paced" 
+            icon={<Code2 className="w-6 h-6" />}
+            color="bg-blue-50 text-blue-600 border-blue-100"
+            description="Master Data Structures"
+          />
+          <Card 
+            title="Complete Interview" 
+            icon={<GraduationCap className="w-6 h-6" />}
+            color="bg-purple-50 text-purple-600 border-purple-100"
+            description="A-Z Preparation"
+          />
+          <Card 
+            title="System Design" 
+            icon={<Terminal className="w-6 h-6" />}
+            color="bg-amber-50 text-amber-600 border-amber-100"
+            description="Scalable Architectures"
+          />
+          <Card 
+            title="Python Master" 
+            icon={<BookOpen className="w-6 h-6" />}
+            color="bg-emerald-50 text-emerald-600 border-emerald-100"
+            description="For Data Science"
+          />
+        </motion.div>
+
+        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4 items-center">
+          <div className="relative group">
+            <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
+              <Search className="w-4 h-4 text-gray-400" />
+            </div>
+            <input 
+              type="text" 
+              placeholder="Search for tutorials..."
+              className="pl-10 pr-4 py-3 bg-white border border-gray-200 rounded-full w-64 md:w-80 focus:outline-none focus:ring-2 focus:ring-[#2f8d46]/20 focus:border-[#2f8d46] transition-all shadow-sm"
+            />
+          </div>
+          
+          <Link
+            href="/"
+            className="px-8 py-3 bg-[#2f8d46] text-white font-semibold rounded-full hover:bg-[#267339] transition-all shadow-md hover:shadow-lg active:scale-95"
+          >
+            Back to Dashboard
+          </Link>
+        </motion.div>
+      </motion.div>
+
+      <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#2f8d46]/20 to-transparent" />
     </div>
   );
 };
 
-const Card = ({ title, color }: { title: string; color: string }) => {
+const Card = ({ title, icon, color, description }: { title: string; icon: React.ReactNode; color: string; description: string }) => {
   return (
-    <div
-      className={`w-64 h-36 rounded-xl bg-gradient-to-br ${color} p-5 text-white flex flex-col justify-between shadow-sm`}
+    <motion.div
+      whileHover={{ y: -8, scale: 1.02 }}
+      className={cn(
+        "p-6 rounded-2xl border bg-white flex flex-col items-center text-center shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer group"
+      )}
     >
-      <div className="font-semibold text-lg">{title}</div>
-      <span className="text-sm opacity-90">Know more →</span>
-    </div>
+      <div className={cn("p-4 rounded-xl mb-4 transition-colors group-hover:scale-110", color)}>
+        {icon}
+      </div>
+      <h3 className="font-bold text-gray-900 mb-1">{title}</h3>
+      <p className="text-sm text-gray-500">{description}</p>
+    </motion.div>
   );
 };
 
 export default GeeksforGeeks;
+

package/templates/Google.tsx

@@ -1,30 +1,98 @@
-const Google = () => {
-  return (
-    <div className="min-h-screen bg-white flex items-center justify-center">
-      <div className="w-full max-w-4xl px-8 flex items-center justify-between">
-        <div>
-          <img
-            src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
-            alt="Google"
-            className="h-9 mb-5"
-          />
-          <h1 className="text-lg font-normal text-black mb-3">
-            <span className="font-medium">404.</span>{" "}
-            <span className="text-gray-600">That''s an error.</span>
-          </h1>
-          <p className="text-gray-600 max-w-sm leading-relaxed text-sm">
-            The requested URL was not found on this server.{" "}
-            <span className="text-gray-500">That''s all we know.</span>
-          </p>
-        </div>
-        <img
-          src="https://www.google.com/images/errors/robot.png"
-          alt="Broken robot"
-          className="w-[240px] h-auto"
-        />
-      </div>
-    </div>
-  );
-};
-
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { cn } from "@/components/ui/cn";
+import Image from "next/image";
+
+
+const Google = ({ className }: { className?: string }) => {
+  return (
+    <div
+      className={cn(
+        "min-h-screen bg-white flex flex-col items-center justify-center font-sans relative overflow-hidden",
+        className
+      )}
+    >
+      <div className="absolute top-10 left-10 md:left-20">
+        <Image
+          src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
+          alt="Google"
+          width={92}
+          height={30}
+          className="opacity-80"
+        />
+      </div>
+
+      <div className="w-full max-w-5xl px-8 flex flex-col md:flex-row items-center justify-between gap-16 text-center md:text-left z-10">
+        <motion.div
+          initial={{ opacity: 0, x: -30 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+          className="max-w-md"
+        >
+          <h1 className="text-2xl md:text-3xl font-medium text-[#3c4043] mb-4">
+            <span className="font-bold text-4xl block mb-2">404.</span>
+            That&apos;s an error.
+          </h1>
+          <p className="text-[#70757a] text-lg leading-relaxed mb-10">
+            The requested URL was not found on this server.{" "}
+            <span className="text-[#3c4043] font-medium italic">That&apos;s all we know.</span>
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
+            <Link
+              href="/"
+              className="px-8 py-3 bg-[#1a73e8] text-white font-medium rounded-md hover:bg-[#185abc] hover:shadow-md transition-all active:scale-95"
+            >
+              Back to Safety
+            </Link>
+            <button className="px-8 py-3 text-[#1a73e8] font-medium rounded-md hover:bg-[#f1f3f4] transition-all">
+              Try a search
+            </button>
+          </div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8, rotate: 10 }}
+          animate={{ opacity: 1, scale: 1, rotate: 0 }}
+          transition={{ 
+            duration: 1, 
+            type: "spring", 
+            stiffness: 100,
+            delay: 0.2
+          }}
+          className="relative group"
+        >
+          <motion.div
+            animate={{ 
+              y: [0, -15, 0],
+              rotate: [0, -2, 2, 0]
+            }}
+            transition={{ 
+              duration: 6, 
+              repeat: Infinity, 
+              ease: "easeInOut" 
+            }}
+          >
+            <img
+              src="https://www.google.com/images/errors/robot.png"
+              alt="Broken robot"
+              className="w-[280px] md:w-[350px] h-auto drop-shadow-[0_20px_40px_rgba(0,0,0,0.1)] group-hover:drop-shadow-[0_30px_60px_rgba(0,0,0,0.15)] transition-all"
+            />
+          </motion.div>
+          
+          <div className="absolute -z-10 bottom-4 left-1/2 -translate-x-1/2 w-32 h-6 bg-black opacity-[0.05] rounded-full blur-xl scale-x-150 animate-pulse" />
+        </motion.div>
+      </div>
+
+      <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-[#4285F4] opacity-[0.03] rounded-full blur-3xl animate-pulse" />
+      <div className="absolute top-20 -right-24 w-80 h-80 bg-[#EA4335] opacity-[0.03] rounded-full blur-3xl" />
+      <div className="absolute bottom-20 right-40 w-48 h-48 bg-[#FBBC05] opacity-[0.03] rounded-full blur-3xl animate-bounce duration-[10s]" />
+      <div className="absolute top-40 left-1/3 w-32 h-32 bg-[#34A853] opacity-[0.03] rounded-full blur-3xl" />
+    </div>
+  );
+};
+
 export default Google;
+