frontend/src/app/_still-in-development.js

import Link from "next/link";

export default function StillInDevelopment() {
  return (
    <div style={styles.container}>
      <div style={styles.overlay}></div>
      <h2 style={styles.title}>Lost in Dev Space 🤨</h2>
      <p style={styles.message}>
        Oops! This page is still under construction. <br />
        Our devs are probably chasing🪲bugs or having a coffee break ☕. <br />
        In the meantime, click below to escape!🏃🚪
      </p>
      <Link href="/" style={styles.link}>
        Take Me 🏚️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_bg3.jpg") no-repeat center center/cover',
    filter: "blur(10px)",
    zIndex: -1,
  },
  title: {
    fontSize: "2.5rem",
    fontWeight: "900",
    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.7)",
    marginBottom: "20px",
    color: "var(--primary-special-color)",
  },
  message: {
    fontSize: "1.2rem",
    marginBottom: "20px",
    fontWeight: "400",
  },
  link: {
    padding: "10px 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)",
    fontWeight: "200",
  },
};