Todo Negócio Precisa de uma História

Os clientes querem saber com quem estão fazendo uma reserva. Uma página sobre constrói confiança e ajuda sua plataforma de agendamento a parecer profissional. Vamos adicionar uma ao BookIt.

O Que Você Vai Aprender

Reforçar o padrão de pasta + +page.svelte
Criar uma página focada em conteúdo
Praticar o fluxo de trabalho de roteamento

Criar a Rota Sobre

Você já conhece o padrão. Vamos aplicá-lo.

Passo 1: Criar a Pasta

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

Passo 2: Adicionar a Página

Crie o +page.svelte dentro da pasta 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>

Passo 3: Verificar

Navegue até http://localhost:5173/about no seu navegador. Sua página sobre deve aparecer.

Por Que Esta Página É Importante

A página sobre serve a múltiplos propósitos em um app de agendamento:

Construção de confiança. Os clientes têm mais probabilidade de fazer uma reserva quando entendem quem está por trás do serviço.

Valor para SEO. Os mecanismos de busca procuram conteúdo que explique o que seu negócio faz. Uma página sobre fornece esse contexto.

Destino de navegação. A maioria dos sites tem uma página sobre — os usuários esperam encontrar uma.

Estrutura do Seu Projeto

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

Uma Observação sobre o Conteúdo

Esta lição inclui conteúdo de exemplo. Em um projeto real, você escreveria textos que refletem seu negócio de verdade. O importante é entender o padrão:

Criar a pasta para a rota
Adicionar o +page.svelte com seu conteúdo
Acessar a URL para vê-lo ao vivo

O conteúdo em si é apenas HTML dentro de um componente Svelte.

Erros Comuns

Aninhamento Excessivo

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

Lembre-se: cada pasta se torna um segmento de URL. Se você quer /about, a pasta about vai diretamente dentro de routes, não dentro de outra pasta.

Resumo

Você adicionou uma segunda página informacional ao BookIt. O padrão permanece o mesmo: o nome da pasta se torna a URL, e o +page.svelte fornece o conteúdo.

Principais conclusões:

Páginas de conteúdo estático funcionam da mesma forma que as dinâmicas
A estrutura de pastas mapeia diretamente para as URLs
Cada página é um componente Svelte independente

Próximos Passos

Mais uma página estática pela frente. Continue com Adicionar uma Página de Contato para oferecer aos clientes uma forma de entrar em contato.