Este projeto é uma landing page com um fluxo que direciona os usuários para diferentes páginas, incluindo o cadastro de influenciadores, informações adicionais e o formulário de interesse em se tornar um franqueado.
- @chakra-ui/next-js: ^2.1.3
- @chakra-ui/react: ^2.6.1
- @emotion/react: ^11.11.0
- @emotion/styled: ^11.11.0
- @hookform/resolvers: ^3.1.0
- @next/font: 13.1.6
- @types/node: 20.2.4
- @types/react: 18.2.7
- @types/react-dom: 18.2.4
- axios: ^1.4.0
- eslint: 8.41.0
- eslint-config-next: 13.1.6
- framer-motion: ^10.12.16
- next: 13.1.6
- next-seo: ^6.0.0
- nprogress: ^0.2.0
- react: 18.2.0
- react-dom: 18.2.0
- react-hook-form: ^7.43.9
- react-icons: ^4.8.0
- react-input-mask: ^2.0.4
- react-scroll: ^1.8.9
- react-slick: ^0.29.0
- typescript: 5.0.4
- zod: ^3.21.4
A página inicial é a primeira página que os usuários acessam. Ela apresenta uma breve descrição do projeto e oferece duas opções para os usuários: "Cadastre-se como Influenciador" e "Saiba Mais".
- Ao clicar em "Cadastre-se como Influenciador", os usuários serão redirecionados para a página de "Cadastro de Influenciadores".
- Ao clicar em "Saiba Mais", os usuários serão redirecionados para a página de "Informações Adicionais".
A página de "Informações Adicionais" fornece mais detalhes sobre o projeto, seus benefícios e oportunidades. Nesta página, os usuários têm a opção de retornar à página de "Cadastro de Influenciadores" caso queiram prosseguir com o cadastro.
- Ao clicar no botão "Cadastre-se como Influenciador", os usuários serão redirecionados novamente para a página de "Cadastro de Influenciadores".
A página de "Cadastro de Influenciadores" contém um formulário que os usuários devem preencher com suas informações pessoais. Após preencher o formulário, os usuários podem enviar os dados e serão redirecionados para a página de "Confirmação de Cadastro".
- Após enviar o formulário, os usuários serão redirecionados para a página de "Confirmação de Cadastro".
A página de "Confirmação de Cadastro" exibe uma mensagem confirmando o sucesso do cadastro. Nesta página, os usuários também encontrarão um link para acessar a página do "Influenciador da Franquia".
- Ao clicar no link "Influenciador da Franquia", os usuários serão redirecionados para a página do "Influenciador da Franquia".
A página do "Influenciador da Franquia" é dedicada aos interessados em se tornar um franqueado. Nesta página, os usuários encontrarão um formulário para preencher com seus dados de interesse em se tornar um franqueado.
Siga as etapas abaixo para executar o projeto em sua máquina local:
-
Certifique-se de ter o Node.js instalado em sua máquina. Você pode baixar a versão mais recente do Node.js em https://nodejs.org.
-
Clone este repositório para o seu ambiente de desenvolvimento. Abra o terminal e execute o seguinte comando:
git clone https://github.com/seu-usuario/nome-do-projeto.git
Certifique-se de substituir seu-usuario
e nome-do-projeto
pelos detalhes corretos.
- Navegue até o diretório do projeto. No terminal, digite o seguinte comando:
cd nome-do-projeto
- Execute o comando
npm install
para instalar as dependências do projeto. Isso baixará e instalará todas as dependências listadas no arquivopackage.json
. No terminal, digite o seguinte comando:
npm install
- Execute o comando
npm run dev
para iniciar o servidor de desenvolvimento. Isso iniciará o servidor Next.js e permitirá que você visualize o projeto em seu navegador. No terminal, digite o seguinte comando:
npm run dev
- Acesse o projeto em seu navegador usando o URL fornecido após a inicialização do servidor de desenvolvimento. Geralmente, o URL é
http://localhost:3000
.
Certifique-se de substituir seu-usuario
e nome-do-projeto
pelos detalhes corretos.
Este projeto de landing page oferece um fluxo simples e intuitivo para os usuários, permitindo que eles se cadastrem como influenciadores, obtenham informações adicionais e expressem interesse em se tornar franqueados. As tecnologias utilizadas, incluindo Next.js, Chakra UI e React Hook Form, garantem uma experiência de desenvolvimento moderna e eficiente.