SaaS Landing Page com Next.js e Shadcn UI

Workshop

15 vídeos • 59:26

Seção 01 | Setup

  1. 1.

    Apresentacao do Projeto

    01:11
  2. 2.

    O que vamos construir

    02:15
  3. 3.

    Setup do projeto Next.js

    03:08
  4. 4.

    Favicon no Next.js

    03:00

Seção 02 | Estrutura do HTML e Next

  1. 5.

    Criando o HTML do projeto

    05:42
  2. 6.

    Imagens com next/image

    03:30
  3. 7.

    Criando textura noise no background

    05:24

Seção 03 | Estilização das Seções

  1. 8.

    Navbar

    01:57
  2. 9.

    Instalando shadcn/ui

    05:02
  3. 10.

    Primeira Seção

    06:06
  4. 11.

    Seção Como Funciona

    08:54
  5. 12.

    Card de preço com shadcn

    08:22
  6. 13.

    Callout e footer

    04:54

Seção 04 | Mobile e Responsividade

  1. 14.

    Responsividade

    00:00
  2. 15.

    Menu Mobile

    00:01
Login
Workshops>SaaS Landing Page com Next.js e Shadcn UI>Seção Como Funciona

Acesso exclusivo para membros PRO

Esse conteúdo é exclusivo para nossos assinantes.

Libere esse e muito mais conteúdo assinando o Codante PRO.

Seção Como Funciona

Na seção 2, ajustamos o layout para a funcionalidade `Como Funciona` usando Tailwind CSS. Implementamos imagem e itens em Flexbox, aplicando espaçamentos, alinhamentos responsivos e estilo de checkmarks com referências ao design no Figma.

Comentários

(0)