这是一份提交给 Frontend Challenge - Comfort Food Edition 的 Perfect Landing 作品。 Vada pav 不是一道普通小吃。对马哈拉施特拉邦的人来说，它是值得认真捍卫的舒适食物：每个人对青酱与蒜蓉辣椒酱的比例、要不要加洋葱、哪家小推车最好吃，都有自己的执念。我想让这个页面本身就像这道菜——温热、有点混乱、是具体的而不是泛泛的。 整个站点包括一个带动画插图的 Hero 区域（连续上升的蒸汽、黄昏时分小摊的闪烁灯串、缓慢的季风雨层），一段个人故事，一条四个时刻的“与 Vada Pav 的一天”时间线，以及一个交互式核心：Vada Pav Builder。 Builder 让你切换五种真实配料——青酱、干蒜蓉辣椒酱、炸辣椒、生洋葱和 sev——无论点击顺序如何，它们都会按正确顺序堆叠在 SVG 三明治上。每当组合变化，页面会实时生成一句英文描述你的选择，同时一个动画辣度表会显示你的搭配有多辣。 在视觉上，我有意避开常见的落地页套路：奶油底配一个暖色强调色，或者一个泛用渐变英雄区。Vada pav 本身已有强烈的视觉身份，所以配色直接从这道菜里提取：炸锅的油棕黑、姜黄的金黄、辣椒的红、咖喱叶的绿，阅读区则留出温暖的奶油色。 Vada Pav Builder 是这次提交的核心，也是我对这道菜的理解：没有标准答案，只有你的组合。
打开网易新闻 查看更多图片