SaaS Landing Page com Next.js 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.

🤓 Antes de começar

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.

🔨 Requisitos

• Navbar: Implemente uma Navbar simples com:

  • Logotipo à esquerda.
  • Links de navegação (Funcionamento, Preço, Login) à direita.
  • Siga o design do Figma.

• Seção Hero: Crie a seção principal "Hero" com:

  • Título: "Simplifique Seus Estudos".
  • Subtítulo explicativo sobre a plataforma.
  • Campo de input para e-mail.
  • Botão de call to action (CTA) "Assine Agora".
  • Siga o design do Figma.

👀 Dicas:

• Use o componente Input do shadcn/ui para o campo de e-mail.
• Use o componente Button do shadcn/ui para todos os botões.

• Seção "Como Funciona": Explique o funcionamento em três etapas:

  • Acesso a um ebook por mês.
  • Curadoria especial.
  • Cancelamento a qualquer momento.
  • Siga o design do Figma.

• 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:

  • 1 ebook por mês.
  • Curadoria especial.
  • Acesso ilimitado.
  • Cancelamento a qualquer momento.

• Seção Final com CTA: Incentive a assinatura com:

  • Título: "Pronto Para Mudar Sua Vida?".
  • Texto de suporte.
  • Botão de CTA.

• Rodapé: Implemente um rodapé simples com:

  • Logotipo da empresa.
  • Copyright e informações legais.

• Design Responsivo: Adapte o design para dispositivos móveis:

  • Crie um menu mobile com shadcn/ui.
  • Siga o design do Figma.

🔨 Desafio Extra

• Animações: Adicione animações de transição suave ao rolar a página.

🎨 Design Sugerido

Siga o design no Figma para este mini-projeto.

Figma

🔗 Link do design

👉🏽 Sobre este Mini-Projeto

O que você irá praticar:

React

• Criar e organizar componentes modulares.
• Estilização com Next.js.

Tailwind CSS

• Estilizar componentes de forma responsiva.
• Trabalhar com grids e/ou flexbox para layout.

Pré-requisitos

• Conhecimento básico de Next.js.
• Experiência com Tailwind CSS.