feat: implement multilingual support and add contact section to portfolio

messages/en.json

@@ -127,10 +127,25 @@
     }
   },
   "Contact": {
-    "badge": "Let's Connect",
+    "badge": "Contact",
-    "title": "Get in Touch",
+    "title": "Let's Collaborate",
-    "subtitle": "Interested in working together? Whether you're a recruiter, hiring manager, or potential collaborator — I'd love to hear from you.",
+    "subtitle": "Have a project idea, job opportunity, or just want to chat? Feel free to send me a message.",
+    "info": {
+      "title": "Contact Information",
+      "subtitle": "You can also reach out to me directly through the channels below.",
+      "email": "Email",
+      "location": "Location",
+      "locationValue": "Jakarta, Indonesia",
+      "responseTime": "Response Time",
+      "responseTimeValue": "Less than 1 hour",
+      "fastResponse": "Fast Response",
+      "whatsappTemplate": "Hi Yolando, I saw your portfolio and would like to discuss a potential opportunity regarding...",
+      "openToWork": "Open to Work",
+      "openToWorkDesc": "Currently open for new opportunities in Backend/Fullstack Development."
+    },
     "form": {
+      "heading": "Send Direct Message",
+      "subheading": "I'll get back to you as soon as possible via the email you provide.",
       "nameLabel": "Full Name",
       "namePlaceholder": "John Doe",
       "emailLabel": "Email Address",

messages/id.json

@@ -127,10 +127,25 @@
     }
   },
   "Contact": {
-    "badge": "Mari Terhubung",
+    "badge": "Kontak",
-    "title": "Hubungi Saya",
+    "title": "Mari Berkolaborasi",
-    "subtitle": "Tertarik bekerja sama? Baik Anda seorang recruiter, hiring manager, atau kolaborator potensial — saya sangat ingin mendengarnya.",
+    "subtitle": "Punya ide proyek, tawaran pekerjaan, atau sekadar ingin berdiskusi? Jangan ragu untuk mengirimkan pesan.",
+    "info": {
+      "title": "Informasi Kontak",
+      "subtitle": "Anda juga dapat menjangkau saya secara langsung melalui saluran berikut.",
+      "email": "Email",
+      "location": "Lokasi",
+      "locationValue": "Jakarta, Indonesia",
+      "responseTime": "Waktu Respons",
+      "responseTimeValue": "Kurang dari 1 jam",
+      "fastResponse": "Fast Reponse",
+      "whatsappTemplate": "Halo Yolando, saya melihat portofolio Anda dan tertarik untuk berdiskusi lebih lanjut tentang...",
+      "openToWork": "Open to Work",
+      "openToWorkDesc": "Saat ini terbuka untuk peluang di bidang Backend/Fullstack Development."
+    },
     "form": {
+      "heading": "Kirim Pesan Langsung",
+      "subheading": "Saya akan membalas secepatnya ke email yang Anda berikan.",
       "nameLabel": "Nama Lengkap",
       "namePlaceholder": "Budi Santoso",
       "emailLabel": "Alamat Email",

src/features/messages/contact-section.tsx

@@ -14,6 +14,7 @@ import {
   MapPin,
   Clock,
   Sparkles,
+  MessageCircle,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { sendMessageAction } from "./actions";
@@ -56,7 +57,6 @@ export function ContactSection() {
       <div className="relative max-w-5xl mx-auto px-6">
         <AnimatedSection>
           <SectionHeading
-            badge={t("badge")}
             title={t("title")}
             subtitle={t("subtitle")}
           />
@@ -67,10 +67,9 @@ export function ContactSection() {
             {/* Left — Contact Info */}
             <div className="lg:col-span-2 space-y-8">
               <div>
-                <h3 className="text-lg font-bold mb-4">Let&apos;s Connect</h3>
+                <h3 className="text-lg font-bold mb-4">{t("info.title")}</h3>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  Tertarik untuk berkolaborasi atau punya pertanyaan? Jangan ragu
+                  {t("info.subtitle")}
-                  untuk menghubungi saya. Saya selalu terbuka untuk peluang baru.
                 </p>
               </div>
 
@@ -80,9 +79,9 @@ export function ContactSection() {
                     <Mail size={18} />
                   </div>
                   <div>
-                    <p className="text-sm font-semibold mb-0.5">Email</p>
+                    <p className="text-sm font-semibold mb-0.5">{t("info.email")}</p>
                     <p className="text-sm text-muted-foreground font-mono">
-                      yolando@pm.me
+                      yolandomanullang@gmail.com
                     </p>
                   </div>
                 </div>
@@ -91,9 +90,9 @@ export function ContactSection() {
                     <MapPin size={18} />
                   </div>
                   <div>
-                    <p className="text-sm font-semibold mb-0.5">Lokasi</p>
+                    <p className="text-sm font-semibold mb-0.5">{t("info.location")}</p>
                     <p className="text-sm text-muted-foreground">
-                      Jakarta, Indonesia
+                      {t("info.locationValue")}
                     </p>
                   </div>
                 </div>
@@ -102,12 +101,34 @@ export function ContactSection() {
                     <Clock size={18} />
                   </div>
                   <div>
-                    <p className="text-sm font-semibold mb-0.5">Response Time</p>
+                    <p className="text-sm font-semibold mb-0.5">{t("info.responseTime")}</p>
                     <p className="text-sm text-muted-foreground">
-                      Biasanya dalam 24 jam
+                      {t("info.responseTimeValue")}
                     </p>
                   </div>
                 </div>
+                {/* WhatsApp */}
+                <div className="flex items-start gap-4">
+                  <div className="p-2.5 rounded-xl bg-green-500/10 text-green-500 flex-shrink-0">
+                    <MessageCircle size={18} />
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold mb-0.5 flex items-center gap-2">
+                      WhatsApp 
+                      <span className="px-2 py-0.5 rounded-md bg-green-500/10 text-green-500 text-[10px] uppercase font-bold tracking-wider">
+                        {t("info.fastResponse", { fallback: "Fast Response" })}
+                      </span>
+                    </p>
+                    <a 
+                      href={`https://wa.me/6282267852521?text=${encodeURIComponent(t("info.whatsappTemplate", { fallback: "Halo Yolando," }))}`}
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-sm text-muted-foreground font-mono hover:text-green-500 transition-colors"
+                    >
+                      +62 822-6785-2521
+                    </a>
+                  </div>
+                </div>
               </div>
 
               {/* Decorative card */}
@@ -115,12 +136,11 @@ export function ContactSection() {
                 <div className="flex items-center gap-2 mb-2">
                   <Sparkles size={16} className="text-accent" />
                   <span className="text-xs font-mono font-bold text-accent uppercase tracking-wider">
-                    Open to Work
+                    {t("info.openToWork")}
                   </span>
                 </div>
                 <p className="text-xs text-muted-foreground leading-relaxed">
-                  Saat ini tersedia untuk kesempatan backend/fullstack di industri
+                  {t("info.openToWorkDesc")}
-                  perbankan & fintech.
                 </p>
               </div>
             </div>
@@ -155,6 +175,13 @@ export function ContactSection() {
                 </div>
               )}
 
+              <div className="mb-6">
+                <h3 className="text-xl md:text-2xl font-bold mb-2">{t("form.heading")}</h3>
+                <p className="text-sm text-muted-foreground">
+                  {t("form.subheading")}
+                </p>
+              </div>
+
               <form onSubmit={handleSubmit} className="space-y-5">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                   {/* Name */}
@@ -179,7 +206,7 @@ export function ContactSection() {
                         }))
                       }
                       placeholder={t("form.namePlaceholder")}
-                      className="w-full px-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 transition-all"
+                      className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300"
                     />
                   </div>
 
@@ -205,7 +232,7 @@ export function ContactSection() {
                         }))
                       }
                       placeholder={t("form.emailPlaceholder")}
-                      className="w-full px-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 transition-all"
+                      className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300"
                     />
                   </div>
                 </div>
@@ -232,7 +259,7 @@ export function ContactSection() {
                       }))
                     }
                     placeholder={t("form.messagePlaceholder")}
-                    className="w-full px-4 py-3 rounded-xl bg-muted/50 border border-border/50 text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 transition-all resize-none"
+                    className="w-full px-4 py-3 rounded-xl bg-background/50 border border-border hover:border-accent/40 text-sm placeholder:text-muted-foreground/40 focus:outline-none focus:ring-4 focus:ring-accent/10 focus:border-accent transition-all duration-300 resize-none"
                   />
                 </div>