From 21f7e75a63a7d4216fc447c1769634fb4684677e Mon Sep 17 00:00:00 2001
From: LeonG11 <kkacanov198@gmail.com>
Date: Tue, 9 Jun 2026 17:59:29 +0300
Subject: [PATCH] =?UTF-8?q?fix(front)=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BD=20header=20footer=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8?=
 =?UTF-8?q?=D0=B2=D0=BD=D1=8B=D0=B5=20=D0=B4=D0=BB=D1=8F=20=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D0=BE=D0=B9=20=D0=B8=20=D0=B4?=
 =?UTF-8?q?=D0=B5=D1=81=D0=BA=D1=82=D0=BE=D0=BF=20=D0=B2=D0=B5=D1=80=D1=81?=
 =?UTF-8?q?=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{Footer.jsx => FooterDesktop.jsx}         |  7 +-
 frontend/src/components/FooterMobile.jsx      | 23 +++++++
 .../{Header.jsx => HeaderDesktop.jsx}         |  7 +-
 frontend/src/components/HeaderMobile.jsx      | 64 +++++++++++++++++++
 frontend/src/components/PageLayout.jsx        | 20 ++++--
 frontend/src/pages/AddItem.jsx                |  7 +-
 6 files changed, 116 insertions(+), 12 deletions(-)
 rename frontend/src/components/{Footer.jsx => FooterDesktop.jsx} (90%)
 create mode 100644 frontend/src/components/FooterMobile.jsx
 rename frontend/src/components/{Header.jsx => HeaderDesktop.jsx} (94%)
 create mode 100644 frontend/src/components/HeaderMobile.jsx

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/FooterDesktop.jsx
similarity index 90%
rename from frontend/src/components/Footer.jsx
rename to frontend/src/components/FooterDesktop.jsx
index a256780..43c5449 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/FooterDesktop.jsx
@@ -1,12 +1,15 @@
 import { useNavigate } from "react-router-dom";
 import siteLogo from "../assets/Исходники/logo.png";
 
