<!-- 
  Pricing Hero Section Component
  Hero section for pricing page
-->
<section
  data-component-type="Hero"
  class=" bg-[#F6F6F6] py-[15px] "
>
  <div  class="lg:max-w-[100%] max-w-full flex justify-center mx-auto px-5 pt-[80px] md:pt-[100px] lg:pt-[100px] items-center gap-5 mb-[20px]  ">


  <div class="lg:max-w-[40%] mt-[30px]">
    {{#if show_choose_smart_tag}}
    <div class="p-2 flex justify-center gap-3">
      <div class="bg-[#019D7633] 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="../assets/Ellipse 23.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-[#019D76] 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="Choose a Plan That Scales With You"
      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="Find the right learning path tailored to your goals and pace.  Transparent pricing, flexible access, and zero hidden conditions."
      class="text-[#4A6673] mt-0 pt-[20px] text-[16px] text-center lg:text-[22px]  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-[#019D76] text-[#FFFFFF] font-semibold px-6 py-3 border rounded-[50px] border-transparent hover:bg-[#019D7633] hover:text-[#019D76] hover:border-[#019D7633] 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>
  </div>
</section>
