294 lines
12 KiB
TypeScript
294 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import Link from "next/link";
|
||
|
||
export default function Home() {
|
||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||
const [registerEnabled, setRegisterEnabled] = useState(true);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
const checkAuth = async () => {
|
||
try {
|
||
const [authResponse, configResponse] = await Promise.all([
|
||
fetch("/api/auth/get-session", {
|
||
credentials: "include",
|
||
}),
|
||
fetch("/api/config"),
|
||
]);
|
||
|
||
const authData = await authResponse.json();
|
||
const configData = await configResponse.json();
|
||
|
||
setIsAuthenticated(!!authData.user);
|
||
setRegisterEnabled(configData.registerEnabled);
|
||
} catch (error) {
|
||
setIsAuthenticated(false);
|
||
setRegisterEnabled(true);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
checkAuth();
|
||
}, []);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-zinc-900 dark:via-black dark:to-zinc-900">
|
||
<div className="flex flex-col items-center gap-4">
|
||
<div className="h-12 w-12 animate-spin rounded-full border-4 border-blue-200 border-t-blue-600"></div>
|
||
<div className="text-lg text-gray-600 dark:text-gray-400">
|
||
Yükleniyor...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-zinc-900 dark:via-black dark:to-zinc-900">
|
||
{/* Hero Section */}
|
||
<div className="flex min-h-screen flex-col items-center justify-center px-4 py-12">
|
||
<div className="w-full max-w-6xl">
|
||
{/* Main Content */}
|
||
<div className="text-center">
|
||
{/* Icon/Logo */}
|
||
<div className="mb-8 flex justify-center">
|
||
<div className="rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 p-6 shadow-2xl">
|
||
<svg
|
||
className="h-16 w-16 text-white"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h1 className="mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-5xl font-bold text-transparent dark:from-blue-400 dark:to-purple-400 sm:text-6xl md:text-7xl">
|
||
Image Manipulation API
|
||
</h1>
|
||
|
||
{/* Description */}
|
||
<p className="mx-auto mb-4 max-w-2xl text-xl text-gray-600 dark:text-gray-300">
|
||
Resimlerinizi yükleyin, boyutlandırın, formatını değiştirin ve
|
||
istediğiniz kalitede kaydedin.
|
||
</p>
|
||
<p className="mx-auto mb-12 max-w-2xl text-lg text-gray-500 dark:text-gray-400">
|
||
JWT API desteği ile dış uygulamalarınızdan da kullanabilirsiniz.
|
||
</p>
|
||
|
||
{/* Features */}
|
||
<div className="mx-auto mb-12 grid max-w-4xl grid-cols-1 gap-6 sm:grid-cols-3">
|
||
<div className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
|
||
<div className="mb-3 flex justify-center">
|
||
<div className="rounded-full bg-blue-100 p-3 dark:bg-blue-900/30">
|
||
<svg
|
||
className="h-6 w-6 text-blue-600 dark:text-blue-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
|
||
Hızlı İşlem
|
||
</h3>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
Saniyeler içinde resim manipülasyonu
|
||
</p>
|
||
</div>
|
||
|
||
<div className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
|
||
<div className="mb-3 flex justify-center">
|
||
<div className="rounded-full bg-purple-100 p-3 dark:bg-purple-900/30">
|
||
<svg
|
||
className="h-6 w-6 text-purple-600 dark:text-purple-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
|
||
Çoklu Format
|
||
</h3>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
JPEG, PNG, WebP, AVIF desteği
|
||
</p>
|
||
</div>
|
||
|
||
<div className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
|
||
<div className="mb-3 flex justify-center">
|
||
<div className="rounded-full bg-green-100 p-3 dark:bg-green-900/30">
|
||
<svg
|
||
className="h-6 w-6 text-green-600 dark:text-green-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
|
||
Güvenli API
|
||
</h3>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
JWT token ile korumalı erişim
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* CTA Buttons */}
|
||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||
{isAuthenticated ? (
|
||
<>
|
||
<Link
|
||
href="/upload"
|
||
className="group flex h-14 w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 px-8 text-lg font-semibold text-white shadow-lg transition-all hover:scale-105 hover:shadow-xl sm:w-auto"
|
||
>
|
||
<svg
|
||
className="h-5 w-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
|
||
/>
|
||
</svg>
|
||
Resim Yükle
|
||
</Link>
|
||
<Link
|
||
href="/profile"
|
||
className="flex h-14 w-full items-center justify-center gap-2 rounded-full border-2 border-gray-300 bg-white px-8 text-lg font-semibold text-gray-700 transition-all hover:border-gray-400 hover:bg-gray-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:hover:border-zinc-600 dark:hover:bg-zinc-700 sm:w-auto"
|
||
>
|
||
<svg
|
||
className="h-5 w-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||
/>
|
||
</svg>
|
||
Profilim
|
||
</Link>
|
||
<Link
|
||
href="/admin"
|
||
className="flex h-14 w-full items-center justify-center gap-2 rounded-full border-2 border-red-300 bg-white px-8 text-lg font-semibold text-red-700 transition-all hover:border-red-400 hover:bg-red-50 dark:border-red-700 dark:bg-zinc-800 dark:text-red-400 dark:hover:border-red-600 dark:hover:bg-red-900/20 sm:w-auto"
|
||
>
|
||
<svg
|
||
className="h-5 w-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
||
/>
|
||
</svg>
|
||
Admin Panel
|
||
</Link>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Link
|
||
href="/login"
|
||
className="group flex h-14 w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 px-8 text-lg font-semibold text-white shadow-lg transition-all hover:scale-105 hover:shadow-xl sm:w-auto"
|
||
>
|
||
Giriş Yap
|
||
<svg
|
||
className="h-5 w-5 transition-transform group-hover:translate-x-1"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||
/>
|
||
</svg>
|
||
</Link>
|
||
{registerEnabled && (
|
||
<Link
|
||
href="/register"
|
||
className="flex h-14 w-full items-center justify-center gap-2 rounded-full border-2 border-gray-300 bg-white px-8 text-lg font-semibold text-gray-700 transition-all hover:border-gray-400 hover:bg-gray-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:hover:border-zinc-600 dark:hover:bg-zinc-700 sm:w-auto"
|
||
>
|
||
Kayıt Ol
|
||
</Link>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* API Link */}
|
||
<div className="mt-12">
|
||
<Link
|
||
href="/api-docs"
|
||
className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||
>
|
||
<svg
|
||
className="h-5 w-5"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
|
||
/>
|
||
</svg>
|
||
API Dokümantasyonu
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|