131 lines
4.4 KiB
TypeScript
131 lines
4.4 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import Link from "next/link"
|
||
import { useRouter } from "next/navigation"
|
||
|
||
export default function LoginPage() {
|
||
const router = useRouter()
|
||
const [phone, setPhone] = useState("")
|
||
const [password, setPassword] = useState("")
|
||
|
||
return (
|
||
/* Full-screen dark backdrop */
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
|
||
onClick={() => router.back()}
|
||
>
|
||
{/* Modal card */}
|
||
<div
|
||
className="relative w-[420px] bg-[#3a3a3a] shadow-2xl"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Close button */}
|
||
<button
|
||
onClick={() => router.back()}
|
||
className="absolute top-2 right-3 text-white/60 hover:text-white text-xl leading-none transition-colors z-10"
|
||
aria-label="Close"
|
||
>
|
||
×
|
||
</button>
|
||
|
||
{/* Logo */}
|
||
<div className="flex items-center justify-center py-5 border-b border-white/10 bg-[#2e2e2e]">
|
||
<div className="flex items-center">
|
||
{/* Red slashes */}
|
||
<div className="flex gap-[3px] mr-2">
|
||
{[0, 1, 2].map((i) => (
|
||
<div
|
||
key={i}
|
||
className="w-[5px] h-[38px] bg-[#cc2222] -skew-x-12"
|
||
/>
|
||
))}
|
||
</div>
|
||
{/* HARIF box */}
|
||
<div className="bg-[#852222] px-3 py-1 -skew-x-12 flex items-center h-[38px]">
|
||
<span className="text-2xl font-black text-white italic tracking-tighter skew-x-12 inline-block leading-none">
|
||
HARIF
|
||
</span>
|
||
</div>
|
||
{/* SPORT text */}
|
||
<span className="text-2xl font-black text-[#ff9800] italic tracking-tighter ml-1 leading-none">
|
||
SPORT
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<div className="text-center py-4">
|
||
<h1 className="text-sm font-black text-white uppercase tracking-widest">
|
||
LOGIN
|
||
</h1>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<div className="px-8 pb-6 space-y-4">
|
||
{/* Phone Number */}
|
||
<div>
|
||
<label className="block text-[11px] font-semibold text-white/80 mb-1">
|
||
Phone Number
|
||
</label>
|
||
<div className="flex">
|
||
<span className="flex items-center justify-center bg-white text-[#333] text-[12px] font-bold px-3 border border-gray-300 whitespace-nowrap">
|
||
ET +251
|
||
</span>
|
||
<input
|
||
type="tel"
|
||
value={phone}
|
||
onChange={(e) => setPhone(e.target.value)}
|
||
className="flex-1 bg-white border border-gray-300 px-3 py-2 text-sm text-[#333] placeholder:text-gray-400 focus:outline-none focus:border-[#ff9800]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Password */}
|
||
<div>
|
||
<label className="block text-[11px] font-semibold text-white/80 mb-1">
|
||
Password
|
||
</label>
|
||
<input
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
placeholder="Password"
|
||
className="w-full bg-white border border-gray-300 px-3 py-2 text-sm text-[#333] placeholder:text-gray-400 focus:outline-none focus:border-[#ff9800]"
|
||
/>
|
||
</div>
|
||
|
||
{/* Forgot password */}
|
||
<div className="text-right">
|
||
<Link
|
||
href="/reset-password"
|
||
className="text-[11px] text-white/50 hover:text-[#ff9800] transition-colors"
|
||
>
|
||
Forgot password?
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Login button */}
|
||
<button className="w-full bg-[#e6b800] hover:bg-[#ffcc00] text-black font-black py-3 uppercase text-sm tracking-widest transition-colors">
|
||
LOGIN
|
||
</button>
|
||
|
||
{/* Support link */}
|
||
<p className="text-center text-[12px] text-white/60">
|
||
<Link href="/support" className="hover:text-white transition-colors">
|
||
Support
|
||
</Link>
|
||
</p>
|
||
|
||
{/* Register link */}
|
||
<p className="text-center text-[11px] text-white/50">
|
||
Don't have an account?{" "}
|
||
<Link href="/register" className="text-[#ff9800] hover:underline font-semibold">
|
||
Register
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |