Starter Pricing Plan Card with CTA

<div class="relative border-white/10 border rounded-2xl px-8 py-8" style="background: rgba(255, 255, 255, 0.02);">
          <div class="mb-8">
            <h4 class="text-xl font-semibold text-white mb-2">Starter</h4>
            <p class="text-sm text-slate-400 mb-6">Perfect for individuals and small projects getting started with visual design.</p>
            <div class="flex items-baseline gap-2">
              <span class="text-4xl text-white font-semibold">Free</span>
              <span class="text-sm text-slate-400">forever</span>
            </div>
          </div>
          <ul class="space-y-4 mb-8">
            <li class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4" class=""></path>
                <circle cx="12" cy="12" r="10" class=""></circle>
              </svg>
              <span class="text-sm text-slate-300">3 active projects</span>
            </li>
            <li class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4" class=""></path>
                <circle cx="12" cy="12" r="10" class=""></circle>
              </svg>
              <span class="text-sm text-slate-300">Core design tools</span>
            </li>
            <li class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4" class=""></path>
                <circle cx="12" cy="12" r="10" class=""></circle>
              </svg>
              <span class="text-sm text-slate-300">Basic templates</span>
            </li>
            <li class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4" class=""></path>
                <circle cx="12" cy="12" r="10" class=""></circle>
              </svg>
              <span class="text-sm text-slate-300">Community support</span>
            </li>
            <li class="flex items-center gap-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-400 flex-shrink-0">
                <path d="m9 12 2 2 4-4" class=""></path>
                <circle cx="12" cy="12" r="10" class=""></circle>
              </svg>
              <span class="text-sm text-slate-300">Nebula subdomain</span>
            </li>
          </ul>
          <button class="w-full py-4 px-6 rounded-xl text-sm font-medium text-white border border-white/20 hover:border-white/30 transition-all duration-300 hover:bg-white/5" style="background: rgba(255, 255, 255, 0.03);">Get Started Free</button>
        </div>