frontend/src/app/not-found.js

import Link from "next/link";

export default function NotFound() {
  return (
    <div style={styles.container}>
      <div style={styles.overlay}></div>
      <h2 style={styles.title}>Whoops!</h2>
      <p style={styles.message}>
        Sorry, the page you&apos;re looking for doesn&apos;t exist.
      </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: "100dvw",
    top: "0",
    textAlign: "center",
    color: "white",
    padding: "20px",
    overflow: "hidden",
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'url("/404_bg2.jpg") no-repeat center center/cover',
    filter: "blur(5px)",
    zIndex: -1, // Sends the overlay behind the text
  },
  title: {
    color:'var(--primary-special-color)',
    fontSize: "3rem",
    fontWeight: "bold",
    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.7)",
  },
  message: {
    fontSize: "1.5rem",
    fontWeight: "200",
    margin: "20px 0",
    textShadow: "1px 1px 3px rgba(0, 0, 0, 0.7)",
  },
  link: {
    marginTop: "20px",
    padding: "12px 20px",
    backgroundColor: "var(--bg-primary)", // Semi-transparent red
    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)",
    fontWeight: "400",
  },
};