first
This commit is contained in:
83
src/pages/Portal.jsx
Normal file
83
src/pages/Portal.jsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { GitBranch, Video, Mail, Cloud, Puzzle, ArrowRight, ArrowLeft, LogOut } from 'lucide-react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
const services = [
|
||||
{ title: "Git", url: "https://git.atakanzgn.com.tr", desc: "Projeler ve kod yönetimi.", icon: <GitBranch size={28} />, color: "from-orange-400 to-red-500" },
|
||||
{ title: "Meet", url: "https://meet.atakanzgn.com.tr", desc: "Güvenli video konferans.", icon: <Video size={28} />, color: "from-blue-400 to-indigo-500" },
|
||||
{ title: "Mail", url: "https://mail.atakanzgn.com.tr", desc: "E-posta sunucusu.", icon: <Mail size={28} />, color: "from-green-400 to-emerald-500" },
|
||||
{ title: "Cloud", url: "https://cloud.atakanzgn.com.tr", desc: "Dosya depolama.", icon: <Cloud size={28} />, color: "from-cyan-400 to-blue-500" },
|
||||
{ title: "n8n", url: "https://n8n.atakanzgn.com.tr", desc: "Otomasyon araçları.", icon: <Puzzle size={28} />, color: "from-pink-400 to-rose-500" }
|
||||
];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: { y: 0, opacity: 1 }
|
||||
};
|
||||
|
||||
export default function Portal() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Sayfa yüklendiğinde güvenlik kontrolü yap
|
||||
useEffect(() => {
|
||||
const isAuth = sessionStorage.getItem('isAuthenticated');
|
||||
if (isAuth !== 'true') {
|
||||
navigate('/'); // Giriş yoksa ana sayfaya at
|
||||
}
|
||||
}, [navigate]);
|
||||
|
||||
const handleLogout = () => {
|
||||
sessionStorage.removeItem('isAuthenticated');
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen flex flex-col items-center justify-center p-6 overflow-hidden bg-slate-900">
|
||||
<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
|
||||
<div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-5xl">
|
||||
<div className="flex justify-between items-center mb-12">
|
||||
<Link to="/" className="text-slate-400 hover:text-white transition-colors flex items-center gap-2">
|
||||
<ArrowLeft size={20} /> Ana Sayfa
|
||||
</Link>
|
||||
<button onClick={handleLogout} className="text-red-400 hover:text-red-300 transition-colors flex items-center gap-2 text-sm font-medium">
|
||||
<LogOut size={18} /> Çıkış Yap
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-2 text-white">Yönetim Portalı</h1>
|
||||
<p className="text-slate-400">Hoş geldin, Atakan. Servisler aktif.</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={containerVariants} initial="hidden" animate="visible" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{services.map((service, index) => (
|
||||
<motion.a
|
||||
key={index} href={service.url} target="_blank" rel="noopener noreferrer" variants={cardVariants} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
className="glass-panel rounded-xl p-5 group cursor-pointer relative overflow-hidden flex flex-col"
|
||||
>
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${service.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}></div>
|
||||
<div className="relative z-10">
|
||||
<div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${service.color} flex items-center justify-center mb-3 shadow-lg`}>
|
||||
<div className="text-white">{service.icon}</div>
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold mb-1 text-slate-100">{service.title}</h2>
|
||||
<p className="text-slate-400 text-sm mb-4">{service.desc}</p>
|
||||
</div>
|
||||
<div className="relative z-10 flex items-center text-xs font-bold text-slate-300 group-hover:text-white mt-auto uppercase tracking-wide">
|
||||
Giriş Yap <ArrowRight size={14} className="ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</motion.a>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user