feat: update section card colors to match completion badge theme

src/config/sections.js

@@ -8,21 +8,21 @@ export const sections = {
 		id: "css",
 		title: "CSS",
 		description: "Styling, layout, and animations",
-		color: "#264de4",
+		color: "#7c4dff",
 		order: 1
 	},
 	html: {
 		id: "html",
 		title: "HTML",
 		description: "Semantic markup and native elements",
-		color: "#e34c26",
+		color: "#9b59b6",
 		order: 2
 	},
 	tailwind: {
 		id: "tailwind",
 		title: "Tailwind CSS",
 		description: "Utility-first CSS framework",
-		color: "#06b6d4",
+		color: "#00bcd4",
 		order: 3
 	}
 };

src/index.html

@@ -139,19 +139,19 @@
 						<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>
+								<div class="section-card-icon" style="background: #7c4dff">CSS</div>
 								<h3>CSS</h3>
 								<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>
+								<div class="section-card-icon" style="background: #9b59b6">HTML</div>
 								<h3>HTML</h3>
 								<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>
+								<div class="section-card-icon" style="background: #00bcd4">TW</div>
 								<h3>Tailwind CSS</h3>
 								<p data-i18n="landingTailwindDesc">Utility-first CSS framework</p>
 								<span class="section-card-progress" id="tailwind-progress"></span>