| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Service Groupings Analysis</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .chart-container { |
| transition: all 0.3s ease; |
| } |
| .chart-container:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .highlight-box { |
| border-left: 4px solid #3B82F6; |
| background-color: #F8FAFC; |
| } |
| .service-card { |
| transition: all 0.3s ease; |
| } |
| .service-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> |
| <div class="text-center mb-12 fade-in"> |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-3">Service Offerings Analysis</h1> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Understanding how accounting practices serve clients across different business sizes</p> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 highlight-box fade-in"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-lightbulb text-blue-500 mr-3"></i> Key Insights |
| </h2> |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <p class="text-gray-700 mb-4"><span class="font-medium">Tax Planning</span> emerges as the most commonly offered service overall (53%), with particularly strong adoption among Medium-sized businesses (62%).</p> |
| <p class="text-gray-700 mb-4"><span class="font-medium">Sole Practitioner</span> (Sole Practitioners) show distinctive patterns, leading in Business Advisory (56%), External Reporting (51%), and Software/App Advisory (45%) - significantly higher than other segments.</p> |
| </div> |
| <div> |
| <p class="text-gray-700 mb-4"><span class="font-medium">Large businesses</span> demand more reporting services, with 48% using Internal Reporting and 40% using External Reporting - the highest among all segments.</p> |
| <p class="text-gray-700"><span class="font-medium">Planning & Budgeting</span> sees higher adoption among Large businesses (53%) compared to Medium (43%) and Small (37%), suggesting more complex financial needs as companies grow.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12"> |
| <div class="chart-container bg-white p-6 rounded-xl shadow-md fade-in"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Service Adoption by Business Size</h3> |
| <canvas id="serviceChart" height="400"></canvas> |
| </div> |
| <div class="chart-container bg-white p-6 rounded-xl shadow-md fade-in"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Top Services by Client Segment</h3> |
| <canvas id="segmentChart" height="400"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-12 fade-in"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> |
| <i class="fas fa-chart-line text-blue-500 mr-3"></i> Detailed Analysis |
| </h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="service-card bg-white p-5 rounded-lg shadow hover:shadow-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> |
| <h3 class="font-semibold text-lg">Tax Planning</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-2">Overall: <span class="font-medium">53%</span></p> |
| <div class="text-xs space-y-1"> |
| <div class="flex justify-between"> |
| <span>Sole Practitioner:</span> |
| <span class="font-medium">45%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Small:</span> |
| <span class="font-medium">55%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Medium:</span> |
| <span class="font-medium">62%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Large:</span> |
| <span class="font-medium">50%</span> |
| </div> |
| </div> |
| <p class="text-gray-700 text-sm mt-3">Peaks with medium-sized businesses, suggesting optimal complexity for tax planning services.</p> |
| </div> |
| |
| |
| <div class="service-card bg-white p-5 rounded-lg shadow hover:shadow-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
| <h3 class="font-semibold text-lg">Business Advisory</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-2">Overall: <span class="font-medium">46%</span></p> |
| <div class="text-xs space-y-1"> |
| <div class="flex justify-between"> |
| <span>Sole Practitioner:</span> |
| <span class="font-medium">56%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Small:</span> |
| <span class="font-medium">46%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Medium:</span> |
| <span class="font-medium">37%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Large:</span> |
| <span class="font-medium">44%</span> |
| </div> |
| </div> |
| <p class="text-gray-700 text-sm mt-3">Sole Practitioner lead significantly, possibly due to their personalized service approach.</p> |
| </div> |
| |
| |
| <div class="service-card bg-white p-5 rounded-lg shadow hover:shadow-lg"> |
| <div class="flex items-center mb-3"> |
| <div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div> |
| <h3 class="font-semibold text-lg">Reporting Services</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-2">Overall: <span class="font-medium">35% avg</span></p> |
| <div class="text-xs space-y-1"> |
| <div class="flex justify-between"> |
| <span>Internal (Large):</span> |
| <span class="font-medium">48%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>External (SP):</span> |
| <span class="font-medium">51%</span> |
| </div> |
| </div> |
| <p class="text-gray-700 text-sm mt-3">Large businesses need more internal reporting, while Sole Practitioner excel in external reporting.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-blue-50 rounded-xl p-6 fade-in"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-bullseye text-blue-500 mr-3"></i> Strategic Recommendations |
| </h2> |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <div class="flex items-start mb-4"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-chess-queen text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">For Sole Practitioner</h4> |
| <p class="text-gray-700 text-sm">Leverage your strength in Business Advisory and External Reporting to differentiate from larger firms. Consider bundling these services for small business clients.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-building text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">For Medium/Large Firms</h4> |
| <p class="text-gray-700 text-sm">Develop specialized tax planning offerings for medium businesses and enhanced reporting packages for large clients to meet their distinct needs.</p> |
| </div> |
| </div> |
| </div> |
| <div> |
| <div class="flex items-start mb-4"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-chart-pie text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Service Packaging</h4> |
| <p class="text-gray-700 text-sm">Consider creating tiered service packages that combine planning/budgeting with performance analysis, as these services show complementary adoption patterns.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-laptop-code text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">Tech Advisory</h4> |
| <p class="text-gray-700 text-sm">Despite lower overall adoption, Sole Practitioner show strong Software/App Advisory offerings - this could represent an underserved market opportunity.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const serviceCtx = document.getElementById('serviceChart').getContext('2d'); |
| const serviceChart = new Chart(serviceCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Tax Planning', 'Business Advisory', 'Planning & Budgeting', 'Performance Analysis', 'Internal Reporting', 'External Reporting', 'Software Advisory'], |
| datasets: [ |
| { |
| label: 'Total', |
| data: [53, 46, 45, 38, 36, 34, 30], |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', |
| borderColor: 'rgba(59, 130, 246, 1)', |
| borderWidth: 1 |
| }, |
| { |
| label: 'Sole Practitioner', |
| data: [45, 56, 45, 45, 42, 51, 45], |
| backgroundColor: 'rgba(16, 185, 129, 0.7)', |
| borderColor: 'rgba(16, 185, 129, 1)', |
| borderWidth: 1 |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| position: 'top', |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return context.dataset.label + ': ' + context.raw + '%'; |
| } |
| } |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| max: 70, |
| title: { |
| display: true, |
| text: 'Percentage of Firms Offering' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const segmentCtx = document.getElementById('segmentChart').getContext('2d'); |
| const segmentChart = new Chart(segmentCtx, { |
| type: 'radar', |
| data: { |
| labels: ['Tax Planning', 'Business Advisory', 'Planning & Budgeting', 'Performance Analysis', 'Internal Reporting', 'External Reporting', 'Software Advisory'], |
| datasets: [ |
| { |
| label: 'Small Businesses', |
| data: [55, 46, 37, 32, 28, 23, 26], |
| backgroundColor: 'rgba(255, 99, 132, 0.2)', |
| borderColor: 'rgba(255, 99, 132, 1)', |
| borderWidth: 2, |
| pointBackgroundColor: 'rgba(255, 99, 132, 1)' |
| }, |
| { |
| label: 'Medium Businesses', |
| data: [62, 37, 43, 34, 28, 22, 25], |
| backgroundColor: 'rgba(54, 162, 235, 0.2)', |
| borderColor: 'rgba(54, 162, 235, 1)', |
| borderWidth: 2, |
| pointBackgroundColor: 'rgba(54, 162, 235, 1)' |
| }, |
| { |
| label: 'Large Businesses', |
| data: [50, 44, 53, 40, 48, 40, 24], |
| backgroundColor: 'rgba(255, 206, 86, 0.2)', |
| borderColor: 'rgba(255, 206, 86, 1)', |
| borderWidth: 2, |
| pointBackgroundColor: 'rgba(255, 206, 86, 1)' |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| position: 'top', |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return context.dataset.label + ': ' + context.raw + '%'; |
| } |
| } |
| } |
| }, |
| scales: { |
| r: { |
| angleLines: { |
| display: true |
| }, |
| suggestedMin: 0, |
| suggestedMax: 70 |
| } |
| } |
| } |
| }); |
| |
| |
| const fadeElements = document.querySelectorAll('.fade-in'); |
| |
| const fadeObserver = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = 1; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| fadeElements.forEach(element => { |
| element.style.opacity = 0; |
| fadeObserver.observe(element); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=IRUNHO/example-of-data-visualisation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
