廓拉 KORA - 藏区文化交互式网站

项目简介

廓拉 KORA 是一个面向藏区文化兴趣者与旅行者的交互式文化网站。通过强烈的藏式视觉风格和沉浸式交互体验，帮助用户深入理解藏区文化。

一句话定位： 去藏区之前，先学会如何进入它。

技术栈

• 框架: Next.js 14 (App Router)
• 语言: TypeScript
• 样式: Tailwind CSS
• 动画: Framer Motion
• 字体: Noto Serif SC, Noto Sans SC, Cormorant Garamond

项目结构

KORA3/
├── app/                      # Next.js App Router
│   ├── layout.tsx           # 根布局
│   ├── page.tsx             # 首页
│   ├── globals.css          # 全局样式
│   └── themes/              # 主题页面
│       ├── kora/            # 转山旗舰篇（完整实现）
│       ├── faith/           # 信仰（占位页）
│       ├── sacred/          # 圣地（占位页）
│       ├── routes/          # 路线（占位页）
│       ├── landscape/       # 风光（占位页）
│       ├── architecture/    # 建筑（占位页）
│       ├── symbols/         # 符号（占位页）
│       ├── cuisine/         # 饮食（占位页）
│       ├── history/         # 历史（占位页）
│       └── films/           # 影像（占位页）
├── components/              # React 组件
│   ├── HeroSection.tsx     # 首页开场动画（6场景滚动叙事）
│   ├── ThemeGrid.tsx       # 十主题符号入口
│   └── PlaceholderPage.tsx # 占位页面组件
├── lib/                     # 工具函数
├── public/                  # 静态资源
│   ├── images/
│   └── fonts/
├── tailwind.config.ts       # Tailwind 配置
├── tsconfig.json           # TypeScript 配置
├── next.config.js          # Next.js 配置
└── package.json            # 项目依赖

核心功能

V1 阶段（已实现）

1. 首页沉浸式开场 - 参考 The Boat 的滚动叙事，6个场景渐进展开

   • 场景1: 黑屏文字
   • 场景2: 山影升起
   • 场景3: 五色经幡
   • 场景4: 朝圣者剪影
   • 场景5: 标题汇聚
   • 场景6: 使命引导

2. 十主题符号入口 - 曼陀罗式文化导航

   • 信仰、转山、圣地、路线、风光
   • 建筑、符号、饮食、历史、影像

3. 转山旗舰篇 - 完整的交互展厅体验

   • 什么是廓拉
   • 为什么转山
   • 典型路线（冈仁波齐、梅里雪山、阿尼玛卿）
   • 礼仪与禁忌
   • 如何参与
   • CTA 转化区

4. 藏式视觉系统

   • 色彩：藏红、酥油黄、松石绿、经幡蓝
   • 字体：Noto Serif SC（标题）、Noto Sans SC（正文）、Cormorant Garamond（英文）
   • 动效：慢速、呼吸感、卷轴感
   • 装饰：藏文符号、经幡、法轮、八吉祥

开发指南

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000 查看网站。

构建生产版本

npm run build
npm start

设计原则

1. 视觉护城河 - 市面所有藏文化内容站普遍审丑，"美"本身是真的差异化
2. 文化尊重 - 不做过度神秘化或猎奇化，每个符号对应真实主题
3. 交互沉浸 - 慢速、有呼吸感的动效，像卷轴、风、绕行
4. 内容深度 - 从"被风景吸引"走向"理解藏区"

色彩系统

--kora-black: #0e0a08      /* 近黑暖底 */
--kora-dark: #1a120e       /* 寺墙夜色 */
--kora-red: #A8281D        /* 僧袍红 */
--kora-red-dark: #6D1612   /* 暗红寺墙 */
--kora-gold: #C9A14A       /* 寺顶金 */
--kora-blue: #1E3A6B       /* 藏蓝 */
--kora-turquoise: #4A8B8E  /* 松石绿 */
--kora-yellow: #D97A3C     /* 藏黄 */
--kora-cream: #F4ECDB      /* 米白 */

后续规划

V2 阶段

• 完善其他9个主题页面的内容
• 添加纪录片策展区
• 实现文创商店
• 会员系统与深度内容

V3 阶段

• 路线包购买功能
• 领队预约系统
• 用户社区与游记分享
• 移动端优化

参考资源

• 交互参考: The Boat, Kinfolk, National Geographic
• 文化参考: 藏传佛教、转山文化、藏区地理
• 视觉参考: 唐卡色彩、寺院建筑、藏式符号

许可证

ISC

---

廓拉 KORA - སྐོར་བ་ - 去藏区之前，先学会如何进入它