教会社区

创建一个移动应用展示页面，为“Christ Family Church”展示 3 个 iPhone mockups——这是一款教会网站移动端设计。使用 React Native、Expo Router、react-native-reanimated 和 Manrope 字体（字重：Light、Regular、Medium）。

**整体布局：**
- 背景颜色：`#5A4C41`
- 桌面端并排展示 3 个 iPhone frames（可水平滚动），移动端（<900px）垂直堆叠并缩放以适应屏幕
- 桌面端：40px 内边距，手机之间间隔 48px
- 移动端：20px 内边距，间隔 32px，手机缩小以适应屏幕宽度
- 每个 phone frame：黑色圆角边框内为 375x812 画板（borderRadius 50、borderWidth 2、borderColor `#2a2a2a`），带 dynamic island notch（126x36、黑色、borderRadius 18）和 home indicator bar（134x5、白色、30% 不透明度）
- frames 使用柔和阴影：`shadowColor: #000, offset: {0, 12}, opacity: 0.3, radius: 24`

**素材（均来自 framerusercontent.com）：**
- 人像照片：`https://framerusercontent.com/images/7nIpqB1Y0QYgLe70j5NmdtK5Rk.png`
- Logo（十字架图标）：`https://framerusercontent.com/images/Fr3jIzrNgNkSo8ZgFFTkpS308.png`
- 引号图标：`https://framerusercontent.com/images/DmIPflrtvNHr7mnr6k3K5Ayn8w.png`
- 星形/指南针装饰图标：`https://framerusercontent.com/images/yi0dRg7NDCZUtTbPxCa115nMU5M.png`
- Hero 图片（举手敬拜）：`https://framerusercontent.com/images/G9ZdWZubRnpc37d5d7uUzqaBqiw.png`
- 头像行：`https://framerusercontent.com/images/l3LBaTwnoXLWZd6axR7m3Q9iWeU.png`
- 箭头图标：`https://framerusercontent.com/images/zBmfi9e2hdwkTHpcMqbS61FIc3c.png`
- Screen 3 hero（牧师）：`https://framerusercontent.com/images/Q7jLZsObox26xQCiWPAVYWzTsYs.png`
- 播放按钮图标：`https://framerusercontent.com/images/3M0CPgfOsuyRxuRs37KkTOTrUM.png`

**配色：**
- 深色背景：`rgb(29, 25, 26)`
- 奶油色/金色强调色：`rgb(241, 229, 198)` / `#F1E5C6`
- 白色：`#FFFFFF`
- 深色背景上的浅色文字：`rgba(255, 255, 255, 0.77)`、`rgba(255, 255, 255, 0.6)`、`rgba(255, 255, 255, 0.5)`、`rgba(255, 255, 255, 0.3)`
- 米白色：`#F5F0E8`

**字体排版（全部使用 Manrope）：**
- 页眉中的品牌名称：17px Regular，白色，lineHeight 20
- 旋转的侧栏文字：14px，姓名使用 Medium，身份使用 Regular，letterSpacing 1.2，半透明白色
- 引文文字：20px Regular，lineHeight 27，`rgba(255,255,255,0.77)`
- 活动卡片标题：36px Medium，letterSpacing -0.5，颜色 `#1a1a1a`
- 活动卡片日期：17px Regular，`#888888`
- Hero 标题（Screen 2）：52px Light，lineHeight 52，letterSpacing -2.5，奶油色 `#F1E5C6`
- Hero 副文案：21px Regular，lineHeight 27，白色、60% 不透明度
- CTA 按钮文字：21px Medium，深色
- 章节标题“Upcoming”（Screen 3）：38px Regular，letterSpacing -0.8，白色
- 活动列表标题：21px Regular，lineHeight 26
- 活动时间：17px Regular，`#999999`
- 日期卡片中的日期：34px Medium
- 日期卡片中的月份：18px Regular
- 菜单链接：36px Light，letterSpacing -0.8，白色

**动画：**
- 每个 iPhone frame 使用 react-native-reanimated 的 `FadeIn.duration(600)` 淡入
- 所有文字均使用打字机效果（字符逐个出现），延迟和速度可配置
- 菜单浮层使用 `FadeIn.duration(200)` 淡入

**Screen 1 - 用户感言：**
- 深色背景（`rgb(29, 25, 26)`）
- 页眉：左侧为 logo（46x46）+“Christ Family Church”文字，右侧为汉堡菜单（3 条线，2 条长线 + 1 条短线），paddingTop 48，paddingHorizontal 19
- 左侧旋转文字：“Anna Miller”/“社区成员”，旋转 -90deg，位置为 left: -44、top: 115、translateX: -60
- 人像照片：位置为 top: 120、left: 125，尺寸 240x300
- 引号图标（28x24）位于 left: 19、top: 395
- 引文文字位于 left: 19、top: 440、width: 336：“我们希望成为一个大家可以彼此连接，并从基督里的友谊中获益的大家庭。”
- 底部白色卡片（高度 245）：包含“周日敬拜仪式”（36px）、“12 月 7 日，上午 10:00-11:30”、“了解更多”和箭头，以及右下角的星形图标（48x48）

**Screen 2 - Hero/落地页：**
- 完整 Hero 图片覆盖顶部 472px，带深色浮层（15% 黑色）
- 页眉与 Screen 1 相同
- 头像图片（149x53）位于 left: 19、top: 442
- 标题位于 top: 520：“向光明迈出一步”
- 副文案：“发现信仰、希望，以及灵魂的归宿”
- 底部奶油色 CTA 按钮（高度 52、bottom: 32）：“加入我们”，带箭头图标

**Screen 3 - 讲道/活动：**
- Hero 图片位于顶部：覆盖 345px 高度（width: 415、offset left: -20），带 30% 黑色浮层
- 播放按钮（65x65 圆形、奶油色背景）居中，位于 top: 175
- 白色主体区域从 top: 343 开始
- 主体内的深色条带（高度 220，`rgb(29, 25, 26)`）位于“Upcoming”标题后方
- 活动列表包含日期卡片（68x90）：
  - 12 月 14 日：“路加福音 1 | 撒迦利亚的故事” - 下午 6:30-8:00（白色日期卡片）
  - 12 月 21 日：“罗马书 15 | 单单为基督而活” - 上午 8:30-10:00（奶油色日期卡片）
  - 12 月 28 日：“罗马书 9 | 上帝的主权” - 下午 5:30-7:00（奶油色日期卡片）
  - 1 月 4 日：“约翰福音 3 | 重生”（部分显示/以 50% 不透明度淡化，奶油色日期卡片）
- 活动行之间的间隔：22px

**菜单浮层（所有 screens 共用）：**
- 全屏深色浮层（`rgb(29, 25, 26)`），z-index 100
- 页眉包含 logo + 品牌名称，以及 X 关闭按钮（两条旋转的线）
- 导航链接：首页、关于、活动、讲道、联系（36px Light）
- 链接之间的间隔：22px
- 底部奶油色 CTA“加入我们”按钮（bottom: 36）
- 每个 screen 上的汉堡按钮用于打开菜单；关闭按钮用于关闭菜单