frontend/src/app/_error.js

"use client";
import Link from "next/link";

export default function ErrorPage({ errorMessage }) {
  return (
    <div style={styles.container}>
      <div style={styles.overlay}></div>
      <h1 style={styles.title}>Uh-oh! 🚨</h1>
      <p style={styles.message}>{errorMessage}</p>
      <Link href="/" style={styles.link}>
        Go Home
      </Link>
    </div>
  );
}

const styles = {
  container: {
    position: 'absolute',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100dvh',
    width: '100vw',
    top: '0',
    textAlign: 'center',
    color: 'white',
    padding: '20px',
    overflow: 'hidden',
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'url("/404_bg4.jpg") no-repeat center center/cover',
    filter: "blur(5px)",
    zIndex: -1,
  },
  title: {
    color: 'var(--primary-special-color)',
    fontSize: "3rem",
    fontWeight: "bold",
    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.7)",
    marginBottom: "20px",
  },
  message: {
    fontSize: "1.5rem",
    margin: "20px 0",
    fontWeight: "300",
    textShadow: "1px 1px 3px rgba(0, 0, 0, 0.7)",
  },
  link: {
    marginTop: "20px",
    padding: "12px 20px",
    backgroundColor: "var(--bg-primary)",
    color: "white",
    textDecoration: "none",
    borderRadius: "5px",
    border: "2px solid var(--primary-special-color)",
    transition: "background-color 0.3s ease",
    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
  },
};