// Landing.jsx — full marketing landing page for ConstructHub. // One scrollable composition rendered inside a design-canvas artboard. const INDIGO = '#4F6EF7'; const INDIGO_SOFT = '#EEF1FF'; // Subtle grid background (used in hero only) — drawn as SVG so it's crisp. function GridBackground({ opacity = 0.6 }) { return ( ); } // ─── Banner header ─────────────────────────────────────────────────── // The marketing landing opens with a full-bleed dark "beta invite" banner. // It carries the page's single strongest retention hook — scarcity + // exclusivity ("25 distribuidores", vagas limitadas) — and a working CTA // straight to the invite form. The product value-prop lives in the lighter // immediately below, so the banner deliberately leads with the // invitation, not a duplicate headline. // // NOTE: this is a purpose-built RESPONSIVE hero, NOT the SocialShareCard // from InviteCard.jsx. That component is a fixed 1200×630 OG artboard used // to export the LinkedIn/email share image (see cards/social.html) — it // must stay exactly that size, so it can't double as the live web banner // (it overflowed/clipped on phones). This hero reflows from a single // stacked column on mobile to a two-column layout on desktop. function MarketingHero() { // `go` maps each card to a screen in the ProductTour (TOUR_SCREENS id). // Clicking scrolls to #tour (native, via the href) and selects that screen // through the ch-tour-go event, so the card actually demos the product. const products = [ { i: 'layout-dashboard', t: 'Build', s: 'ERP do distribuidor', go: 'dash' }, { i: 'shopping-cart', t: 'Portal', s: 'Loja B2B', go: 'portal' }, { i: 'sparkles', t: 'IA', s: 'Assistente em português', go: 'ai', accent: true }, ]; const demo = (id) => window.dispatchEvent(new CustomEvent('ch-tour-go', { detail: id })); return (
{/* Background dot pattern */} {/* Soft indigo glow, top-right */}
{/* Brand row */}
CH ConstructHub · Beta privada · outono de 2026
{/* Main */}
{/* Scarcity / attention chip */}
Procuram-se 25 distribuidores

A beta privada do
{' '} ConstructHub {' '} abre a 25 distribuidores.

Acesso antecipado ao Build, ao Portal B2B e ao assistente IA — moldem o produto connosco, com condições preferenciais no primeiro ano e suporte directo da equipa fundadora.

Apenas 25 lugares · sem compromisso
{/* Right-side product stack — desktop only (the lighter Hero below carries the product story on mobile, so we keep the banner short on phones to surface real content faster). */}
{products.map((p) => ( demo(p.go)} aria-label={`Ver demonstração — ${p.t}`} className="group rounded-2xl border p-4 flex items-center gap-3.5 backdrop-blur-md transition-all hover:-translate-y-0.5 hover:brightness-110" style={{ background: p.accent ? INDIGO : 'rgba(255,255,255,0.06)', borderColor: p.accent ? 'rgba(255,255,255,0.40)' : 'rgba(255,255,255,0.15)', boxShadow: '0 20px 40px -20px rgba(0,0,0,0.6)', }}>
{p.t}
{p.s}
Ver ))}
{/* Trust strip */}
AT e-fatura SAF-T PT 100% PT-PT Assistente IA Lisboa, Portugal
); } // ─── Hero ──────────────────────────────────────────────────────────── function Hero() { return (
ERP · Ibéria · Materiais de construção

O ERP feito para quem
vende materiais de construção .

Faturação AT e-fatura, SAF-T PT, encomendas, obras e stock — numa plataforma desenhada para distribuidores e retalhistas de materiais de construção em Portugal e Espanha.

{[ { icon: 'shield-check', text: 'AT e-fatura nativo' }, { icon: 'file-text', text: 'SAF-T PT validado' }, { icon: 'lock', text: 'RGPD compliant' }, { icon: 'languages', text: '100% PT-PT' }, { icon: 'sparkles', text: 'Assistente IA integrado' }, ].map(p => ( {p.text} ))}
{/* Right-side floating product preview */}
); } // Stylized product preview — a faux dashboard tile, drawn flat. function ProductPreviewCard() { return (
ConstructHub · Compras JP
ConstructHub · Compras
); } // ─── Trust strip removed: we don't yet have customers in named cities. ─ // Keep this comment so nobody re-adds it without real data. // ─── Problem ───────────────────────────────────────────────────────── function Problem() { return (
O problema

ERPs genéricos não percebem
o seu negócio.

