52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
import { useState } from "react";
|
|
import Navbar from "./Navbar";
|
|
import RadarBeacon from "./RadarBeacon";
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export default function Hero({ onCtaClick, onLoginClick }) {
|
|
const { t } = useTranslation();
|
|
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">{t('landing.eyebrow')}</span>
|
|
<h1 className="nk-h1">
|
|
{t('landing.heroTitle')}
|
|
<br />
|
|
<span className="nk-accent">{t('landing.heroAccent')}</span>
|
|
</h1>
|
|
<p className="nk-lead">
|
|
{t('landing.heroLead')}
|
|
</p>
|
|
<div className="nk-cta-row">
|
|
<button
|
|
className="nk-cta-primary"
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => setHover(false)}
|
|
onClick={onCtaClick}
|
|
>
|
|
{t('landing.startSearch')}
|
|
<span
|
|
style={{
|
|
marginLeft: 8,
|
|
display: "inline-block",
|
|
transform: hover ? "translateX(3px)" : "none",
|
|
transition: "transform .2s",
|
|
}}
|
|
>
|
|
→
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|