[Frontend] Complete i18n internationalization setup with translations

frontend/src/app/page.tsx

@@ -1,51 +1,57 @@
+'use client';
+
 import Link from 'next/link';
 import { ArrowRight, BookOpen, Code, Users } from 'lucide-react';
+import { useI18n } from '@/i18n';
 
 export default function Home() {
+  const { t } = useI18n();
+
   return (
     <div className="min-h-screen bg-background flex flex-col items-center justify-center relative overflow-hidden">
       <div className="pointer-events-none absolute top-0 right-0 h-[800px] w-[800px] rounded-full bg-red-600/5 blur-[150px]"></div>
       <div className="pointer-events-none absolute bottom-0 left-0 h-[600px] w-[600px] rounded-full bg-red-600/5 blur-[120px]"></div>
-      
+
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col items-center text-center">
         <h1 className="text-5xl md:text-7xl font-black tracking-tighter uppercase mb-6">
-          Web3 Student <span className="text-red-500">Lab</span>
+          {t('home.title')}
+          <span className="text-red-500">{t('home.title_accent')}</span>
         </h1>
         <p className="text-xl md:text-2xl text-text-secondary max-w-3xl mb-12 font-light">
-          The ultimate open-source educational platform for blockchain development. Learn smart contracts, collaborate on projects, and build the future of Web3.
+          {t('home.subtitle')}
         </p>
 
         <div className="flex flex-col sm:flex-row gap-4 mb-20">
-          <Link 
+          <Link
             href="/dashboard"
             className="px-8 py-4 bg-red-600 hover:bg-red-500 text-white rounded-xl font-bold uppercase tracking-widest transition-all shadow-[0_0_20px_rgba(220,38,38,0.3)] hover:shadow-[0_0_30px_rgba(220,38,38,0.5)] flex items-center justify-center gap-2"
           >
-            Launch App <ArrowRight className="h-5 w-5" />
+            {t('home.launch_app')} <ArrowRight className="h-5 w-5" />
           </Link>
           <Link
             href="https://github.com/StellarDevHub/Web3-Student-Lab"
             target="_blank"
             className="px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl font-bold uppercase tracking-widest transition-all flex items-center justify-center"
           >
-            View Source
+            {t('home.view_source')}
           </Link>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl">
           <div className="bg-bg-secondary/50 border border-border-theme p-8 rounded-2xl backdrop-blur-sm text-left transition-all hover:-translate-y-2 hover:border-red-500/50">
             <BookOpen className="h-10 w-10 text-red-400 mb-4" />
-            <h3 className="text-xl font-bold mb-2">Interactive Curriculum</h3>
-            <p className="text-text-secondary">Progress from basics to advanced smart contract development with hands-on coding exercises. Earn blockchain-verifiable certificates as you complete modules.</p>
+            <h3 className="text-xl font-bold mb-2">{t('home.feature_curriculum_title')}</h3>
+            <p className="text-text-secondary">{t('home.feature_curriculum_desc')}</p>
           </div>
           <div className="bg-bg-secondary/50 border border-border-theme p-8 rounded-2xl backdrop-blur-sm text-left transition-all hover:-translate-y-2 hover:border-red-500/50">
             <Code className="h-10 w-10 text-red-400 mb-4" />
-            <h3 className="text-xl font-bold mb-2">In-Browser IDE</h3>
-            <p className="text-text-secondary">Write, test, and deploy Rust smart contracts directly from your browser without local setup. Integrated with Soroban for seamless testing.</p>
+            <h3 className="text-xl font-bold mb-2">{t('home.feature_ide_title')}</h3>
+            <p className="text-text-secondary">{t('home.feature_ide_desc')}</p>
           </div>
           <div className="bg-bg-secondary/50 border border-border-theme p-8 rounded-2xl backdrop-blur-sm text-left transition-all hover:-translate-y-2 hover:border-red-500/50">
             <Users className="h-10 w-10 text-red-400 mb-4" />
-            <h3 className="text-xl font-bold mb-2">Collaborative Lab</h3>
-            <p className="text-text-secondary">Work together on Hackathon projects, share components, and build your decentralized reputation via on-chain peer reviews.</p>
+            <h3 className="text-xl font-bold mb-2">{t('home.feature_collab_title')}</h3>
+            <p className="text-text-secondary">{t('home.feature_collab_desc')}</p>
           </div>
         </div>
 
@@ -54,10 +60,8 @@ export default function Home() {
             <span className="text-3xl">🌱</span>
           </div>
           <div className="text-left">
-            <h4 className="text-lg font-bold text-yellow-500 mb-1">Project Status: Grant Required</h4>
-            <p className="text-yellow-200/80 text-sm">
-              Web3 Student Lab is an ambitious open-source project designed to revolutionize developer onboarding to the Stellar ecosystem. We are currently seeking a grant to fully deploy our infrastructure, finalize our curriculum, and bring this platform to mainnet.
-            </p>
+            <h4 className="text-lg font-bold text-yellow-500 mb-1">{t('home.grant_title')}</h4>
+            <p className="text-yellow-200/80 text-sm">{t('home.grant_desc')}</p>
           </div>
         </div>
       </div>

frontend/src/i18n/locales/en.json

@@ -1,4 +1,19 @@
 {
+  "home": {
+    "title": "Web3 Student ",
+    "title_accent": "Lab",
+    "subtitle": "The ultimate open-source educational platform for blockchain development. Learn smart contracts, collaborate on projects, and build the future of Web3.",
+    "launch_app": "Launch App",
+    "view_source": "View Source",
+    "feature_curriculum_title": "Interactive Curriculum",
+    "feature_curriculum_desc": "Progress from basics to advanced smart contract development with hands-on coding exercises. Earn blockchain-verifiable certificates as you complete modules.",
+    "feature_ide_title": "In-Browser IDE",
+    "feature_ide_desc": "Write, test, and deploy Rust smart contracts directly from your browser without local setup. Integrated with Soroban for seamless testing.",
+    "feature_collab_title": "Collaborative Lab",
+    "feature_collab_desc": "Work together on Hackathon projects, share components, and build your decentralized reputation via on-chain peer reviews.",
+    "grant_title": "Project Status: Grant Required",
+    "grant_desc": "Web3 Student Lab is an ambitious open-source project designed to revolutionize developer onboarding to the Stellar ecosystem. We are currently seeking a grant to fully deploy our infrastructure, finalize our curriculum, and bring this platform to mainnet."
+  },
   "nav": {
     "learn": "Learn",
     "dashboard": "Dashboard",

frontend/src/i18n/locales/es.json

@@ -1,4 +1,19 @@
 {
+  "home": {
+    "title": "Web3 Student ",
+    "title_accent": "Lab",
+    "subtitle": "La plataforma educativa open-source definitiva para el desarrollo blockchain. Aprende contratos inteligentes, colabora en proyectos y construye el futuro de Web3.",
+    "launch_app": "Iniciar App",
+    "view_source": "Ver Código",
+    "feature_curriculum_title": "Currículo Interactivo",
+    "feature_curriculum_desc": "Progresa desde lo básico hasta el desarrollo avanzado de contratos inteligentes con ejercicios prácticos. Obtén certificados verificables en blockchain al completar módulos.",
+    "feature_ide_title": "IDE en el Navegador",
+    "feature_ide_desc": "Escribe, prueba y despliega contratos inteligentes Rust directamente desde tu navegador sin configuración local. Integrado con Soroban para pruebas sin interrupciones.",
+    "feature_collab_title": "Laboratorio Colaborativo",
+    "feature_collab_desc": "Trabaja en proyectos de Hackathon, comparte componentes y construye tu reputación descentralizada mediante revisiones de pares en cadena.",
+    "grant_title": "Estado del Proyecto: Se Requiere Beca",
+    "grant_desc": "Web3 Student Lab es un proyecto open-source ambicioso diseñado para revolucionar la incorporación de desarrolladores al ecosistema Stellar. Actualmente buscamos una beca para desplegar completamente nuestra infraestructura, finalizar nuestro plan de estudios y llevar esta plataforma a mainnet."
+  },
   "nav": {
     "learn": "Aprender",
     "dashboard": "Panel",
@@ -172,7 +187,12 @@
         "Un diagrama de flujo de tokens",
         "Un ejercicio simple de matemáticas de AMM"
       ],
-      "tools": ["Simuladores AMM", "Modelado en hojas de cálculo", "Paneles de protocolo", "Herramientas de exploración"]
+      "tools": [
+        "Simuladores AMM",
+        "Modelado en hojas de cálculo",
+        "Paneles de protocolo",
+        "Herramientas de exploración"
+      ]
     },
     "default": {
       "level": "Nivel abierto",
@@ -197,7 +217,11 @@
           "description": "Integra todo en un resultado final o punto de revisión."
         }
       ],
-      "deliverables": ["Notas y puntos de control", "Trabajo práctico de laboratorio", "Artefacto de revisión final"],
+      "deliverables": [
+        "Notas y puntos de control",
+        "Trabajo práctico de laboratorio",
+        "Artefacto de revisión final"
+      ],
       "tools": ["Herramientas de wallet", "Exploradores", "Ejercicios del curso"]
     }
   }

frontend/src/i18n/locales/zh.json

@@ -1,4 +1,19 @@
 {
+  "home": {
+    "title": "Web3 学生",
+    "title_accent": "实验室",
+    "subtitle": "区块链开发的终极开源教育平台。学习智能合约，协作项目，构建Web3的未来。",
+    "launch_app": "启动应用",
+    "view_source": "查看源码",
+    "feature_curriculum_title": "互动式课程",
+    "feature_curriculum_desc": "通过动手编码练习，从基础到高级智能合约开发逐步进阶。完成模块后获得区块链可验证证书。",
+    "feature_ide_title": "浏览器内IDE",
+    "feature_ide_desc": "直接在浏览器中编写、测试和部署Rust智能合约，无需本地设置。与Soroban集成，实现无缝测试。",
+    "feature_collab_title": "协作实验室",
+    "feature_collab_desc": "合作开展黑客松项目，共享组件，通过链上同行评审建立去中心化声誉。",
+    "grant_title": "项目状态：需要资助",
+    "grant_desc": "Web3 Student Lab 是一个雄心勃勃的开源项目，旨在彻底改变开发者加入Stellar生态系统的方式。我们目前正在寻求资助，以全面部署我们的基础设施，完成课程，并将此平台推向主网。"
+  },
   "nav": {
     "modules": "模块",
     "roadmap": "路线图",
@@ -167,11 +182,7 @@
           "description": "无常损失、智能合约风险和系统级权衡。"
         }
       ],
-      "deliverables": [
-        "一份DeFi协议分析报告",
-        "一份代币流程图",
-        "一个简单的AMM数学练习"
-      ],
+      "deliverables": ["一份DeFi协议分析报告", "一份代币流程图", "一个简单的AMM数学练习"],
       "tools": ["AMM模拟器", "电子表格建模", "协议仪表板", "浏览器工具"]
     },
     "default": {