import '../chunks/page-ssr_ChKiSmuh.mjs';
import { c as createComponent, r as renderComponent, a as renderTemplate, m as maybeRenderHead } from '../chunks/astro/server_DJC9Xx9K.mjs';
import 'kleur/colors';
import { t, $ as $$BaseLayout, a as $$Header, b as $$Footer } from '../chunks/Footer_BFBz0LQo.mjs';
export { renderers } from '../renderers.mjs';

const $$404 = createComponent(($$result, $$props, $$slots) => {
  return renderTemplate`${renderComponent($$result, "BaseLayout", $$BaseLayout, { "title": `${t("404.title")} | ${t("meta.title")}`, "description": t("404.description") }, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "Header", $$Header, {})} ${maybeRenderHead()}<main> <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted"> <div class="container-custom"> <div class="text-center max-w-2xl mx-auto animate-on-scroll"> <!-- 404 Visual --> <div class="text-8xl sm:text-9xl font-bold text-primary/20 mb-8">404</div> <!-- Error message --> <h1 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4"> ${t("404.title")} </h1> <p class="text-lg sm:text-xl text-muted-foreground mb-8"> ${t("404.description")} </p> <!-- Action buttons --> <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> <a href="/" class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"> <svg class="h-5 w-5 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path> </svg> ${t("404.button")} </a> <a href="/contact" class="btn-outline px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105">
Get Help
</a> </div> <!-- Helpful links --> <div class="mt-12"> <p class="text-muted-foreground mb-4">Or try one of these popular pages:</p> <div class="flex flex-wrap justify-center gap-4"> <a href="/services" class="text-primary hover:text-primary/80 transition-colors">Services</a> <span class="text-muted-foreground">•</span> <a href="/about" class="text-primary hover:text-primary/80 transition-colors">About</a> <span class="text-muted-foreground">•</span> <a href="/contact" class="text-primary hover:text-primary/80 transition-colors">Contact</a> <span class="text-muted-foreground">•</span> <a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 transition-colors">Blog</a> </div> </div> </div> </div> </section> </main> ${renderComponent($$result2, "Footer", $$Footer, {})} ` })}`;
}, "/Users/richard/Website Development/tiber365/src/pages/404.astro", void 0);

const $$file = "/Users/richard/Website Development/tiber365/src/pages/404.astro";
const $$url = "/404";

const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: $$404,
  file: $$file,
  url: $$url
}, Symbol.toStringTag, { value: 'Module' }));

const page = () => _page;

export { page };