McRae Development Corp.

背景

McRae Development Corp. 是 Thunder Bay 的一家家族地产开发商。它目前的项目 Riverside on John，是 McIntyre River 沿岸由几栋四户公寓组成的小社区，分四期交付：一期已入住，二期正在招租，三、四期还在后面。

这个网站有两个任务：让一个安静、私密的小区看起来是你想住的地方，再把这份兴趣转化为真正可租户型的看房预约。同时，后续几期上线时，它不能每次都要重新设计。从设计到开发都由我一个人完成。

截图均为 3840×2160，也就是网站在 32 寸 4K 显示器上的样子。

做法

温暖、以实拍为主的设计

配色是深咖啡色、暖奶油色加一个铜色点缀，大写粗体标题，留白充足，整体要像一个高端住宅品牌，而不是一条租房广告。凡是已经建好的部分都用真实的室内照片，渲染图只用在还没建成的部分。Lenis 平滑滚动和滚动渐显让长页面有节奏感；对设置了「减少动效」的访客，这两者都会关闭。

给开发项目建模，而不是给页面建模

每一期、每个户型都只在一个带类型的数据文件里定义一次：状态、可租情况、楼层、面积、卧室和卫生间数、配置、图库和入住日期。网站的其他部分都由这份数据生成：

• 通过动态路由生成的分期页和户型页；
• 「可租户型」卡片和首页的推荐条；
• 开发时间线，其中二期被标为当前可预订的一期；
• 给搜索引擎和 AI 助手读的结构化数据。

三期开放时，只需要改数据，不用重新设计。像 2A 和 2B 这样互为镜像的户型共用一个页面，因为对租客来说它们就是同一种房子。

不会丢失的预约咨询

联系页围绕一张看房预约表单设计。每次提交都通过 Resend 发出，并且每个收件人单独发一封，团队成员之间不会看到彼此的邮箱。每条咨询还会连同邮件是否发送成功，一起写进磁盘存档和后台数据库。就算邮件服务出了状况，这条线索也还在。表单交互还会进入和后台共用的第一方统计，团队能看到访客在填到哪一步时放弃了。

为被找到而建

• 描述真实房源的结构化数据：ApartmentComplex 和 Apartment schema，包含地址、面积、卧室数、配套设施，以及带月租价格的 Offer；每个分期页和户型页都有 BreadcrumbList。这些全部从同一份数据文件生成，标记和页面内容永远不会对不上。
• canonical、llms.txt、lastmod 准确的 sitemap，以及部署时提交 IndexNow。

复用的管理后台

上线后，我把 ModBox Admin 后台移植到了这个站：线索 CRM、第一方流量统计和表单流失报表，并按这个站的预约表单字段做了调整。现在两个客户网站共用同一套运营工具。

结果与收获

已上线，运行在 mcraedevcorp.com，正在为二期招租。开发从 2026 年 6 月持续到 8 月，大约两个月的稳定提交，最后随着客户实际使用，又有一长串小而快的文案和图片调整。

• 先给业务建模。 分期开发本质上是一份会随时间变化的数据。把分期和户型放进一个带类型的数据源，让之后的每次改动都很便宜，结构化数据也包括在内。
• 一条线索不该只依赖一条送达路径。 不管邮件发没发成功，每条咨询都存档，只多几行代码，却彻底消除了「我们没收到您的消息」这类问题。
• 做一次，跨客户复用。 管理后台本来是为 ModBox 写的，稍作修改就移植了过来，第二个客户第一天就用上了成熟的工具。

技术栈与链接

网站： Next.js 15（App Router）· React 19 · TypeScript · Tailwind CSS · Lenis

线索： Resend · 咨询磁盘存档 · 第一方表单统计

SEO： Schema.org（ApartmentComplex、Apartment、Offer、BreadcrumbList）· llms.txt · IndexNow

线上： mcraedevcorp.com