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",