Merge pull request #51 from SlimusMinus/fix-start_page_v2

fixed start page and profile icon

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')}

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",

src/locales/ru.json

@@ -213,7 +213,7 @@
     "eyebrow": "Сервис поиска пропавших питомцев и вещей",
     "heroTitle": "Верим, что всё потерянное можно найти.",
     "heroAccent": "Ты не один — мы ищем вместе",
-    "heroLead": "Разместите объявление о пропаже или находке — Находка сама сопоставит похожие записи по фото, месту и описанию и покажет совпадения рядом с вами.",
+    "heroLead": "Публикуйте объявления о пропавших вещах и питомцах, просматривайте ленту находок или ищите совпадения по карте рядом с вами — и находите то, что потеряли, быстрее. «Находка» соединяет тех, кто ищет, с теми, кто уже нашёл.",
     "startSearch": "Начать поиск",
     "howItWorks": "Как это работает",
     "step1Title": "Разместите объявление",

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);
-}
+}

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;
 }