<section data-component-type="Content" data-component-slug="ss-technology-template-connect">

     <div class="py-16 md:py-18 max-w-[90%] mx-auto bg-white">  
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
    
    <!-- Left Column: Content -->
    <div class="flex flex-col items-start text-left">
        <!-- Badge -->
        <div class="inline-flex items-center gap-2 bg-[#E2FC80] px-4 py-2 rounded-lg mb-6">
            <img src="{{connect_badge_icon}}" data-node="connect_badge_icon" data-node-type="file" data-node-label="Badge Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" class="w-4 h-4 object-contain" alt="icon">
            <span class="text-[#0A2519] font-medium text-sm" data-node="connect_badge_text" data-node-type="text" data-node-default="Connect the tools you already use">{{connect_badge_text}}</span>
        </div>

      <h2 class="text-4xl md:text-5xl font-bold text-[#003D33] leading-tight mb-6" data-node="connect_heading" data-node-type="textarea" data-node-default="Seamless Integrations">
          {{connect_heading}}
      </h2>
      
      <p class="text-[#4A736D] text-lg leading-relaxed max-w-lg" data-node="connect_desc" data-node-type="textarea" data-node-default="Our platform integrates effortlessly with leading SaaS products, ensuring smooth data flow, reduced manual work, and faster financial decision-making.">
         {{connect_desc}}
      </p>
    </div>

    <!-- Right Column: Logo Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 md:gap-6">
        <!-- Logo 1 -->
        <div class="bg-[#F8F9FA] rounded-xl  flex items-center justify-center h-24 hover:shadow-md transition-shadow">
            <img src="{{connect_logo_1}}" data-node="connect_logo_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956721/seltrix/templates/ss-technology-template/stripe.png" alt="Logo" class="xl:max-h-12 xl:max-h-12 max-h-8 w-auto object-fit 
             hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
        </div>
        <!-- Logo 2 -->
        <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
             <img src="{{connect_logo_2}}" data-node="connect_logo_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956688/seltrix/templates/ss-technology-template/paypal.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto 
              object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
        </div>
        <!-- Logo 3 -->
        <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
             <img src="{{connect_logo_3}}" data-node="connect_logo_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956697/seltrix/templates/ss-technology-template/razorpay.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
        </div>
        <!-- Logo 4 -->
        <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
             <img src="{{connect_logo_4}}" data-node="connect_logo_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956696/seltrix/templates/ss-technology-template/quickbooks.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
        </div>
        <!-- Logo 5 -->
        <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
             <img src="{{connect_logo_5}}" data-node="connect_logo_5" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956727/seltrix/templates/ss-technology-template/xero.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
        </div>
        <!-- Logo 6 -->
        <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
             <img src="{{connect_logo_6}}" data-node="connect_logo_6" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956728/seltrix/templates/ss-technology-template/zoho.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
        </div>
         <!-- Logo 7 -->
         <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
            <img src="{{connect_logo_7}}" data-node="connect_logo_7" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956700/seltrix/templates/ss-technology-template/salesforce.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
       </div>
       <!-- Logo 8 -->
       <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
            <img src="{{connect_logo_8}}" data-node="connect_logo_8" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956655/seltrix/templates/ss-technology-template/hubspot.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
       </div>
       <!-- Logo 9 -->
       <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
            <img src="{{connect_logo_9}}" data-node="connect_logo_9" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956710/seltrix/templates/ss-technology-template/slack.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
       </div>
       <!-- Logo 10 -->
       <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
            <img src="{{connect_logo_10}}" data-node="connect_logo_10" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956708/seltrix/templates/ss-technology-template/shopify.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
       </div>
       <!-- Logo 11 -->
       <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
            <img src="{{connect_logo_11}}" data-node="connect_logo_11" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956629/seltrix/templates/ss-technology-template/aws.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
       </div>
       <!-- Logo 12 -->
       <div class="bg-[#F8F9FA] rounded-xl p-3 flex items-center justify-center h-24 hover:shadow-md transition-shadow">
            <img src="{{connect_logo_12}}" data-node="connect_logo_12" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956647/seltrix/templates/ss-technology-template/google.png" alt="Logo" class="xl:max-h-12 max-h-8 w-auto object-contain hover:grayscale grayscale-0 transition-all hover:opacity-70 opacity-100">
       </div>
    </div>

  </div>

  </div>
</section>