Sistema de Feedback

Um sistema de feedback elegante e interativo desenvolvido com HTML, Tailwind CSS e JavaScript. Este projeto oferece uma experiência de usuário moderna e responsiva para coletar avaliações dos usuários.

🚀 Características

• Design Moderno: Interface limpa e elegante com efeitos de glass-morphism
• Totalmente Responsivo: Adapta-se perfeitamente a diferentes tamanhos de tela
• Animações Suaves: Transições e animações interativas para melhorar a experiência do usuário
• Validação de Formulário: Garante que o usuário forneça uma avaliação antes de enviar
• Página de Agradecimento: Feedback visual após o envio da avaliação

🛠️ Tecnologias Utilizadas

• HTML5
• Tailwind CSS - Framework CSS utilitário
• JavaScript (Vanilla)
• Google Fonts - Fonte Montserrat

🎨 Paleta de Cores

O projeto utiliza uma paleta de cores personalizada definida no Tailwind:

• Fundo: #021526 - Azul escuro profundo
• Primária: #03346E - Azul marinho
• Secundária: #6EACDA - Azul claro
• Detalhe: #2CA9BC - Turquesa
• Cor Fonte: #E2E2B6 - Bege claro
• Alerta: #FF7F3E - Laranja

📋 Pré-requisitos

• Navegador web moderno (Chrome, Firefox, Safari, Edge)
• Conexão com a internet (para carregar o Tailwind CSS via CDN)

🔧 Instalação

1. Clone este repositório:

   git clone https://github.com/seu-usuario/sistema-feedback.git
   

2. Navegue até a pasta do projeto:

   cd sistema-feedback
   

3. Abra o arquivo index.html em seu navegador ou use um servidor local.

💻 Como Usar

1. Acesse a página inicial (index.html)
2. Clique em um dos botões numerados (1-5) para avaliar sua experiência
3. Clique no botão "Enviar" para submeter sua avaliação
4. Você será redirecionado para a página de agradecimento

📱 Responsividade

O sistema é totalmente responsivo e se adapta a diferentes tamanhos de tela:

• Mobile: Layout otimizado para telas pequenas
• Tablet: Ajustes de padding e tamanho para telas médias
• Desktop: Experiência completa com todos os efeitos visuais

🎭 Animações

O projeto inclui várias animações para melhorar a experiência do usuário:

• Estrela Flutuante: Animação suave de rotação e flutuação
• Botões de Avaliação: Efeito de escala e mudança de cor ao passar o mouse
• Botão de Envio: Transição suave com efeito de escala
• Pontos de Carregamento: Animação de pulso na página de agradecimento

📄 Estrutura de Arquivos

sistema-feedback/
├── index.html           # Página principal com o formulário de feedback
├── agradecimentos.html  # Página de agradecimento após o envio
├── img/                 # Pasta com imagens
│   └── star.svg         # Ícone de estrela
└── README.md            # Este arquivo

👤 Autor

Marcos Vinícius Marcolino Rocha - @vinimx