Claude
e88a99626d
Add a new /subscription route showing three VIP membership plans (Monthly, Quarterly, Annual) with a pink→peach banner, per-plan gradient price bars, a benefits card, a mock activate CTA, and an agreement checkbox. - New reusable <Checkbox /> in src/app/_components/core for the legal agreement toggle - Hardcoded SUBSCRIPTION_PLANS constant in src/data/constants - New SubscriptionScreen composed of 7 colocated components (back link, user row, banner, plan card, benefits card, CTA button) with CSS Modules matching the existing design-token system - Route registered as protected and reached from /sidebar "Membership" - Mock CTA: window.alert + router.push(/chat) — no payment calls Co-Authored-By: Claude <noreply@anthropic.com>
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
"use client";
|
|
/**
|
|
* 订阅权益卡片
|
|
*
|
|
* 视觉规格（与设计稿对齐）：
|
|
* - 白色卡片，--radius-xl 圆角
|
|
* - 顶部粉色渐变条：居中白色标题
|
|
* - 主体：1./2./3./4. 编号列表
|
|
* - 行间细分隔线
|
|
*/
|
|
import styles from "./subscription-benefits-card.module.css";
|
|
|
|
export interface SubscriptionBenefitsCardProps {
|
|
title: string;
|
|
items: readonly string[];
|
|
className?: string;
|
|
}
|
|
|
|
export function SubscriptionBenefitsCard({
|
|
title,
|
|
items,
|
|
className,
|
|
}: SubscriptionBenefitsCardProps) {
|
|
return (
|
|
<section
|
|
className={[styles.card, className].filter(Boolean).join(" ")}
|
|
>
|
|
<header className={styles.header}>
|
|
<h2 className={styles.title}>{title}</h2>
|
|
</header>
|
|
<ol className={styles.list}>
|
|
{items.map((item, idx) => (
|
|
<li key={idx} className={styles.item}>
|
|
<span className={styles.numeral}>{idx + 1}.</span>
|
|
<span className={styles.text}>{item}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
);
|
|
}
|