朴观 Pure Vipassana · 心身健康Club
Slogan: 回归心之绽放
关键字: 专业 · 向善 · 能量 · 绿色
Tagline: MEDITATION · HEALING · SANCTUARY
心身健康Club 是一个向善正向的疗愈资源融合采购与交付平台:B端场所(高端酒店等)在平台采购机构课程作为高端增值服务;机构在这里对接 B 端渠道、招募认证疗愈师、触达 C 端学员;疗愈师与用户在这里形成从学习者到从业者的成长闭环(活水模型)。
产品矩阵(1 + 4 + 1)
| 端 | 名称 | 受众 |
|---|---|---|
| GTM 前台 | 心身健康Club(本仓库) | 品牌展示与四端转化入口 |
| 子平台 | 朴观采购 /puguan/procurement |
B 端场所(高端酒店等) |
| 子平台 | 朴观机构 /puguan/org |
疗愈机构 |
| 子平台 | 朴观师资 /puguan/teachers |
疗愈师 |
| 子平台 | 朴观疗愈 /puguan/healing |
C 端用户 |
| 后台 | 统一管理后台 | 平台运营(独立应用,规划中) |
四个子平台未来为独立前端应用;MVP 期以 GTM 站内落地页呈现。详见 docs/design-v2.md。
本仓库为平台前端 MVP(纯前端演示,mock 数据),目前含 6 家演示机构、12 位演示老师与认证课程体系,尚未接入真实数据与后端。
品牌信息
| 项目 | 内容 |
|---|---|
| 品牌名称 | 朴观 Pure Vipassana · 心身健康Club |
| Slogan | 回归心之绽放 |
| Tagline | MEDITATION · HEALING · SANCTUARY |
| 关键字 | 专业 · 向善 · 能量 · 绿色 |
| 品牌色 | 古铜金 #A98A4B / 香槟金 #E9D5A4 / 墨绿 #17221D / 米白 #F5F0E5 |
| 品牌字体 | 英文 Oranienbaum · 中文思源宋体(Noto Serif SC) |
| 品牌标识 | docs/Pure Vipassana 朴观 · 品牌标识.pptx(符号:圆环 + 三瓣莲花 + 水线) |
核心理论基础
平台疗愈课程体系根植于点刹那科学疗愈体系:
- 点刹那冥想疗愈法,源自全球顶尖冥想师团队"护国尊者"原创的"红点疗愈法"。
- 在获得护国尊者正式授权后,港中文的科学家、冥想师与学者团队对该法进行了长期深入的实践与系统性的优化改造,最终形成了这一融合传承与创新的科学冥想疗愈体系。
- 研发团队涵盖院士、科学家与一线医生,基于认知科学与神经生物学,构建"时间性解体→时间性协同"的非医疗第三方解释框架。
更多背景资料见 reference/background.md。
平台运营机制
- 评级体系: 疗愈师、机构、品牌方均设有等级评定,未来将引入权重机制,酒店方或用户方可为老师进行评价与收录评定。
- 积分激励体系: 鼓励用户积极参与社群活动报名,积分可用于兑换礼品。
页面结构
| 路由 | 页面 | 说明 |
|---|---|---|
/ |
首页 | 三方主体价值主张、活水流转、三套准入体系、认证机构、课程招生与周边产品预告 |
/organizations |
找机构 | 认证机构列表:按方向与准入等级筛选 |
/organizations/:id |
机构详情 | 机构介绍、准入评判、课程、师资与B端采购入口 |
/teachers |
疗愈师 | 三种执业舞台(加入机构/服务B端/自营C端),按类别与区域筛选 |
/teachers/:id |
疗愈师详情 | 简介准入等级、课程与评价 |
/booking |
预约 | 表单校验、时段选择、提交后确认 |
/booking/:teacherId |
预约 | 由疗愈师详情跳转进入,自动预填指定老师 |
/courses |
课程 | 心身疗愈执行师认证课程:C端个人学习 + B端批量采购双入口 |
/venue |
B端合作 | 采购机构课程、驻场交付流程、B端准入与需求提交 |
/puyueguan |
朴悦观品牌页 | 面向五星级酒店的四季冥想疗愈课程供应商介绍(商务合作落地页) |
未知路由统一回退至首页(
App.tsx中path="*")。
技术栈
- 构建: Vite 6 + TypeScript
- 框架: React 18 + React Router 6
- 样式: Tailwind CSS v4(Forest 森林主题,CSS 变量设计系统)
- 图标: Phosphor Icons
- 动画: motion
微信小程序版本(miniapp/)
Web 站点的同源小程序版本,基于 Taro 4 + React + TypeScript,复用同一份 mock 数据层(src/data/teachers.ts / courses.ts),包含六个页面:首页、找老师、老师详情、预约、疗愈课程、场地合作。
cd miniapp
npm install
# 开发模式(watch)
npm run dev:weapp
# 生产构建
export NODE_ENV=production && npm run build:weapp
产物输出到 miniapp/dist/(微信小程序格式,含 project.config.json)。
导入微信开发者工具
- 安装并打开 微信开发者工具(稳定版)
- 「导入项目」→ 项目目录选择
miniapp/(根目录,工具会自动识别dist/为小程序代码) - AppID 选择「测试号」(当前
project.config.json已配置touristappid,无需注册即可预览) - 勾选「不校验合法域名」以调试本地 mock(正式版无需)
- 点击「编译」即可在模拟器中预览,真机预览需将 AppID 换为自己的小程序账号
设计系统与 Web 端保持一致:Forest 森林绿 + 琥珀强调色,token 定义见
miniapp/src/styles/variables.scss。
快速开始
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览构建产物
npm run preview
部署
当前面向 Vercel(根路径)。仓库内含 vercel.json(SPA 路由回写)与 vite.config.ts 中 base: "/" 配置,推送至 Vercel 项目即可自动构建部署。
若改用 GitHub Pages 项目页,需将
vite.config.ts的base改为"/back-to-heart-bloom/"。
目录结构
src/
├── assets/ # 图片资源(教师头像 avatars/、品类图、课程图、周边产品图)
├── components/ # 通用组件(Nav、Footer、Logo、TeacherCard、Reveal)
├── data/ # mock 数据(teachers、courses)
├── pages/ # 页面(Home、Teachers、TeacherDetail、Booking、Courses、Venue)
├── App.tsx # 路由容器
└── main.tsx # 应用入口
reference/ # 平台背景、理论基础与竞品调研资料
screenshots/ # 页面截图(首页、教师、课程、预约、场地等)
文档索引
- reference/background.md:平台核心理论基础背景、品牌信息、参考文章全文与心身疗愈执行师项目全文
- reference/puyueguan-brand.md:朴悦观(五星级酒店冥想疗愈课程供应商)品牌介绍内容基准
- reference/research.md:供给侧视角竞品分析调研报告(SimplePractice、Mindbody、Zeel、Thumbtack、BetterHelp、小鹅通、美团等)