Merge pull request #58 from SlimusMinus/add-logo

added logo and bagFix

src/components/NahodkaLogo.jsx

@@ -0,0 +1,268 @@
+import React from "react";
+
+export default function NahodkaLogo({
+  width = 760,
+  height = 360,
+  className,
+}) {
+  return (
+    <svg
+      className={className}
+      width={width}
+      height={height}
+      viewBox="-40 100 760 200"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        {/* ========================= */}
+        {/* ЦВЕТ БУКВ */}
+        {/* ========================= */}
+
+        <linearGradient
+          id="coral"
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="1"
+        >
+          <stop offset="0%" stopColor="#E99A78" />
+          <stop offset="100%" stopColor="#D97956" />
+        </linearGradient>
+
+        {/* ========================= */}
+        {/* РАМКА ЛУПЫ */}
+        {/* ========================= */}
+
+        <linearGradient
+          id="magnifier"
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="1"
+        >
+          <stop offset="0%" stopColor="#EA9B78" />
+          <stop offset="100%" stopColor="#D57250" />
+        </linearGradient>
+
+        {/* ========================= */}
+        {/* СТЕКЛО */}
+        {/* ========================= */}
+
+        <radialGradient id="glass">
+          <stop offset="0%" stopColor="#FFFDF8" />
+          <stop offset="100%" stopColor="#F3E9DA" />
+        </radialGradient>
+
+        {/* ========================= */}
+        {/* РУЧКА */}
+        {/* ========================= */}
+
+        <linearGradient
+          id="handle"
+          x1="0"
+          y1="0"
+          x2="1"
+          y2="1"
+        >
+          <stop offset="0%" stopColor="#86A383" />
+          <stop offset="100%" stopColor="#617D68" />
+        </linearGradient>
+
+        {/* ========================= */}
+        {/* ТЕНЬ */}
+        {/* ========================= */}
+
+        <filter
+          id="shadow"
+          x="-30%"
+          y="-30%"
+          width="160%"
+          height="180%"
+        >
+          <feDropShadow
+            dx="0"
+            dy="5"
+            stdDeviation="5"
+            floodColor="#8F4938"
+            floodOpacity="0.25"
+          />
+        </filter>
+
+        <filter
+          id="magnifierShadow"
+          x="-40%"
+          y="-40%"
+          width="180%"
+          height="200%"
+        >
+          <feDropShadow
+            dx="0"
+            dy="5"
+            stdDeviation="4"
+            floodColor="#8F4938"
+            floodOpacity="0.3"
+          />
+        </filter>
+      </defs>
+
+      {/* ===================================================== */}
+      {/* ЛЕВАЯ ЧАСТЬ — "НАХ" */}
+      {/* ===================================================== */}
+
+      <g
+  fill="url(#coral)"
+  filter="url(#shadow)"
+  fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
+  fontSize="135"
+  fontWeight="800"
+>
+  <text
+    x="30"
+    y="225"
+    letterSpacing="1"
+  >
+    Нах
+  </text>
+</g>
+
+      {/* ===================================================== */}
+      {/* ЛУПА — "О" */}
+      {/* ===================================================== */}
+
+      <g
+          transform="translate(352 190)"
+          filter="url(#magnifierShadow)"
+      >
+        {/* Ручка */}
+
+        <rect
+            x="34"
+            y="70"
+            width="28"
+            height="105"
+            rx="14"
+            transform="rotate(-43 34 70)"
+            fill="url(#handle)"
+            stroke="#D97956"
+            strokeWidth="6"
+        />
+
+        {/* Внешняя рамка */}
+
+        <circle
+            cx="0"
+            cy="0"
+            r="70"
+            fill="url(#magnifier)"
+        />
+
+        {/* Внутренняя рамка */}
+
+        <circle
+            cx="0"
+            cy="0"
+            r="58"
+            fill="#F7EEDF"
+        />
+
+        {/* Стекло */}
+
+        <circle
+            cx="0"
+            cy="0"
+            r="53"
+            fill="url(#glass)"
+        />
+
+        {/* Блик */}
+
+        <ellipse
+            cx="-22"
+            cy="-25"
+            rx="8"
+            ry="15"
+            transform="rotate(35 -22 -25)"
+            fill="white"
+            opacity="0.65"
+        />
+
+        {/* ================================================= */}
+        {/* ЛАПКА */}
+        {/* ================================================= */}
+
+        <g transform="translate(0 15)">
+          <path
+              d="
+              M 0 25
+              C -8 18 -25 12 -25 -2
+              C -25 -13 -14 -18 -5 -12
+              L 0 -8
+              L 5 -12
+              C 14 -18 25 -13 25 -2
+              C 25 12 8 18 0 25
+              Z
+            "
+              fill="#E8D3B0"
+          />
+
+          <ellipse
+              cx="-22"
+              cy="-20"
+              rx="7"
+              ry="10"
+              fill="#E8D3B0"
+              transform="rotate(-25 -22 -20)"
+          />
+
+          <ellipse
+              cx="-7"
+              cy="-29"
+              rx="7"
+              ry="11"
+              fill="#E8D3B0"
+          />
+
+          <ellipse
+              cx="9"
+              cy="-29"
+              rx="7"
+              ry="11"
+              fill="#E8D3B0"
+          />
+
+          <ellipse
+              cx="23"
+              cy="-20"
+              rx="7"
+              ry="10"
+              fill="#E8D3B0"
+              transform="rotate(25 23 -20)"
+          />
+        </g>
+      </g>
+
+      {/* ===================================================== */}
+      {/* ПРАВАЯ ЧАСТЬ — "ДКА" */}
+      {/* ===================================================== */}
+
+      {/* ПРАВАЯ ЧАСТЬ — "ДКА" */}
+
+<g
+  fill="url(#coral)"
+  filter="url(#shadow)"
+  fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
+  fontSize="135"
+  fontWeight="800"
+>
+  <text
+    x="436"
+    y="225"
+    letterSpacing="1"
+  >
+    дка
+  </text>
+</g>
+    </svg>
+  );
+}

