Problem-solution Freelance Playful

                <!--
@type: Problem/Solution
@industry: Freelance
@style: Playful
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Quicksand:wght@500;700&display=swap');
  body {
    font-family: 'Quicksand', sans-serif;
  }
  .playful-title {
    font-family: 'Fredoka', sans-serif;
  }
</style>

<section class="bg-stone-50 py-24 px-6 relative overflow-hidden">
  <div class="max-w-7xl mx-auto relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

      <div class="relative group">
        <div
          class="bg-stone-200/50 rounded-[3rem] p-10 md:p-14 border-2 border-dashed border-stone-300">
          <div class="w-16 h-16 bg-stone-300 rounded-2xl flex items-center justify-center mb-8 grayscale">
            <span class="text-4xl">🌫️</span>
          </div>
          <h2 class="playful-title text-3xl md:text-4xl font-bold text-stone-800 mb-6 leading-tight">
            Tired of your ideas feeling <span
              class="text-stone-500 underline decoration-stone-400 decoration-wavy">Trapped in Gray?</span>
          </h2>
          <ul class="space-y-6">
            <li class="flex items-start gap-4">
              <div
                class="mt-1 w-6 h-6 rounded-full bg-stone-300 flex-shrink-0 flex items-center justify-center text-stone-600 text-xs font-bold">
                ✕</div>
              <p class="text-stone-600 leading-relaxed font-medium">Your website looks like a template everyone else is
                already using.</p>
            </li>
            <li class="flex items-start gap-4">
              <div
                class="mt-1 w-6 h-6 rounded-full bg-stone-300 flex-shrink-0 flex items-center justify-center text-stone-600 text-xs font-bold">
                ✕</div>
              <p class="text-stone-600 leading-relaxed font-medium">Users get lost in a "boring forest" of confusing
                buttons and text.</p>
            </li>
            <li class="flex items-start gap-4">
              <div
                class="mt-1 w-6 h-6 rounded-full bg-stone-300 flex-shrink-0 flex items-center justify-center text-stone-600 text-xs font-bold">
                ✕</div>
              <p class="text-stone-600 leading-relaxed font-medium">Your brand story is exciting, but your digital
                presence is... asleep.</p>
            </li>
          </ul>
        </div>
      </div>

      <div class="relative">
        <div
          class="bg-white rounded-[3rem] p-10 md:p-14 shadow-2xl shadow-rose-100 border-2 border-rose-100">
          <div
            class="w-16 h-16 bg-rose-500 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-rose-200">
            <span class="text-4xl text-white">🎨</span>
          </div>
          <h2 class="playful-title text-3xl md:text-4xl font-bold text-stone-800 mb-6 leading-tight">
            I bring the <span class="text-rose-500">Color, Spark & Soul.</span>
          </h2>
          <ul class="space-y-6">
            <li class="flex items-start gap-4">
              <div
                class="mt-1 w-6 h-6 rounded-full bg-rose-100 flex-shrink-0 flex items-center justify-center text-rose-600 text-xs font-bold">
                ✓</div>
              <p class="text-stone-700 leading-relaxed font-medium">Custom illustrations and layouts that scream "YOU"
                from the first pixel.</p>
            </li>
            <li class="flex items-start gap-4">
              <div
                class="mt-1 w-6 h-6 rounded-full bg-rose-100 flex-shrink-0 flex items-center justify-center text-rose-600 text-xs font-bold">
                ✓</div>
              <p class="text-stone-700 leading-relaxed font-medium">Playful interactions that guide users through a
                friction-less adventure.</p>
            </li>
            <li class="flex items-start gap-4">
              <div
                class="mt-1 w-6 h-6 rounded-full bg-rose-100 flex-shrink-0 flex items-center justify-center text-rose-600 text-xs font-bold">
                ✓</div>
              <p class="text-stone-700 leading-relaxed font-medium">A living, breathing brand ecosystem that builds
                trust and excitement.</p>
            </li>
          </ul>

          <div class="pt-10 border-t border-rose-50 flex items-center gap-4">
            <div class="flex -space-x-2">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="The Storyteller" class="w-10 h-10 rounded-full border-2 border-white">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="The Storyteller" class="w-10 h-10 rounded-full border-2 border-white">
              <img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="The Storyteller" class="w-10 h-10 rounded-full border-2 border-white">
            </div>
            <p class="text-sm font-bold text-rose-600 uppercase tracking-tighter">Results, not just rainbows.</p>
          </div>
        </div>
      </div>

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