eric/gitlab-instance-0a899031_nomadvip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-11 23:47:45 -05:00
parent 296d703307
commit 0c2ccadb6b
35 changed files with 2399 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/vip/components/landing/AssetStats.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import { ASSET_STATS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";
const STAT_ITEMS = [
{ key: "topics", label: "模块" },
{ key: "ebooks", label: "电子书" },
{ key: "videos", label: "视频" },
{ key: "templates", label: "模板" },
{ key: "updateFrequency", label: "更新" },
] as const;
export function AssetStats() {
return (
<section className={styles.section}>
<div
className={`${styles.statsGrid} animate__animated animate__fadeInUp`}
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
>
{STAT_ITEMS.map(({ key, label }, i) => {
const value =
key === "updateFrequency"
? ASSET_STATS[key]
: String(ASSET_STATS[key as keyof typeof ASSET_STATS]);
return (
<div
key={key}
className={styles.card}
style={{
textAlign: "center",
animationDelay: `${0.25 + i * 0.05}s`,
animationFillMode: "both",
}}
>
<div className={styles.bigNumber}>{value}</div>
<div className={styles.bigNumberLabel}>{label}</div>
</div>
);
})}
</div>
</section>
);
}

37
app/vip/components/landing/CommunityPreview.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import { COMMUNITY_PREVIEW } from "@/app/data/vip.mock";
import styles from "../vip.module.css";
export function CommunityPreview() {
return (
<section className={styles.section}>
<h2 className={styles.sectionTitle}>社区价值</h2>
<div
className="animate__animated animate__fadeInUp"
style={{
display: "flex",
flexDirection: "column",
gap: "0.75rem",
animationDelay: "0.2s",
animationFillMode: "both",
}}
>
{COMMUNITY_PREVIEW.map((item, i) => (
<div
key={i}
className={styles.card}
style={{
display: "flex",
alignItems: "center",
gap: "0.75rem",
}}
>
<span style={{ fontSize: "1.5rem" }}>{item.icon}</span>
<span style={{ color: "var(--foreground)" }}>{item.text}</span>
</div>
))}
</div>
</section>
);
}

87
app/vip/components/landing/CompareSection.tsx Normal file
View File

@@ -0,0 +1,87 @@
"use client";
import { COMPARE_ITEMS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";
export function CompareSection() {
return (
<section className={styles.section}>
<h2 className={styles.sectionTitle}>单品 vs 会员</h2>
<p className={styles.sectionDesc}>一次付费，全部解锁</p>
<div
className="animate__animated animate__fadeInUp"
style={{
overflow: "hidden",
borderRadius: "12px",
border: "1px solid var(--border)",
animationDelay: "0.25s",
animationFillMode: "both",
}}
>
<table
style={{
width: "100%",
borderCollapse: "collapse",
fontSize: "0.9rem",
}}
>
<thead>
<tr style={{ background: "var(--muted)" }}>
<th
style={{
padding: "0.75rem 1rem",
textAlign: "left",
fontWeight: 600,
color: "var(--foreground)",
}}
>
权益
</th>
<th
style={{
padding: "0.75rem 1rem",
textAlign: "center",
fontWeight: 600,
color: "var(--muted-foreground)",
}}
>
单品
</th>
<th
style={{
padding: "0.75rem 1rem",
textAlign: "center",
fontWeight: 600,
color: "var(--accent)",
}}
>
会员
</th>
</tr>
</thead>
<tbody>
{COMPARE_ITEMS.map((row, i) => (
<tr
key={i}
style={{
borderTop: "1px solid var(--border)",
background: i % 2 === 1 ? "var(--muted)" : "transparent",
}}
>
<td style={{ padding: "0.75rem 1rem", color: "var(--foreground)" }}>
{row.feature}
</td>
<td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--muted-foreground)" }}>
{row.single}
</td>
<td style={{ padding: "0.75rem 1rem", textAlign: "center", color: "var(--accent)" }}>
{row.member}
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
);
}

58
app/vip/components/landing/FAQSection.tsx Normal file
View File

@@ -0,0 +1,58 @@
"use client";
import { useState } from "react";
import { FAQ_ITEMS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";
export function FAQSection() {
const [openIndex, setOpenIndex] = useState<number | null>(null);
return (
<section className={styles.section}>
<h2 className={styles.sectionTitle}>常见问题</h2>
<div
className="animate__animated animate__fadeInUp"
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
>
{FAQ_ITEMS.map((item, i) => (
<div
key={i}
className={styles.card}
style={{
marginBottom: "0.75rem",
cursor: "pointer",
}}
onClick={() => setOpenIndex(openIndex === i ? null : i)}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
fontWeight: 500,
color: "var(--foreground)",
}}
>
{item.q}
<span style={{ fontSize: "1.2rem", transition: "transform 0.2s", transform: openIndex === i ? "rotate(180deg)" : "none" }}>
▼
</span>
</div>
{openIndex === i && (
<p
style={{
marginTop: "0.75rem",
fontSize: "0.9rem",
color: "var(--muted-foreground)",
lineHeight: 1.5,
}}
>
{item.a}
</p>
)}
</div>
))}
</div>
</section>
);
}

61
app/vip/components/landing/LandingCTA.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client";
import { formatRestoreDateShort } from "@/config/promo.config";
import styles from "../vip.module.css";
type LandingCTAProps = {
onJoin: () => void;
onLogin: () => void;
};
export function LandingCTA({ onJoin, onLogin }: LandingCTAProps) {
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)" }}>
限时特惠 · {formatRestoreDateShort()}恢复原价
</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>
);
}

55
app/vip/components/landing/LandingHero.tsx Normal file
View File

@@ -0,0 +1,55 @@
"use client";
import styles from "../vip.module.css";
export function LandingHero() {
return (
<section className={styles.section} style={{ paddingTop: "2rem", textAlign: "center" }}>
<p
className="animate__animated animate__fadeInDown"
style={{
display: "inline-block",
fontSize: "0.875rem",
color: "var(--muted-foreground)",
background: "var(--card)",
padding: "0.35rem 0.85rem",
borderRadius: "9999px",
border: "1px solid var(--border)",
marginBottom: "1rem",
animationDelay: "0.1s",
animationFillMode: "both",
}}
>
异度星球会员中心
</p>
<h1
className="animate__animated animate__fadeInDown"
style={{
fontSize: "clamp(2rem, 6vw, 3rem)",
fontWeight: 700,
margin: "0 0 0.5rem",
letterSpacing: "-0.02em",
lineHeight: 1.2,
animationDelay: "0.2s",
animationFillMode: "both",
}}
>
全模块解锁 · 持续更新 · 抱团出海
</h1>
<p
className="animate__animated animate__fadeInDown"
style={{
fontSize: "1.125rem",
color: "var(--muted-foreground)",
maxWidth: "540px",
margin: "0",
lineHeight: 1.6,
animationDelay: "0.3s",
animationFillMode: "both",
}}
>
一次付费，解锁电子书、视频教程、私密社群、即时问答，享受每周更新
</p>
</section>
);
}

90
app/vip/components/landing/LoginBlock.tsx Normal file
View File

@@ -0,0 +1,90 @@
"use client";
import { useState, useRef, useEffect } from "react";
import styles from "../vip.module.css";
type LoginBlockProps = {
onVerify: (userId: string) => Promise<boolean>;
onSuccess: () => void;
};
export function LoginBlock({ onVerify, onSuccess }: LoginBlockProps) {
const [userId, setUserId] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const hash = typeof window !== "undefined" ? window.location.hash : "";
if (hash === "#login") {
inputRef.current?.focus();
}
}, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const trimmed = userId.trim();
if (!trimmed) {
setError("请输入您的账号");
return;
}
setError(null);
setLoading(true);
try {
const ok = await onVerify(trimmed);
if (ok) {
onSuccess();
} else {
setError("未找到该账号的会员记录，请确认账号正确");
}
} catch {
setError("验证失败，请稍后重试");
} finally {
setLoading(false);
}
};
return (
<section id="login" className={styles.section} style={{ paddingTop: "2rem" }}>
<div className={styles.card} style={{ maxWidth: "400px", margin: "0 auto" }}>
<h2 className={styles.sectionTitle}>已有账号登录</h2>
<p className={styles.sectionDesc}>
请输入您的会员账号（支付时使用的 user_id）以恢复权益
</p>
<form onSubmit={handleSubmit}>
<input
ref={inputRef}
type="text"
value={userId}
onChange={(e) => setUserId(e.target.value)}
placeholder="例如：user1234567890"
disabled={loading}
style={{
width: "100%",
padding: "0.75rem 1rem",
fontSize: "1rem",
border: "1px solid var(--border)",
borderRadius: "8px",
background: "var(--background)",
color: "var(--foreground)",
marginBottom: "0.75rem",
}}
/>
{error && (
<p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>
{error}
</p>
)}
<button
type="submit"
disabled={loading}
className={`${styles.btnPrimary} ${styles.btnLarge}`}
style={{ width: "100%" }}
>
{loading ? "验证中..." : "验证并登录"}
</button>
</form>
</div>
</section>
);
}

