From 54ee12c57c1b330d53a9fcbfca0aafa558f49ebc Mon Sep 17 00:00:00 2001
From: SlimusMinus <moscow_city231@rambler.ru>
Date: Fri, 21 Aug 2026 00:43:19 +0300
Subject: [PATCH] fixed start page and profile icon

---
 src/components/landing/Hero.jsx |   3 +-
 src/locales/en.json             |   2 +-
 src/locales/ru.json             |   2 +-
 src/styles/NakhodkaLanding.css  | 225 ++++++++++++++++++++++++--------
 src/styles/layout.css           |   9 +-
 5 files changed, 182 insertions(+), 59 deletions(-)

diff --git a/src/components/landing/Hero.jsx b/src/components/landing/Hero.jsx
index 0e9a88b..9dab746 100644
--- a/src/components/landing/Hero.jsx
+++ b/src/components/landing/Hero.jsx
@@ -1,4 +1,3 @@
-// src/components/landing/Hero.jsx
 import Navbar from "./Navbar";
 import RadarBeacon from "./RadarBeacon";
 import { useTranslation } from 'react-i18next';
@@ -24,6 +23,8 @@ export default function Hero({ onCtaClick, onLoginClick }) {
           <p className="nk-lead">
             {t('landing.heroLead')}
           </p>
+          <div className="nk-lead-spacer" />
+          <div className="nk-lead-spacer" />
           <div className="nk-cta-row">
             <button className="nk-cta-primary" onClick={onCtaClick}>
               {t('landing.startSearch')}
diff --git a/src/locales/en.json b/src/locales/en.json
index 26d833d..cd9aaca 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -212,7 +212,7 @@
     "eyebrow": "Service for finding lost pets and items",
     "heroTitle": "We believe that everything lost can be found.",
     "heroAccent": "You are not alone — we are searching together.",
-    "heroLead": "Post about your loss or find — Nakhodka will automatically match similar listings by photo, location, and description, showing matches near you.",
+    "heroLead": "Post ads for lost items and pets, browse the feed of found items, or search the map for nearby matches—and recover what you’ve lost faster. 'Nakhodka' connects those who are searching with those who have already found something.",
     "startSearch": "Start search",
     "howItWorks": "How it works",
     "step1Title": "Post an ad",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 0d1b231..6c75a67 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -213,7 +213,7 @@
     "eyebrow": "Сервис поиска пропавших питомцев и вещей",
     "heroTitle": "Верим, что всё потерянное можно найти.",
     "heroAccent": "Ты не один — мы ищем вместе",
-    "heroLead": "Разместите объявление о пропаже или находке — Находка сама сопоставит похожие записи по фото, месту и описанию и покажет совпадения рядом с вами.",
+    "heroLead": "Публикуйте объявления о пропавших вещах и питомцах, просматривайте ленту находок или ищите совпадения по карте рядом с вами — и находите то, что потеряли, быстрее. «Находка» соединяет тех, кто ищет, с теми, кто уже нашёл.",
     "startSearch": "Начать поиск",
     "howItWorks": "Как это работает",
     "step1Title": "Разместите объявление",
diff --git a/src/styles/NakhodkaLanding.css b/src/styles/NakhodkaLanding.css
index f2bb6c5..953c4c8 100644
--- a/src/styles/NakhodkaLanding.css
+++ b/src/styles/NakhodkaLanding.css
@@ -1,6 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');
+
+/*
+  Design tokens live scoped to .nk-page so nothing outside this page
+  needs to change. --teal / --teal-rgb / --bg-* / --text-* / --muted*
+  / --border / --hover-bg still come from the app's existing theme
+  (light/dark), we only add one new accent: --nk-amber.
+
+  Story: the radar's blue is the "signal" — a lost item calling out.
+  Amber is "found" — the moment it's answered. The one gradient on
+  the page runs from signal to found; everything else stays quiet.
+*/
 
 .nk-page {
+  --nk-amber: #d98f3b;
+  --nk-amber-rgb: 217, 143, 59;
+  --nk-signal: var(--teal, #0095f6);
+  --nk-signal-rgb: var(--teal-rgb, 0, 149, 246);
+
   font-family: 'Inter', sans-serif;
   background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-app) 100%);
   color: var(--text-primary);
@@ -59,6 +75,16 @@
   }
 }
 
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes eyebrowShimmer {
+  0% { background-position: 100% 50%; }
+  100% { background-position: -100% 50%; }
+}
+
 .nk-hero {
   position: relative;
   padding: 28px 6vw 0;
@@ -74,39 +100,58 @@
   background-image: radial-gradient(var(--text-primary) 1px, transparent 1px);
   background-size: 26px 26px;
   animation: drift 14s linear infinite;
-  opacity: 0.1;
+  opacity: 0.07;
+  mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000 0%, transparent 75%);
 }
 
 .nk-glow {
   position: absolute;
-  top: -20%;
-  right: -10%;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(0, 149, 246, 0.14) 0%, transparent 70%);
+  top: -22%;
+  right: -12%;
+  width: 620px;
+  height: 620px;
+  background: radial-gradient(circle, rgba(var(--nk-signal-rgb), 0.16) 0%, transparent 70%);
   filter: blur(10px);
