Todo Negocio Necesita una Historia

Los clientes quieren saber con quién están haciendo una reserva. Una página about genera confianza y ayuda a que tu plataforma de reservas se vea profesional. Agreguémosla a BookIt.

Lo que Aprenderás

Reforzar el patrón de carpeta + +page.svelte
Crear una página centrada en contenido
Practicar el flujo de trabajo de enrutamiento

Crear la Ruta About

Ya conoces el patrón. Apliquémoslo.

Paso 1: Crear la Carpeta

src/routes/
├── +page.svelte
├── services/
│   └── +page.svelte
└── about/              ← Create this folder

Paso 2: Agregar la Página

Crea +page.svelte dentro de la carpeta about:

<!-- filename: src/routes/about/+page.svelte -->
<h1>About BookIt</h1>

<p>
  BookIt makes scheduling simple. Whether you need lawn care, garden 
  maintenance, or expert consultation, we connect you with trusted 
  professionals in your area.
</p>

<h2>Our Mission</h2>
<p>
  We believe booking services should be as easy as picking a time that 
  works for you. No phone calls, no back-and-forth emails — just simple 
  online booking.
</p>

<h2>Why Choose Us</h2>
<ul>
  <li>Vetted, professional service providers</li>
  <li>Transparent pricing with no hidden fees</li>
  <li>Easy rescheduling and cancellation</li>
  <li>Secure online payments</li>
</ul>

<h2>Get in Touch</h2>
<p>
  Have questions? We'd love to hear from you. Visit our contact page 
  or email us at hello@bookit.example.
</p>

Paso 3: Verificar

Navega a http://localhost:5173/about en tu navegador. Tu página about debería aparecer.

Por Qué Esta Página es Importante

La página about cumple múltiples propósitos en una aplicación de reservas:

Generación de confianza. Es más probable que los clientes hagan una reserva cuando entienden quién está detrás del servicio.

Valor SEO. Los motores de búsqueda buscan contenido que explique qué hace tu negocio. Una página about proporciona ese contexto.

Destino de navegación. La mayoría de los sitios web tienen una página about — los usuarios esperan encontrar una.

La Estructura de tu Proyecto

src/routes/
├── +page.svelte          → /
├── services/
│   └── +page.svelte      → /services
└── about/
    └── +page.svelte      → /about  ← New!

Una Nota sobre el Contenido

Esta lección incluye contenido de marcador de posición. En un proyecto real, escribirías el texto que refleje tu negocio actual. Lo importante es entender el patrón:

Crear la carpeta para la ruta
Agregar +page.svelte con tu contenido
Visitar la URL para verlo en vivo

El contenido en sí es solo HTML dentro de un componente Svelte.

Errores Comunes

Anidamiento Demasiado Profundo

src/routes/
└── pages/
    └── about/
        └── +page.svelte    → /pages/about (probably not what you want)

Recuerda: cada carpeta se convierte en un segmento de URL. Si quieres /about, la carpeta about va directamente dentro de routes, no dentro de otra carpeta.

Resumen

Has agregado una segunda página informativa a BookIt. El patrón sigue siendo el mismo: el nombre de la carpeta se convierte en la URL, +page.svelte proporciona el contenido.

Conclusiones clave:

Las páginas de contenido estático funcionan igual que las dinámicas
La estructura de carpetas se mapea directamente a las URLs
Cada página es un componente Svelte independiente

Próximos Pasos

Queda una página estática más. Continúa con Agregar una Página de Contacto para darles a los clientes una forma de comunicarse.