feat: implement hero section with multi-language support and localized content files

messages/en.json

@@ -14,6 +14,7 @@
     "titlePart2": "Enterprise-Grade Systems",
     "yearsExp": "3+ Years",
     "subtitle": "in Banking Technology. Backend Developer specializing in Java Spring Boot, Microservices Architecture, and Enterprise Security.",
+    "taglineRest": "Backend Developer · 3+ years building secure, scalable systems in Banking Technology — Java Spring Boot, Microservices Architecture, and Enterprise Security.",
     "ctaContact": "Get in Touch",
     "ctaProjects": "View Projects",
     "scroll": "Scroll"
@@ -61,6 +62,7 @@
   "TechStack": {
     "badge": "Tech Arsenal",
     "title": "Technology Stack",
+    "seeMore": "See more",
     "subtitle": "A comprehensive toolkit forged through years of enterprise development, from backend infrastructure to mobile interfaces.",
     "categories": {
       "backend": {

messages/id.json

@@ -14,6 +14,7 @@
     "titlePart2": "Skala Enterprise",
     "yearsExp": "3+ Tahun",
     "subtitle": "di Teknologi Perbankan. Backend Developer dengan spesialisasi Java Spring Boot, Arsitektur Microservices, dan Keamanan Enterprise.",
+    "taglineRest": "Backend Developer · 3+ tahun membangun sistem aman & skalabel di industri teknologi perbankan — Java Spring Boot, Arsitektur Microservices, dan Keamanan Enterprise.",
     "ctaContact": "Hubungi Saya",
     "ctaProjects": "Lihat Proyek",
     "scroll": "Scroll"
@@ -61,6 +62,7 @@
   "TechStack": {
     "badge": "Arsenal Teknologi",
     "title": "Tech Stack",
+    "seeMore": "Lihat semua",
     "subtitle": "Perangkat komprehensif yang ditempa dari pengalaman pengembangan enterprise, mulai dari infrastruktur backend hingga antarmuka mobile.",
     "categories": {
       "backend": {

src/features/hero/hero-section.tsx

@@ -48,33 +48,22 @@ export function HeroSection() {
 
           {/* LEFT: Text Content */}
           <div className="text-center lg:text-left flex flex-col items-center lg:items-start order-2 lg:order-1">
-            <motion.h1
+            <motion.div
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.7, delay: 0.3 }}
-              className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] mb-6"
+              className="max-w-xl mb-10"
             >
-              <span className="block text-2xl sm:text-3xl lg:text-4xl text-muted-foreground font-medium mb-2">
+              <p className="text-sm sm:text-base text-muted-foreground font-medium mb-1 tracking-wide">
-                {t("greeting")}{" "}
+                {t("greeting")}
-                <span className="text-foreground gradient-text inline-block">{t("name")}</span>
+              </p>
-              </span>
+              <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-5">
-              {t("titlePart1")}{" "}
+                <span className="gradient-text">{t("name")}</span>
-              <span className="gradient-text whitespace-nowrap">{t("titleHighlight")}</span>
+              </h1>
-              <br />
+              <p className="text-base sm:text-lg text-muted-foreground font-normal leading-relaxed">
-              {t("titlePart2")}
+                {t("taglineRest")}
-            </motion.h1>
+              </p>
-
+            </motion.div>
-            <motion.p
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.7, delay: 0.5 }}
-              className="text-lg text-muted-foreground mb-10 leading-relaxed max-w-xl"
-            >
-              <span className="font-mono text-accent font-semibold">
-                {t("yearsExp")}
-              </span>{" "}
-              {t("subtitle")}
-            </motion.p>
 
             <motion.div
               initial={{ opacity: 0, y: 30 }}
@@ -113,17 +102,18 @@ export function HeroSection() {
                   { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/spring/spring-original.svg", alt: "Spring Boot" },
                   { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/oracle/oracle-original.svg", alt: "Oracle" },
                   { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg", alt: "Docker" },
-                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg", alt: "PostgreSQL" },
-                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/flutter/flutter-original.svg", alt: "Flutter" },
-                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg", alt: "React" },
-                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/angular/angular-original.svg", alt: "Angular" },
                 ].map((icon) => (
                   <img key={icon.alt} src={icon.src} alt={icon.alt} title={icon.alt} className="w-9 h-9 md:w-11 md:h-11 opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 hover:scale-125 hover:-translate-y-2 cursor-pointer drop-shadow-sm hover:drop-shadow-xl" />
                 ))}
-                <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" alt="IBM MQ" title="IBM MQ" className="w-10 h-6 md:w-12 md:h-8 object-contain opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 hover:scale-125 hover:-translate-y-2 cursor-pointer drop-shadow-sm hover:drop-shadow-xl dark:invert" />
+                <a
-                <div title="SWIFT Payment (MT/MX)" className="flex items-center justify-center opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 hover:scale-125 hover:-translate-y-2 cursor-pointer">
+                  href="#tech-stack"
-                  <span className="font-black italic text-sm md:text-base text-[#0033A0] dark:text-[#6FA8FF] tracking-wider">SWIFT</span>
+                  className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-semibold border border-accent/40 text-accent bg-accent/10 hover:bg-accent/20 hover:border-accent/70 transition-all duration-300 hover:scale-105 whitespace-nowrap"
-                </div>
+                >
+                  {tTech("seeMore")}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M5 12h14M12 5l7 7-7 7"/>
+                  </svg>
+                </a>
               </div>
             </motion.div>
           </div>