feat: footer for mobiles

src/components/layout/Footer/Footer.module.css

@@ -0,0 +1,6 @@
+.footer {
+    padding: var(--mantine-spacing-md);
+    @media (max-width: 48em) {
+        padding: 0
+    }
+}

src/components/layout/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Group, Text } from "@mantine/core";
+import styles from "@/components/layout/Footer/Footer.module.css";
 
 const Footer = () => {
     return (
@@ -7,7 +8,7 @@ const Footer = () => {
             justify={"flex-end"}
             align={"flex-end"}
             h={"7vh"}
-            p={"md"}>
+            className={styles.footer}>
             <Group gap={"xl"}>
                 <Link
                     href={"#"}

src/components/layout/PageBlock/PageItem.module.css

@@ -37,5 +37,15 @@
         bottom: 0;
         z-index: 100;
         overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mobile-footer {
+    display: none;
+    @media (max-width: 48em) {
+        display: block;
+        margin-top: auto;
     }
 }

src/components/layout/PageBlock/PageItem.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, FC, ReactNode } from "react";
 import classNames from "classnames";
 import { MotionWrapper } from "@/components/layout/MotionWrapper/MotionWrapper";
+import Footer from "@/components/layout/Footer/Footer";
 import styles from "./PageItem.module.css";
 
 type Props = {
@@ -31,6 +32,11 @@ const PageItem: FC<Props> = ({
                 fullScreenMobile && styles["container-full-screen-mobile"]
             )}>
             {children}
+            {fullScreenMobile && (
+                <div className={styles["mobile-footer"]}>
+                    <Footer />
+                </div>
+            )}
         </div>
     );