博客展示

构建一个名为“镜头背后”的摄影博客区块，严格遵循以下规格：

**布局与结构：**
- 白色背景页面，最大宽度 1200px，居中，垂直内边距 60px，水平内边距 20px
- 页眉包含：一个灰色小型“博客”徽章（背景色 #f4f4f4，圆角 8px）、一个大型标题“镜头背后”（64px，Outfit 字体，字重 500，字间距 -2.5px）、一段副标题和一个“查看所有文章”按钮，后两者并排放置
- 副标题：“来自我的摄影旅程中的思考、见解和故事。带你一窥我的创作过程和近期项目。”（最大宽度 480px，颜色 #666，18px，字重 500，不透明度 0.8）
- “查看所有文章”按钮：黑色背景、白色文字、40px 圆角胶囊形状、14px 字号、字重 600，悬停时缩放至 1.02

**精选文章（全宽卡片）：**
- 两列网格（1fr 1fr），圆角 20px，1px 实线 #f0f0f0 边框，最小高度 520px，背景色 #fcfcfc
- 左侧：自动播放、循环、静音的视频，object-fit cover，填满整个区域
- 右侧：60px 内边距，包含一个黑色“必读”胶囊徽章（12px 字号，20px 圆角）、使用 Outfit 字体且字号 48px、字重 500 的标题（字间距 -1.5px）、颜色为 #666 且字号为 17px 的描述，以及通过 margin-top auto 推至底部、包含作者姓名和彩色分类徽章的页脚
- 精选文章数据：标题“全画幅与裁切画幅传感器：摄影该选哪个？”，描述“坦诚分析这些相机系统在实际使用中的差异，帮助你选择真正适合自己摄影需求的系统。”，作者“作者：August Renner (c)”，分类“器材”，颜色 #7d1a4a
- 精选视频 URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_155500_808e6fdd-761f-4acd-b3be-cb7e6e700def.mp4`

**博客网格（3 张标准卡片）：**
- 三列网格，间距 25px，位于精选文章下方
- 每张卡片：视频采用 16/10 宽高比，圆角 20px；下方是标题（Outfit 17px，字重 600），右侧对齐一个彩色分类徽章
- 卡片 1：“在意想不到的地方寻找自然光”，分类“灯光”（#2c4c34），视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_030111_a9e15665-d379-4a7f-8116-695bbe452ad1.mp4`
- 卡片 2：“我的编辑方法：打造一致的摄影风格”，分类“编辑”（#a63e2d），视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4`
- 卡片 3：“摄影定价：行之有效的策略”，分类“商业”（#1a2b8c），视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_154232_f8809bd2-a6c3-4a38-908d-2005e5b3cb3e.mp4`

**悬停交互（所有视频容器）：**
- 悬停时，视频在 0.5s 内使用 cubic-bezier(0.33, 1, 0.68, 1) 缩放至 1.08
- 悬停时，一个深色遮罩（rgba(0,0,0,0.25)）在 0.4s 内淡入
- 一个居中的“+”图标置于 70px 圆形内（背景色 rgba(255,255,255,0.2)），悬停时在 0.3s 内从 0.7 缩放至 1.0
- 每个视频的四个角都有白色“L 形”角标（12px，1.5px 边框），距离边缘 15px

**分类徽章：**
- 胶囊形状（20px 圆角）、白色文字、11px 字号、字重 600、内边距 4px 12px、首字母大写，背景颜色与每篇文章指定的颜色一致

**字体：**
- Google Fonts：正文使用 Inter（400、500、600），标题使用 Outfit（500、600、700）

**响应式：**
- 在 1024px 时：精选文章变为单列，网格变为两列，精选内容内边距为 40px
- 在 768px 时：标题降至 48px，header-bottom 改为垂直堆叠，网格变为单列，精选文章标题降至 32px

**数据源：**
- 将所有博客文章数据（type、badge、title、description、author、category、category_color、image/video URL、display_order）存储在 Supabase `blog_posts` 表中
- 动态获取并渲染，按 display_order 升序排列
- 启用 RLS，并允许 anon 和 authenticated 用户公开读取

**技术栈：**
- React + TypeScript + Vite + Tailwind CSS（仅用于基础重置，博客样式使用自定义 CSS）
- 使用 Supabase JS client 获取数据
- 所有视频均使用 autoPlay、loop、muted、playsInline 属性