**1. 独立游戏工作室的品牌官网。** 中小游戏团队普遍缺乏对外的品牌阵地：产品散落在微信小游戏、Poki 等渠道里，玩家、媒体与合作方找不到"官方入口"。H2FGame 以沉浸式的品牌叙事首页 + 每款游戏的深度详情页，把 4 款自研游戏（撞个大西瓜、水果爆单了、曹贼放开她、灵媒侦探）统一收拢到品牌门户，是"小团队、大品牌感"的典型场景。
**2. 出海与双市场运营。** CH/EN 双语站点同时服务国内发行（微信小游戏）与海外发行（PC / Poki 网页游戏平台），URL 级语言路由（/zh、/en）保证两个市场可被搜索引擎分别收录，是中小游戏公司出海的标准配置场景。
**3. 雇主品牌与招聘。** "加入我们"页承载工作室的创作理念与职位入口，配合公司成立新闻与开发日志，向候选人传递"和相信故事的人，一起做游戏"的团队文化。
**4. AI 时代游戏创作的公司叙事。** 品牌名 H2F 具有三层含义——History to Future、Human & AI、Heart to Fun，官网本身就是"技术参与创作、人来决定讲什么故事"这一创作主张的对外表达载体。
**1. 全屏章节式品牌首页（6 屏）**
- 第 1 屏品牌 Hero：主视觉插画 + 品牌口号"好游戏，有故事，更有你。"+ 探索作品入口
- 第 2 屏产品展示区：当前主推游戏大图叙事 + 01-04 产品快速切换导航
- 第 3 屏"我们的坚持"标签页：玩法 / 情绪 / 故事 / 公司成立 / 品牌口号五个篇章切换
- 第 4 屏招聘 CTA；第 5 屏新闻时间轴（公司成立 → 三款游戏上线节点 → NEXT，6 个标签切换）
- 屏幕进度指示器（第 N 屏 / 共 6 屏）+ 滚动引导
**2. 游戏产品频道**
- 产品列表页与 4 个独立产品详情页
- 每个详情页为 7 屏全页叙事：故事与定位（含关卡数/主题世界/水果等级/版本数等数据卡）、一局怎样发生（4 步玩法循环）、核心系统（3 大支柱）、视觉与实机展示（实机截图轮播 + 实机视频）、项目状态与计划平台（微信小游戏版 / PC·Poki 版双版本状态）
**3. 公司信息频道**
- 了解我们：品牌介绍页（在福州，做有故事的游戏）
- 加入我们：招聘理念与职位入口
- 新闻动态：开发日志与公司动态时间轴
**1. 静态优先的纯前端架构**
首期明确不引入数据库、Redis、CMS 或自建 API：游戏、新闻、职位、公司信息全部收敛在 `data/` 目录的类型化静态数据中，由 Server Components 直接渲染成页面，仅在语言菜单、标签切换等确有交互处使用 Client Components。数据流保持"类型化静态内容 → Server Component 页面 → 必要的 Client 交互"最短路径。
**2. 技术栈与工程化**
- Next.js 16 App Router + React 19 + TypeScript strict 模式（`tsc --noEmit` 纳入校验）
- Tailwind CSS 4（@tailwindcss/postcss 集成）；ESLint 9
- Vitest + Testing Library 组件测试；`npm run build` 作为交付前强制验证
- 路径别名 `@/*` 统一导入
**3. 双语言实现**
- `[locale]` 路由层承载语言，语言代码在路由层解析而非客户端渲染后替换全文
- 中英文案来自同一份类型化内容结构（title_zh / title_en 式字段），不复制两套 JSX 页面；布局不依赖固定字符数，兼容两种语言长度差异
- URL 使用稳定英文 slug，两语言共享同一产品路由（/zh/products/watermelon ↔ /en/products/watermelon）
声明：本文仅代表作者观点，不代表本站立场。如果侵犯到您的合法权益，请联系我们删除侵权资源！如果遇到资源链接失效，请您通过评论或工单的方式通知管理员。未经允许，不得转载，本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论