404lab 2.0.1 → 2.0.2

package/templates/Snow.tsx

@@ -1,210 +1,144 @@
 "use client";
 
-import { useEffect, useRef } 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 Snow = () => {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+const Snow = ({ className }: { className?: string }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
 
   useEffect(() => {
-    const canvas = canvasRef.current!;
-    const ctx = canvas.getContext("2d")!;
-    let width = 0;
-    let height = 0;
-
-    interface Particle {
-      x: number;
-      y: number;
-      dx: number;
-      dy: number;
-    }
-
-    let particles: Particle[] = [];
-
-    const reset = (p: Particle) => {
-      p.y = Math.random() * height;
-      p.x = Math.random() * width;
-      p.dx = Math.random() - 0.5;
-      p.dy = Math.random() * 0.5 + 0.5;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let animationFrame: number;
+    let particles: { x: number; y: number; size: number; speed: number; opacity: number }[] = [];
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      init();
     };
 
-    function createParticles(count: number) {
+    const init = () => {
       particles = [];
+      const count = Math.floor((canvas.width * canvas.height) / 8000);
       for (let i = 0; i < count; i++) {
-        const p: Particle = { x: 0, y: 0, dx: 0, dy: 0 };
-        reset(p);
-        particles.push(p);
+        particles.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          size: Math.random() * 3 + 1,
+          speed: Math.random() * 1 + 0.5,
+          opacity: Math.random() * 0.5 + 0.3
+        });
       }
-    }
-
-    function resize() {
-      width = window.innerWidth;
-      height = window.innerHeight;
-      canvas.width = width;
-      canvas.height = height;
-      createParticles(Math.floor((width * height) / 10000));
-    }
-
-    function animate() {
-      ctx.clearRect(0, 0, width, height);
-      ctx.fillStyle = "#f6f9fa";
-
-      particles.forEach((p) => {
-        p.y += p.dy;
-        p.x += p.dx;
-
-        if (p.y > height) p.y = 0;
-        if (p.x > width) {
-          reset(p);
-          p.y = 0;
-        }
+    };
+
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = "white";
 
+      particles.forEach(p => {
+        ctx.globalAlpha = p.opacity;
         ctx.beginPath();
-        ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
         ctx.fill();
+
+        p.y += p.speed;
+        p.x += Math.sin(p.y / 50) * 0.5;
+
+        if (p.y > canvas.height) {
+          p.y = -10;
+          p.x = Math.random() * canvas.width;
+        }
       });
 
-      requestAnimationFrame(animate);
-    }
+      animationFrame = requestAnimationFrame(draw);
+    };
 
-    resize();
-    animate();
     window.addEventListener("resize", resize);
-    return () => window.removeEventListener("resize", resize);
+    resize();
+    draw();
+
+    return () => {
+      window.removeEventListener("resize", resize);
+      cancelAnimationFrame(animationFrame);
+    };
   }, []);
 
   return (
-    <div className="content">
-      <canvas ref={canvasRef} id="snow" className="snow" />
-
-      <div className="main-text">
-        <h1>
-          Aw jeez.
-          <br />
-          That page has gone missing.
+    <div
+      className={cn(
+        "min-h-screen flex flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-[#b7d1e5] via-[#e8f2f6] to-white relative",
+        className
+      )}
+    >
+      <canvas ref={canvasRef} className="absolute inset-0 z-10 pointer-events-none opacity-60" />
+
+      <div className="absolute inset-0 z-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(255,255,255,0.4)_100%)]" />
+
+      <motion.main 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="z-20 text-center px-4"
+      >
+        <h1 className="text-4xl md:text-7xl font-bold text-[#5d7399] mb-4 tracking-tight">
+          Frozen in Time.
         </h1>
-        <Link href="/" className="home-link">
-          Hitch a ride back home.
+        <p className="text-[#5d7399]/70 text-lg md:text-2xl mb-12 max-w-2xl mx-auto font-medium">
+          The page you are looking for has been buried under a heavy snowfall.
+          Let&apos;s get you somewhere warmer.
+        </p>
+        
+        <Link
+          href="/"
+          className="inline-flex items-center px-8 py-4 bg-white text-[#5d7399] font-bold rounded-full shadow-lg shadow-blue-200/50 hover:shadow-xl hover:scale-105 active:scale-95 transition-all text-lg border border-blue-50"
+        >
+          Hitch a ride back home
         </Link>
+      </motion.main>
+
+      <div className="absolute bottom-0 w-full h-[30vh] z-10">
+        <svg viewBox="0 0 1440 320" className="absolute bottom-0 w-full h-full drop-shadow-[-20px_-20px_40px_rgba(255,255,255,0.5)]">
+          <path fill="#f8f9fa" d="M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,117.3C672,117,768,171,864,197.3C960,224,1056,224,1152,202.7C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
+        </svg>
+
+        <motion.div 
+          className="absolute bottom-[10%] left-1/2 -translate-x-1/2 z-20"
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          <div className="relative group cursor-pointer">
+            <motion.h2 
+              className="text-8xl md:text-[12rem] font-black text-[#6b85b2] opacity-20 select-none tracking-tighter"
+              animate={isHovered ? { scale: 1.05, opacity: 0.3 } : {}}
+            >
+              404
+            </motion.h2>
+            
+            <motion.div 
+              className="absolute -right-12 -top-12 w-16 h-16 pointer-events-none"
+              animate={isHovered ? { rotate: [0, -20, 10, 0], x: [0, -5, 5, 0] } : {}}
+            >
+              <div className="w-1 h-20 bg-[#dd4040]/20 absolute left-1/2 -translate-x-1/2 top-0" />
+              <div className="w-10 h-8 bg-[#dd4040] absolute bottom-0 left-0 rounded-sm" />
+            </motion.div>
+          </div>
+        </motion.div>
       </div>
 
-      <div className="ground">
-        <div className="mound">
-          <div className="mound_text">404</div>
-          <div className="mound_spade" />
-        </div>
+      <div className="absolute top-10 right-10 flex gap-4 opacity-20">
+        {[1,2,3].map(i => (
+          <div key={i} className="w-12 h-1 bg-[#5d7399] rounded-full" />
+        ))}
       </div>
-
-      <style jsx>{`
-        .content {
-          height: 100vh;
-          position: relative;
-          background: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%);
-          overflow: hidden;
-          font-family: "Dosis", sans-serif;
-          font-size: 32px;
-          font-weight: 500;
-          color: #5d7399;
-        }
-
-        .snow {
-          position: absolute;
-          inset: 0;
-          pointer-events: none;
-          z-index: 20;
-        }
-
-        .main-text {
-          padding: 20vh 20px 0;
-          text-align: center;
-          line-height: 2em;
-          font-size: 5vh;
-        }
-
-        .home-link {
-          font-size: 0.6em;
-          color: inherit;
-          text-decoration: none;
-          opacity: 0.6;
-          border-bottom: 1px dashed rgba(93, 115, 153, 0.5);
-        }
-
-        .home-link:hover {
-          opacity: 1;
-        }
-
-        .ground {
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          height: 160px;
-          background: #f6f9fa;
-          box-shadow: 0 0 10px 10px #f6f9fa;
-        }
-
-        .mound {
-          margin-top: -80px;
-          font-size: 180px;
-          font-weight: 800;
-          text-align: center;
-          color: #dd4040;
-          position: relative;
-          pointer-events: none;
-        }
-
-        .mound::before {
-          content: "";
-          position: absolute;
-          width: 600px;
-          height: 200px;
-          left: 50%;
-          top: 50px;
-          transform: translateX(-50%);
-          border-radius: 100%;
-          background: linear-gradient(to bottom, #d0deea, #f6f9fa 60px);
-          z-index: 1;
-        }
-
-        .mound_text {
-          transform: rotate(6deg);
-          position: relative;
-          z-index: 2;
-        }
-
-        .mound_spade {
-          width: 35px;
-          height: 30px;
-          position: absolute;
-          right: 50%;
-          top: 42%;
-          margin-right: -250px;
-          background: #dd4040;
-          transform: rotate(35deg);
-        }
-
-        .mound_spade::before {
-          content: "";
-          position: absolute;
-          width: 40%;
-          height: 30px;
-          bottom: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          background: #dd4040;
-        }
-
-        .mound_spade::after {
-          content: "";
-          position: absolute;
-          width: 100%;
-          height: 30px;
-          top: -55px;
-          border: 10px solid #dd4040;
-          border-radius: 4px 4px 20px 20px;
-        }
-      `}</style>
     </div>
   );
 };
 
 export default Snow;
