289 lines
10 KiB
TypeScript
Executable File
289 lines
10 KiB
TypeScript
Executable File
import { useState } from "preact/hooks";
|
|
|
|
export default function GuestHome() {
|
|
const [spinDirection, setSpinDirection] = useState<"cw" | "ccw">("cw");
|
|
|
|
const handleLogoMouseEnter = () => {
|
|
setSpinDirection(Math.random() < 0.5 ? "cw" : "ccw");
|
|
};
|
|
|
|
const startOnboarding = (role: "landlord" | "tenant") => {
|
|
try {
|
|
localStorage.setItem("login-purpose", role);
|
|
localStorage.removeItem("lock-route");
|
|
} catch (_error) {
|
|
void _error;
|
|
}
|
|
globalThis.location.href = "/auth/login";
|
|
};
|
|
|
|
return (
|
|
<div class="min-h-screen bg-black flex items-start justify-center relative overflow-hidden w-full pt-4">
|
|
{/* Animated background grid */}
|
|
<div class="absolute inset-0 opacity-20">
|
|
<div
|
|
class="absolute inset-0"
|
|
style={{
|
|
backgroundImage:
|
|
`linear-gradient(rgba(107, 206, 220, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 206, 220, 0.1) 1px, transparent 1px)`,
|
|
backgroundSize: "50px 50px",
|
|
}}
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Three colored orbs matching text highlights */}
|
|
<div class="absolute w-48 h-48 bg-cyan-400 rounded-full filter blur-3xl opacity-20 animate-float-cyan">
|
|
</div>
|
|
<div class="absolute w-56 h-56 bg-purple-400 rounded-full filter blur-3xl opacity-20 animate-float-purple">
|
|
</div>
|
|
<div class="absolute w-52 h-52 bg-pink-400 rounded-full filter blur-3xl opacity-20 animate-float-pink">
|
|
</div>
|
|
|
|
<div class="relative z-10 flex flex-col items-center text-center px-6 w-full max-w-none mt-4">
|
|
{/* Large Logo */}
|
|
<div class="mb-4 transform hover:scale-105 transition-transform duration-300">
|
|
<img
|
|
src="/logo.svg"
|
|
alt="Cyber Hybrid Hub Logo"
|
|
width="150"
|
|
height="150"
|
|
class={`drop-shadow-2xl filter drop-shadow-[0_0_20px_rgba(107,206,220,0.5)] spin-on-hover ${
|
|
spinDirection === "cw"
|
|
? "spin-direction-cw"
|
|
: "spin-direction-ccw"
|
|
}`}
|
|
onMouseEnter={handleLogoMouseEnter}
|
|
/>
|
|
</div>
|
|
|
|
{/* Cyberpunk Message */}
|
|
<div class="max-w-none w-full px-4">
|
|
<p class="text-lg md:text-xl text-gray-300 mb-6 leading-relaxed">
|
|
However you found <span class="text-pink-400">us</span>, you are
|
|
{" "}
|
|
<span class="text-cyan-400 font-bold">lucky</span>.
|
|
<br class="hidden md:block" />
|
|
<span class="text-purple-400">Click</span> to start your journey.
|
|
</p>
|
|
|
|
{/* Enter button form */}
|
|
<div class="mt-10 flex justify-center">
|
|
<form method="get" action="/auth/login">
|
|
<button
|
|
type="submit"
|
|
class="
|
|
group relative isolate overflow-hidden
|
|
w-36 h-36 md:w-44 md:h-44 rounded-full border-2 border-red-500/20
|
|
bg-linear-to-br from-red-300/10 via-red-500/5 to-red-800/15
|
|
shadow-[0_8px_32px_8px_rgba(220,38,38,0.25),0_20px_60px_rgba(127,29,29,0.45),inset_0_2px_4px_rgba(255,255,255,0.1)]
|
|
flex items-center justify-center
|
|
text-xl md:text-2xl font-bold uppercase tracking-widest text-white
|
|
transition-all duration-300 ease-out
|
|
hover:shadow-[0_12px_48px_12px_rgba(239,68,68,0.6),0_24px_80px_rgba(185,28,28,0.7),inset_0_2px_8px_rgba(255,255,255,0.3)]
|
|
hover:scale-105 hover:border-red-400/90
|
|
active:shadow-[0_4px_16px_4px_rgba(185,28,28,0.8),0_8px_24px_rgba(127,29,29,0.9),inset_0_1px_2px_rgba(0,0,0,0.3)]
|
|
active:scale-95
|
|
focus:ring-4 focus:ring-red-400/50 focus:outline-none focus:ring-offset-2 focus:ring-offset-black/50
|
|
backdrop-blur-md
|
|
before:absolute before:inset-0 before:rounded-full before:bg-linear-to-t from-transparent via-white/10 to-white/20 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
|
|
after:absolute after:inset-0 after:rounded-full after:bg-linear-to-br from-transparent via-red-600/20 to-red-900/40 after:opacity-50
|
|
"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute inset-0 rounded-full bg-linear-to-b from-transparent via-red-400/8 to-black/25 opacity-40 pointer-events-none group-hover:opacity-70 transition-opacity duration-300"
|
|
>
|
|
</span>
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute inset-[12px] rounded-full border border-red-300/20 bg-linear-to-b from-red-200/20 via-transparent to-red-800/30 shadow-inner shadow-black/40 pointer-events-none"
|
|
>
|
|
</span>
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-[18px] left-10 right-10 h-12 rounded-full bg-linear-to-r from-red-400/12 via-red-500/10 to-red-400/12 blur-[2px] opacity-40 group-hover:opacity-80 transition-all duration-300 group-hover:blur-[3px] pointer-events-none"
|
|
>
|
|
</span>
|
|
<span class="relative z-10 drop-shadow-[0_4px_12px_rgba(0,0,0,0.85)] group-hover:drop-shadow-[0_6px_16px_rgba(0,0,0,0.95)] transition-all duration-300 tracking-[0.15em]">
|
|
ENTER
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="mb-8 flex flex-col items-center gap-3">
|
|
<p class="text-xs uppercase tracking-[0.35em] text-gray-400">
|
|
Start Real Estate Onboarding
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => startOnboarding("landlord")}
|
|
class="rounded-full border border-cyan-400/40 px-6 py-2 text-sm font-semibold text-cyan-200 hover:border-cyan-300/80 hover:text-white transition"
|
|
>
|
|
Landlord Setup
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => startOnboarding("tenant")}
|
|
class="rounded-full border border-pink-400/40 px-6 py-2 text-sm font-semibold text-pink-200 hover:border-pink-300/80 hover:text-white transition"
|
|
>
|
|
Tenant Setup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Glitch effect container */}
|
|
<div class="relative inline-block">
|
|
<div class="absolute inset-0 bg-cyan-400 opacity-20 blur-xl animate-pulse">
|
|
</div>
|
|
<div class="relative bg-linear-to-r from-cyan-500/20 to-purple-500/20 border border-cyan-500/50 rounded-lg px-8 py-4 backdrop-blur-sm">
|
|
<p class="text-cyan-300 text-sm font-mono">
|
|
> System ready for authentication...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Animated scanlines */}
|
|
<div class="absolute inset-0 pointer-events-none">
|
|
<div
|
|
class="absolute inset-0 bg-linear-to-b from-transparent via-cyan-500/5 to-transparent animate-pulse"
|
|
style={{
|
|
animation: "scan 3s linear infinite",
|
|
backgroundSize: "100% 3px",
|
|
}}
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>
|
|
{`
|
|
@keyframes scan {
|
|
0% { transform: translateY(-100%); }
|
|
100% { transform: translateY(100vh); }
|
|
}
|
|
|
|
@keyframes spiral-cyan {
|
|
0% {
|
|
transform: translate(-300px, -300px) rotate(0deg) scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
transform: translate(-150px, -150px) rotate(90deg) scale(0.7);
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
transform: translate(0px, 0px) rotate(180deg) scale(1.1);
|
|
opacity: 0.5;
|
|
}
|
|
75% {
|
|
transform: translate(150px, 150px) rotate(270deg) scale(0.7);
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
transform: translate(300px, 300px) rotate(360deg) scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes spiral-purple {
|
|
0% {
|
|
transform: translate(300px, -300px) rotate(0deg) scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
transform: translate(150px, -150px) rotate(-90deg) scale(0.7);
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
transform: translate(0px, 0px) rotate(-180deg) scale(1.1);
|
|
opacity: 0.5;
|
|
}
|
|
75% {
|
|
transform: translate(-150px, 150px) rotate(-270deg) scale(0.7);
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
transform: translate(-300px, 300px) rotate(-360deg) scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes spiral-pink {
|
|
0% {
|
|
transform: translate(0px, 300px) rotate(0deg) scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
transform: translate(0px, 150px) rotate(180deg) scale(0.7);
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
transform: translate(0px, 0px) rotate(360deg) scale(1.1);
|
|
opacity: 0.5;
|
|
}
|
|
75% {
|
|
transform: translate(0px, -150px) rotate(540deg) scale(0.7);
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
transform: translate(0px, -300px) rotate(720deg) scale(0.4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-float-cyan {
|
|
animation: spiral-cyan 12s ease-in-out infinite;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -24px;
|
|
margin-left: -24px;
|
|
}
|
|
|
|
.animate-float-purple {
|
|
animation: spiral-purple 15s ease-in-out infinite;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -28px;
|
|
margin-left: -28px;
|
|
}
|
|
|
|
.animate-float-pink {
|
|
animation: spiral-pink 18s ease-in-out infinite;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -26px;
|
|
margin-left: -26px;
|
|
}
|
|
|
|
.spin-on-hover {
|
|
transition: transform 0.3s ease;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.spin-direction-cw:hover {
|
|
animation: spin-cw 4s linear infinite;
|
|
}
|
|
|
|
.spin-direction-ccw:hover {
|
|
animation: spin-ccw 4s linear infinite;
|
|
}
|
|
|
|
@keyframes spin-cw {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin-ccw {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(-360deg); }
|
|
}
|
|
`}
|
|
</style>
|
|
</div>
|
|
);
|
|
}
|