feat: 首页UI换新

[Aliothmoon]

Summary by Sourcery

焕新首页主视觉区域，采用全新居中视觉设计和简化布局，更加突出排版和下载操作。

增强内容：

• 重新设计主视觉背景，加入柔和的极光光晕、细腻的网格、HUD 风格点缀，以及更精致的水印与粒子效果。
• 将主视觉布局重构为单一居中列，并更新字体排版、间距和装饰元素，使整体呈现更加简洁现代。
• 优化主下载按钮与次级下载按钮的样式和动效，提升在各类设备上的响应性和视觉层级。
• 移除主视觉区域中单独的交互式 3D 模型面板，以简化首屏（above-the-fold）体验。

Original summary in English

Summary by Sourcery

Refresh the homepage hero section with a new centered visual design and simplified layout focused on typography and download actions.

Enhancements:

• Redesign the hero background with soft aurora glows, subtle grids, HUD-style accents, and refined watermark and particle effects.
• Rework the hero layout into a single centered column, updating typography, spacing, and decorative elements for a cleaner, more modern presentation.
• Refine primary and secondary download button styles and animations, improving responsiveness and visual hierarchy across devices.
• Remove the separate interactive 3D model panel from the hero to simplify the above-the-fold experience.

[sourcery-ai]

Hey - 我发现了两个问题，并给出了一些整体性的反馈：

• 新的水印使用了 text-black/1.5 和 dark:text-white/1.5，这些并不是合法的 Tailwind 透明度工具类，会被忽略；建议使用合法的取值（例如 text-black/5，或者类似 text-black/[0.03] 这样的任意透明度值）来实现你期望的细微效果。
• 你在背景 HUD 元素中引入了 framer-motion 动画；建议结合 prefers-reduced-motion（或提供一个动画开关）进行控制，以避免对偏好减少动画的用户或低功耗设备造成不必要的动画负担。

给 AI Agent 的提示

Please address the comments from this code review:

## Overall Comments
- The new watermark uses `text-black/1.5` and `dark:text-white/1.5`, which aren’t valid Tailwind opacity utilities and will be ignored; consider using a valid value (e.g. `text-black/5`, or an arbitrary opacity like `text-black/[0.03]`) to get the intended subtle effect.
- You’ve introduced `framer-motion` animations in the background HUD elements; consider gating these with `prefers-reduced-motion` (or a motion toggle) to avoid unnecessary animation for users who prefer reduced motion or on low-power devices.

## Individual Comments

### Comment 1
<location> `app/components/hero/BackgroundLayer.tsx:17` </location>
<code_context>
+      <div className="absolute bottom-[-10%] left-[20%] h-[40vh] w-[60vw] rounded-full bg-[#FFD000]/5 blur-[120px] dark:bg-[#FFD000]/10" />
+
+      {/* Subtle Technical Grid Overlay - very soft */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#00000003_1px,transparent_1px),linear-gradient(to_bottom,#00000003_1px,transparent_1px)] bg-size-[4rem_4rem] dark:bg-[linear-gradient(to_right,#ffffff02_1px,transparent_1px),linear-gradient(to_bottom,#ffffff02_1px,transparent_1px)]" />
+
+      {/* Modern Sci-Fi HUD Accents */}
</code_context>

<issue_to_address>
**issue (bug_risk):** The `bg-size-[4rem_4rem]` utility is likely not a valid Tailwind class and may be silently ignored.

The previous `bg-[size:6rem_6rem]` used valid arbitrary property syntax. `bg-size-[4rem_4rem]` is not a standard Tailwind utility and likely won’t generate CSS unless you have a custom plugin. Consider reverting to `bg-[size:4rem_4rem]` (or another valid arbitrary property form) to ensure the background sizing works as intended.
</issue_to_address>

### Comment 2
<location> `app/components/hero/BackgroundLayer.tsx:48` </location>
<code_context>
-      <div className="absolute top-24 right-8 font-mono text-[10px] text-black/40 dark:text-white/30">
-        ID: MaaEnd-V1-RELEASE
+      {/* Elegant Large Watermark - subtle integration */}
+      <div className="pointer-events-none absolute top-1/2 left-1/2 z-0 -translate-x-1/2 -translate-y-1/2 text-[8vw] font-black tracking-tighter text-black/1.5 dark:text-white/1.5">
+        MaaEnd
       </div>
</code_context>

<issue_to_address>
**issue (bug_risk):** The `text-black/1.5` and `dark:text-white/1.5` opacity modifiers are outside Tailwind’s expected range and may not compile as intended.

Tailwind opacity modifiers use 0–100 suffixes (e.g. `/5`, `/10`, `/50`) or arbitrary values in brackets (e.g. `text-black/[0.15]`). `/1.5` won’t map to a valid class. For a subtle watermark, consider `text-black/[0.02]` and `dark:text-white/[0.02]` instead, matching your earlier approach.
</issue_to_address>

---

Sourcery 对开源项目免费——如果你觉得我们的代码审查有帮助，欢迎分享 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮我变得更有用！请对每条评论点击 👍 或 👎，我会根据你的反馈改进后续的代码审查。}

Original comment in English

Hey - I've found 2 issues, and left some high level feedback:

