## 项目缘起：当代码遇见乡愁 "有时候，食物不仅仅是食物。"这句话是本次参赛作品"Ghar Ka Swad"（印地语意为"家的味道"）的核心设计哲学。作为一个前端开发挑战赛的参赛作品，这个落地页试图回答一个问题：一个网页能否唤起人们对家的记忆？ 答案是肯定的。Delhi的烤饼、旁遮普的rajma chawal、街角的paneer，这些印度传统美食承载着无数人的成长记忆。开发团队选择印度家常菜作为主题，正是因为这些菜肴与"家"的情感连接最为紧密。 ## 突破静态：可交互的情感体验 传统的落地页往往止步于信息的单向展示。而"Ghar Ka Swad"在交互设计上下足了功夫。其中最亮眼的创新是一个名为"Comfort Food Picker"的互动选择器——用户根据当下的 cravings（食欲渴求）选择食物类别，系统会智能推荐对应的家常菜品。 这套交互机制的设计逻辑是：**选择你的心情 → 推荐相应的美食 → 触发对应的记忆场景**。比如用户选择"想家"这个情绪，页面会优先推送 dal-chawal（豆子米饭）这样最能代表家庭日常的菜肴，并配以温暖怀旧的视觉设计。 ## 九大功能亮点 项目共包含9个核心功能模块，每个都经过精心打磨： **1. 印度风情视觉体系**：整体采用温暖色系——暖橙、藏红、奶油白，配以印度传统图案元素，营造浓郁的地域氛围。 **2. 动态美食卡片**：每道菜品都有独立卡片，包含高清视觉设计、评分和价格信息，卡片hover时带有流畅的抬升和阴影效果。 **3. 评分与定价系统**：以星级评分直观呈现菜品受欢迎程度，帮助用户快速锁定目标。 **4. 收藏交互机制**：用户可通过爱心按钮收藏喜欢的菜品，点击时有生动的动画反馈，强化互动愉悦感。 **5. 全设备响应式布局**：从桌面端到平板、手机，布局自适应无死角，确保移动端同样流畅。 **6. 平滑微动效**：从按钮悬停到卡片切换，所有交互动效保持统一节奏（持续300ms的缓动过渡），避免生硬跳转。 **7. 无障碍可访问性**：交互元素均配有ARIA标签和键盘操作支持，改善语义化标记，让残障用户也能顺畅使用。 **8. 沉浸式导航体验**：导航结构采用分层级菜单，用户可以在印度各地区美食（北印度、南印度、甜食专门区）之间自由穿梭。 **9. 数据驱动的内容组织**：所有菜品数据通过集中式JavaScript数据结构管理，便于后期扩展和维护。 ## ️ 技术路线：React驱动的开发实践 项目基于React构建，采用组件化开发模式。在技术层面，开发团队重点关注了以下几个方面： - **组件复用**：将菜品卡片、评分模块、筛选按钮等封装为独立React组件，实现一次编写、多处复用的效率提升。 - **状态管理**：利用React的useState管理交互状态，包括当前选中的食物类别、收藏列表、筛选条件等，保证界面响应及时、状态一致。 - **CSS工程化**：采用flex和grid布局构建响应式网格系统，配合CSS变量维护设计的一致性（色彩、间距、圆角等）。 - **动效优化**：使用CSS transitions和keyframes实现轻量级动画，兼顾视觉效果与性能表现。 ## 开发心得：技术与情感的双向奔赴 回顾整个开发过程，团队最大的感悟是：**技术是手段，情感才是目的**。 "Ghar Ka Swad"最初只是一个技术练习项目，但在开发过程中逐渐演变成一次关于乡愁的数字化表达。团队成员在调研阶段采访了多位远离家乡的印度朋友，了解他们最想念的家庭菜肴，这些真实故事最终都融入了项目的设计细节中——比如当用户选择"想念妈妈做的饭"这个选项时，页面会展示更感性的文案和更温暖的色调。 从技术角度而言，这个项目最大的成就是将复杂的交互功能（评分、筛选、收藏、响应式）有机整合在一个视觉统一、叙事连贯的落地页中，证明了"功能丰富"与"观感舒适"两者并不矛盾。 ## 项目链接 在线体验：ghar-ka-swad-liart.vercel.app GitHub源码：github.com/Arnavnair15/ghar-ka-swad ## 参赛类别 本文为 Frontend Challenge - Comfort Food Edition（完美落地页）赛道参赛作品。

打开网易新闻 查看精彩图片