product detail desktop

1 files changed, 22 insertions, 10 deletions

diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx
index c4dee606..7acf21dc 100644
--- a/src/core/components/layouts/AnimationLayout.jsx
+++ b/src/core/components/layouts/AnimationLayout.jsx
@@ -1,20 +1,32 @@
+import useDevice from '@/core/hooks/useDevice'
 import { motion } from 'framer-motion'
 
 const AnimationLayout = ({ children, ...props }) => {
-  const transition = {
-    ease: 'easeIn',
-    duration: 0.2
+  const { isMobile } = useDevice()
+
+  const initialConfig = {
+    opacity: 0,
+    x: 0,
+    y: 0
+  }
+
+  const animateConfig = {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    transition: { duration: 0.2, delay: 0.2, ease: 'easeInOut' }
+  }
+
+  const exitConfig = {
+    opacity: 0,
+    x: isMobile ? 30 : 0,
+    y: 0,
+    transition: { duration: 0.2, ease: 'easeInOut' }
   }
 
   return (
     children && (
-      <motion.main
-        initial={{ opacity: 0, x: 0, y: 0 }}
-        animate={{ opacity: 1, x: 0, y: 0 }}
-        exit={{ opacity: 0, x: 30, y: 0 }}
-        transition={transition}
-        {...props}
-      >
+      <motion.main initial={initialConfig} animate={animateConfig} exit={exitConfig} {...props}>
         {children}
       </motion.main>
     )