Inicie sua prática com Next.js criando uma página comercial para um tatuador hipotético chamado Sandro Luz. Crie, do começo ao fim, um projeto Next.js.

🤓 Antes de começar

Neste mini projeto não há template/boilerplate inicial. Você deverá começar o projeto do zero.

🔨 Requisitos

• Inicialize o projeto do zero usando o create-next-app
• Crie 4 páginas para a "Sandro Luz Tattoo Shop":
  • Home
  • Serviços
  • Sobre
  • Contato
• Utilize todos os recursos nativos do Next.js, tais como: next/link, next/image, next/font;
• O botão de contato (tanto na navbar quanto na página de contato) deverá ser um link para a funcionalidade conversa em um clique do WhatsApp. Este link deverá abrir em uma nova página;
• Utilize o App Router (em detrimento do Pages Router);
• Utilize as imagens diretamente do Figma (exportando-as);
• Como sugestão, faça o CSS usando TailwindCSS.

🔨 Desafio extra para quem quer ir além

• Adicione alguma animação. Pode ser na própria imagem e nos textos da home ou na navbar, ao trocar de link, por exemplo.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

Next.js

• create-next-app
• next/link
• next/image
• next/font
• App Router
• Nested Routes e Layouts
• Server components

TailwindCSS

• Design "pixel-perfect" com TailwindCSS

Pré-requisitos

Nenhum pré-requisito com Next.js. Conhecimento de React básico é necessário.