提示词
严格按照以下说明构建一个 React 落地页。使用 React 19、Tailwind CSS v4 和 motion/react 实现动画。
1. 字体与全局 CSS 设置：
在 index.html 中导入以下 Google Fonts：
Instrument Serif（字重 400、斜体 400）
Inter（字重 100 至 900）
在 src/index.css 中为 Nokia 文本导入以下自定义字体：
@import url('https://db.onlinewebfonts.com/c/440b53b1a1c65037f944ff19259d8014?family=Nokia+Cellphone+FC+Small');
在 index.css 中配置 Tailwind 主题变量：
--font-instrument: "Instrument Serif", serif;
--font-serif: "Instrument Serif", serif;
--font-sans: "Inter", sans-serif;
--font-nokia: "Nokia Cellphone FC Small", monospace;
创建一个 @utility font-instrument { font-family: "Instrument Serif", serif; }
将根元素的 font-family 设置为 var(--font-sans)，并应用抗锯齿。
2. 组件结构：
创建一个主 App.tsx 文件，其中包含 4 个组件：TypingMessages、Navbar、Hero 和 App。
3. Navbar 组件：
容器：固定在顶部 top-6，水平居中 left-1/2 -translate-x-1/2，宽度为 95% w-[95%] max-w-5xl。z-50、pointer-events-none。
Nav 标签：pointer-events-auto、背景模糊、完整圆角胶囊形状、带 border border-black/10 的透明背景。项目两端对齐的 Flex 布局。
Logo：使用 font-instrument text-[28px] tracking-tight text-[#1a1a1a] 显示文本 "dot."。
链接："Philosophy"、"Trust"、"Access"、"Tribe"。移动端隐藏，桌面端以 flex 显示（gap-10）。font-sans text-[14px] text-[#1a1a1a]，悬停时透明度渐变。
CTA 按钮（"Link up"）：
背景色 #0871E7，完整圆角，白色文本，font-sans text-[14px]。
阴影：shadow-[inset_0_-4px_4px_rgba(255,255,255,0.39)] outline-1 outline-[#0871E7] -outline-offset-1。
在按钮内部使用一个绝对定位的矩形添加细微的顶部闪光效果：w-[80%] h-4 left-[10%] top-[1px] bg-gradient-to-b from-[#DEF0FC] to-transparent rounded-[12px]。group 悬停时让它横向放大（group-hover:scale-x-105）。
4. Hero 组件：
容器：min-h-screen bg-[#F3F4ED] pt-24 md:pt-32，纵向 flex 居中。
视频背景：绝对定位 inset-0 z-0。使用 HTML5 <video>，设置为 autoplay、loop、muted、playsInline，并通过 object-cover 缩放。
视频源：必须完全使用 https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_054418_a6d194f0-ac86-4df9-abe5-ded73e596d7c.mp4。叠加一个使用 bg-white/5 的空 div，形成轻微色调覆盖。
Hero 文本容器：Relative z-20、pointer-events-none、文本居中布局。
主标题："Short notes. <br /> Daily calm."
使用 motion.div 制作动画（在 1.5s 内从 opacity: 0、scale: 0.95 变为 opacity: 1、scale: 1，ease 为 [0.16, 1, 0.3, 1]）。
样式：font-instrument text-[38px] md:text-[56px] lg:text-[72px] leading-[0.85] tracking-tight text-[#1a1a1a] mb-6。
副标题："Linked with a single anonymous peer. One message every day. A quiet rhythm in the digital noise."
使用 motion.div 制作动画（在 1.2s 内从 opacity: 0、y: 20 变为 opacity: 1、y: 0，delay: 0.3，ease 为 [0.16, 1, 0.3, 1]）。
样式：font-sans text-[16px] md:text-[18px] text-[#1a1a1a]/70 leading-relaxed font-normal max-w-xl mx-auto。
在 Hero 中包含 TypingMessages 组件，使其叠加在视频里的手机屏幕上。
5. TypingMessages 组件：
逻辑：循环显示消息数组：["Are you here?", "Yes, I am.", "Speak soon."]。
输入速度：100ms。删除速度：50ms。删除前暂停：2000ms。
定位：使用绝对定位，使其完美贴合视频中的手机屏幕：
absolute left-[48.5%] md:left-[47.5%] lg:left-[48.5%] -translate-x-1/2 bottom-[32%] z-30 w-[110px] sm:w-[130px] flex justify-start text-left。
文本样式：font-nokia text-[#2A3616] text-[10px] sm:text-[14px] leading-tight break-words min-h-[1.5em]。
光标：添加一个闪烁的 Framer Motion 光标 motion.span（w-1.5 h-3 bg-[#2A3616] ml-1 align-middle），让 opacity 在 0.8s 内从 0 变为 1 再变为 0，以线性方式无限重复。原文提示词（English）
Build a React landing page exactly as specified below. Use React 19, Tailwind CSS v4, and motion/react for animations.
1. Fonts & Global CSS Setup:
In index.html, import these Google Fonts:
Instrument Serif (weights 400, italic 400)
Inter (weights 100 to 900)
In src/index.css, import this custom font for the Nokia text:
@import url('https://db.onlinewebfonts.com/c/440b53b1a1c65037f944ff19259d8014?family=Nokia+Cellphone+FC+Small');
Configure the Tailwind theme variables in index.css:
--font-instrument: "Instrument Serif", serif;
--font-serif: "Instrument Serif", serif;
--font-sans: "Inter", sans-serif;
--font-nokia: "Nokia Cellphone FC Small", monospace;
Create a @utility font-instrument { font-family: "Instrument Serif", serif; }
Set the root font-family to var(--font-sans) and apply anti-aliasing.
2. Component Structure:
Create one main App.tsx file containing 4 components: TypingMessages, Navbar, Hero, and App.
3. Navbar Component:
Container: Fixed to the top top-6, centered horizontally left-1/2 -translate-x-1/2, width 95% w-[95%] max-w-5xl. z-50, pointer-events-none.
Nav Tag: pointer-events-auto, backdrop blur, rounded full pill shape, transparent background with border border-black/10. Flex between items.
Logo: Text "dot." using font-instrument text-[28px] tracking-tight text-[#1a1a1a].
Links: "Philosophy", "Trust", "Access", "Tribe". Hidden on mobile, flex on desktop (gap-10). font-sans text-[14px] text-[#1a1a1a] with hover opacity fading.
CTA Button ("Link up"):
Background #0871E7, rounded full, white text font-sans text-[14px].
Shadow: shadow-[inset_0_-4px_4px_rgba(255,255,255,0.39)] outline-1 outline-[#0871E7] -outline-offset-1.
Add a subtle top glint effect using an absolutely positioned rectangle inside the button: w-[80%] h-4 left-[10%] top-[1px] bg-gradient-to-b from-[#DEF0FC] to-transparent rounded-[12px]. Make it scale wider on group hover (group-hover:scale-x-105).
4. Hero Component:
Container: min-h-screen bg-[#F3F4ED] pt-24 md:pt-32 flex column centered.
Video Background: Absolute positioning inset-0 z-0. Use an HTML5 <video> set to autoplay, loop, muted, playsInline, scaling with object-cover.
Video Source: EXACTLY https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_054418_a6d194f0-ac86-4df9-abe5-ded73e596d7c.mp4. Add an overlaid empty div with bg-white/5 for a slight tint.
Hero Text Container: Relative z-20, pointer-events-none, text-centered layout.
Main Headline: "Short notes. <br /> Daily calm."
Animate using motion.div (from opacity: 0, scale: 0.95 to opacity: 1, scale: 1 over 1.5s with ease [0.16, 1, 0.3, 1]).
Style: font-instrument text-[38px] md:text-[56px] lg:text-[72px] leading-[0.85] tracking-tight text-[#1a1a1a] mb-6.
Sub-headline: "Linked with a single anonymous peer. One message every day. A quiet rhythm in the digital noise."
Animate using motion.div (from opacity: 0, y: 20 to opacity: 1, y: 0 over 1.2s, delay: 0.3, ease [0.16, 1, 0.3, 1]).
Style: font-sans text-[16px] md:text-[18px] text-[#1a1a1a]/70 leading-relaxed font-normal max-w-xl mx-auto.
Include the TypingMessages component inside the hero to overlap on the phone screen in the video.
5. TypingMessages Component:
Logic: Cycle through an array of messages: ["Are you here?", "Yes, I am.", "Speak soon."].
Typing speed: 100ms. Deleting speed: 50ms. Pause before deleting: 2000ms.
Positioning: Absolute position it to sit perfectly on the phone screen inside the video:
absolute left-[48.5%] md:left-[47.5%] lg:left-[48.5%] -translate-x-1/2 bottom-[32%] z-30 w-[110px] sm:w-[130px] flex justify-start text-left.
Text Style: font-nokia text-[#2A3616] text-[10px] sm:text-[14px] leading-tight break-words min-h-[1.5em].
Cursor: Add a blinking Framer Motion cursor motion.span (w-1.5 h-3 bg-[#2A3616] ml-1 align-middle) animating opacity from 0 to 1 to 0 over 0.8s, repeating infinitely, linearly.
