← 返回作品集

CINEMATIC STUDIO

电影感工作室网站。

把工作室官网的视觉与内容框架,整理成可以自由定制的开源模板。

网站设计开源模板Next.js / React双语与主题内容管理
查看 GitHub 源码 ↗
以已有工作室官网为基础,移除公司身份资料和真实项目素材,保留首页、服务、案例、新闻、联系与内容管理框架,整理成一个可独立使用的双语网站模板。通过黑金视觉、响应式布局和可替换内容,让创作工作室有一个完整的展示入口。
01

为什么整理

让已有的网站框架能够被继续使用。把公司专属资料与通用页面结构分开,用示例内容替换原有资料,方便其他创作者在此基础上搭建自己的展示网站。

02

页面与视觉

保留顶部导航、服务下拉菜单、案例和新闻页面,以及服务详情和联系页面。界面支持中英文、黑金与浅蓝主题;首屏使用电影感雕塑空间,服务区使用金色织物、蓝色玻璃结构和暖色工作坊配图。图片由 AI 生成,用作通用示例。

03

内容管理

后台可编辑服务、案例、合作品牌、首屏视频和联系设置,并管理上传素材。登录需要自行配置密码与密钥;联系信息收集和外部课程接口默认关闭,使用时按实际需求启用。

04

技术实现

使用 Next.js、React、TypeScript 与 Tailwind CSS,结合 Framer Motion 和 Lenis 处理页面动效。配图压缩为 WebP,移动端单独调整首屏裁切,并保留键盘操作和减少动态效果的支持。

05

开源与当前状态

以 MIT 协议公开源码,提供运行、配置和部署说明,并记录 AI 配图提示词。开源版不包含原公司项目与个人资料,默认案例和新闻为空;代码检查、自动测试与构建已通过。内容数据使用本地 JSON 和文件,适合单实例部署。