提示词
首屏区域创建提示词
创建一个带循环视频背景的现代首屏区域，规格如下：
视频背景：
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4
尺寸：宽度和高度均为 115%
位置：水平居中，锚定顶部，焦点为 object-top
自定义 JavaScript 淡入淡出系统（不使用 CSS transitions）：
加载或循环开始时，使用基于 requestAnimationFrame 的 250ms 淡入
视频结束前剩余 0.55 秒时进行 250ms 淡出
fadingOutRef 布尔值可防止重复的 timeUpdate 事件再次触发淡出
On ended：将 opacity 设为 0，延迟 100ms，重置为 currentTime = 0，play，然后重新淡入
每次开始新的淡入淡出时，取消正在运行的动画帧，防止动画相互冲突
淡入淡出从当前 opacity 继续（不跳变）
所需字体：
Schibsted Grotesk（字重：400、500、600、700）
Inter（字重：400、500、600、700）
Noto Sans（字重：400、500、600、700）
Fustat（字重：400、500、600、700）
导航栏：
Logo：“Logoipsum”（Schibsted Grotesk SemiBold，24px，字距 -1.44px）
菜单项（Schibsted Grotesk Medium，16px，字距 -0.2px）：
平台
功能（带下拉 chevron icon）
项目
社区
联系
右侧按钮：
“注册”（透明背景，宽 82px）
“登录”（黑色背景、白色文字，宽 101px）
内边距：水平 120px，垂直 16px
首屏内容（使用 -mt-[50px] 上移 50px）：
徽章组件：
深色徽章，带 star icon 和“新功能”文字
浅色背景，文字为：“探索无限可能”
字体：Inter Regular，14px
圆角并带细微阴影
主标题：
文字：“快速转换数据”
字体：Fustat Bold，80px，字距 -4.8px，line-height: none
颜色：黑色，居中对齐
副标题：
文字：“上传你的信息，立即获得强大洞察。更聪明地工作，轻松实现目标。”
字体：Fustat Medium，20px，字距 -0.4px
颜色：#505050
最大宽度：736px，宽度：542px
搜索输入框：
Backdrop blur 搭配深色透明背景（rgba(0,0,0,0.24)）
尺寸：最大宽度 728px，高 200px，圆角 18px
顶行：额度信息
左侧：“60/450 额度”，带绿色“升级”按钮
右侧：AI icon + “由 GPT-4o 提供支持”
字体：Schibsted Grotesk Medium，12px，白色文字
主输入区域：
白色背景，圆角 12px，带阴影
Placeholder：“输入问题...” （16px，rgba(0,0,0,0.6)）
黑色圆形提交按钮，带 up arrow icon（尺寸 36px）
底行：
左侧：三个操作按钮（灰色背景，圆角 6px）：
“附件”，带 paperclip icon
“语音”，带 microphone icon
“提示词”，带 search icon
右侧：字符计数器“0/3,000”（12px，灰色）
图标（来自导入文件的 SVG paths）：
Chevron down arrow
Up arrow
Star icon
AI sparkle icon
Attach/paperclip icon
Voice/microphone icon
Search icon
间距：
导航与首屏之间的间距：60px
标题区域与搜索框之间的间距：44px
标题区域内部元素间距：34px（徽章到标题、标题到副标题）
首屏内容上移：50px 负外边距
水平内边距：120px
配色方案：
黑色文字：#000000
灰色文字：#505050
浅灰色背景：#f8f8f8
绿色升级按钮：rgba(90,225,76,0.89)
深色徽章：#0e1311
白色：#ffffff
透明遮罩：rgba(0,0,0,0.24)
组件结构：
带自定义淡入淡出逻辑的 VideoBackground 组件
导航栏（固定间距，水平布局）
首屏内容容器（居中，带最大宽度约束）
徽章、标题区域和搜索输入框使用嵌套组件
所有元素均置于全屏视频背景之上原文提示词（English）
HERO SECTION CREATION PROMPT
Create a modern hero section with a looping video background and the following specifications:
Video Background:
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4
Size: 115% width and height
Position: Centered horizontally, anchored to top with object-top focal point
Custom JavaScript fade system (NO CSS transitions):
250ms requestAnimationFrame-based fade-in on load/loop start
250ms fade-out when 0.55 seconds remain before video end
fadingOutRef boolean prevents re-triggering fade-out from repeated timeUpdate events
On ended: opacity set to 0, 100ms delay, reset to currentTime = 0, play, fade back in
Each new fade cancels running animation frames to prevent competing animations
Fades resume from current opacity (no snapping)
Fonts Required:
Schibsted Grotesk (weights: 400, 500, 600, 700)
Inter (weights: 400, 500, 600, 700)
Noto Sans (weights: 400, 500, 600, 700)
Fustat (weights: 400, 500, 600, 700)
Navigation Bar:
Logo: "Logoipsum" (Schibsted Grotesk SemiBold, 24px, -1.44px tracking)
Menu items (Schibsted Grotesk Medium, 16px, -0.2px tracking):
Platform
Features (with dropdown chevron icon)
Projects
Community
Contact
Right side buttons:
"Sign Up" (transparent background, 82px width)
"Log In" (black background, white text, 101px width)
Padding: 120px horizontal, 16px vertical
Hero Content (moved up 50px with -mt-[50px]):
Badge Component:
Dark badge with star icon + "New" text
Light background with text: "Discover what's possible"
Font: Inter Regular, 14px
Rounded corners with subtle shadow
Main Headline:
Text: "Transform Data Quickly"
Font: Fustat Bold, 80px, -4.8px tracking, line-height: none
Color: Black, center-aligned
Subtitle:
Text: "Upload your information and get powerful insights right away. Work smarter and achieve goals effortlessly."
Font: Fustat Medium, 20px, -0.4px tracking
Color: #505050
Max-width: 736px, width: 542px
Search Input Box:
Backdrop blur with dark transparent background (rgba(0,0,0,0.24))
Dimensions: 728px max-width, 200px height, rounded 18px
Top row: Credit info
Left: "60/450 credits" with green "Upgrade" button
Right: AI icon + "Powered by GPT-4o"
Font: Schibsted Grotesk Medium, 12px, white text
Main input area:
White background, rounded 12px, shadow
Placeholder: "Type question..." (16px, rgba(0,0,0,0.6))
Black circular submit button with up arrow icon (36px size)
Bottom row:
Left: Three action buttons (gray backgrounds, rounded 6px):
"Attach" with paperclip icon
"Voice" with microphone icon
"Prompts" with search icon
Right: Character counter "0/3,000" (12px, gray)
Icons (SVG paths from imported file):
Chevron down arrow
Up arrow
Star icon
AI sparkle icon
Attach/paperclip icon
Voice/microphone icon
Search icon
Spacing:
Gap between navigation and hero: 60px
Gap between header and search box: 44px
Gap within header elements: 34px (badge to title, title to subtitle)
Hero content moved up: 50px negative margin
Horizontal padding: 120px
Color Scheme:
Black text: #000000
Gray text: #505050
Light gray backgrounds: #f8f8f8
Green upgrade button: rgba(90,225,76,0.89)
Dark badge: #0e1311
White: #ffffff
Transparent overlay: rgba(0,0,0,0.24)
Component Structure:
VideoBackground component with custom fade logic
Navigation bar (fixed spacing, horizontal layout)
Hero content container (centered, max-width constraints)
Nested components for badge, header, and search input
All elements positioned over full-screen video background
