Tu Primera Funcionalidad

Ya configuraste el proyecto, exploraste la estructura e iniciaste el servidor de desarrollo. Ahora es momento de escribir algo de código real. Vamos a transformar la página de bienvenida genérica de SvelteKit en la página de inicio de BookIt.

Lo Que Aprenderás

Cómo editar un componente Svelte existente
Cómo usar variables en tu markup
Cómo agregar estilos básicos a una página
La satisfacción de ver tus cambios al instante

El Estado Actual

Abre src/routes/+page.svelte. Por ahora muestra el contenido predeterminado de SvelteKit:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

Esto está a punto de convertirse en la puerta de entrada de BookIt.

Paso 1: Actualiza el Contenido

Reemplaza el archivo completo con el mensaje de bienvenida de BookIt:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to BookIt</h1>
<p>Book your next service appointment in minutes.</p>

Guarda el archivo. Tu navegador se actualiza de inmediato — "Welcome to BookIt" ahora saluda a los visitantes.

Ese es un cambio real en una app real. Simple, pero es tuyo.

Paso 2: Agrega Más Información

Informemos a los visitantes qué ofrece BookIt. Expande la página:

<!-- filename: src/routes/+page.svelte -->

<!-- ... HTML -->

<h2>Our Services</h2>
<ul>
	<li>Lawn Mowing</li>
	<li>Hedge Trimming</li>
	<li>Garden Consultation</li>
	<li>Tree Pruning</li>
	<li>Patio Cleaning</li>
</ul>

Guarda de nuevo. La página ahora muestra una lista de servicios. Por ahora los estamos escribiendo directamente en el código — en módulos posteriores los cargaremos desde una base de datos.

Paso 3: Agrega una Sección de Script

Usemos una variable en lugar de repetir "BookIt" si la necesitamos en otro lugar. Agrega una sección de script al inicio del archivo:

<!-- filename: src/routes/+page.svelte -->
<script>
	const appName = 'BookIt'
	const tagline = 'Book your next service appointment in minutes.'
</script>

<!-- ... HTML -->

Las llaves {appName} y {tagline} insertan los valores de las variables en el HTML. La página se ve igual, pero ahora podemos reutilizar estos valores.

Paso 4: Agrega Estilos

Es momento de hacer que se vea como una página de aterrizaje de verdad. Agrega un estilo debajo del markup HTML:

<!-- filename: src/routes/+page.svelte -->
<!-- Script -->
<!-- ... HTML -->

<style>
	.hero {
		text-align: center;
		padding: 4rem 1rem;
		background: linear-gradient(135deg, #61d7a8 0%, #4ba298 100%);
		color: white;
		border-radius: 8px;
		margin-bottom: 2rem;
	}

	h1 {
		font-size: 2.5rem;
		margin: 0 0 0.5rem;
	}

	.tagline {
		font-size: 1.25rem;
		opacity: 0.9;
		margin: 0;
	}

	.services {
		max-width: 600px;
		margin: 0 auto;
	}

	h2 {
		color: #374151;
	}

	ul {
		list-style: none;
		padding: 0;
	}

	li {
		padding: 0.75rem 1rem;
		background: #f9fafb;
		margin-bottom: 0.5rem;
		border-radius: 4px;
		border-left: 3px solid #61d7a8;
	}
</style>

Guarda y revisa tu navegador. BookIt ahora tiene una sección hero con degradado y una lista de servicios con estilos. Se ve como una app real.

Paso 5: Agrega un Llamado a la Acción

Toda buena página de aterrizaje necesita un llamado a la acción. Agreguemos un botón que eventualmente enlace a la página de servicios:

<!-- filename: src/routes/+page.svelte -->
<!-- script -->

<div class="hero">
	<h1>Welcome to {appName}</h1>
	<p class="tagline">{tagline}</p>
  <!-- add CTA link -->
	<a href="/services" class="cta">Browse Services</a>
</div>
<!-- ... rest of HTML -->

<style>
  /* ... existing styles ... */

  .cta {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: white;
    color: #4ba298;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: transform 0.2s;
  }

  .cta:hover {
    transform: translateY(-2px);
  }
</style>

El botón enlaza a /services — una página que aún no existe. Al hacer clic mostrará un error 404. Crearemos esa página en el siguiente módulo.

Lo Que Construiste

Mira tu navegador. En solo unos minutos, creaste:

Una sección hero de bienvenida con fondo degradado
Un tagline claro que explica qué hace BookIt
Una lista de servicios disponibles
Un botón de llamado a la acción con efecto hover

Esta es la página de inicio que verán los visitantes cuando lleguen por primera vez a BookIt.

El Archivo Completo

Aquí está el +page.svelte completo como referencia:

<!-- filename: src/routes/+page.svelte -->
<script>
	const appName = 'BookIt'
	const tagline = 'Book your next service appointment in minutes.'
</script>

<div class="hero">
	<h1>Welcome to {appName}</h1>
	<p class="tagline">{tagline}</p>
	<a href="/services" class="cta">Browse Services</a>
</div>

<section class="services">
	<h2>Our Services</h2>
	<ul>
		<li>Lawn Mowing</li>
		<li>Hedge Trimming</li>
		<li>Garden Consultation</li>
		<li>Tree Pruning</li>
		<li>Patio Cleaning</li>
	</ul>
</section>

<style>
	.hero {
		text-align: center;
		padding: 4rem 1rem;
		background: linear-gradient(135deg, #61d7a8 0%, #4ba298 100%);
		color: white;
		border-radius: 8px;
		margin-bottom: 2rem;
	}

	h1 {
		font-size: 2.5rem;
		margin: 0 0 0.5rem;
	}

	.tagline {
		font-size: 1.25rem;
		opacity: 0.9;
		margin: 0 0 1.5rem;
	}

	.cta {
		display: inline-block;
		padding: 0.75rem 2rem;
		background: white;
		color: #4ba298;
		text-decoration: none;
		border-radius: 4px;
		font-weight: 600;
		transition: transform 0.2s;
	}

	.cta:hover {
		transform: translateY(-2px);
	}

	.services {
		max-width: 600px;
		margin: 0 auto;
	}

	h2 {
		color: #374151;
	}

	ul {
		list-style: none;
		padding: 0;
	}

	li {
		padding: 0.75rem 1rem;
		background: #f9fafb;
		margin-bottom: 0.5rem;
		border-radius: 4px;
		border-left: 3px solid #61d7a8;
	}
</style>

Resumen

Hiciste tus primeros cambios reales a BookIt. Partiendo de una plantilla en blanco, creaste una página de inicio con estilos que incluye una sección hero, lista de servicios y llamado a la acción — todo usando las secciones de script, markup y style que aprendiste.

Puntos clave:

Edita los archivos .svelte para modificar tu app
Usa {variable} para insertar valores de JavaScript en HTML
Los estilos en la etiqueta <style> tienen alcance limitado al componente
Los cambios aparecen al instante gracias al servidor de desarrollo

¡Módulo 1 Completo! 🎉

Terminaste el módulo de Introducción. Ahora tienes:

Un proyecto SvelteKit ejecutándose localmente
Una comprensión de la estructura del proyecto
Conocimiento de cómo funcionan los archivos .svelte
Una página de inicio de BookIt con estilos

A continuación: Módulo 2 — Enrutamiento Básico

El botón "Browse Services" enlaza a una página que no existe. En el siguiente módulo crearemos la página de servicios, una página de acerca de, y aprenderemos cómo funciona el enrutamiento basado en archivos de SvelteKit.