Os ERPs internacionais foram desenhados para vender livros ou software — não cimento, areia ou aço. Não falam com a AT, não exportam SAF-T PT, não percebem IVA reduzido em obras de reabilitação, e tratam um empreiteiro como se fosse um consumidor final.

Os ERPs antigos portugueses falam o idioma — mas vivem em janelas Windows dos anos 2000, não funcionam no telemóvel do chefe de obra, e o catálogo é uma folha de Excel.

ConstructHub é uma terceira opção. ERP moderno, na nuvem, em PT-PT, feito de raiz para a forma como o sector trabalha.

); } // ─── Three products ────────────────────────────────────────────────── function Products() { const items = [ { tag: 'Para si', icon: 'layout-dashboard', title: 'Build', sub: 'O ERP do distribuidor', body: 'Painel, catálogo, encomendas, faturação AT, armazém, obras, equipa, relatórios. Tudo o que precisa para gerir o negócio num só sítio.', points: ['Faturação AT e-fatura', 'Catálogo com fotos', 'Multi-loja, multi-armazém', 'Obras e empreiteiros'], href: '#tour', }, { tag: 'Para os seus clientes', icon: 'shopping-cart', title: 'Portal', sub: 'A loja B2B dos seus clientes', body: 'Os seus empreiteiros e construtoras entram, vêem o catálogo com os preços contratados, fazem encomendas, acompanham entregas, pagam.', points: ['Preços por contrato', 'Limite de crédito', 'Histórico de encomendas', 'Pagamento online'], href: '#tour', }, { tag: 'Para todos', icon: 'sparkles', title: 'Assistente IA', sub: 'A IA que conhece a sua obra', body: 'Assistente em português com contexto de todas as suas obras, encomendas e faturas. Pergunte, peça-lhe que repita encomendas, recalcule IVA, identifique atrasos.', points: ['100% em português', 'Contexto das suas obras', 'Acesso só ao que autoriza', 'Confirma antes de agir'], accent: true, href: '#ia', }, ]; return (
O que construímos

Três produtos. Uma plataforma.

{items.map(p => (
{p.tag}
{p.title}
{p.sub}

{p.body}

    {p.points.map(pt => (
  • {pt}
    • ))}
Conhecer {p.title}
))}
); } // ─── Feature grid ──────────────────────────────────────────────────── function Features() { const features = [ { icon: 'file-check', title: 'Faturação AT e-fatura', body: 'Séries certificadas, hash RSA-SHA1 imutável, ATCUD + QR em cada documento. SAF-T PT em 1 clique. Comunicação directa à AT em produção (sandbox por defeito).' }, { icon: 'percent', title: 'IVA 6 / 13 / 23%', body: 'Suporta taxa reduzida em reabilitação e intermédia em construção nova. Regimes do Continente, Madeira, Açores e isento art.º 53.' }, { icon: 'badge-check', title: 'NIF / NIPC validado', body: 'Validação local pelo dígito de controlo. Pesquisa VIES para preencher nome e morada a partir do NIF.' }, { icon: 'hard-hat', title: 'Obras como entidade central', body: 'Cada obra agrupa encomendas, faturas, fornecedores e empreiteiros. Não é só uma tag.' }, { icon: 'package', title: 'Catálogo com fotos', body: 'SKUs, preços por contrato, fotos e fornecedores associados. Tudo no mesmo lugar.' }, { icon: 'warehouse', title: 'Stock multi-armazém', body: 'Lojas, armazéns, estaleiros de obra. Transferências internas e rutura de stock proativa.' }, { icon: 'truck', title: 'Encomendas a fornecedores', body: 'Criação de PO, receção, conferência. Notificações automáticas quando os materiais chegam.' }, { icon: 'banknote', title: 'Crédito e prazos', body: 'Cartão via Stripe. Limites de crédito por cliente, prazos de pagamento, juros de mora. Multibanco e MB Way no roadmap.' }, { icon: 'smartphone', title: 'Interface responsiva', body: 'O chefe de obra consulta uma entrega no telemóvel. O comprador aprova encomendas no tablet.' }, { icon: 'shield', title: 'RGPD na base', body: 'Dados em datacenters UE. Logs de auditoria completos. Exportação Excel/CSV em todas as listas.' }, { icon: 'languages', title: '100% em português (PT)', body: 'Não é uma tradução. Todos os termos foram escolhidos com profissionais portugueses.' }, { icon: 'plug-zap', title: 'Liga ao que já usa', body: 'API REST. Exportação Excel. Importação de catálogo por ficheiro. Integração com Primavera, Sage ou PHC sob pedido.' }, ]; return (
Tudo no sítio

