Junte-se a outras 107 pessoas que estão fazendo esse mini projeto.











Vamos criar uma landing page para um SaaS com o estilo de design do Notion. Para isso vamos usar Next.js, TailwindCSS e shadcn/ui
Crie uma landing page para um SaaS com o estilo de design do Notion usando Next.js, Tailwind CSS e Shadcn/UI.
Este mini-projeto será desenvolvido do zero — a transposição do design faz parte do desafio! Não há arquivos iniciais. Comece com um novo projeto Next.js.
Navbar: Implemente uma Navbar simples com:
Seção Hero: Crie a seção principal "Hero" com:
👀 Dicas:
- Use o componente
Input
doshadcn/ui
para o campo de e-mail.- Use o componente
Button
doshadcn/ui
para todos os botões.
Seção "Como Funciona": Explique o funcionamento em três etapas:
Seção de Preços: Crie a seção de preços com destaque para o plano "Pro Premium VIP" (R$ 29/mês) incluindo:
Seção Final com CTA: Incentive a assinatura com:
Rodapé: Implemente um rodapé simples com:
Design Responsivo: Adapte o design para dispositivos móveis:
shadcn/ui
.Siga o design no Figma para este mini-projeto.