feat: page opening and phone country dropdown animations

components/MotionWrapper/MotionWrapper.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { motion, MotionProps } from 'framer-motion';
+import { ReactNode } from 'react';
+
+interface MotionWrapperProps extends MotionProps {
+  children: ReactNode;
+}
+
+export function MotionWrapper({ children, ...props }: MotionWrapperProps) {
+  return <motion.div {...props}>{children}</motion.div>;
+}

components/PageBlock/PageItem.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties, FC, ReactNode } from "react";
 import classNames from "classnames";
+import { MotionWrapper } from "@/components/MotionWrapper/MotionWrapper";
 import styles from "./PageItem.module.css";
 
 type Props = {
@@ -19,7 +20,7 @@ const PageItem: FC<Props> = ({
     noBorderRadius = false,
     fullScreenMobile = false,
 }) => {
-    return (
+    const pageItemBody = (
         <div
             style={style}
             className={classNames(
@@ -32,5 +33,14 @@ const PageItem: FC<Props> = ({
             {children}
         </div>
     );
+
+    return (
+        <MotionWrapper
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6 }}>
+            {pageItemBody}
+        </MotionWrapper>
+    );
 };
 export default PageItem;

components/PhoneInput/components/CountrySelect.tsx

@@ -87,6 +87,7 @@ const CountrySelect = ({
         <Combobox
             store={combobox}
             position={"bottom-start"}
+            transitionProps={{ duration: 200, transition: "fade-down" }}
             styles={{
                 dropdown: {
                     borderRadius: "15px",

package.json

@@ -27,6 +27,7 @@
     "@reduxjs/toolkit": "^2.8.2",
     "@tabler/icons-react": "^3.34.0",
     "classnames": "^2.5.1",
+    "framer-motion": "^12.23.7",
     "i18n-iso-countries": "^7.14.0",
     "libphonenumber-js": "^1.12.10",
     "next": "15.3.3",

yarn.lock

@@ -6989,6 +6989,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^12.23.7":
+  version: 12.23.7
+  resolution: "framer-motion@npm:12.23.7"
+  dependencies:
+    motion-dom: "npm:^12.23.7"
+    motion-utils: "npm:^12.23.6"
+    tslib: "npm:^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
+  checksum: 10c0/46f128b5f5cbfbd454390f86c4a850dd704caf6f9bf44719e41f7dbca0f498b0ad4ac8c02e90c0c6215c8d0b645da52c5b251eead40ec252939cd8e10659c483
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^10.0.0":
   version: 10.1.0
   resolution: "fs-extra@npm:10.1.0"
@@ -9059,6 +9081,7 @@ __metadata:
     eslint-config-mantine: "npm:^4.0.3"
     eslint-plugin-jsx-a11y: "npm:^6.10.2"
     eslint-plugin-react: "npm:^7.37.5"
+    framer-motion: "npm:^12.23.7"
     i18n-iso-countries: "npm:^7.14.0"
     jest: "npm:^30.0.0"
     jest-environment-jsdom: "npm:^30.0.0"
@@ -9468,6 +9491,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion-dom@npm:^12.23.7":
+  version: 12.23.7
+  resolution: "motion-dom@npm:12.23.7"
+  dependencies:
+    motion-utils: "npm:^12.23.6"
+  checksum: 10c0/611e9eacad38820a2736027b1634f4ba97337bb480db403f5f589355564bd0a7083f347c79278193870ef576a55975b254787f8d121b56645a7da58203187f9f
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^12.23.6":
+  version: 12.23.6
+  resolution: "motion-utils@npm:12.23.6"
+  checksum: 10c0/c058e8ba6423b3baa63e985bcc669877ee7d9579d938f5348b4e60c5ea1b4b33dd7f4877434436a4a5807f3cf00370d3fd4079a6fdd6309c5c87aa62b311a897
+  languageName: node
+  linkType: hard
+
 "mrmime@npm:^2.0.0":
   version: 2.0.1
   resolution: "mrmime@npm:2.0.1"