src/components/Sidebar.jsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import LogoIcon from "./icons/LogoIcon";
 import GlobeIcon from "./icons/GlobeIcon";
 import SunIcon from "./icons/SunIcon";
 import MoonIcon from "./icons/MoonIcon";
@@ -67,8 +66,6 @@ export default function Sidebar({
         <div className={`f-overlay${open ? " show" : ""}`} onClick={onClose} />
         <div className={`f-sidebar${open ? " open" : ""}`}>
           <div className="f-sb-head">
-            <div className="f-sb-logo"><LogoIcon /></div>
-            <span className="f-sb-name">{t('app.name')}</span>
           </div>
           <nav className="f-sb-nav">
             {NAV_ITEMS.map(({ icon, key: itemKey, labelKey }) => {

src/components/feed/FeedTopBar.jsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import AppTopBar from "../layout/AppTopBar";
 import { useTranslation } from "react-i18next";
+import NahodkaLogo from "../NahodkaLogo";
 
 export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange }) {
   const { t } = useTranslation();
@@ -46,7 +47,7 @@ export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange
             className="f-topbar-dropdown-btn"
             onClick={() => setOpen((v) => !v)}
           >
-            <span>{t("app.name")}</span>
+            <NahodkaLogo className="f-topbar-logo" width={100} height={40} />
             <svg
               className={`f-topbar-chevron${open ? " open" : ""}`}
               viewBox="0 0 24 24"

src/components/landing/Navbar.jsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import NahodkaLogo from "../NahodkaLogo";
 import GlobeIcon from "../icons/GlobeIcon";
 import MoonIcon from "../icons/MoonIcon";
 import SunIcon from "../icons/SunIcon";
@@ -12,7 +13,9 @@ export default function Navbar({ onLoginClick }) {
 
   return (
       <nav className="nk-nav">
-        <span className="nk-logo">{t('app.name')}</span>
+        <div className="nk-logo">
+          <NahodkaLogo />
+        </div>
 
         <div className="nk-nav-right">
           <button className="nk-theme-btn" onClick={toggleTheme} title={theme === 'dark' ? t('sidebar.lightTheme') : t('sidebar.darkTheme')}>

src/styles/NakhodkaLanding.css

@@ -132,26 +132,33 @@
   position: relative;
   z-index: 2;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 8px 10px 8px 4px;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 8px 12px;
   border-radius: 999px;
   background: rgba(var(--nk-signal-rgb), 0.02);
   border: 1px solid transparent;
 }
 
 .nk-logo {
-  font-family: 'Fraunces', serif;
+  display: flex;
-  font-size: 21px;
+  align-items: center;
-  font-weight: 600;
+  flex-shrink: 0;
-  letter-spacing: -0.01em;
+}
-  color: var(--text-primary);
+
+.nk-logo svg {
+  height: 80px;
+  width: auto;
+  display: block;
 }
 
 .nk-nav-right {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
+  margin-left: auto;
 }
 
 .nk-lang-btn,
@@ -286,16 +293,6 @@
   font-weight: 600;
 }
 
-.nk-eyebrow::before {
-  content: '';
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--nk-signal);
-  box-shadow: 0 0 0 3px rgba(var(--nk-signal-rgb), 0.18);
-  flex-shrink: 0;
-}
-
 .nk-h1 {
   font-family: 'Fraunces', serif;
   font-weight: 600;
@@ -453,12 +450,12 @@
   }
 
   .nk-nav {
-    padding: 4px;
+    padding: 0;
     background: none;
   }
 
-  .nk-logo {
+  .nk-logo svg {
-    font-size: 19px;
+    height: 64px;
   }
 
   .nk-hero-text {

src/styles/card.css

@@ -219,13 +219,11 @@
 
 /* ── Footer (phone + owner actions) ── */
 .f-card-foot {
-  display: flex; flex-direction: row; align-items: center; justify-content: center;
+  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
   gap: 10px; padding: 10px 16px 12px;
 }
-.f-card-foot-left  { display: flex; align-items: center; }
-.f-card-foot-right { display: flex; align-items: center; }
 .f-card-phone {
-  color: var(--teal); font-size: .75rem; font-weight: 700;
+  color: var(--teal); font-size: .85rem; font-weight: 700;
   text-decoration: none; display: flex; align-items: center; gap: 4px;
   white-space: nowrap;
 }
@@ -235,9 +233,9 @@
   display: flex; align-items: center; gap: 5px;
   background: rgba(var(--teal-rgb), .1);
   border: 1px solid rgba(var(--teal-rgb), .3);
-  border-radius: 999px; padding: 6px 20px;
+  border-radius: 999px; padding: 12px 34px;
   cursor: pointer; font-family: var(--font);
-  font-size: .75rem; font-weight: 700;
+  font-size: .95rem; font-weight: 700;
   color: var(--teal); transition: all .2s;
   white-space: nowrap;
 }
@@ -390,7 +388,7 @@
 
 @media (max-width: 600px) {
   .f-card-contact {
-    padding: 5px 16px;
+    padding: 12px 34px;
-    font-size: .7rem;
+    font-size: .95rem;
   }
 }

src/styles/layout.css

@@ -129,7 +129,7 @@
   z-index: 10;
 }
 .f-topbar-dropdown-btn {
-  display: inline-flex; align-items: center; gap: 4px;
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
   background: none; border: none; cursor: pointer;
   color: var(--text-primary);
   font-family: var(--font); font-weight: 900; font-size: 1.25rem;
@@ -138,6 +138,7 @@
   transition: background .15s;
 }
 .f-topbar-dropdown-btn:hover { background: var(--hover-bg); }
+.f-topbar-logo { height: auto; display: block; min-width: 0; max-width: 100%; flex-shrink: 1; }
 
 .f-topbar-chevron {
   width: 18px; height: 18px; flex-shrink: 0;

src/styles/modal.css

@@ -284,16 +284,24 @@
 
   .f-modal:not(.auth-modal) {
     width: 100%;
-    max-height: 92vh;
+    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
     border-radius: 20px 20px 0 0;
-    padding: 20px 16px 32px; /* 32px снизу — отступ от home indicator */
+    padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px));
   }
 
   .auth-modal {
     width: 100%;
-    max-height: 80vh;
+    max-height: calc(80dvh - env(safe-area-inset-top, 0px));
     border-radius: 20px;
-    padding: 20px 16px 32px;
+    padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* Safe-area: не даём верху модалки уходить под вырез/браузерную панель на iOS */
+@supports (padding-top: env(safe-area-inset-top)) {
+  .f-modal-bg {
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
   }
 }
 
@@ -430,6 +438,13 @@
 .f-post-detail-modal .f-card-foot {
   padding: 8px 14px;
 }
+.f-app.f-map-view .f-card-foot .f-card-phone {
+  font-size: .75rem;
+}
+.f-app.f-map-view .f-card-contact {
+  padding: 8px 20px;
+  font-size: .75rem;
+}
 .f-post-detail-close {
   position: absolute;
   top: 12px;

src/styles/sidebar.css

@@ -1,7 +1,7 @@
 /* ── Left Navigation (Instagram-style) ── */
 
 .f-sb-head {
-  padding: 16px 20px 20px;
+  padding: 0;
   display: flex; align-items: center; gap: 11px;
 }
 .f-sb-logo {