Seu Primeiro Recurso

Você configurou o projeto, explorou a estrutura e iniciou o servidor de desenvolvimento. Agora é hora de escrever algum código de verdade. Vamos transformar a página de boas-vindas genérica do SvelteKit na página inicial do BookIt.

O Que Você Aprenderá

Como editar um componente Svelte existente
Como usar variáveis na sua marcação
Como adicionar estilo básico a uma página
A satisfação de ver suas alterações instantaneamente

O Estado Atual

Abra src/routes/+page.svelte. No momento, ela exibe o conteúdo padrão do 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>

Em breve, esta será a porta de entrada do BookIt.

Passo 1: Atualizar o Conteúdo

Substitua o arquivo inteiro pela mensagem de boas-vindas do BookIt:

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

Salve o arquivo. Seu navegador atualiza imediatamente — "Welcome to BookIt" agora recebe os visitantes.

Essa é uma mudança real em um aplicativo real. Simples, mas é sua.

Passo 2: Adicionar Mais Informações

Vamos informar aos visitantes o que o BookIt oferece. Expanda a 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>

Salve novamente. A página agora exibe uma lista de serviços. Estamos definindo esses valores diretamente no código por enquanto — módulos posteriores os carregarão de um banco de dados.

Passo 3: Adicionar uma Seção de Script

Vamos usar uma variável em vez de repetir "BookIt" caso precisemos dela em outros lugares. Adicione uma seção de script no topo do arquivo:

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

<!-- ... HTML -->

As chaves {appName} e {tagline} inserem os valores das variáveis no HTML. A página tem a mesma aparência, mas agora podemos reutilizar esses valores.

Passo 4: Adicionar Estilo

Hora de fazer com que pareça uma página de destino adequada. Adicione um estilo abaixo da marcação 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>

Salve e verifique seu navegador. O BookIt agora tem uma seção hero com gradiente e uma lista de serviços estilizada. Parece um aplicativo de verdade.

Passo 5: Adicionar um Chamado à Ação

Toda boa página de destino precisa de um chamado à ação. Vamos adicionar um botão que eventualmente vai direcionar para a página de serviços:

<!-- 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>

O botão aponta para /services — uma página que ainda não existe. Clicar nele exibirá um erro 404. Criaremos essa página no próximo módulo.

O Que Você Construiu

Veja seu navegador. Em apenas alguns minutos, você criou:

Uma seção hero acolhedora com fundo em gradiente
Um tagline claro explicando o que o BookIt faz
Uma lista de serviços disponíveis
Um botão de chamado à ação com efeito de hover

Esta é a página inicial que os visitantes verão quando chegarem ao BookIt pela primeira vez.

O Arquivo Completo

Aqui está o +page.svelte completo para referência:

<!-- 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>

Resumo

Você fez suas primeiras alterações reais no BookIt. Partindo de um template em branco, você criou uma página inicial estilizada com uma seção hero, lista de serviços e chamado à ação — tudo usando as seções de script, marcação e estilo que você aprendeu.

Principais conclusões:

Edite arquivos .svelte para alterar seu aplicativo
Use {variável} para inserir valores JavaScript no HTML
Estilos na tag <style> têm escopo limitado ao componente
As alterações aparecem instantaneamente graças ao servidor de desenvolvimento

Módulo 1 Concluído! 🎉

Você terminou o módulo de Introdução. Agora você tem:

Um projeto SvelteKit rodando localmente
Uma compreensão da estrutura do projeto
Conhecimento de como os arquivos .svelte funcionam
Uma página inicial estilizada do BookIt

A seguir: Módulo 2 — Roteamento Básico

Aquele botão "Browse Services" aponta para uma página que não existe. No próximo módulo, criaremos a página de serviços, uma página sobre e aprenderemos como funciona o roteamento baseado em arquivos do SvelteKit.