added new start page
This commit is contained in:
10
src/components/landing/FinalCta.jsx
Normal file
10
src/components/landing/FinalCta.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function FinalCta({ onClick }) {
|
||||
return (
|
||||
<section className="nk-final-cta">
|
||||
<h2 className="nk-h2">Кто-то прямо сейчас ищет то, что вы нашли</h2>
|
||||
<button className="nk-cta-primary" onClick={onClick}>
|
||||
Открыть Находку
|
||||
</button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
7
src/components/landing/Footer.jsx
Normal file
7
src/components/landing/Footer.jsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="nk-footer">
|
||||
© {new Date().getFullYear()} Находка. Возвращаем найденное.
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
50
src/components/landing/Hero.jsx
Normal file
50
src/components/landing/Hero.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { useState } from "react";
|
||||
import Navbar from "./Navbar";
|
||||
import RadarBeacon from "./RadarBeacon";
|
||||
|
||||
export default function Hero({ onCtaClick, onLoginClick }) {
|
||||
const [hover, setHover] = useState(false);
|
||||
|
||||
return (
|
||||
<section className="nk-hero">
|
||||
<div className="nk-grid" />
|
||||
<div className="nk-glow" />
|
||||
|
||||
<RadarBeacon />
|
||||
<Navbar onLoginClick={onLoginClick || onCtaClick} />
|
||||
|
||||
<div className="nk-hero-text">
|
||||
<span className="nk-eyebrow">Сервис поиска пропавших питомцев и вещей</span>
|
||||
<h1 className="nk-h1">
|
||||
Потерял — не значит
|
||||
<br />
|
||||
<span className="nk-accent">потерял навсегда</span>
|
||||
</h1>
|
||||
<p className="nk-lead">
|
||||
Разместите объявление о пропаже или находке — Находка сама сопоставит
|
||||
похожие записи по фото, месту и описанию и покажет совпадения рядом с вами.
|
||||
</p>
|
||||
<div className="nk-cta-row">
|
||||
<button
|
||||
className="nk-cta-primary"
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
onClick={onCtaClick}
|
||||
>
|
||||
Начать поиск
|
||||
<span
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
display: "inline-block",
|
||||
transform: hover ? "translateX(3px)" : "none",
|
||||
transition: "transform .2s",
|
||||
}}
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
37
src/components/landing/Icon.jsx
Normal file
37
src/components/landing/Icon.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
export default function Icon({ type }) {
|
||||
if (type === "paw") {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
||||
<circle cx="7" cy="7" r="2.1" />
|
||||
<circle cx="12.3" cy="5.2" r="2.1" />
|
||||
<circle cx="17.2" cy="7.4" r="2.1" />
|
||||
<path d="M12 10.5c-3.4 0-6.2 2.4-6.2 5.4 0 1.7 1.4 2.9 3 2.5 1.2-.3 2-1 3.2-1s2 .7 3.2 1c1.6.4 3-.8 3-2.5 0-3-2.8-5.4-6.2-5.4z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "bag") {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M4 10h16l-1.4 10.5a2 2 0 0 1-2 1.5H7.4a2 2 0 0 1-2-1.5L4 10z" />
|
||||
<path d="M8 10V6a4 4 0 0 1 8 0v4" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "key") {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<circle cx="8" cy="8" r="4.2" />
|
||||
<path d="M11 11l9 9M16.5 16.5l2.5-2.5M19 19l2-2" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<rect x="7" y="2.5" width="10" height="19" rx="2.2" />
|
||||
<line x1="11" y1="18.5" x2="13" y2="18.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
10
src/components/landing/Navbar.jsx
Normal file
10
src/components/landing/Navbar.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function Navbar({ onLoginClick }) {
|
||||
return (
|
||||
<nav className="nk-nav">
|
||||
<span className="nk-logo">Находка</span>
|
||||
<button className="nk-nav-btn" onClick={onLoginClick}>
|
||||
Войти
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
27
src/components/landing/RadarBeacon.jsx
Normal file
27
src/components/landing/RadarBeacon.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import Icon from "./Icon";
|
||||
import { markers } from "../../config/landingConstants";
|
||||
|
||||
export default function RadarBeacon() {
|
||||
return (
|
||||
<div className="nk-radar">
|
||||
<span className="nk-ring" style={{ animationDelay: "0s" }} />
|
||||
<span className="nk-ring" style={{ animationDelay: "1.3s" }} />
|
||||
<span className="nk-ring" style={{ animationDelay: "2.6s" }} />
|
||||
<div className="nk-core" />
|
||||
|
||||
{markers.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="nk-marker"
|
||||
style={{
|
||||
left: `${m.x}%`,
|
||||
top: `${m.y}%`,
|
||||
animationDelay: m.delay,
|
||||
}}
|
||||
>
|
||||
<Icon type={m.icon} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
18
src/components/landing/StepsSection.jsx
Normal file
18
src/components/landing/StepsSection.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { steps } from "../../config/landingConstants";
|
||||
|
||||
export default function StepsSection() {
|
||||
return (
|
||||
<section className="nk-steps-section">
|
||||
<h2 className="nk-h2">Как это работает</h2>
|
||||
<div className="nk-steps-grid">
|
||||
{steps.map((s) => (
|
||||
<div className="nk-step-card" key={s.n}>
|
||||
<span className="nk-step-num">{s.n}</span>
|
||||
<h3 className="nk-step-title">{s.title}</h3>
|
||||
<p className="nk-step-text">{s.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user