<section data-component-type="Content" class="py-20 max-w-[90%] mx-auto" data-component-slug="saas-template-our-aproach">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <!-- Left Image -->
    <div class="flex justify-center lg:justify-start">
      <img data-node="approach_image" data-node-type="file" data-node-label="Our Approach Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868965/seltrix/templates/saas-template/our-aproach/image.png" src="{{approach_image}}" alt="Dashboard preview" class="w-full bg-[#F8FAFB] lg:pt-[30px] lg:pr-[30px] max-w-[600px] rounded-xl shadow-md">
    </div>

    <!-- Right Content -->
    <div class="flex flex-col justify-center">
      <!-- Tag -->
      <span data-node="approach_tag" data-node-type="text" data-node-label="Approach Tag" data-node-default="Our Approach" class="inline-block bg-[#5F4BE233] text-[#5F4BE2] text-sm font-medium px-4 py-2 w-[140px] text-center rounded-[10px] mb-4">
        {{approach_tag}}
      </span>

      <!-- Main Heading -->
      <h2 data-node="approach_heading" data-node-type="text" data-node-label="Approach Main Heading" data-node-default="We build solutions that adapt to how teams work" class="text-3xl text-[#151515] md:text-4xl font-semibold mb-6 leading-tight">
        {{approach_heading}}
      </h2>

      <!-- Features List -->
      <div class="space-y-6">
        <!-- Item 1 -->
        <div>
          <h3 data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Insight-Driven Development" class="text-xl font-semibold text-[#000000]">
            {{feature_1_title}}
          </h3>
          <p data-node="feature_1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Every feature is shaped by real user feedback to deliver value where it matters most." class="text-[#4A6673] text-[15px] mt-1">
            {{feature_1_desc}}
          </p>
        </div>

        <!-- Item 2 -->
        <div>
          <h3 data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Continuous Innovation" class="text-xl font-semibold text-[#000000]">
            {{feature_2_title}}
          </h3>
          <p data-node="feature_2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Regular updates keep your workflows future-ready with smarter automations and improved efficiency." class="text-[#4A6673] text-[15px] mt-1">
            {{feature_2_desc}}
          </p>
        </div>

        <!-- Item 3 -->
        <div>
          <h3 data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Seamless Integration" class="text-xl font-semibold text-[#000000]">
            {{feature_3_title}}
          </h3>
          <p data-node="feature_3_desc" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Connect tools you already use and streamline processes across your ecosystem." class="text-[#4A6673] text-[15px] mt-1">
            {{feature_3_desc}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>