Consulting_Services_Pricing_Table_Monospace_Pastel

<div class="font-mono py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-indigo-50 to-purple-50 text-slate-800 dark:from-slate-900 dark:to-gray-950 dark:text-gray-200">
  <div class="mx-auto max-w-7xl">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-slate-800 dark:text-purple-300">
        <span class="block">./consulting-services</span>
      </h2>
      <p class="mt-4 text-xl sm:text-2xl text-slate-600 dark:text-gray-400">
        Pick a service tier. We'll handle the rest.
      </p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-3 lg:grid-cols-3">

      <!-- Basic Tier -->
      <div class="p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-1 ring-gray-900/5 dark:ring-purple-700/50 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <h3 class="text-2xl font-bold tracking-tight text-indigo-600 dark:text-indigo-400 mb-4">Basic Package</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">For individuals or small teams getting started.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">$499</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/project</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Initial Consultation (2h)</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Basic Strategy Brief</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Email Support</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-indigo-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition duration-300">
          Select Basic
        </a>
      </div>

      <!-- Pro Tier (Most Popular) -->
      <div class="relative p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-2 ring-purple-500 dark:ring-purple-400 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute -top-3 left-1/2 -translate-x-1/2 py-1 px-3 bg-purple-500 dark:bg-purple-600 text-white text-xs font-semibold uppercase rounded-full tracking-wide">Most Popular</div>
        <h3 class="text-2xl font-bold tracking-tight text-purple-600 dark:text-purple-400 mb-4">Pro Package</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">Ideal for growing businesses requiring deeper insights.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">$1299</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/project</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Includes Basic Features</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>In-depth Analysis Report</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Dedicated Consultant (20h)</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Priority Support</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-purple-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 transition duration-300">
          Select Pro
        </a>
      </div>

      <!-- Enterprise Tier -->
      <div class="p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-1 ring-gray-900/5 dark:ring-purple-700/50 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <h3 class="text-2xl font-bold tracking-tight text-rose-600 dark:text-rose-400 mb-4">Enterprise Scale</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">For large organizations with complex needs.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">Custom</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/negotiable</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Includes Pro Features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Dedicated Project Manager</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>On-site Workshops</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>24/7 Premium Support</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>Custom Integrations</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-rose-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600 transition duration-300">
          Contact Sales
        </a>
      </div>

    </div>
  </div>
</div>