feat: add coming soon section and device notice to landing page

- Add "Coming Soon" section with Cloud Sync, Achievements, JavaScript, Frameworks
- Add device notice recommending desktop/tablet for best experience
- Add translations for all 6 languages (en, de, pl, es, ar, uk)
- Add CSS styling with responsive grid layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

src/i18n.js

@@ -139,6 +139,20 @@ const translations = {
 		landingCtaSub: "Free and open source. No account required. Progress saved locally.",
 		landingCtaButton: "Begin Your Journey",
 
+		// Coming Soon
+		landingComingSoonTitle: "Coming Soon",
+		comingSoonSyncTitle: "Cloud Sync",
+		comingSoonSyncText: "Sync your progress across all devices. Start on desktop, continue on tablet.",
+		comingSoonAchievementsTitle: "Achievements",
+		comingSoonAchievementsText: "Earn badges as you master new skills. Track your learning milestones.",
+		comingSoonJsTitle: "JavaScript",
+		comingSoonJsText: "Interactive JavaScript lessons with live code execution and DOM manipulation.",
+		comingSoonFrameworksTitle: "Frameworks",
+		comingSoonFrameworksText: "React, Vue, and Svelte basics. Build real components step by step.",
+
+		// Device Notice
+		deviceNotice: "<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.",
+
 		// Footer
 		footerModules: "Modules",
 		footerResources: "Resources",
@@ -292,6 +306,20 @@ const translations = {
 		landingCtaSub: "Kostenlos und Open Source. Kein Konto erforderlich. Fortschritt wird lokal gespeichert.",
 		landingCtaButton: "Jetzt erste Schritte machen",
 
+		// Coming Soon
+		landingComingSoonTitle: "Demnächst",
+		comingSoonSyncTitle: "Cloud-Sync",
+		comingSoonSyncText: "Synchronisiere deinen Fortschritt auf allen Geräten. Starte am Desktop, mach am Tablet weiter.",
+		comingSoonAchievementsTitle: "Erfolge",
+		comingSoonAchievementsText: "Verdiene Abzeichen beim Erlernen neuer Fähigkeiten. Verfolge deine Lernmeilensteine.",
+		comingSoonJsTitle: "JavaScript",
+		comingSoonJsText: "Interaktive JavaScript-Lektionen mit Live-Code-Ausführung und DOM-Manipulation.",
+		comingSoonFrameworksTitle: "Frameworks",
+		comingSoonFrameworksText: "React, Vue und Svelte Grundlagen. Baue echte Komponenten Schritt für Schritt.",
+
+		// Device Notice
+		deviceNotice: "<strong>Am besten auf Desktop oder Tablet (Querformat).</strong> Mobil funktioniert, aber größere Bildschirme machen das Coden einfacher.",
+
 		// Footer
 		footerModules: "Module",
 		footerResources: "Ressourcen",
@@ -445,6 +473,20 @@ const translations = {
 		landingCtaSub: "Darmowe i open source. Bez konta. Postęp zapisywany lokalnie.",
 		landingCtaButton: "Rozpocznij swoją podróż",
 
+		// Coming Soon
+		landingComingSoonTitle: "Wkrótce",
+		comingSoonSyncTitle: "Synchronizacja",
+		comingSoonSyncText: "Synchronizuj postępy na wszystkich urządzeniach. Zacznij na komputerze, kontynuuj na tablecie.",
+		comingSoonAchievementsTitle: "Osiągnięcia",
+		comingSoonAchievementsText: "Zdobywaj odznaki, ucząc się nowych umiejętności. Śledź swoje postępy.",
+		comingSoonJsTitle: "JavaScript",
+		comingSoonJsText: "Interaktywne lekcje JavaScript z wykonywaniem kodu na żywo i manipulacją DOM.",
+		comingSoonFrameworksTitle: "Frameworki",
+		comingSoonFrameworksText: "Podstawy React, Vue i Svelte. Buduj prawdziwe komponenty krok po kroku.",
+
+		// Device Notice
+		deviceNotice: "<strong>Najlepiej na komputerze lub tablecie (poziomo).</strong> Na telefonie też działa, ale większy ekran ułatwia kodowanie.",
+
 		// Footer
 		footerModules: "Moduły",
 		footerResources: "Zasoby",
@@ -600,6 +642,20 @@ const translations = {
 		landingCtaSub: "Gratis y de código abierto. Sin cuenta requerida. Progreso guardado localmente.",
 		landingCtaButton: "Comienza tu viaje",
 
+		// Coming Soon
+		landingComingSoonTitle: "Próximamente",
+		comingSoonSyncTitle: "Sincronización",
+		comingSoonSyncText: "Sincroniza tu progreso en todos tus dispositivos. Empieza en el escritorio, continúa en la tablet.",
+		comingSoonAchievementsTitle: "Logros",
+		comingSoonAchievementsText: "Gana insignias mientras dominas nuevas habilidades. Sigue tus hitos de aprendizaje.",
+		comingSoonJsTitle: "JavaScript",
+		comingSoonJsText: "Lecciones interactivas de JavaScript con ejecución de código en vivo y manipulación del DOM.",
+		comingSoonFrameworksTitle: "Frameworks",
+		comingSoonFrameworksText: "Fundamentos de React, Vue y Svelte. Construye componentes reales paso a paso.",
+
+		// Device Notice
+		deviceNotice: "<strong>Mejor en escritorio o tablet (horizontal).</strong> Funciona en móvil, pero pantallas más grandes facilitan la programación.",
+
 		// Footer
 		footerModules: "Módulos",
 		footerResources: "Recursos",
@@ -750,6 +806,20 @@ const translations = {
 		landingCtaSub: "مجاني ومفتوح المصدر. لا حاجة لحساب. يُحفظ التقدم محليًا.",
 		landingCtaButton: "ابدأ رحلتك",
 
+		// Coming Soon
+		landingComingSoonTitle: "قريباً",
+		comingSoonSyncTitle: "مزامنة سحابية",
+		comingSoonSyncText: "زامن تقدمك عبر جميع أجهزتك. ابدأ على الكمبيوتر، تابع على الجهاز اللوحي.",
+		comingSoonAchievementsTitle: "الإنجازات",
+		comingSoonAchievementsText: "احصل على شارات أثناء إتقانك لمهارات جديدة. تتبع معالم تعلمك.",
+		comingSoonJsTitle: "جافاسكريبت",
+		comingSoonJsText: "دروس تفاعلية في JavaScript مع تنفيذ مباشر للكود والتعامل مع DOM.",
+		comingSoonFrameworksTitle: "أطر العمل",
+		comingSoonFrameworksText: "أساسيات React وVue وSvelte. ابنِ مكونات حقيقية خطوة بخطوة.",
+
+		// Device Notice
+		deviceNotice: "<strong>أفضل على الكمبيوتر أو الجهاز اللوحي (أفقي).</strong> يعمل على الجوال، لكن الشاشات الأكبر تسهّل البرمجة.",
+
 		// Footer
 		footerModules: "الوحدات",
 		footerResources: "الموارد",
@@ -902,6 +972,20 @@ const translations = {
 		landingCtaSub: "Безкоштовно та з відкритим кодом. Без реєстрації. Прогрес зберігається локально.",
 		landingCtaButton: "Розпочни свою подорож",
 
+		// Coming Soon
+		landingComingSoonTitle: "Незабаром",
+		comingSoonSyncTitle: "Хмарна синхронізація",
+		comingSoonSyncText: "Синхронізуй прогрес на всіх пристроях. Почни на комп'ютері, продовжуй на планшеті.",
+		comingSoonAchievementsTitle: "Досягнення",
+		comingSoonAchievementsText: "Отримуй значки, освоюючи нові навички. Відстежуй свої навчальні віхи.",
+		comingSoonJsTitle: "JavaScript",
+		comingSoonJsText: "Інтерактивні уроки JavaScript з виконанням коду в реальному часі та маніпуляцією DOM.",
+		comingSoonFrameworksTitle: "Фреймворки",
+		comingSoonFrameworksText: "Основи React, Vue та Svelte. Створюй справжні компоненти крок за кроком.",
+
+		// Device Notice
+		deviceNotice: "<strong>Найкраще на комп'ютері або планшеті (горизонтально).</strong> На телефоні теж працює, але більший екран полегшує програмування.",
+
 		// Footer
 		footerModules: "Модулі",
 		footerResources: "Ресурси",

src/index.html

@@ -169,6 +169,38 @@
 						</div>
 					</section>
 
+					<section class="coming-soon">
+						<h2 data-i18n="landingComingSoonTitle">Coming Soon</h2>
+						<div class="coming-soon-grid">
+							<article class="coming-soon-card">
+								<span class="coming-soon-icon">🔄</span>
+								<h3 data-i18n="comingSoonSyncTitle">Cloud Sync</h3>
+								<p data-i18n="comingSoonSyncText">Sync your progress across all devices. Start on desktop, continue on tablet.</p>
+							</article>
+							<article class="coming-soon-card">
+								<span class="coming-soon-icon">🏆</span>
+								<h3 data-i18n="comingSoonAchievementsTitle">Achievements</h3>
+								<p data-i18n="comingSoonAchievementsText">Earn badges as you master new skills. Track your learning milestones.</p>
+							</article>
+							<article class="coming-soon-card">
+								<span class="coming-soon-icon">⚡</span>
+								<h3 data-i18n="comingSoonJsTitle">JavaScript</h3>
+								<p data-i18n="comingSoonJsText">Interactive JavaScript lessons with live code execution and DOM manipulation.</p>
+							</article>
+							<article class="coming-soon-card">
+								<span class="coming-soon-icon">🧩</span>
+								<h3 data-i18n="comingSoonFrameworksTitle">Frameworks</h3>
+								<p data-i18n="comingSoonFrameworksText">React, Vue, and Svelte basics. Build real components step by step.</p>
+							</article>
+						</div>
+					</section>
+
+					<section class="device-notice">
+						<p data-i18n="deviceNotice">
+							<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
+						</p>
+					</section>
+
 					<section class="landing-cta">
 						<h2 data-i18n="landingCtaTitle">Start Learning Today</h2>
 						<a href="#welcome/0" class="cta-button" data-i18n="landingCtaButton">Begin Your Journey</a>

src/main.css

@@ -1890,6 +1890,91 @@ input:checked + .toggle-slider::before {
 	}
 }
 
+/* Coming Soon Section */
+.coming-soon {
+	margin-top: var(--spacing-xl);
+	text-align: center;
+}
+
+.coming-soon h2 {
+	font-size: 1.5rem;
+	color: var(--primary-dark);
+	margin-bottom: var(--spacing-lg);
+}
+
+.coming-soon-grid {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: var(--spacing-md);
+}
+
+.coming-soon-card {
+	background: var(--panel-bg);
+	border-radius: var(--border-radius-md);
+	padding: 1.5rem 1rem;
+	text-align: center;
+	border: 1px dashed var(--border-color);
+	opacity: 0.85;
+	transition: opacity 0.2s, border-color 0.2s;
+}
+
+.coming-soon-card:hover {
+	opacity: 1;
+	border-color: var(--section-color);
+}
+
+.coming-soon-icon {
+	font-size: 2rem;
+	display: block;
+	margin-bottom: 0.75rem;
+}
+
+.coming-soon-card h3 {
+	font-size: 1rem;
+	margin-bottom: 0.5rem;
+	color: var(--text-color);
+}
+
+.coming-soon-card p {
+	font-size: 0.85rem;
+	color: var(--light-text);
+	line-height: 1.5;
+	margin: 0;
+}
+
+@media (max-width: 900px) {
+	.coming-soon-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: 500px) {
+	.coming-soon-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+/* Device Notice */
+.device-notice {
+	margin-top: var(--spacing-lg);
+	text-align: center;
+	padding: 1rem;
+}
+
+.device-notice p {
+	display: inline-block;
+	padding: 0.75rem 1.5rem;
+	background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
+	border-radius: var(--border-radius-md);
+	color: var(--light-text);
+	font-size: 0.9rem;
+	margin: 0;
+}
+
+.device-notice strong {
+	color: var(--text-color);
+}
+
 /* Landing CTA */
 .landing-cta {
 	text-align: center;