From 127c4a748b32b04a2eee2c73ca143015cba6eb68 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 2 Aug 2026 07:55:33 +0200
Subject: [PATCH] feat: add localizations for hero section text and buttons

---
 src/components/Hero.tsx   | 28 ++++++++++++++--------------
 src/i18n/messages/de.json |  7 +++++++
 src/i18n/messages/en.json |  7 +++++++
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 34a6bad..17e9012 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,16 +1,22 @@
+"use client";
+
+import { useTranslations } from "next-intl";
 import SocialLinks from "./Social";
 
 /**
  * Hero section showcasing intro title, call-to-action links, and personal portrait
  */
 export default function Hero() {
+  const tCommon = useTranslations("Common");
+  const tHero = useTranslations("Hero");
+
   return (
     <section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
       <div className="grid grid-cols-1 md:grid-cols-12 gap-3 items-center z-10 w-full">
         {/* Main Content & Call to Actions */}
         <div className=" self-start md:col-span-8 lg:space-y-5 md:space-y-4 space-y-3 text-left">
           <span className="text-blue-500 font-mono text-sm tracking-wider uppercase">
-            // Hi, my name is
+            //&nbsp;{tHero("greeting")}
           </span>
 
           <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-none">
@@ -18,20 +24,14 @@ export default function Hero() {
           </h1>
 
           <h2 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-slate-400 tracking-tight">
-            Full-Stack{" "}
-            <span className="text-blue-400/80 font-medium">Developer</span>
+            {tHero("rolePrefix")}{" "}
+            <span className="text-blue-400/80 font-medium">
+              {tHero("roleSuffix")}
+            </span>
           </h2>
 
           <p className="text-lg leading-relaxed max-w-xl">
-            I conceptualize and develop modern web applications. With a sharp
-            eye for detail and a focus on clean code, I bring digital ideas to
-            life.
-            {/* 
-            German:
-            Ich konzipiere und entwickle moderne Web-Anwendungen. Mit einem klaren
-            Auge fürs Detail und einem Fokus auf sauberen Code erwecke ich
-            digitale Ideen zum Leben.
-             */}
+            {tHero("description")}
           </p>
 
           {/* Action Buttons */}
@@ -40,7 +40,7 @@ export default function Hero() {
               href="#contactme"
               className="px-6 py-3 bg-slate-900 text-blue-500 font-semibold rounded-lg border border-blue-500/40 hover:border-blue-400 hover:bg-blue-600 hover:text-white shadow-md shadow-blue-950/50 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20 inline-block text-center"
             >
-              Contact me
+              {tCommon("contact")}
             </a>
             <a
               href="/assets/downloads/Andre_Kempf_Lebenslauf.pdf"
@@ -48,7 +48,7 @@ export default function Hero() {
               rel="noopener noreferrer"
               className="px-6 py-3 bg-slate-900 border border-slate-800 hover:border-slate-700 hover:bg-slate-850 font-semibold rounded-lg transition-all hover:-translate-y-0.5 duration-200 inline-block text-center"
             >
-              Download CV
+              {tHero("downloadCv")}
             </a>
           </div>
         </div>
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json
index 964453e..b40f583 100644
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -7,5 +7,12 @@
   },
   "Header": {
     "search": "Suchen"
+  },
+  "Hero": {
+    "greeting": "Hi, mein Name ist",
+    "rolePrefix": "Full-Stack",
+    "roleSuffix": "Entwickler",
+    "description": "Ich konzipiere und entwickle moderne Web-Anwendungen. Mit einem klaren Auge fürs Detail und einem Fokus auf sauberen Code erwecke ich digitale Ideen zum Leben.",
+    "downloadCv": "Lebenslauf"
   }
 }
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index e500088..6e4f4fd 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -7,5 +7,12 @@
   },
   "Header": {
     "search": "Search"
+  },
+  "Hero": {
+    "greeting": "Hi, my name is",
+    "rolePrefix": "Full-Stack",
+    "roleSuffix": "Developer",
+    "description": "I conceptualize and develop modern web applications. With a sharp eye for detail and a focus on clean code, I bring digital ideas to life.",
+    "downloadCv": "Download CV"
   }
 }