GrandpaBeans — 上弗龙杜黑豆
1个月
|
设计师 & 开发者
我们为Prodromos Matenoglou设计并开发了grandpabeans.gr,这是一个双语(希腊语/英语)单页品牌叙事网站。Prodromos曾是一名物理治疗师,2019年他离开诊所,为复兴在祖父仓库中发现的被遗忘的传统种子,成为希腊唯一的商业黑豆生产商。网站以20帧定格动画主视觉开场,在完整黑豆与咬过的黑豆之间循环切换,随后通过滚动驱动的叙事展开七个章节:引言、创始人故事、收获画廊、营养概况(每100克24克蛋白质、花青素、完整氨基酸谱)、常见问题与联系方式。无数据库或框架构建——双语内容存于PHP语言文件中,路由在服务器端剥离/en/前缀,整个网站通过GSAP 3.12.5支持60帧滚动动画,并提供完整的reduced-motion降级方案。JSON-LD结构化数据涵盖Organization、LocalBusiness、Product和FAQ;llms.txt文件让品牌对AI爬虫可见。该品牌在希腊Dragons' Den(第二季第二集,ANT1,2024年1月)的亮相——获得30,000欧元交易——通过创始人的背景故事讲述,而非作为横幅展示。
技术栈
PHP
HTML5
CSS3
Vanilla JavaScript
GSAP
ScrollTrigger
Bilingual i18n
Structured Data
Responsive Design
SEO
挑战
将一段情感深厚的传承故事——祖父代代相传的种子、Dragons' Den支持的回归、独一无二的1,200米海拔垄断——转化为一个在移动端性能良好、保持无障碍且具有电影感的单页,且不依赖数据库、框架或电商堆栈。
解决方案
通过滚动编排的叙事在七个动画章节中递进推进,20帧定格动画主视觉将产品塑造成角色,零依赖的PHP路由层处理双语URL。ScrollTrigger动画遵循prefers-reduced-motion;粘性胶囊导航通过fixed定位(无transform)在iOS URL栏收起时保持锚定;JSON-LD和双语hreflang让Google和AI搜索引擎对此前在英文网络索引中缺席的品牌获得完整可见性。