<section class="bg-[#E2FC80] m-[2%] min-h-[1000px] md:min-h-[900px] lg:min-h-[800px] xl:min-h-[800px] relative overflow-hidden flex items-center rounded-[20px]  " data-component-type="Hero" data-component-slug="ss-technology-template-home_hero">
  <!-- Background Elements -->
  <div class="absolute inset-0 z-0 pointer-events-none">
     <!-- Add any subtle patterns here if needed -->
  </div>

  <div class="w-full max-w-[90%] mx-auto px-6 sm:px-12 lg:mt-[50px] md:mt-[220px] mt-[280px]  flex flex-col lg:flex-row items-end gap-12  z-10 relative">
    
    <!-- LEFT CONTENT -->
    <div class="lg:w-[90%] flex flex-col items-start text-left">
      
      <!-- Badge -->
      <div class="inline-flex items-center gap-2 bg-white/80 py-2 px-4 rounded-full mb-6 backdrop-blur-sm shadow-sm">
        <img src="{{badgeimg}}" data-node="badgeimg" data-node-type="file" data-node-label="badge Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" class="w-[18px] h-[18px] p-1 object-cover" alt="App Interface">
        <span class="text-[8px] md:text-[16px] font-semibold text-[#003D33] tracking-wide u" data-node="hero_badge" data-node-type="text" data-node-label="Hero Badge Text" data-node-default="Modern Finance. Built for Real Life.">{{hero_badge}}</span>
      </div>

      <!-- Heading -->
      <h1 class="text-4xl sm:text-5xl xl:text-6xl font-bold text-[#0A2519] leading-[1.1] mb-6 tracking-tight" data-node="hero_title" data-node-type="textarea" data-node-label="Hero Title" data-node-default="Finance made Simple, Secure & Personal.">
        {{hero_title}}
      </h1>

      <!-- Description -->
      <p class="text-lg text-[#1F3D2F] mb-8 leading-relaxed max-w-xl" data-node="hero_description" data-node-type="textarea" data-node-label="Hero Description" data-node-default="Send, save, spend, and grow your digital assets with confidence. We remove complexity from technology, so you can move faster, smarter, and safer.">
        {{hero_description}}
      </p>

      <!-- CTA -->
   <div class="mb-10 flex justify-center sm:justify-start">
  <a data-node="hero_cta_link" data-node-type="text" data-node-label="CTA Link" href="{{hero_cta_link}}" data-node-default="#" class="w-full sm:w-auto">
    <span data-node="hero_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Start Your Free Account" class="block w-full text-center bg-[#064E3B] text-white
             px-6 sm:px-8 py-3 sm:py-4
             rounded-xl font-bold text-base sm:text-lg
             hover:bg-[#022c22] transition-all
             shadow-lg hover:shadow-xl
             transform hover:-translate-y-1">
      {{hero_cta_text}}
    </span>
  </a>
</div>


      <!-- Social Proof / Users -->
      <div class="flex flex-col md:flex-row items-center gap-4 lg:mb-[60px]">
        <div class="flex -space-x-3">
           <img src="{{hero_user_1}}" data-node="hero_user_1" data-node-type="file" data-node-label="User Avatar 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956679/seltrix/templates/ss-technology-template/p1.jpg" class="w-12 h-12 rounded-full border-4 border-[#D3F976] object-cover" alt="User 1">
           <img src="{{hero_user_2}}" data-node="hero_user_2" data-node-type="file" data-node-label="User Avatar 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956681/seltrix/templates/ss-technology-template/p2.jpg" class="w-12 h-12 rounded-full border-4 border-[#D3F976] object-cover" alt="User 2">
           <img src="{{hero_user_3}}" data-node="hero_user_3" data-node-type="file" data-node-label="User Avatar 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956683/seltrix/templates/ss-technology-template/p3.jpg" class="w-12 h-12 rounded-full border-4 border-[#D3F976] object-cover" alt="User 3">
            <img src="{{hero_user_4}}" data-node="hero_user_4" data-node-type="file" data-node-label="User Avatar 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956686/seltrix/templates/ss-technology-template/p4.jpg" class="w-12 h-12 rounded-full border-4 border-[#D3F976] object-cover" alt="User 3">
            <img src="{{hero_user_5}}" data-node="hero_user_5" data-node-type="file" data-node-label="User Avatar 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956687/seltrix/templates/ss-technology-template/p5.jpg" class="w-12 h-12 rounded-full border-4 border-[#D3F976] object-cover" alt="User 3">
        
        </div>
        <div class="flex flex-col">
          <div class="flex items-center text-[#085C44] gap-1 text-sm">
             <span class="font-bold" data-node="hero_rating_text" data-node-type="text" data-node-label="Trust Text" data-node-default="4.5/5">
             {{hero_rating_text}}</span>
             <img src="{{starimg}}" data-node="starimg" data-node-type="file" data-node-label="Star Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" class="w-[18px] h-[18px] p-1 object-cover" alt="App Interface">
          </div>
          <span class="text-[#0A2519] font-medium text-sm" data-node="hero_trust_text" data-node-type="text" data-node-label="Trust Text" data-node-default="1m+ Users Trust Our Product">
            <b>{{hero_trust_text}}</b>
          </span>
        </div>
      </div>

    </div>

    <!-- RIGHT CONTENT - Phone Mockup & Cards -->
    <div class=" w-[100%] relative flex justify-center lg:justify-end items-end mt-[20px] lg:mt-0">
      
      <!-- Phone Container -->
      <div class="relative z-10 w-[300px] xl:w-[430px] lg:w-[350px]">
        <!-- Notch -->
        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 h-[30px] w-[120px] bg-black rounded-b-3xl z-30"></div>
        
        <!-- Screen -->
        <div class="  w-full relative">
           <!-- Dynamic Image for Screen Content -->
           <img src="{{hero_phone_screen}}" data-node="hero_phone_screen" data-node-type="file" data-node-label="Phone Screen Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956652/seltrix/templates/ss-technology-template/heroimg1.png" class="w-full h-full object-cover" alt="App Interface">
           
           <!-- Optional Overlay Elements mimicking the UI if user doesn't upload a full screenshot -->
          
        </div>
      </div>

      <!-- Floating Cards (Decorator) -->
     <!-- Floating Cards (Decorator) -->
<div class="absolute 
         top-[15%] sm:top-[20%] lg:top-[55%]
         left-1/2 md:left-auto
         -translate-x-1/2 md:translate-x-0
          md:right-[70%]
         lg:right-[43%] xl:right-[43%]
         bg-white p-3 sm:p-4
         rounded-xl shadow-xl z-20
         animate-bounce-slow
         hidden sm:block">
  <div class="flex items-center gap-3">
    <img src="{{maskimg}}" data-node="maskimg" data-node-type="file" data-node-label="Mask Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956676/seltrix/templates/ss-technology-template/Maskimg.png" class="w-[120px] h-[120px] sm:w-[150px] sm:h-[150px] lg:w-[200px] lg:h-[200px] object-cover" alt="App Interface">
  </div>
</div>


     

    </div>
  </div>
</section>