68 lines
1.9 KiB
TypeScript
68 lines
1.9 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;
|
|
};
|
|
|
|
export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
|
|
const [restoreDate, setRestoreDate] = useState<string>("");
|
|
useEffect(() => {
|
|
setRestoreDate(formatRestoreDateShort());
|
|
}, []);
|
|
|
|
return (
|
|
<section className={styles.section} style={{ paddingBottom: "2rem" }}>
|
|
<div
|
|
className={`${styles.card} animate__animated animate__zoomIn`}
|
|
style={{
|
|
maxWidth: "560px",
|
|
margin: "0 auto",
|
|
padding: "1.5rem",
|
|
textAlign: "center",
|
|
animationDelay: "0.2s",
|
|
animationFillMode: "both",
|
|
}}
|
|
>
|
|
<h2 style={{ fontSize: "1.35rem", margin: "0 0 0.5rem", color: "var(--foreground)" }}>
|
|
限时特惠 · {restoreDate || "—"}恢复原价
|
|
</h2>
|
|
<p style={{ fontSize: "0.9rem", color: "var(--muted-foreground)", margin: "0 0 1rem" }}>
|
|
阶梯定价 · 数字交付 · 不支持退款
|
|
</p>
|
|
<p style={{ fontSize: "0.8rem", color: "var(--muted-foreground)", marginBottom: "1.5rem" }}>
|
|
🚫 不适合躺赚、现金流紧张
|
|
</p>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
gap: "1rem",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={onJoin}
|
|
className={`${styles.btnPrimary} ${styles.btnLarge}`}
|
|
>
|
|
🔒 立即加入
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onLogin}
|
|
className={styles.btnSecondary}
|
|
>
|
|
已有账号登录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|