<section data-component-type="Content" class="py-20" data-component-slug="saas-template-our-people">
  <div class="max-w-[90%] mx-auto text-center">
    <!-- Top Label -->
    <span data-node="people_tag" data-node-type="text" data-node-label="People Section Tag" data-node-default="Our People" class="px-4 py-2 rounded-[10px] bg-[#5F4BE233] text-[#5F4BE2] text-sm font-medium">
      {{people_tag}}
    </span>

    <!-- Heading -->
    <h2 data-node="people_heading" data-node-type="text" data-node-label="People Section Heading" data-node-default="A team committed to crafting smarter digital workflows" class="mt-6 text-3xl md:text-4xl font-bold text-[#151515]">
      {{people_heading}}
    </h2>

    <!-- Subtext -->
    <p data-node="people_subtext" data-node-type="textarea" data-node-label="People Section Subtext" data-node-default="Our experts, designers, and engineers bring experience and passion to every update, feature, and solution we deliver." class="mt-4 text-[#4A6673] max-w-2xl mx-auto">
      {{people_subtext}}
    </p>
  </div>

  <!-- Team Grid -->
  <div class="mt-16 max-w-[90%] mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10">
    <!-- Card 1 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img data-node="team_member_1_image" data-node-type="file" data-node-label="Team Member 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868965/seltrix/templates/saas-template/our-people/Frame1.png" src="{{team_member_1_image}}" class="w-full h-full object-cover" alt="Team member">
      </div>
      <h3 data-node="team_member_1_name" data-node-type="text" data-node-label="Team Member 1 Name" data-node-default="Evan Mitchell" class="mt-4 font-semibold text-[#000000]">
        {{team_member_1_name}}
      </h3>
      <p data-node="team_member_1_role" data-node-type="text" data-node-label="Team Member 1 Role" data-node-default="Product Director" class="text-sm text-[#5F4BE2] mt-1">
        {{team_member_1_role}}
      </p>
    </div>

    <!-- Card 2 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img data-node="team_member_2_image" data-node-type="file" data-node-label="Team Member 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868966/seltrix/templates/saas-template/our-people/Frame2.png" src="{{team_member_2_image}}" class="w-full h-full object-cover" alt="Team member">
      </div>
      <h3 data-node="team_member_2_name" data-node-type="text" data-node-label="Team Member 2 Name" data-node-default="Max Crawford" class="mt-4 font-semibold text-[#000000]">
        {{team_member_2_name}}
      </h3>
      <p data-node="team_member_2_role" data-node-type="text" data-node-label="Team Member 2 Role" data-node-default="Lead UX Architect" class="text-sm text-[#5F4BE2] mt-1">
        {{team_member_2_role}}
      </p>
    </div>

    <!-- Card 3 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img data-node="team_member_3_image" data-node-type="file" data-node-label="Team Member 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868967/seltrix/templates/saas-template/our-people/Frame3.png" src="{{team_member_3_image}}" class="w-full h-full object-cover" alt="Team member">
      </div>
      <h3 data-node="team_member_3_name" data-node-type="text" data-node-label="Team Member 3 Name" data-node-default="Marco Reyes" class="mt-4 font-semibold text-[#000000]">
        {{team_member_3_name}}
      </h3>
      <p data-node="team_member_3_role" data-node-type="text" data-node-label="Team Member 3 Role" data-node-default="Engineering Head" class="text-sm text-[#5F4BE2] mt-1">
        {{team_member_3_role}}
      </p>
    </div>

    <!-- Card 4 -->
    <div class="text-start mt-[40px] md:mt-[0px]">
      <div class="w-full h-full bg-gray-100 rounded-xl overflow-hidden">
        <img data-node="team_member_4_image" data-node-type="file" data-node-label="Team Member 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868969/seltrix/templates/saas-template/our-people/Frame4.png" src="{{team_member_4_image}}" class="w-full h-full object-cover" alt="Team member">
      </div>
      <h3 data-node="team_member_4_name" data-node-type="text" data-node-label="Team Member 4 Name" data-node-default="Richard Bloom" class="mt-4 font-semibold text-[#000000]">
        {{team_member_4_name}}
      </h3>
      <p data-node="team_member_4_role" data-node-type="text" data-node-label="Team Member 4 Role" data-node-default="Customer Success Lead" class="text-sm text-[#5F4BE2] mt-1">
        {{team_member_4_role}}
      </p>
    </div>
  </div>
</section>