Finnish transaltions

src/components/Hero.jsx

@@ -1,38 +1,38 @@
 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}>Hey, I'm</p>
+        <p className={styles.greeting}>{t.hero.greeting}</p>
         <h1 className={styles.name}>
-          Veikko Lintujärvi<span className={styles.dot}>.</span>
+          {t.hero.name}<span className={styles.dot}>.</span>
         </h1>
         <p className={styles.tagline}>
-          Making world a better place —{' '}
-          <span className={styles.highlight}>one line at a time.</span>
+          {t.hero.tagline}
         </p>
         <p className={styles.sub}>
-          I'm a curious software engineer from Turku Archipelago, Finland. Right now
-          I'm excited about cloud, Linux and AI.
+          {t.hero.sub}
         </p>
 
         <div className={styles.cta}>
           <Link to="/projects" className={styles.btnPrimary}>
-            See my work
+            {t.hero.ctaPrimary}
           </Link>
           <Link to="/contact" className={styles.btnGhost}>
-            Get in touch
+            {t.hero.ctaSecondary}
           </Link>
         </div>
       </div>
-
-      <div className={styles.badge} aria-hidden="true">
-        <span>open to work</span>
-      </div>
     </section>
   );
 }