Especificado para o sector,
não adaptado depois.

Conhecemos a diferença entre uma fatura, uma fatura-recibo e uma nota de crédito. Sabemos por que a entrega às 8h em Almada vai chegar às 11h. Por isso o ConstructHub está pronto a usar — não precisa de meses de implementação.
{features.map(f => (
{f.title}
{f.body}
))}
); } // ─── AI feature spotlight ───────────────────────────────────── function AISpotlight() { return (
Assistente IA · Novo

A IA que conhece
as suas obras.

O assistente tem contexto das suas encomendas, faturas, fornecedores e obras — e fala português. Pergunte naturalmente. Peça-lhe para agir. Confirma sempre antes de escrever.

{[ { i: 'message-circle-question', t: 'Pergunte qualquer coisa', s: '“Que obra teve mais margem no último trimestre?” “Quem aprovou a EC-0241?”' }, { i: 'wand-2', t: 'Peça acções', s: '“Repete a encomenda do Mafra para a próxima semana.” “Compõe email à Tabique sobre o IVA.”' }, { i: 'shield-check', t: 'Privado por padrão', s: 'O assistente vê apenas o que autoriza. As conversas pertencem-lhe e podem ser exportadas ou apagadas a qualquer momento.' }, { i: 'check-circle-2', t: 'Confirma antes de escrever', s: 'Antes de criar uma encomenda, alterar uma fatura ou enviar um email, o resultado é-lhe sempre apresentado para aprovação.' }, ].map(p => (
{p.t}
{p.s}
))}
Como funciona o assistente
Nunca age sem confirmar
Qualquer alteração — encomenda, fatura, email — passa pela sua aprovação antes de acontecer.
); } function ChatPreviewCard() { return (
Assistente IA
IA da ConstructHub
Que obra teve mais margem no T2?
{['Ler Obras', 'Ler Faturas', 'Calcular margem'].map(t => ( {t} ))}
No T2 a sua melhor obra foi Loures · Reabilitação com 31% de margem, à frente de Almada B em 9 pontos.
{[ ['Loures', '31 %', true], ['Sintra', '24 %'], ['Almada', '22 %'], ].map((s, i) => (
{s[0]}
{s[1]}
))}
{['Porquê Loures?', 'Aplica ao T1', 'Exporta PDF'].map(t => ( ))}
Continue a conversa…
); } // ─── Numbers ───────────────────────────────────────────────────────── function Numbers() { return (
{[ { n: '100%', l: 'em português PT' }, { n: '6/13/23', l: 'IVA suportado nativo' }, { n: '<2 s', l: 'resposta média da IA' }, { n: '30 dias', l: 'teste sem cartão' }, ].map(s => (
{s.n}
{s.l}
))}
); } // ─── Pricing tease ─────────────────────────────────────────────────── function Pricing() { const plans = [ { name: 'Loja', sub: 'Para uma loja única, equipa pequena.', points: ['Build + Portal', 'Facturação AT', 'Assistente IA — uso básico', 'Suporte por email'] }, { name: 'Distribuidor', sub: 'Multi-armazém, multi-loja.', recommended: true, points: ['Tudo do plano Loja', 'Equipa alargada', 'Multi-armazém', 'Assistente IA — uso intensivo', 'Suporte prioritário'] }, { name: 'Grupo', sub: 'Cadeias e grupos com SLA dedicado.', points: ['Implementação acompanhada', 'Assistente IA dedicado', 'SAML · SSO', 'SLA contratual'] }, ]; return (
Planos

Três planos. Sem surpresas.

Os preços finais serão anunciados com o lançamento público, no outono de 2026. Os participantes da beta privada ficam com condições preferenciais durante o primeiro ano.

