RELVCODE - Website Institucional

Site institucional moderno e responsivo com foco em conversão, construído com HTML, CSS e JavaScript puro.

---

📌 Visão Geral

Este projeto foi criado para apresentar a RELVCODE como uma empresa inovadora de soluções tecnológicas.
O site apresenta seções claras, layout visualmente atrativo e uma proposta centrada na experiência do usuário (UX) e design responsivo.

---

🔗 Navegação

• Home (Hero): Mensagem de impacto, CTA e visual de dashboard simulado.
• Recursos: Seção com 6 benefícios apresentados com ícones e animação.
• Depoimentos: Testemunhos de clientes reais para construção de prova social.
• Preços: 3 planos com destaque no plano mais popular.
• Contato: Formulário com estatísticas e promessa de tempo de resposta.
• Rodapé: Links organizados por categoria e informações legais.

---

🧱 Estrutura de Diretórios

/
├── index.html
├── styles.css
└── assets/
    └── (imagens, ícones ou fontes customizadas, se houver)

---

🎨 Design System

Tipografia

Fonte principal: Inter

Importação via Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

Paleta de Cores

Token	Cor Hex	Uso
--primary	#4f46e5	Botões principais, destaques
--gray-900	#111827	Títulos, textos escuros
--gray-500	#6b7280	Subtítulos, descrições
--white	#ffffff	Backgrounds e textos claros

---

📐 Layout Responsivo

• Grid Flexível: uso de Flexbox e CSS Grid.
• Mobile First: layout que prioriza dispositivos móveis.
• Breakpoint principal: @media (min-width: 768px)

---

✨ Animações com IntersectionObserver

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.opacity = '1';
      entry.target.style.transform = 'translateY(0)';
    }
  });
}, {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
});

document.querySelectorAll('[data-aos]').forEach(el => {
  el.style.opacity = '0';
  el.style.transform = 'translateY(30px)';
  el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
  observer.observe(el);
});

---

📱 Menu Mobile

const navToggle = document.querySelector('.nav__toggle');
const navMenu = document.querySelector('.nav__menu');

navToggle.addEventListener('click', () => {
  navMenu.classList.toggle('nav__menu--active');
  navToggle.classList.toggle('nav__toggle--active');
});

---

🧩 Componentes do Site

🧲 Hero

• Título com chamada para ação.
• CTAs: “Experimente Grátis” e “Ver Demonstração”
• Estatísticas animadas.
• Mockup visual estilizado de dashboard.

🌟 Recursos (Features)

• Grid com 6 funcionalidades.
• Ícones com emojis ou SVGs.
• Animação com data-aos-delay.

💬 Depoimentos

• Grid com 3 cards.
• Avatares com iniciais.
• Nome, cargo e empresa de cada cliente.

💸 Preços

• 3 planos disponíveis:
  • Starter
  • Professional (com destaque)
  • Enterprise

📞 Contato

• Formulário com campos: Nome, Email, Empresa e Mensagem.
• CTA: “Solicitar Demonstração”
• Estatísticas visuais sobre tempo de resposta e implementação.

📎 Rodapé

• Links divididos por categoria.
• Direitos autorais e políticas.

---

🛠️ Tecnologias Utilizadas

• HTML5
• CSS3
• JavaScript (Vanilla)
• Google Fonts
• Flexbox & CSS Grid
• Intersection Observer API

---

📈 SEO e Performance

Meta tags utilizadas:

<meta name="description" content="Descubra como nossa plataforma inovadora pode transformar seu negócio com eficiência e resultados comprovados.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Estrutura leve e rápida
• Sem dependências pesadas
• Layout semântico e acessível

---

🚀 Como Usar

1. Clone ou baixe este repositório:

git clone https://github.com/seunome/relvcode-site.git

2. Abra o arquivo index.html no navegador.
3. Edite o conteúdo conforme sua necessidade.

---

👤 Autor

Projeto criado por Emerson Romana.
Para sugestões, colaborações ou freelas, entre em contato.