+  animation: fadeIn 1.2s ease both;
 }
 
+.nk-glow::after {
+  content: '';
+  position: absolute;
+  left: -260px;
+  bottom: -320px;
+  width: 420px;
+  height: 420px;
+  background: radial-gradient(circle, rgba(var(--nk-amber-rgb), 0.13) 0%, transparent 72%);
+  filter: blur(6px);
+}
+
+/* ---------- Nav ---------- */
+
 .nk-nav {
   position: relative;
   z-index: 2;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 8px 10px 8px 4px;
+  border-radius: 999px;
+  background: rgba(var(--nk-signal-rgb), 0.02);
+  border: 1px solid transparent;
 }
 
 .nk-logo {
   font-family: 'Fraunces', serif;
-  font-size: 22px;
+  font-size: 21px;
   font-weight: 600;
-  letter-spacing: 0.01em;
+  letter-spacing: -0.01em;
   color: var(--text-primary);
 }
 
 .nk-nav-right {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
 
 .nk-lang-btn,
@@ -114,15 +159,16 @@
   background: var(--bg-card);
   border: 1px solid var(--border);
   color: var(--text-primary);
-  padding: 9px 12px;
+  padding: 9px 14px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 12.5px;
   font-weight: 600;
+  letter-spacing: 0.02em;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 4px;
-  transition: background 0.2s;
+  gap: 6px;
+  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
 }
 
 .nk-theme-btn {
@@ -132,23 +178,37 @@
 .nk-lang-btn:hover,
 .nk-theme-btn:hover {
   background: var(--hover-bg);
+  border-color: rgba(var(--nk-signal-rgb), 0.35);
+  transform: translateY(-1px);
+}
+
+.nk-lang-btn:focus-visible,
+.nk-theme-btn:focus-visible,
+.nk-nav-btn:focus-visible,
+.nk-cta-primary:focus-visible {
+  outline: 2px solid var(--nk-signal);
+  outline-offset: 2px;
 }
 
 .nk-nav-btn {
-  background: var(--teal, #0095f6);
-  border: 1px solid var(--teal, #0095f6);
+  background: var(--nk-signal);
+  border: 1px solid var(--nk-signal);
   color: #fff;
-  padding: 9px 20px;
+  padding: 10px 22px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
 }
 .nk-nav-btn:hover {
   background: #0074d9;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(var(--nk-signal-rgb), 0.3);
 }
 
+/* ---------- Radar (untouched) ---------- */
+
 .nk-radar {
   position: absolute;
   right: 4vw;
@@ -196,49 +256,76 @@
   transform: translateZ(0);
 }
 
+/* ---------- Hero copy ---------- */
+
 .nk-hero-text {
   position: relative;
   z-index: 2;
   max-width: 620px;
-  margin-top: 40px;
+  margin-top: 56px;
   animation: riseIn 0.8s ease both;
 }
 
 .nk-eyebrow {
-  display: inline-block;
-  font-size: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 18px;
   text-align: center;
-  color: var(--muted);
-  letter-spacing: 0.04em;
-  margin-bottom: 30px;
+  background: linear-gradient(100deg, var(--nk-signal) 0%, var(--nk-amber) 40%, var(--nk-signal) 80%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  background-size: 200% 100%;
+  animation: eyebrowShimmer 3s ease infinite;
+  letter-spacing: 0.09em;
+  margin-bottom: 22px;
   text-transform: uppercase;
   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;
-  font-size: clamp(30px, 6.76vw, 75px);
-  line-height: 1.08;
+  font-size: clamp(28px, 4.5vw, 56px);
+  line-height: 1.06;
+  letter-spacing: -0.01em;
   margin: 0 0 22px;
   color: var(--text-primary);
 }
 
 .nk-accent {
-  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  color: #fff;
+}
+
+:root:not([data-theme="dark"]) .nk-accent {
+  color: var(--text-primary);
 }
 
 .nk-lead {
   font-size: 17px;
-  line-height: 1.6;
+  line-height: 1.65;
   color: var(--muted);
-  max-width: 500px;
+  max-width: 480px;
   margin-bottom: 34px;
 }
 
+.nk-lead-spacer {
+  height: 16px;
+}
+
 .nk-cta-row {
   display: flex;
   align-items: center;
@@ -247,32 +334,50 @@
 }
 
 .nk-cta-primary {
-  background: #0095f6;
+  background: var(--nk-signal);
   color: #fff;
   border: none;
-  padding: 15px 30px;
+  padding: 16px 32px;
   border-radius: 999px;
   font-size: 16px;
   font-weight: 600;
+  letter-spacing: 0.01em;
   cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }
 
 .nk-cta-primary:hover {
   transform: translateY(-2px);
   background: #0074d9;
-  box-shadow: 0 12px 28px rgba(0, 149, 246, 0.35);
+  box-shadow: 0 14px 30px rgba(var(--nk-signal-rgb), 0.32);
+}
+
+.nk-cta-primary:active {
+  transform: translateY(0);
 }
 
 .nk-cta-hint {
   font-size: 13px;
-  color: var(--muted);
+  color: var(--muted2, var(--muted));
 }
 
+.nk-cta-primary .nk-arrow {
+  display: inline-block;
+  margin-left: 8px;
+  transition: transform 0.2s ease;
+}
+
+.nk-cta-primary:hover .nk-arrow {
+  transform: translateX(3px);
+}
+
+/* ---------- Steps (kept in sync in case re-enabled) ---------- */
+
 .nk-h2 {
   font-family: 'Fraunces', serif;
   font-size: clamp(24px, 3vw, 34px);
   font-weight: 600;
+  letter-spacing: -0.01em;
   margin-bottom: 42px;
   text-align: center;
   color: var(--text-primary);
@@ -291,18 +396,19 @@
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 26px 24px;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
 .nk-step-card:hover {
-  border-color: rgba(var(--teal-rgb), 0.4);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+  border-color: rgba(var(--nk-signal-rgb), 0.4);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
+  transform: translateY(-3px);
 }
 
 .nk-step-num {
   font-family: 'Fraunces', serif;
   font-size: 15px;
-  color: var(--teal);
+  color: var(--nk-signal);
   font-weight: 600;
 }
 
@@ -328,9 +434,11 @@
 
 .nk-footer {
   text-align: center;
-  padding: 24px 0 34px;
+  padding: 28px 0 36px;
   font-size: 13px;
-  color: var(--muted2);
+  color: var(--muted2, var(--muted));
+  border-top: 1px solid var(--border);
+  margin-top: 12px;
 }
 
 @media (max-width: 768px) {
@@ -340,9 +448,23 @@
   }
 
   .nk-hero {
+    padding: 20px 6vw 0;
     padding-bottom: 150px;
   }
 
+  .nk-nav {
+    padding: 4px;
+    background: none;
+  }
+
+  .nk-logo {
+    font-size: 19px;
+  }
+
+  .nk-hero-text {
+    margin-top: 34px;
+  }
+
   .nk-radar {
     width: 150px;
     height: 150px;
@@ -373,6 +495,7 @@
 
   .nk-footer {
     margin-top: -100px;
+    border-top: none;
   }
 }
 
@@ -381,17 +504,9 @@
     animation-duration: 8s !important;
   }
 
-  .nk-grid {
+  .nk-grid,
+  .nk-glow,
+  .nk-hero-text {
     animation: none !important;
   }
-}
-
-.nk-cta-primary .nk-arrow {
-  display: inline-block;
-  margin-left: 8px;
-  transition: transform .2s;
-}
-
-.nk-cta-primary:hover .nk-arrow {
-  transform: translateX(3px);
-}
+}
\ No newline at end of file
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 2d69033..f002cd3 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -385,9 +385,16 @@
 /* Profile avatar inside the nav */
 .f-bn-profile .f-profile-avatar,
 .f-bn-profile .f-profile-avatar-placeholder {
-  width: 26px; height: 26px;
+  width: 32px; height: 32px;
+  border-width: 2px;
+  border-color: rgba(255, 255, 255, .45);
+  border-radius: 9px;
 }
 .f-bn-profile .f-profile-avatar-placeholder { font-size: .95rem; }
+:root:not([data-theme="dark"]) .f-bn-profile .f-profile-avatar,
+:root:not([data-theme="dark"]) .f-bn-profile .f-profile-avatar-placeholder {
+  border-color: rgba(0, 0, 0, .35);
+}
 .f-bn-item.f-bn-profile.active::before {
   display: none;
 }