Infographic: Fast Track Your Thanh Hoa Airport Arrival Goal: Compare -> Viz: Bar Chart -> Justification: A bar chart is the most direct way to visually compare two values (time saved), making the benefit instantly clear. Library: Chart.js (Canvas). – Report Info: Arrival process steps -> Goal: Organize/Change -> Viz: Interactive HTML/CSS Flowchart -> Justification: An interactive flowchart allows users to focus on their specific path, reducing cognitive load and making the process easier to understand. Method: Structured HTML/CSS with Tailwind and JS for toggling. – Report Info: Trust signals (years, guarantee) -> Goal: Inform -> Viz: Large Number “Big Stat” Cards -> Justification: Large, bold numbers create a strong visual impact and convey key strengths quickly. Method: HTML/CSS. – Report Info: Customer Reviews -> Goal: Persuade -> Viz: Testimonial Cards -> Justification: Real user feedback builds trust and provides social proof. Method: HTML/CSS. – Report Info: Pre-flight checklist -> Goal: Organize -> Viz: Icon-based List -> Justification: Icons make the checklist more engaging and faster to scan. Method: HTML/CSS with Unicode icons. – CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. –> https://cdn.tailwindcss.com https://cdn.jsdelivr.net/npm/chart.js body { font-family: ‘Poppins’, sans-serif; background-color: #f7fafc; } .text-navy { color: #073B4C; } .bg-navy { background-color: #073B4C; } .bg-teal { background-color: #06D6A0; } .text-teal { color: #06D6A0; } .bg-yellow { background-color: #FFD166; } .bg-blue { background-color: #118AB2; } .text-blue { color: #118AB2; } .bg-red { background-color: #FF6B6B; } .text-red { color: #FF6B6B; } .card { background-color: white; border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .flowchart-step { position: relative; padding-left: 40px; } .flowchart-step::before { content: ”; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background-color: #118AB2; border: 3px solid white; box-shadow: 0 0 0 3px #118AB2; } .flowchart-line::after { content: ”; position: absolute; left: 19px; top: 100%; height: calc(100% – 20px); width: 2px; background-color: #118AB2; } .pain-point::before { background-color: #FF6B6B; box-shadow: 0 0 0 3px #FF6B6B; } .chart-container { position: relative; width: 100%; max-width: 600px; margin: auto; height: 300px; max-height: 400px; } .tab-btn.active { background-color: #118AB2; color: white; } @media (min-width: 768px) { .chart-container { height: 350px; } } document.addEventListener(‘DOMContentLoaded’, () => { const evisaTab = document.getElementById(‘evisa-tab’); const voaTab = document.getElementById(‘voa-tab’); const evisaPath = document.getElementById(‘evisa-path’); const voaPath = document.getElementById(‘voa-path’); function showEvisa() { evisaPath.classList.remove(‘hidden’); voaPath.classList.add(‘hidden’); evisaTab.classList.add(‘active’); voaTab.classList.remove(‘active’); } function showVoa() { voaPath.classList.remove(‘hidden’); evisaPath.classList.add(‘hidden’); voaTab.classList.add(‘active’); evisaTab.classList.remove(‘active’); } evisaTab.addEventListener(‘click’, showEvisa); voaTab.addEventListener(‘click’, showVoa); showEvisa(); const ctx = document.getElementById(‘timeSavedChart’).getContext(‘2d’); const timeSavedChart = new Chart(ctx, { type: ‘bar’, data: { labels: [‘Standard Arrival’, ‘Fast Track Arrival’], datasets: [{ label: ‘Estimated Arrival Time (minutes)’, data: [60, 5], backgroundColor: [ ‘#FF6B6B’, ‘#06D6A0’ ], borderRadius: 8, }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: ‘y’, scales: { x: { beginAtZero: true, title: { display: true, text: ‘Minutes’ } }, y: { grid: { display: false } } }, plugins: { legend: { display: false }, tooltip: { callbacks: { title: function(tooltipItems) { const item = tooltipItems[0]; let label = item.chart.data.labels[item.dataIndex]; if (Array.isArray(label)) { return label.join(‘ ‘); } else { return label; } } } } } } }); });