前端后端【免费下载链接】workout-cool Modern open-source fitness coaching platform. Create workout plans, track progress, and access a comprehensive exercise database.项目地址https://gitcode.com/gh_mirrors/wo/workout-cool点击查看免费下载本篇文章围绕 Workout.cool开源健身训练平台付费页面的完整实现展开以 src/features/premium/ui/README.md 为设计蓝图逐层拆解其组件结构、设计系统、心理触发机制、移动端适配与支付转化闭环并结合仓库源码给出可直接复用的实现证据。读完本文你将掌握一套面向健身社区、以使命驱动而非硬推销为核心的定价页面落地方法以及它在 Next.js Tailwind CSS React Query 技术栈下的具体编码形态。一、架构总览面向转化的 Z 型布局README 明确指出定价页面遵循Z-PatternZ 型布局设计即用户视线按左上 → 右上 → 左下 → 右下的 Z 字形轨迹扫过页面依次经历品牌信任建立、核心价值展示、计划对比、行动召唤四个阶段。这套布局配合健身人群特有的心理触发点目标是提升从浏览到付费的转化率。组件结构README 中规划的组件树如下实际仓库目录见 src/features/premium/ui/src/features/premium/ui/ ├── premium-upgrade-card.tsx # Main orchestrator component总编排组件 ├── pricing-hero-section.tsx # Hero with mission statement使命宣言 Hero ├── feature-comparison-table.tsx # Detailed feature breakdown功能对比表 ├── pricing-faq.tsx # Conversion-oriented FAQ转化导向 FAQ ├── pricing-testimonials.tsx # Social proof carousel社会证明轮播 ├── mobile-sticky-cta.tsx # Mobile conversion booster移动端转化助推 └── conversion-flow-notification.tsx # Existing notification转化流通知需要指出的是README 中列出的mobile-sticky-cta.tsx在 src/features/premium/ui/ 目录中当前并不存在从 app/[locale]/(app)/premium/page.tsx 可以看到移动端粘性 CTAMobileStickyCard仍处于注释掉的状态属于规划中的后续能力。目录内实际落地的是其余六个组件统一由 index.ts 导出// Premium UI Components export { PremiumUpgradeCard } from ./premium-upgrade-card; export { ConversionFlowNotification } from ./conversion-flow-notification; // New Pricing Page Components export { PricingHeroSection } from ./pricing-hero-section; export { FeatureComparisonTable } from ./feature-comparison-table; export { PricingFAQ } from ./pricing-faq; export { PricingTestimonials } from ./pricing-testimonials;编排关系从 premium-upgrade-card.tsx 的返回结构可以看清整个页面的段落顺序ConversionFlowNotification转化流通知页面顶部固定浮层PricingHeroSection使命宣言 Hero 社区数据使命驱动横幅服务器成本 / 支持者人数 / 早期名额稀缺三档计划网格含月付/年付切换开关信任元素条GDPR 合规、退款保障、随时取消、安全支付FeatureComparisonTable功能对比表PricingFAQ常见问题手风琴最终 CTA 区吉祥物 社区价值观 引语该编排组件同时是路由页面的直接消费者app/[locale]/(app)/premium/page.tsx 中的PremiumPage只需渲染PremiumUpgradeCard /并导出面向 SEO 的metadata标题、描述、Open Graph、Twitter Card。二、设计系统健身属性的色彩与字体README 定义了一套以能量、表现、成就为语义的配色体系在源码中全部以 Tailwind 任意值arbitrary value形式落地语义色值用途源码中的典型位置Primary#FF6B35橙色·能量Hero 渐变起点、徽章、左侧箭头/激活圆点Secondary#00D4AA薄荷绿·表现Premium 卡片渐变、对比表 Premium 列高亮Success#22C55E绿色·成就FREE 徽章、Check 图标、支持者计数、年付折扣标签Warning#F59E0B橙色·紧迫稀缺提示、Star 图标、评分这些色值在代码中直接以from-[#FF6B35]、border-[#00D4AA]/30等形式出现例如 premium-upgrade-card.tsx 中 Premium 卡片使用了border-[#00D4AA]/30描边与shadow-[#00D4AA]/10阴影FREE 卡片的绿色徽章来自bg-[#22C55E]。深色模式下通过dark:bg-gray-950/dark:from-[#FF6B35]/10等变体整体降暗。排版层面README 规定的主字体为Inter / Poppins层级为H1(3.5rem) → H2(2.5rem) → H3(1.75rem) → Body(1rem)。实际实现中 Hero 标题在 pricing-hero-section.tsx 使用text-3xl md:text-6xl font-black移动端 3rem、桌面 6rem比 README 的 3.5rem 更大胆符合健身社区冲击力优先的视觉诉求。三、计划结构FREE / SUPPORTER / PREMIUM 三档定位README 规划了三个档位每一档都有明确的徽章、图标、颜色、价值主张与 CTA 文案档位价格徽章文案图标颜色价值主张CTAFREE (CORE)€0/永久Open-Source • Always FreeGithub绿#22C55E所有核心训练功能Start Training FreeSUPPORTER€4.99/月Support the MissionHeart橙#FF6B35帮助支付服务器成本 额外功能Support for €4.99PREMIUM€9.99/月MOST POPULAR • For enthusiastsCrown青#00D4AA全部功能 抢先体验Go Premium €9.99其中 PREMIUM 被刻意设计为视觉焦点Scale 105% 放大 阴影效果这在 premium-upgrade-card.tsx 中体现为transform scale-105 shadow-xl shadow-[#00D4AA]/10hover 时进一步放大到scale-[1.07]并上移。从源码看三档规划的当前实现状态从 premium-upgrade-card.tsx 的渲染逻辑看当前落地的计划网格是两卡布局md:grid-cols-2 max-w-5xlFREE 卡片绿色描边、Github 图标、禁用 CTA 显示当前计划与 PREMIUM 卡片青绿渐变、Crown 图标、年付时叠加橙色折扣角标。README 中描述的 SUPPORTER 档位以及Desktop: 3-column布局属于设计蓝图尚未在本次实现的卡片网格中出现——文章写作时需注意区分设计文档与当前代码。另一个重要差异是价格README 写的是 €4.99 / €9.99 固定值而代码中价格是动态获取的use-premium-plans.ts 通过fetch(/api/premium/plans?tz...)拉取计划列表带 30 分钟staleTime接口返回后取internalId以premium-monthly/premium-yearly开头的计划分别映射为monthlyPrice与priceYearly请求尚未返回时的回退默认值为7.9月与49.0年货币默认EUR见 premium-upgrade-card.tsx。价格展示通过Intl.NumberFormat按当前 locale 与货币格式化EUR 保留两位小数其他货币为 0 位小数并支持月付/年付切换年付价格在 UI 上会额外折算为每月等价金额currentPrice / 12显示在绿色胶囊标签中premium-upgrade-card.tsx。定价的区域化API 层证据动态定价并非纯前端假数据。app/api/premium/plans/route.ts 实现了平台无关的区域探测优先读取x-vercel-ip-country、cf-ipcountry、x-country-code、x-real-ip-country等任意可用 Geo 头按国家分组映射到US / UK / BR / RU / CN / LATAM / EU区域若没有 Geo 头则回退解析accept-language如en-us→ US、pt-br→ BR、zh→ CN并通过tz查询参数辅助判断。据此推断不同区域的用户会拿到对应区域化定价的计划数据再交由前端渲染——这也解释了为什么 README 的 € 计价只是默认蓝图。四、心理学触发机制四个层次的转化设计README 将转化策略归纳为四类心理触发点源码中均有对应落点1. Mission-Driven Urgency使命驱动的紧迫感透明横幅展示真实成本与稀缺名额README 中的文案示例为€450/month server costs to cover; // 需覆盖的服务器月成本 234 supporters helping the mission; // 正在支持使命的人数 Limited early access spots; // 有限的早期体验名额这些文案在实现中被替换为 i18n key如premium.mission.supporters_count、premium.mission.limited渲染在两个并排的横幅项中左边是Heart图标 绿色支持者计数右边是Zap图标 琥珀色早期名额稀缺premium-upgrade-card.tsx。2. Open-Source Trust开源信任背书GitHub 集成在视觉上占据显著位置FREE 计划图标直接用 Github 图标Hero 徽章也带 Github 图标自托管self-hosting始终被提及仓库根目录提供 docs/SELF-HOSTING.md强调代码透明、无供应商锁定。最终 CTA 区的三大价值观卡片中第二项就是 Github 图标 开源相关文案premium-upgrade-card.tsx。3. Community Social Proof社区社会证明README 中的示例数据12.4K Active athletes; // 活跃运动员 1.2M Visits / mo; // 月访问量 4.9/5 Community rating; // 社区评分 23% Average progression; // 平均进步幅度这些数字在 Hero 区被抽象为四个统计格运动员数、训练组数、评分、进步幅度文本全部来自 i18n keypremium.hero.stats.*意味着实际数值由文案团队维护而非硬编码死数据。Testimonials 组件底部另有社区统计条2,500 会员、89% 达成目标、4.9/5 平均评分pricing-testimonials.tsx。注意上述数字均出自设计文档或组件内的示例文案属于营销内容而非经核实的运营数据引用时应保持同样措辞不额外夸大。4. Fitness-Specific FOMO健身人群专属的错失恐惧AI 教练功能的抢先体验early access面向发烧友的 Beta 功能专属社区访问专业模板Powerlifting 力量举、Bodybuilding 健美在功能对比表中Early Access / Beta类特性由Target图标以橙色渲染见 feature-comparison-table.tsxPro Templates则以Star图标 琥珀色标注对应 README 中即将上线的定位。五、移动端优化粘性 CTA 与响应式行为README 规划的MobileStickyCard行为如下移动端访问5 秒后浮现可关闭的遮罩背景dismissible backdrop overlay一键直达 Premium 升级与登录流程集成当前实现中该组件尚未启用app/[locale]/(app)/premium/page.tsx 中MobileStickyCard /被注释。不过延迟出现 自动隐藏这一模式已在另一个组件中落地ConversionFlowNotification在检测到待处理结账pending checkout后显示通知浮层5 秒后自动隐藏conversion-flow-notification.tsx可视为粘性 CTA 机制的先行验证。响应式断点策略README 原文Mobile计划纵向堆叠配合粘性 CTATablet21 列布局Desktop3 列布局PREMIUM 居中强调当前代码的网格为grid gap-16 sm:gap-8 md:grid-cols-2两列布局三列形态随 SUPPORTER 档位一并属于规划状态。对比表与轮播则已实现完整响应式对比表头sticky top-0吸顶保证列对齐可见feature-comparison-table.tsxTestimonials 在移动端显示单卡、桌面端显示 3 卡窗口hidden md:grid md:grid-cols-3。六、转化流程登录前与登录后的两条链路README 定义的完整转化流程与实际代码完全对应非登录用户Non-authenticated Users点击升级 → 存储待处理结账pending checkout跳转登录页并携带 return URL登录成功后 → 自动触发结账完成支付 → 返回应用源码证据在 premium-upgrade-card.tsx 的handleUpgrade未登录时调用storePendingCheckout(planId)然后router.push(/auth/signin?redirect encodeURIComponent(/${locale}/premium))。登录后的自动续接由useEffect完成检测到已认证且存在 pending checkout 时先clearPendingCheckout()再自动调用handleCheckout(planId)premium-upgrade-card.tsx。待处理结账的底层存储实现在 use-pending-checkout.ts写入localStorage的pendingCheckoutkey结构为{ planId, timestamp }并做一小时有效期校验——超时的待处理结账会被自动清除避免陈旧状态引发错误结账。已登录用户Authenticated Users点击升级 → 直接进入 Stripe Checkout支付成功 → Webhook 更新订阅状态跳转回来 → Premium 功能解锁源码证据handleCheckout通过fetch(/api/premium/checkout, { method: POST, body: JSON.stringify({ planId }) })创建结账会话成功后window.location.href result.checkoutUrl跳转 Stripepremium-upgrade-card.tsx。支付回调由 app/api/webhooks/stripe/route.ts 与 app/api/webhooks/revenuecat/route.ts 处理。支付成功返回后的状态刷新由usePremiumRedirect完成轮询到isPremium变为 true 且 URL 带return参数时延迟 1 秒后router.push(returnUrl)use-premium-redirect.ts。延迟 1 秒是为了等待订阅状态在服务端完全落库避免跳转后仍显示旧状态。另外PremiumUpgradeCard对已是 Premium 的用户渲染已支持状态卡Crown图标 绿色对勾角标 呼吸灯动画animate-pulse文案来自premium.premium_active.*premium-upgrade-card.tsx。七、分析与测试关键指标与 A/B 实验README 给出两组可量化的运营框架核心追踪指标各计划的转化率Free→Supporter、Free→Premium漏斗完成度View→Click→Signup→Payment驱动升级的功能使用情况移动端 vs 桌面端的转化模式差异A/B 测试候选点计划排列顺序Free 在前 vs Premium 在前定价Supporter 定 €4.99 vs €6.99CTA 文案Support Mission vs UpgradeHero 信息表述的变体这些维度与仓库中的可观测设施相衔接应用侧有 src/shared/lib/analytics/ 分析封装服务端提供 app/api/analytics/premium/route.ts 用于采集 Premium 相关事件为上述漏斗与 A/B 指标提供数据通道。八、关键组件逐一拆解PricingHeroSection使命宣言 社区统计渐变背景from-[#FF6B35]/5 to-[#00D4AA]/5加blur-3xl光晕顶部 Github 徽章强调开源身份大标题后跟emoji社区统计卡片backdrop-blur-sm半透明底 4 格数据Users / TrendingUp / Heart / Zap 图标对应运动员、训练组、评分、进步吉祥物图片WorkoutCoolLove.png配合Sparkles光效pricing-hero-section.tsxFeatureComparisonTable7 大分类的功能对比README 描述的7 个分类功能组在当前源码中体现为 5 个分类装备、追踪、计划、社区、支持feature-comparison-table.tsx共 17 个功能行。核心机制吸顶表头sticky top-0 z-10保证长表格滚动时计划列始终可见图标化指标Check支持/X不支持/∞无限量/Star模板/Target抢先体验renderFeatureValue统一处理boolean | string双态feature-comparison-table.tsxPremium 列整列以bg-[#00D4AA]/5底色高亮引导视线聚焦付费列PricingTestimonials自动轮播的社会证明5 秒自动轮播用户手动切换后暂停自动播放isAutoPlaying状态控制pricing-testimonials.tsx每条 testimonial 附带result成果标签如 15kg bench press与metric周期如 3 months用TrendingUp图标增强数据感桌面端一次展示 3 张中间卡scale-105 橙色描边强调底部圆点导航 左右箭头注意源码顶部标注// TODO: Add testimonials当前内容为占位示例数据头像统一使用 public/images/placeholders/coach-avatar.png接入真实内容时建议将文案迁移到 i18n 体系与 Hero 区统计一致并给轮播图片加loadinglazyPricingFAQ一次只开一个的手风琴openIndex状态保证同时只展开一个问题再点当前项则收起openIndex index ? null : indexpricing-faq.tsx10 个 FAQ 项全部来自 i18n keypremium.faq.items.*底部额外支持区块列出来自社区、讨论区、路线图的三种求助渠道用于承接未被 FAQ 覆盖的疑虑九、接入方式一个组件撑起整页README 给出的最小用法如下import { PremiumUpgradeCard } from /features/premium/ui; export default function PremiumPage() { return ( div classNamemin-h-screen bg-white dark:bg-gray-950 PremiumUpgradeCard / /div ); }这正是 app/[locale]/(app)/premium/page.tsx 的真实形态页面层只负责导出metadataSEO/OG与渲染编排组件全部交互状态选中的计划、月付/年付、结账 mutation、pending checkout 检测都被封装在PremiumUpgradeCard内部。i18n 方面组件统一使用useI18n()/useCurrentLocale()来自 locales/client.ts所有营销文案标题、徽章、特性、FAQ均以 key 形式维护在 locales/ 的多语言文件中支持 en / es / fr / pt / ru / zh-CN 六种语言。十、内容策略语气与关键信息README 定义了页面的沟通基调这也是整套 UI 区别于普通 SaaS 定价页的灵魂语气Tone of Voice真实、透明Authentic and transparent对健身充满热情Passionate about fitness社区导向Community-focused不采用攻击性销售Non-aggressive sales approach关键信息Key Messages15 years of passion, redesigned from scratch15 年热忱从零重新设计Not for money, but to maintain this labor of love不为赚钱只为维系这份热爱之作Core features always FREE核心功能永远免费Transparent like our code, solid like our PRs像代码一样透明像 PR 一样扎实最终 CTA 区的引语卡片quote author与三大价值观卡片社区/开源/支持使命正是这些信息的落地呈现。README 的结语原则Transparent comme notre code, solide comme nos PRs也点明了整套设计的态度用开源透明换取信任用真诚邀请代替强制推销。十一、技术依赖与性能README 明确的技术栈与代码中的实际依赖一致依赖用途源码证据React Querytanstack/react-query计划数据拉取与结账 mutationusePremiumPlans、checkoutMutationLucide React图标系统Crown/Zap/Heart/Check/LogIn/Github/Users/Star/Target/ChevronLeft...Tailwind CSS全站样式任意值色板 暗色变体TypeScript类型安全Feature/FeatureCategory/Testimonial/PremiumPlan等接口Next.js服务端渲染 路由useRouter、app/[locale]/(app)/premium/page.tsx性能策略README 原文 代码印证轮播图片懒加载虽然示例头像较小README 明确要求loadinglazy组件用 Next.jsImage组件承载CSS transforms优化动画缩放/位移全部用scale、translate类实现避免触发重排交互最小化 JavaScript展开/收起、轮播均以轻量useState完成SSR 快速加载页面为服务端组件PremiumPage无use client仅叶组件标记客户端渲染保证首屏 HTML 直达十二、小结从设计文档到生产实现的落差清单对于想要参考或复刻这套定价页的开发者建议以 README 为蓝图、以源码为基准重点关注以下文档 vs 现状的差异SUPPORTER 档位未渲染当前网格只有 FREE / PREMIUM 两卡三档与三列布局待实现MobileStickyCard 未启用移动端粘性 CTA 在页面中被注释仅ConversionFlowNotification实现了延迟出现 自动隐藏的雏形价格动态化README 的 €4.99 / €9.99 是默认蓝图实际价格由 app/api/premium/plans/route.ts 按区域返回前端回退值为月 €7.9 / 年 €49Testimonials 为占位数据当前是硬编码示例需替换为真实社区内容并接入 i18n营销数字需文案维护Hero 统计、社区数据均为 i18n key运营侧可随时调整而不改动代码。总体来看这是一套使命驱动、开源透明、健身人群定向的定价页面实现Z 型布局引导视线三档计划以视觉焦点突出 PREMIUM四层心理触发贯穿 Hero、横幅、对比表与 FAQ而未登录 → 暂存结账 → 登录 → 自动续接 → Webhook 回调 → 解锁的闭环则由 use-pending-checkout.ts、use-premium-redirect.ts 与 app/api/premium/checkout/route.ts 共同保证。对于需要快速落地同类型转化页面的团队这份设计文档 可运行源码的组合本身就是一份完整可参考的工程模板。赞分享前端后端【免费下载链接】workout-cool Modern open-source fitness coaching platform. Create workout plans, track progress, and access a comprehensive exercise database.项目地址https://gitcode.com/gh_mirrors/wo/workout-cool点击查看免费下载相关推荐Reloader架构设计组件划分与交互流程Reloader架构设计组件划分与交互流程 Reloader作为Kubernetes生态中的配置更新控制器解决了ConfigMap/Secret变更后自动触云原生运维Apache RocketMQ 架构设计深度解析核心组件、部署模型与消息流转全流程Apache RocketMQ 架构设计深度解析核心组件、部署模型与消息流转全流程 导读 本文以 RocketMQ 官方架构文档为主线系统讲解 Apache消息队列后端微服务流处理从solved-by-flexbox学CSS架构组件化布局设计思想从solved by flexbox学CSS架构组件化布局设计思想 你是否还在为CSS布局混乱而头疼是否在面对复杂界面时难以维护样式代码本文将通过分析开源示例工程上一篇gpui-kit 指南用 gpui-base HoverCard 原语构建带延迟的悬停浮层卡片下一篇OpenClaw macOS 应用开发与签名实战指南从快速开发到分发打包创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考