89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { formatRestoreDateShort } from "@/config/promo.config";
|
||
import styles from "../vip.module.css";
|
||
|
||
type LandingCTAProps = {
|
||
onJoin: () => void;
|
||
onLogin: () => void;
|
||
};
|
||
|
||
/** 设为 true 可重新展示「适合你 / 请止步」区块（下方 JSX 与 vip.module.css 内样式均保留） */
|
||
const SHOW_CTA_AUDIENCE_BOUNDARY = false;
|
||
|
||
export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
|
||
const [restoreDate, setRestoreDate] = useState<string>("");
|
||
useEffect(() => {
|
||
setRestoreDate(formatRestoreDateShort());
|
||
}, []);
|
||
|
||
return (
|
||
<section className={`${styles.section} ${styles.ctaSection}`} aria-labelledby="cta-heading">
|
||
<div className={`${styles.ctaInner} animate__animated animate__zoomIn`} style={{ animationDelay: "0.15s", animationFillMode: "both" }}>
|
||
<div className={styles.ctaGlow} aria-hidden />
|
||
<div className={styles.ctaCard}>
|
||
<h2 id="cta-heading" className={styles.ctaPromoLine}>
|
||
<span className={styles.ctaPromoClickable} aria-disabled="true">
|
||
<span className={styles.ctaBadgePulse} aria-hidden />
|
||
限时特惠
|
||
</span>
|
||
<span className={styles.ctaPromoDivider} aria-hidden>
|
||
·
|
||
</span>
|
||
<span className={styles.ctaPromoMain}>
|
||
<span className={styles.ctaHighlight}>{restoreDate || "—"}</span>
|
||
<span className={styles.ctaPromoSuffix}>恢复原价</span>
|
||
</span>
|
||
</h2>
|
||
<div className={styles.ctaChips}>
|
||
<span className={styles.ctaChip}>阶梯定价</span>
|
||
<span className={styles.ctaChip}>数字交付</span>
|
||
<span className={styles.ctaChip}>持续更新</span>
|
||
<span className={styles.ctaChip}>不支持退款</span>
|
||
</div>
|
||
<div
|
||
className={`${styles.ctaBoundary} ${SHOW_CTA_AUDIENCE_BOUNDARY ? "" : styles.ctaBoundaryHidden}`}
|
||
role="note"
|
||
aria-hidden={!SHOW_CTA_AUDIENCE_BOUNDARY}
|
||
>
|
||
<div className={styles.ctaBoundarySheen} aria-hidden />
|
||
<div className={styles.ctaBoundaryInner}>
|
||
<p className={styles.ctaBoundaryPos}>
|
||
<span className={styles.ctaBoundaryMark} aria-hidden>
|
||
✦
|
||
</span>
|
||
<span>
|
||
<strong className={styles.ctaBoundaryStrong}>适合你：</strong>
|
||
愿意投入行动、认真做增长与出海的同行者
|
||
</span>
|
||
</p>
|
||
<p className={styles.ctaBoundaryNeg}>
|
||
<span className={styles.ctaBoundaryMarkNeg} aria-hidden>
|
||
·
|
||
</span>
|
||
<span>
|
||
<strong className={styles.ctaBoundaryStrongNeg}>请止步：</strong>
|
||
指望躺赚，或当下现金流极度紧张的朋友
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className={styles.ctaActions}>
|
||
<button
|
||
type="button"
|
||
onClick={onJoin}
|
||
className={`${styles.btnPrimary} ${styles.btnLarge} ${styles.ctaBtnPrimary}`}
|
||
>
|
||
🔒 立即加入
|
||
</button>
|
||
<button type="button" onClick={onLogin} className={styles.ctaBtnSecondary}>
|
||
已有账号登录
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|