Magnetic Focus: página de vendas de ebook em HTML e CSS puros, PT e EN

Projeto conceitual desenvolvido pela ALB Seven. O Magnetic Focus não é um produto real nem um cliente: o ebook, o autor, os depoimentos, a nota, o número de alunos e o preço são fictícios, e a própria página avisa isso no rodapé ("Projeto portfólio, dados fictícios"). O que existe de concreto é a página de vendas, escrita pela ALB Seven em HTML, CSS e JavaScript puros, com versão em português e em inglês.

O problema do formato

Página de vendas de infoproduto segue uma estrutura conhecida: fisgar pela dor, mostrar a transformação, abrir o conteúdo, apresentar o autor, provar com depoimentos, ancorar o preço, tirar o risco com garantia e responder objeções. O problema é que a maioria delas é montada em construtor de página, pesa demais para o pouco que faz e vira um bloco único impossível de reaproveitar quando o próximo produto chega.

As decisões de projeto

• A estrutura inteira de uma sales page, na ordem certa. A página tem onze blocos: hero com chamada principal e selos de pagamento seguro, acesso instantâneo e garantia; faixa de prova social; "Para quem é este guia", com quatro cartões de identificação; "O que você vai conquistar"; uma seção de "Transparência total" com o que o livro é e o que ele não é; os quatro capítulos em acordeão; a seção do autor; depoimentos; a oferta com preço riscado e parcelamento; a garantia de 7 dias; FAQ com cinco perguntas; e o rodapé com os avisos legais. Promessas como "dobrar sua produtividade" e "mais de 14.000 profissionais" são copy do demo, escritas para o exercício, não afirmações da ALB Seven.
• Um CSS por seção. Em vez de uma folha única, há base.css com as variáveis de cor (laranja de ação sobre três tons de azul-marinho) e um arquivo por bloco em css/sections/: hero, who, transform, pros-cons, chapters, author, testimonials, offer, guarantee, faq, footer, sticky e animations. Trocar a seção de oferta de um produto para outro é trocar um arquivo.
• JavaScript mínimo e sem dependências. Três módulos: animações de entrada por IntersectionObserver (cada elemento anima uma vez e deixa de ser observado), acordeões de capítulos e de FAQ com um único item aberto por vez, e a barra de chamada fixa que aparece depois de 600 pixels de rolagem. Nenhuma biblioteca é carregada.
• Duas línguas em dois arquivos. index.html e index-en.html compartilham o mesmo CSS e JS; o seletor PT/EN fica na navegação e o head declara hreflang para cada versão, além de canonical, descrição e Open Graph.
• Espaços reservados explícitos. A foto do autor é um marcador visível ("foto do autor") e o botão de compra aponta para âncora vazia, porque não há checkout: a página demonstra a estrutura e a copy, não vende nada.

Stack

HTML5, CSS3 com variáveis customizadas e JavaScript vanilla. Fontes Montserrat e Inter via Google Fonts. Sem build, sem framework, sem dependência de npm: o site publicado é a pasta tal como está no repositório.

O que isso demonstra

Que a estrutura de uma sales page pode ser entregue como um kit leve e legível, em que cada seção é um arquivo e a copy é a única coisa que muda de um produto para outro. O ebook é inventado; a página, não.