b

2026-06-09 15:15:40 +03:00
parent f6b4acb760
commit d908d83ca5
58 changed files with 4320 additions and 419 deletions
@@ -0,0 +1,86 @@
+"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>
+  );
+}