From a6da2761d359c5ab7098155500685b58e5d907dd Mon Sep 17 00:00:00 2001
From: Pratyush Sharma <56130065+pratyush618@users.noreply.github.com>
Date: Wed, 23 Sep 2026 13:05:30 +0530
Subject: [PATCH] feat(academy): mark subject sets coming soon

---
 apps/academy/src/app/styles/academy.css       | 22 +++++++++++++++++++
 apps/academy/src/components/sections/sets.tsx |  5 ++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/apps/academy/src/app/styles/academy.css b/apps/academy/src/app/styles/academy.css
index 32d19f1..a6ff24f 100644
--- a/apps/academy/src/app/styles/academy.css
+++ b/apps/academy/src/app/styles/academy.css
@@ -561,6 +561,28 @@
   color: var(--text-faint);
 }
 
+.set-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+/* Said on the card itself, not only in the note under the grid: a price with
+   nothing beside it reads as something you can buy today. */
+.set-soon {
+  flex: none;
+  padding: 0.2rem 0.55rem;
+  font-family: var(--font-mono);
+  font-size: 0.64rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-radius: 999px;
+}
+
 /* What is actually in it, set as the headline — the number is what separates
    these three from each other. */
 .set-size {
diff --git a/apps/academy/src/components/sections/sets.tsx b/apps/academy/src/components/sections/sets.tsx
index 3f6fb6c..ef0e77f 100644
--- a/apps/academy/src/components/sections/sets.tsx
+++ b/apps/academy/src/components/sections/sets.tsx
@@ -25,7 +25,10 @@ export function Sets() {
       <div className="set-grid">
         {SETS.map((set) => (
           <article className="set-card" key={set.tier}>
-            <p className="set-name">{set.name}</p>
+            <div className="set-head">
+              <p className="set-name">{set.name}</p>
+              <span className="set-soon">Coming soon</span>
+            </div>
 
             <p className="set-size">
               {set.questions === null ? "Every chapter" : `${set.questions} questions`}