wip

components/home/Hero.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 import { Container } from '@/components/ui';
 import Scribble from '@/components/Scribble';
 
 export default function Hero() {
+  const t = useTranslations('Home.hero');
+
   return (
     <section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
       <div className="absolute inset-0 z-0">
@@ -24,16 +27,18 @@ export default function Hero() {
       <Container className="relative z-10 text-left text-white w-full">
         <div className="max-w-4xl">
           <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight leading-tight">
-            We are helping to expand the energy cable networks for a 
-            <span className="relative inline-block ml-4 mr-2">
-              <span className="relative z-10 text-white italic">green</span>
-              <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
-            </span> 
-            future
+            {t.rich('title', {
+              green: (chunks) => (
+                <span className="relative inline-block ml-4 mr-2">
+                  <span className="relative z-10 text-white italic">{chunks}</span>
+                  <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
+                </span>
+              )
+            })}
           </h1>
           <div className="mt-8">
             <Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
-              Let's talk
+              {t('cta')}
               <span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
                 &rarr;
               </span>