提示词
为名为“DesignPro”的产品设计教育平台创建一个全屏 HERO 区段，具体要求如下：
背景：
使用以下精确 CloudFront URL 作为全屏循环视频背景：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4
视频应自动播放、循环、静音并以内联方式播放
背景颜色：黑色（#000000）
导航栏：
Logo：带白色边框（2px）的圆形设计，内部包含一个更小的白色实心圆，后接“DesignPro”文字
导航链接放置在带 gray-700 边框的圆角胶囊容器中：首页、关于我们、课程、讲师、学员评价、博客、联系我们（带箭头图标）
所有导航链接：white/80 opacity，hover 时变为纯白
字号：text-sm
移动端：在小于 lg 的屏幕上显示汉堡菜单图标
最大宽度：7xl 容器，并设置适当的内边距
内容布局：
顶部区段（导航栏下方）：
大屏幕采用两列布局，移动端垂直堆叠
左栏：“我们提供具有变革力的课程，帮助新兴产品设计师掌握前沿专业知识与视野，从而在全球舞台上蓬勃发展。”
右栏（在 lg+ 上右对齐）：“已助力 8000+ 名优秀设计师启航！”
两个段落：white/80 opacity，移动端 text-sm，桌面端 text-base
HERO 区段（居中）：
标题上方的小号大写文字：“下一期课程即将开放席位”（white/80 opacity，移动端 text-xs，桌面端 text-sm，紧凑字距）
主标题具体要求如下：
第 1 行：“成为”，白色，font-medium
第 2 行：“产品领导者。”，带动画闪亮渐变效果
字号：text-5xl（移动端），逐步放大至 text-9xl（xl 屏幕）
行高：0.85
字距：tracking-tighter
ShinyText Component：
使用 framer-motion 实现动画
基础颜色：#64CEFB（浅蓝色）
闪光颜色：#ffffff（白色）
动画速度：3 秒
渐变扩散角度：100 度
渐变应从左向右持续扫过文字
使用 CSS gradient，并设置 backgroundClip: text 和透明文字填充
CTA 按钮：
文字：“申请下一期课程”，带箭头图标（来自 lucide-react）
黑色背景，hover：gray-900
Rounded-full 形状
内边距：px-6 md:px-8，py-3 md:py-4
Hover 时箭头应向右平移
在箭头图标上使用 Group hover 动画
排版：
字体系列：Inter（sans-serif）
所有文字颜色：正文使用 white/80 opacity，标题和 hover 状态使用纯白
技术栈：
React + TypeScript
Vite
Tailwind CSS
使用 Framer Motion 实现动画
使用 Lucide React 提供图标
响应式断点：
移动端优先设计
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
关键 CSS 细节：
容器最大宽度：max-w-7xl，并水平居中
区段高度：h-screen
视频：absolute 定位、inset-0、object-cover
内容：relative z-10 定位，使其显示在视频上方
所有交互元素均使用平滑 transition
创建完整实现，包括具备正确 framer-motion 动画逻辑的 ShinyText component。原文提示词（English）
Create a full-screen hero section for a product design education platform called "DesignPro" with the following exact specifications:
Background:
Full-screen looping video background using this exact CloudFront URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4
Video should autoplay, loop, be muted, and play inline
Background color: black (#000000)
Navigation Bar:
Logo: Circular design with a white border (2px), containing a smaller filled white circle inside, followed by "DesignPro" text
Navigation links in a rounded pill container with gray-700 border: Home, About Us, Courses, Instructors, Testimonials, Blog, Contact us (with arrow icon)
All nav links: white/80 opacity, hover to full white
Font size: text-sm
Mobile: Show hamburger menu icon on screens smaller than lg
Max width: 7xl container with proper padding
Content Layout:
Top Section (below nav):
Two-column layout on large screens, stacked on mobile
Left column: "We deliver transformative programs that empower emerging product designers with cutting-edge expertise and vision to thrive globally."
Right column (right-aligned on lg+): "8000+ Talented Designers Launched !"
Both paragraphs: white/80 opacity, text-sm on mobile, text-base on desktop
Hero Section (center):
Small uppercase text above heading: "Seats for Next Program Opening Soon" (white/80 opacity, text-xs on mobile, text-sm on desktop, tight tracking)
Main heading with these exact specifications:
Line 1: "Become" in white, font-medium
Line 2: "Product Leader." with animated shiny gradient effect
Font sizes: text-5xl (mobile) scaling up to text-9xl (xl screens)
Line height: 0.85
Letter spacing: tracking-tighter
ShinyText Component:
Use framer-motion for animation
Base color: #64CEFB (light blue)
Shine color: #ffffff (white)
Animation speed: 3 seconds
Gradient spread: 100 degrees
Gradient should sweep across text continuously from left to right
Use CSS gradient with backgroundClip: text and transparent text fill
CTA Button:
Text: "Apply for Next Enrollment" with arrow icon (from lucide-react)
Black background, hover: gray-900
Rounded-full shape
Padding: px-6 md:px-8, py-3 md:py-4
Arrow should translate right on hover
Group hover animation on arrow icon
Typography:
Font family: Inter (sans-serif)
All text colors: white/80 opacity for body text, full white for headings and hover states
Technical Stack:
React + TypeScript
Vite
Tailwind CSS
Framer Motion for animations
Lucide React for icons
Responsive Breakpoints:
Mobile-first design
sm: 640px
md: 768px
lg: 1024px
xl: 1280px
Key CSS Details:
Container max-width: max-w-7xl with centered margins
Section height: h-screen
Video: absolute positioning, inset-0, object-cover
Content: relative z-10 positioning to appear above video
Smooth transitions on all interactive elements
Create the complete implementation including the ShinyText component with proper framer-motion animation logic.
