提示词
创建一个移动应用展示页面，为“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 上的汉堡按钮用于打开菜单；关闭按钮用于关闭菜单原文提示词（English）
Create a mobile app showcase page displaying 3 iPhone mockups for "Christ Family Church" -- a church website mobile design. Use React Native with Expo Router, react-native-reanimated, and Manrope font (weights: Light, Regular, Medium).
**General layout:**
- Background color: `#5A4C41`
- 3 iPhone frames shown side by side on desktop (horizontal scroll), stacked vertically on mobile (<900px) with scale-to-fit
- Desktop: 40px padding, 48px gap between phones
- Mobile: 20px padding, 32px gap, phones scale down to fit screen width
- Each phone frame: 375x812 artboard inside a black rounded frame (borderRadius 50, borderWidth 2, borderColor `#2a2a2a`), with dynamic island notch (126x36, black, borderRadius 18) and home indicator bar (134x5, white 30% opacity)
- Soft shadow on frames: `shadowColor: #000, offset: {0, 12}, opacity: 0.3, radius: 24`
**Assets (all from framerusercontent.com):**
- Portrait photo: `https://framerusercontent.com/images/7nIpqB1Y0QYgLe70j5NmdtK5Rk.png`
- Logo (cross icon): `https://framerusercontent.com/images/Fr3jIzrNgNkSo8ZgFFTkpS308.png`
- Quote mark icon: `https://framerusercontent.com/images/DmIPflrtvNHr7mnr6k3K5Ayn8w.png`
- Star/compass decorative icon: `https://framerusercontent.com/images/yi0dRg7NDCZUtTbPxCa115nMU5M.png`
- Hero image (hands raised worship): `https://framerusercontent.com/images/G9ZdWZubRnpc37d5d7uUzqaBqiw.png`
- Avatars row: `https://framerusercontent.com/images/l3LBaTwnoXLWZd6axR7m3Q9iWeU.png`
- Arrow icon: `https://framerusercontent.com/images/zBmfi9e2hdwkTHpcMqbS61FIc3c.png`
- Screen 3 hero (preacher): `https://framerusercontent.com/images/Q7jLZsObox26xQCiWPAVYWzTsYs.png`
- Play button icon: `https://framerusercontent.com/images/3M0CPgfOsuyRxuRs37KkTOTrUM.png`
**Color palette:**
- Dark background: `rgb(29, 25, 26)`
- Cream/gold accent: `rgb(241, 229, 198)` / `#F1E5C6`
- White: `#FFFFFF`
- Light text on dark: `rgba(255, 255, 255, 0.77)`, `rgba(255, 255, 255, 0.6)`, `rgba(255, 255, 255, 0.5)`, `rgba(255, 255, 255, 0.3)`
- Off-white: `#F5F0E8`
**Typography (all Manrope):**
- Brand name in header: 17px Regular, white, lineHeight 20
- Rotated sidebar text: 14px, Medium (name) and Regular (role), letterSpacing 1.2, half-transparent white
- Quote text: 20px Regular, lineHeight 27, `rgba(255,255,255,0.77)`
- Event card title: 36px Medium, letterSpacing -0.5, color `#1a1a1a`
- Event card date: 17px Regular, `#888888`
- Hero headline (Screen 2): 52px Light, lineHeight 52, letterSpacing -2.5, cream color `#F1E5C6`
- Hero subtext: 21px Regular, lineHeight 27, white 60% opacity
- CTA button text: 21px Medium, dark color
- Section title "Upcoming" (Screen 3): 38px Regular, letterSpacing -0.8, white
- Event list titles: 21px Regular, lineHeight 26
- Event times: 17px Regular, `#999999`
- Date card day: 34px Medium
- Date card month: 18px Regular
- Menu links: 36px Light, letterSpacing -0.8, white
**Animations:**
- Each iPhone frame fades in with `FadeIn.duration(600)` using react-native-reanimated
- All text uses a typewriter effect (characters appear one by one) with configurable delay and speed
- Menu overlay fades in with `FadeIn.duration(200)`
**Screen 1 - Testimonial:**
- Dark background (`rgb(29, 25, 26)`)
- Header: logo (46x46) + "Christ Family Church" text on left, hamburger menu (3 lines, 2 long + 1 short) on right, paddingTop 48, paddingHorizontal 19
- Rotated text on left side: "Anna Miller" / "Community Member" rotated -90deg, positioned at left: -44, top: 115, translateX: -60
- Portrait photo: positioned at top: 120, left: 125, size 240x300
- Quote icon (28x24) at left: 19, top: 395
- Quote text at left: 19, top: 440, width: 336: "We want to be a family where people can connect and benefit from friendships in Christ."
- White card at bottom (height 245): contains "Sunday Worship Service" (36px), "Dec 7th, 10-11:30am", "Learn more" with arrow, star icon (48x48) bottom-right
**Screen 2 - Hero/Landing:**
- Full hero image covering top 472px with dark overlay (15% black)
- Same header as Screen 1
- Avatars image (149x53) at left: 19, top: 442
- Headline at top: 520: "Take a step toward the light"
- Subtext: "Discover faith, hope, and a home for your soul"
- Cream CTA button at bottom (height 52, bottom: 32): "Join us" with arrow icon
**Screen 3 - Sermons/Events:**
- Hero image at top: covers 345px height (width: 415, offset left: -20), with 30% black overlay
- Play button (65x65 circle, cream background) centered at top: 175
- White body section starting at top: 343
- Dark band inside body (height 220, `rgb(29, 25, 26)`) behind "Upcoming" title
- Events list with date cards (68x90):
- 14 Dec: "Luke 1 | A Story From Zechariah" - 6:30 - 8:00 pm (white date card)
- 21 Dec: "Romans 15 | Living For Christ Alone" - 8:30 - 10:00 am (cream date card)
- 28 Dec: "Romans 9 | The Sovereignty Of God" - 5:30 - 7:00 pm (cream date card)
- 4 Jan: "John 3 | Born Again" (partial/faded at 50% opacity, cream date card)
- Gap between event rows: 22px
**Menu overlay (shared across all screens):**
- Full-screen dark overlay (`rgb(29, 25, 26)`), z-index 100
- Header with logo + brand name and X close button (two rotated lines)
- Navigation links: Home, About, Events, Sermons, Contact (36px Light)
- Gap between links: 22px
- Cream CTA "Join us" button at bottom (bottom: 36)
- Hamburger button on each screen opens the menu; close button dismisses it视频地址