• The new watermark uses text-black/1.5 and dark:text-white/1.5, which aren’t valid Tailwind opacity utilities and will be ignored; consider using a valid value (e.g. text-black/5, or an arbitrary opacity like text-black/[0.03]) to get the intended subtle effect.
• You’ve introduced framer-motion animations in the background HUD elements; consider gating these with prefers-reduced-motion (or a motion toggle) to avoid unnecessary animation for users who prefer reduced motion or on low-power devices.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The new watermark uses `text-black/1.5` and `dark:text-white/1.5`, which aren’t valid Tailwind opacity utilities and will be ignored; consider using a valid value (e.g. `text-black/5`, or an arbitrary opacity like `text-black/[0.03]`) to get the intended subtle effect.
- You’ve introduced `framer-motion` animations in the background HUD elements; consider gating these with `prefers-reduced-motion` (or a motion toggle) to avoid unnecessary animation for users who prefer reduced motion or on low-power devices.

## Individual Comments

### Comment 1
<location> `app/components/hero/BackgroundLayer.tsx:17` </location>
<code_context>
+      <div className="absolute bottom-[-10%] left-[20%] h-[40vh] w-[60vw] rounded-full bg-[#FFD000]/5 blur-[120px] dark:bg-[#FFD000]/10" />
+
+      {/* Subtle Technical Grid Overlay - very soft */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#00000003_1px,transparent_1px),linear-gradient(to_bottom,#00000003_1px,transparent_1px)] bg-size-[4rem_4rem] dark:bg-[linear-gradient(to_right,#ffffff02_1px,transparent_1px),linear-gradient(to_bottom,#ffffff02_1px,transparent_1px)]" />
+
+      {/* Modern Sci-Fi HUD Accents */}
</code_context>

<issue_to_address>
**issue (bug_risk):** The `bg-size-[4rem_4rem]` utility is likely not a valid Tailwind class and may be silently ignored.

The previous `bg-[size:6rem_6rem]` used valid arbitrary property syntax. `bg-size-[4rem_4rem]` is not a standard Tailwind utility and likely won’t generate CSS unless you have a custom plugin. Consider reverting to `bg-[size:4rem_4rem]` (or another valid arbitrary property form) to ensure the background sizing works as intended.
</issue_to_address>

### Comment 2
<location> `app/components/hero/BackgroundLayer.tsx:48` </location>
<code_context>
-      <div className="absolute top-24 right-8 font-mono text-[10px] text-black/40 dark:text-white/30">
-        ID: MaaEnd-V1-RELEASE
+      {/* Elegant Large Watermark - subtle integration */}
+      <div className="pointer-events-none absolute top-1/2 left-1/2 z-0 -translate-x-1/2 -translate-y-1/2 text-[8vw] font-black tracking-tighter text-black/1.5 dark:text-white/1.5">
+        MaaEnd
       </div>
</code_context>

<issue_to_address>
**issue (bug_risk):** The `text-black/1.5` and `dark:text-white/1.5` opacity modifiers are outside Tailwind’s expected range and may not compile as intended.

Tailwind opacity modifiers use 0–100 suffixes (e.g. `/5`, `/10`, `/50`) or arbitrary values in brackets (e.g. `text-black/[0.15]`). `/1.5` won’t map to a valid class. For a subtle watermark, consider `text-black/[0.02]` and `dark:text-white/[0.02]` instead, matching your earlier approach.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue (bug_risk): bg-size-[4rem_4rem] 这个工具类很可能不是合法的 Tailwind 类名，可能会被悄悄忽略。

之前的 bg-[size:6rem_6rem] 使用的是合法的任意属性语法。bg-size-[4rem_4rem] 并不是标准的 Tailwind 工具类，如果没有自定义插件，大概率不会生成对应的 CSS。建议改回 bg-[size:4rem_4rem]（或使用其他合法的任意属性形式），以确保背景尺寸按预期工作。

Original comment in English

issue (bug_risk): The bg-size-[4rem_4rem] utility is likely not a valid Tailwind class and may be silently ignored.

The previous bg-[size:6rem_6rem] used valid arbitrary property syntax. bg-size-[4rem_4rem] is not a standard Tailwind utility and likely won’t generate CSS unless you have a custom plugin. Consider reverting to bg-[size:4rem_4rem] (or another valid arbitrary property form) to ensure the background sizing works as intended.

[sourcery-ai]

issue (bug_risk): text-black/1.5 和 dark:text-white/1.5 这两个不透明度修饰符超出了 Tailwind 允许的范围，可能无法按预期编译。

Tailwind 的不透明度修饰符使用 0–100 的后缀（例如 /5、/10、/50），或者使用方括号包裹的任意值（例如 text-black/[0.15]）。/1.5 不会映射到合法的类名。对于需要非常细微效果的水印，可以考虑使用 text-black/[0.02] 和 dark:text-white/[0.02]，与之前的做法保持一致。

Original comment in English

issue (bug_risk): The text-black/1.5 and dark:text-white/1.5 opacity modifiers are outside Tailwind’s expected range and may not compile as intended.

Tailwind opacity modifiers use 0–100 suffixes (e.g. /5, /10, /50) or arbitrary values in brackets (e.g. text-black/[0.15]). /1.5 won’t map to a valid class. For a subtle watermark, consider text-black/[0.02] and dark:text-white/[0.02] instead, matching your earlier approach.