Skip to content

[feature] 登入頁改左右分欄、landing 對齊系統樣式並改寫成問題導向文案 - #89

Merged
YJack0000 merged 5 commits into
mainfrom
feat/login-landing-redesign
Oct 12, 2026
Merged

YJack0000 merged 5 commits into
mainfrom
feat/login-landing-redesign

Conversation

@YJack0000

@YJack0000 YJack0000 commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

摘要

兩件事:登入頁改版,landing 對齊系統樣式並把文案改成「解決什麼問題」而不是「有什麼功能」。沒有 schema change,不需要 migration。

登入頁:左右分欄(參考 inbox.pathors.com 與 main-app)

  • 新的 AuthShell 取代原本置中的小卡片,/login、/signup、/signup/password、/forgot-password、/reset-password 共用。AuthCard 刪除。
  • 左邊是表單(logo、語言切換、隱私權/條款連結);右邊深藍面板輪播三張產品畫面:項目款項一鍵追蹤、花費分布一看便知、對帳單丟給 AI。純 CSS 做的,不載外部圖;hover 或鍵盤 focus 時暫停,prefers-reduced-motion 時不自動播。窄螢幕只顯示表單。
  • 登入邏輯沒動:SSO 查詢、redirect(含 MCP authorize)、防帳號探測的註解與行為都保留。「忘記密碼?」移到密碼欄標籤右邊,「建立帳號」在送出鈕下方,兩個連結仍然一律出現。
登入頁第一步:左邊 email 表單,右邊藍色面板顯示請款清單 密碼步驟:忘記密碼在密碼欄右上,右邊輪播到花費分布長條圖

手機版只顯示表單

Landing:對齊系統樣式

  • 色票改成系統(shadcn Twitter 主題)的藍色 #1e9df1 與冷灰;字體改用系統的 Open Sans/Geist Mono,中文 fallback 為 PingFang TC → Noto Sans TC;nav logo 改用系統的 LogoMark。/privacy、/terms 共用同一套 token,一起換。
  • 小字的品牌色另外加 --brand-text(較深的同色藍),讓對比度到 4.5:1;結尾藍色區塊改用較深的藍,白字才讀得清楚。
  • 中文標題與導言加 word-break: keep-all,只在標點處換行,不會出現「訂/閱」這種斷法;中文的段落標題放寬寬度上限。

Landing:hero 精簡(Jack 的回饋)

  • 描述縮成一句:「不用再自己 key 帳、對帳。AI 把帳記好,拿不準的才來問你。」(講讀者不用再做什麼,不講產品有什麼)
  • 大標從約 82px 縮到約 60px(1280 寬);章節 h2 同步從約 50px 縮到約 42px,維持層級。三種寬度都斷在「你負責決定,/AI 負責記帳。」。
  • 拿掉「開源 · Apache 2.0」標籤(字典 key 一起刪)。
  • 導覽列的 GitHub 文字換成 GitHub logo(aria-label/title 為 GitHub),手機版也顯示。
新的 hero:較小的大標、一句描述、導覽列 GitHub logo(描述文字為前一版) 手機版 hero

Landing:文案改成問題導向

  • 每個功能區塊上方小標寫「以前的頭痛」,大標寫「現在的結果」,例如「做完了,卻忘了請款」→「項目款項一鍵追蹤」、「每季重做一份試算表」→「花費分布一看便知」。
  • 「這些狀況,你應該不陌生」改成三個實際痛點:帳總是忘了記、合約走到哪一期沒人說得清、收款日期對不起來;導言是「以前要等會計做好,現在小團隊用 AI 自己就收得掉」。
  • 最下面的格子從 8 格變 12 格,標題都改成講結果,並補上固定扣款提醒、Azure/GCP 帳單、Simpany 電子發票、Wise 同步四項。
  • 新增 landing-template.test.ts:兩種語言的佔位符都能代入、字典沒有沒用到的 key、字典裡沒有 HTML、格子數是 12。

「這些狀況」三張痛點卡片(亮色,hero 為改版前)

內外帳、AI 對帳單、項目款項一鍵追蹤三區

狀態流程、合約與訂閱同清單、手機提醒三區

花費分布一看便知與 12 格的其他功能

暗色版首屏

驗證

  • bunx tsc --noEmit、bun run lint、bun test(287 pass)、bun run build 全過。
  • 截圖是本機 production build(next start),亮色、暗色、375px 寬都看過。

沒做的

  • landing 裡的產品截圖(public/landing/images 的內外帳、請款看板、總覽、報表)仍是舊的英文畫面。
  • 系統本身沒有暗色模式,登入頁固定亮色;landing 照舊跟著作業系統切換。

@github-actions

Copy link
Copy Markdown

✅ SonarQube Quality Gate passed — pathorsAI_internal

0 open issues on this PR.

@YJack0000
YJack0000 merged commit d1f4595 into main Oct 12, 2026
1 check passed
@YJack0000
YJack0000 deleted the feat/login-landing-redesign branch October 12, 2026 20:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants