111 lines
2.7 KiB
TypeScript
111 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export default function NotFound() {
|
|
// variante pour les animations
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2
|
|
}
|
|
}
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 }
|
|
};
|
|
|
|
// animation du chiffre 404
|
|
const textVariants = {
|
|
hidden: { opacity: 0, scale: 0.8 },
|
|
visible: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
transition: {
|
|
duration: 0.8,
|
|
ease: [0.43, 0.13, 0.23, 0.96]
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<motion.div
|
|
className="mb-6 overflow-hidden"
|
|
variants={textVariants}
|
|
>
|
|
<div className="text-9xl font-bold text-primary relative">
|
|
<motion.span
|
|
className="inline-block"
|
|
animate={{
|
|
rotateY: [0, 360],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
ease: "easeInOut",
|
|
repeat: Infinity,
|
|
repeatDelay: 5
|
|
}}
|
|
>4</motion.span>
|
|
<motion.span
|
|
className="inline-block mx-4"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
}}
|
|
transition={{
|
|
duration: 1.5,
|
|
ease: "easeInOut",
|
|
repeat: Infinity,
|
|
repeatDelay: 2
|
|
}}
|
|
>0</motion.span>
|
|
<motion.span
|
|
className="inline-block"
|
|
animate={{
|
|
rotateY: [0, -360],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
ease: "easeInOut",
|
|
repeat: Infinity,
|
|
repeatDelay: 5
|
|
}}
|
|
>4</motion.span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
className="text-3xl font-bold mb-6"
|
|
variants={itemVariants}
|
|
>
|
|
Page Non Trouvée
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-lg text-muted-foreground mb-8 max-w-md"
|
|
variants={itemVariants}
|
|
>
|
|
Oups ! La page que vous recherchez n'existe pas ou a été déplacée.
|
|
</motion.p>
|
|
|
|
<motion.div variants={itemVariants}>
|
|
<Link
|
|
href="/"
|
|
className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors hover:scale-105 transform duration-200 inline-block"
|
|
>
|
|
Retour à l'accueil
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
} |