feat(home): redesign homepage sections according to TO-FIX requirements

- Translate intro tagline and section headers to English
- Update home metrics to reflect international publications, patents, and standards
- Revamp Research Projects section with AIoT & AI-RAN, MCM, and MVQM projects
- Update NRF standards track label to National Research Foundation of Korea
- Reconstruct Research Areas section into 14-topic responsive card grid with 2-line header
- Add International Standardizations section with global SDO listings and link
- Add mobile max-w 500px, horizontal centering, and 30px vertical margin to hero composition
- Update E2E test assertions for new content and structure

refer_landing_page/app/_components/ProjectPageView.tsx

@@ -17,11 +17,11 @@ export function ProjectPageView() {
             </span>
           </div>
           <h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
-            주요 연구 프로젝트 (Research Projects)
+            Research Projects
           </h2>
         </div>
         <p className="text-xs text-ink-mute font-mono">
-          총 {researchProjects.length}개 핵심 국제/국내 표준화 연구 과제
+          {researchProjects.length} core international standardization research projects
         </p>
       </div>
 

refer_landing_page/app/page.tsx

@@ -1,62 +1,47 @@
 import React from "react";
+import Link from "next/link";
 import HeroComposition from "./_components/HeroComposition";
 import { DirectionsBlock } from "./_components/DirectionsBlock";
 import { ProjectPageView } from "./_components/ProjectPageView";
 import { publications, patents } from "../content/publications";
+import { standardsBodies } from "../content/standards";
 
-const PILLARS = [
-  {
-    no: "01",
-    en: "Extensibility & Protocol",
-    ko: "AI Agent 기능 확장 프로토콜",
-    theme: "vermillion" as const,
-    topics: [
-      "Model Context Protocol (MCP) 서버/클라이언트 아키텍처",
-      "SKILL 도구 캡슐화 및 재사용 패키징",
-      "CLI 에이전트 인터페이스 제어 및 웹 가동 제어",
-    ],
-    desc: "에이전트가 외부 도구 및 시스템과 표준화된 방식으로 연동할 수 있도록 MCP와 SKILL 패키징 기술을 개발합니다.",
-  },
-  {
-    no: "02",
-    en: "Multi-Agent Systems",
-    ko: "멀티 에이전트 협업 및 오케스트레이션",
-    theme: "cobalt" as const,
-    topics: [
-      "HERDR 백그라운드 프로세스 컨테이너 격리 제어",
-      "crewAI 기반 역할 분담 및 태스크 위임 체계",
-      "LangGraph 순환 상태 그래프 기반 워크플로우 제어",
-    ],
-    desc: "다중 에이전트 환경에서 독립적인 역할 분담과 선순환 오케스트레이션을 보장하는 자율 협업 플랫폼을 연구합니다.",
-  },
-  {
-    no: "03",
-    en: "Interoperability Standards",
-    ko: "에이전트 상호운용성 개방형 표준",
-    theme: "vermillion" as const,
-    topics: [
-      "Agent-to-Agent (A2A) 프로토콜 규격 정의 및 검증",
-      "Agent Communication Protocol (ACP) 메시지 교환 규격",
-      "Agent Card (/.well-known/agent-card.json) 메타데이터 검증",
-    ],
-    desc: "서로 다른 프레임워크 기반의 에이전트 간의 상호운용성을 보장하는 국제 표준 개방형 통신 프로토콜을 구현합니다.",
-  },
-  {
-    no: "04",
-    en: "High-Performance Backbone",
-    ko: "AIoT & 고성능 통신 백본",
-    theme: "cobalt" as const,
-    topics: [
-      "gRPC / QUIC 양방향 스트리밍 에이전트 백본 통신",
-      "Protocol Buffers (Protobuf) 직렬화 통신 최적화",
-      "MQTT / CoAP 엣지 메시 통신망 통합",
-    ],
-    desc: "초저지연 양방향 스트리밍 통신 인프라를 바탕으로 고성능 에이전트 백본 네트워크를 설계하고 실증합니다.",
-  },
+// CUSTOMIZATION HOOK: 14 Core Research Areas
+const RESEARCH_AREAS: string[] = [
+  "Quick UDP Internet Connection (QUIC)",
+  "QUIC-based Mobility and Multi-Streaming Support",
+  "Services and Protocols for Internet-of-Things (IoT)",
+  "Constrained Application Protocol (CoAP)",
+  "In-Vehicle Infotainment (IVI)",
+  "Optical Wireless or Visible Light Communications (OWC/VLC)",
+  "Lighting Control Networks (PLASA E1.45) for LED-based VLC",
+  "Mobility Management: Distributed Mobility Control",
+  "Multicast Routing Protocols and Reliable Multicasting",
+  "mobile SCTP (mSCTP): Soft Handover in Transport Layer",
+  "Stream Control Transmission Protocol (SCTP)",
+  "Telecommunication Optimization: Network Planning and Management",
+  "TAC/TAL Configuration for Paging and Location Management",
+  "Tabu Search and Genetic Algorithm",
+];
+
+const INTERNATIONAL_SDOS = [
+  "IEC TC100: Multimedia Systems and Equipment",
+  "ISO/IEC JTC1/SC41: Internet-of-Things (IoT) Applications",
+  "ITU-T SG20: IoT Services",
+  "ITU-T SG13: Mobility Management",
+  "ISO/IEC JTC1/SC6: Reliable Multicasting",
 ];
 
 export default function HomePage() {
-  const pubCount = publications.length + patents.length;
+  const intlPubsCount = publications.filter(
+    (p) => p.category === "intl-journal-conf"
+  ).length;
+  const patentCount = patents.length;
+  const stdDocsCount = standardsBodies.reduce(
+    (sum, b) =>
+      sum + b.projects.reduce((pSum, p) => pSum + p.documents.length, 0),
+    0
+  );
 
   return (
     <div className="container-content space-y-16 md:space-y-24 pt-10 md:pt-16 pb-16 md:pb-24">
@@ -75,39 +60,39 @@ export default function HomePage() {
               <span className="italic font-serif text-cobalt-dark">Orchestration</span>
             </h1>
             <p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">
-              AI 에이전트 네트워크 연구실(ANL)은 멀티 AI 에이전트 오케스트레이션을 위해 서로 소통하고 협력하는 에이전트 네트워킹 기술과 표준 프레임워크 기술을 연구합니다.
+              The AI Agent Networking Laboratory (ANL) studies agent networking technologies and standard frameworks that enable AI agents to communicate and collaborate with one another for multi-agent orchestration.
             </p>
 
-            {/* Metrics Row (Derived from data array, AC-13) */}
+            {/* Metrics Row (Derived from real content data) */}
             <div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
               <div>
                 <div className="font-serif text-3xl text-cobalt-dark font-normal">
-                  {PILLARS.length}
+                  {intlPubsCount}
                 </div>
                 <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
-                  Research Areas
+                  International Journals &amp; Conference
                 </div>
               </div>
               <div>
                 <div className="font-serif text-3xl text-cobalt-dark font-normal">
-                  {Math.floor((publications.length + patents.length) / 10) * 10}+
+                  {patentCount}
                 </div>
                 <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
-                  Publications
+                  Patent
                 </div>
               </div>
               <div>
-                <div className="font-serif text-3xl text-ink font-normal">
-                  2026
+                <div className="font-serif text-3xl text-cobalt-dark font-normal">
+                  {stdDocsCount}
                 </div>
                 <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
-                  Issue Static
+                  Standardization Contributions
                 </div>
               </div>
             </div>
           </div>
 
-          <div className="lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
+          <div className="w-full max-w-[500px] mx-auto my-[30px] lg:my-0 lg:max-w-none lg:mx-0 lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
             <HeroComposition />
           </div>
         </div>
@@ -116,79 +101,51 @@ export default function HomePage() {
       {/* Research Project PageView Component */}
       <ProjectPageView />
 
-      {/* Core Research Areas Grid */}
-      <section className="space-y-8 pt-20 md:pt-28 border-t border-line">
-        <div className="flex justify-between items-end">
+      {/* 14 Research Areas Grid */}
+      <section className="space-y-8 pt-16 md:pt-20 border-t border-line">
+        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
           <div>
-            <div className="font-mono text-xs text-cobalt-dark uppercase tracking-widest font-bold">
-              Research Areas
+            <div className="flex items-center gap-3 mb-1">
+              <span className="h-px w-8 bg-cobalt-dark"></span>
+              <span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
+                Core Domains
+              </span>
             </div>
-            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
-              핵심 연구 분야
+            <h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
+              Research Areas
             </h2>
           </div>
-          <div className="font-mono text-xs text-ink-mute">
-            Magazine Layout 01–04
-          </div>
+          <p className="text-xs text-ink-mute font-mono">
+            {RESEARCH_AREAS.length} fundamental networking protocols and AI system domains
+          </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
-          {PILLARS.map((pillar) => {
-            const isVermillion = pillar.theme === "vermillion";
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {RESEARCH_AREAS.map((area, idx) => {
+            const no = String(idx + 1).padStart(2, "0");
+            const isOdd = (idx + 1) % 2 !== 0;
 
             return (
               <div
-                key={pillar.no}
-                className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200"
+                key={no}
+                className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200 h-full"
               >
-                <div className="space-y-4">
+                <div className="space-y-3">
                   <div className="flex justify-between items-center">
                     <span
-                      className={`font-mono text-sm font-bold ${
-                        isVermillion ? "text-vermillion" : "text-cobalt-dark"
+                      className={`font-mono text-xs font-bold ${
+                        isOdd ? "text-vermillion-dark" : "text-cobalt-dark"
                       }`}
                     >
-                      [{pillar.no}]
+                      {no}
                     </span>
-                    <span className="font-mono text-xs text-ink-mute uppercase">
-                      {pillar.en}
+                    <span className="font-mono text-[0.68rem] text-ink-mute uppercase tracking-wider">
+                      Topic #{no}
                     </span>
                   </div>
-
-                  <h3 className="font-serif text-xl font-normal text-ink">
-                    {pillar.ko}
+                  <h3 className="font-serif text-base font-normal text-ink leading-snug">
+                    {area}
                   </h3>
-
-                  <p className="text-xs text-ink-mute leading-relaxed">
-                    {pillar.desc}
-                  </p>
-
-                  <ul className="space-y-2 pt-2">
-                    {pillar.topics.map((topic, tIdx) => (
-                      <li
-                        key={tIdx}
-                        className="text-xs text-ink flex items-start gap-2"
-                      >
-                        <span
-                          className={`inline-block w-1.5 h-1.5 rounded-full mt-1 ${
-                            isVermillion ? "bg-vermillion" : "bg-cobalt"
-                          }`}
-                        ></span>
-                        <span>{topic}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-
-                <div className="mt-6 pt-4 border-t border-line/60 flex justify-between items-center text-xs font-mono text-ink-mute">
-                  <span>ANL Core Spec</span>
-                  <span
-                    className={
-                      isVermillion ? "text-vermillion" : "text-cobalt-dark"
-                    }
-                  >
-                    Pillar #{pillar.no}
-                  </span>
                 </div>
               </div>
             );
@@ -196,6 +153,47 @@ export default function HomePage() {
         </div>
       </section>
 
+      {/* International Standardizations Section */}
+      <section className="space-y-6 pt-16 md:pt-20 border-t border-line">
+        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
+          <div>
+            <div className="flex items-center gap-3 mb-1">
+              <span className="h-px w-8 bg-cobalt-dark"></span>
+              <span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
+                Global Engagement
+              </span>
+            </div>
+            <h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
+              International Standardizations
+            </h2>
+          </div>
+        </div>
+
+        <div className="bg-paper p-6 sm:p-8 rounded-lg border border-line space-y-6">
+          <p className="text-ink/80 text-sm sm:text-base leading-relaxed max-w-3xl">
+            Along with the research activities, we are also in pursuit of the International Standardization, from the market deployment perspective, in the following SDOs (Standard-Defining Organizations):
+          </p>
+
+          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3 pt-2">
+            {INTERNATIONAL_SDOS.map((sdo, idx) => (
+              <li key={idx} className="flex items-start gap-2.5 text-sm text-ink font-sans">
+                <span className="inline-block w-1.5 h-1.5 rounded-full bg-cobalt-dark mt-2 shrink-0"></span>
+                <span>{sdo}</span>
+              </li>
+            ))}
+          </ul>
+
+          <div className="pt-4 border-t border-line/60">
+            <Link
+              href="/standardization"
+              className="inline-flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wider text-cobalt-dark hover:text-ink transition-colors draw-underline"
+            >
+              <span>Please refer to here for details →</span>
+            </Link>
+          </div>
+        </div>
+      </section>
+
       {/* Directions Block */}
       <DirectionsBlock />
     </div>