<section data-component-type="Hero" 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 mb-[10px] mt-[50px]" data-component-slug="saas-template-pricing_hero">
  <div>
    {{#if show_choose_smart_tag}}
    <div class="p-2 flex justify-center gap-3 mb-[20px]">
      <div class="bg-[#d8d3f8] flex gap-3 px-6 py-2 items-center rounded-[10px]">
        <img data-node="choose_smart_tag_icon" data-node-type="file" data-node-label="Tag Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868977/seltrix/templates/saas-template/pricinghero/Ellipse%2023.png" src="{{choose_smart_tag_icon}}" class="w-[15px] h-[15px]" alt="Logo">
        <span data-node="choose_smart_tag" data-node-type="text" data-node-label="Tag Label" data-node-default="Choose Smart" class="text-[#5F4BE2] text-center text-[16px] rounded-md font-bold">
          {{choose_smart_tag}}
        </span>
      </div>
    </div>
    {{/if}}

    <h1 data-node="choose_smart_heading" data-node-type="text" data-node-label="Main Heading" data-node-default="Flexible plans built for every growing workflow" class="text-[#151515] text-[20px] lg:text-[50px] text-center font-bold rounded-md">
      {{choose_smart_heading}}
    </h1>

    <p data-node="choose_smart_subtext" data-node-type="textarea" data-node-label="Subtext" data-node-default="Select a plan that scales with your goals, not your limitations. No confusion, no hidden fees, just clear value for every user." class="text-[#4A6673] mt-0 pt-[20px] text-[16px] text-center lg:text-[22px] font-bold rounded-md">
      {{choose_smart_subtext}}
    </p>

    <div class="p-2 flex justify-center gap-3">
      <a data-node="choose_smart_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{choose_smart_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="choose_smart_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Start Your Free Trial">{{choose_smart_cta_text}}</span>
      </a>
    </div>
  </div>
</section>