feat: implement internationalization with next-intl and add core portfolio sections

src/features/messages/contact-section.tsx

@@ -4,8 +4,10 @@ import { useState } from "react";
 import { AnimatedSection } from "@/shared/components/animated-section";
 import { SectionHeading } from "@/shared/components/section-heading";
 import { Send, Mail, User, MessageSquare, CheckCircle, Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 export function ContactSection() {
+  const t = useTranslations("Contact");
   const [formState, setFormState] = useState<"idle" | "loading" | "success">("idle");
   const [formData, setFormData] = useState({
     name: "",
@@ -34,9 +36,9 @@ export function ContactSection() {
       <div className="relative max-w-4xl mx-auto px-6">
         <AnimatedSection>
           <SectionHeading
-            badge="Let's Connect"
-            title="Get in Touch"
-            subtitle="Interested in working together? Whether you're a recruiter, hiring manager, or potential collaborator — I'd love to hear from you."
+            badge={t("badge")}
+            title={t("title")}
+            subtitle={t("subtitle")}
           />
         </AnimatedSection>
 
@@ -49,9 +51,9 @@ export function ContactSection() {
                   <div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-4">
                     <CheckCircle size={32} className="text-success" />
                   </div>
-                  <h3 className="text-xl font-bold mb-2">Message Sent!</h3>
+                  <h3 className="text-xl font-bold mb-2">{t("form.successTitle")}</h3>
                   <p className="text-muted-foreground text-sm">
-                    Thank you for reaching out. I&apos;ll get back to you soon.
+                    {t("form.successDesc")}
                   </p>
                 </div>
               </div>
@@ -66,7 +68,7 @@ export function ContactSection() {
                     className="flex items-center gap-2 text-sm font-medium"
                   >
                     <User size={14} className="text-accent" />
-                    Full Name
+                    {t("form.nameLabel")}
                   </label>
                   <input
                     id="contact-name"
@@ -76,7 +78,7 @@ export function ContactSection() {
                     onChange={(e) =>
                       setFormData((prev) => ({ ...prev, name: e.target.value }))
                     }
-                    placeholder="John Doe"
+                    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"
                   />
                 </div>
@@ -88,7 +90,7 @@ export function ContactSection() {
                     className="flex items-center gap-2 text-sm font-medium"
                   >
                     <Mail size={14} className="text-accent" />
-                    Email Address
+                    {t("form.emailLabel")}
                   </label>
                   <input
                     id="contact-email"
@@ -98,7 +100,7 @@ export function ContactSection() {
                     onChange={(e) =>
                       setFormData((prev) => ({ ...prev, email: e.target.value }))
                     }
-                    placeholder="john@company.com"
+                    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"
                   />
                 </div>
@@ -111,7 +113,7 @@ export function ContactSection() {
                   className="flex items-center gap-2 text-sm font-medium"
                 >
                   <MessageSquare size={14} className="text-accent" />
-                  Message
+                  {t("form.messageLabel")}
                 </label>
                 <textarea
                   id="contact-message"
@@ -121,7 +123,7 @@ export function ContactSection() {
                   onChange={(e) =>
                     setFormData((prev) => ({ ...prev, message: e.target.value }))
                   }
-                  placeholder="Tell me about the opportunity or project you have in mind..."
+                  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"
                 />
               </div>
@@ -135,12 +137,12 @@ export function ContactSection() {
                 {formState === "loading" ? (
                   <>
                     <Loader2 size={16} className="animate-spin" />
-                    Sending...
+                    {t("form.submitting")}
                   </>
                 ) : (
                   <>
                     <Send size={16} />
-                    Send Message
+                    {t("form.submit")}
                   </>
                 )}
               </button>