docs: update vibe stories content and homepage crop
This commit is contained in:
sanbuphy
@@ -167,6 +167,7 @@ Easy-Vibe teaches you how to turn that into a real product.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **Vibe Stories launched and upgraded with real user journeys**: Added a new homepage Vibe Stories section with an interactive carousel and dedicated story pages, then replaced placeholder content with four real user stories featuring a rural primary school teacher, a college student, a high school IT teacher, and a truck driver who built real products with AI.
|
||||
- **[2026-03-26]** 🚀 **Major Stage 2 practice update**: Completed the SaaS capstone project "Your First SaaS Full-Stack App: Copywriting Generator Website" and substantially expanded the "How to integrate Stripe and payment systems" section, plus key content around multi-product UI and WeChat Mini Program backend workflows.
|
||||
- **[2026-03-25]** 📚 **New appendix: User Research and Requirement Validation**: Added four new articles covering idea sourcing, the Double Diamond model, Jobs to Be Done, and The Mom Test to help beginners discover and validate product ideas.
|
||||
- **[2026-03-25]** 📚 **English documentation fully updated**: Stage 2 (Full-stack Development) and Stage 3 (Advanced Development) are now fully available in English.
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe يعلمك كيف تحول ذلك إلى منتج حقيقي.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **إطلاق قسم قصص المستخدمين وتحديثه بأربع قصص حقيقية**: أضفنا في الصفحة الرئيسية شريط قصص تفاعليًا وصفحات مستقلة للقصص، ثم استبدلنا المحتوى المؤقت بأربع قصص حقيقية لمدرسة ريفية وطالبة جامعية ومعلم تقنية معلومات في الثانوية وسائق شاحنة بنوا منتجات حقيقية باستخدام الذكاء الاصطناعي.
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe zeigt dir, wie daraus ein echtes Produkt wird.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **Neue Nutzergeschichten-Sektion mit 4 echten Fallbeispielen**: Auf der Startseite gibt es jetzt ein interaktives Story-Karussell und eigene Story-Seiten. Außerdem haben wir Platzhalter durch vier echte Geschichten ersetzt, von einem Grundschullehrer auf dem Land, einer Studentin, einem Informatiklehrer und einem Lkw-Fahrer.
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe teaches you how to turn that into a real product.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **Vibe Stories launched and upgraded with real user journeys**: Added a new homepage Vibe Stories section with an interactive carousel and dedicated story pages, then replaced placeholder content with four real user stories featuring a rural primary school teacher, a college student, a high school IT teacher, and a truck driver who built real products with AI.
|
||||
- **[2026-03-26]** 🚀 **Major Stage 2 practice update**: Completed the SaaS capstone project "Your First SaaS Full-Stack App: Copywriting Generator Website" and substantially expanded the "How to integrate Stripe and payment systems" section, plus key content around multi-product UI and WeChat Mini Program backend workflows.
|
||||
- **[2026-03-25]** 📚 **New appendix: User Research and Requirement Validation**: Added four new articles covering idea sourcing, the Double Diamond model, Jobs to Be Done, and The Mom Test to help beginners discover and validate product ideas.
|
||||
- **[2026-03-25]** 📚 **English documentation fully updated**: Stage 2 (Full-stack Development) and Stage 3 (Advanced Development) are now fully available in English.
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe te enseña a convertir eso en un producto real.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **Lanzamos la sección de historias de usuarios y la actualizamos con casos reales**: Añadimos un carrusel interactivo y páginas dedicadas en la portada, y sustituimos el contenido provisional por cuatro historias reales de una maestra rural, una estudiante universitaria, un profesor de informática de secundaria y un camionero que construyeron productos reales con IA.
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe vous apprend a transformer cela en un vrai produit.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **La section Histoires d’utilisateurs est en ligne avec 4 cas réels** : Nous avons ajouté un carrousel interactif et des pages dédiées sur la page d’accueil, puis remplacé le contenu provisoire par quatre récits réels mettant en scène un instituteur rural, une étudiante, un professeur d’informatique au lycée et un chauffeur routier ayant créé de vrais produits avec l’IA.
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe は、それを本物のプロダクトにする方法を教えます
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **ユーザーストーリー特集を公開し、実話ベースの4本に更新**：ホームにインタラクティブなストーリーカルーセルと専用ページを追加し、仮の内容を農村の小学校教師、大学生、高校の情報技術教師、トラック運転手による 4 本の実話に差し替えました。
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe는 그것을 실제 제품으로 만드는 방법을 가르칩니다.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **사용자 이야기 섹션 공개 및 실제 사례 4편으로 업데이트**: 홈페이지에 인터랙티브 스토리 캐러셀과 전용 스토리 페이지를 추가하고, 기존 플레이스홀더를 시골 초등학교 교사, 대학생, 고등학교 정보기술 교사, 트럭 운전사의 실제 이야기 4편으로 교체했습니다.
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe giúp bạn biến điều đó thành một sản phẩm thật.
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **Ra mắt mục câu chuyện người dùng và cập nhật bằng 4 trường hợp có thật**: Chúng tôi thêm carousel tương tác và các trang câu chuyện riêng trên trang chủ, rồi thay nội dung tạm bằng bốn câu chuyện thật từ một giáo viên tiểu học vùng quê, một sinh viên đại học, một giáo viên CNTT trung học và một tài xế xe tải đã dùng AI để làm ra sản phẩm thật.
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe 教你的，就是怎样把它一步步做成真正的产品。
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **「用户故事」专区上线并更新为真实案例**：首页新增交互式故事轮播组件和独立故事页面，并将原有占位内容替换为 4 篇真实用户故事，涵盖乡村小学老师、大学生、高中信息技术老师和货车司机，展示不同背景的学习者如何用 AI 解决真实问题、做出真实产品。
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -167,6 +167,7 @@ Easy-Vibe 教你的，就是怎樣把它一步步做成真正的產品。
|
||||
|
||||
## 🔥 News
|
||||
|
||||
- **[2026-03-29]** ✨ **「使用者故事」專區上線並更新為真實案例**：首頁新增互動式故事輪播元件與獨立故事頁面，並將原有占位內容替換為 4 篇真實使用者故事，涵蓋鄉村小學老師、大學生、高中資訊科技老師和貨車司機，展示不同背景的學習者如何用 AI 解決真實問題、做出真實產品。
|
||||
- **[2026-03-26]** 🚀 **阶段二实战内容集中更新**：补充完整 SaaS 全栈大作业《第一个 SaaS 全栈应用——文案生成网站》；同时大幅补全《如何集成 Stripe 等收费系统》，完善多产品 UI、微信小程序后端等关键章节。
|
||||
- **[2026-03-25]** 📚 **新增附录「用户研究与需求验证」**：包含 4 篇文章——从哪里找点子、双钻模型、Jobs to Be Done、The Mom Test 用户访谈法，帮助新手学会发现和验证产品想法。
|
||||
- **[2026-03-25]** 📚 **英文文档全面更新**：第二阶段（全栈开发）和第三阶段（高级开发）现已提供完整英文翻译。
|
||||
|
||||
@@ -92,7 +92,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Easy-Vibe 教程',
|
||||
home: '首页',
|
||||
stories: 'Vibe 故事',
|
||||
stories: '用户故事',
|
||||
pm: '零基础入门',
|
||||
junior: '初中级开发',
|
||||
senior: '高级开发',
|
||||
@@ -100,13 +100,20 @@ const i18n = {
|
||||
start: '开始学习'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
cat: '用户故事',
|
||||
title: '看见每一个<br><span class="highlight">闪亮的你</span>',
|
||||
sub: '加入他们，分享你的 vibe coding 故事',
|
||||
s1: { title: '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”', author: '小学老师小浩' },
|
||||
s2: { title: '期末考试周，我偷偷用AI造了个“校园闲鱼”', author: '一位大二学生' },
|
||||
s3: { title: '我给每个学生，做了一个不会累的“学霸同桌”', author: '高中信息技术老师' },
|
||||
s4: { title: '48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站', author: '货车司机老黄' }
|
||||
s4: { title: '48岁货车司机，熬了几个通宵，硬是用AI磕出一个出海工具站', author: '货车司机老黄' },
|
||||
authorPrefix: '讲述者：',
|
||||
ui: {
|
||||
prevLabel: '上一则故事',
|
||||
nextLabel: '下一则故事',
|
||||
selectLabel: '查看这个故事',
|
||||
imageAlt: '用户故事封面'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · 零基础入门',
|
||||
@@ -290,11 +297,19 @@ const i18n = {
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: 'See every <br><span class="highlight">shining you.</span>',
|
||||
sub: 'Discover how everyone uses AI to create their own projects here.',
|
||||
s1: { title: 'My First Full-Stack Project', author: 'Sanbu' },
|
||||
s2: { title: 'From PM to Indie Hacker', author: 'Alice' },
|
||||
s3: { title: '10x Productivity with AI', author: 'Bob' }
|
||||
title: 'Meet every <br><span class="highlight">shining builder.</span>',
|
||||
sub: 'See how people from different backgrounds use AI to solve real problems.',
|
||||
s1: { title: 'He gave up a high salary to help rural kids "fight flies" with AI', author: 'Xiaohao, primary school teacher' },
|
||||
s2: { title: 'During finals week, I secretly built a campus marketplace with AI', author: 'A sophomore student' },
|
||||
s3: { title: 'I built every student a tireless AI study buddy', author: 'A high school IT teacher' },
|
||||
s4: { title: 'A 48-year-old truck driver stayed up for nights to build an overseas AI tool site', author: 'Lao Huang, truck driver' },
|
||||
authorPrefix: 'By',
|
||||
ui: {
|
||||
prevLabel: 'Previous story',
|
||||
nextLabel: 'Next story',
|
||||
selectLabel: 'View this story',
|
||||
imageAlt: 'Vibe story cover'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · Getting Started',
|
||||
@@ -471,7 +486,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Easy-Vibe チュートリアル',
|
||||
home: 'ホーム',
|
||||
stories: 'Vibe Stories',
|
||||
stories: 'ユーザーストーリー',
|
||||
pm: 'プロダクトマネージャー',
|
||||
junior: '初中級開発者',
|
||||
senior: '上級開発者',
|
||||
@@ -479,12 +494,20 @@ const i18n = {
|
||||
start: '学習を開始'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: '輝くあなたを<br><span class="highlight">見つけよう。</span>',
|
||||
sub: 'みんながAIを使ってどのように自分の作品を作っているか発見しましょう。',
|
||||
s1: { title: '初めてのフルスタックプロジェクト', author: 'Sanbu' },
|
||||
s2: { title: 'PMから独立系開発者へ', author: 'Alice' },
|
||||
s3: { title: 'AIで生産性を10倍に', author: 'Bob' }
|
||||
cat: 'ユーザーストーリー',
|
||||
title: 'それぞれの<br><span class="highlight">輝く物語を見よう。</span>',
|
||||
sub: 'さまざまな背景の人たちが、AIで現実の課題をどう解決したかを紹介します。',
|
||||
s1: { title: '高収入の仕事を辞め、農村の子どもたちとAIで「ハエ対策」アプリを作った先生', author: '小学校教師 小浩' },
|
||||
s2: { title: '期末試験の週に、AIでこっそり「学内版フリマ」を作った', author: '大学2年生' },
|
||||
s3: { title: '生徒一人ひとりに、疲れない「AI優等生の隣の席」を作った', author: '高校の情報技術教師' },
|
||||
s4: { title: '48歳のトラック運転手が、徹夜で海外向けAIツールサイトを作り上げた', author: 'トラック運転手 老黄' },
|
||||
authorPrefix: '語り手：',
|
||||
ui: {
|
||||
prevLabel: '前のストーリー',
|
||||
nextLabel: '次のストーリー',
|
||||
selectLabel: 'このストーリーを見る',
|
||||
imageAlt: 'ユーザーストーリーのカバー'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · 初心者とPM',
|
||||
@@ -603,7 +626,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Easy-Vibe 教學',
|
||||
home: '首頁',
|
||||
stories: 'Vibe 故事',
|
||||
stories: '使用者故事',
|
||||
pm: '產品經理',
|
||||
junior: '初中級開發',
|
||||
senior: '高級開發',
|
||||
@@ -611,9 +634,20 @@ const i18n = {
|
||||
start: '開始學習'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
cat: '使用者故事',
|
||||
title: '看見每一個<br><span class="highlight">閃光的你。</span>',
|
||||
sub: '在這裡，發現大家如何使用 AI 創造屬於自己的作品。'
|
||||
sub: '看看不同背景的人，如何用 AI 解決真實問題、做出真實產品。',
|
||||
s1: { title: '放棄月入過萬，他在鄉村小學帶孩子們「用 AI 趕蒼蠅」', author: '小學老師小浩' },
|
||||
s2: { title: '期末考週，我偷偷用 AI 做了個「校園閒魚」', author: '一位大二學生' },
|
||||
s3: { title: '我給每個學生，做了一個不會累的「學霸同桌」', author: '高中資訊科技老師' },
|
||||
s4: { title: '48 歲貨車司機熬了幾個通宵，硬是用 AI 做出一個出海工具站', author: '貨車司機老黃' },
|
||||
authorPrefix: '講述者：',
|
||||
ui: {
|
||||
prevLabel: '上一則故事',
|
||||
nextLabel: '下一則故事',
|
||||
selectLabel: '查看這個故事',
|
||||
imageAlt: '使用者故事封面'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · 新手與產品原型',
|
||||
@@ -730,7 +764,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Easy-Vibe 튜토리얼',
|
||||
home: '홈',
|
||||
stories: 'Vibe Stories',
|
||||
stories: '사용자 이야기',
|
||||
pm: '제품 관리자',
|
||||
junior: '초/중급 개발자',
|
||||
senior: '고급 개발자',
|
||||
@@ -738,9 +772,20 @@ const i18n = {
|
||||
start: '학습 시작'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: '빛나는 당신을 <br><span class="highlight">발견하세요.</span>',
|
||||
sub: '모두가 AI를 사용하여 어떻게 자신만의 작품을 만드는지 여기서 확인하세요.'
|
||||
cat: '사용자 이야기',
|
||||
title: '빛나는 모두의<br><span class="highlight">이야기를 만나보세요.</span>',
|
||||
sub: '서로 다른 배경의 사람들이 AI로 현실의 문제를 어떻게 해결했는지 살펴보세요.',
|
||||
s1: { title: '높은 월급을 포기하고 시골 초등학교 아이들과 AI로 "파리 막기"를 만든 선생님', author: '초등학교 교사 샤오하오' },
|
||||
s2: { title: '기말고사 주간에 몰래 AI로 "캠퍼스 중고장터"를 만든 이야기', author: '대학교 2학년 학생' },
|
||||
s3: { title: '모든 학생에게 지치지 않는 "AI 우등생 짝꿍"을 만들어 준 선생님', author: '고등학교 정보기술 교사' },
|
||||
s4: { title: '48세 트럭 운전사가 며칠 밤을 새워 해외용 AI 툴 사이트를 만든 이야기', author: '트럭 운전사 라오황' },
|
||||
authorPrefix: '화자:',
|
||||
ui: {
|
||||
prevLabel: '이전 이야기',
|
||||
nextLabel: '다음 이야기',
|
||||
selectLabel: '이 이야기 보기',
|
||||
imageAlt: '사용자 이야기 표지'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · 초보자 & PM',
|
||||
@@ -859,7 +904,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Tutorial Easy-Vibe',
|
||||
home: 'Inicio',
|
||||
stories: 'Vibe Stories',
|
||||
stories: 'Historias de usuarios',
|
||||
pm: 'Gerente de Producto',
|
||||
junior: 'Desarrollador Junior',
|
||||
senior: 'Desarrollador Senior',
|
||||
@@ -867,9 +912,20 @@ const i18n = {
|
||||
start: 'Empezar'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: 'Mira a cada <br><span class="highlight">tú brillante.</span>',
|
||||
sub: 'Descubre cómo todos usan la IA para crear sus propios proyectos aquí.'
|
||||
cat: 'Historias de usuarios',
|
||||
title: 'Conoce cada <br><span class="highlight">historia que brilla.</span>',
|
||||
sub: 'Descubre cómo personas de distintos contextos usan la IA para resolver problemas reales.',
|
||||
s1: { title: 'Dejó un salario de cinco cifras para ayudar a niños rurales a "ahuyentar moscas" con IA', author: 'Xiaohao, maestro de primaria rural' },
|
||||
s2: { title: 'Durante la semana de finales, construí en secreto un mercado universitario con IA', author: 'Una estudiante de segundo año' },
|
||||
s3: { title: 'Le construí a cada alumno un compañero de estudio con IA que nunca se cansa', author: 'Un profesor de informática de secundaria' },
|
||||
s4: { title: 'Un camionero de 48 años pasó varias noches despierto para crear una web de herramientas de IA para el extranjero', author: 'Lao Huang, camionero' },
|
||||
authorPrefix: 'Por',
|
||||
ui: {
|
||||
prevLabel: 'Historia anterior',
|
||||
nextLabel: 'Siguiente historia',
|
||||
selectLabel: 'Ver esta historia',
|
||||
imageAlt: 'Portada de la historia'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · Principiante y PM',
|
||||
@@ -988,7 +1044,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Tutoriel Easy-Vibe',
|
||||
home: 'Accueil',
|
||||
stories: 'Vibe Stories',
|
||||
stories: 'Histoires d’utilisateurs',
|
||||
pm: 'Chef de Produit',
|
||||
junior: 'Dév Junior',
|
||||
senior: 'Dév Senior',
|
||||
@@ -996,9 +1052,20 @@ const i18n = {
|
||||
start: 'Commencer'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: 'Voyez chaque <br><span class="highlight">vous brillant.</span>',
|
||||
sub: 'Découvrez comment chacun utilise l\'IA pour créer ses propres projets ici.'
|
||||
cat: 'Histoires d’utilisateurs',
|
||||
title: 'Découvrez chaque <br><span class="highlight">parcours inspirant.</span>',
|
||||
sub: 'Voyez comment des personnes de tous horizons utilisent l’IA pour résoudre de vrais problèmes.',
|
||||
s1: { title: 'Il a quitté un salaire confortable pour aider des enfants d’une école rurale à "chasser les mouches" avec l’IA', author: 'Xiaohao, instituteur' },
|
||||
s2: { title: 'Pendant la semaine des examens, j’ai secrètement créé une marketplace de campus avec l’IA', author: 'Une étudiante de deuxième année' },
|
||||
s3: { title: 'J’ai créé pour chaque élève un binôme d’étude IA qui ne se fatigue jamais', author: 'Un professeur d’informatique au lycée' },
|
||||
s4: { title: 'Un chauffeur routier de 48 ans a veillé plusieurs nuits pour lancer un site d’outils IA à l’international', author: 'Lao Huang, chauffeur routier' },
|
||||
authorPrefix: 'Par',
|
||||
ui: {
|
||||
prevLabel: 'Histoire précédente',
|
||||
nextLabel: 'Histoire suivante',
|
||||
selectLabel: 'Voir cette histoire',
|
||||
imageAlt: 'Couverture de l’histoire'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · Débutant & PM',
|
||||
@@ -1118,7 +1185,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Easy-Vibe Tutorial',
|
||||
home: 'Startseite',
|
||||
stories: 'Vibe Stories',
|
||||
stories: 'Nutzergeschichten',
|
||||
pm: 'Produktmanager',
|
||||
junior: 'Junior Dev',
|
||||
senior: 'Senior Dev',
|
||||
@@ -1126,9 +1193,20 @@ const i18n = {
|
||||
start: 'Starten'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: 'Sehen Sie jeden <br><span class="highlight">strahlenden Sie.</span>',
|
||||
sub: 'Entdecken Sie hier, wie jeder KI nutzt, um eigene Projekte zu erstellen.'
|
||||
cat: 'Nutzergeschichten',
|
||||
title: 'Entdecke jede <br><span class="highlight">inspirierende Geschichte.</span>',
|
||||
sub: 'Sieh, wie Menschen mit ganz unterschiedlichen Hintergründen mit KI echte Probleme lösen.',
|
||||
s1: { title: 'Er gab ein hohes Gehalt auf, um Kindern auf dem Land mit KI beim "Fliegenvertreiben" zu helfen', author: 'Xiaohao, Grundschullehrer' },
|
||||
s2: { title: 'In der Prüfungswoche habe ich heimlich mit KI einen Campus-Marktplatz gebaut', author: 'Eine Studentin im zweiten Jahr' },
|
||||
s3: { title: 'Ich habe jedem Schüler einen unermüdlichen KI-Lernpartner gebaut', author: 'Ein Informatiklehrer an einer Oberschule' },
|
||||
s4: { title: 'Ein 48-jähriger Lkw-Fahrer blieb mehrere Nächte wach, um eine internationale KI-Toolseite zu bauen', author: 'Lao Huang, Lkw-Fahrer' },
|
||||
authorPrefix: 'Von',
|
||||
ui: {
|
||||
prevLabel: 'Vorherige Geschichte',
|
||||
nextLabel: 'Nächste Geschichte',
|
||||
selectLabel: 'Diese Geschichte ansehen',
|
||||
imageAlt: 'Titelbild der Geschichte'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · Anfänger & PM',
|
||||
@@ -1247,7 +1325,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'دليل Easy-Vibe',
|
||||
home: 'الرئيسية',
|
||||
stories: 'Vibe Stories',
|
||||
stories: 'قصص المستخدمين',
|
||||
pm: 'مدير المنتج',
|
||||
junior: 'مطور مبتدئ',
|
||||
senior: 'مطور خبير',
|
||||
@@ -1255,9 +1333,20 @@ const i18n = {
|
||||
start: 'ابدأ التعلم'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: 'شاهد كل <br><span class="highlight">أنت متألق.</span>',
|
||||
sub: 'اكتشف كيف يستخدم الجميع الذكاء الاصطناعي لإنشاء مشاريعهم الخاصة هنا.'
|
||||
cat: 'قصص المستخدمين',
|
||||
title: 'تعرّف على كل <br><span class="highlight">قصة ملهمة.</span>',
|
||||
sub: 'اكتشف كيف يستخدم أشخاص من خلفيات مختلفة الذكاء الاصطناعي لحل مشكلات حقيقية.',
|
||||
s1: { title: 'تخلّى عن راتب مرتفع ليساعد أطفال مدرسة ريفية على "طرد الذباب" باستخدام الذكاء الاصطناعي', author: 'شياوهاو، معلم مدرسة ابتدائية' },
|
||||
s2: { title: 'خلال أسبوع الامتحانات النهائية، بنيت سرًا سوقًا جامعيًا باستخدام الذكاء الاصطناعي', author: 'طالبة في السنة الثانية' },
|
||||
s3: { title: 'صنعت لكل طالب زميل دراسة بالذكاء الاصطناعي لا يتعب أبدًا', author: 'معلم تقنية معلومات في الثانوية' },
|
||||
s4: { title: 'سائق شاحنة يبلغ 48 عامًا سهر عدة ليالٍ ليبني موقع أدوات ذكاء اصطناعي للأسواق الخارجية', author: 'لاو هوانغ، سائق شاحنة' },
|
||||
authorPrefix: 'الراوي:',
|
||||
ui: {
|
||||
prevLabel: 'القصة السابقة',
|
||||
nextLabel: 'القصة التالية',
|
||||
selectLabel: 'عرض هذه القصة',
|
||||
imageAlt: 'غلاف القصة'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · مدير المنتج',
|
||||
@@ -1377,7 +1466,7 @@ const i18n = {
|
||||
nav: {
|
||||
title: 'Hướng dẫn Easy-Vibe',
|
||||
home: 'Trang chủ',
|
||||
stories: 'Vibe Stories',
|
||||
stories: 'Câu chuyện người dùng',
|
||||
pm: 'Quản lý sản phẩm',
|
||||
junior: 'Dev Sơ/Trung cấp',
|
||||
senior: 'Dev Cao cấp',
|
||||
@@ -1385,9 +1474,20 @@ const i18n = {
|
||||
start: 'Bắt đầu học'
|
||||
},
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
title: 'Thấy mọi <br><span class="highlight">bạn tỏa sáng.</span>',
|
||||
sub: 'Khám phá cách mọi người sử dụng AI để tạo các dự án riêng của họ tại đây.'
|
||||
cat: 'Câu chuyện người dùng',
|
||||
title: 'Gặp gỡ từng <br><span class="highlight">câu chuyện tỏa sáng.</span>',
|
||||
sub: 'Khám phá cách những người từ nhiều xuất phát điểm khác nhau dùng AI để giải quyết vấn đề thật.',
|
||||
s1: { title: 'Anh bỏ mức lương cao để giúp trẻ em vùng quê "đuổi ruồi" bằng AI', author: 'Xiaohao, giáo viên tiểu học' },
|
||||
s2: { title: 'Trong tuần thi cuối kỳ, tôi lặng lẽ làm một chợ đồ cũ trong trường bằng AI', author: 'Một sinh viên năm hai' },
|
||||
s3: { title: 'Tôi tạo cho mỗi học sinh một bạn học giỏi AI không biết mệt', author: 'Một giáo viên CNTT trung học' },
|
||||
s4: { title: 'Một tài xế xe tải 48 tuổi thức trắng nhiều đêm để làm một website công cụ AI cho thị trường quốc tế', author: 'Lao Huang, tài xế xe tải' },
|
||||
authorPrefix: 'Người kể:',
|
||||
ui: {
|
||||
prevLabel: 'Câu chuyện trước',
|
||||
nextLabel: 'Câu chuyện tiếp theo',
|
||||
selectLabel: 'Xem câu chuyện này',
|
||||
imageAlt: 'Ảnh bìa câu chuyện'
|
||||
}
|
||||
},
|
||||
stage1: {
|
||||
cat: 'Stage 1 · Người mới & PM',
|
||||
|
||||
@@ -11,20 +11,30 @@ import story4Cover from '../../../zh-cn/vibe-stories/images/story-4/image7.png'
|
||||
const t = inject('t', {
|
||||
value: {
|
||||
stories: {
|
||||
cat: 'Vibe Stories',
|
||||
cat: '用户故事',
|
||||
title: '看见每一个<br><span class="highlight">闪亮的你</span>',
|
||||
sub: '加入他们，分享你的 vibe coding 故事'
|
||||
sub: '加入他们，分享你的 vibe coding 故事',
|
||||
authorPrefix: '讲述者：',
|
||||
ui: {
|
||||
prevLabel: '上一则故事',
|
||||
nextLabel: '下一则故事',
|
||||
selectLabel: '查看这个故事',
|
||||
imageAlt: '用户故事封面'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const tStories = [
|
||||
const tStories = computed(() => [
|
||||
{
|
||||
id: 1,
|
||||
title: t.value?.stories?.s1?.title || '放弃月入过万，他在农村小学带孩子们“用AI赶苍蝇”',
|
||||
author: t.value?.stories?.s1?.author || '小学老师小浩',
|
||||
avatar: '👨🏫',
|
||||
image: story1Cover,
|
||||
imageStyle: {
|
||||
objectPosition: 'center center'
|
||||
},
|
||||
link: '/zh-cn/vibe-stories/story-1'
|
||||
},
|
||||
{
|
||||
@@ -33,6 +43,9 @@ const tStories = [
|
||||
author: t.value?.stories?.s2?.author || '一位大二学生',
|
||||
avatar: '🎓',
|
||||
image: story2Cover,
|
||||
imageStyle: {
|
||||
objectPosition: 'center center'
|
||||
},
|
||||
link: '/zh-cn/vibe-stories/story-2'
|
||||
},
|
||||
{
|
||||
@@ -41,6 +54,9 @@ const tStories = [
|
||||
author: t.value?.stories?.s3?.author || '高中信息技术老师',
|
||||
avatar: '🧑🏫',
|
||||
image: story3Cover,
|
||||
imageStyle: {
|
||||
objectPosition: '34% center'
|
||||
},
|
||||
link: '/zh-cn/vibe-stories/story-3'
|
||||
},
|
||||
{
|
||||
@@ -49,9 +65,12 @@ const tStories = [
|
||||
author: t.value?.stories?.s4?.author || '货车司机老黄',
|
||||
avatar: '🚚',
|
||||
image: story4Cover,
|
||||
imageStyle: {
|
||||
objectPosition: 'center center'
|
||||
},
|
||||
link: '/zh-cn/vibe-stories/story-4'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const currentIndex = ref(0)
|
||||
let autoplayTimer = null
|
||||
@@ -78,13 +97,22 @@ const screenContentStyle = computed(() => ({
|
||||
borderRadius: formatPixels(screenRegion.value.radius)
|
||||
}))
|
||||
|
||||
const currentStory = computed(() => tStories.value[currentIndex.value] ?? tStories.value[0])
|
||||
|
||||
// Keep crop settings explicit in source so they survive reload/HMR.
|
||||
const currentImageStyle = computed(() => ({
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center center',
|
||||
...(currentStory.value?.imageStyle || {})
|
||||
}))
|
||||
|
||||
const transitionName = ref('slide-left')
|
||||
|
||||
const next = () => {
|
||||
if (isPaginating.value) return
|
||||
isPaginating.value = true
|
||||
transitionName.value = 'slide-left'
|
||||
currentIndex.value = (currentIndex.value + 1) % tStories.length
|
||||
currentIndex.value = (currentIndex.value + 1) % tStories.value.length
|
||||
setTimeout(() => {
|
||||
isPaginating.value = false
|
||||
}, 800)
|
||||
@@ -94,7 +122,7 @@ const prev = () => {
|
||||
if (isPaginating.value) return
|
||||
isPaginating.value = true
|
||||
transitionName.value = 'slide-right'
|
||||
currentIndex.value = (currentIndex.value - 1 + tStories.length) % tStories.length
|
||||
currentIndex.value = (currentIndex.value - 1 + tStories.value.length) % tStories.value.length
|
||||
setTimeout(() => {
|
||||
isPaginating.value = false
|
||||
}, 800)
|
||||
@@ -110,7 +138,7 @@ const startAutoplay = () => {
|
||||
autoplayTimer = setInterval(() => {
|
||||
if (!isPaginating.value) {
|
||||
transitionName.value = 'slide-left'
|
||||
currentIndex.value = (currentIndex.value + 1) % tStories.length
|
||||
currentIndex.value = (currentIndex.value + 1) % tStories.value.length
|
||||
}
|
||||
}, 4000)
|
||||
}
|
||||
@@ -159,21 +187,22 @@ onUnmounted(() => {
|
||||
<div class="laptop-wrapper" @mouseenter="stopAutoplay" @mouseleave="startAutoplay">
|
||||
<div class="laptop-container">
|
||||
<!-- Navigation Controls -->
|
||||
<button class="nav-btn prev" aria-label="Previous story" @click="prev">
|
||||
<button class="nav-btn prev" :aria-label="t.stories?.ui?.prevLabel || 'Previous story'" @click="prev">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6" /></svg>
|
||||
</button>
|
||||
<button class="nav-btn next" aria-label="Next story" @click="next">
|
||||
<button class="nav-btn next" :aria-label="t.stories?.ui?.nextLabel || 'Next story'" @click="next">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6" /></svg>
|
||||
</button>
|
||||
|
||||
<div class="screen-content" :style="screenContentStyle">
|
||||
<a :href="withBase(tStories[currentIndex].link)" class="screen-link">
|
||||
<a :href="withBase(currentStory.link)" class="screen-link">
|
||||
<transition :name="transitionName">
|
||||
<div :key="currentIndex" class="screen-image-wrapper">
|
||||
<div :key="currentStory.id" class="screen-image-wrapper">
|
||||
<img
|
||||
:src="tStories[currentIndex].image"
|
||||
:src="currentStory.image"
|
||||
class="screen-image"
|
||||
alt="Story screenshot"
|
||||
:style="currentImageStyle"
|
||||
:alt="t.stories?.ui?.imageAlt || 'Story screenshot'"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -185,12 +214,12 @@ onUnmounted(() => {
|
||||
|
||||
<!-- Story Info & Avatar -->
|
||||
<div class="story-info">
|
||||
<div class="story-avatar">{{ tStories[currentIndex].avatar }}</div>
|
||||
<div class="story-avatar">{{ currentStory.avatar }}</div>
|
||||
<div class="story-text">
|
||||
<a :href="withBase(tStories[currentIndex].link)" class="story-title">
|
||||
{{ tStories[currentIndex].title }}
|
||||
<a :href="withBase(currentStory.link)" class="story-title">
|
||||
{{ currentStory.title }}
|
||||
</a>
|
||||
<div class="story-author">by {{ tStories[currentIndex].author }}</div>
|
||||
<div class="story-author">{{ t.stories?.authorPrefix || 'by' }} {{ currentStory.author }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,7 +230,7 @@ onUnmounted(() => {
|
||||
:key="index"
|
||||
class="indicator-dot"
|
||||
:class="{ active: index === currentIndex }"
|
||||
aria-label="Select story"
|
||||
:aria-label="t.stories?.ui?.selectLabel || 'Select story'"
|
||||
@click="setIndex(index)"
|
||||
></button>
|
||||
</div>
|
||||
@@ -325,9 +354,15 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.screen-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user