+ {/* Shimmer effect */}
+
+
+
+
+ {lang === "zh" ? "🚀 即将上线，敬请期待！" : "🚀 Coming Soon — Stay Tuned!"}
+
+
+
+ { setShowHumanQR(true); setOpen(false); }}
+ className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent text-accent-foreground text-xs font-medium border border-border/30 hover:bg-accent/80 transition-colors"
+ >
+
+
+
+ {/* Messages */}
+ 🤖
+
+
+ {lang === "zh" ? "有维智能客服" : "Youwei AI Help"}
+{lang === "zh" ? "在线" : "Online"}
+
+ {messages.map((msg, i) => (
+
+
+ ))}
+
+
+ {/* Input */}
+
+ {msg.content}
+
+
+ setInput(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && send()}
+ placeholder={lang === "zh" ? "请输入您的问题..." : "Ask a question..."}
+ className="flex-1 bg-muted/30 rounded-xl px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-primary/50"
+ />
+
+
+
+
+
+
+ {/* Mobile menu */}
+
+ {mobileMenuOpen && (
+
+
+ )}
+
+
+
+ {navItems.map((item) => (
+
+ ))}
+
+
+ {/* Header */}
+
+
+
+ {/* Category pills with animated indicator */}
+
+ {categories.map((cat) => (
+ setActiveCategory(cat)}
+ className={`relative px-4 py-2 rounded-xl text-xs font-medium transition-colors duration-200 ${
+ activeCategory === cat
+ ? "text-background"
+ : "glass-pill text-muted-foreground hover:text-foreground"
+ }`}
+ whileHover={{ scale: 1.05 }}
+ whileTap={{ scale: 0.97 }}
+ >
+ {activeCategory === cat && (
+
+ ))}
+
+
+ {/* Agent grid */}
+
+ {filteredAgents.length === 0 && (
+
+ {lang === "zh" ? "没有找到匹配的智能体" : "No matching agents found"}
+
+ )}
+
+ {filteredAgents.map((agent, i) => (
+ = 3 ? "lg:col-span-2 lg:row-span-1" : ""
+ }`}
+ style={{ boxShadow: "none" }}
+ >
+ {/* Gradient header */}
+
+ ))}
+
+
+ {/* Portal modal with viewport padding (not full-bleed) */}
+ {typeof document !== "undefined" &&
+ createPortal(
+
+ {chatSession && (
+ setChatSession(null)}
+ >
+ e.stopPropagation()}
+ >
+
+
+
+
+ )}
+ ,
+ document.body,
+ )}
+
+ setComingSoonOpen(false)} />
+
+ );
+}
diff --git a/src/components/sections/CourseDetail.tsx b/src/components/sections/CourseDetail.tsx
new file mode 100644
index 0000000..c2d2e43
--- /dev/null
+++ b/src/components/sections/CourseDetail.tsx
@@ -0,0 +1,372 @@
+import { useState, useEffect } from "react";
+import { useLang } from "@/contexts/LanguageContext";
+import { fetchPublishedCourseVideos, mediaUrl, recordCourseVideoView, type CourseVideo } from "@/lib/api";
+import { ArrowLeft, BookOpen, Users, Clock, Play, FileText, X, Headphones } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import qrCodeImg from "@/assets/qr-code.png";
+
+interface CourseDetailProps {
+ courseKey: string;
+ onBack: () => void;
+}
+
+const courseData: Record
+
+
+
+ {t("ai.title")}
+{t("ai.subtitle")}
+
+ setSearchQuery("")}
+ >
+ ✕
+
+ )}
+
+
+
+
+
+
+ {agent.emoji}
+
+
+
+
+
+
+ {agent.status}
+
+ {t(agent.tagKey)}
+ {t(agent.nameKey)}
+
+
+ {t(agent.descKey)}
+
+ {agent.tags.map((tag) => (
+
+ {t(tag)}
+
+ ))}
+
+
+
+
+
+ {/* Course Info */}
+
+
+
+ {data.emoji}
+
+
+
+ {t(`edu.${courseKey}`)}
+{t(`edu.${courseKey}Desc`)}
+
+
+
+
+
+ {t("edu.completion") ?? "Completion"}
+ {data.completion}%
+
+
+
+
+
+
+ {/* Syllabus */}
+ {/* Syllabus */}
+ {t("course.info")}
++ {t("course.objective")}： + {t(`course.${courseKey}.objective`)} +
++ {t("course.audience")}： + {t(`course.${courseKey}.audience`)} +
+
+
+
+ {/* Admin-published videos (same course) */}
+ {uploadedVideos.length > 0 && (
+ {t("course.syllabus")}
+ {data.modules.map((mod, mi) => ( +
+
+ ))}
+ {t(mod.titleKey)}
+
+ {mod.lessons.map((lesson, li) => (
+
+
+ {lesson.type === "video" ? (
+
+ ) : (
+ {t(lesson.titleKey)}
+ )}
+
+ ))}
+
+
+ )}
+
+ {/* Add Service CTA - below lessons */}
+ + {t("course.adminVideos")} +
+
+ {uploadedVideos.map((v) => (
+
+
+
+
+ ))}
+ {t("course.addServiceTitle")}
+{t("course.scanQr")}
+
+
+ {videoTitle}
+ +
+ {videoSrc ? (
+
+ ) : (
+
+
+
+ )}
+ {t("course.videoPlaceholder")}
+
+
+
+
+
+ {plans.map((plan, i) => (
+ setHoveredPlan(i)}
+ onMouseLeave={() => setHoveredPlan(null)}
+ whileHover={{ y: -8, scale: 1.02 }}
+ transition={{ type: "spring", stiffness: 300, damping: 20 }}
+ >
+ {/* Animated glow on highlighted */}
+ {plan.highlighted && (
+
+ ))}
+
+
+ {/* QR Code Modal */}
+
+ {qrOpen && (
+ setQrOpen(false)}
+ >
+ e.stopPropagation()}
+ >
+
+ 
+
+
+ )}
+
+
+ setComingSoonOpen(false)} />
+
+ );
+}
diff --git a/src/components/sections/PlatformOverview.tsx b/src/components/sections/PlatformOverview.tsx
new file mode 100644
index 0000000..7dcad02
--- /dev/null
+++ b/src/components/sections/PlatformOverview.tsx
@@ -0,0 +1,256 @@
+import { useState } from "react";
+import { useLang } from "@/contexts/LanguageContext";
+import { Target, Bot, Crown, Rocket, ArrowUpRight, ChevronDown } from "lucide-react";
+import { motion } from "framer-motion";
+import { useCountUp } from "@/hooks/useCountUp";
+
+const highlights = [
+ { icon: Target, titleKey: "overview.opc", subKey: "overview.opcSub", color: "from-blue-500 to-cyan-400", num: 2000, suffix: "+" },
+ { icon: Bot, titleKey: "overview.ai", subKey: "overview.aiSub", color: "from-violet-500 to-purple-400", num: 50, suffix: "+" },
+ { icon: Crown, titleKey: "overview.membership", subKey: "overview.membershipSub", color: "from-amber-500 to-orange-400", num: 0, display: "∞" },
+ { icon: Rocket, titleKey: "overview.count", subKey: "overview.countSub", color: "from-emerald-500 to-teal-400", num: 24, suffix: "/7" },
+];
+
+const pillars = [
+ { emoji: "📊", titleKey: "overview.eduTitle", subKey: "overview.eduSub", items: ["overview.eduItem1", "overview.eduItem2", "overview.eduItem3", "overview.eduItem4"], accent: "from-blue-500/20 via-cyan-400/10 to-transparent", progress: 92 },
+ { emoji: "🤖", titleKey: "overview.aiToolTitle", subKey: "overview.aiToolSub", items: ["overview.aiToolItem1", "overview.aiToolItem2", "overview.aiToolItem3", "overview.aiToolItem4"], accent: "from-violet-500/20 via-purple-400/10 to-transparent", progress: 87 },
+ { emoji: "👥", titleKey: "overview.alumniTitle", subKey: "overview.alumniSub", items: ["overview.alumniItem1", "overview.alumniItem2", "overview.alumniItem3", "overview.alumniItem4"], accent: "from-amber-500/20 via-orange-400/10 to-transparent", progress: 78 },
+];
+
+const container = { hidden: {}, show: { transition: { staggerChildren: 0.08 } } };
+const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.5 } } };
+
+function AnimatedStat({ h, index }: { h: typeof highlights[0]; index: number }) {
+ const { count, ref } = useCountUp(h.num, 1800);
+ return (
+
+
+ {t("member.title")}
+{t("member.subtitle")}
+
+
+ {t(plan.priceKey)}
+
+
+
+
+ {plan.highlighted && (
+
+
+ )}
+
+
+
+
+ {plan.icon}
+
+
+
+ {t(plan.titleKey)}
+{t(plan.descKey)}
+
+ {
+ if (plan.contactSales) {
+ setQrOpen(true);
+ } else {
+ setComingSoonOpen(true);
+ }
+ }}
+ >
+ {t(plan.btnKey)}
+
+
+ -
+ {plan.items.map((itm, idx) => (
+
{t("course.addServiceTitle")}
+{t("course.scanQr")}
+
+ {h.display ?? `${count}${h.suffix ?? ""}`}
+
+ {h.titleKey}
+ {h.subKey}
+
+ {/* Stats ribbon with animated counters */}
+
+
+
+ {/* Mission — with reveal animation */}
+
+
+
+ {/* Interactive pillars with expandable details and progress bars */}
+
+ {/* Large pillar card */}
+
+
+
+ {/* Right column — expandable stacked cards */}
+
+
+ );
+}
diff --git a/src/components/sections/YouweiAlumni.tsx b/src/components/sections/YouweiAlumni.tsx
new file mode 100644
index 0000000..cdba164
--- /dev/null
+++ b/src/components/sections/YouweiAlumni.tsx
@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { useLang } from "@/contexts/LanguageContext";
+import { ArrowUpRight } from "lucide-react";
+import { motion } from "framer-motion";
+import ComingSoonModal from "@/components/ComingSoonModal";
+
+const features = [
+ { emoji: "🌐", titleKey: "alumni.network", subKey: "alumni.networkSub", items: ["alumni.networkItem1", "alumni.networkItem2", "alumni.networkItem3"], accent: "from-blue-500/10 to-cyan-500/5", members: "12k+" },
+ { emoji: "🤝", titleKey: "alumni.resource", subKey: "alumni.resourceSub", items: ["alumni.resourceItem1", "alumni.resourceItem2", "alumni.resourceItem3"], accent: "from-violet-500/10 to-purple-500/5", members: "8k+" },
+ { emoji: "🎉", titleKey: "alumni.events", subKey: "alumni.eventsSub", items: ["alumni.eventsItem1", "alumni.eventsItem2", "alumni.eventsItem3"], accent: "from-amber-500/10 to-orange-500/5", members: "5k+" },
+ { emoji: "❓", titleKey: "alumni.qa", subKey: "alumni.qaSub", items: ["alumni.qaItem1", "alumni.qaItem2", "alumni.qaItem3"], accent: "from-emerald-500/10 to-teal-500/5", members: "15k+" },
+ { emoji: "🎓", titleKey: "alumni.mentorship", subKey: "alumni.mentorshipSub", items: ["alumni.mentorshipItem1", "alumni.mentorshipItem2", "alumni.mentorshipItem3"], accent: "from-rose-500/10 to-pink-500/5", members: "3k+" },
+ { emoji: "🏅", titleKey: "alumni.cert", subKey: "alumni.certSub", items: ["alumni.certItem1", "alumni.certItem2", "alumni.certItem3"], accent: "from-indigo-500/10 to-blue-500/5", members: "7k+" },
+];
+
+const container = { hidden: {}, show: { transition: { staggerChildren: 0.1 } } };
+const item = { hidden: { opacity: 0, y: 30, scale: 0.95 }, show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.5 } } };
+
+export default function YouweiAlumni() {
+ const { t, lang } = useLang();
+ const [flippedCard, setFlippedCard] = useState
+ {highlights.map((h, i) => (
+
+
+
+ 🏛️
+
+
+
+
+ 🏛️ {t("overview.missionTag")}
+
+
+ {t("overview.mission")}
+{t("overview.missionText")}
+
+
+
+
+ {pillars[0].emoji}
+
+
+ {t(pillars[0].titleKey)}
+{t(pillars[0].subKey)}
+ {/* Progress bar */} +
+
+
+ {t("overview.completion")}
+ {pillars[0].progress}%
+
+
+
+
+ {pillars[0].items.map((itm, idx) => (
+ onNavigateToCourse?.(eduCourseKeys[idx])}
+ >
+
+ {idx + 1}
+
+ {t(itm)}
+
+ ))}
+
+
+ {pillars.slice(1).map((p, i) => (
+ setExpandedPillar(i)}
+ onMouseLeave={() => setExpandedPillar(null)}
+ onClick={() => onNavigateToTab?.(i === 0 ? "ai" : "alumni")}
+ whileHover={{ y: -3 }}
+ transition={{ type: "spring", stiffness: 300, damping: 20 }}
+ >
+
+
+
+ ))}
+
+
+
+
+
+ {p.emoji}
+
+
+
+
+ {/* Progress bar */}
+
+
+ {t(p.titleKey)}
+{t(p.subKey)}
+
+
+
+
+ -
+ {p.items.map((itm, idx) => (
+
+
+
+
+
+ {features.map((f, i) => (
+ setFlippedCard(flippedCard === i ? null : i)}
+ >
+ {/* Front face */}
+
+
+
+ {/* Back face — revealed on click */}
+ {flippedCard === i && (
+
+ setComingSoonOpen(true)}
+ >
+ {lang === "zh" ? "了解更多 →" : "Learn More →"}
+
+
+ )}
+
+ ))}
+
+ setComingSoonOpen(false)} />
+
+ );
+}
diff --git a/src/components/sections/YouweiEducation.tsx b/src/components/sections/YouweiEducation.tsx
new file mode 100644
index 0000000..2ee8502
--- /dev/null
+++ b/src/components/sections/YouweiEducation.tsx
@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { useLang } from "@/contexts/LanguageContext";
+import { BookOpen, Users, ArrowRight, Play } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import CourseDetail from "./CourseDetail";
+
+const courses = [
+ { emoji: "📊", key: "biz", lessons: 32, students: "1.2k", color: "from-blue-500 to-cyan-400", completion: 85 },
+ { emoji: "💡", key: "product", lessons: 28, students: "980", color: "from-violet-500 to-purple-400", completion: 72 },
+ { emoji: "📢", key: "marketing", lessons: 36, students: "1.5k", color: "from-amber-500 to-orange-400", completion: 91 },
+ { emoji: "⚙️", key: "ops", lessons: 24, students: "860", color: "from-emerald-500 to-teal-400", completion: 68 },
+];
+
+const container = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } };
+const item = { hidden: { opacity: 0, y: 30, scale: 0.95 }, show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.5 } } };
+
+interface YouweiEducationProps {
+ initialCourse?: string | null;
+}
+
+export default function YouweiEducation({ initialCourse = null }: YouweiEducationProps) {
+ const { t } = useLang();
+ const [hoveredCard, setHoveredCard] = useState👥 {t("alumni.tag")}
+ {t("alumni.title")}
+{t("alumni.subtitle")}
+
+
+
+
+ {f.emoji}
+
+
+
+
+ {f.members}
+
+
+
+
+ {t(f.titleKey)}
+{t(f.subKey)}
+-
+ {f.items.map((itm, idx) => (
+
{f.emoji}
+ {t(f.titleKey)}
+{t(f.subKey)}
+
+
+
+
+
+ {courses.map((c, i) => (
+ setHoveredCard(i)}
+ onMouseLeave={() => setHoveredCard(null)}
+ onClick={() => setSelectedCourse(c.key)}
+ whileHover={{ y: -5 }}
+ transition={{ type: "spring", stiffness: 300, damping: 20 }}
+ >
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..1e7878c
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef
+
+ 📚 {t("edu.tag")}
+ {t("edu.title")}
+{t("edu.subtitle")}
+{t("edu.core")}
+
+
+
+
+ {c.emoji}
+
+
+
+ 0{i + 1}
+
+
+ {t(`edu.${c.key}`)}
+{t(`edu.${c.key}Desc`)}
+ +
+
+
+
+ {t("edu.completion") ?? "Completion"}
+ {c.completion}%
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+ {children}
+
+
+
+
+ );
+ },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef
+ {children}
+
+