add motion

package-lock.json

@@ -8,6 +8,7 @@
       "name": "price-builder-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "framer-motion": "^11.13.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.27.0"
@@ -3801,6 +3802,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.5.tgz",
+      "integrity": "sha512-rArI0zPU9VkpS3Wt0J7dmRxAFUWtzPWoSofNQAP0UO276CmJ+Xlf5xN19GMw3w2QsdrS2sU+0+Q2vtuz4IEZaw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.13.0",
+        "motion-utils": "^11.13.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4751,6 +4779,16 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+    },
+    "node_modules/motion-utils": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5790,7 +5828,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/type-check": {

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^11.13.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0"

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);
     }
 }

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Layout from '@app/layout/layout';
-import HomePage from '@pages/home/home.page';
+import { HomePage } from '@pages/home';
 import { LaptopPredictPage } from '@pages/laptop';
 import { TVPredictPage } from '@pages/tv';
 

src/pages/laptop/laptop.page.tsx

@@ -8,6 +8,7 @@ import {
   PredictResponseType,
 } from '@/shared/types';
 import { apiLaptop } from '@/shared/api';
+import { motion } from 'framer-motion';
 
 const LaptopPredictPage = () => {
   const [requestSelectorsData, setRequestSelectorsData] = useState<
@@ -66,17 +67,40 @@ const LaptopPredictPage = () => {
     fetchData();
   }, []);
 
+  const iconVariants = {
+    hidden: { x: -100, opacity: 0 },
+    visible: { x: 0, opacity: 1 },
+  };
+
+  const containerVariants = {
+    hidden: { x: 100, opacity: 0 },
+    visible: { x: 0, opacity: 1 },
+  };
+
   return (
     <div className={classes.laptop}>
-      <img src={Laptop} className={classes.icon} />
-      <div className={classes.container}>
+      <motion.img
+        src={Laptop}
+        className={classes.icon}
+        initial="hidden"
+        animate="visible"
+        variants={iconVariants}
+        transition={{ duration: 0.5 }}
+      />
+      <motion.div
+        className={classes.container}
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+        transition={{ duration: 0.5 }}
+      >
         <Form
           selectorsData={requestSelectorsData}
           updateField={updateField}
           handleGetPredict={handleGetPredict}
           response={response}
         />
-      </div>
+      </motion.div>
     </div>
   );
 };

src/pages/tv/tv.page.tsx

@@ -8,6 +8,7 @@ import {
   PredictResponseType,
 } from '@/shared/types';
 import { apiTV } from '@/shared/api';
+import { motion } from 'framer-motion';
 
 const TVPredictPage = () => {
   const [requestSelectorsData, setRequestSelectorsData] = useState<
@@ -64,17 +65,40 @@ const TVPredictPage = () => {
     fetchData();
   }, []);
 
+  const iconVariants = {
+    hidden: { x: -100, opacity: 0 },
+    visible: { x: 0, opacity: 1 },
+  };
+
+  const containerVariants = {
+    hidden: { x: 100, opacity: 0 },
+    visible: { x: 0, opacity: 1 },
+  };
+
   return (
     <div className={classes.tv}>
-      <img src={TV} className={classes.icon} />
-      <div className={classes.container}>
+      <motion.img
+        src={TV}
+        className={classes.icon}
+        initial="hidden"
+        animate="visible"
+        variants={iconVariants}
+        transition={{ duration: 0.5 }}
+      />
+      <motion.div
+        className={classes.container}
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+        transition={{ duration: 0.5 }}
+      >
         <Form
           selectorsData={requestSelectorsData}
           updateField={updateField}
           handleGetPredict={handleGetPredict}
           response={response}
         />
-      </div>
+      </motion.div>
     </div>
   );
 };

src/widgets/navbar/navbar.widget.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
 import classes from './styles.module.scss';
 
 const Navbar = () => {
@@ -8,8 +9,19 @@ const Navbar = () => {
     navigation('/');
   };
 
+  const navbarVariants = {
+    hidden: { y: -100, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+  };
+
   return (
-    <nav className={classes.navbar}>
+    <motion.nav
+      className={classes.navbar}
+      initial="hidden"
+      animate="visible"
+      variants={navbarVariants}
+      transition={{ duration: 0.5 }}
+    >
       <div className={classes.container}>
         <div className={classes.logo}>
           <h1 className={classes.title} onClick={handleHomeRedirect}>
@@ -18,7 +30,7 @@ const Navbar = () => {
           <span className={classes.version}>v1.0.0</span>
         </div>
       </div>
-    </nav>
+    </motion.nav>
   );
 };