debajo y un botón CTA con buen estilo (padding y bordes redondeados).","previewDescription":"Hello World centrado, un párrafo debajo presentándote, y un botón llamativo (por ejemplo «Ver proyectos»). Todo en columna, sin solaparse.","estimatedMinutes":20,"initialCheckpoints":[{"id":"page-renders","label":"La página carga sin errores","hint":"","hintSteps":[{"type":"action","text":"Abre la carpeta del zip en la terminal del proyecto"},{"type":"action","text":"Ejecuta npm install (solo la primera vez)"},{"type":"action","text":"Luego npm run dev y abre http://localhost:5173"},{"type":"tip","text":"F12 → Consola: no debe haber errores en rojo"},{"type":"tip","text":"Al guardar en src/, este paso se actualiza solo"}],"passed":false},{"id":"h1-still-present","label":"El h1 Hello World sigue presente y centrado","hint":"","hintSteps":[{"type":"file","text":"Abre","path":"src/App.jsx"},{"type":"tip","text":"No borres el hero del nivel 1"},{"type":"code","text":"Mantén:","code":"

debe tener flex flex-col items-center justify-center"},{"type":"code","text":"Ejemplo:","code":"className=\"min-h-screen bg-[#0a0a0f] flex flex-col items-center justify-center\""}],"passed":false},{"id":"subtitle-p-exists","label":"Has añadido un

en el hero","hint":"","hintSteps":[{"type":"action","text":"Debajo del , nueva línea con un

"},{"type":"tip","text":"Aún puede estar vacío en este paso"}],"passed":false},{"id":"subtitle-text-length","label":"El párrafo tiene tu presentación (10+ caracteres)","hint":"","hintSteps":[{"type":"code","text":"Texto ejemplo:","code":"

Desarrollador web en formación

"}],"passed":false},{"id":"subtitle-below-h1","label":"El párrafo está debajo del h1 (no al lado)","hint":"","hintSteps":[{"type":"tip","text":"Orden en el código: primero h1, luego p"},{"type":"action","text":"Si se ven en horizontal, revisa flex-col en el main"}],"passed":false},{"id":"subtitle-styled","label":"El párrafo tiene estilo (gris, margen o centrado)","hint":"","hintSteps":[{"type":"code","text":"Clases sugeridas:","code":"className=\"text-gray-300 mt-4 text-center max-w-md\""}],"passed":false},{"id":"cta-plain-exists","label":"Existe un botón «Ver proyectos» (sin estilo aún)","hint":"","hintSteps":[{"type":"code","text":"Mínimo:","code":""}],"passed":false},{"id":"cta-below-subtitle","label":"El botón está debajo del párrafo","hint":"","hintSteps":[{"type":"action","text":"Orden: h1 → p → button"}],"passed":false},{"id":"hero-vertical-stack-final","label":"h1, párrafo y botón en columna sin solaparse","hint":"","hintSteps":[{"type":"tip","text":"Comprueba en el navegador que nada se tapa"}],"passed":false},{"id":"cta-padding","label":"El botón tiene padding (px-6 py-3)","hint":"","hintSteps":[{"type":"action","text":"Solo añade padding al botón"},{"type":"code","text":"Clase:","code":"className=\"px-6 py-3\""}],"passed":false},{"id":"cta-rounded","label":"El botón tiene bordes redondeados","hint":"","hintSteps":[{"type":"action","text":"Añade rounded-full al botón"}],"passed":false},{"id":"cta-teal-style","label":"El botón es teal con texto blanco","hint":"","hintSteps":[{"type":"code","text":"Estilo final del botón:","code":"className=\"mt-6 px-6 py-3 rounded-full bg-[#2a8ca0] text-white font-semibold\""},{"type":"tip","text":"Compara con la vista previa del curso"}],"passed":false}],"initialStatus":"locked","totalLevels":30}]

Nivel 2: Hero completo

This is how your site should look when you finish this level

Objective

Steps to complete (0/13)