-export default function Footer() {
+export default function FooterDesktop() {
   const navigate = useNavigate();
 
   return (
     <footer className="bg-light-blue w-full h-27.5 px-16 flex items-center justify-between ">
-      <button className="flex flex-col items-center  text-lg tracking-widest text-gold" onClick={()=>navigate("/")}>
+      <button
+        className="flex flex-col items-center  text-lg tracking-widest text-gold"
+        onClick={() => navigate("/")}
+      >
         <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
         <span>FISH FISH</span>
       </button>
diff --git a/frontend/src/components/FooterMobile.jsx b/frontend/src/components/FooterMobile.jsx
new file mode 100644
index 0000000..7c790ee
--- /dev/null
+++ b/frontend/src/components/FooterMobile.jsx
@@ -0,0 +1,23 @@
+import { useNavigate } from "react-router-dom";
+import siteLogo from "../assets/Исходники/logo.png";
+
+export default function FooterMobile() {
+  const navigate = useNavigate();
+
+  return (
+    <footer className="bg-light-blue w-full h-27.5 px-6 flex items-center justify-between ">
+      <button
+        className="flex flex-col items-center text-sm tracking-widest text-gold"
+        onClick={() => navigate("/")}
+      >
+        <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
+        <span>FISH FISH</span>
+      </button>
+      <div className="flex items-center">
+        <button className="text-light-gray hover:text-gold transition-colors duration-200 text-sm">
+          +7 (800) 900-20-20
+        </button>
+      </div>
+    </footer>
+  );
+}
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/HeaderDesktop.jsx
similarity index 94%
rename from frontend/src/components/Header.jsx
rename to frontend/src/components/HeaderDesktop.jsx
index e565625..b9ebb40 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/HeaderDesktop.jsx
@@ -1,12 +1,15 @@
 import { useNavigate } from "react-router-dom";
 import siteLogo from "../assets/Исходники/logo.png";
 
-export default function Header() {
+export default function HeaderDesktop() {
   const navigate = useNavigate();
 
   return (
     <header className="w-full h-27.5 px-16 flex items-center justify-between ">
-      <button className="flex flex-col items-center gap-2 text-lg tracking-widest text-gold" onClick={()=>navigate("/")}>
+      <button
+        className="flex flex-col items-center gap-2 text-lg tracking-widest text-gold"
+        onClick={() => navigate("/")}
+      >
         <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
         <span>FISH FISH</span>
       </button>
diff --git a/frontend/src/components/HeaderMobile.jsx b/frontend/src/components/HeaderMobile.jsx
new file mode 100644
index 0000000..89cb688
--- /dev/null
+++ b/frontend/src/components/HeaderMobile.jsx
@@ -0,0 +1,64 @@
+import { useNavigate } from "react-router-dom";
+import siteLogo from "../assets/Исходники/logo.png";
+
+export default function HeaderMobile() {
+  const navigate = useNavigate();
+
+  return (
+    <header className="w-full h-27.5 px-6 flex items-center justify-between ">
+      <button
+        className="flex flex-col items-center gap-2 text-sm tracking-widest text-gold"
+        onClick={() => navigate("/")}
+      >
+        <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
+        <span>FISH FISH</span>
+      </button>
+
+      <div className="flex items-center">
+        <button className="text-slate-200 hover:text-gold transition-colors duration-200 pr-7">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="12"
+              cy="7.5"
+              r="4"
+              stroke="currentColor"
+              strokeLinecap="square"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M21 21H3C3 17.6863 5.68629 15 9 15H15C18.3137 15 21 17.6863 21 21Z"
+              stroke="currentColor"
+              strokeLinecap="square"
+            />
+          </svg>
+        </button>
+        <button className="text-slate-200 hover:text-gold transition-colors duration-200">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16.2654 8H7.73459C6.73929 8 5.89545 8.73186 5.75469 9.71716L4.32612 19.7172C4.154 20.922 5.08892 22 6.30602 22H17.694C18.9111 22 19.846 20.922 19.6739 19.7172L18.2453 9.71716C18.1046 8.73186 17.2607 8 16.2654 8Z"
+              stroke="currentColor"
+            />
+            <path
+              d="M9 10V5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V10"
+              stroke="currentColor"
+            />
+            <circle cx="9" cy="10" r="1" fill="currentColor" />
+            <circle cx="15" cy="10" r="1" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+    </header>
+  );
+}
diff --git a/frontend/src/components/PageLayout.jsx b/frontend/src/components/PageLayout.jsx
index dcf1f18..1ac8980 100644
--- a/frontend/src/components/PageLayout.jsx
+++ b/frontend/src/components/PageLayout.jsx
@@ -1,12 +1,24 @@
-import Footer from "./Footer";
-import Header from "./Header";
+import FooterDesktop from "./FooterDesktop";
+import HeaderDesktop from "./HeaderDesktop";
+import FooterMobile from "./FooterMobile";
+import HeaderMobile from "./HeaderMobile";
 
 export default function PageLayout({ children }) {
   return (
     <body className="min-h-screen flex flex-col w-full">
-      <Header />
+      <div className="hidden lg:block">
+        <HeaderDesktop />
+      </div>
+      <div className="block lg:hidden">
+        <HeaderMobile />
+      </div>
       {children}
-      <Footer />
+      <div className="hidden lg:block">
+        <FooterDesktop />
+      </div>
+      <div className="block lg:hidden">
+        <FooterMobile />
+      </div>
     </body>
   );
 }
diff --git a/frontend/src/pages/AddItem.jsx b/frontend/src/pages/AddItem.jsx
index 7c667a8..21288e6 100644
--- a/frontend/src/pages/AddItem.jsx
+++ b/frontend/src/pages/AddItem.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import * as api from "../api"; // Импортируем все функции из api/index.js
-import Header from "../components/Header";
+import PageLayout from "../components/PageLayout";
 
 export default function Dashboard() {
   const [formData, setFormData] = useState({
@@ -39,8 +39,7 @@ export default function Dashboard() {
   };
 
   return (
-    <div>
-      <Header />
+    <PageLayout>
       <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border">
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
@@ -109,6 +108,6 @@ export default function Dashboard() {
           </div>
         </form>
       </div>
-    </div>
+    </PageLayout>
   );
 }