{plans.map(p => (
{p.recommended && ( Recomendado )}
{p.name}
{p.sub}
Sob consulta
A anunciar no lançamento
{p.name === 'Grupo' ? 'Falar com vendas' : 'Pedir convite para a beta'}
    {p.points.map(pt => (
  • {pt}
    • ))}
))}
Todos os planos incluem AT e-fatura, SAF-T PT, RGPD, suporte em português, actualizações grátis.
); } // ─── FAQ ──────────────────────────────────────────────────────────── function FAQ() { const qs = [ { q: 'Funciona com a Autoridade Tributária?', a: 'Sim. Comunicação directa com a AT, séries certificadas, SAF-T PT exportável em 1 clique. Validado por contabilistas certificados.' }, { q: 'Posso migrar do Primavera / Sage / PHC?', a: 'Sim. Importamos catálogo, clientes e histórico via ficheiro Excel ou ligação directa quando disponível. Cobrimos a migração nos planos Distribuidor e Grupo.' }, { q: 'O assistente IA vê os meus dados?', a: 'Apenas o que autoriza. Pode definir por papel a que módulos o assistente tem acesso, e o histórico de conversas pertence-lhe — pode exportá-lo ou apagá-lo a qualquer momento. Antes de qualquer alteração, o assistente apresenta-lhe sempre o resultado para aprovação.' }, { q: 'Funciona offline na obra?', a: 'O Portal funciona em modo limitado offline (catálogo + rascunhos). O ERP completo precisa de ligação, mas é leve em 3G.' }, { q: 'Quantos utilizadores posso ter?', a: 'Loja: 3. Distribuidor: 15. Grupo: ilimitado. Sempre com SSO e papéis (admin, comprador, chefe de obra, financeiro).' }, ]; return (
Perguntas frequentes

Tudo o que precisa de saber.

{qs.map((it, i) => (
{it.q}

{it.a}

))}
); } // ─── Invite block — links to the standalone card ───────────────────── // All CTAs are wired: // • "Pedir convite" → mailto: with prefilled subject + body // • "Marcar 30 minutos" → mailto: variant // • Mini invite card → cards/invite.html?name=&company=&number= // (clicking opens the full A5 artboard // with the same demo placeholder data) // The mailto fallback means the flow works in the browser today with no // backend; swap to Cal.com / Tally / your own form once you have one. const INVITE_EMAIL = 'equipa@constructhub.services'; const INVITE_DEMO_NAME = 'João Faria'; const INVITE_DEMO_COMPANY = 'Materiais Faria, Lda.'; const INVITE_DEMO_NUMBER = '014 / 025'; function inviteCardHref({ name, company, number } = {}) { const p = new URLSearchParams(); if (name) p.set('name', name); if (company) p.set('company', company); if (number) p.set('number', number); return 'cards/invite.html' + (p.toString() ? '?' + p.toString() : ''); } function mailtoHref({ subject, body }) { return `mailto:${INVITE_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; } const PEDIR_CONVITE_MAILTO = mailtoHref({ subject: 'Beta privada · pedido de convite', body: [ 'Olá equipa ConstructHub,', '', 'Gostaria de saber mais sobre a beta privada.', '', 'Nome: ', 'Empresa: ', 'NIF/NIPC: ', 'Cidade: ', 'Telefone: ', '', 'O que melhor descreve a empresa? (distribuidor / retalhista / fabricante / empreiteiro / outro)', '', 'Que ERP usa hoje? ', '', 'Obrigado.', ].join('\r\n'), }); const MARCAR_CONVERSA_MAILTO = mailtoHref({ subject: 'ConstructHub · marcar 30 minutos', body: [ 'Olá equipa ConstructHub,', '', 'Gostaria de marcar uma conversa de 30 minutos para conhecer melhor o produto.', '', 'Nome: ', 'Empresa: ', 'Disponibilidade (datas/horas): ', 'Telefone (opcional): ', '', 'Obrigado.', ].join('\r\n'), }); function InviteBlock() { return (
Convite · acesso antecipado

Junte-se à beta privada.

Estamos a receber os primeiros 25 distribuidores portugueses para a beta privada. Acesso antecipado, suporte directo da equipa fundadora e condições preferenciais durante o primeiro ano.

Marcar 30 minutos Ver carta de convite
Sem cartão de crédito · sem compromisso · resposta em 1 dia útil
Ainda não está pronto? Avisamos quando lançarmos.
{typeof NewsletterForm === 'function' ? : null}
{/* Mini invitation card preview — clickable, opens the full A5 artboard */}
); } // Slim, preview-only version of the card; the standalone artboard at // cards/invite.html renders the full A5 thing with QR + footer band. function InviteCardPreview() { return (
Convite pessoal N.º 014 / 025
Está convidado para
O lançamento da beta privada do ConstructHub.
Acesso
Beta privada
Janela
Outono de 2026
CH ConstructHub Abrir carta
); } // ─── Footer ────────────────────────────────────────────────────────── function Footer() { return ( ); } function LandingPage() { return (
); } Object.assign(window, { LandingPage });