Skip to content

Commit 1b3c2b4

Browse files
nextlevelshitnextlevelshit
committed
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)
1 parent efbadbf commit 1b3c2b4

3 files changed

Lines changed: 201 additions & 0 deletions

File tree

‎src/i18n.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,20 @@ const translations = {
139139
landingCtaSub: "Free and open source. No account required. Progress saved locally.",
140140
landingCtaButton: "Begin Your Journey",
141141

142+
// Coming Soon
143+
landingComingSoonTitle: "Coming Soon",
144+
comingSoonSyncTitle: "Cloud Sync",
145+
comingSoonSyncText: "Sync your progress across all devices. Start on desktop, continue on tablet.",
146+
comingSoonAchievementsTitle: "Achievements",
147+
comingSoonAchievementsText: "Earn badges as you master new skills. Track your learning milestones.",
148+
comingSoonJsTitle: "JavaScript",
149+
comingSoonJsText: "Interactive JavaScript lessons with live code execution and DOM manipulation.",
150+
comingSoonFrameworksTitle: "Frameworks",
151+
comingSoonFrameworksText: "React, Vue, and Svelte basics. Build real components step by step.",
152+
153+
// Device Notice
154+
deviceNotice: "<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.",
155+
142156
// Footer
143157
footerModules: "Modules",
144158
footerResources: "Resources",
@@ -292,6 +306,20 @@ const translations = {
292306
landingCtaSub: "Kostenlos und Open Source. Kein Konto erforderlich. Fortschritt wird lokal gespeichert.",
293307
landingCtaButton: "Jetzt erste Schritte machen",
294308

309+
// Coming Soon
310+
landingComingSoonTitle: "Demnächst",
311+
comingSoonSyncTitle: "Cloud-Sync",
312+
comingSoonSyncText: "Synchronisiere deinen Fortschritt auf allen Geräten. Starte am Desktop, mach am Tablet weiter.",
313+
comingSoonAchievementsTitle: "Erfolge",
314+
comingSoonAchievementsText: "Verdiene Abzeichen beim Erlernen neuer Fähigkeiten. Verfolge deine Lernmeilensteine.",
315+
comingSoonJsTitle: "JavaScript",
316+
comingSoonJsText: "Interaktive JavaScript-Lektionen mit Live-Code-Ausführung und DOM-Manipulation.",
317+
comingSoonFrameworksTitle: "Frameworks",
318+
comingSoonFrameworksText: "React, Vue und Svelte Grundlagen. Baue echte Komponenten Schritt für Schritt.",
319+
320+
// Device Notice
321+
deviceNotice: "<strong>Am besten auf Desktop oder Tablet (Querformat).</strong> Mobil funktioniert, aber größere Bildschirme machen das Coden einfacher.",
322+
295323
// Footer
296324
footerModules: "Module",
297325
footerResources: "Ressourcen",
@@ -445,6 +473,20 @@ const translations = {
445473
landingCtaSub: "Darmowe i open source. Bez konta. Postęp zapisywany lokalnie.",
446474
landingCtaButton: "Rozpocznij swoją podróż",
447475

476+
// Coming Soon
477+
landingComingSoonTitle: "Wkrótce",
478+
comingSoonSyncTitle: "Synchronizacja",
479+
comingSoonSyncText: "Synchronizuj postępy na wszystkich urządzeniach. Zacznij na komputerze, kontynuuj na tablecie.",
480+
comingSoonAchievementsTitle: "Osiągnięcia",
481+
comingSoonAchievementsText: "Zdobywaj odznaki, ucząc się nowych umiejętności. Śledź swoje postępy.",
482+
comingSoonJsTitle: "JavaScript",
483+
comingSoonJsText: "Interaktywne lekcje JavaScript z wykonywaniem kodu na żywo i manipulacją DOM.",
484+
comingSoonFrameworksTitle: "Frameworki",
485+
comingSoonFrameworksText: "Podstawy React, Vue i Svelte. Buduj prawdziwe komponenty krok po kroku.",
486+
487+
// Device Notice
488+
deviceNotice: "<strong>Najlepiej na komputerze lub tablecie (poziomo).</strong> Na telefonie też działa, ale większy ekran ułatwia kodowanie.",
489+
448490
// Footer
449491
footerModules: "Moduły",
450492
footerResources: "Zasoby",
@@ -600,6 +642,20 @@ const translations = {
600642
landingCtaSub: "Gratis y de código abierto. Sin cuenta requerida. Progreso guardado localmente.",
601643
landingCtaButton: "Comienza tu viaje",
602644

645+
// Coming Soon
646+
landingComingSoonTitle: "Próximamente",
647+
comingSoonSyncTitle: "Sincronización",
648+
comingSoonSyncText: "Sincroniza tu progreso en todos tus dispositivos. Empieza en el escritorio, continúa en la tablet.",
649+
comingSoonAchievementsTitle: "Logros",
650+
comingSoonAchievementsText: "Gana insignias mientras dominas nuevas habilidades. Sigue tus hitos de aprendizaje.",
651+
comingSoonJsTitle: "JavaScript",
652+
comingSoonJsText: "Lecciones interactivas de JavaScript con ejecución de código en vivo y manipulación del DOM.",
653+
comingSoonFrameworksTitle: "Frameworks",
654+
comingSoonFrameworksText: "Fundamentos de React, Vue y Svelte. Construye componentes reales paso a paso.",
655+
656+
// Device Notice
657+
deviceNotice: "<strong>Mejor en escritorio o tablet (horizontal).</strong> Funciona en móvil, pero pantallas más grandes facilitan la programación.",
658+
603659
// Footer
604660
footerModules: "Módulos",
605661
footerResources: "Recursos",
@@ -750,6 +806,20 @@ const translations = {
750806
landingCtaSub: "مجاني ومفتوح المصدر. لا حاجة لحساب. يُحفظ التقدم محليًا.",
751807
landingCtaButton: "ابدأ رحلتك",
752808

809+
// Coming Soon
810+
landingComingSoonTitle: "قريباً",
811+
comingSoonSyncTitle: "مزامنة سحابية",
812+
comingSoonSyncText: "زامن تقدمك عبر جميع أجهزتك. ابدأ على الكمبيوتر، تابع على الجهاز اللوحي.",
813+
comingSoonAchievementsTitle: "الإنجازات",
814+
comingSoonAchievementsText: "احصل على شارات أثناء إتقانك لمهارات جديدة. تتبع معالم تعلمك.",
815+
comingSoonJsTitle: "جافاسكريبت",
816+
comingSoonJsText: "دروس تفاعلية في JavaScript مع تنفيذ مباشر للكود والتعامل مع DOM.",
817+
comingSoonFrameworksTitle: "أطر العمل",
818+
comingSoonFrameworksText: "أساسيات React وVue وSvelte. ابنِ مكونات حقيقية خطوة بخطوة.",
819+
820+
// Device Notice
821+
deviceNotice: "<strong>أفضل على الكمبيوتر أو الجهاز اللوحي (أفقي).</strong> يعمل على الجوال، لكن الشاشات الأكبر تسهّل البرمجة.",
822+
753823
// Footer
754824
footerModules: "الوحدات",
755825
footerResources: "الموارد",
@@ -902,6 +972,20 @@ const translations = {
902972
landingCtaSub: "Безкоштовно та з відкритим кодом. Без реєстрації. Прогрес зберігається локально.",
903973
landingCtaButton: "Розпочни свою подорож",
904974

975+
// Coming Soon
976+
landingComingSoonTitle: "Незабаром",
977+
comingSoonSyncTitle: "Хмарна синхронізація",
978+
comingSoonSyncText: "Синхронізуй прогрес на всіх пристроях. Почни на комп'ютері, продовжуй на планшеті.",
979+
comingSoonAchievementsTitle: "Досягнення",
980+
comingSoonAchievementsText: "Отримуй значки, освоюючи нові навички. Відстежуй свої навчальні віхи.",
981+
comingSoonJsTitle: "JavaScript",
982+
comingSoonJsText: "Інтерактивні уроки JavaScript з виконанням коду в реальному часі та маніпуляцією DOM.",
983+
comingSoonFrameworksTitle: "Фреймворки",
984+
comingSoonFrameworksText: "Основи React, Vue та Svelte. Створюй справжні компоненти крок за кроком.",
985+
986+
// Device Notice
987+
deviceNotice: "<strong>Найкраще на комп'ютері або планшеті (горизонтально).</strong> На телефоні теж працює, але більший екран полегшує програмування.",
988+
905989
// Footer
906990
footerModules: "Модулі",
907991
footerResources: "Ресурси",

‎src/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,38 @@ <h3>Tailwind CSS</h3>
169169
</div>
170170
</section>
171171

172+
<section class="coming-soon">
173+
<h2 data-i18n="landingComingSoonTitle">Coming Soon</h2>
174+
<div class="coming-soon-grid">
175+
<article class="coming-soon-card">
176+
<span class="coming-soon-icon">🔄</span>
177+
<h3 data-i18n="comingSoonSyncTitle">Cloud Sync</h3>
178+
<p data-i18n="comingSoonSyncText">Sync your progress across all devices. Start on desktop, continue on tablet.</p>
179+
</article>
180+
<article class="coming-soon-card">
181+
<span class="coming-soon-icon">🏆</span>
182+
<h3 data-i18n="comingSoonAchievementsTitle">Achievements</h3>
183+
<p data-i18n="comingSoonAchievementsText">Earn badges as you master new skills. Track your learning milestones.</p>
184+
</article>
185+
<article class="coming-soon-card">
186+
<span class="coming-soon-icon">⚡</span>
187+
<h3 data-i18n="comingSoonJsTitle">JavaScript</h3>
188+
<p data-i18n="comingSoonJsText">Interactive JavaScript lessons with live code execution and DOM manipulation.</p>
189+
</article>
190+
<article class="coming-soon-card">
191+
<span class="coming-soon-icon">🧩</span>
192+
<h3 data-i18n="comingSoonFrameworksTitle">Frameworks</h3>
193+
<p data-i18n="comingSoonFrameworksText">React, Vue, and Svelte basics. Build real components step by step.</p>
194+
</article>
195+
</div>
196+
</section>
197+
198+
<section class="device-notice">
199+
<p data-i18n="deviceNotice">
200+
<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
201+
</p>
202+
</section>
203+
172204
<section class="landing-cta">
173205
<h2 data-i18n="landingCtaTitle">Start Learning Today</h2>
174206
<a href="#welcome/0" class="cta-button" data-i18n="landingCtaButton">Begin Your Journey</a>

‎src/main.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1890,6 +1890,91 @@ input:checked + .toggle-slider::before {
18901890
}
18911891
}
18921892

1893+
/* Coming Soon Section */
1894+
.coming-soon {
1895+
margin-top: var(--spacing-xl);
1896+
text-align: center;
1897+
}
1898+
1899+
.coming-soon h2 {
1900+
font-size: 1.5rem;
1901+
color: var(--primary-dark);
1902+
margin-bottom: var(--spacing-lg);
1903+
}
1904+
1905+
.coming-soon-grid {
1906+
display: grid;
1907+
grid-template-columns: repeat(4, 1fr);
1908+
gap: var(--spacing-md);
1909+
}
1910+
1911+
.coming-soon-card {
1912+
background: var(--panel-bg);
1913+
border-radius: var(--border-radius-md);
1914+
padding: 1.5rem 1rem;
1915+
text-align: center;
1916+
border: 1px dashed var(--border-color);
1917+
opacity: 0.85;
1918+
transition: opacity 0.2s, border-color 0.2s;
1919+
}
1920+
1921+
.coming-soon-card:hover {
1922+
opacity: 1;
1923+
border-color: var(--section-color);
1924+
}
1925+
1926+
.coming-soon-icon {
1927+
font-size: 2rem;
1928+
display: block;
1929+
margin-bottom: 0.75rem;
1930+
}
1931+
1932+
.coming-soon-card h3 {
1933+
font-size: 1rem;
1934+
margin-bottom: 0.5rem;
1935+
color: var(--text-color);
1936+
}
1937+
1938+
.coming-soon-card p {
1939+
font-size: 0.85rem;
1940+
color: var(--light-text);
1941+
line-height: 1.5;
1942+
margin: 0;
1943+
}
1944+
1945+
@media (max-width: 900px) {
1946+
.coming-soon-grid {
1947+
grid-template-columns: repeat(2, 1fr);
1948+
}
1949+
}
1950+
1951+
@media (max-width: 500px) {
1952+
.coming-soon-grid {
1953+
grid-template-columns: 1fr;
1954+
}
1955+
}
1956+
1957+
/* Device Notice */
1958+
.device-notice {
1959+
margin-top: var(--spacing-lg);
1960+
text-align: center;
1961+
padding: 1rem;
1962+
}
1963+
1964+
.device-notice p {
1965+
display: inline-block;
1966+
padding: 0.75rem 1.5rem;
1967+
background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
1968+
border-radius: var(--border-radius-md);
1969+
color: var(--light-text);
1970+
font-size: 0.9rem;
1971+
margin: 0;
1972+
}
1973+
1974+
.device-notice strong {
1975+
color: var(--text-color);
1976+
}
1977+
18931978
/* Landing CTA */
18941979
.landing-cta {
18951980
text-align: center;

0 commit comments

Comments
 (0)