业务背景
客户是服务北美本地商家的 SaaS 平台(hiraccoon.com / Raccoon OS / UpDeal 后台),已上线品牌站的门店 30 多家,业态横跨餐饮、美甲、汽修、零售。每家门店都需要"自己的"官网:独立的品牌视觉、独立的菜单与服务列表、独立的地址与营业时间,但点单、预约、评价、营销这些运营能力必须完全复用。目标是新门店品牌站从签约到上线以天计,同时首屏性能和 SEO 不能妥协。
架构简述
- 前端:Next.js 静态输出(SSG),品牌站纯静态托管,首屏不依赖服务端渲染;
- 主题化:每站点独立主题 Token(主色、字体、圆角、按钮形态),同一套组件渲染出完全不同的视觉——拉面店的暗色配正红、美甲店的紫、回转寿司的红白、汽修店的黑黄、零售店的粉色动效;
- 通用骨架:What We Make / Our Story / Visit Us / Menu 导航结构,Location & Hours 页内嵌 Google Maps 与结构化营业时间表;
- 转化入口:Order online / Order Pickup / Call to Book / Reservations / Free Estimate 统一挂载,直连在线点单与预约系统;
- 信任要素:首屏评分带(4.6★ · 278+ local reviews)、数据带(8h 熬汤 / 100% 猪骨 / No MSG)、好评弹幕流与 Before & After 真实案例区,把 Google 评价资产直接变成转化组件。
代表站点

Machiya Ramen(Montréal):暗色主题 + 正红 CTA,首屏挂 4.6★ · 278+ local reviews 与 8h / 100% / No MSG 数据带。

Sichuan Alley Bistro(West Hartford):浅色头图 + 红字点缀,"Culture you can taste.",Order Online 与 Reservations 双入口。

KAISEN Kaiten Sushi Bar(Santa Ana):红白回转寿司主题,轮播头图,$2.00 起按盘色计价。

Yo2 Nail Bar(Cary):美甲业态的紫色主题,35+ 服务 / 每周 7 天 / Cary Pkwy 数据带,View Services 与 Call to Book。

Legend Sushi(Orlando):和风纸纹底 + 金墨配色,自助价格牌午市 $22.95 / 晚市 $35.95。

Carheart Auto Tech & Collision(Hillsboro):黑黄高对比,电话与免费估价双 CTA,Before & After 真实案例区。
动效、地图与信任组件

YUGO Asian Lifestyle:粉色花瓣放射动效首屏 + 全屏巨型字标,零售业态的视觉天花板。

Legend Sushi 整页:首屏价格牌之后是 ALL YOU CAN EAT 价格区,长页结构按业态自由拼装。

100 Boil Pot & Grill(Tucson):Location & Hours 页,Google Maps 嵌入 + 结构化营业时间表(含周二休息)+ Open in Maps。

Carheart 估价表单:年份/品牌/车型、保险信息、最多 6 张车损照片(浏览器端压缩后上传);背景是流动的好评弹幕信任墙。
核心业务成果
- 30 多家门店共用一套品牌站架构,新站从立项到上线以天计;
- 品牌站全静态输出,首屏无服务端等待,利于收录与分享;
- 估价表单照片在浏览器端压缩(JPG / PNG / WEBP / HEIC)后再上传,不消耗顾客流量;
- 评分带、数据带、好评弹幕、Before & After 四类信任组件跨业态复用,直接把 Google 评价资产变成转化率。
技术难点总结
- 主题隔离:主题 Token 只作用于站点作用域,避免多主题 CSS 互相污染,同时保证组件层零分支;
- 多业态复用:餐饮菜单、美甲服务、汽修估价、零售展示四类完全不同的转化路径,收敛到统一的入口组件与下单/预约接口;
- 地图与营业时间结构化:营业时间按周建模(含休息日),地图落点用 Place ID 而非坐标,避免地址变更失效;
- 动效性能:首屏花瓣放射等动效用纯 CSS/transform 实现,静态导出后依旧满帧,不拖累 LCP。








