103
app/vip/components/landing/TopicEbookShowcase.tsx Normal file
View File

@@ -0,0 +1,103 @@
"use client";
import Link from "next/link";
import { TOPICS_DISPLAY, EBOOKS_DISPLAY, VIDEO_COURSES_DISPLAY } from "@/app/data/vip.mock";
import styles from "../vip.module.css";
export function TopicEbookShowcase() {
return (
<section id="topics" className={styles.section}>
{/* 模块展示 */}
<h2 className={styles.sectionTitle}>模块</h2>
<div
className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
style={{ animationDelay: "0.2s", animationFillMode: "both", marginBottom: "1.5rem" }}
>
{TOPICS_DISPLAY.map((t) => {
const content = (
<>
<span className={styles.topicIcon}>{t.icon}</span>
<span className={styles.topicTitle}>{t.title}</span>
<span className={styles.topicDesc}>{t.desc}</span>
</>
);
if (t.href) {
return (
<Link
key={t.id}
href={t.href}
className={styles.topicCard}
target={t.href.startsWith("http") ? "_blank" : undefined}
rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
>
{content}
</Link>
);
}
return (
<div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
{content}
</div>
);
})}
</div>
{/* 视频教程展示 - 参考 digital 资源导航，至少 4 个 */}
<h2 className={styles.sectionTitle}>视频教程</h2>
<div
className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
style={{ animationDelay: "0.22s", animationFillMode: "both", marginBottom: "1.5rem" }}
>
{VIDEO_COURSES_DISPLAY.map((v) => (
<Link
key={v.id}
href={v.href}
className={styles.topicCard}
target={v.href.startsWith("http") ? "_blank" : undefined}
rel={v.href.startsWith("http") ? "noopener noreferrer" : undefined}
>
<span className={styles.topicIcon}>{v.icon}</span>
<span className={styles.topicTitle}>{v.title}</span>
<span className={styles.topicDesc}>{v.desc}</span>
</Link>
))}
</div>
{/* 电子书展示 */}
<h2 className={styles.sectionTitle}>电子书</h2>
<div
className="animate__animated animate__fadeInUp"
style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
gap: "1rem",
animationDelay: "0.25s",
animationFillMode: "both",
}}
>
{EBOOKS_DISPLAY.map((e) => (
<Link
key={e.id}
href={e.href}
className={styles.card}
style={{
display: "block",
padding: "1.25rem",
textDecoration: "none",
color: "inherit",
}}
>
<span style={{ fontSize: "1.5rem", marginBottom: "0.5rem", display: "block" }}>📖</span>
<div style={{ fontWeight: 600, color: "var(--foreground)", marginBottom: "0.25rem" }}>
《{e.title}》
</div>
<div style={{ fontSize: "0.9rem", color: "var(--muted-foreground)" }}>{e.desc}</div>
<div style={{ marginTop: "0.75rem", fontSize: "0.85rem", color: "var(--accent)" }}>
阅读 →
</div>
</Link>
))}
</div>
</section>
);
}

45
app/vip/components/landing/TopicEntries.tsx Normal file
View File

@@ -0,0 +1,45 @@
"use client";
import Link from "next/link";
import { TOPICS } from "@/app/data/vip.mock";
import styles from "../vip.module.css";
export function TopicEntries() {
return (
<section className={styles.section}>
<h2 className={styles.sectionTitle}>核心模块</h2>
<div
className={`${styles.topicGrid} animate__animated animate__fadeInUp`}
style={{ animationDelay: "0.2s", animationFillMode: "both" }}
>
{TOPICS.map((t, i) => {
const content = (
<>
<span className={styles.topicIcon}>{t.icon}</span>
<span className={styles.topicTitle}>{t.title}</span>
<span className={styles.topicDesc}>{t.desc}</span>
</>
);
if (t.href) {
return (
<Link
key={t.id}
href={t.href}
className={styles.topicCard}
target={t.href.startsWith("http") ? "_blank" : undefined}
rel={t.href.startsWith("http") ? "noopener noreferrer" : undefined}
>
{content}
</Link>
);
}
return (
<div key={t.id} className={styles.topicCard} style={{ cursor: "default", opacity: 0.7 }}>
{content}
</div>
);
})}
</div>
</section>
);
}