404 / Not Found Stacked

1"use client";
2// beui.dev/components/blocks/not-found
3 
4import { motion, useReducedMotion } from "motion/react";
5import { SPRING_PANEL } from "@/lib/ease";
6import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
7import {
8  NOT_FOUND_DEFAULTS,
9  NotFoundActions,
10  NotFoundStage,
11  type NotFoundProps,
12} from "./shared";
13 
14const CARD =
15  "absolute inset-0 rounded-3xl border border-border bg-card shadow-sm";
16 
17export function NotFoundStacked({
18  className,
19  code = NOT_FOUND_DEFAULTS.code,
20  title = NOT_FOUND_DEFAULTS.title,
21  description = NOT_FOUND_DEFAULTS.description,
22  homeHref,
23  homeLabel,
24  browseHref,
25  browseLabel,
26}: NotFoundProps) {
27  const reduce = useReducedMotion();
28  const canHover = useHoverCapable();
29  const interactive = !reduce && canHover;
30 
31  return (
32    <NotFoundStage className={className}>
33      <motion.div
34        initial="rest"
35        animate="rest"
36        whileHover={interactive ? "hover" : undefined}
37        className="relative h-44 w-64"
38      >
39        <motion.div
40          aria-hidden
41          variants={{ rest: { rotate: 0, x: 0, y: 0 }, hover: { rotate: -9, x: -28, y: 8 } }}
42          transition={SPRING_PANEL}
43          className={CARD}
44        />
45        <motion.div
46          aria-hidden
47          variants={{ rest: { rotate: 0, x: 0, y: 0 }, hover: { rotate: 9, x: 28, y: 8 } }}
48          transition={SPRING_PANEL}
49          className={CARD}
50        />
51        <motion.div
52          variants={{ rest: { y: 0 }, hover: { y: -6 } }}
53          transition={SPRING_PANEL}
54          className="absolute inset-0 flex flex-col items-center justify-center gap-1 rounded-3xl border border-border bg-card shadow-md"
55        >
56          <h1 className="select-none font-bold leading-none tracking-tighter text-foreground [font-size:clamp(3.5rem,9vw,5rem)]">
57            {code}
58          </h1>
59          <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
60            out of the deck
61          </span>
62        </motion.div>
63      </motion.div>
64 
65      <div className="flex flex-col items-center gap-2">
66        <p className="text-lg font-semibold text-foreground">{title}</p>
67        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
68      </div>
69 
70      <NotFoundActions
71        homeHref={homeHref}
72        homeLabel={homeLabel}
73        browseHref={browseHref}
74        browseLabel={browseLabel}
75      />
76    </NotFoundStage>
77  );
78}