From 7dc341290332bb7fd5766de5569b4dfc3403189d Mon Sep 17 00:00:00 2001
From: dmitriylaukhin <laukhin@dementiy.com>
Date: Sat, 6 Jun 2026 16:01:39 +0500
Subject: [PATCH] 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>
---
 src/app/(student)/dashboard/page.tsx | 71 ++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/src/app/(student)/dashboard/page.tsx b/src/app/(student)/dashboard/page.tsx
index 3ab11ed..659baaf 100644
--- a/src/app/(student)/dashboard/page.tsx
+++ b/src/app/(student)/dashboard/page.tsx
@@ -4,6 +4,17 @@ import { redirect } from "next/navigation";
 import { prisma } from "@/lib/prisma";
 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() {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) redirect("/login");
@@ -44,6 +55,14 @@ export default async function StudentDashboard() {
     : [];
   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 (
     <main className="max-w-5xl mx-auto px-6 py-10 w-full">
       <h1 className="text-2xl font-bold mb-1">Мои курсы</h1>
@@ -131,6 +150,58 @@ export default async function StudentDashboard() {
         </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 && (
         <div className="mt-10">
           <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>