chore: modify copy to increase conversion
- Updated layout and styling for the LoginModalContent component to improve visual hierarchy and user experience. - Added new benefits and subtitles to the login interface, enhancing clarity for users. - Introduced a quick start hint for new users and a demo view button for better engagement. - Updated localization files for English, Japanese, Simplified Chinese, and Traditional Chinese to reflect new content. Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
parent
f178f486f8
commit
b1a1caa002
|
|
@ -99,25 +99,44 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
|
|||
)}
|
||||
|
||||
{/* Header Section */}
|
||||
<div className="mb-8 flex flex-col items-center gap-4">
|
||||
<div className="mb-6 flex flex-col items-center gap-3">
|
||||
<m.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={Spring.presets.smooth}
|
||||
>
|
||||
<Logo className="size-20" />
|
||||
</m.div>
|
||||
<m.div
|
||||
className="flex items-center gap-2"
|
||||
initial={{ y: 10, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={Spring.presets.smooth}
|
||||
>
|
||||
<span className="text-2xl font-semibold">
|
||||
{isRegister ? t("signin.sign_up_to") : t("signin.sign_in_to")}
|
||||
</span>
|
||||
<Folo className="size-12" />
|
||||
<Logo className="size-16" />
|
||||
</m.div>
|
||||
{isRegister ? (
|
||||
<m.div
|
||||
className="flex flex-col items-center gap-2"
|
||||
initial={{ y: 10, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={Spring.presets.smooth}
|
||||
>
|
||||
<h1 className="text-2xl font-semibold">{t("login.title")}</h1>
|
||||
<p className="text-balance text-center text-sm text-text-secondary">
|
||||
{t("login.subtitle")}
|
||||
</p>
|
||||
{/* Benefits - single line */}
|
||||
<div className="mt-1 flex items-center gap-3 text-xs text-text-tertiary">
|
||||
<span className="text-accent">✦</span>
|
||||
<span>{t("login.benefit_1")}</span>
|
||||
<span className="text-text-quaternary">·</span>
|
||||
<span>{t("login.benefit_2")}</span>
|
||||
</div>
|
||||
</m.div>
|
||||
) : (
|
||||
<m.div
|
||||
className="flex items-center gap-2"
|
||||
initial={{ y: 10, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={Spring.presets.smooth}
|
||||
>
|
||||
<span className="text-2xl font-semibold">{t("signin.sign_in_to")}</span>
|
||||
<Folo className="size-12" />
|
||||
</m.div>
|
||||
)}
|
||||
</div>
|
||||
{!IN_ELECTRON && (
|
||||
<button
|
||||
|
|
@ -141,19 +160,17 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
|
|||
)}
|
||||
</m.div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Login Providers */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{isLoading
|
||||
? // Skeleton loaders to prevent CLS
|
||||
Array.from({ length: 4 })
|
||||
.fill(0)
|
||||
.map((_, index) => (
|
||||
<div
|
||||
key={`skeleton-${index}`}
|
||||
className="relative h-12 w-full animate-pulse rounded-xl border border-fill-secondary bg-material-medium"
|
||||
/>
|
||||
))
|
||||
Array.from({ length: 4 }, (_, index) => (
|
||||
<div
|
||||
key={`login-skeleton-${index}`}
|
||||
className="relative h-12 w-full animate-pulse rounded-xl border border-fill-secondary bg-material-medium"
|
||||
/>
|
||||
))
|
||||
: providers.map(([key, provider], index) => (
|
||||
<m.div
|
||||
key={key}
|
||||
|
|
@ -198,6 +215,17 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
|
|||
</button>
|
||||
</m.div>
|
||||
))}
|
||||
{/* Quick start hint */}
|
||||
{isRegister && providers.length > 0 && !isLoading && (
|
||||
<m.p
|
||||
className="mt-1 text-center text-xs text-text-tertiary"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ ...Spring.presets.smooth, delay: 0.15 }}
|
||||
>
|
||||
{t("login.quick_start")}
|
||||
</m.p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Referral Form */}
|
||||
|
|
@ -212,7 +240,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
|
|||
)}
|
||||
|
||||
{/* Footer Links */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="text-center text-xs leading-relaxed text-text-tertiary">
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -249,16 +277,28 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
|
|||
<>
|
||||
{/* Gradient Divider */}
|
||||
<div
|
||||
className="my-6 h-px"
|
||||
className="my-4 h-px"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(to right, transparent, rgba(255, 92, 0, 0.2), transparent)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* View Demo Button */}
|
||||
{isRegister && (
|
||||
<m.button
|
||||
className="mb-2 w-full cursor-pointer text-center text-xs text-text-tertiary transition-colors hover:text-text-secondary"
|
||||
onClick={() => modal.dismiss()}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{t("login.view_demo")}
|
||||
</m.button>
|
||||
)}
|
||||
|
||||
{/* Switch Account Type */}
|
||||
<m.button
|
||||
className="group w-full cursor-pointer pb-4 text-center text-sm font-medium transition-colors"
|
||||
className="group w-full cursor-pointer pb-2 text-center text-sm font-medium transition-colors"
|
||||
onClick={() => setIsRegister(!isRegister)}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
|
|
@ -292,7 +332,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
|
|||
<div
|
||||
onClick={stopPropagation}
|
||||
tabIndex={-1}
|
||||
className="relative w-[28rem] overflow-hidden rounded-2xl border border-folo/20 bg-background p-8 shadow-2xl shadow-folo/10 backdrop-blur-xl"
|
||||
className="relative w-[28rem] overflow-hidden rounded-2xl border border-folo/20 bg-background p-6 shadow-2xl shadow-folo/10 backdrop-blur-xl"
|
||||
>
|
||||
{/* Inner glow layer */}
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -327,7 +327,7 @@ const NotLoggedInNotice: FC = () => {
|
|||
onClick={() => {
|
||||
presentLoginModal()
|
||||
}}
|
||||
className="my-1 flex items-start gap-2 border-blue/30 bg-blue/10 px-1.5 py-2 text-left text-xs leading-snug text-blue transition-colors hover:border-blue hover:bg-blue/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue/40"
|
||||
className="my-1 flex items-start gap-2 border-accent/30 bg-accent/10 px-1.5 py-2 text-left text-xs leading-snug text-accent transition-colors hover:border-accent hover:bg-accent/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
|
||||
>
|
||||
<span className="ml-1 text-lg">👤</span>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -261,6 +261,9 @@
|
|||
"feed_item.onboarding_feed": "This is an onboarding feed",
|
||||
"login.agree_to": "By continuing, you agree to our",
|
||||
"login.back": "Back",
|
||||
"login.benefit_1": "Save 1–2 hours every day on reading",
|
||||
"login.benefit_2": "Let AI highlight the most important updates",
|
||||
"login.benefit_3": "Free plan available · No credit card required",
|
||||
"login.confirm_password.label": "Confirm Password",
|
||||
"login.continueWith": "Continue with {{provider}}",
|
||||
"login.email": "Email",
|
||||
|
|
@ -274,10 +277,15 @@
|
|||
"login.password": "Password",
|
||||
"login.password_optional": "Optional",
|
||||
"login.privacy": "Privacy Policy",
|
||||
"login.quick_start": "Takes less than 30 seconds to get started.",
|
||||
"login.send_magic_link": "Send Magic Link",
|
||||
"login.signUp": "Sign up with email",
|
||||
"login.submit": "Submit",
|
||||
"login.subtitle": "This AI RSS reader reads the internet for you, cutting through noise to surface the knowledge you actually care about.",
|
||||
"login.subtitle_description": "Connect your RSS, newsletters and feeds. Let AI summarize and sort what really matters.",
|
||||
"login.terms": "Terms of Service",
|
||||
"login.title": "Welcome to Folo",
|
||||
"login.view_demo": "Or: View Demo →",
|
||||
"login.with_email.title": "Login with Email",
|
||||
"mark_all_read_button.auto_confirm_info": "Will be confirmed automatically after {{countdown}}s.",
|
||||
"mark_all_read_button.confirm": "Confirm",
|
||||
|
|
@ -338,7 +346,7 @@
|
|||
"new_user_guide.intro.title": "Vibe Reading with AI",
|
||||
"new_user_guide.selection.empty_description": "Describe what you're looking for in the AI chat and we'll recommend feeds for you.",
|
||||
"new_user_guide.selection.empty_title": "No feeds selected yet",
|
||||
"not_logged_in_notice": "You are not logged in. <br />Please <b>sign in</b> to sync your subscriptions and settings across devices.",
|
||||
"not_logged_in_notice": "Sign in to unlock AI-powered reading. <br />Save 1–2 hours daily with smart summaries and personalized feeds. <b>Free to start</b>.",
|
||||
"notify.store.default": "the store",
|
||||
"notify.store.mas": "App Store",
|
||||
"notify.store.mss": "Microsoft Store",
|
||||
|
|
|
|||
|
|
@ -258,6 +258,9 @@
|
|||
"feed_item.onboarding_feed": "これはオンボーディングフィードです",
|
||||
"login.agree_to": " 続行することで、あなたは私たちの",
|
||||
"login.back": "戻る",
|
||||
"login.benefit_1": "毎日 1–2 時間の読書時間を節約",
|
||||
"login.benefit_2": "AI が最も重要な更新をハイライト",
|
||||
"login.benefit_3": "無料プラン利用可能 · クレジットカード不要",
|
||||
"login.confirm_password.label": "パスワードの確認",
|
||||
"login.continueWith": "{{provider}} で続ける",
|
||||
"login.email": "Email",
|
||||
|
|
@ -270,10 +273,15 @@
|
|||
"login.password": "パスワード",
|
||||
"login.password_optional": "オプション",
|
||||
"login.privacy": "プライバシーポリシー",
|
||||
"login.quick_start": "30 秒以内に始められます。",
|
||||
"login.send_magic_link": "マジックリンクを送信",
|
||||
"login.signUp": "メールでサインアップ",
|
||||
"login.submit": "ログイン",
|
||||
"login.subtitle": "この AI RSS リーダーがインターネットを読み取り、ノイズを排除して、あなたが本当に気にかける知識を浮き彫りにします。",
|
||||
"login.subtitle_description": "RSS、ニュースレター、フィードを接続。AI が要約し、本当に重要なものを整理します。",
|
||||
"login.terms": "利用規約",
|
||||
"login.title": "Folo へようこそ",
|
||||
"login.view_demo": "または：デモを見る →",
|
||||
"login.with_email.title": "メールでログイン",
|
||||
"mark_all_read_button.auto_confirm_info": "{{countdown}} 秒後に自動的に確認されます。",
|
||||
"mark_all_read_button.confirm": "確認",
|
||||
|
|
@ -333,7 +341,7 @@
|
|||
"new_user_guide.intro.title": "AI と楽しむ読書体験",
|
||||
"new_user_guide.selection.empty_description": "AI チャットで知りたいテーマを伝えると、おすすめのフィードを提案します。",
|
||||
"new_user_guide.selection.empty_title": "まだフィードが選択されていません",
|
||||
"not_logged_in_notice": "ログインしていません。<br />デバイス間で購読と設定を同期するには<b>サインイン</b>してください。",
|
||||
"not_logged_in_notice": "サインインして AI 駆動の読書を解鎖。<br />スマートな要約とパーソナライズされたフィードで、毎日 1–2 時間を節約。<b>無料で始める</b>。",
|
||||
"notify.store.default": "ストア",
|
||||
"notify.store.mas": "App Store",
|
||||
"notify.store.mss": "Microsoft Store",
|
||||
|
|
|
|||
|
|
@ -260,6 +260,9 @@
|
|||
"feed_item.onboarding_feed": "这是一个入门引导订阅源",
|
||||
"login.agree_to": "继续即表示您同意我们的",
|
||||
"login.back": "返回",
|
||||
"login.benefit_1": "每天节省 1–2 小时阅读时间",
|
||||
"login.benefit_2": "让 AI 突出显示最重要的更新",
|
||||
"login.benefit_3": "提供免费计划 · 无需信用卡",
|
||||
"login.confirm_password.label": "确认密码",
|
||||
"login.continueWith": "使用 {{provider}} 继续",
|
||||
"login.email": "邮件地址",
|
||||
|
|
@ -273,10 +276,15 @@
|
|||
"login.password": "密码",
|
||||
"login.password_optional": "可选",
|
||||
"login.privacy": "隐私政策",
|
||||
"login.quick_start": "不到 30 秒即可开始使用。",
|
||||
"login.send_magic_link": "发送魔法链接",
|
||||
"login.signUp": "使用邮件地址注册",
|
||||
"login.submit": "提交",
|
||||
"login.subtitle": "这款 AI RSS 阅读器为您阅读互联网，过滤噪音，呈现您真正关心的知识。",
|
||||
"login.subtitle_description": "连接您的 RSS、新闻通讯和订阅源。让 AI 总结和整理真正重要的内容。",
|
||||
"login.terms": "服务条款",
|
||||
"login.title": "欢迎使用 Folo",
|
||||
"login.view_demo": "或者：先看看 Demo →",
|
||||
"login.with_email.title": "使用邮件地址登录",
|
||||
"mark_all_read_button.auto_confirm_info": "{{countdown}} 秒后自动确认。",
|
||||
"mark_all_read_button.confirm": "确认",
|
||||
|
|
@ -337,7 +345,7 @@
|
|||
"new_user_guide.intro.title": "和 AI 一起沉浸式阅读",
|
||||
"new_user_guide.selection.empty_description": "在 AI 对话里描述你的需求，我们会为你推荐来源。",
|
||||
"new_user_guide.selection.empty_title": "还没有选择任何订阅源",
|
||||
"not_logged_in_notice": "您尚未登录。<br />请<b>登录</b>以同步您的订阅和设置到其他设备。",
|
||||
"not_logged_in_notice": "登录以解锁 AI 驱动阅读。<br />通过智能摘要和个性化订阅源，每天节省 1–2 小时。<b>免费开始</b>。",
|
||||
"notify.store.default": "商店",
|
||||
"notify.store.mas": "App Store",
|
||||
"notify.store.mss": "Microsoft Store",
|
||||
|
|
|
|||
|
|
@ -254,8 +254,11 @@
|
|||
"feed_item.claimed_list": "已認領列表",
|
||||
"feed_item.error_since": "RSS 摘要失效：",
|
||||
"feed_item.not_publicly_visible": "未公開顯示於您的個人頁面",
|
||||
"login.agree_to": "繼續即表示你同意我們的",
|
||||
"login.agree_to": "繼續即表示您同意我們的",
|
||||
"login.back": "返回",
|
||||
"login.benefit_1": "每天節省 1–2 小時閱讀時間",
|
||||
"login.benefit_2": "讓 AI 突出顯示最重要的更新",
|
||||
"login.benefit_3": "提供免費方案 · 無需信用卡",
|
||||
"login.confirm_password.label": "確認密碼",
|
||||
"login.continueWith": "透過 {{provider}} 繼續",
|
||||
"login.email": "電子信箱",
|
||||
|
|
@ -269,10 +272,15 @@
|
|||
"login.password": "密碼",
|
||||
"login.password_optional": "可選",
|
||||
"login.privacy": "隱私政策",
|
||||
"login.quick_start": "不到 30 秒即可開始使用。",
|
||||
"login.send_magic_link": "發送魔法連結",
|
||||
"login.signUp": "使用電子信箱註冊",
|
||||
"login.submit": "送出",
|
||||
"login.subtitle": "這款 AI RSS 閱讀器為您閱讀網際網路，過濾噪音，呈現您真正關心的知識。",
|
||||
"login.subtitle_description": "連接您的 RSS、新聞通訊和訂閱源。讓 AI 總結和整理真正重要的內容。",
|
||||
"login.terms": "服務條款",
|
||||
"login.title": "歡迎使用 Folo",
|
||||
"login.view_demo": "或者：先看看 Demo →",
|
||||
"login.with_email.title": "使用電子信箱登入",
|
||||
"mark_all_read_button.auto_confirm_info": "將在 {{countdown}} 秒後自動確認。",
|
||||
"mark_all_read_button.confirm": "確認",
|
||||
|
|
@ -332,6 +340,7 @@
|
|||
"new_user_guide.intro.title": "和 AI 一起沉浸式閱讀",
|
||||
"new_user_guide.selection.empty_description": "在 AI 對話中描述您的需求，我們會推薦合適的來源。",
|
||||
"new_user_guide.selection.empty_title": "尚未選擇任何來源",
|
||||
"not_logged_in_notice": "登入以解鎖 AI 驅動閱讀。<br />透過智能摘要和個人化訂閱源，每天節省 1–2 小時。<b>免費開始</b>。",
|
||||
"notify.store.default": "商店",
|
||||
"notify.store.mas": "App Store",
|
||||
"notify.store.mss": "Microsoft Store",
|
||||
|
|
|
|||
Loading…
Reference in New Issue