Data Visualization Components

<div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
      <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
    </div>
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
      <img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
    </div>
    <!-- Profile Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
      <div class="flex items-center mb-3">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-semibold">Jane Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
    </div>
  </div>
</div>