+

package/templates/StoneAge.tsx

@@ -1,38 +1,106 @@
+"use client";
+
+import { motion } from "framer-motion";
 import Link from "next/link";
+import { cn } from "@/components/ui/cn";
 
-const StoneAge = () => {
+const StoneAge = ({ className }: { className?: string }) => {
   return (
-    <section className="min-h-screen bg-white flex items-center justify-center font-[Arvo]">
-      <div className="w-full max-w-5xl px-4">
-        <div className="text-center">
-          <div
-            className="h-100 bg-center bg-no-repeat flex items-center justify-center"
-            style={{
-              backgroundImage:
-                "url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif)",
-            }}
-          ></div>
-
-          <div className="-mt-12">
-            <h3 className="text-2xl md:text-3xl font-semibold mb-2">
-              Looks like you&apos;re lost
-            </h3>
-
-            <p className="text-gray-600 mb-5">
-              The page you are looking for is not available!
-            </p>
+    <div
+      className={cn(
+        "min-h-screen bg-[#fcf8f0] flex flex-col items-center justify-center p-8 overflow-hidden relative font-serif",
+        className
+      )}
+    >
+      <style jsx global>{`
+        @import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap');
+        
+        .stone-age-font {
+          font-family: 'Arvo', serif;
+        }
+
+        .paper-texture {
+          background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
+        }
+
+        .rock-shadow {
+          filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
+        }
+      `}</style>
+
+      <div className="absolute inset-0 paper-texture opacity-40 pointer-events-none" />
+
+      <motion.div 
+        animate={{ y: [0, -10, 0] }}
+        transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+        className="absolute top-20 right-[15%] opacity-10 select-none"
+      >
+        <svg width="200" height="200" viewBox="0 0 200 200">
+          <path d="M40 160 L80 40 L120 180 L160 80 L180 160 Z" fill="#4a3b2a" />
+        </svg>
+      </motion.div>
+
+      <motion.div 
+        animate={{ y: [0, -15, 0] }}
+        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut", delay: 1 }}
+        className="absolute bottom-20 left-[10%] opacity-10 select-none"
+      >
+        <svg width="250" height="250" viewBox="0 0 200 200">
+          <path d="M50 180 L100 20 L150 160 Z" fill="#4a3b2a" />
+        </svg>
+      </motion.div>
 
+      <motion.div 
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="relative z-10 w-full max-w-4xl flex flex-col items-center text-center"
+      >
+        <div className="relative mb-8">
+          <motion.div
+            animate={{ rotate: [-2, 2, -2] }}
+            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
+            className="relative z-20"
+          >
+            <img
+              src="https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif"
+              alt="Stone Age Illustration"
+              className="w-full max-w-[450px] h-auto rock-shadow rounded-3xl"
+            />
+          </motion.div>
+          
+          <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-[80%] h-6 bg-black opacity-[0.05] blur-xl rounded-full" />
+        </div>
+
+        <div className="stone-age-font">
+          <h1 className="text-4xl md:text-6xl font-black text-[#4a3b2a] mb-4 uppercase tracking-tighter">
+            Prehistoric 404
+          </h1>
+          <p className="text-[#6b5844] text-xl md:text-2xl mb-12 max-w-xl mx-auto font-medium">
+            This endpoint hasn&apos;t been discovered yet. It&apos;s still in the early Jurassic.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
             <Link
               href="/"
-              className="inline-block bg-[#39ac31] text-white px-5 py-2 rounded-md hover:opacity-90 transition"
+              className="px-10 py-4 bg-[#4a3b2a] text-[#fcf8f0] font-bold rounded-xl hover:bg-[#5c4a36] transition-all transform hover:-translate-y-1 hover:shadow-xl active:scale-95 text-lg"
             >
-              Go to Home
+              Back to Future
             </Link>
+            <button className="px-10 py-4 border-2 border-[#4a3b2a]/20 text-[#4a3b2a] font-bold rounded-xl hover:bg-[#4a3b2a]/5 transition-all text-lg">
+              Explore History
+            </button>
           </div>
         </div>
+      </motion.div>
+
+      <div className="absolute bottom-10 w-full px-8 flex justify-between items-center text-[#4a3b2a]/20 font-bold uppercase tracking-[0.2em] text-[10px] sm:text-xs">
+        <span>Pleistocene Era</span>
+        <div className="h-px flex-1 mx-8 bg-[#4a3b2a]/10" />
+        <span>No Connection Found</span>
       </div>
-    </section>
+    </div>
   );
 };
 
 export default StoneAge;
+