Página 02

Estamos na Segunda Página. Observe como a transição parece exatamente a ação de levantar a ponta da folha e virar para a próxima.

Quando usamos links simples, sem a classe nav-link, o carregamento é tradicional (com refresh).

<a href="index.php">01</a>

Já com a classe nav-link, o carregamento é moderno (via fetch), permitindo o som e a animação.

<a href="index.php" class="nav-link" data-dir="forward">01</a>

A classe nav-link: É o motor. Ela avisa ao JavaScript: "Ei, quando me clicarem, não recarregue a página, busque o novo conteúdo (fetch) e inicie a animação de virar a página".
A classe nav-btn: É a pintura e o acabamento. Ela apenas diz: "Quando eu for clicado, mude minha cor e me encolha um pouquinho (efeito de botão apertado)".
O atributo data-dir: É o volante. Ele diz para que lado a animação deve ir (para frente ou para trás).