organizacao da tela inicial
This commit is contained in:
@@ -0,0 +1,710 @@
|
||||
{
|
||||
"date": "2026-10-23",
|
||||
"decision": "Pedido expresso da Tempo: aplicar o anexo de identidade visual aos cinco cartões de Encontre o contexto do seu investimento.",
|
||||
"instructionSource": {
|
||||
"path": "C:\\Users\\jorge\\.codex\\attachments\\637b878f-1f58-490d-bd07-d5cd10ae2377\\Pasted text.txt",
|
||||
"sha256": "fcc24dcce4b5df3f10e29add48052808d48ddcf674d052287854e11910e01d69"
|
||||
},
|
||||
"source": {
|
||||
"type": "AI-generated photorealistic illustrative images",
|
||||
"tool": "image_gen, built-in mode",
|
||||
"skill": "C:/Users/jorge/.codex/skills/.system/imagegen/SKILL.md",
|
||||
"externalPhotographsUsed": false,
|
||||
"namedRealLocationsDepicted": false,
|
||||
"note": "Cenas ilustrativas plausíveis, sem atribuição a instalações, pessoas, instituições ou projectos reais."
|
||||
},
|
||||
"analysisAndPlan": "docs/investmoz/public-portal-sections.md#fotografias-nos-cartões-de-contexto-do-investimento--23102026",
|
||||
"filesChanged": [
|
||||
"resources/js/pages/PortalInvestidor.tsx",
|
||||
"resources/js/components/investment-context-cards.tsx",
|
||||
"tools/portal-context-cards-qa.mjs",
|
||||
"docs/investmoz/public-portal-sections.md",
|
||||
"docs/investmoz/v2/auditoria-portal/matriz-requisitos.csv",
|
||||
"docs/investmoz/public-portal-context-images.json"
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"key": "clusters-agroindustria",
|
||||
"prompt": "Use case: photorealistic-natural. Asset type: an individual navigation card photograph for a professional investment portal. Generate ONE clean, realistic editorial photograph in horizontal 16:9 composition. Natural daylight, realistic restrained colours, excellent photographic detail, balanced uncluttered framing, one clear subject readable at a small thumbnail size. Contemporary setting plausible in Mozambique in southern Africa. This is a generic illustrative scene, NOT a depiction or claim about any named real facility, project, landmark or institution. No text, lettering, titles, captions, logos, brands, watermarks, flags, official emblems, maps, diagrams, graphical overlays, UI elements, collages, artificial colour filters, futuristic architecture or advertising poster treatment. Realistic people, hands, equipment and perspective; dignified candid activity instead of posed stock photography. Subject: a modest, well maintained agro-processing packing facility linking commercial agriculture to local industry. Wide three-quarter view into an airy open-sided processing shed with pale walls and a few orderly wooden or reusable produce crates, stainless processing/sorting benches and an unobtrusive commercial agricultural field visible beyond. Two Black southern African workers in clean practical workwear sorting harvested vegetables naturally, faces not prominent. Show production and transformation together in ONE genuine-looking continuous scene, no montage. Clear simple geometry, warm-neutral sunlight, subtle vegetation.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-f72e66b0-d788-4476-8b20-c39b22d5d6dc.png",
|
||||
"original": "outputs/investment-context-20261023/originals/clusters-agroindustria.png",
|
||||
"originalSha256": "75e04a694081ab757831fc9b37323949d09806e622c83d07588fc47c423c9033",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-context/clusters-agroindustria.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 116796,
|
||||
"sha256": "12494b31ab551cffb79f81c7d1519c0c4a2d4236e7f129bec1ce32251b39d847"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 42060,
|
||||
"sha256": "76e3152c99ed188f748542dcf0464787307dbdc1c6299e7264dfd1bd86ad75e3"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/clusters-agroindustria-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 9596,
|
||||
"sha256": "9f668da50f7d64955b31940d239b420ac18dbb76a8120c8bedab3f2c04710288"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "corredores-logisticos",
|
||||
"prompt": "Use case: photorealistic-natural. Asset type: an individual navigation card photograph for a professional investment portal. Generate ONE clean, realistic editorial photograph in horizontal 16:9 composition. Natural daylight, realistic restrained colours, excellent photographic detail, balanced uncluttered framing, one clear subject readable at a small thumbnail size. Contemporary setting plausible in Mozambique in southern Africa. This is a generic illustrative scene, NOT a depiction or claim about any named real facility, project, landmark or institution. No text, lettering, titles, captions, logos, brands, watermarks, flags, official emblems, maps, diagrams, graphical overlays, UI elements, collages, artificial colour filters, futuristic architecture or advertising poster treatment. Realistic people, hands, equipment and perspective; dignified candid activity instead of posed stock photography. Subject: a commercial freight terminal serving a southern African logistics corridor. Elevated medium-wide viewpoint showing an orderly short line of unbranded freight containers, one realistic container-handling crane and a freight truck on a paved lane, with a calm strip of water and low coastal industrial vegetation in the distance. Infrastructure of credible modest contemporary scale, generic and unidentifiable; do not reproduce or name Maputo, Beira, Nacala or any real port. Spatially coherent containers, road and handling equipment; clean clear subject with no excessive machinery.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-0363da23-f9cb-413b-bb64-024539085c4b.png",
|
||||
"original": "outputs/investment-context-20261023/originals/corredores-logisticos-v2.png",
|
||||
"originalSha256": "2151d1a59265c6f7151d18af6ef6ad78f9fc6e0cd58ac9cc5c64b50a25c5058e",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-context/corredores-logisticos-v2.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 85184,
|
||||
"sha256": "1939c26df297588b6c3e5ea08b700d4cda5d1183cf3e5faed06a1ca060d2475e"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 26222,
|
||||
"sha256": "06dc0e7126cb2c13eb3f9a98f6ee58f5d64f9d07c28620975f744f263744fe15"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/corredores-logisticos-v2-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 5334,
|
||||
"sha256": "f9fd6e6c3a2d4654df1a8fdb287e122f1889b5d318c104c4816ee393c793e242"
|
||||
}
|
||||
],
|
||||
"selectedSource": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-c2cff7da-d602-4191-9aca-380918a09619.png",
|
||||
"editPrompt": "Edit the provided photograph: REMOVE THE ENTIRE FOREGROUND TRUCK, including cab, wheels, long trailer and the red freight container on that trailer. The big truck at lower left/centre must be completely gone. Replace the removed truck's area with a continuous empty realistic paved road surface matching the surrounding pavement and road markings. Leave the stacked stationary freight containers along the quay, the water, the large port crane, the lifted container and workers. All remaining equipment and containers should have plain surfaces without readable lettering, logos, numbers or brands. No new truck, vehicle, symbol, text or overlay. Keep a single clean editorial photograph, natural lighting and horizontal 16:9 framing. Generic commercial port scene, not a named real facility."
|
||||
},
|
||||
{
|
||||
"key": "projectos-ancora",
|
||||
"prompt": "Use case: photorealistic-natural. Asset type: an individual navigation card photograph for a professional investment portal. Generate ONE clean, realistic editorial photograph in horizontal 16:9 composition. Natural daylight, realistic restrained colours, excellent photographic detail, balanced uncluttered framing, one clear subject readable at a small thumbnail size. Contemporary setting plausible in Mozambique in southern Africa. This is a generic illustrative scene, NOT a depiction or claim about any named real facility, project, landmark or institution. No text, lettering, titles, captions, logos, brands, watermarks, flags, official emblems, maps, diagrams, graphical overlays, UI elements, collages, artificial colour filters, futuristic architecture or advertising poster treatment. Realistic people, hands, equipment and perspective; dignified candid activity instead of posed stock photography. Subject: a small team of two Black southern African engineering professionals, one woman and one man, in realistic hard hats and restrained protective workwear, seen candidly from a three-quarter rear angle reviewing an unmarked folded technical plan at a utility-scale solar installation. Low rows of realistic blue solar panels and a simple low service building recede into a dry green southern African landscape. No readable drawing or numbers on the plan. Focus on credible engineering and investment project scale; clean composition, quiet professional atmosphere, no landmark or company identifiers.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-19fcd882-542b-43c9-81e7-593fd75083f6.png",
|
||||
"original": "outputs/investment-context-20261023/originals/projectos-ancora.png",
|
||||
"originalSha256": "f23cf6e64307a280f3aa58741454a23480ac28fcae01a0810adf134b783a3a74",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-context/projectos-ancora.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 77114,
|
||||
"sha256": "de0b59774246fee982761de59618b3e7707c3fe30f2b1bcbb6017d4dce53c4dc"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 29484,
|
||||
"sha256": "268e405112ed341fce3c9792c3caa47053984100cd4a204453e31bbe5db6e890"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/projectos-ancora-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 6750,
|
||||
"sha256": "db7e4b4382e09eb6b4f9f2a4603ccac4b4eacc53ba0f6776429e33dbf5131954"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "educacao-formacao",
|
||||
"prompt": "Use case: photorealistic-natural. Asset type: an individual navigation card photograph for a professional investment portal. Generate ONE clean, realistic editorial photograph in horizontal 16:9 composition. Natural daylight, realistic restrained colours, excellent photographic detail, balanced uncluttered framing, one clear subject readable at a small thumbnail size. Contemporary setting plausible in Mozambique in southern Africa. This is a generic illustrative scene, NOT a depiction or claim about any named real facility, project, landmark or institution. No text, lettering, titles, captions, logos, brands, watermarks, flags, official emblems, maps, diagrams, graphical overlays, UI elements, collages, artificial colour filters, futuristic architecture or advertising poster treatment. Realistic people, hands, equipment and perspective; dignified candid activity instead of posed stock photography. Subject: a candid technical training classroom with three Black southern African young adult students of different genders and one instructor working together at a practical electronics and computing workbench. Bright modest well maintained vocational classroom, natural window light, simple laboratory equipment and unbranded closed or angled laptops whose screens have no visible interface or text. Focus on two students engaged in a realistic small hands-on electronics exercise with normal anatomy and correct equipment proportions. Dignified contemporary clothing, natural concentration, professional skills and human capital investment, no posed smiles or stereotypes.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-d21314d7-c726-41ad-862c-3c8b64df6b53.png",
|
||||
"original": "outputs/investment-context-20261023/originals/educacao-formacao.png",
|
||||
"originalSha256": "e59ec599e8c64ab84195d0cb37871d3102df178a13275806ca3b7f98e6bfa895",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-context/educacao-formacao.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 68224,
|
||||
"sha256": "e3e5dbd292cac555a45bcbd94a0fa6b60e6b710debc0c827c68603f40bfb8a28"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 27384,
|
||||
"sha256": "d3b743fbba7a8cb40e45999ee8c345cbfc0332cf85f5c5c2d6a5cf1240a395e4"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/educacao-formacao-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 7156,
|
||||
"sha256": "0b2a12898043c57cf4354b54ebcba8adec8d41b3886bc574584ccc12af7b1e4c"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "documentos-formularios",
|
||||
"prompt": "Use case: photorealistic-natural. Asset type: an individual navigation card photograph for a professional investment portal. Generate ONE clean, realistic editorial photograph in horizontal 16:9 composition. Natural daylight, realistic restrained colours, excellent photographic detail, balanced uncluttered framing, one clear subject readable at a small thumbnail size. Contemporary setting plausible in Mozambique in southern Africa. This is a generic illustrative scene, NOT a depiction or claim about any named real facility, project, landmark or institution. No text, lettering, titles, captions, logos, brands, watermarks, flags, official emblems, maps, diagrams, graphical overlays, UI elements, collages, artificial colour filters, futuristic architecture or advertising poster treatment. Realistic people, hands, equipment and perspective; dignified candid activity instead of posed stock photography. Subject: a close-medium editorial photograph of a tidy modern administrative office desk where a Black southern African professional in a plain light blue shirt is naturally reviewing organised business documentation. Frame hands, desk and partial torso, no prominent portrait. Neat neutral folders, a few sheets with only faint out-of-focus non-readable printing, a pen and an unbranded laptop angled away with no visible UI. Soft window light, white and pale neutral surfaces with subtle blue accents. Absolutely no readable personal data, invented official seals or highlighted fake text; realistic fingers and documents, calm minimal composition.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-f1c8e22e-6885-4578-ac7d-02692c5cc071.png",
|
||||
"original": "outputs/investment-context-20261023/originals/documentos-formularios.png",
|
||||
"originalSha256": "cfbd38a9cc9b9acf35f38220f5bd9c1ab1feafe411bc1d4bbdb3658de557e052",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-context/documentos-formularios.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 43002,
|
||||
"sha256": "70ddea3256e6a8d981b1fae5ee7b4de6c910d757137b79a59306c268c278402f"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 17996,
|
||||
"sha256": "436865c948acbb7b6e9e482bef8f5bd626c6960f2f155608e40dfcd0e76b84cb"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-context/documentos-formularios-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 4958,
|
||||
"sha256": "fad6a6ab825a82ec2541d2e0c6de9d85486e4bbca159b912f87bec9cc0aeeba5"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"primaryImagesBytesTotal": 390320,
|
||||
"responsive480ImagesBytesTotal": 143146,
|
||||
"implementation": {
|
||||
"gridColumns": [
|
||||
1,
|
||||
2,
|
||||
4
|
||||
],
|
||||
"aspectRatio": "16:9",
|
||||
"responsiveImages": true,
|
||||
"lazyLoading": true,
|
||||
"altLanguage": "pt",
|
||||
"fallback": "Derivado pequeno da própria imagem; se também falhar, estado acessível Imagem indisponível, com dimensão reservada e link mantido.",
|
||||
"globalCSSChanged": false,
|
||||
"businessLogicChanged": false,
|
||||
"databaseChanged": false,
|
||||
"heroChanged": false
|
||||
},
|
||||
"visualReview": "Cinco composições individuais distintas, cores naturais e luz editorial; sem títulos/colagens ou mapas. A composição de Corredores foi revista para remover o camião com marca. Capturas em computador e telemóvel inspeccionadas.",
|
||||
"verification": {
|
||||
"browser": {
|
||||
"results": [
|
||||
{
|
||||
"width": 320,
|
||||
"dpr": 1,
|
||||
"columns": 1,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 390,
|
||||
"dpr": 2,
|
||||
"columns": 1,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 768,
|
||||
"dpr": 1,
|
||||
"columns": 2,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1024,
|
||||
"dpr": 1,
|
||||
"columns": 4,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1440,
|
||||
"dpr": 2,
|
||||
"columns": 4,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1920,
|
||||
"dpr": 1,
|
||||
"columns": 4,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"fail": "primary",
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"fail": "all",
|
||||
"status": "passed"
|
||||
}
|
||||
],
|
||||
"errors": [],
|
||||
"navigation": [
|
||||
"/clusters",
|
||||
"/corredores",
|
||||
"/projectos-ancora",
|
||||
"/educacao",
|
||||
"/documentos"
|
||||
],
|
||||
"databaseAccess": false
|
||||
},
|
||||
"script": "tools/portal-context-cards-qa.mjs",
|
||||
"screenshots": [
|
||||
"outputs/investment-context-20261023/cards-1024-dpr1.png",
|
||||
"outputs/investment-context-20261023/cards-1440-dpr2.png",
|
||||
"outputs/investment-context-20261023/cards-1920-dpr1.png",
|
||||
"outputs/investment-context-20261023/cards-320-dpr1.png",
|
||||
"outputs/investment-context-20261023/cards-390-dpr2.png",
|
||||
"outputs/investment-context-20261023/cards-768-dpr1.png",
|
||||
"outputs/investment-context-20261023/fallback-all.png",
|
||||
"outputs/investment-context-20261023/fallback-primary.png"
|
||||
],
|
||||
"types": {
|
||||
"command": "npm run types:check",
|
||||
"exitCode": 0
|
||||
},
|
||||
"lint": {
|
||||
"files": [
|
||||
"resources/js/components/investment-context-cards.tsx",
|
||||
"resources/js/pages/PortalInvestidor.tsx",
|
||||
"tools/portal-context-cards-qa.mjs"
|
||||
],
|
||||
"exitCode": 0
|
||||
},
|
||||
"build": {
|
||||
"command": "npm run build",
|
||||
"exitCode": 0,
|
||||
"pageAsset": "assets/PortalInvestidor-fh5VZanx.js",
|
||||
"log": "outputs/investment-context-20261023/build-local.log"
|
||||
}
|
||||
},
|
||||
"scope": "Aplicado no código e pacote locais. API e navegação simuladas na verificação visual; sem dados activos ou publicação externa.",
|
||||
"matrixReferences": [
|
||||
"MASTER-efd550fd-0104",
|
||||
"MASTER-55050f60-0001"
|
||||
],
|
||||
"acceptanceLimit": "Prova restrita à apresentação e navegação dos cinco cartões; não encerra critérios funcionais mais amplos da matriz.",
|
||||
"layoutRevision": {
|
||||
"date": "2026-10-23",
|
||||
"decision": "Pedido expresso da Tempo: título a vermelho e menos espaço em branco dentro dos cartões.",
|
||||
"changes": "Título no vermelho #ed1c24; removidas alturas mínimas de título e descrição; preenchimento 20→16 px, intervalo 8→6 px e entrelinhas 28/24→24/20 px. Mantidos imagens, conteúdos, links e alinhamento por linha da grelha.",
|
||||
"browser": {
|
||||
"results": [
|
||||
{
|
||||
"width": 320,
|
||||
"dpr": 1,
|
||||
"columns": 1,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 320,
|
||||
"height": 180
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 390,
|
||||
"dpr": 2,
|
||||
"columns": 1,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios.webp",
|
||||
"width": 389,
|
||||
"height": 219
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 768,
|
||||
"dpr": 1,
|
||||
"columns": 2,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 384,
|
||||
"height": 216
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1024,
|
||||
"dpr": 1,
|
||||
"columns": 4,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 256,
|
||||
"height": 144
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1440,
|
||||
"dpr": 2,
|
||||
"columns": 4,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1920,
|
||||
"dpr": 1,
|
||||
"columns": 4,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/clusters-agroindustria-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/corredores-logisticos-v2-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/projectos-ancora-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/educacao-formacao-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-context/documentos-formularios-480.webp",
|
||||
"width": 266,
|
||||
"height": 149
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"fail": "primary",
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"fail": "all",
|
||||
"status": "passed"
|
||||
}
|
||||
],
|
||||
"errors": [],
|
||||
"navigation": [
|
||||
"/clusters",
|
||||
"/corredores",
|
||||
"/projectos-ancora",
|
||||
"/educacao",
|
||||
"/documentos"
|
||||
],
|
||||
"databaseAccess": false
|
||||
},
|
||||
"lintExitCode": 0,
|
||||
"buildExitCode": 0,
|
||||
"pageAsset": "assets/PortalInvestidor-CYCMhSzW.js",
|
||||
"screenshots": [
|
||||
"outputs/investment-context-compact-20261023/cards-1024-dpr1.png",
|
||||
"outputs/investment-context-compact-20261023/cards-1440-dpr2.png",
|
||||
"outputs/investment-context-compact-20261023/cards-1920-dpr1.png",
|
||||
"outputs/investment-context-compact-20261023/cards-320-dpr1.png",
|
||||
"outputs/investment-context-compact-20261023/cards-390-dpr2.png",
|
||||
"outputs/investment-context-compact-20261023/cards-768-dpr1.png"
|
||||
],
|
||||
"databaseChanged": false
|
||||
}
|
||||
}
|
||||
@@ -84,3 +84,55 @@ O script `tools/portal-hero-qa.mjs` demonstra a escrita progressiva, a ordem tí
|
||||
Pedido expresso da Tempo na continuação de 23/10/2026: remover do hero o grupo com o botão de pausa e as duas bolinhas de selecção de imagem. Removidos o grupo, os ícones e o estado de pausa manual. A troca automática de imagens e a escrita dinâmica permanecem; conservam-se a pausa da rotação por foco/ponteiro, a suspensão em separador oculto e a preferência de movimento reduzido. Esta decisão substitui os controlos visíveis introduzidos como escolha de implementação nas revisões anteriores.
|
||||
|
||||
O script existente de interface foi adaptado para demonstrar a ausência dos controlos e a continuação da rotação automática, escrita e pesquisa, com capturas em `outputs/portal-hero-no-controls-20261023/`. Evidência e pacote local registados em `public-portal-hero-validation.json`, mantendo o histórico das revisões e os estados dos requisitos da matriz.
|
||||
|
||||
## Fotografias nas etapas de Como Investir — 23/10/2026
|
||||
|
||||
Origem: pedido expresso da Tempo para analisar e ilustrar exclusivamente os cartões “1. Explorar”, “2. Preparar” e “3. Acompanhar”. Aplicam-se as orientações permanentes de `AGENTS.md` de 12/10 e 22/10/2026; componentes e optimização de recursos são escolhas técnicas, sem novas regras operacionais.
|
||||
|
||||
Análise e plano: os cartões existentes são âncoras estáticas na home React/Inertia, numa grelha de três colunas a partir de 768 px. Explorar liga a `/oportunidades` e representa a identificação de sector, território e oportunidade; Preparar liga a `/como-investir` e representa percurso/documentação; Acompanhar liga a `/balcao-virtual` e representa envio/consulta de pedido e protocolo. Os recursos locais existentes ilustram outras secções; preparar três fotografias distintas para evitar repetição. Gerar cenas editoriais plausíveis com `imagegen`, rever composição, guardar originais e versões WebP locais, integrar imagens 16:9 com dimensões reservadas e carregamento diferido, manter textos/destinos/título vermelho, verificar comportamento responsivo, navegação e falhas de imagem, compilar. Âmbito exclusivamente visual, sem alterações em dados, autenticação, apoio ou rodapé. Referência documental na linha existente `MASTER-efd550fd-0104`, sem criar outra matriz nem encerrar o critério mais amplo.
|
||||
|
||||
Implementação: `components/investment-steps.tsx` reúne os três cartões, preservando títulos, descrições e âncoras. Fotografias individuais geradas com a ferramenta integrada `image_gen`, sem local ou projecto real atribuído: avaliação de oportunidade num parque empresarial genérico, preparação documental numa reunião e consulta de pedido no computador. Originais em `outputs/investment-steps-20261023/originals/`; recursos locais em `public/images/investment-steps/` com WebP 960×540, 480×270 e alternativa própria 240×135. Os cartões usam `srcset`, `sizes`, `loading="lazy"`, dimensões reservadas, corte 16:9, alt em português, foco visível e texto compacto com 16 px de preenchimento. Se também falhar a alternativa pequena, o cartão mantém a área reservada, descrição acessível e destino utilizável.
|
||||
|
||||
Verificação desta secção: componentes reais com API sintética e sem base de dados, seis larguras de 320 a 1920 px, duas densidades de ecrã, três imagens distintas, texto/destinos conservados, navegação por teclado, ausência de transbordo e deslocamento no carregamento, falhas dos recursos principais e de todos os recursos. Oito cenários sem erros JavaScript. Fotografias, prompts, hashes, capturas, relatório de browser e compilação documentados em `public-portal-steps-images.json` e `outputs/investment-steps-20261023/`. Ajuste restrito a esta secção; apoio, acesso à gestão e rodapé mantidos.
|
||||
|
||||
## Fotografias nos cartões de contexto do investimento — 23/10/2026
|
||||
|
||||
Origem: pedido expresso da Tempo para aplicar o anexo “Melhorar as imagens e a identidade visual do Portal do Investidor de Moçambique” exclusivamente à secção “Encontre o contexto do seu investimento”. O anexo define estética fotográfica editorial, imagens individuais contextualizadas, recursos locais, acessibilidade, desempenho e preservação dos cinco destinos e conteúdos. Aplicam-se as orientações permanentes de `AGENTS.md` de 12/10 e 22/10/2026; os pormenores de implementação abaixo são escolhas técnicas.
|
||||
|
||||
Análise prévia: Laravel/Inertia 3 e React, com Tailwind existente; os cinco cartões estavam embutidos em `pages/PortalInvestidor.tsx`. `EducationalArticleCard` destina-se a artigos com acções e metadados diferentes, pelo que não foi alterado. A secção foi extraída para `components/investment-context-cards.tsx`, mantendo o título, descrições, âncoras e grelha de uma/duas/quatro colunas. Não foram alteradas as páginas de destino, dados, APIs ou estilos globais.
|
||||
|
||||
Foram geradas cinco imagens distintas com a ferramenta integrada `image_gen`, segundo a skill `imagegen`: agro-indústria, terminal logístico, acompanhamento de instalação solar, formação técnica e análise documental. São imagens fotográficas ilustrativas geradas, sem localização ou instituição real atribuída, e não fotografias documentais de projectos cadastrados. A imagem do terminal foi revista para remover o camião com marca visível. Não foram usadas fotografias externas nem URLs de serviços de imagens. Originais seleccionados, prompts e hashes estão registados no manifesto `public-portal-context-images.json`; os originais foram preservados dentro do workspace.
|
||||
|
||||
Recursos finais em `public/images/investment-context/`: `clusters-agroindustria`, `corredores-logisticos-v2`, `projectos-ancora`, `educacao-formacao` e `documentos-formularios`, em WebP 960×540, com variantes 480×270 e alternativas 240×135. As imagens mantêm 16:9, `object-cover`, textos alternativos em português, dimensões reservadas, `srcset`, `sizes`, `loading="lazy"` e descodificação assíncrona. Cada cartão conserva o seu título e descrição; o foco usa o azul e os tons neutros pedidos no anexo.
|
||||
|
||||
Se um recurso principal falhar, o cartão usa a sua própria variante pequena, evitando repetir a fotografia de outra secção. Se também essa falhar, apresenta “Imagem indisponível” no mesmo espaço reservado, com descrição acessível e link operacional. Este é apenas um estado de erro; os cinco cartões usam imagens fotográficas na apresentação normal.
|
||||
|
||||
Verificação reproduzível: `tools/portal-context-cards-qa.mjs`, com o portal e cabeçalho reais, API sintética e acesso exclusivo aos recursos locais. Exercita seis larguras de ecrã, ecrãs de alta densidade, os cinco destinos por teclado, imagens carregadas e distintas, alinhamento, dimensões, ausência de deslocamento no carregamento e dois cenários de falha. Capturas e resultados em `outputs/investment-context-20261023/`; síntese, fontes/prompts e compilação em `public-portal-context-images.json`. Referências acrescentadas às linhas existentes `MASTER-efd550fd-0104` e `MASTER-55050f60-0001`, sem encerrar os respectivos critérios mais amplos.
|
||||
|
||||
Revisão expressa da Tempo de 23/10/2026: título da secção no vermelho da identidade existente (`#ed1c24`) e cartões mais compactos. Removidas as alturas mínimas de 56 e 72 px do título/descrição; reduzidos o preenchimento de 20 para 16 px, o intervalo de 8 para 6 px e as entrelinhas. As alturas passam a acompanhar o conteúdo, com alinhamento por linha da grelha, conservando imagens, textos e destinos. A reserva das dimensões das imagens mantém-se. Evidência desta revisão em `outputs/investment-context-compact-20261023/` e no campo `layoutRevision` do manifesto existente.
|
||||
|
||||
## Sectores da home e catálogo completo — 23/10/2026
|
||||
|
||||
Origem: pedido expresso da Tempo para adaptar a estrutura de “Áreas de Investimento” do projecto `D:/Projects/Tempo_Investidor/tempo-dashboard`, incluindo cartões, botão para mais sectores e respectiva página, e uniformizar a vermelho os títulos das secções da home. Aplicadas as orientações permanentes `AGENTS.md` de 12/10 e 22/10/2026: as decisões de produto são da Tempo; as escolhas técnicas abaixo não criam requisitos organizacionais.
|
||||
|
||||
Análise prévia: a referência usa `components/investor-portal/homepage/homepage-sectors.tsx` e `pages/investor-portal/sectors/index.tsx`. Mostra cinco cartões com fotografia e título sobreposto, resumo, “Saiba mais” e ligação central arredondada para o catálogo. O V2 já dispunha de `/sectores`, fichas `/sectores/{slug}`, especialização Fintech e dados de `SectorOrganization`. Foram reutilizados esses contratos e percursos, sem importar Framer Motion, traduções ou rotas exclusivas da referência.
|
||||
|
||||
Implementação: `components/public-sector-cards.tsx` partilha os cartões entre a home e o catálogo. A home mostra os primeiros cinco sectores, na ordem recebida da API, com “Ler mais” para a ficha existente e “Ver mais sectores” para `/sectores`. A página existente apresenta todos os sectores publicados, na mesma estrutura visual, e “Voltar ao início”. Mantêm-se nomes, descrições, contagens, valores zero, especializações e URLs canónicos recebidos. Descrições ausentes não são preenchidas com dados da referência. Fintech permanece ligado à ficha própria, sem âncoras HTML aninhadas.
|
||||
|
||||
Foram inventariados os onze JPG disponíveis em `storage/app/public/investor-portal/sectors` na referência, copiados os originais para evidência e preparados derivados locais WebP 960×540/480×270 em `public/images/sectors/`. O mapeamento visual por slug é de apresentação e não altera a taxonomia. Para Imobiliário e sectores sem imagem específica usa-se a vista empresarial genérica disponível na referência; para Bens de Consumo e Franquias usa-se a imagem de actividade industrial. A variante genérica também serve como alternativa em caso de erro; se ambas falharem, o título e as ligações continuam visíveis num fundo neutro. Não se atribui aos ficheiros uma origem oficial, licença externa ou localização documental não comprovada.
|
||||
|
||||
Os seis títulos de secção da home — contexto do investimento, sectores, Como Investir, oportunidades em destaque, documentos essenciais e apoio — usam `HOME_SECTION_HEADING` em `lib/portal-presentation.ts`: vermelho `#ed1c24`, 24 px, entrelinha de 32 px e peso 700. O cartão de Apoio passou a superfície clara para manter contraste com o título vermelho. O título principal animado do hero mantém a sua hierarquia própria. `PORTAL_MORE_LINK` centraliza o botão arredondado, contorno vermelho e estado de foco, seguindo a referência.
|
||||
|
||||
Verificação: `tools/portal-home-sectors-qa.mjs` carrega os componentes reais com dez sectores sintéticos, descrições nulas e especialização Fintech, sem base de dados. Exercita seis larguras, prévia de cinco/cartálogo de dez, estilos dos seis títulos, percurso por teclado, dez fichas, Fintech, regresso à home, catálogo vazio e dois cenários de indisponibilidade de imagens. Capturas, inventário, hashes e resultados em `outputs/home-sectors-20261023/`; resumo persistente em `public-portal-sectors-validation.json`. Referências na matriz existente: `MASTER-efd550fd-0104` e `MASTER-9f5719c8-0077`. Esta adaptação não encerra critérios mais amplos nem altera dados, permissões, regras operacionais ou publicação noutro servidor.
|
||||
|
||||
Pedido expresso da Tempo, 23/10/2026 — botão “Contactar Apoio ao Investidor”: em `layouts/portal-navigation.tsx`, a faixa de largura total foi substituída por um botão centrado, com largura ajustada ao texto, altura mínima de 44 px, preenchimento reduzido, sombra discreta e vermelho `#ed1c24`, conservando `/apoio` e o foco visível. Verificado a 320, 390 e 1440 px: cerca de 223×44 px, sem transbordo ou erros JavaScript. Evidência em `outputs/support-button-20261023/qa-results.json` e capturas; compilação local no mesmo directório. Ajuste de apresentação por decisão do proprietário, sem nova regra operacional nem alteração de dados.
|
||||
|
||||
Revisão anterior de 23/10/2026, superada pela correcção de âmbito abaixo: o Codex interpretou o pedido de abreviação como aplicável à zona inferior inteira e alterou indevidamente o botão de apoio e o rodapé partilhado. Essa interpretação não foi uma decisão da Tempo. A revisão removeu o bloco interno, abreviou o botão para “Apoio” e recolheu contactos/ligações em “Informações” num rodapé claro; estas alterações fora do bloco indicado foram revertidas após a clarificação expressa do proprietário. O registo desta revisão é histórico e não descreve a apresentação actual.
|
||||
|
||||
Evidência histórica da revisão superada: `outputs/footer-compact-20261023/qa-results.json`, capturas e `check.mjs`. Não constitui aceitação do âmbito pelo proprietário.
|
||||
|
||||
Correcção expressa da Tempo, 23/10/2026: o pedido abrange exclusivamente o bloco “INVESTE Moçambique / Portal do Investidor — conheça as oportunidades… / Acesso à gestão”. Em `pages/PortalInvestidor.tsx`, esse bloco fica abreviado num ícone de acesso à gestão, com nome acessível e descrição “Acesso à gestão”, destino `/acesso-gestao`, área de interacção de 44 px e fundo branco, sem o título e parágrafo anteriores. O botão de apoio foi restaurado exactamente à apresentação anterior à abreviação: “Contactar Apoio ao Investidor”, compacto, vermelho e sem ícone. `components/tempo-footer.tsx` e os estilos `.tempo-footer` foram integralmente restaurados ao estado anterior, incluindo contactos e ligações visíveis e o fundo original do rodapé geral. Não se altera autenticação nem dados. Esta correcção substitui a interpretação indevida acima e mantém as restantes alterações previamente pedidas.
|
||||
|
||||
Evidência da correcção: `outputs/footer-scope-correction-20261023/check.mjs`, `qa-results.json`, capturas e `build-local.log`; componentes reais com API sintética a 320, 390 e 1440 px, ícone de gestão focável, bloco específico claro sem parágrafo, botão de apoio completo/vermelho, rodapé geral restaurado, contactos e ligações legais visíveis, sem transbordo ou erros JavaScript. Lint dos componentes alterados e compilação local. Referência na linha existente `MASTER-efd550fd-0104`, sem encerramento do critério amplo nem alteração dos seus estados.
|
||||
|
||||
Continuação expressa da Tempo, 23/10/2026: acrescentado o título visível “Acesso à gestão” ao lado do ícone nesse mesmo bloco, para tornar o destino compreensível. O acesso mantém-se compacto, vermelho e com fundo claro, conservando `/acesso-gestao`. Ajuste restrito a essa ligação; apoio e rodapé geral conservam a apresentação restaurada. Referência: `MASTER-efd550fd-0104` e a evidência da revisão anterior acima. Verificado a 320, 390 e 1440 px, sem transbordo ou erros JavaScript; lint e compilação aprovados. Evidência em `outputs/management-label-20261023/qa-results.json`, capturas e `build-local.log`. No pedido seguinte, a Tempo determinou o alinhamento desse acesso à esquerda; aplicado `justify-start` apenas no seu contentor.
|
||||
|
||||
@@ -0,0 +1,748 @@
|
||||
{
|
||||
"date": "2026-10-23",
|
||||
"decision": "Pedido expresso da Tempo: adaptar Áreas de Investimento do tempo-dashboard aos sectores da home e ao catálogo completo, copiar a estrutura dos botões e uniformizar a vermelho os títulos de secção da home.",
|
||||
"reference": {
|
||||
"project": "D:/Projects/Tempo_Investidor/tempo-dashboard",
|
||||
"files": [
|
||||
"resources/js/components/investor-portal/homepage/homepage-sectors.tsx",
|
||||
"resources/js/pages/investor-portal/sectors/index.tsx"
|
||||
],
|
||||
"structure": "Cinco cartões com fotografia, título sobreposto, resumo e acção de leitura; botão central arredondado/contorno vermelho para o catálogo."
|
||||
},
|
||||
"analysisAndPlan": "docs/investmoz/public-portal-sections.md#sectores-da-home-e-catálogo-completo--23102026",
|
||||
"filesChanged": [
|
||||
"resources/js/components/public-sector-cards.tsx",
|
||||
"resources/js/lib/portal-presentation.ts",
|
||||
"resources/js/components/investment-context-cards.tsx",
|
||||
"resources/js/lib/portal-api.ts",
|
||||
"resources/js/pages/PortalInvestidor.tsx",
|
||||
"resources/js/pages/portal/services.tsx",
|
||||
"tools/portal-home-sectors-qa.mjs",
|
||||
"docs/investmoz/public-portal-sections.md",
|
||||
"docs/investmoz/v2/auditoria-portal/matriz-requisitos.csv"
|
||||
],
|
||||
"behaviour": {
|
||||
"homePreview": 5,
|
||||
"previewOrder": "Ordem recebida da API, sem novos filtros de publicação.",
|
||||
"readMore": "Ler mais, para a URL recebida ou ficha existente /sectores/{slug}.",
|
||||
"moreSectors": "Ver mais sectores, botão arredondado para /sectores.",
|
||||
"catalogue": "Todos os sectores publicados devolvidos pelo cadastro existente; Voltar ao início para /.",
|
||||
"specializations": "Fintech conservado como ligação própria; sem âncoras aninhadas.",
|
||||
"countsAndDescriptions": "Preservados dados recebidos, incluindo zero e descrições ausentes; não importados textos ou registos do outro projecto.",
|
||||
"headings": [
|
||||
{
|
||||
"title": "Encontre o contexto do seu investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Sectores de investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Como Investir",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Oportunidades em destaque",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Documentos essenciais",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Apoio ao Investidor",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
}
|
||||
],
|
||||
"supportCard": "Superfície clara para contraste com o título vermelho."
|
||||
},
|
||||
"assets": [
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\agronegocio.jpg",
|
||||
"sourceBytes": 444057,
|
||||
"original": "outputs/home-sectors-20261023/originals/agronegocio.jpg",
|
||||
"sha256": "7337b689a6ad8b0b4c8d716ea356db14e22bd2982089825bb2382121ed3482f6",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/agronegocio.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 110310,
|
||||
"sha256": "3e9d3be22556300f880be39837f86e764e3d05433beff1da6694ef6cee1d5c34"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/agronegocio-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 31592,
|
||||
"sha256": "fd1f7624f7fd9224fc1c7bd11746806e419c645ba43c257b1edd9ba250cd47f1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\economia-azul.jpg",
|
||||
"sourceBytes": 456892,
|
||||
"original": "outputs/home-sectors-20261023/originals/economia-azul.jpg",
|
||||
"sha256": "1a2c04d0d9ed4a26129553daefd2ee18f6d820026ab1203acf3bcf91b0550f69",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/economia-azul.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 107626,
|
||||
"sha256": "bf3751e66839c1b3c585c91ffe65d32b9ee79ebd7d08e5e2c95c6cd581b04f8f"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/economia-azul-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 29350,
|
||||
"sha256": "aaf8ee66709d8e15c4304690dd03830b4368d14468a597d5617ccdb71d614331"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\energia.jpg",
|
||||
"sourceBytes": 386678,
|
||||
"original": "outputs/home-sectors-20261023/originals/energia.jpg",
|
||||
"sha256": "a164e2c8ef155a6a198ae400feca132e79ba75e022473893ec48ebfa0557f679",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/energia.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 81236,
|
||||
"sha256": "b5605d9bb8645c5042baa511aaf39fcb187080a48d8e067b130fc974c4c9196d"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/energia-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 21926,
|
||||
"sha256": "7e53977fc6ce11755455f8092ac3f8c7126f54d909a3935e522f8dae0ab834be"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\industria.jpg",
|
||||
"sourceBytes": 357131,
|
||||
"original": "outputs/home-sectors-20261023/originals/industria.jpg",
|
||||
"sha256": "d70c4257ac58a4b5e9f8b8b1a4cf6d98c0514043442c3ce46f5c98399038527f",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/industria.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 80422,
|
||||
"sha256": "ca8ddd2d65647f1ed7a9906271fa2ea3d027f310b89434fd7781a37a3d18322d"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/industria-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 25194,
|
||||
"sha256": "8bd695231209c0042b94e68b0e2095fa7202297708dabff0f78b337500b8c9b7"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\infraestruturas.jpg",
|
||||
"sourceBytes": 395383,
|
||||
"original": "outputs/home-sectors-20261023/originals/infraestruturas.jpg",
|
||||
"sha256": "ac6cde89507af68991faebee19540f955146724d3be901839b85a4098fe1674b",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/infraestruturas.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 86654,
|
||||
"sha256": "14754a59477e5c62a62c190be812c89d9616608b3c98acb6100ad70d94d34df0"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/infraestruturas-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 25772,
|
||||
"sha256": "eca58096087d05dae3eea2b4d063c103f9fc85b0ea20fc5051313cf9bfa1020f"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\logistica-transportes.jpg",
|
||||
"sourceBytes": 413702,
|
||||
"original": "outputs/home-sectors-20261023/originals/logistica-transportes.jpg",
|
||||
"sha256": "5976ead23da0d4e7d5debf875262f0229d389826aaeb7e7be4ebbac3f5129a9e",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/logistica-transportes.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 96254,
|
||||
"sha256": "0d235e7bbd160cccd3f97daa3337d6b27fde49db9782ad2ba0599c6a83022b6c"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/logistica-transportes-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 28816,
|
||||
"sha256": "32f5137e0a7f6a7894b186edb2ca38f12cdfdca04dda3588de3969fb3d2e333a"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\mineracao.jpg",
|
||||
"sourceBytes": 415161,
|
||||
"original": "outputs/home-sectors-20261023/originals/mineracao.jpg",
|
||||
"sha256": "7e6d1e5a17d434456ad937680a6c5501bd33bd624d2cc7ebf4b643185a9440aa",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/mineracao.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 96642,
|
||||
"sha256": "12c93df378f54108b13260c10d29789564af7844cc84bcd9281d2be917d83354"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/mineracao-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 26034,
|
||||
"sha256": "be3e7763fb8cd2e02f576204269821c40d93a7c155d8088a5084064b7269e4d6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\outros-sectores.jpg",
|
||||
"sourceBytes": 328152,
|
||||
"original": "outputs/home-sectors-20261023/originals/outros-sectores.jpg",
|
||||
"sha256": "4aaac0869dc7e61c4c7a87e1af95beb108aa9be0da082702f6f70722e62b1e7a",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/outros-sectores.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 75414,
|
||||
"sha256": "f47b3d0da5b0cd5153d393c6f779484ba89043e50195e968338108e893a88077"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/outros-sectores-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 24936,
|
||||
"sha256": "a4fc00551d75c96a1648ad4f81d759d4d6ecd7e6fc5689689216a96934bd1ea2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\servicos-financeiros.jpg",
|
||||
"sourceBytes": 348386,
|
||||
"original": "outputs/home-sectors-20261023/originals/servicos-financeiros.jpg",
|
||||
"sha256": "f932a56248d5544bff92aa30f4af3a5a63044c311969d4370d06f157b097d570",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/servicos-financeiros.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 72144,
|
||||
"sha256": "15379485db7de7b2efebe8bdbd4cbd8e911eb34ab8a23b3dd114c849bb4ae65c"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/servicos-financeiros-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 20698,
|
||||
"sha256": "c21949201e35e63625d3d2e7520e10912fe65be1186954142b2784f6efca51ed"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\tic-economia-digital.jpg",
|
||||
"sourceBytes": 417398,
|
||||
"original": "outputs/home-sectors-20261023/originals/tic-economia-digital.jpg",
|
||||
"sha256": "b09703bd079f55fb5a8ec3167ce96e1fdb1e5090813a81c817b9a33909427d94",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/tic-economia-digital.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 97892,
|
||||
"sha256": "b1d79c1a941085582d6a72799140bafed1bf38ec0201a4dfe5f6faf54ea55ae8"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/tic-economia-digital-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 28242,
|
||||
"sha256": "c4279a27ed402ca2feb62f11a8a954cbcae993912d3c8c27a2d9644fdf922114"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"source": "D:\\Projects\\Tempo_Investidor\\tempo-dashboard\\storage\\app\\public\\investor-portal\\sectors\\turismo.jpg",
|
||||
"sourceBytes": 393339,
|
||||
"original": "outputs/home-sectors-20261023/originals/turismo.jpg",
|
||||
"sha256": "1a76db252bc8c1a9dc1f3c650bd95e55337c36a6f604753d61cad96c19b1875f",
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/sectors/turismo.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 93234,
|
||||
"sha256": "de46707dfdd8b98c48ec88d19f3df0b1d6c130adfcbd97d5a7c2e6fa2db62bef"
|
||||
},
|
||||
{
|
||||
"file": "public/images/sectors/turismo-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 27012,
|
||||
"sha256": "4d3d9a04b9426474dca9ba8895021b48fffbe7e4d4a4551272b8c832cf83488e"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"assetMapping": {
|
||||
"agronegocio": "agronegocio",
|
||||
"turismo": "turismo",
|
||||
"infraestruturas": "infraestruturas",
|
||||
"economia-azul": "economia-azul",
|
||||
"mercado-financeiro": "servicos-financeiros",
|
||||
"mineracao": "mineracao",
|
||||
"energia-especifica": "energia",
|
||||
"imobiliario": "outros-sectores",
|
||||
"bens-de-consumo-e-franquias": "industria",
|
||||
"tecnologias-de-informacao": "tic-economia-digital"
|
||||
},
|
||||
"assetSource": "JPG locais do projecto de referência indicado pelo proprietário, inventariados e copiados sem alteração; WebP derivados para apresentação. Sem alegação adicional de licença externa, origem oficial ou localização documental. Imagem genérica reutilizada como alternativa funcional e para sectores sem imagem específica.",
|
||||
"assetBytes960": 997828,
|
||||
"assetBytes480": 289572,
|
||||
"verification": {
|
||||
"browser": {
|
||||
"results": [
|
||||
{
|
||||
"width": 320,
|
||||
"homeSectors": 5,
|
||||
"catalogueSectors": 10,
|
||||
"homeColumns": 2,
|
||||
"headings": [
|
||||
{
|
||||
"title": "Encontre o contexto do seu investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Sectores de investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Como Investir",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Oportunidades em destaque",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Documentos essenciais",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Apoio ao Investidor",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 390,
|
||||
"homeSectors": 5,
|
||||
"catalogueSectors": 10,
|
||||
"homeColumns": 2,
|
||||
"headings": [
|
||||
{
|
||||
"title": "Encontre o contexto do seu investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Sectores de investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Como Investir",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Oportunidades em destaque",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Documentos essenciais",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Apoio ao Investidor",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 768,
|
||||
"homeSectors": 5,
|
||||
"catalogueSectors": 10,
|
||||
"homeColumns": 3,
|
||||
"headings": [
|
||||
{
|
||||
"title": "Encontre o contexto do seu investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Sectores de investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Como Investir",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Oportunidades em destaque",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Documentos essenciais",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Apoio ao Investidor",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1024,
|
||||
"homeSectors": 5,
|
||||
"catalogueSectors": 10,
|
||||
"homeColumns": 5,
|
||||
"headings": [
|
||||
{
|
||||
"title": "Encontre o contexto do seu investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Sectores de investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Como Investir",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Oportunidades em destaque",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Documentos essenciais",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Apoio ao Investidor",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1440,
|
||||
"homeSectors": 5,
|
||||
"catalogueSectors": 10,
|
||||
"homeColumns": 5,
|
||||
"headings": [
|
||||
{
|
||||
"title": "Encontre o contexto do seu investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Sectores de investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Como Investir",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Oportunidades em destaque",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Documentos essenciais",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Apoio ao Investidor",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"width": 1920,
|
||||
"homeSectors": 5,
|
||||
"catalogueSectors": 10,
|
||||
"homeColumns": 5,
|
||||
"headings": [
|
||||
{
|
||||
"title": "Encontre o contexto do seu investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Sectores de investimento",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Como Investir",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Oportunidades em destaque",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Documentos essenciais",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
},
|
||||
{
|
||||
"title": "Apoio ao Investidor",
|
||||
"size": "24px",
|
||||
"weight": "700",
|
||||
"color": "rgb(237, 28, 36)",
|
||||
"lineHeight": "32px"
|
||||
}
|
||||
],
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"fail": "primary",
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"fail": "all",
|
||||
"status": "passed"
|
||||
},
|
||||
{
|
||||
"emptyCatalogue": true,
|
||||
"status": "passed"
|
||||
}
|
||||
],
|
||||
"errors": [],
|
||||
"navigation": [
|
||||
"/sectores",
|
||||
"/sectores",
|
||||
"/sectores",
|
||||
"/sectores",
|
||||
"/sectores",
|
||||
"/sectores/agronegocio",
|
||||
"/sectores",
|
||||
"/sectores/turismo",
|
||||
"/sectores",
|
||||
"/sectores/infraestruturas",
|
||||
"/sectores",
|
||||
"/sectores/economia-azul",
|
||||
"/sectores",
|
||||
"/sectores/mercado-financeiro",
|
||||
"/sectores",
|
||||
"/sectores/mineracao",
|
||||
"/sectores",
|
||||
"/sectores/energia-especifica",
|
||||
"/sectores",
|
||||
"/sectores/imobiliario",
|
||||
"/sectores",
|
||||
"/sectores/bens-de-consumo-e-franquias",
|
||||
"/sectores",
|
||||
"/sectores/tecnologias-de-informacao",
|
||||
"/sectores",
|
||||
"/sectores/mercado-financeiro/fintech",
|
||||
"/sectores",
|
||||
"/",
|
||||
"/sectores",
|
||||
"/sectores"
|
||||
],
|
||||
"databaseAccess": false
|
||||
},
|
||||
"script": "tools/portal-home-sectors-qa.mjs",
|
||||
"screenshots": [
|
||||
"outputs/home-sectors-20261023/catalogue-1024.png",
|
||||
"outputs/home-sectors-20261023/catalogue-1440.png",
|
||||
"outputs/home-sectors-20261023/catalogue-1920.png",
|
||||
"outputs/home-sectors-20261023/catalogue-320.png",
|
||||
"outputs/home-sectors-20261023/catalogue-390.png",
|
||||
"outputs/home-sectors-20261023/catalogue-768.png",
|
||||
"outputs/home-sectors-20261023/fallback-all.png",
|
||||
"outputs/home-sectors-20261023/fallback-primary.png",
|
||||
"outputs/home-sectors-20261023/home-sectors-1024.png",
|
||||
"outputs/home-sectors-20261023/home-sectors-1440.png",
|
||||
"outputs/home-sectors-20261023/home-sectors-1920.png",
|
||||
"outputs/home-sectors-20261023/home-sectors-320.png",
|
||||
"outputs/home-sectors-20261023/home-sectors-390.png",
|
||||
"outputs/home-sectors-20261023/home-sectors-768.png",
|
||||
"outputs/home-sectors-20261023/homepage-1440.png"
|
||||
],
|
||||
"existingFrontendTests": {
|
||||
"command": "node --test tests/frontend/portal-api.test.mjs tests/frontend/portal-navigation.test.mjs",
|
||||
"passed": 20
|
||||
},
|
||||
"types": {
|
||||
"command": "npm run types:check",
|
||||
"exitCode": 0
|
||||
},
|
||||
"lint": {
|
||||
"exitCode": 0
|
||||
},
|
||||
"build": {
|
||||
"command": "npm run build",
|
||||
"exitCode": 0,
|
||||
"assets": {
|
||||
"resources/js/pages/PortalInvestidor.tsx": "assets/PortalInvestidor-Q1OJxvfZ.js",
|
||||
"resources/js/pages/portal/services.tsx": "assets/services-DiuG4Zkv.js"
|
||||
},
|
||||
"log": "outputs/home-sectors-20261023/build-local.log"
|
||||
}
|
||||
},
|
||||
"scope": {
|
||||
"appliedLocally": true,
|
||||
"databaseChanged": false,
|
||||
"migrationsRun": false,
|
||||
"businessRulesChanged": false,
|
||||
"routesChanged": false,
|
||||
"sourceProjectChanged": false,
|
||||
"newDependencies": false,
|
||||
"externalDeployment": false
|
||||
},
|
||||
"limits": "Interface e navegação exercitadas com API e páginas públicas em fixtures; não equivale a demonstração integral dos workflows operacionais ou de critérios mais amplos da matriz.",
|
||||
"matrixReferences": [
|
||||
"MASTER-efd550fd-0104",
|
||||
"MASTER-9f5719c8-0077"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,406 @@
|
||||
{
|
||||
"date": "2026-10-23",
|
||||
"decision": "Pedido expresso da Tempo: analisar e acrescentar imagens adequadas exclusivamente aos três cartões de Como Investir.",
|
||||
"analysisAndPlan": "docs/investmoz/public-portal-sections.md#fotografias-nas-etapas-de-como-investir--23102026",
|
||||
"source": {
|
||||
"type": "Fotografias ilustrativas geradas por IA, sem atribuição a pessoas, instituições, locais ou projectos reais.",
|
||||
"tool": "image_gen, modo integrado",
|
||||
"skill": "C:/Users/jorge/.codex/skills/.system/imagegen/SKILL.md",
|
||||
"externalPhotographsUsed": false
|
||||
},
|
||||
"images": [
|
||||
{
|
||||
"key": "explorar",
|
||||
"prompt": "Use case: photorealistic-natural. Asset for a small navigation card on a Mozambique investor portal. Create one individual photorealistic editorial photograph, horizontal 16:9, professional restrained style, natural soft daylight, realistic skin and materials, neutral colors, documentary composition readable at 350px wide. Illustration of a plausible setting, no identifiable named project or official building. No text, lettering, logos, watermarks, flags, maps, diagrams, graphic overlays, montage, or advertisement styling. Keep main subject inside the central 80% for responsive crop. Stage 1 EXPLORE opportunities, sector and territory: two Mozambican business professionals, a woman and man in smart casual clothing, standing outdoors by a quiet access road at a modest business park, naturally discussing a tablet held by the woman. Generic unbranded low warehouse buildings and green productive land visible in background, credible southern African environment. Eye-level medium-wide candid composition, both people three-quarter view, looking at tablet and surroundings rather than camera. Business evaluation and discovery, no construction work or hard hats.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-42eb9338-4350-40bf-9098-858c12994189.png",
|
||||
"original": "outputs/investment-steps-20261023/originals/explorar.png",
|
||||
"originalSha256": "a3c4ec1a0d2deaf87e0c8e765616c74ab70067eade9a862effce9e6befbbccb6",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-steps/explorar.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 52266,
|
||||
"sha256": "c3e151ae649ce3cb66f5babc39978fa5803d320cacc95a27e798db4ec2d45a4c"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-steps/explorar-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 19312,
|
||||
"sha256": "d3f383d9a58b23fada37472ea853f985aca8c3146123747d777b27704d32c7e0"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-steps/explorar-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 5300,
|
||||
"sha256": "ba12ac4d2e81ac8a2c2e681667ccb08a3abfdba24de39e6e942d6378b700f2a9"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "preparar",
|
||||
"prompt": "Use case: photorealistic-natural. Asset for a small navigation card on a Mozambique investor portal. Create one individual photorealistic editorial photograph, horizontal 16:9, professional restrained style, natural soft daylight, realistic skin and materials, neutral colors, documentary composition readable at 350px wide. Illustration of a plausible setting, no identifiable named project or official building. No text, lettering, logos, watermarks, flags, maps, diagrams, graphic overlays, montage, or advertisement styling. Keep main subject inside the central 80% for responsive crop. Stage 2 PREPARE investment and organize documents: a Mozambican woman entrepreneur and a male business adviser seated at a light wood office desk, calmly reviewing and sorting a small tidy set of document folders and loose sheets beside a closed laptop. One points to a page while the other organizes a folder. No visible readable writing or personal data; papers at an angle. Bright modest professional meeting room, view from slightly above table height, hands and folders clear in foreground, natural candid interaction, realistic anatomy.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-5f07618a-1e86-42d9-aaf8-3acd0abf2164.png",
|
||||
"original": "outputs/investment-steps-20261023/originals/preparar.png",
|
||||
"originalSha256": "679a6875bb3ec79a9b71c27c9d785334376746be2bb305f461db9e19b0a0b7ea",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-steps/preparar.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 57942,
|
||||
"sha256": "6de28042d3abce238a3680fb878779682f3672c3feb97b7e42b72e9a0a0ffbac"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-steps/preparar-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 19950,
|
||||
"sha256": "671ba0fc207f85833b91027d3f6dad91599e95702cfea439e558906f92a2bfac"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-steps/preparar-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 6008,
|
||||
"sha256": "645b34cd60b31fdc8e6586dedb71061c08add9ff985ce90909333b0bd1e0aa3e"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "acompanhar",
|
||||
"prompt": "Use case: photorealistic-natural. Asset for a small navigation card on a Mozambique investor portal. Create one individual photorealistic editorial photograph, horizontal 16:9, professional restrained style, natural soft daylight, realistic skin and materials, neutral colors, documentary composition readable at 350px wide. Illustration of a plausible setting, no identifiable named project or official building. No text, lettering, logos, watermarks, flags, maps, diagrams, graphic overlays, montage, or advertisement styling. Keep main subject inside the central 80% for responsive crop. Stage 3 FOLLOW UP submitted request and protocol: a Mozambican male entrepreneur seated at a tidy desk using a laptop to check an online application, one hand naturally on trackpad, a small closed document folder nearby. Three-quarter side view showing focused face and laptop, warm daylight from side window, modest contemporary office with soft greenery out of focus. Laptop screen is oblique and softly out of focus with only indistinct neutral interface rows, no readable text, official seal, logo or invented dashboard details. Convey calm digital self-service and progress checking, not a call centre or signing documents.",
|
||||
"source": "C:\\Users\\jorge\\.codex\\generated_images\\01a167bd-3f26-71a0-8ec3-3f17519d2bfd\\exec-f896c5f8-19a0-49b0-af8e-0d12bfe4c7aa.png",
|
||||
"original": "outputs/investment-steps-20261023/originals/acompanhar.png",
|
||||
"originalSha256": "17d453445f2afb4c7641909950d2ecfb8276c433a4e28eeee94d0a57d1bdad46",
|
||||
"originalDimensions": {
|
||||
"width": 1672,
|
||||
"height": 941
|
||||
},
|
||||
"derivatives": [
|
||||
{
|
||||
"file": "public/images/investment-steps/acompanhar.webp",
|
||||
"width": 960,
|
||||
"height": 540,
|
||||
"bytes": 43722,
|
||||
"sha256": "fe764c8161de36ee597f856face5341260670d1a28ab482bd01a0f5120ad0588"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-steps/acompanhar-480.webp",
|
||||
"width": 480,
|
||||
"height": 270,
|
||||
"bytes": 16176,
|
||||
"sha256": "79ceaecb0ef23c6729e43d04b7e91493d6784ea9f658d540dda3550702dc3623"
|
||||
},
|
||||
{
|
||||
"file": "public/images/investment-steps/acompanhar-fallback.webp",
|
||||
"width": 240,
|
||||
"height": 135,
|
||||
"bytes": 5298,
|
||||
"sha256": "cd4530cfef4f19f23f640ceae59cfd73d0ee269643118b458f2a4748f5845fc6"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"cards": [
|
||||
{
|
||||
"title": "1. Explorar",
|
||||
"description": "Identifique o sector, território e oportunidade.",
|
||||
"href": "/oportunidades",
|
||||
"image": "explorar"
|
||||
},
|
||||
{
|
||||
"title": "2. Preparar",
|
||||
"description": "Conheça o percurso e organize os documentos.",
|
||||
"href": "/como-investir",
|
||||
"image": "preparar"
|
||||
},
|
||||
{
|
||||
"title": "3. Acompanhar",
|
||||
"description": "Envie o pedido e acompanhe o protocolo.",
|
||||
"href": "/balcao-virtual",
|
||||
"image": "acompanhar"
|
||||
}
|
||||
],
|
||||
"presentation": {
|
||||
"component": "resources/js/components/investment-steps.tsx",
|
||||
"homeIntegration": "resources/js/pages/PortalInvestidor.tsx",
|
||||
"aspectRatio": "16:9",
|
||||
"responsiveImages": [
|
||||
960,
|
||||
480
|
||||
],
|
||||
"fallback": "Variante própria de 240 px; se também falhar, espaço reservado com descrição acessível e Imagem indisponível.",
|
||||
"columns": "Uma coluna abaixo de 768 px, três a partir de 768 px.",
|
||||
"compactText": "16 px de preenchimento, sem altura mínima de texto.",
|
||||
"accessibility": "Alt em português, nomes e descrições das âncoras, foco visível, dimensões reservadas e loading lazy.",
|
||||
"headings": "Título vermelho partilhado da home preservado."
|
||||
},
|
||||
"verification": {
|
||||
"browser": {
|
||||
"results": [
|
||||
{
|
||||
"width": 320,
|
||||
"dpr": 1,
|
||||
"fail": "none",
|
||||
"columns": 1,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/explorar-480.webp",
|
||||
"alt": "Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7820512820512822
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/preparar-480.webp",
|
||||
"alt": "Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7820512820512822
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/acompanhar-480.webp",
|
||||
"alt": "Empreendedor consulta um pedido no computador portátil numa secretária de escritório.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7820512820512822
|
||||
}
|
||||
],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
},
|
||||
{
|
||||
"width": 390,
|
||||
"dpr": 2,
|
||||
"fail": "none",
|
||||
"columns": 1,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/explorar.webp",
|
||||
"alt": "Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7755102040816326
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/preparar.webp",
|
||||
"alt": "Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7755102040816326
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/acompanhar.webp",
|
||||
"alt": "Empreendedor consulta um pedido no computador portátil numa secretária de escritório.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7755102040816326
|
||||
}
|
||||
],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
},
|
||||
{
|
||||
"width": 768,
|
||||
"dpr": 1,
|
||||
"fail": "none",
|
||||
"columns": 3,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/explorar-480.webp",
|
||||
"alt": "Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7734375
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/preparar-480.webp",
|
||||
"alt": "Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7734375
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/acompanhar-480.webp",
|
||||
"alt": "Empreendedor consulta um pedido no computador portátil numa secretária de escritório.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7734375
|
||||
}
|
||||
],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
},
|
||||
{
|
||||
"width": 1024,
|
||||
"dpr": 1,
|
||||
"fail": "none",
|
||||
"columns": 3,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/explorar-480.webp",
|
||||
"alt": "Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7784090909090908
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/preparar-480.webp",
|
||||
"alt": "Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7784090909090908
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/acompanhar-480.webp",
|
||||
"alt": "Empreendedor consulta um pedido no computador portátil numa secretária de escritório.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7784090909090908
|
||||
}
|
||||
],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
},
|
||||
{
|
||||
"width": 1440,
|
||||
"dpr": 2,
|
||||
"fail": "none",
|
||||
"columns": 3,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/explorar.webp",
|
||||
"alt": "Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.775
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/preparar.webp",
|
||||
"alt": "Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.775
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/acompanhar.webp",
|
||||
"alt": "Empreendedor consulta um pedido no computador portátil numa secretária de escritório.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.775
|
||||
}
|
||||
],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
},
|
||||
{
|
||||
"width": 1920,
|
||||
"dpr": 1,
|
||||
"fail": "none",
|
||||
"columns": 3,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/explorar-480.webp",
|
||||
"alt": "Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.775
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/preparar-480.webp",
|
||||
"alt": "Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.775
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/acompanhar-480.webp",
|
||||
"alt": "Empreendedor consulta um pedido no computador portátil numa secretária de escritório.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.775
|
||||
}
|
||||
],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
},
|
||||
{
|
||||
"width": 390,
|
||||
"dpr": 2,
|
||||
"fail": "primary",
|
||||
"columns": 1,
|
||||
"photos": [
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/explorar-fallback.webp",
|
||||
"alt": "Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7755102040816326
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/preparar-fallback.webp",
|
||||
"alt": "Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7755102040816326
|
||||
},
|
||||
{
|
||||
"src": "http://127.0.0.1:5174/images/investment-steps/acompanhar-fallback.webp",
|
||||
"alt": "Empreendedor consulta um pedido no computador portátil numa secretária de escritório.",
|
||||
"lazy": "lazy",
|
||||
"ratio": 1.7755102040816326
|
||||
}
|
||||
],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
},
|
||||
{
|
||||
"width": 390,
|
||||
"dpr": 2,
|
||||
"fail": "all",
|
||||
"columns": 1,
|
||||
"photos": [],
|
||||
"layoutShift": false,
|
||||
"overflow": false
|
||||
}
|
||||
],
|
||||
"errors": [],
|
||||
"navigation": [
|
||||
"/oportunidades",
|
||||
"/como-investir",
|
||||
"/balcao-virtual"
|
||||
],
|
||||
"databaseAccess": false
|
||||
},
|
||||
"script": "outputs/investment-steps-20261023/check.mjs",
|
||||
"screenshots": [
|
||||
"outputs/investment-steps-20261023/cards-1024-none.png",
|
||||
"outputs/investment-steps-20261023/cards-1440-none.png",
|
||||
"outputs/investment-steps-20261023/cards-1920-none.png",
|
||||
"outputs/investment-steps-20261023/cards-320-none.png",
|
||||
"outputs/investment-steps-20261023/cards-390-all.png",
|
||||
"outputs/investment-steps-20261023/cards-390-none.png",
|
||||
"outputs/investment-steps-20261023/cards-390-primary.png",
|
||||
"outputs/investment-steps-20261023/cards-768-none.png"
|
||||
],
|
||||
"lint": {
|
||||
"exitCode": 0
|
||||
},
|
||||
"types": {
|
||||
"command": "npm run types:check",
|
||||
"exitCode": 0,
|
||||
"log": "outputs/investment-steps-20261023/types.log"
|
||||
},
|
||||
"build": {
|
||||
"command": "npm run build",
|
||||
"exitCode": 0,
|
||||
"homeAsset": "assets/PortalInvestidor-C1QTZ3-t.js",
|
||||
"log": "outputs/investment-steps-20261023/build-local.log"
|
||||
}
|
||||
},
|
||||
"scope": {
|
||||
"appliedLocally": true,
|
||||
"otherSectionsChanged": false,
|
||||
"supportAndFooterChanged": false,
|
||||
"databaseAccess": false,
|
||||
"businessRulesChanged": false,
|
||||
"routesChanged": false,
|
||||
"newDependencies": false,
|
||||
"externalDeployment": false
|
||||
},
|
||||
"matrixReferences": [
|
||||
"MASTER-efd550fd-0104"
|
||||
],
|
||||
"limits": "Componentes reais com API sintética e destinos interceptados para verificar a navegação; não demonstra os workflows operacionais completos nem encerra o critério mais amplo da matriz."
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
@@ -0,0 +1,175 @@
|
||||
import { useState } from 'react';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import {
|
||||
HOME_SECTION,
|
||||
HOME_SECTION_HEADING,
|
||||
PORTAL_MORE_LINK,
|
||||
} from '@/lib/portal-presentation';
|
||||
|
||||
const contexts = [
|
||||
{
|
||||
key: 'clusters',
|
||||
href: '/clusters',
|
||||
title: 'Clusters',
|
||||
description: 'Cadeias de valor e lacunas produtivas.',
|
||||
image: 'clusters-agroindustria',
|
||||
alt: 'Triagem de produtos agrícolas numa unidade de transformação com área de cultivo ao fundo.',
|
||||
},
|
||||
{
|
||||
key: 'corredores',
|
||||
href: '/corredores',
|
||||
title: 'Corredores',
|
||||
description: 'Territórios, logística e conexões.',
|
||||
image: 'corredores-logisticos-v2',
|
||||
alt: 'Terminal de mercadorias junto à água, com contentores, uma grua e vias de acesso.',
|
||||
},
|
||||
{
|
||||
key: 'projectos',
|
||||
href: '/projectos-ancora',
|
||||
title: 'Projectos âncora',
|
||||
description: 'Projectos estruturantes e relações.',
|
||||
image: 'projectos-ancora',
|
||||
alt: 'Equipa de engenharia acompanha o planeamento de uma instalação de energia solar.',
|
||||
},
|
||||
{
|
||||
key: 'educacao',
|
||||
href: '/educacao',
|
||||
title: 'Educação',
|
||||
description: 'Investimentos em competências e formação.',
|
||||
image: 'educacao-formacao',
|
||||
alt: 'Jovens desenvolvem competências de electrónica e informática numa aula de formação técnica.',
|
||||
},
|
||||
{
|
||||
key: 'documentos',
|
||||
href: '/documentos',
|
||||
title: 'Documentos e Formulários',
|
||||
description:
|
||||
'Legislação, procedimentos, formulários e materiais de apoio.',
|
||||
image: 'documentos-formularios',
|
||||
alt: 'Profissional analisa documentação empresarial organizada numa secretária de escritório.',
|
||||
},
|
||||
];
|
||||
|
||||
function ContextImage({
|
||||
image,
|
||||
alt,
|
||||
preview,
|
||||
}: {
|
||||
image: string;
|
||||
alt: string;
|
||||
preview: boolean;
|
||||
}) {
|
||||
const [fallback, setFallback] = useState(0);
|
||||
const base = `/images/investment-context/${image}`;
|
||||
|
||||
return (
|
||||
<div className="aspect-video w-full shrink-0 overflow-hidden bg-slate-100">
|
||||
{fallback < 2 ? (
|
||||
<img
|
||||
src={`${base}${fallback ? '-fallback' : ''}.webp`}
|
||||
srcSet={
|
||||
fallback
|
||||
? undefined
|
||||
: `${base}-480.webp 480w, ${base}.webp 960w`
|
||||
}
|
||||
sizes={
|
||||
preview
|
||||
? '(min-width: 1152px) 266px, (min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw'
|
||||
: '(min-width: 1152px) 357px, (min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw'
|
||||
}
|
||||
alt={alt}
|
||||
width={960}
|
||||
height={540}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-full w-full object-cover object-center"
|
||||
onError={() =>
|
||||
setFallback((current) => Math.min(current + 1, 2))
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
role="img"
|
||||
aria-label={alt}
|
||||
className="flex h-full items-center justify-center px-5 text-center text-sm text-slate-600"
|
||||
>
|
||||
Imagem indisponível
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function InvestmentContextGrid({
|
||||
preview = false,
|
||||
}: {
|
||||
preview?: boolean;
|
||||
}) {
|
||||
const visibleContexts = preview ? contexts.slice(0, 4) : contexts;
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="Contextos de investimento"
|
||||
className={
|
||||
preview
|
||||
? 'grid gap-4 sm:grid-cols-2 lg:grid-cols-4'
|
||||
: 'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'
|
||||
}
|
||||
>
|
||||
{visibleContexts.map((context) => (
|
||||
<a
|
||||
key={context.key}
|
||||
href={context.href}
|
||||
aria-labelledby={`context-${context.key}-title`}
|
||||
aria-describedby={`context-${context.key}-description`}
|
||||
className="flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-colors hover:border-blue-700 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-700"
|
||||
>
|
||||
<ContextImage
|
||||
image={context.image}
|
||||
alt={context.alt}
|
||||
preview={preview}
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-1.5 p-4">
|
||||
<h3
|
||||
id={`context-${context.key}-title`}
|
||||
className="text-lg leading-6 font-bold text-slate-900"
|
||||
>
|
||||
{context.title}
|
||||
</h3>
|
||||
<p
|
||||
id={`context-${context.key}-description`}
|
||||
className="text-sm leading-5 text-slate-600"
|
||||
>
|
||||
{context.description}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default function InvestmentContextCards() {
|
||||
return (
|
||||
<section
|
||||
aria-labelledby="investment-context-heading"
|
||||
className={`${HOME_SECTION} space-y-4`}
|
||||
>
|
||||
<h2
|
||||
id="investment-context-heading"
|
||||
className={HOME_SECTION_HEADING}
|
||||
>
|
||||
Encontre o contexto do seu investimento
|
||||
</h2>
|
||||
<InvestmentContextGrid preview />
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
href="/contextos-de-investimento"
|
||||
className={PORTAL_MORE_LINK}
|
||||
>
|
||||
Ver mais <ArrowRight size={14} aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useState } from 'react';
|
||||
import { HOME_SECTION, HOME_SECTION_HEADING } from '@/lib/portal-presentation';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
key: 'explorar',
|
||||
title: '1. Explorar',
|
||||
description: 'Identifique o sector, território e oportunidade.',
|
||||
href: '/oportunidades',
|
||||
alt: 'Dois profissionais avaliam uma oportunidade de investimento no terreno com apoio de um tablet.',
|
||||
},
|
||||
{
|
||||
key: 'preparar',
|
||||
title: '2. Preparar',
|
||||
description: 'Conheça o percurso e organize os documentos.',
|
||||
href: '/como-investir',
|
||||
alt: 'Empreendedora e consultor analisam documentos e organizam pastas numa reunião de preparação.',
|
||||
},
|
||||
{
|
||||
key: 'acompanhar',
|
||||
title: '3. Acompanhar',
|
||||
description: 'Envie o pedido e acompanhe o protocolo.',
|
||||
href: '/balcao-virtual',
|
||||
alt: 'Empreendedor consulta um pedido no computador portátil numa secretária de escritório.',
|
||||
},
|
||||
];
|
||||
|
||||
function StepImage({ name, alt }: { name: string; alt: string }) {
|
||||
const [fallback, setFallback] = useState(0);
|
||||
const base = `/images/investment-steps/${name}`;
|
||||
|
||||
return (
|
||||
<div className="aspect-video w-full shrink-0 overflow-hidden bg-slate-100">
|
||||
{fallback < 2 ? (
|
||||
<img
|
||||
src={`${base}${fallback ? '-fallback' : ''}.webp`}
|
||||
srcSet={
|
||||
fallback
|
||||
? undefined
|
||||
: `${base}-480.webp 480w, ${base}.webp 960w`
|
||||
}
|
||||
sizes="(min-width: 1152px) 357px, (min-width: 768px) 33vw, 100vw"
|
||||
alt={alt}
|
||||
width={960}
|
||||
height={540}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-full w-full object-cover object-center"
|
||||
onError={() =>
|
||||
setFallback((current) => Math.min(current + 1, 2))
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
role="img"
|
||||
aria-label={alt}
|
||||
className="flex h-full items-center justify-center px-4 text-center text-sm text-slate-600"
|
||||
>
|
||||
Imagem indisponível
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function InvestmentSteps() {
|
||||
return (
|
||||
<section
|
||||
aria-labelledby="investment-steps-heading"
|
||||
className={`${HOME_SECTION} space-y-4`}
|
||||
>
|
||||
<h2 id="investment-steps-heading" className={HOME_SECTION_HEADING}>
|
||||
Como Investir
|
||||
</h2>
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
{steps.map((step) => (
|
||||
<a
|
||||
key={step.key}
|
||||
href={step.href}
|
||||
aria-labelledby={`step-${step.key}-title`}
|
||||
aria-describedby={`step-${step.key}-description`}
|
||||
className="flex h-full min-w-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-colors hover:border-[#ed1c24] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#ed1c24]"
|
||||
>
|
||||
<StepImage name={step.key} alt={step.alt} />
|
||||
<div className="space-y-1.5 p-4">
|
||||
<h3
|
||||
id={`step-${step.key}-title`}
|
||||
className="text-lg leading-6 font-bold text-slate-900"
|
||||
>
|
||||
{step.title}
|
||||
</h3>
|
||||
<p
|
||||
id={`step-${step.key}-description`}
|
||||
className="text-sm leading-5 text-slate-600"
|
||||
>
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
HOME_SECTION,
|
||||
HOME_SECTION_HEADING,
|
||||
PORTAL_MORE_LINK,
|
||||
} from '@/lib/portal-presentation';
|
||||
|
||||
export type PublicSector = {
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
opportunitiesCount: number;
|
||||
url?: string;
|
||||
specializations?: { id: number; name: string; url: string }[];
|
||||
};
|
||||
|
||||
const images: Record<string, string> = {
|
||||
agronegocio: 'agronegocio',
|
||||
turismo: 'turismo',
|
||||
infraestruturas: 'infraestruturas',
|
||||
'economia-azul': 'economia-azul',
|
||||
'mercado-financeiro': 'servicos-financeiros',
|
||||
'servicos-financeiros': 'servicos-financeiros',
|
||||
fintech: 'tic-economia-digital',
|
||||
mineracao: 'mineracao',
|
||||
energia: 'energia',
|
||||
'energia-especifica': 'energia',
|
||||
imobiliario: 'outros-sectores',
|
||||
'bens-de-consumo-e-franquias': 'industria',
|
||||
'bens-de-consumo-franquias': 'industria',
|
||||
'tecnologias-de-informacao': 'tic-economia-digital',
|
||||
'tic-economia-digital': 'tic-economia-digital',
|
||||
industria: 'industria',
|
||||
'logistica-transportes': 'logistica-transportes',
|
||||
};
|
||||
|
||||
const imageDescriptions: Record<string, string> = {
|
||||
agronegocio: 'Campos agrícolas e instalações de transformação de produtos.',
|
||||
turismo: 'Alojamento turístico junto à costa e à vegetação tropical.',
|
||||
infraestruturas: 'Ponte rodoviária sobre um rio, ligando áreas urbanas.',
|
||||
'economia-azul': 'Actividades de pesca e aquacultura numa zona costeira.',
|
||||
'servicos-financeiros':
|
||||
'Edifícios empresariais e serviços num espaço urbano.',
|
||||
mineracao:
|
||||
'Exploração mineira a céu aberto com instalações de processamento.',
|
||||
energia:
|
||||
'Painéis solares e infra-estruturas de transporte de electricidade.',
|
||||
industria:
|
||||
'Unidade industrial com área de armazenagem e movimentação de mercadorias.',
|
||||
'tic-economia-digital':
|
||||
'Infra-estruturas de telecomunicações num ambiente urbano.',
|
||||
'logistica-transportes':
|
||||
'Terminal portuário com contentores e transporte ferroviário.',
|
||||
'outros-sectores': 'Espaço empresarial e edifícios urbanos ao fundo.',
|
||||
};
|
||||
|
||||
function SectorImage({ slug, preview }: { slug: string; preview: boolean }) {
|
||||
const [failed, setFailed] = useState(0);
|
||||
const image = failed
|
||||
? 'outros-sectores'
|
||||
: (images[slug] ?? 'outros-sectores');
|
||||
const base = `/images/sectors/${image}`;
|
||||
if (failed > 1) return <span className="absolute inset-0 bg-slate-800" />;
|
||||
return (
|
||||
<img
|
||||
src={`${base}.webp`}
|
||||
srcSet={`${base}-480.webp 480w, ${base}.webp 960w`}
|
||||
sizes={
|
||||
preview
|
||||
? '(min-width: 1152px) 266px, (min-width: 1024px) 25vw, 50vw'
|
||||
: '(min-width: 1152px) 357px, (min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw'
|
||||
}
|
||||
width={960}
|
||||
height={540}
|
||||
alt={imageDescriptions[image]}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105"
|
||||
onError={() => setFailed((current) => Math.min(current + 1, 2))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function PublicSectorCards({
|
||||
sectors,
|
||||
preview = false,
|
||||
}: {
|
||||
sectors: PublicSector[];
|
||||
preview?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
preview
|
||||
? 'grid grid-cols-2 gap-4 lg:grid-cols-4'
|
||||
: 'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'
|
||||
}
|
||||
>
|
||||
{sectors.map((sector) => {
|
||||
const href =
|
||||
sector.url ??
|
||||
`/sectores/${sector.slug.split('/').map(encodeURIComponent).join('/')}`;
|
||||
const titleId = `public-sector-${sector.slug.replaceAll('/', '-')}`;
|
||||
return (
|
||||
<article
|
||||
key={sector.slug}
|
||||
className="group flex min-w-0 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-colors hover:border-[#ed1c24]"
|
||||
>
|
||||
<a
|
||||
href={href}
|
||||
aria-labelledby={titleId}
|
||||
className="relative block h-40 shrink-0 overflow-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#ed1c24] sm:h-44"
|
||||
>
|
||||
<SectorImage slug={sector.slug} preview={preview} />
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 bg-linear-to-t from-black/85 via-black/20 to-transparent"
|
||||
/>
|
||||
<h3
|
||||
id={titleId}
|
||||
className="absolute right-3 bottom-3 left-3 text-sm leading-5 font-bold wrap-break-word text-white drop-shadow-lg min-[375px]:text-base sm:text-lg sm:leading-6"
|
||||
>
|
||||
{sector.name}
|
||||
</h3>
|
||||
</a>
|
||||
<div className="flex flex-1 flex-col gap-2 p-3 sm:p-4">
|
||||
{sector.description && (
|
||||
<p className="line-clamp-3 text-sm leading-5 wrap-break-word text-slate-600">
|
||||
{sector.description}
|
||||
</p>
|
||||
)}
|
||||
{sector.specializations?.map((child) => (
|
||||
<a
|
||||
key={child.id}
|
||||
href={child.url}
|
||||
className="text-xs font-semibold text-slate-700 underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-[#ed1c24]"
|
||||
>
|
||||
Especialização:{' '}
|
||||
{child.name.replace(
|
||||
'Mercado Financeiro — ',
|
||||
'',
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
<div className="mt-auto pt-1">
|
||||
<p className="text-xs leading-5 text-slate-500">
|
||||
{sector.opportunitiesCount} oportunidade
|
||||
{sector.opportunitiesCount === 1 ? '' : 's'}
|
||||
</p>
|
||||
<a
|
||||
href={href}
|
||||
aria-label={`Ler mais sobre ${sector.name}`}
|
||||
className="inline-flex min-h-11 items-center gap-1.5 text-xs font-bold text-[#ed1c24] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ed1c24]"
|
||||
>
|
||||
Ler mais{' '}
|
||||
<ArrowRight size={14} aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HomepageSectors({ sectors }: { sectors: PublicSector[] }) {
|
||||
return (
|
||||
<section
|
||||
aria-labelledby="home-sectors-heading"
|
||||
className={HOME_SECTION}
|
||||
>
|
||||
<h2 id="home-sectors-heading" className={HOME_SECTION_HEADING}>
|
||||
Sectores de investimento
|
||||
</h2>
|
||||
<p className="mt-2 max-w-2xl text-slate-600">
|
||||
Explore as áreas prioritárias do programa de investimento
|
||||
nacional.
|
||||
</p>
|
||||
<div className="mt-5">
|
||||
<PublicSectorCards sectors={sectors.slice(0, 4)} preview />
|
||||
{!sectors.length && (
|
||||
<p className="text-slate-600">
|
||||
Não existem sectores publicados.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-5 flex justify-center">
|
||||
<a href="/sectores" className={PORTAL_MORE_LINK}>
|
||||
Ver mais sectores{' '}
|
||||
<ArrowRight size={14} aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -25,6 +25,7 @@ export const portalLinks = [
|
||||
['/apoio', 'Apoio ao Investidor'],
|
||||
] as const;
|
||||
const names: Record<string, string> = {
|
||||
'/contextos-de-investimento': 'Contextos de investimento',
|
||||
'/sobre': 'Sobre nós',
|
||||
'/contacto': 'Contacto',
|
||||
'/politica-de-privacidade': 'Política de Privacidade',
|
||||
@@ -176,11 +177,11 @@ export default function PortalNavigation({
|
||||
</div>
|
||||
<aside
|
||||
aria-label="Contacto de apoio ao investidor"
|
||||
className={printable ? 'print:hidden' : undefined}
|
||||
className={`mx-auto flex max-w-6xl justify-center px-5 pt-4 ${printable ? 'print:hidden' : ''}`}
|
||||
>
|
||||
<a
|
||||
href="/apoio"
|
||||
className="mx-3 mt-4 block max-w-[calc(100%-1.5rem)] rounded-xl bg-emerald-800 px-5 py-3 text-center text-sm font-semibold text-white shadow-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-emerald-600"
|
||||
className="inline-flex min-h-11 max-w-full items-center justify-center rounded-lg bg-[#ed1c24] px-4 py-2 text-center text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[#c9141b] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#ed1c24]"
|
||||
>
|
||||
Contactar Apoio ao Investidor
|
||||
</a>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export type Sector = {
|
||||
url?: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
specializations?: { id: number; name: string; slug: string; url: string }[];
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
export const HOME_SECTION_HEADING =
|
||||
'text-2xl leading-8 font-bold text-slate-900';
|
||||
|
||||
export const HOME_SECTION = 'mx-auto max-w-6xl px-5 py-5 sm:py-6';
|
||||
|
||||
export const HOME_SECTION_BAND =
|
||||
'border-t border-slate-200 bg-white py-5 sm:py-6';
|
||||
|
||||
export const PORTAL_MORE_LINK =
|
||||
'inline-flex min-h-11 items-center justify-center gap-1.5 rounded-full border border-[#ed1c24] bg-white px-5 py-2 text-xs font-bold text-[#ed1c24] transition-colors hover:bg-[#ed1c24] hover:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#ed1c24]';
|
||||
@@ -1,3 +1,11 @@
|
||||
import { HomepageSectors } from '@/components/public-sector-cards';
|
||||
import {
|
||||
HOME_SECTION,
|
||||
HOME_SECTION_BAND,
|
||||
HOME_SECTION_HEADING,
|
||||
} from '@/lib/portal-presentation';
|
||||
import InvestmentContextCards from '@/components/investment-context-cards';
|
||||
import InvestmentSteps from '@/components/investment-steps';
|
||||
import PortalHero from '@/components/portal-hero';
|
||||
import SearchState from '@/components/search-state';
|
||||
import { useInterestDraft } from '@/hooks/use-interest-draft';
|
||||
@@ -8,7 +16,6 @@ import { ProvinceSelect } from '@/components/investment-territory';
|
||||
import { MATURITY_LEVELS } from '@/lib/investment-maturity';
|
||||
import CountrySelect, { type Country } from '@/components/country-select';
|
||||
import type { Dispatch, FormEvent, ReactNode, SetStateAction } from 'react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { usePortalQuery } from '@/hooks/use-portal-query';
|
||||
import {
|
||||
PortalApiError,
|
||||
@@ -31,28 +38,20 @@ import type {
|
||||
Sector,
|
||||
} from '@/lib/portal-api';
|
||||
import {
|
||||
Leaf,
|
||||
Zap,
|
||||
Hotel,
|
||||
Truck,
|
||||
Waves,
|
||||
Banknote,
|
||||
ArrowLeft,
|
||||
MapPin,
|
||||
CheckCircle2,
|
||||
LogIn,
|
||||
FileText,
|
||||
Scale,
|
||||
Handshake,
|
||||
Calculator,
|
||||
ArrowRight,
|
||||
} from 'lucide-react';
|
||||
|
||||
type View = 'home' | 'opportunities' | 'detail' | 'interest';
|
||||
type OpportunityAction = (opportunity: Opportunity) => void;
|
||||
const SectorContext = createContext<Sector[]>([]);
|
||||
const SECTOR_ICONS: Record<string, LucideIcon> = {
|
||||
agronegocio: Leaf,
|
||||
energia: Zap,
|
||||
turismo: Hotel,
|
||||
infraestruturas: Truck,
|
||||
'economia-azul': Waves,
|
||||
'mercado-financeiro': Banknote,
|
||||
};
|
||||
|
||||
function QueryStatus({
|
||||
loading,
|
||||
@@ -67,7 +66,7 @@ function QueryStatus({
|
||||
return (
|
||||
<p
|
||||
role="status"
|
||||
className="mx-auto max-w-6xl px-5 py-8 text-slate-600"
|
||||
className="mx-auto max-w-6xl px-5 py-5 text-slate-600 sm:py-6"
|
||||
>
|
||||
A carregar dados...
|
||||
</p>
|
||||
@@ -76,7 +75,7 @@ function QueryStatus({
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
className="mx-auto my-6 max-w-6xl rounded-xl border border-red-200 bg-red-50 p-5 text-red-800"
|
||||
className="mx-auto my-5 max-w-6xl rounded-xl border border-red-200 bg-red-50 p-5 text-red-800"
|
||||
>
|
||||
<p>{error}</p>
|
||||
<button
|
||||
@@ -136,65 +135,6 @@ function TopBar({
|
||||
);
|
||||
}
|
||||
|
||||
function SectorGrid({
|
||||
onSelectSector,
|
||||
}: {
|
||||
onSelectSector: (slug: string) => void;
|
||||
}) {
|
||||
const sectors = useContext(SectorContext);
|
||||
return (
|
||||
<section className="mx-auto max-w-6xl px-5 py-16">
|
||||
<h2 className="text-2xl font-black text-slate-900">
|
||||
Sectores estratégicos
|
||||
</h2>
|
||||
<p className="mt-2 max-w-2xl text-slate-600">
|
||||
Explore as áreas prioritárias do programa de investimento
|
||||
nacional.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{sectors.map((sector) => {
|
||||
const Icon = SECTOR_ICONS[sector.slug] ?? Banknote;
|
||||
const count = sector.opportunitiesCount;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={sector.slug}
|
||||
onClick={() => onSelectSector(sector.slug)}
|
||||
className="group rounded-2xl border border-slate-200 bg-white p-6 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-300 hover:shadow-md"
|
||||
>
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 text-emerald-700">
|
||||
<Icon size={22} />
|
||||
</div>
|
||||
<h3 className="mt-4 font-bold text-slate-900">
|
||||
{sector.name}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-slate-600">
|
||||
{sector.shortDescription}
|
||||
</p>
|
||||
{sector.specializations?.map((child) => (
|
||||
<span
|
||||
key={child.id}
|
||||
className="mt-3 block text-sm font-semibold text-emerald-800"
|
||||
>
|
||||
Especialização:{' '}
|
||||
{child.name.replace(
|
||||
'Mercado Financeiro — ',
|
||||
'',
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
<p className="mt-4 text-sm font-semibold text-emerald-700 group-hover:underline">
|
||||
{count} oportunidade{count === 1 ? '' : 's'} →
|
||||
</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function OpportunityCard({
|
||||
opportunity,
|
||||
onView,
|
||||
@@ -284,7 +224,12 @@ function OpportunitiesView({
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-6xl px-5 py-12">
|
||||
<SearchState loading={query.loading} error={query.error} total={total} retry={query.retry} />
|
||||
<SearchState
|
||||
loading={query.loading}
|
||||
error={query.error}
|
||||
total={total}
|
||||
retry={query.retry}
|
||||
/>
|
||||
<h1 className="text-3xl font-black text-slate-900">
|
||||
Oportunidades de investimento
|
||||
</h1>
|
||||
@@ -597,19 +542,22 @@ function InterestForm({
|
||||
const pending = useRef(false);
|
||||
const submission = useRef<{ body: string; key: string } | null>(null);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const draft = useInterestDraft<InterestFormData>('opportunity:' + (preselected?.reference ?? 'general'), {
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
investorType: '',
|
||||
country: '',
|
||||
declared_origin_country_code: '',
|
||||
sectorInterest: preselected?.sectorName ?? '',
|
||||
opportunityReference: preselected ? preselected.reference : '',
|
||||
investmentRange: '',
|
||||
message: '',
|
||||
privacyConsent: false,
|
||||
});
|
||||
const draft = useInterestDraft<InterestFormData>(
|
||||
'opportunity:' + (preselected?.reference ?? 'general'),
|
||||
{
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
investorType: '',
|
||||
country: '',
|
||||
declared_origin_country_code: '',
|
||||
sectorInterest: preselected?.sectorName ?? '',
|
||||
opportunityReference: preselected ? preselected.reference : '',
|
||||
investmentRange: '',
|
||||
message: '',
|
||||
privacyConsent: false,
|
||||
},
|
||||
);
|
||||
const { form, setForm } = draft;
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [result, setResult] = useState<{ reference: string } | null>(null);
|
||||
@@ -671,7 +619,10 @@ function InterestForm({
|
||||
setResult({ reference: response.data.reference });
|
||||
onSubmitted();
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof PortalApiError && error.status === 401) { draft.authenticate(); return; }
|
||||
if (error instanceof PortalApiError && error.status === 401) {
|
||||
draft.authenticate();
|
||||
return;
|
||||
}
|
||||
if (error instanceof PortalApiError) {
|
||||
setErrors(fieldErrors(error));
|
||||
setSubmitError(error.message);
|
||||
@@ -697,7 +648,13 @@ function InterestForm({
|
||||
A sua referência é <strong>{result.reference}</strong>. A
|
||||
equipa do portal irá analisar o pedido e poderá solicitar
|
||||
informação adicional.
|
||||
</p><a href="/investidor/manifestacoes" className="mt-4 inline-block underline">Acompanhar manifestações</a>
|
||||
</p>
|
||||
<a
|
||||
href="/investidor/manifestacoes"
|
||||
className="mt-4 inline-block underline"
|
||||
>
|
||||
Acompanhar manifestações
|
||||
</a>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -945,16 +902,20 @@ function Field({
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-slate-200 bg-slate-950 py-10 text-slate-400">
|
||||
<div className="mx-auto max-w-6xl px-5 text-sm">
|
||||
<p className="font-bold text-white">INVESTE Moçambique</p>
|
||||
<p className="mt-2 max-w-md">
|
||||
Portal do Investidor — conheça as oportunidades de
|
||||
investimento em Moçambique e manifeste o seu interesse.{' '}
|
||||
<a href="/acesso-gestao" className="underline">
|
||||
Acesso à gestão
|
||||
</a>
|
||||
</p>
|
||||
<footer
|
||||
aria-label="Portal do Investidor"
|
||||
className="border-t border-slate-200 bg-white"
|
||||
>
|
||||
<div className="mx-auto flex max-w-6xl justify-start px-5 py-2">
|
||||
<a
|
||||
href="/acesso-gestao"
|
||||
aria-label="Acesso à gestão"
|
||||
title="Acesso à gestão"
|
||||
className="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg px-3 text-sm font-medium text-[#ed1c24] transition-colors hover:bg-red-50 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#ed1c24]"
|
||||
>
|
||||
<LogIn className="size-5" aria-hidden="true" />
|
||||
<span>Acesso à gestão</span>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
@@ -1015,10 +976,6 @@ export default function PortalInvestidorApp({
|
||||
router.get('/oportunidades', { q: heroQuery.trim() });
|
||||
}
|
||||
|
||||
function handleSelectSector(slug: string) {
|
||||
router.get('/sectores/' + encodeURIComponent(slug));
|
||||
}
|
||||
|
||||
function handleView(opportunity: Opportunity) {
|
||||
router.get('/oportunidades/' + encodeURIComponent(opportunity.slug));
|
||||
}
|
||||
@@ -1032,7 +989,9 @@ export default function PortalInvestidorApp({
|
||||
return (
|
||||
<SectorContext.Provider value={sectors}>
|
||||
<div className="min-h-screen bg-slate-50 font-sans text-slate-900">
|
||||
{view !== 'home' && <TopBar onNavigate={navigate} requestCount={requestCount} />}
|
||||
{view !== 'home' && (
|
||||
<TopBar onNavigate={navigate} requestCount={requestCount} />
|
||||
)}
|
||||
<PortalMenu />
|
||||
<main>
|
||||
{view === 'home' && (
|
||||
@@ -1044,109 +1003,38 @@ export default function PortalInvestidorApp({
|
||||
stats={home.data?.data.stats}
|
||||
onNavigate={navigate}
|
||||
/>
|
||||
<section className="mx-auto max-w-6xl space-y-5 px-5 py-10">
|
||||
<h2 className="text-2xl font-bold">
|
||||
Encontre o contexto do seu investimento
|
||||
</h2>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{[
|
||||
[
|
||||
'/clusters',
|
||||
'Clusters',
|
||||
'Cadeias de valor e lacunas produtivas.',
|
||||
],
|
||||
[
|
||||
'/corredores',
|
||||
'Corredores',
|
||||
'Territórios, logística e conexões.',
|
||||
],
|
||||
[
|
||||
'/projectos-ancora',
|
||||
'Projectos âncora',
|
||||
'Projectos estruturantes e relações.',
|
||||
],
|
||||
[
|
||||
'/educacao',
|
||||
'Educação',
|
||||
'Investimentos em competências e formação.',
|
||||
],
|
||||
[
|
||||
'/documentos',
|
||||
'Documentos e Formulários',
|
||||
'Legislação, procedimentos, formulários e materiais de apoio.',
|
||||
],
|
||||
].map(([href, title, text]) => (
|
||||
<a
|
||||
key={href}
|
||||
href={href}
|
||||
className="rounded-xl border bg-white p-5"
|
||||
>
|
||||
<h3 className="text-lg font-bold">
|
||||
{title}
|
||||
</h3>
|
||||
<p>{text}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<InvestmentContextCards />
|
||||
<QueryStatus
|
||||
loading={home.loading}
|
||||
error={home.error}
|
||||
retry={home.retry}
|
||||
/>
|
||||
{home.data && (
|
||||
<SectorGrid
|
||||
onSelectSector={handleSelectSector}
|
||||
<HomepageSectors
|
||||
sectors={sectors.map((sector) => ({
|
||||
...sector,
|
||||
description: sector.shortDescription,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section className="mx-auto max-w-6xl space-y-5 px-5 py-12">
|
||||
<h2 className="text-2xl font-black">
|
||||
Como Investir
|
||||
</h2>
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
{[
|
||||
[
|
||||
'1. Explorar',
|
||||
'Identifique o sector, território e oportunidade.',
|
||||
'/oportunidades',
|
||||
],
|
||||
[
|
||||
'2. Preparar',
|
||||
'Conheça o percurso e organize os documentos.',
|
||||
'/como-investir',
|
||||
],
|
||||
[
|
||||
'3. Acompanhar',
|
||||
'Envie o pedido e acompanhe o protocolo.',
|
||||
'/balcao-virtual',
|
||||
],
|
||||
].map(([title, text, href]) => (
|
||||
<a
|
||||
key={href}
|
||||
href={href}
|
||||
className="rounded-xl border bg-white p-6"
|
||||
>
|
||||
<h3 className="font-bold">
|
||||
{title}
|
||||
</h3>
|
||||
<p>{text}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<InvestmentSteps />
|
||||
|
||||
<section className="border-t border-slate-200 bg-white py-16">
|
||||
<section className={HOME_SECTION_BAND}>
|
||||
<div className="mx-auto max-w-6xl px-5">
|
||||
<div className="mb-8 flex items-end justify-between">
|
||||
<h2 className="text-2xl font-black text-slate-900">
|
||||
<div className="mb-5 flex items-end justify-between">
|
||||
<h2 className={HOME_SECTION_HEADING}>
|
||||
Oportunidades em destaque
|
||||
</h2>
|
||||
<button
|
||||
onClick={goToOpportunities}
|
||||
className="text-sm font-bold text-emerald-700 hover:underline"
|
||||
className="inline-flex items-center gap-1 text-sm font-bold text-[#ed1c24] hover:underline"
|
||||
>
|
||||
Ver todas →
|
||||
<span>Ver todas</span>
|
||||
<ArrowRight
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{home.data && featured.length === 0 && (
|
||||
@@ -1167,77 +1055,154 @@ export default function PortalInvestidorApp({
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="mx-auto grid max-w-6xl gap-6 px-5 py-12 md:grid-cols-2">
|
||||
<div className="space-y-4 rounded-xl border bg-white p-6">
|
||||
<h2 className="text-2xl font-black">
|
||||
Documentos essenciais
|
||||
</h2>
|
||||
{essentialResources.length > 0 && (
|
||||
<ul className="space-y-2">
|
||||
{essentialResources.map(
|
||||
(resource) => (
|
||||
<li key={resource.id}>
|
||||
<a
|
||||
className="underline"
|
||||
href={`/documentos/${resource.id}/download`}
|
||||
>
|
||||
{resource.title}
|
||||
</a>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
<p>
|
||||
Consulte legislação, referências e
|
||||
formulários publicados para preparar o
|
||||
seu investimento.
|
||||
</p>
|
||||
<a
|
||||
className="font-semibold text-emerald-800 underline"
|
||||
href="/documentos"
|
||||
>
|
||||
Abrir biblioteca documental
|
||||
</a>
|
||||
<p>
|
||||
<section
|
||||
className={`${HOME_SECTION} grid gap-4 sm:gap-5 md:grid-cols-2`}
|
||||
>
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition-shadow hover:shadow-md">
|
||||
<div className="flex items-start gap-4 p-6">
|
||||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#ed1c24]/10 text-[#ed1c24]">
|
||||
<FileText
|
||||
className="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-xl font-bold text-slate-900 sm:text-2xl">
|
||||
Documentos essenciais
|
||||
</h2>
|
||||
<p className="text-sm leading-relaxed text-slate-600 sm:text-base">
|
||||
Consulte legislação, referências
|
||||
e formulários publicados para
|
||||
preparar o seu investimento.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-auto flex flex-col gap-2 px-6 pb-6">
|
||||
<a
|
||||
className="underline"
|
||||
className="inline-flex items-center justify-between gap-2 rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-900 transition-colors hover:border-[#ed1c24] hover:bg-red-50/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ed1c24]"
|
||||
href="/documentos"
|
||||
>
|
||||
Abrir biblioteca documental
|
||||
<ArrowRight
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex items-center justify-between gap-2 rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-900 transition-colors hover:border-[#ed1c24] hover:bg-red-50/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ed1c24]"
|
||||
href="/legislacao"
|
||||
>
|
||||
Legislação e Incentivos
|
||||
<span className="flex items-center gap-2">
|
||||
<Scale
|
||||
className="h-4 w-4 text-[#ed1c24]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Legislação e Incentivos
|
||||
</span>
|
||||
<ArrowRight
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4 rounded-xl bg-emerald-900 p-6 text-white">
|
||||
<h2 className="text-2xl font-black">
|
||||
Apoio ao Investidor
|
||||
</h2>
|
||||
<p>
|
||||
Peça orientação à equipa, proponha uma
|
||||
parceria ou acompanhe o seu pedido.
|
||||
</p>
|
||||
<a
|
||||
className="font-semibold underline"
|
||||
href="/apoio"
|
||||
>
|
||||
Contactar Apoio ao Investidor
|
||||
</a>
|
||||
<p>
|
||||
{essentialResources.length > 0 && (
|
||||
<div className="mt-2 rounded-xl bg-slate-50/80 p-4">
|
||||
<p className="mb-2 text-xs font-semibold tracking-wide text-slate-500 uppercase">
|
||||
Destaques
|
||||
</p>
|
||||
<ul className="space-y-1.5">
|
||||
{essentialResources
|
||||
.slice(0, 3)
|
||||
.map((resource) => (
|
||||
<li
|
||||
key={
|
||||
resource.id
|
||||
}
|
||||
>
|
||||
<a
|
||||
className="inline-flex items-center gap-2 text-sm text-slate-700 underline-offset-4 hover:text-slate-900 hover:underline"
|
||||
href={`/documentos/${resource.id}/download`}
|
||||
>
|
||||
<FileText
|
||||
className="h-4 w-4 text-slate-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{
|
||||
resource.title
|
||||
}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition-shadow hover:shadow-md">
|
||||
<div className="flex items-start gap-4 p-6">
|
||||
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#ed1c24]/10 text-[#ed1c24]">
|
||||
<Handshake
|
||||
className="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-xl font-bold text-slate-900 sm:text-2xl">
|
||||
Apoio ao Investidor
|
||||
</h2>
|
||||
<p className="text-sm leading-relaxed text-slate-600 sm:text-base">
|
||||
Peça orientação à equipa,
|
||||
proponha uma parceria ou
|
||||
acompanhe o seu pedido.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-auto flex flex-col gap-2 px-6 pb-6">
|
||||
<a
|
||||
className="underline"
|
||||
href="/parcerias"
|
||||
className="inline-flex items-center justify-between gap-2 rounded-xl bg-[#ed1c24] px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-[#c9141b] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ed1c24]"
|
||||
href="/apoio"
|
||||
>
|
||||
Bolsa de Parcerias
|
||||
</a>{' '}
|
||||
·{' '}
|
||||
<a
|
||||
className="underline"
|
||||
href="/simulador-fiscal"
|
||||
>
|
||||
Simulador Fiscal
|
||||
Contactar Apoio ao Investidor
|
||||
<ArrowRight
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
<a
|
||||
className="inline-flex items-center justify-between gap-2 rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-900 transition-colors hover:border-[#ed1c24] hover:bg-red-50/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ed1c24]"
|
||||
href="/parcerias"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Handshake
|
||||
className="h-4 w-4 text-[#ed1c24]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Bolsa de Parcerias
|
||||
</span>
|
||||
<ArrowRight
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex items-center justify-between gap-2 rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-900 transition-colors hover:border-[#ed1c24] hover:bg-red-50/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ed1c24]"
|
||||
href="/simulador-fiscal"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Calculator
|
||||
className="h-4 w-4 text-[#ed1c24]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Simulador Fiscal
|
||||
</span>
|
||||
<ArrowRight
|
||||
className="h-4 w-4"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { InvestmentContextGrid } from '@/components/investment-context-cards';
|
||||
import { PORTAL_MORE_LINK } from '@/lib/portal-presentation';
|
||||
import { Head } from '@inertiajs/react';
|
||||
|
||||
export default function InvestmentContexts() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 text-slate-900">
|
||||
<Head title="Contextos de investimento" />
|
||||
<main className="mx-auto max-w-6xl min-w-0 space-y-6 px-5 py-10">
|
||||
<h1 className="text-3xl font-bold text-[#ed1c24]">
|
||||
Encontre o contexto do seu investimento
|
||||
</h1>
|
||||
<p className="text-slate-600">
|
||||
Explore os contextos e recursos de apoio ao seu
|
||||
investimento.
|
||||
</p>
|
||||
<InvestmentContextGrid />
|
||||
<div className="flex justify-center">
|
||||
<a href="/" className={PORTAL_MORE_LINK}>
|
||||
Voltar ao início
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import { PublicSectorCards } from '@/components/public-sector-cards';
|
||||
import { PORTAL_MORE_LINK } from '@/lib/portal-presentation';
|
||||
import {
|
||||
PublicDocumentContent,
|
||||
type PublicDocument,
|
||||
@@ -18,7 +20,7 @@ const input =
|
||||
const button =
|
||||
'inline-block rounded-lg bg-emerald-800 px-5 py-3 font-semibold text-white disabled:opacity-50';
|
||||
const titles: Record<string, string> = {
|
||||
sectors: 'Sectores Prioritários',
|
||||
sectors: 'Sectores de investimento',
|
||||
sector: 'Sector prioritário',
|
||||
procedures: 'Como Investir em Moçambique',
|
||||
legislation: 'Legislação e Incentivos',
|
||||
@@ -73,8 +75,9 @@ type Props = {
|
||||
sectors?: {
|
||||
name: string;
|
||||
slug: string;
|
||||
short_description: string;
|
||||
short_description: string | null;
|
||||
opportunities_count: number;
|
||||
url?: string;
|
||||
specializations?: { id: number; name: string; url: string }[];
|
||||
}[];
|
||||
sector?: {
|
||||
@@ -489,7 +492,15 @@ export default function Services(p: Props) {
|
||||
<Head title={title} />
|
||||
<PortalMenu />
|
||||
<main className="mx-auto max-w-6xl min-w-0 space-y-8 overflow-x-clip px-5 py-10">
|
||||
<h1 className="text-3xl font-bold">{title}</h1>
|
||||
<h1
|
||||
className={
|
||||
p.section === 'sectors'
|
||||
? 'text-3xl font-bold text-[#ed1c24]'
|
||||
: 'text-3xl font-bold'
|
||||
}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
{flash?.success && (
|
||||
<p
|
||||
role="status"
|
||||
@@ -499,38 +510,33 @@ export default function Services(p: Props) {
|
||||
</p>
|
||||
)}
|
||||
{p.section === 'sectors' && (
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
{p.sectors?.map((s) => (
|
||||
<article
|
||||
className="rounded-xl border bg-white p-6"
|
||||
key={s.slug}
|
||||
>
|
||||
<h2 className="text-xl font-bold">
|
||||
<Link href={`/sectores/${s.slug}`}>
|
||||
{s.name}
|
||||
</Link>
|
||||
</h2>
|
||||
<p className="my-3">{s.short_description}</p>
|
||||
{s.specializations?.map((child) => (
|
||||
<p key={child.id}>
|
||||
<Link
|
||||
className="font-semibold underline"
|
||||
href={child.url}
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
</p>
|
||||
))}
|
||||
<p>
|
||||
{s.opportunities_count} oportunidades
|
||||
publicadas
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
<section
|
||||
aria-label="Todos os sectores de investimento"
|
||||
className="space-y-6"
|
||||
>
|
||||
<p className="text-slate-600">
|
||||
Explore o potencial estratégico de cada sector em
|
||||
Moçambique.
|
||||
</p>
|
||||
<PublicSectorCards
|
||||
sectors={(p.sectors ?? []).map((sector) => ({
|
||||
slug: sector.slug,
|
||||
name: sector.name,
|
||||
description: sector.short_description,
|
||||
opportunitiesCount: sector.opportunities_count,
|
||||
specializations: sector.specializations,
|
||||
url: sector.url,
|
||||
}))}
|
||||
/>
|
||||
{!p.sectors?.length && (
|
||||
<p>Não existem sectores publicados.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<a href="/" className={PORTAL_MORE_LINK}>
|
||||
Voltar ao início
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
{p.section === 'sector' && p.sector && (
|
||||
<>
|
||||
|
||||
@@ -47,6 +47,7 @@ use Laravel\Fortify\Features;
|
||||
|
||||
// Route::inertia('/', 'welcome')->name('home');
|
||||
Route::get('/', [PortalServicesController::class, 'home'])->name('home');
|
||||
Route::inertia('/contextos-de-investimento', 'portal/investment-contexts')->name('portal.investment-contexts');
|
||||
Route::inertia('/politica-de-privacidade', 'portal/privacy-policy')->name('legal.privacy');
|
||||
Route::inertia('/termos-de-uso', 'portal/terms-of-use')->name('legal.terms');
|
||||
foreach (['sectores' => 'sectors', 'como-investir' => 'procedures', 'legislacao' => 'legislation', 'documentos' => 'documents',
|
||||
|
||||
@@ -0,0 +1,326 @@
|
||||
// Actual public portal and navigation, synthetic API, local images, no database.
|
||||
import assert from 'node:assert/strict';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { createRequire } from 'node:module';
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
const { chromium } = require(
|
||||
process.env.CONTEXT_QA_PLAYWRIGHT ||
|
||||
'C:/Users/jorge/.cache/codex-runtimes/codex-primary-runtime/dependencies/node/node_modules/playwright',
|
||||
);
|
||||
const root = process.cwd();
|
||||
const base = (
|
||||
process.env.CONTEXT_QA_VITE || fs.readFileSync('public/hot', 'utf8')
|
||||
).trim();
|
||||
assert.equal(new URL(base).hostname, '127.0.0.1');
|
||||
const dir = path.join(root, 'outputs/investment-context-compact-20261023');
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
const fixturePath = '/outputs/investment-context-compact-20261023/fixture.html';
|
||||
fs.writeFileSync(
|
||||
path.join(dir, 'fixture.html'),
|
||||
`<!doctype html><html lang="pt"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Cartões QA</title></head><body><div id="app"></div><script type="module" src="/outputs/investment-context-compact-20261023/fixture.tsx"></script></body></html>`,
|
||||
);
|
||||
fs.writeFileSync(
|
||||
path.join(dir, 'fixture.tsx'),
|
||||
`
|
||||
import React from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import {createInertiaApp} from '@inertiajs/react';
|
||||
import Portal from '../../resources/js/pages/PortalInvestidor';
|
||||
import Navigation from '../../resources/js/layouts/portal-navigation';
|
||||
import '../../resources/css/app.css';
|
||||
await createInertiaApp({page:{component:'PortalInvestidor',props:{auth:{user:null,canManagePortal:false},essentialResources:[],countries:[]},url:'/',version:null},resolve:()=>Portal,layout:()=>Navigation,setup({el,App,props}){createRoot(el).render(<App {...props}/>);}});
|
||||
`,
|
||||
);
|
||||
const destinations = [
|
||||
['/clusters', 'Clusters', 'Cadeias de valor e lacunas produtivas.'],
|
||||
['/corredores', 'Corredores', 'Territórios, logística e conexões.'],
|
||||
[
|
||||
'/projectos-ancora',
|
||||
'Projectos âncora',
|
||||
'Projectos estruturantes e relações.',
|
||||
],
|
||||
['/educacao', 'Educação', 'Investimentos em competências e formação.'],
|
||||
[
|
||||
'/documentos',
|
||||
'Documentos e Formulários',
|
||||
'Legislação, procedimentos, formulários e materiais de apoio.',
|
||||
],
|
||||
];
|
||||
const browser = await chromium.launch({
|
||||
headless: true,
|
||||
...(process.env.CONTEXT_QA_CHROMIUM
|
||||
? { executablePath: process.env.CONTEXT_QA_CHROMIUM }
|
||||
: {}),
|
||||
});
|
||||
const errors = [],
|
||||
results = [],
|
||||
navigation = [];
|
||||
let currentPage;
|
||||
async function createCase(width, dpr = 1, fail = 'none') {
|
||||
const context = await browser.newContext({
|
||||
viewport: { width, height: 1000 },
|
||||
deviceScaleFactor: dpr,
|
||||
reducedMotion: 'reduce',
|
||||
});
|
||||
// Avoid development HMR reloading the fixture's synthetic homepage URL.
|
||||
await context.routeWebSocket('**/*', () => {});
|
||||
let releaseImages;
|
||||
const imagesReady = new Promise((resolve) => {
|
||||
releaseImages = resolve;
|
||||
});
|
||||
await context.route('**/*', async (route) => {
|
||||
const url = new URL(route.request().url());
|
||||
if (url.origin !== base) return route.abort();
|
||||
if (url.pathname.startsWith('/images/')) {
|
||||
if (url.pathname.startsWith('/images/investment-context/')) {
|
||||
await imagesReady;
|
||||
if (
|
||||
fail === 'all' ||
|
||||
(fail === 'primary' && !url.pathname.includes('-fallback'))
|
||||
)
|
||||
return route.fulfill({ status: 404 });
|
||||
}
|
||||
const file = path.resolve(root, 'public', '.' + url.pathname);
|
||||
assert.ok(
|
||||
file.startsWith(path.join(root, 'public', 'images') + path.sep),
|
||||
);
|
||||
return fs.existsSync(file)
|
||||
? route.fulfill({ path: file })
|
||||
: route.fulfill({ status: 404 });
|
||||
}
|
||||
if (url.pathname === '/api/v1/home')
|
||||
return route.fulfill({
|
||||
json: {
|
||||
success: true,
|
||||
data: {
|
||||
sectors: [],
|
||||
featuredOpportunities: [],
|
||||
stats: { opportunities: 0, sectors: 0, provinces: 0 },
|
||||
},
|
||||
},
|
||||
});
|
||||
if (url.pathname.startsWith('/api/'))
|
||||
return route.fulfill({ json: { data: [] } });
|
||||
if (
|
||||
route.request().isNavigationRequest() &&
|
||||
destinations.some(([href]) => url.pathname === href)
|
||||
) {
|
||||
navigation.push(url.pathname);
|
||||
return route.fulfill({
|
||||
contentType: 'text/html',
|
||||
body: '<!doctype html><html><body><h1>Destino de navegação de teste</h1></body></html>',
|
||||
});
|
||||
}
|
||||
return route.continue();
|
||||
});
|
||||
const page = await context.newPage();
|
||||
currentPage = page;
|
||||
page.on('pageerror', (error) => errors.push(error.message));
|
||||
await page.goto(base + fixturePath, {
|
||||
waitUntil: 'domcontentloaded',
|
||||
timeout: 60000,
|
||||
});
|
||||
const section = page.getByRole('region', {
|
||||
name: 'Encontre o contexto do seu investimento',
|
||||
});
|
||||
await section.waitFor();
|
||||
return { context, page, section, releaseImages };
|
||||
}
|
||||
try {
|
||||
for (const [width, dpr] of [
|
||||
[320, 1],
|
||||
[390, 2],
|
||||
[768, 1],
|
||||
[1024, 1],
|
||||
[1440, 2],
|
||||
[1920, 1],
|
||||
]) {
|
||||
const { context, page, section, releaseImages } = await createCase(
|
||||
width,
|
||||
dpr,
|
||||
);
|
||||
const links = section.getByRole('link');
|
||||
assert.equal(await links.count(), 5);
|
||||
assert.equal(await section.locator('img').count(), 5);
|
||||
const before = await links.evaluateAll((nodes) =>
|
||||
nodes.map((node) => node.getBoundingClientRect().height),
|
||||
);
|
||||
releaseImages();
|
||||
for (const img of await section.locator('img').all()) {
|
||||
await img.scrollIntoViewIfNeeded();
|
||||
await img.evaluate((image) => image.decode());
|
||||
}
|
||||
const photos = await section.locator('img').evaluateAll((nodes) =>
|
||||
nodes.map((image) => ({
|
||||
src: image.currentSrc,
|
||||
alt: image.alt,
|
||||
lazy: image.loading,
|
||||
width: image.naturalWidth,
|
||||
height: image.naturalHeight,
|
||||
fit: getComputedStyle(image).objectFit,
|
||||
ratio:
|
||||
image.getBoundingClientRect().width /
|
||||
image.getBoundingClientRect().height,
|
||||
})),
|
||||
);
|
||||
assert.equal(new Set(photos.map((image) => image.src)).size, 5);
|
||||
photos.forEach((image) => {
|
||||
assert.ok(image.alt.length > 20);
|
||||
assert.equal(image.lazy, 'lazy');
|
||||
// naturalWidth is density corrected when srcset uses width descriptors.
|
||||
assert.ok(image.width > 0 && image.height > 0);
|
||||
assert.equal(image.fit, 'cover');
|
||||
assert.ok(Math.abs(image.ratio - 16 / 9) < 0.01);
|
||||
});
|
||||
const after = await links.evaluateAll((nodes) =>
|
||||
nodes.map((node) => node.getBoundingClientRect().height),
|
||||
);
|
||||
before.forEach((height, index) =>
|
||||
assert.ok(
|
||||
Math.abs(height - after[index]) < 1,
|
||||
'Image caused card layout shift',
|
||||
),
|
||||
);
|
||||
const rows = await links.evaluateAll((nodes) =>
|
||||
nodes.map((node) => {
|
||||
const rect = node.getBoundingClientRect();
|
||||
return { top: rect.top, height: rect.height };
|
||||
}),
|
||||
);
|
||||
for (const row of rows) {
|
||||
const aligned = rows.filter(
|
||||
(item) => Math.abs(item.top - row.top) < 1,
|
||||
);
|
||||
assert.ok(
|
||||
aligned.every((item) => Math.abs(item.height - row.height) < 1),
|
||||
'Unequal heights within a card row',
|
||||
);
|
||||
}
|
||||
const columns = await section
|
||||
.locator('nav')
|
||||
.evaluate(
|
||||
(node) =>
|
||||
getComputedStyle(node).gridTemplateColumns.split(' ')
|
||||
.length,
|
||||
);
|
||||
assert.equal(columns, width >= 1024 ? 4 : width >= 640 ? 2 : 1);
|
||||
assert.equal(
|
||||
await page.evaluate(
|
||||
() => document.documentElement.scrollWidth > innerWidth,
|
||||
),
|
||||
false,
|
||||
);
|
||||
for (const [href, title, description] of destinations) {
|
||||
const link = section.getByRole('link', {
|
||||
name: title,
|
||||
exact: true,
|
||||
});
|
||||
assert.equal(await link.getAttribute('href'), href);
|
||||
assert.equal(
|
||||
(await link.locator('p').textContent()).trim(),
|
||||
description,
|
||||
);
|
||||
}
|
||||
assert.equal(await page.locator('.tempo-header').count(), 1);
|
||||
assert.equal(await page.locator('.portal-hero').count(), 1);
|
||||
await section.screenshot({
|
||||
path: path.join(dir, `cards-${width}-dpr${dpr}.png`),
|
||||
});
|
||||
if (width === 1440) {
|
||||
for (const [href, title] of destinations) {
|
||||
const link = section.getByRole('link', {
|
||||
name: title,
|
||||
exact: true,
|
||||
});
|
||||
await link.focus();
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForURL(base + href);
|
||||
assert.equal(navigation.at(-1), href);
|
||||
await page.goto(base + fixturePath, {
|
||||
waitUntil: 'networkidle',
|
||||
});
|
||||
await section.waitFor();
|
||||
}
|
||||
}
|
||||
results.push({
|
||||
width,
|
||||
dpr,
|
||||
columns,
|
||||
photos: photos.map(({ src, width, height }) => ({
|
||||
src,
|
||||
width,
|
||||
height,
|
||||
})),
|
||||
status: 'passed',
|
||||
});
|
||||
await context.close();
|
||||
}
|
||||
for (const fail of ['primary', 'all']) {
|
||||
const { context, page, section, releaseImages } = await createCase(
|
||||
390,
|
||||
2,
|
||||
fail,
|
||||
);
|
||||
releaseImages();
|
||||
for (const link of await section.getByRole('link').all())
|
||||
await link.scrollIntoViewIfNeeded();
|
||||
if (fail === 'primary') {
|
||||
await page.waitForFunction(
|
||||
() =>
|
||||
[
|
||||
...document.querySelectorAll(
|
||||
'#investment-context-heading + nav img',
|
||||
),
|
||||
].length === 5 &&
|
||||
[
|
||||
...document.querySelectorAll(
|
||||
'#investment-context-heading + nav img',
|
||||
),
|
||||
].every(
|
||||
(image) =>
|
||||
image.complete &&
|
||||
image.naturalWidth > 0 &&
|
||||
image.currentSrc.includes('-fallback'),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
await section
|
||||
.getByText('Imagem indisponível', { exact: true })
|
||||
.nth(4)
|
||||
.waitFor();
|
||||
assert.equal(await section.getByRole('link').count(), 5);
|
||||
assert.equal(await section.locator('[role="img"]').count(), 5);
|
||||
}
|
||||
await section.screenshot({
|
||||
path: path.join(dir, `fallback-${fail}.png`),
|
||||
});
|
||||
results.push({ fail, status: 'passed' });
|
||||
await context.close();
|
||||
}
|
||||
assert.deepEqual(errors, []);
|
||||
fs.writeFileSync(
|
||||
path.join(dir, 'qa-results.json'),
|
||||
JSON.stringify(
|
||||
{ results, errors, navigation, databaseAccess: false },
|
||||
null,
|
||||
2,
|
||||
),
|
||||
);
|
||||
console.log(JSON.stringify({ cases: results.length, errors, navigation }));
|
||||
} catch (error) {
|
||||
if (currentPage && !currentPage.isClosed()) {
|
||||
await Promise.all([
|
||||
Promise.resolve(
|
||||
currentPage.screenshot({ path: path.join(dir, 'failure.png') }),
|
||||
),
|
||||
Promise.resolve(currentPage.content()).then((html) =>
|
||||
fs.writeFileSync(path.join(dir, 'failure.html'), html),
|
||||
),
|
||||
]);
|
||||
}
|
||||
throw error;
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
@@ -0,0 +1,417 @@
|
||||
// Public React/Inertia screens with synthetic sectors and local assets; no database.
|
||||
import assert from 'node:assert/strict';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { createRequire } from 'node:module';
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
const { chromium } = require(
|
||||
process.env.SECTORS_QA_PLAYWRIGHT ||
|
||||
'C:/Users/jorge/.cache/codex-runtimes/codex-primary-runtime/dependencies/node/node_modules/playwright',
|
||||
);
|
||||
const root = process.cwd();
|
||||
const base = (
|
||||
process.env.SECTORS_QA_VITE || fs.readFileSync('public/hot', 'utf8')
|
||||
).trim();
|
||||
assert.equal(new URL(base).hostname, '127.0.0.1');
|
||||
const dir = path.join(root, 'outputs/home-sectors-20261023');
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
const sectors = [
|
||||
[
|
||||
'agronegocio',
|
||||
'Agronegócio',
|
||||
'Produção, agroprocessamento, irrigação e cadeias de valor agrícolas.',
|
||||
],
|
||||
[
|
||||
'turismo',
|
||||
'Turismo',
|
||||
'Hotelaria, turismo costeiro, cultural e ecológico.',
|
||||
],
|
||||
[
|
||||
'infraestruturas',
|
||||
'Infraestruturas',
|
||||
'Logística, transportes, parques industriais e energia.',
|
||||
],
|
||||
[
|
||||
'economia-azul',
|
||||
'Economia Azul',
|
||||
'Pesca, aquacultura, portos e logística marítima.',
|
||||
],
|
||||
[
|
||||
'mercado-financeiro',
|
||||
'Mercado Financeiro',
|
||||
'Fintech, capital de risco e instrumentos financeiros.',
|
||||
],
|
||||
['mineracao', 'Mineração', null],
|
||||
['energia-especifica', 'Energia', null],
|
||||
['imobiliario', 'Imobiliário', null],
|
||||
['bens-de-consumo-e-franquias', 'Bens de Consumo e Franquias', null],
|
||||
['tecnologias-de-informacao', 'Tecnologias de Informação', null],
|
||||
].map(([slug, name, description], index) => ({
|
||||
id: index + 1,
|
||||
slug,
|
||||
name,
|
||||
shortDescription: description,
|
||||
short_description: description,
|
||||
description,
|
||||
opportunitiesCount: index === 4 ? 4 : 0,
|
||||
opportunities_count: index === 4 ? 4 : 0,
|
||||
url: `/sectores/${slug}`,
|
||||
specializations:
|
||||
index === 4
|
||||
? [
|
||||
{
|
||||
id: 901,
|
||||
name: 'Mercado Financeiro — Fintech',
|
||||
slug: 'fintech',
|
||||
url: '/sectores/mercado-financeiro/fintech',
|
||||
},
|
||||
]
|
||||
: [],
|
||||
}));
|
||||
const fixturePath = '/outputs/home-sectors-20261023/fixture.html';
|
||||
const html =
|
||||
'<!doctype html><html lang="pt"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sectores QA</title></head><body><div id="app"></div><script type="module" src="/outputs/home-sectors-20261023/fixture.tsx"></script></body></html>';
|
||||
fs.writeFileSync(path.join(dir, 'fixture.html'), html);
|
||||
fs.writeFileSync(
|
||||
path.join(dir, 'fixture.tsx'),
|
||||
`
|
||||
import React from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import {createInertiaApp} from '@inertiajs/react';
|
||||
import Portal from '../../resources/js/pages/PortalInvestidor';
|
||||
import Services from '../../resources/js/pages/portal/services';
|
||||
import Navigation from '../../resources/js/layouts/portal-navigation';
|
||||
import '../../resources/css/app.css';
|
||||
const sectors=${JSON.stringify(sectors)};
|
||||
const url=new URL(location.href),catalogue=url.pathname==='/sectores',detail=url.pathname.startsWith('/sectores/');
|
||||
const selected=sectors.find(sector=>sector.url===url.pathname)||{id:901,name:'Fintech',slug:'fintech',description:null,short_description:null};
|
||||
const props={auth:{user:null,canManagePortal:false},countries:[],essentialResources:[],...(catalogue?{section:'sectors',sectors:url.searchParams.has('empty')?[]:sectors}:detail?{section:'sector',sector:selected,opportunities:[]}:{} )};
|
||||
await createInertiaApp({page:{component:catalogue||detail?'portal/services':'PortalInvestidor',props,url:url.pathname+url.search,version:null},resolve:()=>catalogue||detail?Services:Portal,layout:()=>Navigation,setup({el,App,props}){createRoot(el).render(<App {...props}/>);}});
|
||||
`,
|
||||
);
|
||||
const browser = await chromium.launch({
|
||||
headless: true,
|
||||
...(process.env.SECTORS_QA_CHROMIUM
|
||||
? { executablePath: process.env.SECTORS_QA_CHROMIUM }
|
||||
: {}),
|
||||
});
|
||||
// Full navigations need Vite's transformed HTML, including the React preamble.
|
||||
const fixtureResponse = await fetch(base + fixturePath);
|
||||
assert.ok(fixtureResponse.ok);
|
||||
const navigationHtml = await fixtureResponse.text();
|
||||
const errors = [],
|
||||
results = [],
|
||||
navigation = [];
|
||||
let currentPage;
|
||||
async function openCase(width, { empty = false, fail = 'none' } = {}) {
|
||||
const context = await browser.newContext({
|
||||
viewport: { width, height: 1000 },
|
||||
reducedMotion: 'reduce',
|
||||
});
|
||||
await context.routeWebSocket('**/*', () => {});
|
||||
await context.route('**/*', (route) => {
|
||||
const url = new URL(route.request().url());
|
||||
if (url.origin !== base) return route.abort();
|
||||
if (url.pathname.startsWith('/images/')) {
|
||||
if (
|
||||
url.pathname.startsWith('/images/sectors/') &&
|
||||
(fail === 'all' ||
|
||||
(fail === 'primary' &&
|
||||
!url.pathname.includes('outros-sectores')))
|
||||
)
|
||||
return route.fulfill({ status: 404 });
|
||||
const file = path.resolve(root, 'public', '.' + url.pathname);
|
||||
assert.ok(
|
||||
file.startsWith(path.join(root, 'public', 'images') + path.sep),
|
||||
);
|
||||
return fs.existsSync(file)
|
||||
? route.fulfill({ path: file })
|
||||
: route.fulfill({ status: 404 });
|
||||
}
|
||||
if (url.pathname === '/api/v1/home')
|
||||
return route.fulfill({
|
||||
json: {
|
||||
success: true,
|
||||
data: {
|
||||
sectors: empty ? [] : sectors,
|
||||
featuredOpportunities: [],
|
||||
stats: {
|
||||
opportunities: 4,
|
||||
sectors: empty ? 0 : 10,
|
||||
provinces: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
if (url.pathname.startsWith('/api/'))
|
||||
return route.fulfill({ json: { data: [] } });
|
||||
if (
|
||||
route.request().isNavigationRequest() &&
|
||||
(url.pathname === '/sectores' ||
|
||||
url.pathname.startsWith('/sectores/') ||
|
||||
url.pathname === '/')
|
||||
) {
|
||||
navigation.push(url.pathname);
|
||||
return route.fulfill({
|
||||
contentType: 'text/html',
|
||||
body: navigationHtml,
|
||||
});
|
||||
}
|
||||
return route.continue();
|
||||
});
|
||||
const page = await context.newPage();
|
||||
currentPage = page;
|
||||
page.on('pageerror', (error) => errors.push(error.message));
|
||||
await page.goto(base + fixturePath, {
|
||||
waitUntil: 'networkidle',
|
||||
timeout: 60000,
|
||||
});
|
||||
return { context, page };
|
||||
}
|
||||
async function loadImages(region) {
|
||||
for (const image of await region.locator('img').all()) {
|
||||
await image.scrollIntoViewIfNeeded();
|
||||
await region
|
||||
.page()
|
||||
.waitForFunction(
|
||||
(node) => node.complete && node.naturalWidth > 0,
|
||||
await image.elementHandle(),
|
||||
{ timeout: 15000 },
|
||||
);
|
||||
}
|
||||
}
|
||||
try {
|
||||
for (const width of [320, 390, 768, 1024, 1440, 1920]) {
|
||||
const { context, page } = await openCase(width);
|
||||
const section = page.getByRole('region', {
|
||||
name: 'Sectores de investimento',
|
||||
exact: true,
|
||||
});
|
||||
await section.waitFor();
|
||||
await loadImages(section);
|
||||
assert.equal(await section.getByRole('article').count(), 5);
|
||||
assert.deepEqual(
|
||||
await section.locator('h3').allTextContents(),
|
||||
sectors.slice(0, 5).map((s) => s.name),
|
||||
);
|
||||
assert.equal(
|
||||
await section
|
||||
.getByRole('link', { name: /^Ler mais sobre / })
|
||||
.count(),
|
||||
5,
|
||||
);
|
||||
assert.ok(
|
||||
await section.getByText('0 oportunidades', { exact: true }).count(),
|
||||
);
|
||||
assert.equal(
|
||||
await section.getByText('4 oportunidades', { exact: true }).count(),
|
||||
1,
|
||||
);
|
||||
assert.equal(
|
||||
await section
|
||||
.getByRole('link', { name: 'Especialização: Fintech' })
|
||||
.getAttribute('href'),
|
||||
'/sectores/mercado-financeiro/fintech',
|
||||
);
|
||||
const headings = await page.locator('main h2').evaluateAll((nodes) =>
|
||||
nodes.map((node) => ({
|
||||
title: node.textContent.trim(),
|
||||
size: getComputedStyle(node).fontSize,
|
||||
weight: getComputedStyle(node).fontWeight,
|
||||
color: getComputedStyle(node).color,
|
||||
lineHeight: getComputedStyle(node).lineHeight,
|
||||
})),
|
||||
);
|
||||
assert.equal(headings.length, 6);
|
||||
headings.forEach((heading) => {
|
||||
assert.equal(heading.color, 'rgb(237, 28, 36)');
|
||||
assert.equal(heading.size, '24px');
|
||||
assert.equal(heading.weight, '700');
|
||||
assert.equal(heading.lineHeight, '32px');
|
||||
});
|
||||
const homeColumns = await section
|
||||
.locator(':scope > div')
|
||||
.first()
|
||||
.locator(':scope > div')
|
||||
.evaluate(
|
||||
(node) =>
|
||||
getComputedStyle(node).gridTemplateColumns.split(' ')
|
||||
.length,
|
||||
);
|
||||
assert.equal(homeColumns, width >= 1024 ? 5 : width >= 640 ? 3 : 2);
|
||||
assert.equal(
|
||||
await page.evaluate(
|
||||
() => document.documentElement.scrollWidth > innerWidth,
|
||||
),
|
||||
false,
|
||||
);
|
||||
await section.screenshot({
|
||||
path: path.join(dir, `home-sectors-${width}.png`),
|
||||
});
|
||||
if (width === 1440)
|
||||
await page.screenshot({
|
||||
path: path.join(dir, 'homepage-1440.png'),
|
||||
fullPage: true,
|
||||
});
|
||||
const more = section.getByRole('link', {
|
||||
name: 'Ver mais sectores',
|
||||
exact: true,
|
||||
});
|
||||
assert.equal(await more.getAttribute('href'), '/sectores');
|
||||
await more.focus();
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForURL(base + '/sectores');
|
||||
await page
|
||||
.getByRole('heading', {
|
||||
name: 'Sectores de investimento',
|
||||
exact: true,
|
||||
})
|
||||
.waitFor();
|
||||
const catalogue = page.getByRole('region', {
|
||||
name: 'Todos os sectores de investimento',
|
||||
});
|
||||
await loadImages(catalogue);
|
||||
assert.equal(await catalogue.getByRole('article').count(), 10);
|
||||
assert.deepEqual(
|
||||
await catalogue.locator('h3').allTextContents(),
|
||||
sectors.map((s) => s.name),
|
||||
);
|
||||
assert.equal(
|
||||
await catalogue
|
||||
.getByRole('link', { name: /^Ler mais sobre / })
|
||||
.count(),
|
||||
10,
|
||||
);
|
||||
assert.equal(
|
||||
await page.evaluate(
|
||||
() => document.documentElement.scrollWidth > innerWidth,
|
||||
),
|
||||
false,
|
||||
);
|
||||
await catalogue.screenshot({
|
||||
path: path.join(dir, `catalogue-${width}.png`),
|
||||
});
|
||||
if (width === 1440) {
|
||||
for (const sector of sectors) {
|
||||
await catalogue
|
||||
.getByRole('link', {
|
||||
name: `Ler mais sobre ${sector.name}`,
|
||||
exact: true,
|
||||
})
|
||||
.click();
|
||||
await page.waitForURL(base + sector.url);
|
||||
await page
|
||||
.getByRole('heading', { name: sector.name, exact: true })
|
||||
.waitFor();
|
||||
await page.goto(base + '/sectores', {
|
||||
waitUntil: 'networkidle',
|
||||
});
|
||||
await catalogue.waitFor();
|
||||
}
|
||||
await catalogue
|
||||
.getByRole('link', { name: 'Especialização: Fintech' })
|
||||
.click();
|
||||
await page.waitForURL(
|
||||
base + '/sectores/mercado-financeiro/fintech',
|
||||
);
|
||||
await page
|
||||
.getByRole('heading', { name: 'Fintech', exact: true })
|
||||
.waitFor();
|
||||
await page.goto(base + '/sectores', { waitUntil: 'networkidle' });
|
||||
await catalogue
|
||||
.getByRole('link', { name: 'Voltar ao início' })
|
||||
.click();
|
||||
await page.waitForURL(base + '/');
|
||||
await page
|
||||
.getByRole('region', {
|
||||
name: 'Sectores de investimento',
|
||||
exact: true,
|
||||
})
|
||||
.waitFor();
|
||||
}
|
||||
results.push({
|
||||
width,
|
||||
homeSectors: 5,
|
||||
catalogueSectors: 10,
|
||||
homeColumns,
|
||||
headings,
|
||||
status: 'passed',
|
||||
});
|
||||
await context.close();
|
||||
}
|
||||
for (const fail of ['primary', 'all']) {
|
||||
const { context, page } = await openCase(390, { fail });
|
||||
const section = page.getByRole('region', {
|
||||
name: 'Sectores de investimento',
|
||||
exact: true,
|
||||
});
|
||||
await section.waitFor();
|
||||
for (const article of await section.getByRole('article').all())
|
||||
await article.scrollIntoViewIfNeeded();
|
||||
await page.waitForFunction((mode) => {
|
||||
const cards = [
|
||||
...document.querySelectorAll(
|
||||
'#home-sectors-heading ~ div article',
|
||||
),
|
||||
];
|
||||
return (
|
||||
cards.length === 5 &&
|
||||
cards.every((card) =>
|
||||
mode === 'all'
|
||||
? !card.querySelector('img')
|
||||
: card.querySelector('img')?.complete &&
|
||||
card.querySelector('img')?.naturalWidth > 0 &&
|
||||
card
|
||||
.querySelector('img')
|
||||
?.currentSrc.includes('outros-sectores'),
|
||||
)
|
||||
);
|
||||
}, fail);
|
||||
assert.equal(
|
||||
await section
|
||||
.getByRole('link', { name: /^Ler mais sobre / })
|
||||
.count(),
|
||||
5,
|
||||
);
|
||||
await section.screenshot({
|
||||
path: path.join(dir, `fallback-${fail}.png`),
|
||||
});
|
||||
results.push({ fail, status: 'passed' });
|
||||
await context.close();
|
||||
}
|
||||
const { context, page } = await openCase(390, { empty: true });
|
||||
const section = page.getByRole('region', {
|
||||
name: 'Sectores de investimento',
|
||||
exact: true,
|
||||
});
|
||||
await section.getByText('Não existem sectores publicados.').waitFor();
|
||||
assert.equal(await section.getByRole('article').count(), 0);
|
||||
await page.goto(base + '/sectores?empty=1', { waitUntil: 'networkidle' });
|
||||
await page.getByText('Não existem sectores publicados.').waitFor();
|
||||
results.push({ emptyCatalogue: true, status: 'passed' });
|
||||
await context.close();
|
||||
assert.deepEqual(errors, []);
|
||||
fs.writeFileSync(
|
||||
path.join(dir, 'qa-results.json'),
|
||||
JSON.stringify(
|
||||
{ results, errors, navigation, databaseAccess: false },
|
||||
null,
|
||||
2,
|
||||
),
|
||||
);
|
||||
console.log(JSON.stringify({ cases: results.length, errors, navigation }));
|
||||
} catch (error) {
|
||||
if (currentPage && !currentPage.isClosed())
|
||||
await Promise.all([
|
||||
Promise.resolve(
|
||||
currentPage.screenshot({ path: path.join(dir, 'failure.png') }),
|
||||
),
|
||||
Promise.resolve(currentPage.content()).then((html) =>
|
||||
fs.writeFileSync(path.join(dir, 'failure.html'), html),
|
||||
),
|
||||
]);
|
||||
throw error;
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
Reference in New Issue
Block a user