87 lines
4.3 KiB
TypeScript
87 lines
4.3 KiB
TypeScript
"use client";
|
||
|
||
import { useActionState } from "react";
|
||
import { login } from "@/app/actions/auth";
|
||
import { Lock, ArrowRight } from "lucide-react";
|
||
import Image from "next/image";
|
||
|
||
export default function LoginPage() {
|
||
const [state, formAction, isPending] = useActionState(login, null);
|
||
|
||
return (
|
||
<div className="flex-grow flex items-center justify-center p-4 relative min-h-screen overflow-hidden bg-dark">
|
||
{/* Background Image with Overlay */}
|
||
<div className="absolute inset-0 z-0">
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1526367790999-0150786686a2?q=80&w=2940&auto=format&fit=crop"
|
||
alt="Kite Beach Akyaka"
|
||
fill
|
||
className="object-cover opacity-30 scale-105 animate-[pulse_10s_ease-in-out_infinite]"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-b from-dark/90 via-dark/80 to-dark/95" />
|
||
</div>
|
||
|
||
<div className="relative z-10 w-full max-w-md animate-fade-up">
|
||
{/* Logo or Brand */}
|
||
<div className="text-center mb-10">
|
||
<h1 className="font-serif font-black tracking-[0.2em] uppercase text-4xl text-transparent bg-clip-text bg-gradient-to-r from-white to-white/60 mb-2">
|
||
KITE BEACH
|
||
</h1>
|
||
<p className="text-white/50 tracking-widest text-xs uppercase">Yönetim Paneli</p>
|
||
</div>
|
||
|
||
<div className="bg-white/10 backdrop-blur-xl p-8 sm:p-10 rounded-[2rem] shadow-2xl border border-white/20 relative overflow-hidden">
|
||
{/* Decorative Glow */}
|
||
<div className="absolute -top-20 -right-20 w-40 h-40 bg-accent/40 rounded-full blur-[60px] pointer-events-none" />
|
||
<div className="absolute -bottom-20 -left-20 w-40 h-40 bg-primary/40 rounded-full blur-[60px] pointer-events-none" />
|
||
|
||
<div className="flex justify-center mb-8 relative">
|
||
<div className="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-md border border-white/20 shadow-inner">
|
||
<Lock className="w-8 h-8 text-white" />
|
||
</div>
|
||
</div>
|
||
|
||
<form action={formAction} className="space-y-6 relative z-10">
|
||
<div className="space-y-1.5">
|
||
<label className="block text-xs font-bold text-white/70 tracking-wider uppercase ml-1">Kullanıcı Adı</label>
|
||
<input
|
||
type="text"
|
||
name="username"
|
||
required
|
||
className="w-full px-5 py-3.5 bg-white/5 border border-white/10 text-white placeholder-white/30 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all"
|
||
placeholder="Yönetici adınızı girin"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="block text-xs font-bold text-white/70 tracking-wider uppercase ml-1">Şifre</label>
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
required
|
||
className="w-full px-5 py-3.5 bg-white/5 border border-white/10 text-white placeholder-white/30 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-all"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
|
||
{state?.error && (
|
||
<div className="text-red-300 text-sm text-center bg-red-500/20 border border-red-500/30 p-3 rounded-xl animate-fade-up">
|
||
{state.error}
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={isPending}
|
||
className="w-full group relative flex items-center justify-center gap-3 bg-accent text-white font-bold tracking-widest uppercase py-4 rounded-xl mt-6 hover:bg-accent/90 transition-all disabled:opacity-70 disabled:cursor-not-allowed overflow-hidden shadow-lg shadow-accent/20"
|
||
>
|
||
<div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out" />
|
||
<span className="relative z-10 text-xs">{isPending ? "Giriş yapılıyor..." : "Giriş Yap"}</span>
|
||
{!isPending && <ArrowRight className="w-4 h-4 relative z-10 group-hover:translate-x-1 transition-transform" />}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|