84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export default function Restricted() {
|
|
// animation cadenas
|
|
const lockVariants = {
|
|
locked: {
|
|
rotate: [0, -10, 10, -10, 10, 0],
|
|
transition: {
|
|
duration: 0.5,
|
|
repeat: 1,
|
|
repeatDelay: 3
|
|
}
|
|
}
|
|
};
|
|
|
|
// animation contenu
|
|
const contentVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
delay: 0.3,
|
|
duration: 0.6
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center">
|
|
<motion.div
|
|
className="mb-8"
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{
|
|
type: "spring",
|
|
damping: 10,
|
|
stiffness: 100
|
|
}}
|
|
>
|
|
<motion.div
|
|
className="w-32 h-32 mx-auto relative"
|
|
animate="locked"
|
|
variants={lockVariants}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-full h-full text-red-500">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
|
|
<motion.div
|
|
className="absolute w-full h-full top-0 left-0 flex items-center justify-center text-white"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5 }}
|
|
>
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={contentVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<h1 className="text-3xl font-bold mb-4">Accès Restreint</h1>
|
|
|
|
<p className="text-lg text-muted-foreground mb-8 max-w-md mx-auto">
|
|
Cette zone nécessite une méthode d'accès spéciale. Utilisez le raccourci clavier pour y accéder.
|
|
</p>
|
|
|
|
<Link
|
|
href="/"
|
|
className="mt-4 px-6 py-3 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors inline-block"
|
|
>
|
|
Retour à l'accueil
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
} |