---
import Layout from "../layouts/Layout.astro";
import Link from "next/link";
---

<Layout>
    <div
        class="h-screen w-full flex justify-center items-center relative overflow-hidden"
    >
        <div
            class="animate-[pulse_3s_ease-in-out_infinite] bg-gradient-to-l to-indigo-950/80 from-ieee-blue-100/60 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[4vw] blur-[10vw] rounded-full absolute"
        >
        </div>
        <div
            class="animate-[pulse_4s_ease-in-out_infinite] bg-gradient-to-r from-blue-600/20 to-purple-600/20 w-[90vw] h-[55vw] md:w-[38vw] md:h-[24vw] md:blur-[5vw] blur-[11vw] rounded-full absolute -rotate-45"
        >
        </div>
        <div
            class="animate-[pulse_5s_ease-in-out_infinite] bg-gradient-to-tr from-ieee-yellow/10 to-blue-500/10 w-[95vw] h-[58vw] md:w-[40vw] md:h-[25vw] md:blur-[4.5vw] blur-[10.5vw] rounded-full absolute rotate-45"
        >
        </div>
        <div class="flex flex-col items-center z-10">
            <p
                class="md:text-[15vw] text-[35vw] leading-tight font-bold tracking-wider text-slate-800/90 select-none"
                style={{ textShadow: "0vw 0vw 0.2vw #88BFEC" }}
            >
                404
            </p>
            <p
                class="font-bold md:text-[1.4vw] text-[3vw] text-slate-800/90 select-none font-mono"
                style={{ textShadow: "0vw 0vw 0.2vw #88BFEC" }}
            >
                <span class="text-ieee-yellow">root@ieee</span>:<span
                    class="text-blue-400">~/404</span
                > $ ERROR: Connection_Not_Found();
                <br />
            </p>
            <Link
                href="/"
                className="font-bold md:text-[1.2vw] text-[2.5vw] mt-[5%] text-slate-800/90 hover:text-ieee-yellow duration-300 select-none font-mono border-2 border-slate-800/90 rounded-lg px-8 py-3 hover:border-ieee-yellow flex items-center gap-3 group relative overflow-hidden bg-white/5 backdrop-blur-sm hover:bg-ieee-yellow/10 shadow-lg hover:shadow-ieee-yellow/20 transition-all"
                style={{ textShadow: "0vw 0vw 0.2vw #88BFEC" }}
            >
                <span
                    class="text-ieee-yellow group-hover:text-slate-800/90 transition-colors"
                    >$</span
                >
                <span class="relative z-10">cd /home</span>
                <svg
                    class="w-[1.2em] h-[1.2em] transition-all group-hover:translate-x-1 text-ieee-yellow group-hover:text-slate-800/90"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path d="M5 12h14m-7-7l7 7-7 7"></path>
                </svg>
                <div
                    class="absolute inset-0 bg-gradient-to-r from-slate-800/0 via-slate-800/5 to-slate-800/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"
                >
                </div>
            </Link>
        </div>
    </div>
</Layout>
