add motion

src/pages/home/components/styles.module.scss

@@ -9,7 +9,7 @@ $adaptive: (
         size: 250px,
     ),
     mobile: (
-        size: auto,
+        size: 100%,
     ),
 );
 

src/pages/home/home.page.tsx

@@ -3,6 +3,7 @@ import TV from '@shared/assets/images/tv.png';
 import Laptop from '@shared/assets/images/laptop.png';
 import { HomeButton } from './components/home.button';
 import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
 
 const HomePage = () => {
   const navigation = useNavigate();
@@ -15,13 +16,37 @@ const HomePage = () => {
     navigation('/tv');
   };
 
+  const titleVariants = {
+    hidden: { y: 100, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+  };
+
+  const containerVariants = {
+    hidden: { y: 100, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+  };
+
   return (
     <div className={classes.home}>
-      <h1 className={classes.title}>Выберите тип обученной модели</h1>
-      <div className={classes.container}>
+      <motion.h1
+        className={classes.title}
+        initial="hidden"
+        animate="visible"
+        variants={titleVariants}
+        transition={{ duration: 0.5 }}
+      >
+        Select the type of trained model
+      </motion.h1>
+      <motion.div
+        className={classes.container}
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+        transition={{ duration: 0.5 }}
+      >
         <HomeButton imgSrc={Laptop} onClick={handleLaptopRedirect} />
         <HomeButton imgSrc={TV} onClick={handleTVRedirect} />
-      </div>
+      </motion.div>
     </div>
   );
 };

src/pages/home/index.ts

@@ -0,0 +1 @@
+export { default as HomePage } from './home.page';

src/pages/home/styles.module.scss

@@ -1,4 +1,17 @@
 @use '@shared/assets/styles/fonts' as fonts;
+@use '@shared/assets/styles/adaptive' as adaptive;
+
+$adaptive: (
+    desktop: (
+        flex-direction: row,
+    ),
+    table: (
+        flex-direction: row,
+    ),
+    mobile: (
+        flex-direction: column,
+    ),
+);
 
 .home {
     display: flex;
@@ -16,5 +29,6 @@
         display: flex;
         margin: 0 auto;
         gap: 24px;
+        @include adaptive.set-adaptive($adaptive, flex-direction, flex-direction);
     }
 }