Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

new 404 page #32

Merged
shing.hung merged 5 commits from 404-rework into main 2025-02-10 00:33:54 +00:00
Conversation 0 Commits 5 Files changed 1 +43 -7
1 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/pages/404.astro
View file

@ -4,26 +4,62 @@ import Link from "next/link";
---
<Layout>
<div class="h-screen w-full flex justify-center items-center relative">
<div
class="bg-gradient-to-l to-indigo-950 from-ieee-blue-100 w-[100vw] h-[60vw] md:w-[43vw] md:h-[26vw] md:blur-[3vw] blur-[8vw] rounded-full absolute"
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"
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-extralight md:text-[1.4vw] text-[3vw]">
Oops! You're Lost in the Circuit!🔌⚡
<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="border-white/80 border-[0.12vw] rounded-[0.7vw] px-[7vw] py-[2%] font-extralight md:text-[1.2vw] text-[2.5vw] mt-[3%] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
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" }}
>
Go Back Home
<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>