# Relatório Completo & Documentação Técnica — American News Informática > Documento Oficial para Apresentação ao Cliente e Indexação Completa para Modelos de Linguagem (LLMs) > Desenvolvido por: NylSystems (https://nylsystems.netlify.app/) > Data: Agosto de 2026 --- ## 1. Visão Geral do Projeto - **Nome Comercial**: American News Informática - **Tipo de Projeto**: Landing Page Institucional & Profissionalizante (Single Page Application - SPA) - **Slogan**: Qualifique-se Hoje, Conquiste o Futuro Amanhã! - **Endereço**: Rua General Gurjão, Nº 291A, Feirinha do Bacuri, Imperatriz - MA, CEP 65916-150 - **Contato / WhatsApp**: [+55 (99) 98806-3274](https://wa.me/559988063274) - **E-mail**: america_nnews@hotmail.com - **Website Oficial**: [https://americannewsinformatica.com.br](https://americannewsinformatica.com.br/) - **Ano de Fundação**: 2000 (+25 Anos de Tradição) - **Desenvolvimento Web**: NylSystems (https://nylsystems.netlify.app/) - **Tecnologias**: HTML5 Semântico, CSS3 Vanilla (com CSS Custom Properties e Flexbox/Grid), JavaScript ES6+ Puro (Zero Frameworks). - **Tema & Design System**: Dark Mode (#030305 / #0d0d15) com acentos em Vermelho Vibrante (#e30613) e detalhes em Branco/Prata. --- ## 2. Estrutura Detalhada das Seções ### Seção 1 — Header / Navbar (Cabeçalho de Navegação) - **Logo Institucional**: Logo em formato SVG/PNG com ícone vetorial e texto estilizado "AMERICAN NEWS INFORMÁTICA" em vermelho neon. - **Menu de Navegação (6 Itens)**: 1. Início (`#inicio`) 2. Cursos (`#cursos`) 3. 🧒 Informática Kids (`#kids`) — com destaque visual amarelo ouro (#facc15). 4. Horários (`#horarios`) 5. Diferenciais (`#diferenciais`) 6. Contato (`#contato`) - **Botão CTA Header**: "Fale Conosco" direcionando para conversa direta no WhatsApp. - **Menu Hambúrguer**: Exclusivo para telas móveis e tablets (`< 992px`), com animação em X ao abrir e trava de scroll no corpo da página (`no-scroll`). - **Cabeçalho Sticky**: Efeito fixo no topo com fundo semitransparente em vidro temperado (*glassmorphism*) e desfoque (*backdrop-filter*) ao rolar mais de 50px. ### Seção 2 — Hero (Banner Principal) - **Badges de Destaque**: - Badge pulsante "+20 anos de tradição em Imperatriz - MA". - Badge clicável de atalho para a seção "Informática Kids". - **Título e Subtítulo**: Título principal em tipografia *Limelight* e *Outfit* com efeito glow vermelho, acompanhado de subtítulo motivacional. - **Botões de Ação (CTAs)**: - Botão Principal: "MATRICULE-SE PELO WHATSAPP" (com efeito relâmpago e animação pulse red). - Botão Secundário: "Ver Nossos Cursos" (scroll suave para a seção de cursos). - **Estatísticas Animadas (Counters)**: - +20 Anos de Tradição - 100% Aulas Práticas - 5+ Cursos Profissionais - 📜 Certificado Reconhecido - **Indicador de Scroll**: Seta animada flutuante (bounce) indicando a rolagem da página. ### Seção 3 — Cursos Profissionalizantes (Grade Completa) Possui 6 cards com animação contínua de flutuação (*float animation*), elevação 3D e borda vermelha iluminada no hover. 1. **Digitação Profissional** — R$ 100,00/mês - *Tópicos*: Reeducação postural e de dedos, agilidade e produtividade no teclado, precisão de toque sem olhar. - *Ícone*: Roxo ⌨️ 2. **Operador de Computadores** — R$ 150,00/mês (🔥 **Mais Procurado**) - *Tópicos*: Introdução à Informática, Windows, Pacote Office (Word, Excel, PowerPoint), Internet & Mídias Sociais, Segurança Digital e Introdução à Inteligência Artificial (IA) no dia a dia. - *Ícone*: Ciano 🖥️ 3. **Design Gráfico** — R$ 160,00/mês - *Tópicos*: CorelDraw, Adobe Photoshop, Adobe InDesign e Sony Vegas. - *Ícone*: Rosa 🎨 4. **Montagem e Manutenção de Computadores** — R$ 175,00/mês - *Tópicos*: Eletrônica básica aplicada, montagem e reparo de PCs, manutenção de notebooks/impressoras e diagnóstico de redes. - *Ícone*: Âmbar 🔧 5. **Power BI Desktop** — R$ 160,00/mês - *Tópicos*: Análise de dados avançada, transformação de dados com Power Query, criação de dashboards interativos e indicadores empresariais (KPIs). - *Ícone*: Esmeralda 📊 6. **Card Consultoria Gratuita**: - Título: "Não sabe qual curso escolher?" - Botão: "Falar com um Consultor" via WhatsApp para orientação personalizada. ### Seção 4 — Informática Kids (Formação para Crianças) - **Público-Alvo**: Crianças a partir de 7 anos. - **Layout**: Imagem ilustrativa HD (`kids_tech.png`) com badge "A partir de 7 anos" e efeitos de luz ambiente (*ambient glow*). - **Pilares de Aprendizado**: - ✔ Aprendizado lúdico, divertido e 100% prático. - ✔ Digitação e informática básica adaptadas para crianças. - ✔ Noções de segurança na internet e cidadania digital desde cedo. - ✔ Professores pacientes e turmas super reduzidas. - **CTA Dedicado**: Botão dourado especial para matrícula do filho via WhatsApp. ### Seção 5 — Turmas e Horários Sistema interativo com abas de filtragem por dias da semana: - **Segunda / Quarta / Sexta**: - Manhã : 08:00–09:00 | 09:00–10:00 | 10:00–11:00 | 11:00–12:00 - Tarde : 14:00–15:00 | 15:00–16:00 | 16:00–17:00 | 17:00–18:00 - Noite : 18:00–19:00 | 19:00–20:00 - **Terça / Quinta**: - Manhã : 07:30–09:00 | 09:00–10:30 | 10:30–12:00 - Tarde : 13:30–15:00 | 15:00–16:30 | 16:30–18:00 - Noite : 18:00–19:30 - **Sábado**: - Manhã : 07:00–10:00 | 10:00–13:00 - Tarde : 14:00–17:00 (⚡ Turma Intensiva de Sábado) Cada horário é um botão interativo que gera automaticamente uma mensagem personalizada para o WhatsApp da escola. ### Seção 6 — Diferenciais Grade de 8 cards com os pilares da escola: 1. 🎯 Aulas 100% Práticas 2. 📜 Certificado Reconhecido (Válido para concursos, currículos e faculdades) 3. 👨‍🏫 Professores Qualificados e Pacientes 4. 📚 Material Gratuito (Incluso na mensalidade) 5. 💰 Preços Acessíveis e Justos 6. ⏰ Horários Flexíveis (Manhã, Tarde, Noite e Sábados) 7. 👥 Turmas Reduzidas 8. 🏆 +20 Anos de Tradição em Imperatriz - MA ### Seção 7 — Banner CTA Final - Chamada emocional com gradiente vermelho e Cyber Grid: *"Invista em Você. O Conhecimento Abre Portas!"* - Botão CTA em destaque para início imediato no WhatsApp. ### Seção 8 — Contato & Rodapé - **3 Cards Interativos**: - WhatsApp: `(99) 98806-3274` - E-mail: `america_nnews@hotmail.com` (mailto automático) - Endereço: `Rua General Gurjão, Nº 291A, Feirinha do Bacuri, Imperatriz - MA` (link direto para o Google Maps) - **Redes Sociais**: Links para Facebook, Instagram e WhatsApp Business. - **Créditos de Desenvolvimento**: NylSystems. ### Elementos Flutuantes - **Botão Flutuante do WhatsApp**: Verde vibrante, animação pulse constante, localizado no canto inferior direito. - **Botão Voltar ao Topo (Back to Top)**: Seta circular que aparece suavemente quando o scroll ultrapassa 300px. --- ## 3. Especificações Técnicas e Arquitetura ### Recursos de JavaScript (`js/main.js`) 1. **Header Sticky**: Adiciona a classe `.scrolled` quando a rolagem ultrapassa 50px. 2. **Mobile Menu Toggle**: Gerencia abertura/fechamento do menu hambúrguer e bloqueia o scroll do body. 3. **Scroll Reveal**: Utiliza `IntersectionObserver` para revelar elementos na tela com suavidade conforme o usuário rola. 4. **Animated Stat Counters**: Anima os números dos contadores da seção Hero assim que ficam visíveis. 5. **Schedule Tabs Filtering**: Filtra os blocos de horários por abas (Ver todos, Seg/Qua/Sex, Ter/Qui, Sábado). 6. **Scrollspy**: Destaca automaticamente a opção correspondente no menu de navegação conforme a seção ativa na tela. 7. **Smooth Scroll Offset**: Garante que o clique nos links do menu role a tela compensando a altura da navbar fixa (85px). 8. **Mensagens Dinâmicas no WhatsApp**: Gera mensagens personalizadas pré-codificadas em UTF-8 com base no curso ou horário selecionado. 9. **Back to Top Handler**: Monitora a rolagem para exibir o botão e realiza o scroll suave de volta ao topo (`top: 0`). ### Recursos de SEO & Acessibilidade - **Title Tag**: `American News Informática | Escola de Informática em Imperatriz - MA` - **Meta Description**: 160 caracteres otimizados para motores de busca e conversão local. - **Geo Tags**: Region `BR-MA`, Placename `Imperatriz, Maranhão, Brasil`, Coordenadas GPS `-5.5384716, -47.4726681`. - **Open Graph & Twitter Cards**: Tags completas com imagem de pré-visualização de alta qualidade (`1200x630px`). - **Schema.org JSON-LD**: Estrutura `EducationalOrganization` catalogando os cursos, contatos, localização e redes sociais. - **Standard LLM / IA**: Presença de `llms.txt` e `llms-full.txt` com referência em ``. --- ## 4. Identidade Visual & Design System - **Fundo Principal**: `#030305` (Preto Profundo Tecnológico) - **Fundo de Cards**: `#0d0d15` (Escuro Azulado com Borda Iluminada) - **Cor Primária da Marca**: `#e30613` (Vermelho Vivo / Glow) — *A regra de marca determina que o nome "American News" deve ser sempre vermelho.* - **Texto Principal**: `#ffffff` (Branco Puro) - **Texto Secundário / Descritivo**: `#cbd5e1` (Prata Alto Contraste) - **Tipografia**: *Outfit* (Títulos), *Limelight* (Efeitos de Destaque da Marca), *Plus Jakarta Sans* (Corpo do Texto). --- ## 5. Estrutura de Arquivos do Projeto ``` / ├── index.html → Página principal (HTML5 semântico completo) ├── llms.txt → Resumo executivo para IAs / LLMs (Padrão llms.txt) ├── llms-full.txt → Documentação técnica completa e relatório oficial do cliente (Padrão llms-full.txt) ├── css/ │ └── styles.css → Estilização completa e responsiva (1.820+ linhas de CSS Vanilla) ├── js/ │ └── main.js → Lógica de interatividade, animações e WhatsApp (ES6+ Puro) └── assets/ ├── american_news_logo.png → Logo oficial da escola ├── kids_tech.png → Imagem da seção Informática Kids └── (demais imagens) → Backgrounds e favicons ``` --- ## 6. Créditos e Propriedade - **Proprietário**: American News Informática (Imperatriz - MA) - **Desenvolvido por**: NylSystems — Desenvolvimento Web Profissional - **URL do Desenvolvedor**: [https://nylsystems.netlify.app/](https://nylsystems.netlify.app/)