MarketHeroCarousel
Production：src/app/[locale]/trending/components/HeroCardCarousel/HeroCardCarouselView.tsx
Installation
import { MarketHeroCarousel } from "@/components/product/market-hero-carousel/market-hero-carousel";Overview
Trending 頁頂部的 hero 輪播卡，Route-2 DOM transplant：結構與全部 styling class 逐字搬自 production（app.opinion.trade/trending 的 HeroCardCarouselView），色彩經 live-bridge 解析 Ethan 的 Live DS token（bg-card-bg / text-bodyM / sport-team-a ...）。整張 slide 是 一個連結；outcome pills 為 display-only。自動輪播 5s，hover 暫停， dots 與前後 slide 標題 chips 可手動切換。v1 涵蓋 featured 與 sport-lines 兩種 slide；crypto（倒數 + number-flow）為已知缺口。
Interactive Demo
自動輪播中（hover 卡片會暫停）；點 dots 或右下角前後 chips 切換 slide。
Featured Slide
Static — photo cover + outcome legend + mock kline
Sport Lines Slide
Static — unselected
Static — home pill selected (data-selected)
Pill / Chip States
1X2 pills 的 selected 狀態以 data-selected 模擬（solid 底 + 黑字， 同 live 的 hover/active 視覺）；Draw / away 各 family 對照如下。 line action chips selected = brand-2 底 + brand-main 字。
Draw selected
Away selected
Flag vs Logo (Next Step)
⚠️ 提案，線上 hero 尚未採用。網球等以國旗代表選手的賽事進 hero 時，flagcdn 的橫向國旗放進白圈 contain 會上下留白（與 /sports/wta 列表同一個問題）。此處把 MatchCard 已驗證的 dual treatment 帶進 TeamCircle。兩種 treatment 是同一個容器下的 互補分工，不是取捨——依圖片性質自動分流（來源 URL 優先、 aspect ratio > 1.2 備援，零 metadata）。完整 spec 見 docs/handoff/sports-flag-image-treatment.md。
| 隊徽 Logo — 白底徽章（live 現況，維持） | 國旗 Flag — 滿版色塊（提案） | |
|---|---|---|
| 圖片本質 | 輪廓型圖形——形狀不規則、常帶透明背景，裁掉一角就不完整 | 色面——整面都是內容，置中裁切不損辨識（Sofascore / FotMob 慣例） |
| Fit / 留白 | object-contain + padding 呼吸空間，禁止裁切 | object-cover 置中裁切、無 padding、貼滿容器 |
| 背景 / 邊線 | 白色圓底（raw bg-[#fff]，刻意避開 .live-scope 反轉）提供對比 | 無底色；ring-card-border inset hairline 防白色旗面融進深色卡 |
| 來源 | api-sports 150×150 正方形合成圖、league logo fallback | flagcdn（產品內國旗唯一來源） |
| 狀態 | live 已上線，此提案完全不動它 | 提案——MatchCard（28px chip）已驗證，此處延伸到 hero 圓形 |
對照 — 同一規則下兩種來源自動分流
隊徽 → 白圈 contain
國旗現況 → 留白 ❌
國旗提案 → 滿版 ✅
實作示範 A — 隊徽路徑（預設）：真俱樂部徽章 → 白圈 contain
實作示範 B — 國旗路徑（提案）：WTA 2-way → 滿版 cover 圓
Implementation Notes
來源：2026-07-08 對 app.opinion.trade/trending 的 runtime DOM snapshot（三種 slide + 控制列）。與 live 的既知差異： font-monospace → font-number（同為 Space Mono）、rounded-25 省略（computed 為 full）、data-active → data-selected、圖表為 靜態 mock path（live 為 recharts 即時資料）。
缺口（後續輪次）：crypto slide（現價 + 倒數 + number-flow）、 swipe 手勢、真實 kline 資料接入。背景紋理 webp 與市場圖 / 隊徽為 production 資產 hotlink。