feat(i18n): add landing page localization for 6 languages
- Add translation keys for landing page (hero, benefits, learning paths, CTA) - Support EN, DE, PL, ES, AR, UK languages - Add data-i18n attributes to landing page HTML elements
This commit is contained in:
@@ -86,23 +86,29 @@
|
||||
<div class="landing-content">
|
||||
<section class="hero">
|
||||
<img src="./bowl.png" width="120" alt="" class="hero-logo" />
|
||||
<h1>Learn Web Development<br /><span class="hero-highlight">By Writing Real Code</span></h1>
|
||||
<p class="hero-subtitle">
|
||||
<h1>
|
||||
<span data-i18n="landingHeroTitle">Learn Web Development</span><br /><span
|
||||
class="hero-highlight"
|
||||
data-i18n="landingHeroHighlight"
|
||||
>By Writing Real Code</span
|
||||
>
|
||||
</h1>
|
||||
<p class="hero-subtitle" data-i18n="landingHeroSubtitle">
|
||||
Master HTML, CSS, and Tailwind through hands-on exercises with instant feedback. Free and open source.
|
||||
</p>
|
||||
<a href="#welcome/0" class="cta-button cta-primary">Start Learning NOW</a>
|
||||
<a href="#welcome/0" class="cta-button cta-primary" data-i18n="landingCtaStart">Start Learning NOW</a>
|
||||
</section>
|
||||
|
||||
<section class="why-it-works">
|
||||
<h2>Why Code Crispies Works</h2>
|
||||
<h2 data-i18n="landingWhyTitle">Why Code Crispies Works</h2>
|
||||
<div class="benefits-grid">
|
||||
<article class="benefit-card">
|
||||
<svg class="benefit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="16 18 22 12 16 6"></polyline>
|
||||
<polyline points="8 6 2 12 8 18"></polyline>
|
||||
</svg>
|
||||
<h3>Learn by Doing</h3>
|
||||
<p>
|
||||
<h3 data-i18n="landingBenefit1Title">Learn by Doing</h3>
|
||||
<p data-i18n="landingBenefit1Text">
|
||||
Write real code from lesson one. No videos to watch—just you, an editor, and instant feedback on every keystroke.
|
||||
</p>
|
||||
</article>
|
||||
@@ -110,8 +116,10 @@
|
||||
<svg class="benefit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 20V10M18 20V4M6 20v-4"></path>
|
||||
</svg>
|
||||
<h3>Practice at Your Pace</h3>
|
||||
<p>Start with basics, fill gaps in your understanding, then accelerate. Pick up where you left off anytime.</p>
|
||||
<h3 data-i18n="landingBenefit2Title">Practice at Your Pace</h3>
|
||||
<p data-i18n="landingBenefit2Text">
|
||||
Start with basics, fill gaps in your understanding, then accelerate. Pick up where you left off anytime.
|
||||
</p>
|
||||
</article>
|
||||
<article class="benefit-card">
|
||||
<svg class="benefit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
@@ -119,43 +127,42 @@
|
||||
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
|
||||
></path>
|
||||
</svg>
|
||||
<h3>Master Real Skills</h3>
|
||||
<p>
|
||||
Learn CSS, HTML, and Tailwind the way professionals use them—through hands-on exercises and
|
||||
<a href="#reference/css">reference guides</a>.
|
||||
<h3 data-i18n="landingBenefit3Title">Master Real Skills</h3>
|
||||
<p data-i18n="landingBenefit3Text">
|
||||
Learn CSS, HTML, and Tailwind the way professionals use them—through hands-on exercises and reference guides.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="learning-paths">
|
||||
<h2>Explore Learning Paths</h2>
|
||||
<h2 data-i18n="landingPathsTitle">Explore Learning Paths</h2>
|
||||
<div class="section-cards" id="section-cards">
|
||||
<a href="#css" class="section-card" data-section="css">
|
||||
<div class="section-card-icon" style="background: #264de4">CSS</div>
|
||||
<h3>CSS</h3>
|
||||
<p>Styling, layout, and animations</p>
|
||||
<p data-i18n="landingCssDesc">Styling, layout, and animations</p>
|
||||
<span class="section-card-progress" id="css-progress"></span>
|
||||
</a>
|
||||
<a href="#html" class="section-card" data-section="html">
|
||||
<div class="section-card-icon" style="background: #e34c26">HTML</div>
|
||||
<h3>HTML</h3>
|
||||
<p>Semantic markup and native elements</p>
|
||||
<p data-i18n="landingHtmlDesc">Semantic markup and native elements</p>
|
||||
<span class="section-card-progress" id="html-progress"></span>
|
||||
</a>
|
||||
<a href="#tailwind" class="section-card" data-section="tailwind">
|
||||
<div class="section-card-icon" style="background: #06b6d4">TW</div>
|
||||
<h3>Tailwind CSS</h3>
|
||||
<p>Utility-first CSS framework</p>
|
||||
<p data-i18n="landingTailwindDesc">Utility-first CSS framework</p>
|
||||
<span class="section-card-progress" id="tailwind-progress"></span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="landing-cta">
|
||||
<h2>Start Learning Today</h2>
|
||||
<a href="#welcome/0" class="cta-button">Begin Your Journey</a>
|
||||
<p class="cta-sub">Free and open source. No account required. Progress saved locally.</p>
|
||||
<h2 data-i18n="landingCtaTitle">Start Learning Today</h2>
|
||||
<a href="#welcome/0" class="cta-button" data-i18n="landingCtaButton">Begin Your Journey</a>
|
||||
<p class="cta-sub" data-i18n="landingCtaSub">Free and open source. No account required. Progress saved locally.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user