From ec235b9bc18d8dec271811ab7f4045511cd88f15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=94=BF=E7=BF=B0?=
 <hanson@lizhenghandeMacBook-Air.local>
Date: Fri, 14 Aug 2026 13:04:47 +0800
Subject: [PATCH] feat(web): add mobile download QR to landing page

---
 frontend/web/public/brand/mobile-download-qr.png | Bin 0 -> 3003 bytes
 .../web/src/component/landing/LandingPage.jsx    |   6 ++++--
 frontend/web/src/component/landing/landing.css   |  12 +++++++++---
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 frontend/web/public/brand/mobile-download-qr.png

diff --git a/frontend/web/public/brand/mobile-download-qr.png b/frontend/web/public/brand/mobile-download-qr.png
new file mode 100644
index 0000000000000000000000000000000000000000..e51d33b3cb16be265a7a2a718b09c87c1e848de9
GIT binary patch
literal 3003
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
X!p_`}!OM!--~{60=;2Uf7j)y_pa-S+

literal 0
HcmV?d00001

diff --git a/frontend/web/src/component/landing/LandingPage.jsx b/frontend/web/src/component/landing/LandingPage.jsx
index ab3be550..07328971 100644
--- a/frontend/web/src/component/landing/LandingPage.jsx
+++ b/frontend/web/src/component/landing/LandingPage.jsx
@@ -73,10 +73,12 @@ const workflow = [
 const faqs = [
   { question: "需要准备教材或写好稿子吗？", answer: "不需要。你可以直接选择一个场景开始，AI 老师会根据你的水平和回应自然推进对话。" },
   { question: "免费版可以练习什么？", answer: "免费版包含每日自由对话额度、每日普通场景和全部 AI 老师，适合先建立稳定开口的习惯。" },
-  { question: "移动端什么时候可以下载？", answer: "移动端正在准备正式发布。商店链接配置完成后，这里会自动显示 iOS 和 Android 下载入口。" },
+  { question: "移动端怎么下载安装？", answer: "扫描平台区域的二维码即可打开移动端下载页。也可以点击旁边的 Mobile app 标签，在新页面完成下载安装。" },
   { question: "AI 的反馈可以替代老师吗？", answer: "UniSpeaking 用于日常练习和即时反馈，不替代专业教师、考试官方评分或正式语言诊断。" },
 ];
 
+const mobileDownloadUrl = "http://fir.qiniuapi.com/v1zyqajm?utm_source=fir&utm_medium=qr";
+
 function Brand() {
   return (
     <a className="landing-brand" href="#top" aria-label="返回 UniSpeaking 首页">
@@ -271,7 +273,7 @@ export function LandingPage({ onStart, onLogin, onWeb, onSpecialty }) {
         <div className="landing-container"><div className="landing-section-heading landing-section-heading--compact"><div><p className="landing-eyebrow">PRACTICE FOR REAL LIFE</p><h2>你想说的，<br />都可以成为练习。</h2></div><p>从日常交流到重要目标，选择一个真实场景，马上进入更有方向的对话。</p></div><div className="landing-specialty-grid"><article><div className="landing-specialty-card__icon landing-tone-yellow"><BookOpenText weight="duotone" /></div><p className="landing-eyebrow">EVERYDAY ENGLISH</p><h3>日常场景</h3><p>点单、购物、出行、住宿和社交，让下次真实交流少一点犹豫。</p><a href="#capabilities">查看场景 <ArrowRight weight="bold" /></a></article><article><div className="landing-specialty-card__icon landing-tone-lavender"><TargetIcon /></div><p className="landing-eyebrow">IELTS SPEAKING</p><h3>IELTS 口语</h3><p>Part 1、Part 2、Part 3，从回答结构到表达表现，完整练习每一部分。</p><button type="button" aria-label="开始体验 IELTS 口语" onClick={() => onSpecialty("ielts")}>开始体验 <ArrowRight weight="bold" /></button></article><article><div className="landing-specialty-card__icon landing-tone-sky"><Briefcase weight="duotone" /></div><p className="landing-eyebrow">INTERVIEW PRACTICE</p><h3>英文面试</h3><p>用更接近真实面试的方式，练习自我介绍、追问和清晰表达。</p><button type="button" aria-label="开始体验英文面试" onClick={() => onSpecialty("interview")}>开始体验 <ArrowRight weight="bold" /></button></article></div></div>
       </section>
 
-      <section className="landing-platform" id="platforms" data-reveal><div className="landing-container landing-platform__grid"><div className="landing-platform__copy"><p className="landing-eyebrow">PRACTICE WHEREVER YOU ARE</p><h2>电脑前深入练，<br />手机上随时说。</h2><p>Web 端适合完整训练和复盘，移动端适合把零碎时间变成开口时间。你的练习路径，会跟着你走。</p><div className="landing-platform__actions"><LandingButton onClick={onWeb} icon={<ArrowUpRight weight="bold" />}>进入 Web 端</LandingButton><span className="landing-platform__note"><CheckCircle weight="fill" />无需安装，即开即用</span></div></div><div className="landing-devices"><div className="landing-device landing-device--desktop"><div className="landing-device__bar"><i /><i /><i /><span>app.unispeaking.com</span></div><div className="landing-device__screen"><div className="landing-mini-sidebar"><span /><span /><span /><span /></div><div className="landing-mini-main"><small>自由对话</small><strong>今天想聊点什么？</strong><div className="landing-mini-wave">{[.25, .5, .8, .43, .68, .32, .58, .92, .44, .7, .35, .62].map((height, index) => <i key={index} style={{ "--wave-height": height }} />)}</div><span className="landing-mini-button">开始对话 <ArrowRight weight="bold" /></span></div></div></div><div className="landing-device landing-device--mobile"><div className="landing-device__speaker" /><div className="landing-device__screen"><img src="/brand/unispeaking-mark-user.jpg" alt="" /><strong>移动端即将上线</strong><span>把练习放进口袋</span><i><DeviceMobile weight="duotone" /></i></div></div><div className="landing-devices__badge"><DeviceMobile weight="duotone" /><span><strong>Mobile app</strong><small>Coming soon</small></span></div></div></div></section>
+      <section className="landing-platform" id="platforms" data-reveal><div className="landing-container landing-platform__grid"><div className="landing-platform__copy"><p className="landing-eyebrow">PRACTICE WHEREVER YOU ARE</p><h2>电脑前深入练，<br />手机上随时说。</h2><p>Web 端适合完整训练和复盘，移动端适合把零碎时间变成开口时间。扫描二维码，随时把练习带在身边。</p><div className="landing-platform__actions"><LandingButton onClick={onWeb} icon={<ArrowUpRight weight="bold" />}>进入 Web 端</LandingButton><span className="landing-platform__note"><CheckCircle weight="fill" />Web 与移动端练习同步</span></div></div><div className="landing-devices"><div className="landing-device landing-device--desktop"><div className="landing-device__bar"><i /><i /><i /><span>app.unispeaking.com</span></div><div className="landing-device__screen"><div className="landing-mini-sidebar"><span /><span /><span /><span /></div><div className="landing-mini-main"><small>自由对话</small><strong>今天想聊点什么？</strong><div className="landing-mini-wave">{[.25, .5, .8, .43, .68, .32, .58, .92, .44, .7, .35, .62].map((height, index) => <i key={index} style={{ "--wave-height": height }} />)}</div><span className="landing-mini-button">开始对话 <ArrowRight weight="bold" /></span></div></div></div><div className="landing-device landing-device--mobile"><div className="landing-device__speaker" /><a className="landing-device__screen landing-mobile-download" href={mobileDownloadUrl} target="_blank" rel="noreferrer" aria-label="打开移动端下载页"><img className="landing-mobile-download__qr" src="/brand/mobile-download-qr.png" alt="移动端下载二维码" /><strong>扫码下载移动端</strong><span>把练习放进口袋</span><i><DeviceMobile weight="duotone" /></i></a></div><a className="landing-devices__badge" href={mobileDownloadUrl} target="_blank" rel="noreferrer" aria-label="打开移动端下载页"><DeviceMobile weight="duotone" /><span><strong>Mobile app</strong><small>扫码下载</small></span><ArrowUpRight weight="bold" /></a></div></div></section>
 
       <section className="landing-section landing-pricing" id="pricing" data-reveal><div className="landing-container"><div className="landing-section-heading landing-section-heading--compact"><div><p className="landing-eyebrow">MEMBERSHIP PREVIEW</p><h2>先免费开始，<br />再按你的节奏升级。</h2></div><p>免费版足够你建立习惯。需要更长时间、更完整的专项训练时，再选择适合自己的方案。</p></div><div className="landing-pricing-grid">{plans.map((plan) => <article key={plan.id} className={`landing-plan ${plan.id === "pro" ? "is-featured" : ""}`}><div className="landing-plan__heading"><div><span className="landing-plan__label">{plan.id === "pro" ? "最受欢迎" : plan.id === "free" ? "从这里开始" : "目标训练"}</span><h3>{plan.name}</h3></div>{plan.id === "pro" && <span className="landing-plan__badge">推荐</span>}</div><p>{plan.desc}</p><div className="landing-plan__price"><strong>{plan.price === "0" ? "免费" : `¥${plan.price}`}</strong>{plan.suffix && <span>{plan.suffix}</span>}</div><ul>{plan.features.map((feature) => <li key={feature}><CheckCircle weight="fill" />{feature}</li>)}</ul><LandingButton variant={plan.id === "pro" ? "primary" : "secondary"} onClick={onStart} icon={<ArrowRight weight="bold" />}>{plan.id === "free" ? "免费开始" : "加入候补"}</LandingButton></article>)}</div><p className="landing-pricing__footnote"><ShieldCheck weight="bold" /> 会员支付正在准备中，正式权益和价格以发布版本为准。</p></div></section>
 
diff --git a/frontend/web/src/component/landing/landing.css b/frontend/web/src/component/landing/landing.css
index b8346fea..41261767 100644
--- a/frontend/web/src/component/landing/landing.css
+++ b/frontend/web/src/component/landing/landing.css
@@ -276,13 +276,18 @@
 .landing-device--mobile { right: 2%; bottom: 4px; width: 160px; height: 320px; padding: 8px; border: 4px solid #2f2f2d; border-radius: 24px; transform: rotate(4deg); background: #292927; }
 .landing-device__speaker { position: absolute; z-index: 2; top: 8px; left: 50%; width: 42px; height: 5px; border-radius: 5px; transform: translateX(-50%); background: #30302e; }
 .landing-device--mobile .landing-device__screen { width: 100%; height: 100%; padding: 44px 14px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 17px; color: #1c1c1b; text-align: center; background: #f4f4f0; }
+.landing-mobile-download { text-decoration: none; }
 .landing-device--mobile img { width: 42px; height: 42px; margin-bottom: 15px; border-radius: 8px; }
+.landing-device--mobile .landing-mobile-download__qr { width: 82px; height: 82px; padding: 6px; object-fit: contain; border: 1px solid #deded8; border-radius: 6px; background: #fff; image-rendering: pixelated; }
 .landing-device--mobile strong { font-size: 11px; }
 .landing-device--mobile span { margin-top: 6px; color: #83837d; font-size: 8px; }
-.landing-device--mobile .landing-device__screen i { width: 40px; height: 40px; margin-top: 28px; display: grid; place-items: center; border: 1px solid #d6d6d0; border-radius: 50%; background: #fff; }
+.landing-device--mobile .landing-device__screen i { width: 40px; height: 40px; margin-top: 18px; display: grid; place-items: center; border: 1px solid #d6d6d0; border-radius: 50%; background: #fff; }
 .landing-device--mobile svg { width: 18px; height: 18px; }
-.landing-devices__badge { position: absolute; z-index: 4; right: 32px; bottom: 22px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #d6d6d0; border-radius: 7px; color: #282826; background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.24); }
+.landing-devices__badge { position: absolute; z-index: 4; right: 32px; bottom: 22px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #d6d6d0; border-radius: 7px; color: #282826; background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.24); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
+.landing-devices__badge:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.3); }
+.landing-devices__badge:focus-visible, .landing-mobile-download:focus-visible { outline: 3px solid var(--landing-yellow); outline-offset: 3px; }
 .landing-devices__badge svg { width: 21px; height: 21px; }
+.landing-devices__badge > svg:last-child { width: 12px; height: 12px; margin-left: 2px; }
 .landing-devices__badge strong, .landing-devices__badge small { display: block; }
 .landing-devices__badge strong { font-size: 9px; }
 .landing-devices__badge small { margin-top: 3px; color: #898983; font-size: 7px; }
@@ -470,8 +475,9 @@
   .landing-mini-wave { height: 38px; }
   .landing-device--mobile { right: -2%; width: 112px; height: 230px; border-radius: 20px; }
   .landing-device--mobile .landing-device__screen { padding-inline: 8px; }
+  .landing-device--mobile .landing-mobile-download__qr { width: 58px; height: 58px; padding: 5px; margin-bottom: 10px; }
   .landing-device--mobile strong { font-size: 8px; }
-  .landing-device--mobile .landing-device__screen i { width: 32px; height: 32px; margin-top: 20px; }
+  .landing-device--mobile .landing-device__screen i { width: 32px; height: 32px; margin-top: 12px; }
   .landing-devices__badge { right: 4px; bottom: 2px; }
   .landing-plan { min-height: 400px; padding: 24px; }
   .landing-pricing__footnote { align-items: flex-start; text-align: left; line-height: 1.5; }