<section data-component-type="Hero" class="flex justify-center " data-component-slug="saas-template-landingpage-hero">
  <section class="section1 bg-[#ffffff] md:bg-[radial-gradient(circle,rgba(255,_255,_255,_1)_57%,_rgba(91,_72,_224,_1)_100%)] bg-cover bg-center max-w-[97%] mt-[1%] rounded-[20px] lg:h-auto w-[100%]">
    <div class="lg:max-w-[90%] max-w-full flex justify-center mx-auto px-5 pt-[80px] md:pt-[100px] lg:pt-[100px] items-center gap-5">
      <div>
        <!-- Badge -->
        {{#if show_hero_badge}}
        <div class="p-2 flex justify-center gap-3 lg:pt-[80px] pt-[50px]">
          <div class="bg-[#d8d3f8] flex gap-3 px-6 py-2 items-center rounded-[10px]">
            <img data-node="hero_badge_icon" data-node-type="file" data-node-label="Hero Badge Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868958/seltrix/templates/saas-template/landing-hero/El.png" src="{{hero_badge_icon}}" class="w-[15px] h-[15px]" alt="Badge Icon">
            <span data-node="hero_badge_text" data-node-type="text" data-node-label="Hero Badge Text" data-node-default="For Agencies" class="text-[#5F4BE2] text-center text-[16px] rounded-md font-bold">
              {{hero_badge_text}}
            </span>
          </div>
        </div>
        {{/if}}

        <!-- Main Heading -->
        <h1 data-node="hero_heading" data-node-type="text" data-node-label="Hero Main Heading" data-node-default="Transform CMR Workflows Into Real Measurable Results" class="text-[#151515] text-[20px] lg:text-[50px] text-center font-bold rounded-md mt-4">
          {{hero_heading}}
        </h1>

        <!-- Subheading -->
        <p data-node="hero_subheading" data-node-type="textarea" data-node-label="Hero Subheading" data-node-default="A unified platform that eliminates manual tasks, streamlines collaboration, and turns everyday workflows into performance-driven results." class="text-[#4A6673] mt-0 pt-0 text-[16px] text-center lg:text-[22px] font-bold rounded-md">
          {{hero_subheading}}
        </p>

        <!-- CTA Button -->
        <div class="p-2 flex justify-center gap-3">
          <a data-node="hero_cta_link" data-node-type="page_links" data-node-label="Hero CTA Link" data-node-default="#" href="{{hero_cta_link}}" class="mt-5 bg-[#5F4BE2] text-[#FFFFFF] font-semibold px-6 py-3 border rounded-[10px] border-transparent hover:bg-[#5F4BE2] hover:text-white hover:border-[#5F4BE2] transition-all duration-300 shadow-md hover:shadow-lg flex items-center gap-2">
            <span data-node="hero_cta_text" data-node-type="text" data-node-label="Hero CTA Button Text" data-node-default="Start for Free!">{{hero_cta_text}}</span>
          </a>
        </div>

        <!-- Hero Image -->
        <div class="flex justify-center mt-[30px]">
          <img data-node="hero_image" data-node-type="file" data-node-label="Hero Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868962/seltrix/templates/saas-template/landing-hero/secondimg.png" src="{{hero_image}}" class="w-[100%]" alt="Hero Image">
        </div>
      </div>
    </div>
  </section>
</section>