feat: add 4th benefit card (Free & Open Source) with translations

src/i18n.js

@@ -128,6 +128,8 @@ const translations = {
 		landingBenefit2Text: "Start with basics, fill gaps in your understanding, then accelerate. Pick up where you left off anytime.",
 		landingBenefit3Title: "Master Real Skills",
 		landingBenefit3Text: "Learn CSS, HTML, and Tailwind the way professionals use them—through hands-on exercises and reference guides.",
+		landingBenefit4Title: "Free & Open Source",
+		landingBenefit4Text: "No account, no paywall, no tracking. Your progress stays in your browser. The code is open for everyone.",
 		landingPathsTitle: "Explore Learning Paths",
 		landingCssDesc: "Styling, layout, and animations",
 		landingHtmlDesc: "Semantic markup and native elements",
@@ -279,6 +281,8 @@ const translations = {
 			"Beginne mit den Grundlagen, fülle Wissenslücken und beschleunige dann. Mach jederzeit dort weiter, wo du aufgehört hast.",
 		landingBenefit3Title: "Echte Fähigkeiten",
 		landingBenefit3Text: "Lerne CSS, HTML und Tailwind so, wie Profis sie nutzen – durch praktische Übungen und Referenzanleitungen.",
+		landingBenefit4Title: "Frei & Open Source",
+		landingBenefit4Text: "Kein Konto, keine Paywall, kein Tracking. Dein Fortschritt bleibt in deinem Browser. Der Code ist offen für alle.",
 		landingPathsTitle: "Lernpfade entdecken",
 		landingCssDesc: "Styling, Layout und Animationen",
 		landingHtmlDesc: "Semantisches Markup und native Elemente",
@@ -430,6 +434,8 @@ const translations = {
 		landingBenefit3Title: "Prawdziwe umiejętności",
 		landingBenefit3Text:
 			"Naucz się CSS, HTML i Tailwind tak, jak używają ich profesjonaliści – poprzez praktyczne ćwiczenia i przewodniki referencyjne.",
+		landingBenefit4Title: "Darmowe i Open Source",
+		landingBenefit4Text: "Bez konta, bez paywalla, bez śledzenia. Twój postęp zostaje w przeglądarce. Kod jest otwarty dla wszystkich.",
 		landingPathsTitle: "Odkryj ścieżki nauki",
 		landingCssDesc: "Stylowanie, układy i animacje",
 		landingHtmlDesc: "Semantyczne znaczniki i natywne elementy",
@@ -583,6 +589,8 @@ const translations = {
 			"Comienza con lo básico, llena los vacíos en tu comprensión y luego acelera. Retoma donde lo dejaste en cualquier momento.",
 		landingBenefit3Title: "Habilidades reales",
 		landingBenefit3Text: "Aprende CSS, HTML y Tailwind como los usan los profesionales—a través de ejercicios prácticos y guías de referencia.",
+		landingBenefit4Title: "Gratis y Open Source",
+		landingBenefit4Text: "Sin cuenta, sin paywall, sin rastreo. Tu progreso se queda en tu navegador. El código está abierto para todos.",
 		landingPathsTitle: "Explora rutas de aprendizaje",
 		landingCssDesc: "Estilos, diseño y animaciones",
 		landingHtmlDesc: "Marcado semántico y elementos nativos",
@@ -731,6 +739,8 @@ const translations = {
 		landingBenefit2Text: "ابدأ بالأساسيات، املأ الفجوات في فهمك، ثم تسارع. استأنف من حيث توقفت في أي وقت.",
 		landingBenefit3Title: "مهارات حقيقية",
 		landingBenefit3Text: "تعلم CSS و HTML و Tailwind بالطريقة التي يستخدمها المحترفون—من خلال تمارين عملية وأدلة مرجعية.",
+		landingBenefit4Title: "مجاني ومفتوح المصدر",
+		landingBenefit4Text: "بدون حساب، بدون حواجز دفع، بدون تتبع. تقدمك يبقى في متصفحك. الكود مفتوح للجميع.",
 		landingPathsTitle: "استكشف مسارات التعلم",
 		landingCssDesc: "التنسيق والتخطيط والرسوم المتحركة",
 		landingHtmlDesc: "الترميز الدلالي والعناصر الأصلية",
@@ -881,6 +891,8 @@ const translations = {
 		landingBenefit2Text: "Почни з основ, заповни прогалини у розумінні, потім прискорюйся. Продовжуй з того місця, де зупинився, будь-коли.",
 		landingBenefit3Title: "Реальні навички",
 		landingBenefit3Text: "Вивчай CSS, HTML та Tailwind так, як їх використовують професіонали—через практичні вправи та довідники.",
+		landingBenefit4Title: "Безкоштовно та Open Source",
+		landingBenefit4Text: "Без акаунту, без paywall, без відстеження. Твій прогрес залишається у браузері. Код відкритий для всіх.",
 		landingPathsTitle: "Досліджуй шляхи навчання",
 		landingCssDesc: "Стилізація, макети та анімації",
 		landingHtmlDesc: "Семантична розмітка та нативні елементи",

src/index.html

@@ -132,6 +132,16 @@
 									Learn CSS, HTML, and Tailwind the way professionals use them—through hands-on exercises and reference guides.
 								</p>
 							</article>
+							<article class="benefit-card">
+								<svg class="benefit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+									<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+								</svg>
+								<h3 data-i18n="landingBenefit4Title">Free & Open Source</h3>
+								<p data-i18n="landingBenefit4Text">
+									No account, no paywall, no tracking. Your progress stays in your browser. The code is open for everyone.
+								</p>
+							</article>
 						</div>
 					</section>