feat(i18n): centralize more UI texts in messages

Move hardcoded labels/strings in About, Projects, Contact form, Footer and Consent banner into next-intl message files (en/de) so content is maintained in one place.

Co-authored-by: dennis <dennis@konkol.net>

app/components/About.tsx

@@ -57,32 +57,32 @@ const About = () => {
 
   const techStack = [
     {
-      category: "Frontend & Mobile",
+      category: t("techStack.categories.frontendMobile"),
       icon: Globe,
       items: ["Next.js", "Tailwind CSS", "Flutter"],
     },
     {
-      category: "Backend & DevOps",
+      category: t("techStack.categories.backendDevops"),
       icon: Server,
       items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
     },
     {
-      category: "Tools & Automation",
+      category: t("techStack.categories.toolsAutomation"),
       icon: Wrench,
-      items: ["Git", "CI/CD", "n8n", "Self-hosted Services"],
+      items: ["Git", "CI/CD", "n8n", t("techStack.items.selfHostedServices")],
     },
     {
-      category: "Security & Admin",
+      category: t("techStack.categories.securityAdmin"),
       icon: Shield,
       items: ["CrowdSec", "Suricata", "Mailcow"],
     },
   ];
 
   const hobbies: Array<{ icon: typeof Code; text: string }> = [
-    { icon: Code, text: "Self-Hosting & DevOps" },
-    { icon: Gamepad2, text: "Gaming" },
-    { icon: Server, text: "Setting up Game Servers" },
-    { icon: Activity, text: "Jogging to clear my mind and stay active" },
+    { icon: Code, text: t("hobbies.selfHosting") },
+    { icon: Gamepad2, text: t("hobbies.gaming") },
+    { icon: Server, text: t("hobbies.gameServers") },
+    { icon: Activity, text: t("hobbies.jogging") },
   ];
 
   return (
@@ -151,7 +151,7 @@ const About = () => {
                 variants={fadeInUp}
                 className="text-2xl font-bold text-stone-900 mb-6"
               >
-                My Tech Stack
+                {t("techStackTitle")}
               </motion.h3>
               <div className="grid grid-cols-1 gap-4">
                 {techStack.map((stack, idx) => (
@@ -209,7 +209,7 @@ const About = () => {
                 variants={fadeInUp}
                 className="text-xl font-bold text-stone-900 mb-4"
               >
-                When I&apos;m Not Coding
+                {t("hobbiesTitle")}
               </motion.h3>
               <div className="space-y-3">
                 {hobbies.map((hobby, idx) => (

app/components/ConsentBanner.tsx

@@ -21,9 +21,11 @@ export default function ConsentBanner() {
     essential: t("essential"),
     analytics: t("analytics"),
     chat: t("chat"),
+    alwaysOn: t("alwaysOn"),
     acceptAll: t("acceptAll"),
     acceptSelected: t("acceptSelected"),
     rejectAll: t("rejectAll"),
+    hide: t("hide"),
   };
 
   if (minimized) {
@@ -56,14 +58,14 @@ export default function ConsentBanner() {
             aria-label="Minimize privacy banner"
             title="Minimize"
           >
-            Hide
+            {s.hide}
           </button>
         </div>
 
         <div className="mt-3 space-y-2">
           <div className="flex items-center justify-between gap-3">
             <div className="text-xs font-semibold text-stone-800">{s.essential}</div>
-            <div className="text-[11px] text-stone-500">Always on</div>
+            <div className="text-[11px] text-stone-500">{s.alwaysOn}</div>
           </div>
 
           <label className="flex items-center justify-between gap-3 py-1">

app/components/Contact.tsx

@@ -12,6 +12,8 @@ const Contact = () => {
   const { showEmailSent, showEmailError } = useToast();
   const locale = useLocale();
   const t = useTranslations("home.contact");
+  const tForm = useTranslations("home.contact.form");
+  const tInfo = useTranslations("home.contact.info");
   const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
 
   useEffect(() => {
@@ -49,27 +51,27 @@ const Contact = () => {
     const newErrors: Record<string, string> = {};
 
     if (!formData.name.trim()) {
-      newErrors.name = "Name is required";
+      newErrors.name = tForm("errors.nameRequired");
     } else if (formData.name.trim().length < 2) {
-      newErrors.name = "Name must be at least 2 characters";
+      newErrors.name = tForm("errors.nameMin");
     }
 
     if (!formData.email.trim()) {
-      newErrors.email = "Email is required";
+      newErrors.email = tForm("errors.emailRequired");
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = "Please enter a valid email address";
+      newErrors.email = tForm("errors.emailInvalid");
     }
 
     if (!formData.subject.trim()) {
-      newErrors.subject = "Subject is required";
+      newErrors.subject = tForm("errors.subjectRequired");
     } else if (formData.subject.trim().length < 3) {
-      newErrors.subject = "Subject must be at least 3 characters";
+      newErrors.subject = tForm("errors.subjectMin");
     }
 
     if (!formData.message.trim()) {
-      newErrors.message = "Message is required";
+      newErrors.message = tForm("errors.messageRequired");
     } else if (formData.message.trim().length < 10) {
-      newErrors.message = "Message must be at least 10 characters";
+      newErrors.message = tForm("errors.messageMin");
     }
 
     setErrors(newErrors);
@@ -153,14 +155,14 @@ const Contact = () => {
   const contactInfo = [
     {
       icon: Mail,
-      title: "Email",
+      title: tInfo("email"),
       value: "contact@dk0.dev",
       href: "mailto:contact@dk0.dev",
     },
     {
       icon: MapPin,
-      title: "Location",
-      value: "Osnabrück, Germany",
+      title: tInfo("location"),
+      value: tInfo("locationValue"),
     },
   ];
 
@@ -251,7 +253,7 @@ const Contact = () => {
             className="glass-card p-8 rounded-3xl bg-white/50 border border-white/70"
           >
             <h3 className="text-2xl font-bold text-gray-800 mb-6">
-              Send Message
+              {tForm("title")}
             </h3>
 
             <form onSubmit={handleSubmit} className="space-y-6">
@@ -276,7 +278,7 @@ const Contact = () => {
                         ? "border-red-400 focus:ring-red-400"
                         : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                     }`}
-                    placeholder="Your name"
+                    placeholder={tForm("placeholders.name")}
                     aria-invalid={
                       errors.name && touched.name ? "true" : "false"
                     }
@@ -311,7 +313,7 @@ const Contact = () => {
                         ? "border-red-400 focus:ring-red-400"
                         : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                     }`}
-                    placeholder="your@email.com"
+                    placeholder={tForm("placeholders.email")}
                     aria-invalid={
                       errors.email && touched.email ? "true" : "false"
                     }
@@ -347,7 +349,7 @@ const Contact = () => {
                       ? "border-red-400 focus:ring-red-400"
                       : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                   }`}
-                  placeholder="What's this about?"
+                  placeholder={tForm("placeholders.subject")}
                   aria-invalid={
                     errors.subject && touched.subject ? "true" : "false"
                   }
@@ -384,7 +386,7 @@ const Contact = () => {
                       ? "border-red-400 focus:ring-red-400"
                       : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
                   }`}
-                  placeholder="Tell me more about your project or question..."
+                  placeholder={tForm("placeholders.message")}
                   aria-invalid={
                     errors.message && touched.message ? "true" : "false"
                   }
@@ -403,7 +405,7 @@ const Contact = () => {
                     <span></span>
                   )}
                   <span className="text-xs text-stone-400">
-                    {formData.message.length} characters
+                    {tForm("characters", { count: formData.message.length })}
                   </span>
                 </div>
               </div>
@@ -419,12 +421,12 @@ const Contact = () => {
                 {isSubmitting ? (
                   <>
                     <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                    <span>Sending Message...</span>
+                    <span>{tForm("sending")}</span>
                   </>
                 ) : (
                   <>
                     <Send size={20} />
-                    <span className="text-cream">Send Message</span>
+                    <span className="text-cream">{tForm("send")}</span>
                   </>
                 )}
               </motion.button>

app/components/Footer.tsx

@@ -5,17 +5,15 @@ import { motion } from 'framer-motion';
 import { Heart, Code } from 'lucide-react';
 import { SiGithub, SiLinkedin } from 'react-icons/si';
 import Link from 'next/link';
-import { useLocale } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { useConsent } from "./ConsentProvider";
 
 const Footer = () => {
-  const [currentYear, setCurrentYear] = useState(2024);
   const locale = useLocale();
+  const t = useTranslations("footer");
   const { resetConsent } = useConsent();
 
-  useEffect(() => {
-    setCurrentYear(new Date().getFullYear());
-  }, []);
+  const [currentYear] = useState(() => new Date().getFullYear());
 
   const socialLinks = [
     { icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
@@ -45,7 +43,7 @@ const Footer = () => {
               <Link href={`/${locale}`} className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
                 dk<span className="text-liquid-rose">0</span>
               </Link>
-              <p className="text-xs text-stone-500">Software Engineer</p>
+              <p className="text-xs text-stone-500">{t("role")}</p>
             </div>
           </motion.div>
 
@@ -88,7 +86,7 @@ const Footer = () => {
             >
               <Heart size={14} className="text-liquid-rose fill-liquid-rose" />
             </motion.div>
-            <span>Made in Germany</span>
+            <span>{t("madeIn")}</span>
           </motion.div>
         </div>
 
@@ -105,21 +103,21 @@ const Footer = () => {
               href={`/${locale}/legal-notice`}
               className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
             >
-              Impressum
+              {t("legalNotice")}
             </Link>
             <Link
               href={`/${locale}/privacy-policy`}
               className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
             >
-              Privacy Policy
+              {t("privacyPolicy")}
             </Link>
             <button
               type="button"
               onClick={() => resetConsent()}
               className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
-              title="Show privacy settings banner again"
+              title={t("privacySettingsTitle")}
             >
-              Privacy settings
+              {t("privacySettings")}
             </button>
             <Link
               href="/404"
@@ -131,7 +129,7 @@ const Footer = () => {
           </div>
           
           <div className="text-xs text-stone-400 flex items-center space-x-1">
-            <span>Built with</span>
+            <span>{t("builtWith")}</span>
             <span className="text-stone-600 font-semibold">Next.js</span>
             <span className="text-stone-300">•</span>
             <span className="text-stone-600 font-semibold">TypeScript</span>

app/components/Projects.tsx

@@ -5,7 +5,7 @@ import { motion, Variants } from "framer-motion";
 import { ExternalLink, Github, ArrowRight, Calendar } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
-import { useLocale } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 
 const fadeInUp: Variants = {
   hidden: { opacity: 0, y: 20 },
@@ -48,6 +48,7 @@ interface Project {
 const Projects = () => {
   const [projects, setProjects] = useState<Project[]>([]);
   const locale = useLocale();
+  const t = useTranslations("home.projects");
 
   useEffect(() => {
     const loadProjects = async () => {
@@ -82,11 +83,10 @@ const Projects = () => {
           className="text-center mb-20"
         >
           <h2 className="text-4xl md:text-6xl font-bold mb-6 text-stone-900">
-            Selected Works
+            {t("title")}
           </h2>
           <p className="text-lg text-stone-600 max-w-2xl mx-auto mt-4 font-light">
-            A collection of projects I&apos;ve worked on, ranging from web
-            applications to experiments.
+            {t("subtitle")}
           </p>
         </motion.div>
 
@@ -140,7 +140,7 @@ const Projects = () => {
                 {project.featured && (
                   <div className="absolute top-3 left-3 z-20">
                     <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
-                      Featured
+                      {t("featured")}
                     </div>
                   </div>
                 )}
@@ -253,7 +253,7 @@ const Projects = () => {
             href={`/${locale}/projects`}
             className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-stone-200 rounded-full text-stone-700 font-medium hover:bg-stone-50 hover:border-stone-300 hover:gap-3 transition-all duration-500 ease-out shadow-sm hover:shadow-md"
           >
-            View All Projects <ArrowRight size={16} />
+            {t("viewAll")} <ArrowRight size={16} />
           </Link>
         </motion.div>
       </div>