Projects/front/src/components/layout/AdminLayout.tsx

// src/components/layout/AdminLayout.tsx
import { Outlet } from "react-router-dom";
import { AdminHeader } from "@/components/admin/AdminHeader";
import { AdminSidebar } from "@/components/admin/AdminSidebar";
import { motion } from "framer-motion";

export default function AdminLayout() {
  return (
    <div className="min-h-screen bg-slate-50/50 dark:bg-slate-900/50 text-slate-900 dark:text-slate-50 transition-colors duration-300 relative overflow-hidden">
      <AdminHeader />
      <div className="flex relative z-10">
        <AdminSidebar />
        <main className="flex-1 p-6 relative">
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="w-full min-h-[calc(100vh-6rem)] p-6 rounded-3xl premium-glass bg-white/40 dark:bg-slate-950/20 backdrop-blur-md border border-white/30 dark:border-white/10 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] hover-lift"
          >
            <Outlet />
          </motion.div>
        </main>
      </div>

      {/* Decorative glowing gradient background */}
      <div className="absolute top-1/4 right-1/4 -z-0 w-[40rem] h-[40rem] bg-indigo-500/10 blur-[120px] rounded-full opacity-50 pointer-events-none" />
      <div className="absolute bottom-0 left-1/4 -z-0 w-[40rem] h-[40rem] bg-purple-500/10 blur-[120px] rounded-full opacity-50 pointer-events-none" />
    </div>
  );
}