展品集

精选 10+ 开箱即用的落地单页作品集

← 返回首页
showcase-hub · 行业分类

餐饮

餐饮门店品牌官网，菜单/预约/品牌故事

14 个单页7 个细分场景每单页附带完整源码
📋 信息型7 个

适合 B2B / 重信息密度的场景

完整导航 + Hero + 多区块内容 + 转化 CTA，数据驱动、转化导向

✨ 沉浸视觉型7 个

适合品牌展示 / 强氛围的场景

滚动驱动叙事 + 3D 场景 + 渐变光效，视觉冲击优先

🗂

经典案例

M1 首批单页，覆盖各行业通用场景

2 个单页
一席之地 - 中餐厅品牌官网
信息型

一席之地 - 中餐厅品牌官网

高端中餐厅品牌落地页，大图轮播 + 菜单卡片 + 评价滚动 + 预约 CTA，适合作为餐饮门店的标准化官网模板。

Next.jsTailwind
深夜食堂 - 日料店视差滚动页
沉浸视觉型

深夜食堂 - 日料店视差滚动页

日料店沉浸式落地页，多层视差滚动 + 菜品 3D 翻转 + 故事叙事，让用户在滚动中感受餐厅氛围。

Next.jsGSAPLenis
🍵

茶饮 / 新中式

手作茶饮、新中式茶馆的品牌表达

2 个单页
观山茶事 - 手作茶饮品牌官网
信息型

观山茶事 - 手作茶饮品牌官网

新中式手作茶饮品牌落地页，水墨淡彩背景 + 茶叶飘落粒子 + 茶汤流动动画，传递东方雅致美学。

Next.jsTailwindCanvas
云隐茶室 - 新中式茶馆沉浸页
沉浸视觉型

云隐茶室 - 新中式茶馆沉浸页

新中式茶馆沉浸视觉型落地页，水墨卷轴开屏 + 茶具微动效 + 滚动叙事，营造山中茶室意境。

Next.jsFramer MotionLenis
🍞

烘焙 / 面包

精品烘焙坊、欧包店的视觉与故事

2 个单页
麦时 - 精品烘焙坊官网
信息型

麦时 - 精品烘焙坊官网

精品烘焙坊品牌落地页，暖橙渐变 + 烤箱冒气动效 + 24 小时烘焙时间线，展示手作温度。

Next.jsTailwindCSS Animation
Lune 朗野 - 网红面包店沉浸页
沉浸视觉型

Lune 朗野 - 网红面包店沉浸页

网红欧包店沉浸视觉型落地页，自然森系背景 + 面包旋转展示 + 香气粒子飘散。

Next.jsFramer MotionCanvas
🥢

中餐厅

高端中餐、宫廷御膳的仪式感

2 个单页
御膳坊 - 高端中餐厅品牌官网
信息型

御膳坊 - 高端中餐厅品牌官网

高端中餐厅品牌落地页，朱红宫墙配色 + 卷轴菜单 + 包厢展示 + 主厨故事，传递宫廷御膳仪式感。

Next.jsTailwindCSS Animation
南屏晚 - 江南私房菜沉浸页
沉浸视觉型

南屏晚 - 江南私房菜沉浸页

江南私房菜沉浸视觉型落地页，水墨江南背景 + 灯笼浮动光晕 + 菜品特写视差，营造私房秘宴氛围。

Next.jsGSAPLenis
📦

hotpot

2 个单页
蜀香门第 - 川式火锅品牌官网
信息型

蜀香门第 - 川式火锅品牌官网

川式火锅店信息型落地页，川辣红 + 琥珀色 + 九宫格/鸳鸯/番茄牛尾 3 款锅底 + 涮菜菜单 + 主厨故事。

Next.jsTailwind
沸腾里 - 火锅沉浸视觉页
沉浸视觉型

沸腾里 - 火锅沉浸视觉页

火锅沉浸视觉型落地页，红渐变 + 沸腾蒸汽粒子 CSS 动效 + 视差滚动叙事。

Next.jsCSS Animation
📦

western

2 个单页
La Maison - 法式西餐厅官网
信息型

La Maison - 法式西餐厅官网

法式西餐厅信息型落地页，深蓝紫 + 香槟金 + 6 道主厨推荐 + 3 款套餐 + 侍酒师酒单 + 主厨故事。

Next.jsTailwind
Noir & Blanc - 黑白法餐沉浸页
沉浸视觉型

Noir & Blanc - 黑白法餐沉浸页

法餐沉浸视觉型落地页，纯黑白配色 + 灰度图像 + 光/影/白/黑 4 段叙事 + 滚动视差。

Next.jsCSS Animation
📦

japanese

2 个单页
鮨 · 一 - 寿司日料店官网
信息型

鮨 · 一 - 寿司日料店官网

寿司日料店信息型落地页，朱红 + 深灰 + 3 款 omakase 套餐 + 6 款招牌寿司 + 4 季时令鱼获 + 包厢。

Next.jsTailwind
银座夜 - 日料沉浸视觉页
沉浸视觉型

银座夜 - 日料沉浸视觉页

日料沉浸视觉型落地页，朱红渐变 + 灯笼浮动 CSS 动效 + 夜の一/二/三/四 视差叙事。

Next.jsCSS Animation