🗺️ خريطة التعلم

<div class="flex items-stretch "> <div class="flex-1 text-right pl-6"> <a href="/courses/html-css" class="glass-card p-5 block group hover:scale-[1.02] transition-all"> <div class="flex items-center gap-3 flex-row-reverse"> <span class="text-3xl">🌐</span> <div> <h3 class="font-bold text-white group-hover:text-purple-400 transition">HTML و CSS</h3> <p class="text-sm text-gray-400">أساسيات بناء صفحات الويب</p> </div> </div> <div class="mt-2 w-full bg-gray-700/30 rounded-full h-1.5"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-1.5 rounded-full map-progress" data-slug="html-css" style="width:0%"></div> </div> </a> </div> <div class="flex flex-col items-center w-12 flex-shrink-0"> <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm z-10 bg-green-500 text-white">1</div> <div class="w-0.5 flex-1 bg-gradient-to-b from-purple-500 to-blue-500 opacity-30"></div> </div> <div class="flex-1"></div> </div> <div class="flex items-stretch flex-row-reverse"> <div class="flex-1 text-left pr-6"> <a href="/courses/javascript-fundamentals" class="glass-card p-5 block group hover:scale-[1.02] transition-all"> <div class="flex items-center gap-3 "> <span class="text-3xl">⚡</span> <div> <h3 class="font-bold text-white group-hover:text-purple-400 transition">JavaScript</h3> <p class="text-sm text-gray-400">إضافة التفاعل للصفحات</p> </div> </div> <div class="mt-2 w-full bg-gray-700/30 rounded-full h-1.5"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-1.5 rounded-full map-progress" data-slug="javascript-fundamentals" style="width:0%"></div> </div> </a> </div> <div class="flex flex-col items-center w-12 flex-shrink-0"> <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm z-10 bg-purple-500/20 text-purple-400 border-2 border-purple-500">2</div> <div class="w-0.5 flex-1 bg-gradient-to-b from-purple-500 to-blue-500 opacity-30"></div> </div> <div class="flex-1"></div> </div> <div class="flex items-stretch "> <div class="flex-1 text-right pl-6"> <a href="/courses/git-github" class="glass-card p-5 block group hover:scale-[1.02] transition-all"> <div class="flex items-center gap-3 flex-row-reverse"> <span class="text-3xl">📦</span> <div> <h3 class="font-bold text-white group-hover:text-purple-400 transition">Git و GitHub</h3> <p class="text-sm text-gray-400">التحكم بالإصدارات والتعاون</p> </div> </div> <div class="mt-2 w-full bg-gray-700/30 rounded-full h-1.5"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-1.5 rounded-full map-progress" data-slug="git-github" style="width:0%"></div> </div> </a> </div> <div class="flex flex-col items-center w-12 flex-shrink-0"> <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm z-10 bg-purple-500/20 text-purple-400 border-2 border-purple-500">3</div> <div class="w-0.5 flex-1 bg-gradient-to-b from-purple-500 to-blue-500 opacity-30"></div> </div> <div class="flex-1"></div> </div> <div class="flex items-stretch flex-row-reverse"> <div class="flex-1 text-left pr-6"> <a href="/courses/typescript" class="glass-card p-5 block group hover:scale-[1.02] transition-all"> <div class="flex items-center gap-3 "> <span class="text-3xl">🔷</span> <div> <h3 class="font-bold text-white group-hover:text-purple-400 transition">TypeScript</h3> <p class="text-sm text-gray-400">JavaScript بقوة الأنواع</p> </div> </div> <div class="mt-2 w-full bg-gray-700/30 rounded-full h-1.5"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-1.5 rounded-full map-progress" data-slug="typescript" style="width:0%"></div> </div> </a> </div> <div class="flex flex-col items-center w-12 flex-shrink-0"> <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm z-10 bg-purple-500/20 text-purple-400 border-2 border-purple-500">4</div> <div class="w-0.5 flex-1 bg-gradient-to-b from-purple-500 to-blue-500 opacity-30"></div> </div> <div class="flex-1"></div> </div> <div class="flex items-stretch "> <div class="flex-1 text-right pl-6"> <a href="/courses/react-basics" class="glass-card p-5 block group hover:scale-[1.02] transition-all"> <div class="flex items-center gap-3 flex-row-reverse"> <span class="text-3xl">⚛️</span> <div> <h3 class="font-bold text-white group-hover:text-purple-400 transition">React</h3> <p class="text-sm text-gray-400">بناء واجهات تفاعلية حديثة</p> </div> </div> <div class="mt-2 w-full bg-gray-700/30 rounded-full h-1.5"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-1.5 rounded-full map-progress" data-slug="react-basics" style="width:0%"></div> </div> </a> </div> <div class="flex flex-col items-center w-12 flex-shrink-0"> <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm z-10 bg-purple-500/20 text-purple-400 border-2 border-purple-500">5</div> <div class="w-0.5 flex-1 bg-gradient-to-b from-purple-500 to-blue-500 opacity-30"></div> </div> <div class="flex-1"></div> </div> <div class="flex items-stretch flex-row-reverse"> <div class="flex-1 text-left pr-6"> <a href="/challenges" class="glass-card p-5 block group hover:scale-[1.02] transition-all"> <div class="flex items-center gap-3 "> <span class="text-3xl">🏆</span> <div> <h3 class="font-bold text-white group-hover:text-purple-400 transition">التحديات</h3> <p class="text-sm text-gray-400">تمرن على مهاراتك</p> </div> </div> <div class="mt-2 w-full bg-gray-700/30 rounded-full h-1.5"> <div class="bg-gradient-to-l from-purple-500 to-blue-500 h-1.5 rounded-full map-progress" data-slug="null" style="width:0%"></div> </div> </a> </div> <div class="flex flex-col items-center w-12 flex-shrink-0"> <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm z-10 bg-yellow-500 text-black">6</div> </div> <div class="flex-1"></div> </div>