's'

app/cloudphone/components/sections/AudienceSection.tsx

@@ -0,0 +1,28 @@
+import { Section } from "../Section";
+import { AUDIENCE_CONFIG } from "../../config/course";
+
+export function AudienceSection() {
+  return (
+    <Section>
+      <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
+        {AUDIENCE_CONFIG.title}
+      </h2>
+      <p className="mb-10 text-center text-[var(--muted-foreground)] sm:mb-12 md:mb-16">
+        {AUDIENCE_CONFIG.subtitle}
+      </p>
+      <div className="grid gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
+        {AUDIENCE_CONFIG.items.map((a, i) => (
+          <div
+            key={a.title}
+            className="hover-shimmer animate__animated animate__fadeInUp rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 transition-all duration-300 hover:border-[var(--accent)]/30 hover:bg-[var(--muted)] hover:-translate-y-0.5 sm:rounded-2xl sm:p-6"
+            style={{ animationDelay: `${i * 0.1}s`, animationFillMode: "both" }}
+          >
+            <div className="mb-3 text-2xl sm:mb-4 sm:text-3xl">{a.emoji}</div>
+            <h3 className="mb-2 font-semibold">{a.title}</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">{a.desc}</p>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}

app/cloudphone/components/sections/BenefitsSection.tsx

@@ -0,0 +1,32 @@
+import { Section } from "../Section";
+import { BENEFITS_CONFIG } from "../../config/course";
+
+export function BenefitsSection() {
+  return (
+    <Section>
+      <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
+        {BENEFITS_CONFIG.title}
+      </h2>
+      <p className="mb-10 text-center text-[var(--muted-foreground)] sm:mb-12 md:mb-16">
+        {BENEFITS_CONFIG.subtitle}
+      </p>
+      <div className="space-y-4 sm:space-y-6">
+        {BENEFITS_CONFIG.items.map((b, i) => (
+          <div
+            key={b.num}
+            className="hover-shimmer animate__animated animate__fadeInUp flex flex-col gap-4 rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 transition-all duration-300 hover:border-[var(--accent)]/30 hover:-translate-y-0.5 sm:flex-row sm:gap-6 sm:rounded-2xl sm:p-6"
+            style={{ animationDelay: `${i * 0.08}s`, animationFillMode: "both" }}
+          >
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--accent-muted)] text-base font-bold text-[var(--accent)] sm:h-12 sm:w-12 sm:text-lg">
+              {b.num}
+            </div>
+            <div className="min-w-0 flex-1">
+              <h3 className="mb-1 font-semibold">{b.title}</h3>
+              <p className="text-sm text-[var(--muted-foreground)]">{b.desc}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}

app/cloudphone/components/sections/CTASection.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { CTA_CONFIG } from "../../config/course";
+import { isPaid } from "../../lib/payment";
+
+export function CTASection() {
+  const [paid, setPaid] = useState(false);
+  useEffect(() => {
+    setPaid(isPaid());
+    const onPayUpdate = () => setPaid(isPaid());
+    window.addEventListener("pay:updated", onPayUpdate);
+    return () => window.removeEventListener("pay:updated", onPayUpdate);
+  }, []);
+
+  return (
+    <section className="border-t border-[var(--border)] py-16 sm:py-20 md:py-24">
+      <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
+        <h2 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
+          {CTA_CONFIG.title}
+        </h2>
+        <p className="mb-6 text-[var(--muted-foreground)] sm:mb-8">
+          {CTA_CONFIG.subtitle}
+        </p>
+        <div className="mb-8 flex flex-wrap justify-center gap-4 text-sm text-[var(--muted-foreground)] sm:mb-10 sm:gap-6">
+          {CTA_CONFIG.badges.map((b, i) => (
+            <span
+              key={b}
+              className="animate-float-badge rounded-full border border-[var(--border)] bg-[var(--card)] px-4 py-2"
+              style={{ animationDelay: `${i * 0.2}s` }}
+            >
+              {b}
+            </span>
+          ))}
+        </div>
+        <Link
+          href={paid ? "/cloudphone/course/0/0" : "/cloudphone/pay"}
+          className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
+        >
+          {paid ? "开始学习 →" : "立即加入 →"}
+        </Link>
+      </div>
+    </section>
+  );
+}

app/cloudphone/components/sections/CurriculumSection.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Section } from "../Section";
+import { CURRICULUM_CONFIG } from "../../config/course";
+import { canWatchLesson } from "../../lib/payment";
+import { isBookmarked, toggleBookmark, getBookmarks, getCompletedLessons } from "../../lib/learning";
+
+export function CurriculumSection() {
+  const [expanded, setExpanded] = useState<Record<number, boolean>>(() =>
+    Object.fromEntries(CURRICULUM_CONFIG.modules.map((_, i) => [i, i === 0]))
+  );
+  const [bookmarks, setBookmarks] = useState<Set<string>>(new Set());
+  const [completed, setCompleted] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    setBookmarks(getBookmarks());
+    setCompleted(getCompletedLessons());
+    const onB = () => setBookmarks(getBookmarks());
+    const onP = () => setCompleted(getCompletedLessons());
+    window.addEventListener("learning:bookmarks", onB);
+    window.addEventListener("learning:progress", onP);
+    return () => {
+      window.removeEventListener("learning:bookmarks", onB);
+      window.removeEventListener("learning:progress", onP);
+    };
+  }, []);
+
+  const toggle = (i: number) => {
+    setExpanded((prev) => ({ ...prev, [i]: !prev[i] }));
+  };
+
+  const allLessons = CURRICULUM_CONFIG.modules.flatMap((m, mi) =>
+    m.lessons.map((l, li) => ({ moduleIndex: mi, lessonIndex: li, ...l, moduleTitle: m.title }))
+  );
+  const filteredByModule = CURRICULUM_CONFIG.modules.map((m, mi) => ({
+    ...m,
+    lessons: allLessons.filter((l) => l.moduleIndex === mi),
+  }));
+
+  return (
+    <Section>
+      <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
+        {CURRICULUM_CONFIG.title}
+      </h2>
+      <p className="mb-6 text-center text-[var(--muted-foreground)] sm:mb-8 md:mb-10">
+        {CURRICULUM_CONFIG.subtitle}
+      </p>
+      <div className="space-y-2 md:space-y-3">
+        {filteredByModule.map((c, i) => {
+          const moduleIndex = CURRICULUM_CONFIG.modules.findIndex((m) => m.title === c.title);
+          const isOpen = expanded[moduleIndex] ?? true;
+          return (
+            <div
+              key={c.title}
+              className="animate__animated animate__fadeInUp overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] md:rounded-2xl"
+              style={{ animationDelay: `${i * 0.06}s`, animationFillMode: "both" }}
+            >
+              <button
+                type="button"
+                onClick={() => toggle(moduleIndex)}
+                className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)] sm:px-5 sm:py-4"
+              >
+                <span className="flex items-center gap-2 text-base font-semibold sm:text-lg">
+                  <span
+                    className={`transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`}
+                  >
+                    ▶
+                  </span>
+                  <span>{c.emoji}</span>
+                  {c.title}
+                </span>
+                <span className="text-sm text-[var(--muted-foreground)]">
+                  {c.lessons.length} 节
+                </span>
+              </button>
+              {isOpen && (
+                <ul className="border-t border-[var(--border)]">
+                  {c.lessons.map((l) => {
+                    const free = l.moduleIndex === 0 && l.lessonIndex < 2;
+                    const unlocked = canWatchLesson(l.moduleIndex, l.lessonIndex);
+                    const key = `${l.moduleIndex}-${l.lessonIndex}`;
+                    const bookmarked = isBookmarked(l.moduleIndex, l.lessonIndex);
+                    const isCompleted = completed.has(key);
+                    return (
+                      <li key={key}>
+                        <Link
+                          href={`/cloudphone/course/${l.moduleIndex}/${l.lessonIndex}`}
+                          className="flex flex-col gap-1 px-4 py-3 transition hover:bg-[var(--muted)] sm:flex-row sm:items-center sm:justify-between sm:px-5 sm:py-3"
+                        >
+                          <span className="flex items-center gap-2 truncate sm:gap-3">
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                toggleBookmark(l.moduleIndex, l.lessonIndex);
+                              }}
+                              className="shrink-0 text-xs"
+                              aria-label={bookmarked ? "取消收藏" : "收藏"}
+                            >
+                              {bookmarked ? "⭐" : "☆"}
+                            </button>
+                            <span className={unlocked ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}>
+                              {l.name}
+                            </span>
+                            {free && (
+                              <span className="shrink-0 rounded bg-[var(--accent)]/20 px-1.5 py-0.5 text-xs text-[var(--accent)]">
+                                试看
+                              </span>
+                            )}
+                            {isCompleted && (
+                              <span className="shrink-0 rounded bg-green-500/20 px-1.5 py-0.5 text-xs text-green-600 dark:text-green-400">
+                                ✓
+                              </span>
+                            )}
+                            {!unlocked && (
+                              <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
+                                🔒
+                              </span>
+                            )}
+                          </span>
+                          <span className="flex shrink-0 items-center gap-2 text-xs text-[var(--muted-foreground)] sm:text-sm">
+                            {l.duration}
+                            <span className="text-[var(--accent)]">→</span>
+                          </span>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}

app/cloudphone/components/sections/FAQSection.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import { Section } from "../Section";
+import { FAQ_CONFIG } from "../../config/course";
+
+export function FAQSection() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  return (
+    <Section>
+      <h2 className="mb-10 text-center text-xl font-bold sm:text-2xl md:text-3xl">
+        {FAQ_CONFIG.title}
+      </h2>
+      <div className="mx-auto max-w-2xl space-y-2">
+        {FAQ_CONFIG.items.map((item, i) => (
+          <div
+            key={i}
+            className="overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] transition"
+          >
+            <button
+              type="button"
+              onClick={() => setOpenIndex(openIndex === i ? null : i)}
+              className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-[var(--muted)] sm:px-5"
+            >
+              <span className="font-medium">{item.q}</span>
+              <span
+                className={`shrink-0 text-[var(--muted-foreground)] transition-transform ${openIndex === i ? "rotate-180" : ""}`}
+              >
+                ▼
+              </span>
+            </button>
+            {openIndex === i && (
+              <div className="border-t border-[var(--border)] px-4 py-3 text-sm text-[var(--muted-foreground)] sm:px-5">
+                {item.a}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}

app/cloudphone/components/sections/Hero.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { HERO_CONFIG, CURRICULUM_CONFIG } from "../../config/course";
+import { isPaid } from "../../lib/payment";
+import { getLastWatched, getProgress } from "../../lib/learning";
+import { ParticleBackground } from "../ParticleBackground";
+
+const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
+
+export function Hero() {
+  const [paid, setPaid] = useState(false);
+  const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
+  const [progress, setProgress] = useState({ completed: 0, percent: 0 });
+
+  useEffect(() => {
+    setPaid(isPaid());
+    setLast(getLastWatched());
+    setProgress(getProgress(TOTAL_LESSONS));
+    const onPay = () => setPaid(isPaid());
+    const onProgress = () => {
+      setLast(getLastWatched());
+      setProgress(getProgress(TOTAL_LESSONS));
+    };
+    window.addEventListener("pay:updated", onPay);
+    window.addEventListener("learning:progress", onProgress);
+    return () => {
+      window.removeEventListener("pay:updated", onPay);
+      window.removeEventListener("learning:progress", onProgress);
+    };
+  }, []);
+
+  return (
+    <section className="relative overflow-hidden pt-24 pb-16 sm:pt-28 sm:pb-20 md:pt-32 md:pb-24">
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--gradient-accent),transparent)] animate-gradient" />
+      <ParticleBackground />
+      <div className="relative mx-auto max-w-4xl px-4 text-center sm:px-6">
+        <h1
+          className="mb-4 text-3xl font-bold tracking-tight animate__animated animate__fadeInDown sm:text-4xl md:text-5xl lg:text-6xl"
+          style={{ animationDelay: "0.1s", animationFillMode: "both" }}
+        >
+          {HERO_CONFIG.title}
+        </h1>
+        <p
+          className="mb-10 text-lg text-[var(--muted-foreground)] animate__animated animate__fadeInDown sm:mb-12 sm:text-xl md:text-2xl"
+          style={{ animationDelay: "0.25s", animationFillMode: "both" }}
+        >
+          {HERO_CONFIG.subtitle}
+        </p>
+        <div
+          className="mb-10 flex flex-wrap justify-center gap-6 animate__animated animate__fadeInDown sm:mb-12 sm:gap-8"
+          style={{ animationDelay: "0.4s", animationFillMode: "both" }}
+        >
+          {HERO_CONFIG.stats.map((s) => (
+            <div key={s.label} className="text-center transition-transform duration-300 hover:scale-105">
+              <div className="text-2xl font-bold text-[var(--accent)] sm:text-3xl md:text-4xl">
+                {s.value}
+              </div>
+              <div className="mt-1 text-xs text-[var(--muted-foreground)] sm:text-sm">
+                {s.label}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div
+          className="flex flex-wrap justify-center gap-3 animate__animated animate__fadeInDown sm:gap-4"
+          style={{ animationDelay: "0.6s", animationFillMode: "both" }}
+        >
+          {paid && last ? (
+            <Link
+              href={`/cloudphone/course/${last.moduleIndex}/${last.lessonIndex}`}
+              className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
+            >
+              继续学习 →
+            </Link>
+          ) : (
+            <Link
+              href={paid ? "/cloudphone/course/0/0" : "/cloudphone/pay"}
+              className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
+            >
+              {paid ? "进入课程 →" : "立即报名 →"}
+            </Link>
+          )}
+        </div>
+        {paid && progress.completed > 0 && (
+          <div
+            className="mt-6 w-full max-w-xs animate__animated animate__fadeInDown"
+            style={{ animationDelay: "0.7s", animationFillMode: "both" }}
+          >
+            <div className="mb-1 flex justify-between text-xs text-[var(--muted-foreground)]">
+              <span>学习进度</span>
+              <span>{progress.completed}/{TOTAL_LESSONS} 节</span>
+            </div>
+            <div className="h-2 overflow-hidden rounded-full bg-[var(--muted)]">
+              <div
+                className="h-full rounded-full bg-[var(--accent)] transition-all"
+                style={{ width: `${progress.percent}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

app/cloudphone/components/sections/InstructorsSection.tsx

@@ -0,0 +1,37 @@
+import { Section } from "../Section";
+import { INSTRUCTORS_CONFIG } from "../../config/course";
+
+export function InstructorsSection() {
+  return (
+    <Section>
+      <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
+        {INSTRUCTORS_CONFIG.title}
+      </h2>
+      <p className="mb-10 text-center text-[var(--muted-foreground)] sm:mb-12 md:mb-16">
+        {INSTRUCTORS_CONFIG.subtitle}
+      </p>
+      <div className="grid gap-6 sm:grid-cols-2 md:gap-8 lg:grid-cols-3">
+        {INSTRUCTORS_CONFIG.items.map((i) => (
+          <div
+            key={i.name}
+            className="hover-shimmer rounded-xl border border-[var(--border)] bg-[var(--card)] p-5 text-center transition-all duration-300 hover:-translate-y-0.5 hover:border-[var(--accent)]/30 sm:rounded-2xl sm:p-6"
+          >
+            <div className="mb-3 flex justify-center sm:mb-4">
+              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-[var(--accent-muted)] text-xl font-bold text-[var(--accent)] sm:h-20 sm:w-20 sm:text-2xl">
+                {i.name.slice(0, 1)}
+              </div>
+            </div>
+            <h3 className="mb-1 font-semibold">{i.name}</h3>
+            <p className="mb-1 text-sm text-[var(--accent)]">{i.role}</p>
+            <p className="mb-2 text-sm text-[var(--muted-foreground)]">
+              {i.desc}
+            </p>
+            <span className="inline-block rounded-full bg-[var(--accent-muted)] px-3 py-1 text-xs text-[var(--accent)]">
+              {i.tag}
+            </span>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}