DesignPro Academy

为名为“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。