WorkBuddy 实操案例集

帮我可视化这份流水账数据并分析一下。
重点关注：
1. 每月收支趋势；
2. 支出分类占比；
3. 异常大额支出标注；
4. 给出 3 条可操作的省钱建议。

Build a full-screen hero section for a creative portfolio using React, Vite, Tailwind CSS, and the Figtree Google Font.

要求：
1. 三个全屏循环视频作为背景，通过 crossfade 切换，透明度过渡 1200ms；
2. 顶部导航栏：左侧导航项格式为"01 / Works"，右侧显示邮箱和实时时钟；
3. 底部内容区：左侧大字名称（200px），右侧介绍文案和 CTA 按钮；
4. 按钮 hover 效果：背景色从底部填充上来；
5. 支持平板和手机端的响应式适配；
6. prefers-reduced-motion 下禁用所有动画。

Build a full-screen hero landing page for a creative agency called "Mainframe" using React, TypeScript, Vite, and Tailwind CSS.
核心交互：
1. 全屏视频背景，不自动播放；
2. 鼠标水平移动控制视频播放进度（sensitivity = 0.8）；
3. 顶部导航：左侧 Logo + 装饰星号，中间导航链接用逗号分隔，右侧 CTA；
4. Hero 内容：模糊的介绍文字 + 打字机效果的主文案 + 圆角药丸按钮组；
5. 移动端：汉堡菜单，CSS Grid 展开动画；
6. 按钮 hover：白色填充变黑色文字。

根据我最近在微信读书中阅读的书目，推荐适配阅读氛围的歌单。
要求：
1. 先读取最近 7 天的阅读记录；
2. 分析书目的情绪基调和主题；
3. 在 QQ 音乐中匹配风格相近的歌单；
4. 输出推荐理由和歌单链接。