From b3f95a6ad99056fc0bea006e10b69cdce7e5de9d Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Mon, 11 Aug 2025 11:29:51 +0400
Subject: [PATCH] feat: footer for mobiles

---
 src/components/layout/Footer/Footer.module.css      |  6 ++++++
 src/components/layout/Footer/Footer.tsx             |  3 ++-
 src/components/layout/PageBlock/PageItem.module.css | 10 ++++++++++
 src/components/layout/PageBlock/PageItem.tsx        |  6 ++++++
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/components/layout/Footer/Footer.module.css

diff --git a/src/components/layout/Footer/Footer.module.css b/src/components/layout/Footer/Footer.module.css
new file mode 100644
index 0000000..563b540
--- /dev/null
+++ b/src/components/layout/Footer/Footer.module.css
@@ -0,0 +1,6 @@
+.footer {
+    padding: var(--mantine-spacing-md);
+    @media (max-width: 48em) {
+        padding: 0
+    }
+}
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
index 0be38c7..a8e58c5 100644
--- a/src/components/layout/Footer/Footer.tsx
+++ b/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={"#"}
diff --git a/src/components/layout/PageBlock/PageItem.module.css b/src/components/layout/PageBlock/PageItem.module.css
index 56cf0b8..0307830 100644
--- a/src/components/layout/PageBlock/PageItem.module.css
+++ b/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;
     }
 }
diff --git a/src/components/layout/PageBlock/PageItem.tsx b/src/components/layout/PageBlock/PageItem.tsx
index d1ee17e..c4bf405 100644
--- a/src/components/layout/PageBlock/PageItem.tsx
+++ b/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>
     );