style(footer): adjust marquee text size for better responsiveness

[dongwlin]

Summary by Sourcery

增强功能：

• 为页脚跑马灯文本使用固定的 rem 字体大小，并在中等及更大尺寸的屏幕上使用更大的字号，以提升视觉一致性。

Original summary in English

Summary by Sourcery

Enhancements:

• Use fixed rem-based font size for the footer marquee text, with a larger size on medium and larger screens to improve visual consistency.

- 更新页脚跑马灯文本大小，使用固定的 `rem` 单位，并在中等及以上视口中使用更大的字号，以获得更一致的响应式表现。

Original summary in English

Summary by Sourcery

增强功能：

• 为页脚跑马灯文本使用固定的 rem 字体大小，并在中等及更大尺寸的屏幕上使用更大的字号，以提升视觉一致性。

Original summary in English

Summary by Sourcery

Enhancements:

• Use fixed rem-based font size for the footer marquee text, with a larger size on medium and larger screens to improve visual consistency.

[sourcery-ai]

Hey - 我发现了 1 个问题，并且留下了一些高层次的反馈：

• 在两个断点都使用固定的 rem 尺寸，可能会降低在超小和超大屏幕上的灵活性；可以考虑使用带有 clamp() 的流体尺寸方案（例如 text-[clamp(2.5rem,8vw,4rem)]），这样既能保持响应式效果，又能限制极端大小。

给 AI Agent 的提示

Please address the comments from this code review:

## Overall Comments
- 在两个断点都使用固定的 `rem` 尺寸，可能会降低在超小和超大屏幕上的灵活性；可以考虑使用带有 `clamp()` 的流体尺寸方案（例如 `text-[clamp(2.5rem,8vw,4rem)]`），这样既能保持响应式效果，又能限制极端大小。

## Individual Comments

### Comment 1
<location> `app/components/Footer.tsx:26-29` </location>
<code_context>
             <span
               key={i}
-              className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30"
+              className="font-syne stroke-text cyber-gradient-text text-[4rem] font-bold text-transparent opacity-30 md:text-[9rem]"
             >
               {t("footer.marquee")}
</code_context>

<issue_to_address>
**suggestion:** 请重新考虑这里使用的固定 rem 尺寸，以确保跑马灯在非常小的屏幕上仍能保持良好的响应式表现。

使用固定的 `text-[4rem]` 作为基础，移除了之前 `text-[8vw]` 的视口缩放效果，这可能会在小屏设备上导致内容溢出/被裁剪，尤其是在水平循环滚动的跑马灯中。可以考虑：减小基础字号、在移动端使用基于 `vw` 的字号，或者添加额外的断点（例如 `sm:text-[...]`），以确保在不同屏幕尺寸下文字都保持良好的可读性。

```suggestion
            <span
              key={i}
              className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30 sm:text-[3rem] md:text-[9rem]"
            >
```
</issue_to_address>

---

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

• X
• Mastodon
• LinkedIn
• Facebook

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

Original comment in English

Hey - I've found 1 issue, and left some high level feedback:

• Using fixed rem sizes at both breakpoints may reduce flexibility across very small and very large screens; consider a fluid sizing approach with clamp() (e.g. text-[clamp(2.5rem,8vw,4rem)]) to better preserve responsiveness while still capping extremes.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Using fixed `rem` sizes at both breakpoints may reduce flexibility across very small and very large screens; consider a fluid sizing approach with `clamp()` (e.g. `text-[clamp(2.5rem,8vw,4rem)]`) to better preserve responsiveness while still capping extremes.

## Individual Comments

### Comment 1
<location> `app/components/Footer.tsx:26-29` </location>
<code_context>
             <span
               key={i}
-              className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30"
+              className="font-syne stroke-text cyber-gradient-text text-[4rem] font-bold text-transparent opacity-30 md:text-[9rem]"
             >
               {t("footer.marquee")}
</code_context>

<issue_to_address>
**suggestion:** Revisit fixed rem sizes here to ensure marquee stays responsive on very small screens.

Using a fixed `text-[4rem]` base removes the previous viewport scaling from `text-[8vw]` and may cause overflow/clipping on small devices, especially in a horizontally repeating marquee. Consider a smaller base size, a `vw`-based size for mobile, or an extra breakpoint (e.g. `sm:text-[...]`) to keep the text readable across screen sizes.

```suggestion
            <span
              key={i}
              className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30 sm:text-[3rem] md:text-[9rem]"
            >
```
</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]

suggestion: 请重新考虑这里使用的固定 rem 尺寸，以确保跑马灯在非常小的屏幕上仍能保持良好的响应式表现。

使用固定的 text-[4rem] 作为基础，移除了之前 text-[8vw] 的视口缩放效果，这可能会在小屏设备上导致内容溢出/被裁剪，尤其是在水平循环滚动的跑马灯中。可以考虑：减小基础字号、在移动端使用基于 vw 的字号，或者添加额外的断点（例如 sm:text-[...]），以确保在不同屏幕尺寸下文字都保持良好的可读性。

Suggested change

	<span
	key={i}
	className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30"
	className="font-syne stroke-text cyber-gradient-text text-[4rem] font-bold text-transparent opacity-30 md:text-[9rem]"
	>
	<span
	key={i}
	className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30 sm:text-[3rem] md:text-[9rem]"
	>

Original comment in English

suggestion: Revisit fixed rem sizes here to ensure marquee stays responsive on very small screens.

Using a fixed text-[4rem] base removes the previous viewport scaling from text-[8vw] and may cause overflow/clipping on small devices, especially in a horizontally repeating marquee. Consider a smaller base size, a vw-based size for mobile, or an extra breakpoint (e.g. sm:text-[...]) to keep the text readable across screen sizes.

Suggested change

	<span
	key={i}
	className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30"
	className="font-syne stroke-text cyber-gradient-text text-[4rem] font-bold text-transparent opacity-30 md:text-[9rem]"
	>
	<span
	key={i}
	className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30 sm:text-[3rem] md:text-[9rem]"
	>