39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
import { Link } from 'react-router-dom';
|
|
import { useAtomValue } from 'jotai';
|
|
import { languageState } from '../state/atoms';
|
|
import { getTranslations } from '../translations';
|
|
import styles from '../styles/components/Hero.module.scss';
|
|
|
|
export default function Hero() {
|
|
const language = useAtomValue(languageState);
|
|
const t = getTranslations(language);
|
|
|
|
return (
|
|
<section id="home" className={styles.hero}>
|
|
<div className={styles.grid} aria-hidden="true" />
|
|
|
|
<div className={styles.content}>
|
|
<p className={styles.greeting}>{t.hero.greeting}</p>
|
|
<h1 className={styles.name}>
|
|
{t.hero.name}<span className={styles.dot}>.</span>
|
|
</h1>
|
|
<p className={styles.tagline}>
|
|
{t.hero.tagline}
|
|
</p>
|
|
<p className={styles.sub}>
|
|
{t.hero.sub}
|
|
</p>
|
|
|
|
<div className={styles.cta}>
|
|
<Link to="/projects" className={styles.btnPrimary}>
|
|
{t.hero.ctaPrimary}
|
|
</Link>
|
|
<Link to="/contact" className={styles.btnGhost}>
|
|
{t.hero.ctaSecondary}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|