Construa o Núcleo do BookIt

Todo aplicativo de reservas precisa de um lugar para navegar pelo que está disponível. Nesta lição, você criará a página de serviços — o coração do BookIt onde os clientes descobrem o que podem reservar.

O Que Você Aprenderá

Criar uma nova rota adicionando uma pasta e +page.svelte
Construir uma página simples de listagem de serviços
Verificar se sua rota funciona no navegador

O Problema

O BookIt atualmente tem apenas uma página inicial. Os clientes precisam de uma página dedicada para navegar por todos os serviços disponíveis — corte de grama, aparação de arbustos, consultas e muito mais. Precisamos de uma rota /services.

Criar a Rota de Serviços

Criar uma nova página no SvelteKit é simples: crie uma pasta, adicione +page.svelte.

Passo 1: Criar a Pasta

Dentro do diretório src/routes, crie uma nova pasta chamada services:

src/routes/
├── +page.svelte          (existing homepage)
└── services/             ← Create this folder

Passo 2: Adicionar o Arquivo da Página

Dentro da pasta services, crie +page.svelte:

<!-- filename: src/routes/services/+page.svelte -->
<h1>Our Services</h1>
<p>Browse our available services and book your appointment.</p>

Só isso. Você criou uma rota.

Passo 3: Visualizar no Navegador

Com seu servidor de desenvolvimento em execução (npm run dev), abra o navegador em:

http://localhost:5173/services

Você deve ver "Our Services" exibido na página.

Adicionar Listagens de Serviços

Uma página que apenas diz "Our Services" não é muito útil. Vamos adicionar alguns serviços de verdade. Por enquanto, vamos codificá-los diretamente no componente — módulos posteriores ensinarão como carregar esses dados a partir de um servidor.

<!-- filename: src/routes/services/+page.svelte -->
<script>
  // Hardcoded services for now — we'll load these from a server later
  const services = [
    {
      id: '1',
      slug: 'lawn-mowing',
      name: 'Lawn Mowing',
      description: 'Professional lawn mowing service for residential properties.',
      price: 50,
      duration: 60
    },
    {
      id: '2',
      slug: 'hedge-trimming',
      name: 'Hedge Trimming',
      description: 'Expert hedge and shrub trimming to keep your garden tidy.',
      price: 75,
      duration: 90
    },
    {
      id: '3',
      slug: 'garden-consultation',
      name: 'Garden Consultation',
      description: 'One-on-one consultation for garden planning and advice.',
      price: 100,
      duration: 60
    }
  ];
</script>

<h1>Our Services</h1>
<p>Browse our available services and book your appointment.</p>

<ul>
  {#each services as service}
    <li>
      <h2>{service.name}</h2>
      <p>{service.description}</p>
      <p><strong>${service.price}</strong> · {service.duration} minutes</p>
    </li>
  {/each}
</ul>

O bloco {#each} percorre o array de serviços e renderiza cada um. Não se preocupe em entender todos os detalhes agora — abordaremos o fluxo de controle detalhadamente no Módulo 5.

O Que Você Construiu

Atualize o navegador em /services. Você deve ver agora:

Um cabeçalho "Our Services"
Uma lista com três serviços
Cada serviço exibindo nome, descrição, preço e duração

Ainda não tem estilo (isso vem depois), mas a funcionalidade está lá.

Estrutura do Seu Projeto

Sua pasta de rotas deve estar assim agora:

src/routes/
├── +page.svelte          → / (homepage)
└── services/
    └── +page.svelte      → /services (what you just built)

Erros Comuns

Local Errado da Pasta

src/
├── routes/
│   └── +page.svelte
└── services/                 ← Wrong! Outside routes folder
    └── +page.svelte

A pasta services deve estar dentro de src/routes. Se você a criar no nível errado, o SvelteKit não a reconhecerá como uma rota.

Erro de Digitação no Nome do Arquivo

src/routes/services/
└── +Page.svelte             ← Wrong! Case matters

O arquivo deve ser nomeado exatamente +page.svelte (em minúsculas). O SvelteKit diferencia maiúsculas de minúsculas nesses arquivos especiais.

Resumo

Criar uma nova página no SvelteKit requer dois passos: criar uma pasta com o nome da rota e adicionar +page.svelte dentro dela. Sua página de serviços está agora disponível em /services.

Principais conclusões:

As pastas de rotas ficam dentro de src/routes
+page.svelte deve estar em minúsculas e exato
Você pode incluir um bloco <script> para a lógica do componente

Próximos Passos

Páginas estáticas são ótimas, mas o BookIt precisa de algo mais poderoso: páginas individuais para cada serviço. Continue com Rotas Dinâmicas para aprender como uma única definição de rota pode lidar com centenas de URLs diferentes.