SER & BAT
两类客户，一个网站：个人业主和社会住房机构读的不是同一页。
- 年份
- 2026
- 制作周期
- 3 周
- 技术栈
- Next.js · React · Tailwind · Vercel
- 设计
- 开发
- 本地 SEO
- B2B 与 B2C 文案
- 成立年份
- 2008
- 条路径，两套说服逻辑
- 2
- Lighthouse SEO
- 100/100
需要解决的问题。
背景
SER & BAT 自 2008 年起在里昂从事室内翻新：石膏板隔墙、涂装、浴室、厨房。公司持有 QUALIBAT 资质认证，同时也为机构型房东提供服务——ICF Habitat、SACVL。
限制
两类客户毫无共同点。个人客户想看案例和工期；机构房东要的是资质认证、机构客户背书，以及承接公共采购合同的能力。一个只对其中一方说话的网站，就会失去另一方。
对策
首页明确引导至两条路径，并准备两套不同的说服逻辑。面向个人客户：作品集与报价。面向专业客户：QUALIBAT 认证、点名的客户案例和施工承接能力。两边需要的证据并不相同。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
明示两条路径
首屏即让访客明确选择：个人客户还是专业客户。猜测访客身份是一场赌博；直接询问只需一次点击，还能避免说错话。
把资质认证当作设计元素
QUALIBAT 不是被扔在页脚的一个标志，而是一个说明认证覆盖范围的独立模块。房东看得懂，个人客户也能借此学会看懂。
点名机构客户
明确列出 ICF Habitat 和 SACVL。在建筑业 B2B 市场上，一个具名案例抵得上十条泛泛的卖点。
项目配色
机构蓝
#1F4C73
品牌识别、专业客户路径
赤陶色
#B95F33
行动、个人客户路径
浅灰
#F3F5F7
背景
墨色
#1D2126
正文
字体系统
标题字体
Outfit 700
正文字体
Inter 400
用两种强调色区分两条路径，而不改变字体体系：访客无需思考就知道自己身在何处。
幕后的技术实现。
- Next.js
- React
- Tailwind
- Vercel
两套联系流程
个人客户表单询问房间和面积；专业客户表单询问合同类型和工程量。一个通用表单对两者都不合适。
网站如何被搜索到。
B2C 与 B2B 搜索词分开布局
一边是“Rénovation appartement Lyon”（里昂 公寓翻新）、“plaquiste Lyon 7”（里昂七区 石膏板工）；另一边是“entreprise rénovation bailleur social Lyon”（里昂 社会住房房东 翻新公司）、“QUALIBAT plâtrerie Rhône”（罗讷省 QUALIBAT 石膏工程）。
展示从业年限
“自 2008 年起”出现在标题和结构化标记中。在一个许多公司只成立三年的市场上，从业年限是客户会主动搜索的实力信号。
交付了哪些内容。
- 首页——路径引导
- 个人客户——案例与报价
- 专业客户——资质认证与客户案例
- 服务项目
- 公司简介（始于 2008 年）
- 联系我们
项目的推进过程。
客户细分
两类客户，两套证据。
设计
首屏引导，两条路径以不同颜色区分。
开发
两套量身定制的联系流程。
SEO
B2C 与 B2B 搜索词，从业年限与资质认证的结构化标记。
