From 0f52572f200b3ee5214f2ccf4785a95ec1c61d22 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Fri, 18 Sep 2026 11:37:25 +0700
Subject: [PATCH] web: restate the pricing plans as Lite and Pro with store
 buttons

---
 docker/frontend/src/Landing.tsx        | 24 +++++++++++++++++-------
 docker/frontend/src/styles/landing.css |  3 ++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/docker/frontend/src/Landing.tsx b/docker/frontend/src/Landing.tsx
index 07be121..c368911 100644
--- a/docker/frontend/src/Landing.tsx
+++ b/docker/frontend/src/Landing.tsx
@@ -702,7 +702,7 @@ export function Landing() {
           </div>
           <div className="lp-price">
             <article className="lp-plan">
-              <span className="lp-eyebrow">{c({ en: 'Starter', vi: 'Khởi đầu' })}</span>
+              <span className="lp-eyebrow">{c({ en: 'Lite', vi: 'Lite' })}</span>
               <div className="lp-amount">$0<small>{c({ en: ' / FOREVER', vi: ' / MÃI MÃI' })}</small></div>
               <p className="lp-muted">{c({ en: 'Everything needed to shoot your first roll.', vi: 'Đủ để bạn chụp cuộn phim đầu tiên.' })}</p>
               <ul>
@@ -711,11 +711,16 @@ export function Landing() {
                 <li>{c({ en: 'Basic grain adjustment', vi: 'Chỉnh hạt phim cơ bản' })}</li>
                 <li>{c({ en: '300 ppi JPEG export', vi: 'Xuất JPEG 300 ppi' })}</li>
               </ul>
-              <a className="lp-btn" href="/app">{c({ en: 'Open the studio', vi: 'Mở studio' })}</a>
+              <div className="lp-plan-cta">
+                <a className="lp-btn" href="/app">{c({ en: 'Open the studio', vi: 'Mở studio' })}</a>
+                <button type="button" className="lp-btn" onClick={() => showToast(toastStore)}>
+                  {c({ en: 'Get it on Google Play', vi: 'Tải trên Google Play' })}
+                </button>
+              </div>
             </article>
             <article className="lp-plan vip">
-              <span className="lp-eyebrow">VIP Pro</span>
-              <div className="lp-amount">$2.99<small>{c({ en: ' / MONTH', vi: ' / THÁNG' })}</small></div>
+              <span className="lp-eyebrow">Pro</span>
+              <div className="lp-amount">$2.99<small>{c({ en: ' / FOREVER', vi: ' / MÃI MÃI' })}</small></div>
               <p className="lp-muted">{c({ en: 'For the people who grade every frame.', vi: 'Dành cho người chỉnh màu từng khung hình.' })}</p>
               <ul>
                 <li>{c({ en: '250+ VIP recipes', vi: '250+ công thức VIP' })}</li>
@@ -724,9 +729,14 @@ export function Landing() {
                 <li>{c({ en: 'Lossless RAW & 4K export', vi: 'Xuất RAW & 4K không mất dữ liệu' })}</li>
                 <li>{c({ en: 'Unlimited QR generation', vi: 'Tạo QR không giới hạn' })}</li>
               </ul>
-              <button type="button" className="lp-btn lp-primary" onClick={() => showToast({ en: 'Pro checkout opens with the public release — Starter is free in the web studio today.', vi: 'Thanh toán Pro sẽ mở khi phát hành chính thức — gói Khởi đầu miễn phí ngay trong web studio.' })}>
-                {c({ en: 'Go Pro', vi: 'Lên Pro' })}
-              </button>
+              <div className="lp-plan-cta">
+                <button type="button" className="lp-btn" onClick={() => showToast(toastStore)}>
+                  {c({ en: 'Get it on Google Play', vi: 'Tải trên Google Play' })}
+                </button>
+                <button type="button" className="lp-btn" onClick={() => showToast(toastStore)}>
+                  {c({ en: 'Download on the App Store', vi: 'Tải trên App Store' })}
+                </button>
+              </div>
             </article>
           </div>
         </div>
diff --git a/docker/frontend/src/styles/landing.css b/docker/frontend/src/styles/landing.css
index 1433d38..b051ed8 100644
--- a/docker/frontend/src/styles/landing.css
+++ b/docker/frontend/src/styles/landing.css
@@ -417,7 +417,8 @@ html { scroll-behavior: smooth; scroll-padding-top: 116px; }
 .lp-plan .lp-amount small { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-muted); }
 .lp-plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--lp-muted); }
 .lp-plan li::before { content: '▸ '; color: var(--lp-ink-amber); }
-.lp-plan .lp-btn { margin-top: auto; }
+/* Card actions pinned to the bottom: the studio link plus the store buttons. */
+.lp-plan-cta { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
 
 /* --- 9. testimonials + faq --------------------------------------------- */
 .lp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 44px; }