feat: add Coming Soon badge to Tailwind section

- Show Coming Soon badge on Tailwind landing card - Disable Tailwind topic links with Coming Soon badges - Add i18n translations for Coming Soon in all 6 languages - Add CSS for disabled states and badge styling 🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-16 03:36:15 +01:00
parent 1368f1c079
commit 072b2ad210
4 changed files with 53 additions and 12 deletions
--- a/src/app.js
+++ b/src/app.js
@@ -1216,7 +1216,7 @@ const sectionContent = {
 				<h2>Utility-First Basics</h2>
 				<p>Tailwind CSS uses small, single-purpose utility classes applied directly in HTML. Instead of writing <code>.btn { background: blue; padding: 1rem; }</code> in a stylesheet, you write <code>class="bg-blue-500 p-4"</code> on the element. Each class does exactly one thing, making styles predictable and composable.</p>
 				<p>This approach eliminates context-switching between HTML and CSS files. Common utilities include <code>text-lg</code> for font size, <code>font-bold</code> for weight, <code>rounded</code> for border radius, and <code>shadow</code> for box shadows. Hover states use the <code>hover:</code> prefix like <code>hover:bg-blue-600</code>.</p>
-				<a href="#tailwind-basics/0" class="topic-link">Start with Tailwind CSS Basics</a>
+				<span class="topic-link topic-link-disabled">Start with Tailwind CSS Basics <span class="coming-soon-badge">Coming Soon</span></span>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
@@ -1236,7 +1236,7 @@ const sectionContent = {
 				<h2>Spacing & Sizing</h2>
 				<p>Tailwind's spacing scale is consistent and memorable. The pattern is simple: <code>p-4</code> means padding of 1rem (16px), <code>p-2</code> is 0.5rem, <code>p-8</code> is 2rem. The same numbers work for margin (<code>m-4</code>), gap (<code>gap-4</code>), and space utilities. Use directional variants like <code>px-4</code> (horizontal) or <code>pt-2</code> (top only).</p>
 				<p>Width and height follow patterns too: <code>w-full</code> for 100%, <code>w-1/2</code> for 50%, <code>w-64</code> for fixed 16rem, <code>h-screen</code> for viewport height. Combine <code>max-w-xl</code> with <code>mx-auto</code> for centered containers with maximum widths.</p>
-				<a href="#tailwind-basics/1" class="topic-link">Learn Tailwind Spacing & Sizing</a>
+				<span class="topic-link topic-link-disabled">Learn Tailwind Spacing & Sizing <span class="coming-soon-badge">Coming Soon</span></span>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
@@ -1260,7 +1260,7 @@ const sectionContent = {
 				<h2>Flexbox & Grid</h2>
 				<p>Tailwind's layout utilities map directly to CSS flexbox and grid. Enable flex with <code>flex</code>, then control direction (<code>flex-row</code>, <code>flex-col</code>), alignment (<code>items-center</code>, <code>justify-between</code>), and wrapping (<code>flex-wrap</code>). The <code>gap-4</code> utility adds consistent spacing between items.</p>
 				<p>For grid layouts, use <code>grid</code> with column definitions like <code>grid-cols-3</code> for three equal columns or <code>grid-cols-[200px_1fr]</code> for custom track sizes. The <code>col-span-2</code> utility makes items span multiple columns.</p>
-				<a href="#tailwind-basics/2" class="topic-link">Build Layouts with Tailwind</a>
+				<span class="topic-link topic-link-disabled">Build Layouts with Tailwind <span class="coming-soon-badge">Coming Soon</span></span>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
@@ -1286,7 +1286,7 @@ const sectionContent = {
 				<h2>Responsive Design</h2>
 				<p>Tailwind uses mobile-first responsive prefixes. Unprefixed utilities apply to all screen sizes. Add <code>sm:</code> (640px+), <code>md:</code> (768px+), <code>lg:</code> (1024px+), or <code>xl:</code> (1280px+) prefixes to apply styles at specific breakpoints and above.</p>
 				<p>Build responsive layouts by starting with mobile styles, then adding larger-screen overrides. For example, <code>flex-col md:flex-row</code> stacks items vertically on mobile and horizontally on medium screens. Use <code>hidden md:block</code> to show/hide elements at different sizes.</p>
-				<a href="#tailwind-basics/3" class="topic-link">Tailwind Responsive Design</a>
+				<span class="topic-link topic-link-disabled">Tailwind Responsive Design <span class="coming-soon-badge">Coming Soon</span></span>
 			</div>
 			<div class="topic-code">
 				<div class="code-block">
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -132,6 +132,7 @@ const translations = {
 		landingCssDesc: "Styling, layout, and animations",
 		landingHtmlDesc: "Semantic markup and native elements",
 		landingTailwindDesc: "Utility-first CSS framework",
+		comingSoon: "Coming Soon",
 		landingCtaTitle: "Start Learning Today",
 		landingCtaSub: "Free and open source. No account required. Progress saved locally.",
 		landingCtaButton: "Begin Your Journey",
@@ -282,6 +283,7 @@ const translations = {
 		landingCssDesc: "Styling, Layout und Animationen",
 		landingHtmlDesc: "Semantisches Markup und native Elemente",
 		landingTailwindDesc: "Utility-first CSS-Framework",
+		comingSoon: "Bald verfügbar",
 		landingCtaTitle: "Heute noch anfangen",
 		landingCtaSub: "Kostenlos und Open Source. Kein Konto erforderlich. Fortschritt wird lokal gespeichert.",
 		landingCtaButton: "Jetzt erste Schritte machen",
@@ -432,6 +434,7 @@ const translations = {
 		landingCssDesc: "Stylowanie, układy i animacje",
 		landingHtmlDesc: "Semantyczne znaczniki i natywne elementy",
 		landingTailwindDesc: "Framework CSS oparty na klasach utility",
+		comingSoon: "Wkrótce",
 		landingCtaTitle: "Zacznij naukę już dziś",
 		landingCtaSub: "Darmowe i open source. Bez konta. Postęp zapisywany lokalnie.",
 		landingCtaButton: "Rozpocznij swoją podróż",
@@ -584,6 +587,7 @@ const translations = {
 		landingCssDesc: "Estilos, diseño y animaciones",
 		landingHtmlDesc: "Marcado semántico y elementos nativos",
 		landingTailwindDesc: "Framework CSS basado en utilidades",
+		comingSoon: "Próximamente",
 		landingCtaTitle: "Empieza a aprender hoy",
 		landingCtaSub: "Gratis y de código abierto. Sin cuenta requerida. Progreso guardado localmente.",
 		landingCtaButton: "Comienza tu viaje",
@@ -731,6 +735,7 @@ const translations = {
 		landingCssDesc: "التنسيق والتخطيط والرسوم المتحركة",
 		landingHtmlDesc: "الترميز الدلالي والعناصر الأصلية",
 		landingTailwindDesc: "إطار CSS قائم على الأدوات",
+		comingSoon: "قريباً",
 		landingCtaTitle: "ابدأ التعلم اليوم",
 		landingCtaSub: "مجاني ومفتوح المصدر. لا حاجة لحساب. يُحفظ التقدم محليًا.",
 		landingCtaButton: "ابدأ رحلتك",
@@ -880,6 +885,7 @@ const translations = {
 		landingCssDesc: "Стилізація, макети та анімації",
 		landingHtmlDesc: "Семантична розмітка та нативні елементи",
 		landingTailwindDesc: "CSS-фреймворк на основі утиліт",
+		comingSoon: "Незабаром",
 		landingCtaTitle: "Почни вчитися сьогодні",
 		landingCtaSub: "Безкоштовно та з відкритим кодом. Без реєстрації. Прогрес зберігається локально.",
 		landingCtaButton: "Розпочни свою подорож",
--- a/src/index.html
+++ b/src/index.html
@@ -74,8 +74,7 @@
 					<nav class="main-nav" id="main-nav" aria-label="Main sections">
 						<a href="#css" class="nav-link" data-section="css">CSS</a>
 						<a href="#html" class="nav-link" data-section="html">HTML</a>
-						<!-- Tailwind disabled until lessons are ready -->
-						<!-- <a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a> -->
+						<a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a>
 						<a href="#reference/css" class="nav-link nav-link-ref" data-section="reference">Reference</a>
 					</nav>
 					<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
@@ -151,15 +150,12 @@
 								<p data-i18n="landingHtmlDesc">Semantic markup and native elements</p>
 								<span class="section-card-progress" id="html-progress"></span>
 							</a>
-							<!-- Tailwind disabled until lessons are ready -->
-							<!--
-							<a href="#tailwind" class="section-card" data-section="tailwind">
+							<div class="section-card section-card-disabled" data-section="tailwind">
+								<span class="coming-soon-badge" data-i18n="comingSoon">Coming Soon</span>
 								<div class="section-card-icon" style="background: #06b6d4">TW</div>
 								<h3>Tailwind CSS</h3>
 								<p data-i18n="landingTailwindDesc">Utility-first CSS framework</p>
-								<span class="section-card-progress" id="tailwind-progress"></span>
-							</a>
-							-->
+							</div>
 						</div>
 					</section>

--- a/src/main.css
+++ b/src/main.css
@@ -1742,6 +1742,45 @@ input:checked + .toggle-slider::before {
 	font-weight: 500;
 }

+.section-card-disabled {
+	cursor: not-allowed;
+	opacity: 0.7;
+	position: relative;
+}
+
+.section-card-disabled:hover {
+	transform: none;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.coming-soon-badge {
+	display: inline-block;
+	background: linear-gradient(135deg, #06b6d4, #0891b2);
+	color: white;
+	font-size: 0.65rem;
+	font-weight: 600;
+	padding: 3px 8px;
+	border-radius: 10px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.section-card-disabled .coming-soon-badge {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+}
+
+.topic-link-disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.topic-link-disabled .coming-soon-badge {
+	margin-left: 8px;
+	vertical-align: middle;
+}
+
 /* Landing About Section */
 .landing-about {
 	padding: 3rem 1rem;