Component:
Problem-solution Artificial Intelligence Corporate

Free
Tailwind
React
Vue
Svelte
Astro
Problem-solution Artificial Intelligence Corporate
Tags: Problem/Solution Page Section Content Artificial Intelligence Corporate
Colors:
Description:
This carefully crafted Problem/Solution component is perfect for Artificial Intelligence landing pages, featuring a Corporate 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: Artificial Intelligence
@style: Corporate
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<style>
  .slide-in {
    animation: slide-in 0.8s ease-out forwards;
  }
  @keyframes slide-in {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .delay-1 {
    animation-delay: 0.2s;
    opacity: 0;
  }
  .delay-2 {
    animation-delay: 0.4s;
    opacity: 0;
  }
  .delay-3 {
    animation-delay: 0.6s;
    opacity: 0;
  }
  .delay-4 {
    animation-delay: 0.8s;
    opacity: 0;
  }
  .gradient-text {
    background: linear-gradient(135deg, #059669 0%, #0891b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .grid-pattern {
    background-image: radial-gradient(rgba(6, 182, 212, 0.15) 1px, transparent 1px);
    background-size: 10px 10px;
  }
  .grid-pattern-2 {
    background-image: radial-gradient(rgba(182, 6, 6, 0.15) 1px, transparent 1px);
    background-size: 10px 10px;
  }
</style>

<section class="bg-white text-slate-900 relative py-10 overflow-hidden grid-pattern-2">
  <!-- Background Elements -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-20 left-10 w-72 h-72 bg-rose-400/20 rounded-full mix-blend-multiply filter blur-3xl">
    </div>
    <div
      class="absolute bottom-40 right-10 w-96 h-96 bg-slate-400/20 rounded-full mix-blend-multiply filter blur-3xl">
    </div>
  </div>

  <!-- Content Container -->
  <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
      <div
        class="slide-in inline-flex items-center space-x-2 bg-gradient-to-r from-rose-50 to-slate-50 border border-rose-300 rounded-full px-4 py-2">
        <span class="relative inline-flex rounded-full h-2 w-2 bg-rose-600/75"></span>
        <span class="text-sm font-medium text-rose-700">The Challenge</span>
      </div>

      <h2 class="slide-in delay-1 text-4xl lg:text-6xl font-medium text-slate-900">
        Traditional Business
        <span class="text-rose-600 block mt-2">Hold You Back</span>
      </h2>

      <p class="slide-in delay-2 text-lg text-slate-600 leading-relaxed">
        While your competitors embrace AI, manual processes and outdated systems drain resources, slow
        decision-making, and limit growth potential.
      </p>
    </div>

    <!-- Problem Cards -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
      <!-- Problem 1 -->
      <div
        class="slide-in delay-2 bg-white border-2 border-rose-200 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center mb-6">
          <svg class="w-7 h-7 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-slate-900 mb-3">Time-Consuming Processes</h3>
        <p class="text-slate-600 leading-relaxed mb-4">
          Your team spends hours on repetitive tasks like data entry, report generation, and manual analysis - work that
          could be automated instantly.
        </p>
        <div class="flex items-center space-x-2 text-sm text-rose-600 font-medium">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
            </path>
          </svg>
          <span>80% of time wasted on manual work</span>
        </div>
      </div>

      <!-- Problem 2 -->
      <div
        class="slide-in delay-3 bg-white border-2 border-rose-200 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center mb-6">
          <svg class="w-7 h-7 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
            </path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-slate-900 mb-3">Data Overload</h3>
        <p class="text-slate-600 leading-relaxed mb-4">
          Mountains of data sit unused while critical insights remain buried. Making decisions without proper analysis
          leads to costly mistakes.
        </p>
        <div class="flex items-center space-x-2 text-sm text-rose-600 font-medium">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
            </path>
          </svg>
          <span>95% of data goes unused</span>
        </div>
      </div>

      <!-- Problem 3 -->
      <div
        class="slide-in delay-4 bg-white border-2 border-rose-200 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-rose-100 rounded-xl flex items-center justify-center mb-6">
          <svg class="w-7 h-7 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-slate-900 mb-3">Rising Operational Costs</h3>
        <p class="text-slate-600 leading-relaxed mb-4">
          Inefficient workflows, human errors, and scaling challenges drain budgets. Every delay and mistake directly
          impacts your bottom line.
        </p>
        <div class="flex items-center space-x-2 text-sm text-rose-600 font-medium">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
            </path>
          </svg>
          <span>40% higher operational costs</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white text-slate-900relative py-10 overflow-hidden grid-pattern">
  <!-- Background Elements -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-20 left-10 w-72 h-72 bg-emerald-400/20 rounded-full mix-blend-multiply filter blur-3xl">
    </div>
    <div class="absolute bottom-40 right-10 w-96 h-96 bg-cyan-400/20 rounded-full mix-blend-multiply filter blur-3xl">
    </div>
  </div>

  <!-- Content Container -->
  <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
      <div
        class="slide-in inline-flex items-center space-x-2 bg-gradient-to-r from-emerald-50 to-cyan-50 border border-emerald-300 rounded-full px-4 py-2">
        <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-600/75"></span>
        <span class="text-sm font-medium text-emerald-700">The Solution</span>
      </div>

      <h2 class="slide-in delay-1 text-4xl lg:text-6xl font-medium text-slate-900">
        Transform Operations with
        <span class="gradient-text block mt-2 pb-3">AI-Powered Intelligence</span>
      </h2>

      <p class="slide-in delay-2 text-lg text-slate-600 leading-relaxed">
        Our AI platform eliminates bottlenecks, unlocks insights, and accelerates growth - delivering measurable results
        from day one.
      </p>
    </div>

    <!-- Solution Comparison -->
    <div class="grid lg:grid-cols-3 gap-8 mb-16">
      <!-- Solution 1 -->
      <div
        class="slide-in delay-2 bg-white border-2 border-emerald-300 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 relative overflow-hidden">
        <div class="absolute top-4 right-4 bg-emerald-100 text-emerald-700 text-xs font-bold px-3 py-1 rounded-full">
          80% Faster
        </div>
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-100 to-cyan-100 rounded-xl flex items-center justify-center mb-6">
          <svg class="w-7 h-7 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z">
            </path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-slate-900 mb-3">Intelligent Automation</h3>
        <p class="text-slate-600 leading-relaxed mb-6">
          AI handles repetitive tasks 24/7 with 99% accuracy. What took hours now takes seconds - freeing your team for
          strategic work.
        </p>
        <ul class="space-y-3">
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Automate data entry & processing</span>
          </li>
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Generate reports instantly</span>
          </li>
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Scale without hiring more staff</span>
          </li>
        </ul>
      </div>

      <!-- Solution 2 -->
      <div
        class="slide-in delay-3 bg-white border-2 border-cyan-300 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 relative overflow-hidden">
        <div class="absolute top-4 right-4 bg-cyan-100 text-cyan-700 text-xs font-bold px-3 py-1 rounded-full">
          98% Accuracy
        </div>
        <div
          class="w-14 h-14 bg-gradient-to-br from-cyan-100 to-emerald-100 rounded-xl flex items-center justify-center mb-6">
          <svg class="w-7 h-7 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
            </path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-slate-900 mb-3">Predictive Analytics</h3>
        <p class="text-slate-600 leading-relaxed mb-6">
          Transform data chaos into actionable insights. AI analyzes millions of data points to reveal patterns and
          predict outcomes.
        </p>
        <ul class="space-y-3">
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-cyan-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Real-time dashboards & alerts</span>
          </li>
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-cyan-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Forecast trends with confidence</span>
          </li>
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-cyan-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Make data-driven decisions</span>
          </li>
        </ul>
      </div>

      <!-- Solution 3 -->
      <div
        class="slide-in delay-4 bg-white border-2 border-emerald-300 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 relative overflow-hidden">
        <div class="absolute top-4 right-4 bg-emerald-100 text-emerald-700 text-xs font-bold px-3 py-1 rounded-full">
          65% Savings
        </div>
        <div
          class="w-14 h-14 bg-gradient-to-br from-emerald-100 to-cyan-100 rounded-xl flex items-center justify-center mb-6">
          <svg class="w-7 h-7 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6">
            </path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-slate-900 mb-3">Cost Optimization</h3>
        <p class="text-slate-600 leading-relaxed mb-6">
          Reduce operational expenses dramatically. AI optimizes resource allocation and eliminates waste across your
          organization.
        </p>
        <ul class="space-y-3">
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Lower labor costs by 65%</span>
          </li>
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">Minimize human errors</span>
          </li>
          <li class="flex items-start space-x-2">
            <svg class="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="text-sm text-slate-600">3-5x ROI in first year</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
Problem-solution Artificial Intelligence Corporate

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
