Feito com Next.js, TypeScript, Tailwind e framer motion

LIVE:

https://next-js-paralax-smoth.vercel.app/

Projeto

Este é um projeto fictício que demonstra a criação de um site usando Next.js e Tailwind CSS. O site possui um design moderno e responsivo, e inclui alguns efeitos visuais interessantes, como efeito parallax e scroll suave.

Funcionalidades Principais

• Efeito Parallax: O efeito parallax é utilizado nas seções do site para criar uma sensação de profundidade e movimento enquanto o usuário rola pela página. Isso é alcançado ao mover os elementos em diferentes velocidades à medida que o usuário rola para cima ou para baixo.

• Scroll Suave: O scroll suave é implementado para proporcionar uma experiência de navegação mais agradável e fluida. Quando o usuário clica nos links de navegação, o site rola suavemente para a seção correspondente, em vez de fazer um salto abrupto.

Bibliotecas Utilizadas

• Next.js: Framework de React para construção de aplicações web rápidas e escaláveis.
• Tailwind CSS: Framework CSS utilitário para criação de interfaces responsivas e personalizáveis.
• Lenis: Biblioteca JavaScript para implementar efeitos de parallax.
• Framer Motion: Biblioteca de animação declarativa para React, usada para criar animações fluidas e interativas.

Como Usar

1. Clone o repositório para o seu ambiente local.
2. Certifique-se de ter Node.js e npm instalados em seu sistema.
3. Execute npm install para instalar as dependências do projeto.
4. Execute npm run dev para iniciar o servidor de desenvolvimento.
5. Abra seu navegador e acesse http://localhost:3000 para visualizar o site em execução.