db connect

app/admin/login/page.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+
+export default function LoginPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const res = await fetch('/admin/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+
+      if (res.ok) {
+        router.push('/admin/projects');
+        router.refresh();
+      } else {
+        setError('Geçersiz kullanıcı adı veya şifre.');
+      }
+    } catch (err) {
+      setError('Bir hata oluştu. Lütfen tekrar deneyin.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-[#050505] flex items-center justify-center p-6 overflow-hidden relative">
+      <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-cyan-500/10 rounded-full blur-[120px]" />
+      <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-purple-500/10 rounded-full blur-[120px]" />
+
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-md relative z-10"
+      >
+        <div className="bg-white/5 backdrop-blur-2xl border border-white/10 p-10 rounded-[40px] shadow-2xl">
+          <div className="flex flex-col items-center mb-10 text-center">
+            <div className="w-16 h-16 rounded-2xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center font-bold text-3xl shadow-lg shadow-cyan-500/20 mb-6">A</div>
+            <h1 className="text-3xl font-bold tracking-tight text-white mb-2">Hoş Geldiniz</h1>
+            <p className="text-gray-500 text-sm uppercase tracking-widest font-mono">Yönetim Paneli Girişi</p>
+          </div>
+
+          <form onSubmit={handleLogin} className="space-y-6">
+            <div className="space-y-2">
+              <label className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500 ml-2">Kullanıcı Adı</label>
+              <input 
+                required
+                type="text" 
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white placeholder:text-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 transition-all font-medium"
+                placeholder="isminiz..."
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500 ml-2">Şifre</label>
+              <input 
+                required
+                type="password" 
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-white placeholder:text-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 transition-all font-medium"
+                placeholder="••••••••"
+              />
+            </div>
+
+            {error && (
+              <motion.div 
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                className="bg-rose-500/10 border border-rose-500/20 p-4 rounded-xl text-rose-400 text-xs text-center font-medium"
+              >
+                {error}
+              </motion.div>
+            )}
+
+            <button 
+              disabled={isLoading}
+              type="submit"
+              className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-extrabold py-4 rounded-2xl transition-all shadow-lg shadow-cyan-500/20 active:scale-[0.98] uppercase tracking-widest text-sm flex items-center justify-center gap-3 disabled:opacity-50"
+            >
+              {isLoading ? (
+                <div className="w-5 h-5 border-2 border-black/30 border-t-black rounded-full animate-spin" />
+              ) : 'Giriş Yap'}
+            </button>
+          </form>
+
+          <div className="mt-10 flex justify-center">
+            <p className="text-[10px] text-gray-600 font-mono tracking-widest uppercase">SECURED BY ANT-ARCHITECT</p>
+          </div>
+        </div>
+      </motion.div>
+    </main>
+  );
+}