提示词
构建一个名为“镜头背后”的摄影博客区块，严格遵循以下规格：
**布局与结构：**
- 白色背景页面，最大宽度 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 属性原文提示词（English）
Build a "Behind the Lens" photography blog section with the following exact specifications:
**Layout and Structure:**
- White background page, max-width 1200px, centered, 60px vertical padding, 20px horizontal padding
- Header with: a small grey "Blog" badge (bg #f4f4f4, 8px border-radius), a large heading "Behind the lens" (64px, Outfit font, weight 500, letter-spacing -2.5px), a subtitle paragraph and a "View all posts" button side by side
- Subtitle: "Thoughts, insights, and stories from my photography journey. Take a peek into my creative process and recent projects." (max-width 480px, #666 color, 18px, weight 500, opacity 0.8)
- "View all posts" button: black bg, white text, 40px border-radius pill shape, 14px font, weight 600, scales 1.02 on hover
**Featured Post (full-width card):**
- 2-column grid (1fr 1fr), 20px border-radius, 1px solid #f0f0f0 border, min-height 520px, bg #fcfcfc
- Left side: autoplaying looped muted video, object-fit cover, fills the entire area
- Right side: 60px padding, contains a black "Must Read" pill badge (12px font, 20px border-radius), title in Outfit font 48px weight 500 (letter-spacing -1.5px), description in #666 at 17px, and a footer with author name and colored category badge pushed to the bottom via margin-top auto
- Featured post data: title "Full-Frame vs. Crop Sensor: Which for Photography?", description "An honest look at the real-world differences between these camera systems to help you choose what's actually right for your photography needs.", author "By August Renner (c)", category "Gear" with color #7d1a4a
- Featured video URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_155500_808e6fdd-761f-4acd-b3be-cb7e6e700def.mp4`
**Blog Grid (3 standard cards):**
- 3-column grid, 25px gap, below the featured post
- Each card: video with 16/10 aspect ratio, 20px border-radius, title below (Outfit 17px weight 600) with a colored category badge aligned right
- Card 1: "Finding Natural Light in Unexpected Places", category "Lighting" (#2c4c34), video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_030111_a9e15665-d379-4a7f-8116-695bbe452ad1.mp4`
- Card 2: "My Approach to Editing: Creating a Consistent Photography Style", category "Editing" (#a63e2d), video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_064122_c4750c0e-7476-4b44-94a2-a85a65c63bf2.mp4`
- Card 3: "Pricing Your Photography: Strategies That Work", category "Business" (#1a2b8c), video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260507_154232_f8809bd2-a6c3-4a38-908d-2005e5b3cb3e.mp4`
**Hover Interactions (on all video containers):**
- Videos scale to 1.08 on hover with cubic-bezier(0.33, 1, 0.68, 1) over 0.5s
- A dark overlay (rgba(0,0,0,0.25)) fades in over 0.4s on hover
- A centered "+" icon inside a 70px circle (rgba(255,255,255,0.2) bg) scales from 0.7 to 1.0 on hover over 0.3s
- White "L-shaped" corner brackets (12px, 1.5px border) in all 4 corners of each video, 15px inset from edges
**Category Badges:**
- Pill shape (20px border-radius), white text, 11px font, weight 600, 4px 12px padding, capitalized, background color matches each post's assigned color
**Fonts:**
- Google Fonts: Inter (400, 500, 600) for body text, Outfit (500, 600, 700) for headings and titles
**Responsive:**
- At 1024px: featured post becomes single column, grid becomes 2 columns, featured content padding 40px
- At 768px: heading drops to 48px, header-bottom stacks vertically, grid becomes 1 column, featured title drops to 32px
**Data Source:**
- Store all blog post data (type, badge, title, description, author, category, category_color, image/video URL, display_order) in a Supabase `blog_posts` table
- Fetch and render dynamically, ordered by display_order ascending
- Enable RLS with public read access for anon and authenticated users
**Tech Stack:**
- React + TypeScript + Vite + Tailwind CSS (for base resets only, use custom CSS for the blog styles)
- Supabase JS client for data fetching
- All videos use autoPlay, loop, muted, playsInline attributes
