<div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-6xl font-bold">404</h1><p className="text-xl mt-4 text-muted-foreground">Page not found</p><button className="mt-8 bg-primary text-primary-foreground px-6 py-2 rounded-md">Go Home</button></div>

"use client";

import React, { useState } from "react";

interface 404StandardProps {
  className?: string;
  children?: React.ReactNode;
}

export default function 404Standard({
  className = "",
  children,
}: 404StandardProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-6xl font-bold">404</h1><p className="text-xl mt-4 text-muted-foreground">Page not found</p><button className="mt-8 bg-primary text-primary-foreground px-6 py-2 rounded-md">Go Home</button></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function Animated404Standard() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-6xl font-bold">404</h1><p className="text-xl mt-4 text-muted-foreground">Page not found</p><button className="mt-8 bg-primary text-primary-foreground px-6 py-2 rounded-md">Go Home</button></div>
    </motion.div>
  );
}

<div className="grid md:grid-cols-2 gap-8 items-center py-24"><div className="px-8"><h1 className="text-6xl font-bold text-primary">Oops!</h1><h2 className="text-2xl font-semibold mt-4">We lost this page</h2><p className="mt-2 text-muted-foreground">We searched everywhere but couldn't find what you were looking for.</p></div><div className="h-64 bg-muted rounded-xl"></div></div>

"use client";

import React, { useState } from "react";

interface 404SplitProps {
  className?: string;
  children?: React.ReactNode;
}

export default function 404Split({
  className = "",
  children,
}: 404SplitProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="grid md:grid-cols-2 gap-8 items-center py-24"><div className="px-8"><h1 className="text-6xl font-bold text-primary">Oops!</h1><h2 className="text-2xl font-semibold mt-4">We lost this page</h2><p className="mt-2 text-muted-foreground">We searched everywhere but couldn't find what you were looking for.</p></div><div className="h-64 bg-muted rounded-xl"></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function Animated404Split() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="grid md:grid-cols-2 gap-8 items-center py-24"><div className="px-8"><h1 className="text-6xl font-bold text-primary">Oops!</h1><h2 className="text-2xl font-semibold mt-4">We lost this page</h2><p className="mt-2 text-muted-foreground">We searched everywhere but couldn't find what you were looking for.</p></div><div className="h-64 bg-muted rounded-xl"></div></div>
    </motion.div>
  );
}

<div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-4xl font-bold">Page missing</h1><p className="text-muted-foreground mt-4 mb-8">Try searching for what you need.</p><div className="flex w-full max-w-sm space-x-2"><input className="flex h-10 w-full rounded-md border border-input px-3" placeholder="Search..." /><button className="bg-primary text-primary-foreground px-4 rounded-md">Search</button></div></div>

"use client";

import React, { useState } from "react";

interface 404SearchProps {
  className?: string;
  children?: React.ReactNode;
}

export default function 404Search({
  className = "",
  children,
}: 404SearchProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-4xl font-bold">Page missing</h1><p className="text-muted-foreground mt-4 mb-8">Try searching for what you need.</p><div className="flex w-full max-w-sm space-x-2"><input className="flex h-10 w-full rounded-md border border-input px-3" placeholder="Search..." /><button className="bg-primary text-primary-foreground px-4 rounded-md">Search</button></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function Animated404Search() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-4xl font-bold">Page missing</h1><p className="text-muted-foreground mt-4 mb-8">Try searching for what you need.</p><div className="flex w-full max-w-sm space-x-2"><input className="flex h-10 w-full rounded-md border border-input px-3" placeholder="Search..." /><button className="bg-primary text-primary-foreground px-4 rounded-md">Search</button></div></div>
    </motion.div>
  );
}

<div className="flex flex-col items-center justify-center py-24 text-center bg-black text-white"><h1 className="text-8xl font-black tracking-tighter" style="text-shadow: 2px 0 red, -2px 0 blue;">404</h1><p className="text-xl mt-4 font-mono">SYSTEM_ERROR_NOT_FOUND</p></div>

"use client";

import React, { useState } from "react";

interface 404GlitchProps {
  className?: string;
  children?: React.ReactNode;
}

export default function 404Glitch({
  className = "",
  children,
}: 404GlitchProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="flex flex-col items-center justify-center py-24 text-center bg-black text-white"><h1 className="text-8xl font-black tracking-tighter" style="text-shadow: 2px 0 red, -2px 0 blue;">404</h1><p className="text-xl mt-4 font-mono">SYSTEM_ERROR_NOT_FOUND</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function Animated404Glitch() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex flex-col items-center justify-center py-24 text-center bg-black text-white"><h1 className="text-8xl font-black tracking-tighter" style="text-shadow: 2px 0 red, -2px 0 blue;">404</h1><p className="text-xl mt-4 font-mono">SYSTEM_ERROR_NOT_FOUND</p></div>
    </motion.div>
  );
}

<div className="py-24 max-w-md"><span className="text-sm font-semibold text-primary">Error 404</span><h1 className="text-3xl font-bold mt-2">Page not found</h1><p className="mt-4 text-muted-foreground">The requested URL was not found on this server.</p></div>

"use client";

import React, { useState } from "react";

interface 404MinimalProps {
  className?: string;
  children?: React.ReactNode;
}

export default function 404Minimal({
  className = "",
  children,
}: 404MinimalProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="py-24 max-w-md"><span className="text-sm font-semibold text-primary">Error 404</span><h1 className="text-3xl font-bold mt-2">Page not found</h1><p className="mt-4 text-muted-foreground">The requested URL was not found on this server.</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function Animated404Minimal() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="py-24 max-w-md"><span className="text-sm font-semibold text-primary">Error 404</span><h1 className="text-3xl font-bold mt-2">Page not found</h1><p className="mt-4 text-muted-foreground">The requested URL was not found on this server.</p></div>
    </motion.div>
  );
}