Add locked course cards (upsell) to student dashboard
Show the sellable course lineup on the dashboard: courses the student doesn't own render as blurred cards with a lock and a CTA linking to the product landing page (new tab). Owned courses are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,17 @@ import { redirect } from "next/navigation";
|
|||||||
import { prisma } from "@/lib/prisma";
|
import { prisma } from "@/lib/prisma";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
|
// Продаваемая линейка курсов → лендинг продукта. Курсы из этого списка,
|
||||||
|
// которых нет у студента, показываются на дашборде заблюренными карточками
|
||||||
|
// со ссылкой на лендинг (апселл). Легаси/обычные версии сюда не входят.
|
||||||
|
const STORE_LINKS: Record<string, string> = {
|
||||||
|
"second-brain-vault": "https://second-brain.ru/sb-vault",
|
||||||
|
"obsidian-full": "https://obsidian.second-brain.ru/",
|
||||||
|
"claude-obsidian": "https://second-brain.ru/claude-obsidian",
|
||||||
|
"zotero-full": "https://zotero.second-brain.ru/",
|
||||||
|
"obsidian-ai": "https://obsidianai.second-brain.ru/",
|
||||||
|
};
|
||||||
|
|
||||||
export default async function StudentDashboard() {
|
export default async function StudentDashboard() {
|
||||||
const session = await auth.api.getSession({ headers: await headers() });
|
const session = await auth.api.getSession({ headers: await headers() });
|
||||||
if (!session) redirect("/login");
|
if (!session) redirect("/login");
|
||||||
@@ -44,6 +55,14 @@ export default async function StudentDashboard() {
|
|||||||
: [];
|
: [];
|
||||||
const completedSet = new Set(progressRecords.map((p) => p.lessonId));
|
const completedSet = new Set(progressRecords.map((p) => p.lessonId));
|
||||||
|
|
||||||
|
// Витрина: продаваемые курсы, которых у студента нет → заблюренные карточки
|
||||||
|
const enrolledSlugs = new Set(enrollments.map((e) => e.course.slug));
|
||||||
|
const storeCourses = await prisma.course.findMany({
|
||||||
|
where: { slug: { in: Object.keys(STORE_LINKS) }, published: true },
|
||||||
|
select: { id: true, slug: true, title: true, description: true, coverImage: true },
|
||||||
|
});
|
||||||
|
const locked = storeCourses.filter((c) => !enrolledSlugs.has(c.slug));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="max-w-5xl mx-auto px-6 py-10 w-full">
|
<main className="max-w-5xl mx-auto px-6 py-10 w-full">
|
||||||
<h1 className="text-2xl font-bold mb-1">Мои курсы</h1>
|
<h1 className="text-2xl font-bold mb-1">Мои курсы</h1>
|
||||||
@@ -131,6 +150,58 @@ export default async function StudentDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{locked.length > 0 && (
|
||||||
|
<div className="mt-10">
|
||||||
|
<p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
|
||||||
|
Другие курсы Second Brain
|
||||||
|
</p>
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
|
{locked.map((course) => (
|
||||||
|
<a
|
||||||
|
key={course.id}
|
||||||
|
href={STORE_LINKS[course.slug]}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="card-aubade p-0 overflow-hidden flex flex-col relative group"
|
||||||
|
>
|
||||||
|
{/* Overlay: замок + призыв, поверх размытого контента */}
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 transition-opacity"
|
||||||
|
style={{ backgroundColor: "color-mix(in srgb, var(--background) 55%, transparent)" }}
|
||||||
|
>
|
||||||
|
<span className="text-2xl">🔒</span>
|
||||||
|
<span
|
||||||
|
className="text-sm font-bold px-4 py-2"
|
||||||
|
style={{ border: "2px solid var(--foreground)", backgroundColor: "var(--accent)", color: "var(--foreground)" }}
|
||||||
|
>
|
||||||
|
Открыть курс →
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/* Размытый контент карточки */}
|
||||||
|
<div className="flex flex-col flex-1" style={{ filter: "blur(3px)", opacity: 0.7, pointerEvents: "none" }}>
|
||||||
|
{course.coverImage ? (
|
||||||
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
|
<img src={course.coverImage} alt={course.title} className="w-full aspect-video object-cover" />
|
||||||
|
) : (
|
||||||
|
<div className="w-full aspect-video flex items-center justify-center text-4xl" style={{ backgroundColor: "var(--color-surface)" }}>
|
||||||
|
📚
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="p-4 flex-1 flex flex-col gap-2">
|
||||||
|
<h2 className="font-bold text-lg leading-tight">{course.title}</h2>
|
||||||
|
{course.description && (
|
||||||
|
<p className="text-sm line-clamp-3" style={{ color: "var(--muted-foreground)" }}>
|
||||||
|
{course.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{expired.length > 0 && (
|
{expired.length > 0 && (
|
||||||
<div className="mt-10">
|
<div className="mt-10">
|
||||||
<p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
|
<p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user