Data Insights Section with Chart and CTA

<section class="container md:px-8 mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
	<h2 class="text-4xl tracking-tight mb-10 text-white fade-in fade-in-1 text-center max-w-4xl mx-auto font-playfair font-medium">Advanced Data Insights</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
		<div class="gradient-box p-8 rounded-2xl ring-1 ring-white/10 backdrop-blur-md hover:ring-teal-400/20 transition-all duration-300 fade-in fade-in-2 flex flex-col">
			<canvas id="insightsChart" class="w-full h-64 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/9895d626-b35e-41b6-92f7-f1842072b761_1600w.jpg)] bg-cover rounded-lg" width="1296" height="648" style="display: block; box-sizing: border-box; height: 324px; width: 648px;"></canvas>
			<p class="mt-6 text-gray-300 text-sm leading-relaxed font-geist">Our analytics engine provides actionable metrics and trends to drive smarter decisions.</p>
		</div>
		<div class="flex flex-col justify-center fade-in fade-in-3">
			<h3 class="text-2xl mb-4 text-white max-w-xl font-playfair font-medium">Transform Your Data Into Competitive Advantage</h3>
			<p class="text-gray-300 mb-6 max-w-xl leading-relaxed font-geist">Leverage predictive analytics and AI-powered insights to forecast trends and optimize performance across your business operations.</p>
			<a href="#" class="inline-block px-6 py-3 rounded-full bg-gradient-to-r from-teal-400 to-blue-500 hover:from-teal-500 hover:to-blue-600 text-white text-sm font-semibold transition-all duration-200 max-w-max font-geist">Learn More</a>
		</div>
	</div>
</section>