init: 移动游戏项目独立化（便携式 App.vue + 独立 i18n，可嵌入 mainPage）

src/components/HeroSection.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import Tag from './ui/Tag.vue'
+import { heroMeta } from '../config.js'
+
+const { t } = useI18n({ useScope: 'global' })
+</script>
+
+<template>
+  <section class="hero">
+    <div class="container">
+      <div class="hero__eyebrow">
+        <Tag>{{ t(heroMeta.courseKey) }}</Tag>
+      </div>
+      <h1 class="hero__title">{{ t('mobileGame.hero.title') }}</h1>
+      <p class="hero__desc">{{ t('mobileGame.hero.desc') }}</p>
+      <div class="hero__meta">
+        <div v-for="item in heroMeta.items" :key="item.labelKey" class="hero__meta-item">
+          <span class="hero__meta-label">{{ t(item.labelKey) }}</span>
+          <span>{{ t(item.valueKey) }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.hero {
+  padding: var(--space-2xl) 0 var(--space-xl);
+  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
+  border-bottom: 1px solid var(--border);
+}
+.hero__eyebrow {
+  margin-bottom: var(--space-md);
+}
+.hero__title {
+  font-size: 2.3rem;
+  margin-bottom: var(--space-md);
+}
+.hero__desc {
+  max-width: 720px;
+  font-size: 1.02rem;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-lg);
+}
+.hero__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xl);
+}
+.hero__meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 0.92rem;
+  color: var(--text-primary);
+}
+.hero__meta-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+}
+</style>