Balan Coffee & Roastery — A Slow-Drip Vietnamese Coffee Landing Page
Balan Coffee & Roastery — A Slow-Drip Vietnamese Coffee Landing Page
Balan Coffee & Roastery — 一款慢滴式越南咖啡落地页
Frontend Challenge Perfect Landing Submission 🍲🥧 This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing. 前端挑战“完美落地页”参赛作品 🍲🥧 这是为“前端挑战 - 治愈系美食版”所提交的“完美落地页”作品。
What I Built: I created Balan Coffee & Roastery, a polished landing page for a fictional Vietnamese comfort café in Saigon. The concept is inspired by the quiet comfort of slow phin coffee, butter toast, and small sweet treats. Rather than treating coffee as a quick purchase, I wanted the site to feel like a calm daily ritual: slow, warm, familiar, and personal. Visitors can explore the menu, learn the café story, find visiting information, and interact with a small pixel-art coffee brewing experience. 我构建了“Balan Coffee & Roastery”，这是一个为西贡一家虚构的越南治愈系咖啡馆设计的精致落地页。其设计理念灵感源自慢滴滴漏咖啡（Phin coffee）、黄油吐司和小甜点所带来的宁静舒适感。我不想将咖啡仅仅视为一种快消品，而是希望网站能传达出一种平静的日常仪式感：缓慢、温暖、熟悉且个性化。访客可以浏览菜单、了解咖啡馆的故事、查看到访信息，并体验一个小型的像素风咖啡冲煮互动。
Highlights:
- Responsive editorial-style coffee shop landing page
- Vietnamese coffee-inspired menu, story, ritual, and visit sections
- Clear navigation and accessible interactive controls
- Consistent number and price typography throughout the site
- A lightweight interactive mini-game: Pixel Phin Brew
- Dose beans into the phin
- Grind the beans
- Bloom the coffee
- Let the phin drip
- Serve the finished cup
- Built without heavy UI, game, or animation libraries
亮点：
- 响应式编辑风格的咖啡馆落地页
- 以越南咖啡为灵感的菜单、故事、仪式感及到访信息板块
- 清晰的导航与易用的交互控件
- 全站统一的数字与价格排版
- 轻量级互动小游戏：Pixel Phin Brew（像素滴漏咖啡）
- 将咖啡豆放入滴漏壶
- 研磨咖啡豆
- 闷蒸咖啡
- 等待咖啡滴滤
- 呈上成品咖啡
- 构建过程中未使用大型 UI、游戏或动画库
Demo: Live demo: Balan Coffee & Roastery Source code: GitHub repository
演示： 在线演示：Balan Coffee & Roastery 源代码：GitHub 仓库
Journey: I wanted to create something that felt more like a coffee ritual than a typical restaurant landing page. The visual direction uses warm cream tones, deep coffee browns, generous spacing, subtle texture, and an editorial layout inspired by a slow morning at a Saigon café. I paid attention to small details such as consistent tabular numerals for prices and opening hours, responsive layouts, visible interaction states, and reduced-motion support. 创作历程：我希望创造出的作品更像是一种咖啡仪式，而非典型的餐厅落地页。视觉方向采用了温暖的奶油色调、深咖啡色、宽裕的留白、细腻的纹理，以及受西贡咖啡馆慢节奏早晨启发的编辑式排版。我注重细节，例如价格和营业时间的等宽数字排版、响应式布局、可见的交互状态以及对减少动画（reduced-motion）的支持。
The feature I enjoyed building most was Pixel Phin Brew. I wanted the interaction to be understandable instead of just decorative, so each button clearly explains the next brewing action. Every correct step updates the pixel scene, progress indicator, and feedback message until the final cup is served. The project was built with React, TypeScript, Vinext/Vite, and custom CSS. I kept the implementation lightweight and avoided adding large dependencies for animation or the game. 我最享受构建的功能是“Pixel Phin Brew”。我希望交互是易于理解的，而非仅仅作为装饰，因此每个按钮都清晰地解释了下一步的冲煮动作。每一个正确的步骤都会更新像素场景、进度指示器和反馈信息，直到最后呈上咖啡。该项目使用 React、TypeScript、Vinext/Vite 和自定义 CSS 构建。我保持了实现的轻量化，避免添加用于动画或游戏的大型依赖项。
Assets and Credits: The Manhattan Café illustration assets retain the original creator watermark visible in the source files. The interface design, responsive layout, styling, interactions, and Pixel Phin Brew game were created for this submission. 资源与致谢：Manhattan Café 的插画资源保留了源文件中可见的原始创作者水印。界面设计、响应式布局、样式、交互以及 Pixel Phin Brew 游戏均为本次参赛作品原创。