404lab 1.0.0

package/templates/SimplePage.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import Link from "next/link";
+
+const SimplePage = () => {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-black text-white">
+      <div className="w-full max-w-[420px] rounded-2xl border border-neutral-800 bg-neutral-950 px-8 py-10 text-center">
+        <h1 className="text-6xl font-bold tracking-tight">404</h1>
+        <h2 className="mt-2 text-sm font-medium">Page not found</h2>
+        <p className="mt-3 text-sm text-neutral-400">
+          The page you&apos;re looking for doesn&apos;t exist or was moved.
+        </p>
+        <Link
+          href="/"
+          className="mt-8 inline-block rounded-xl bg-white px-6 py-3 text-sm font-semibold text-black transition hover:opacity-90"
+        >
+          Go back home
+        </Link>
+      </div>
+    </main>
+  );
+};
+
+export default SimplePage;

package/templates/Snow.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import Link from "next/link";
+
+export default function Snow() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  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;
+    };
+
+    function createParticles(count: number) {
+      particles = [];
+      for (let i = 0; i < count; i++) {
+        const p: Particle = { x: 0, y: 0, dx: 0, dy: 0 };
+        reset(p);
+        particles.push(p);
+      }
+    }
+
+    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;
+        }
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
+        ctx.fill();
+      });
+
+      requestAnimationFrame(animate);
+    }
+
+    resize();
+    animate();
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
+  }, []);
+
+  return (
+    <div className="content">
+      <canvas ref={canvasRef} id="snow" className="snow" />
+
+      <div className="main-text">
+        <h1>
+          Aw jeez.
+          <br />
+          That page has gone missing.
+        </h1>
+        <Link href="/" className="home-link">
+          Hitch a ride back home.
+        </Link>
+      </div>
+
+      <div className="ground">
+        <div className="mound">
+          <div className="mound_text">404</div>
+          <div className="mound_spade" />
+        </div>
+      </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>
+  );
+}

package/templates/StoneAge.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+export default function StoneAge() {
+  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>
+
+            <Link
+              href="/"
+              className="inline-block bg-[#39ac31] text-white px-5 py-2 rounded-md hover:opacity-90 transition"
+            >
+              Go to Home
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}