Este é um projeto em React com TypeScript que implementa uma Landing Page com várias seções, incluindo a seção inicial, "Sobre Nós", "Serviços Oferecidos", "Planos" e "Fale Conosco". Além disso, o projeto também inclui páginas de erro e login.
Antes de executar o projeto, verifique se você possui os seguintes requisitos:
- Node.js instalado em seu sistema.
- npm (ou yarn) instalado em seu sistema.
Siga as etapas abaixo para usar o projeto:
- Clone este repositório em sua máquina local:
https://github.com/TelesAlan/PDFViewer.git
- Navegue até o diretório do projeto:
cd PDFViewer
- Instale as dependências do projeto:
npm i
ouyarn
- Inicie o servidor de desenvolvimento:
npm start
ouyarn start
- Abra o navegador e acesse
http://localhost:3000
para ver o aplicativo em funcionamento. - Clique no botão "Selecionar arquivo" para fazer o upload de um arquivo PDF. Após o upload bem-sucedido, o PDF será exibido no visualizador.
- Para visualizar um novo PDF, basta repetir o passo 6 e selecionar outro arquivo.
O projeto utiliza a biblioteca react-pdf
para renderizar e exibir os arquivos PDF. O componente principal é o PDFReader
, localizado no arquivo src/components/PDFReader/index.tsx
. Ele é responsável pelo visualizador de PDF, onde o arquivo selecionado é exibido.
Além disso, o componente FileInput
, localizado no arquivo src/components/FileInput/index.tsx
, desempenha um papel fundamental. Ele possui um estado selectedFile
para armazenar o arquivo PDF selecionado pelo usuário. Quando o usuário faz o upload de um arquivo, o componente FileInput
exibe o PDF usando o componente PDFReader
.
Dessa forma, o componente FileInput
é responsável por lidar com a seleção do arquivo e o componente PDFReader
é responsável por renderizar e exibir o PDF selecionado.
Certifique-se de explorar e personalizar esses componentes de acordo com suas necessidades e requisitos do projeto.
Você pode personalizar a Landing Page de acordo com suas necessidades. Aqui estão algumas sugestões:
- Edite os componentes existentes ou crie novos componentes em
src/components
para adicionar conteúdo ou elementos visuais específicos. - Atualize as páginas existentes em
src/pages
para fornecer informações relevantes sobre sua empresa ou serviço. - Personalize o estilo da Landing Page, ajustando os arquivos de estilo em
src/styles
.
Se você tiver algum problema ou dúvida, sinta-se à vontade para abrir uma issue neste repositório.
Contribuições são bem-vindas! Se você deseja melhorar este projeto, siga estas etapas:
- Faça um fork deste repositório.
- Crie uma nova branch: "git checkout -b minha-branch".
- Faça suas modificações e commit: "git commit -m 'Minhas alterações'".
- Envie para o repositório remoto: "git push origin minha-branch".
- Abra uma pull request explicando suas alterações.
Este projeto está licenciado sob a MIT License. Sinta-se livre para usá-lo da maneira que preferir.