Component:
Problem-solution SaaS Playful

Name: Problem-solution SaaS Playful
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Problem/Solution Page Section Content SaaS Playful
Colors:
Description:
This carefully crafted Problem/Solution component is perfect for SaaS landing pages, featuring a Playful design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

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

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

<section class="bg-stone-50 relative overflow-hidden py-20">
  <!-- Decorative Blobs -->
  <div class="absolute top-20 left-10 w-72 h-72 bg-amber-200 rounded-full mix-blend-multiply filter blur-xl opacity-30"></div>
  <div class="absolute bottom-20 right-10 w-96 h-96 bg-amber-300 rounded-full mix-blend-multiply filter blur-xl opacity-20"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-10">
      <div class="inline-flex items-center bg-amber-100 text-amber-700 text-sm font-bold px-4 py-2 rounded-full mb-6">
        <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="mr-2">
          <path
            d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
        </svg>
        The Problem & The Solution
      </div>
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-stone-900 mb-6">
        From Chaos to
        <span class="relative inline-block">
          <span class="text-amber-500">Clarity</span>
          <svg class="absolute -bottom-2 left-0 w-full" viewBox="0 0 200 12" xmlns="http://www.w3.org/2000/svg">
            <path d="M2 10 Q 50 2, 100 6 T 198 10" stroke="#f59e0b" stroke-width="4" fill="none"
              stroke-linecap="round" />
          </svg>
        </span>
      </h2>
      <p class="text-xl text-stone-600 leading-relaxed">
        Traditional work tools make you want to pull your hair out. We built something that actually makes sense.
      </p>
    </div>

    <!-- Problem Section -->
    <div class="mb-8">
      <div class="text-center mb-12">
        <div class="inline-flex items-center gap-2 mb-4">
          <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
            <span class="text-xl md:text-2xl">😫</span>
          </div>
          <h3 class="text-2xl md:text-3xl font-bold text-stone-900">The Old Way (Yikes!)</h3>
        </div>
        <p class="text-stone-600 max-w-2xl mx-auto">
          Sound familiar? You're not alone. Here's what teams struggle with every single day...
        </p>
      </div>

      <div class="grid md:grid-cols-3 gap-6">
        <!-- Problem Card 1 -->
        <div
          class="bg-white rounded-2xl shadow-lg border-2 border-red-200 p-6 hover:shadow-xl">
          <div class="w-16 h-16 rounded-xl bg-red-100 flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-red-600">
              <path d="M12 3v6" />
              <path d="M12 15v6" />
              <path d="M19 12h-2.5" />
              <path d="M7.5 12H5" />
              <path d="M7 7h10" />
              <path d="M7 17h10" />
            </svg>
          </div>
          <h4 class="text-xl font-bold text-stone-900 mb-3">Tool Overload</h4>
          <p class="text-stone-600 leading-relaxed">
            Juggling 10+ apps for basic tasks. Email here, chat there, files somewhere else. Where did that document
            go again?
          </p>
        </div>

        <!-- Problem Card 2 -->
        <div
          class="bg-white rounded-2xl shadow-lg border-2 border-red-200 p-6 hover:shadow-xl">
          <div class="w-16 h-16 rounded-xl bg-red-100 flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-red-600">
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
          </div>
          <h4 class="text-xl font-bold text-stone-900 mb-3">Time Wasted</h4>
          <p class="text-stone-600 leading-relaxed">
            Spending hours searching, switching contexts, and attending meetings about meetings. Productivity? What's
            that?
          </p>
        </div>

        <!-- Problem Card 3 -->
        <div
          class="bg-white rounded-2xl shadow-lg border-2 border-red-200 p-6 hover:shadow-xl">
          <div class="w-16 h-16 rounded-xl bg-red-100 flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-red-600">
              <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z" />
              <path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9" />
              <path d="M12 3v6" />
            </svg>
          </div>
          <h4 class="text-xl font-bold text-stone-900 mb-3">Overwhelmed Teams</h4>
          <p class="text-stone-600 leading-relaxed">
            Everyone's burnt out from complex workflows, unclear processes, and tools that need a PhD to understand.
          </p>
        </div>
      </div>
    </div>

    <!-- Transformation Arrow -->
    <div class="flex justify-center items-center mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-amber-500">
        <path d="M12 5v14" />
        <path d="m19 12-7 7-7-7" />
      </svg>
    </div>

    <!-- Solution Section -->
    <div>
      <div class="text-center mb-12">
        <div class="inline-flex items-center gap-2 mb-4">
          <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
            <span class="text-xl md:text-2xl">✨</span>
          </div>
          <h3 class="text-2xl md:text-3xl font-bold text-stone-900">The PlayFlow Way (Magic!)</h3>
        </div>
        <p class="text-stone-600 max-w-2xl mx-auto">
          One delightfully simple platform that brings everything together. Finally, work that doesn't feel like work.
        </p>
      </div>

      <div class="grid md:grid-cols-3 gap-6">
        <!-- Solution Card 1 -->
        <div
          class="bg-gradient-to-br from-amber-50 to-white rounded-2xl shadow-lg border-2 border-amber-200 p-6 hover:shadow-xl">
          <div class="w-16 h-16 rounded-xl bg-amber-500 flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
              <line x1="8" y1="21" x2="16" y2="21" />
              <line x1="12" y1="17" x2="12" y2="21" />
            </svg>
          </div>
          <h4 class="text-xl font-bold text-stone-900 mb-3">All-in-One Platform</h4>
          <p class="text-stone-700 leading-relaxed mb-4">
            Tasks, docs, chat, files, and meetings, all in one place. No more app-hopping. Just pure, focused
            productivity.
          </p>
          <div class="flex items-center text-amber-600 font-semibold text-sm">
            <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="mr-1">
              <polyline points="20 6 9 17 4 12" />
            </svg>
            90% fewer tools needed
          </div>
        </div>

        <!-- Solution Card 2 -->
        <div
          class="bg-gradient-to-br from-amber-50 to-white rounded-2xl shadow-lg border-2 border-amber-200 p-6 hover:shadow-xl">
          <div class="w-16 h-16 rounded-xl bg-amber-500 flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
            </svg>
          </div>
          <h4 class="text-xl font-bold text-stone-900 mb-3">Lightning Fast</h4>
          <p class="text-stone-700 leading-relaxed mb-4">
            Automated workflows, smart shortcuts, and AI-powered assistance. Get things done in seconds, not hours.
          </p>
          <div class="flex items-center text-amber-600 font-semibold text-sm">
            <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="mr-1">
              <polyline points="20 6 9 17 4 12" />
            </svg>
            10x productivity boost
          </div>
        </div>

        <!-- Solution Card 3 -->
        <div
          class="bg-gradient-to-br from-amber-50 to-white rounded-2xl shadow-lg border-2 border-amber-200 p-6 hover:shadow-xl">
          <div class="w-16 h-16 rounded-xl bg-amber-500 flex items-center justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
              stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
            </svg>
          </div>
          <h4 class="text-xl font-bold text-stone-900 mb-3">Simple to Master</h4>
          <p class="text-stone-700 leading-relaxed mb-4">
            Your team will be up and running in 2 minutes. Seriously. No training courses, no confusion, no headaches.
          </p>
          <div class="flex items-center text-amber-600 font-semibold text-sm">
            <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="mr-1">
              <polyline points="20 6 9 17 4 12" />
            </svg>
            2-minute setup time
          </div>
        </div>
      </div>
    </div>

    <!-- CTA -->
    <div class="mt-12 text-center">
      <p class="text-xl text-stone-600 mb-6">
        Ready to ditch the chaos? Join 2,000+ teams who've made the switch.
      </p>
      <button
        class="bg-amber-500 hover:bg-amber-600 text-white font-bold text-lg px-8 py-4 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
        Start Your Free Trial →
      </button>
      <p class="text-sm text-stone-500 mt-4">No credit card required • Setup in 2 minutes • Cancel anytime</p>
    </div>
  </div>
</section>
Problem-solution SaaS Playful

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
