ModBox Modular
为 Thunder Bay 模块化房屋制造商 ModBox NWO Inc. 做的官网和运营后台，服务安省西北部及原住民社区。以工厂为主角的编辑式设计，同时服务三类截然不同的访客。
背景
ModBox NWO Inc. 在 Thunder Bay 的工厂里造完整的模块化房屋，再用卡车运到安省北部各地，包括只能靠冬季冰路或驳船进出的原住民社区。
这个站从设计、前端、后端到搜索优化都由我一个人负责。它要同时对三类截然不同的访客说话：在给房子算预算的一家人、在规划教师宿舍的原住民社区住房办公室，以及在找工厂合作方的承包商。
截图均为 3840×2160，也就是网站在 32 寸 4K 显示器上的样子。
设计理念
展示工厂，不用图库素材
这家公司最有力的卖点，是每一栋房子都在 Thunder Bay 的同一座工厂里室内建造，完工后整体运走。所以设计不靠文案去说，而是直接拿出证据：首页一打开就是工厂车间的实拍视频，全站用的都是公司自己的吊车、卡车、模块和竣工建筑。
围绕三类访客来组织
网站结构就是按三类访客来搭的。自住买家去产品：木结构、轻钢和定制三大体系的目录，配产品页、户型图、参数表和 3D 模型查看器。社区客户去原住民项目，每个合作社区都有自己的案例页。商业客户去项目和定制方案。六个阶段的流程页，是写给每一个第一次买模块化房的人的。
沉稳、编辑感、北方气质
配色来自品牌本身：深海军蓝和横幅蓝，衬在温暖的米白色上。界面用 Inter，公司故事页点缀 Playfair Display 和 Newsreader 衬线字体。长页面读起来像在讲故事，而不是翻宣传册。平滑滚动、会跟随当前位置的浮动章节导航，以及在照片 hero 上自动切换深浅的页眉，让长页面也很好浏览。每个版面都从 320px 的手机一直调到 4K 显示器。
网站背后
- 线索与统计：全部第一方。表单提交存进 Postgres 并发到团队邮箱；流量统计自己做，不用 Google Analytics。
- 运营后台：线索、统计和带水印的报价链接都在一个私有后台里，单独写成了 ModBox Admin。
- 搜索与 AI 可见度：从第一天就内置。网站在北方买家真正会搜的问题上有排名，买家问 ChatGPT 和 Gemini「这一带谁造模块化房」时，官网会被引用。
结果
已上线，运行在 modboxmodular.com，是公司每天都在用的门面。线索带着完整的来龙去脉进来，团队在自己的后台里跟进，网站的搜索和 AI 可见度也在持续增长。
我从这个项目里得到的体会是：对一家制造商来说，最有说服力的设计就是证据。真实的视频、真实的交付、真实的社区项目，比任何文案都管用。
技术栈与链接
网站： Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Lenis · Leaflet · model-viewer
后端： Route Handlers · Resend · PostgreSQL