3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: restate the pricing plans as Lite and Pro with store buttons

Browse Source
This commit is contained in:
3dtours
2026-09-18 11:37:25 +07:00
parent 8259bd468d
commit 0f52572f20
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/Landing.tsx
+17 -7
View File
@@ -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>
docker/frontend/src/styles/landing.css
+2 -1
View File
@@ -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; }