<section data-component-type="Content" class="w-full md:py-20 py-[30px] bg-white" data-component-slug="saas-template-plans">
  <div class="max-w-[1400px] mx-auto grid md:grid-cols-3 gap-8 px-5">
    <!-- BASIC PLAN -->
    <div class="border shadow-sm rounded-xl p-8 flex flex-col justify-between">
      <div>
        <h3 data-node="plan_basic_name" data-node-type="text" data-node-label="Basic Plan Name" data-node-default="Basic Plan" class="text-gray-800 font-semibold text-lg">
          {{plan_basic_name}}
        </h3>
        <p class="text-4xl font-bold mt-3">
          <span data-node="plan_basic_price" data-node-type="text" data-node-label="Basic Plan Price" data-node-default="$120">{{plan_basic_price}}</span>
          <span data-node="plan_basic_duration" data-node-type="text" data-node-label="Basic Plan Duration" data-node-default="/m" class="text-xl font-normal">{{plan_basic_duration}}</span>
        </p>
        <p data-node="plan_basic_note" data-node-type="text" data-node-label="Basic Plan Note" data-node-default="Pause or cancel anytime" class="text-xs text-gray-500 mt-1">
          {{plan_basic_note}}
        </p>

        <a data-node="plan_basic_cta_link" data-node-type="page_links" data-node-label="Basic Plan CTA Link" data-node-default="#" href="{{plan_basic_cta_link}}" class="block w-full mt-6 bg-[#5F4BE2] hover:bg-[#5F4BE2] text-white py-3 rounded-lg font-medium text-center">
          <span data-node="plan_basic_cta_text" data-node-type="text" data-node-label="Basic Plan CTA Text" data-node-default="Get Started">{{plan_basic_cta_text}}</span>
        </a>

        <p class="font-semibold text-gray-800 mt-8" data-node="plan_basic_What" data-node-type="text" data-node-label="Basic Plan what" data-node-default="What's included:">{{plan_basic_What}}</p>
        <ul class="space-y-3 text-sm mt-4 text-gray-700">
          <li class="flex items-center gap-2">
            <img data-node="plan_basic_feature_1_icon" data-node-type="file" data-node-label="Basic Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_basic_feature_1_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_basic_feature_1_text" data-node-type="text" data-node-label="Basic Feature 1 Text" data-node-default="Core tools">{{plan_basic_feature_1_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_basic_feature_2_icon" data-node-type="file" data-node-label="Basic Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_basic_feature_2_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_basic_feature_2_text" data-node-type="text" data-node-label="Basic Feature 2 Text" data-node-default="Single workspace">{{plan_basic_feature_2_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_basic_feature_3_icon" data-node-type="file" data-node-label="Basic Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_basic_feature_3_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_basic_feature_3_text" data-node-type="text" data-node-label="Basic Feature 3 Text" data-node-default="Basic analytics">{{plan_basic_feature_3_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_basic_feature_4_icon" data-node-type="file" data-node-label="Basic Feature 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_basic_feature_4_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_basic_feature_4_text" data-node-type="text" data-node-label="Basic Feature 4 Text" data-node-default="Standard support">{{plan_basic_feature_4_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_basic_feature_5_icon" data-node-type="file" data-node-label="Basic Feature 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_basic_feature_5_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_basic_feature_5_text" data-node-type="text" data-node-label="Basic Feature 5 Text" data-node-default="10GB bandwidth">{{plan_basic_feature_5_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_basic_feature_6_icon" data-node-type="file" data-node-label="Basic Feature 6 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_basic_feature_6_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_basic_feature_6_text" data-node-type="text" data-node-label="Basic Feature 6 Text" data-node-default="30 pages">{{plan_basic_feature_6_text}}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- MOST POPULAR PLAN -->
    <div class="border shadow-lg rounded-xl p-8 relative bg-[#F5F4FD] rounded-t-[20px] scale-105">
      <!-- Ribbon -->
      <div class="absolute top-0 left-1/2 -translate-x-1/2 bg-[#5F4BE2] w-[100%] text-white text-sm px-6 py-1 rounded-t-[20px] font-medium">
        <h3 data-node="plan_standard_ribbon" data-node-type="text" data-node-label="Most Popular Ribbon" data-node-default="Most Popular" class="text-[20px] p-3">
          {{plan_standard_ribbon}}
        </h3>
      </div>

      <h3 data-node="plan_standard_name" data-node-type="text" data-node-label="Standard Plan Name" data-node-default="Standard Plan" class="text-gray-800 font-semibold text-lg mt-[45px]">
        {{plan_standard_name}}
      </h3>
      <p class="text-4xl font-bold mt-3">
        <span data-node="plan_standard_price" data-node-type="text" data-node-label="Standard Plan Price" data-node-default="$250">{{plan_standard_price}}</span>
        <span data-node="plan_standard_duration" data-node-type="text" data-node-label="Standard Plan Duration" data-node-default="/m" class="text-xl font-normal">{{plan_standard_duration}}</span>
      </p>
      <p data-node="plan_standard_note" data-node-type="text" data-node-label="Standard Plan Note" data-node-default="Pause or cancel anytime" class="text-xs text-gray-500 mt-1">
        {{plan_standard_note}}
      </p>

      <a data-node="plan_standard_cta_link" data-node-type="page_links" data-node-label="Standard Plan CTA Link" data-node-default="#" href="{{plan_standard_cta_link}}" class="block w-full mt-6 bg-[#5F4BE2] hover:bg-[#5F4BE2] text-white py-3 rounded-lg font-medium text-center">
        <span data-node="plan_standard_cta_text" data-node-type="text" data-node-label="Standard Plan CTA Text" data-node-default="Get Started">{{plan_standard_cta_text}}</span>
      </a>

      <p class="font-semibold text-gray-800 mt-8" data-node="plan_standard_What" data-node-type="text" data-node-label="standard Plan what" data-node-default="What's included:">{{plan_standard_What}}</p>
      <ul class="space-y-3 text-sm mt-4 text-gray-700">
        <li class="flex items-center gap-2">
          <img data-node="plan_standard_feature_1_icon" data-node-type="file" data-node-label="Standard Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_standard_feature_1_icon}}" class="w-4 h-4" alt="Icon">
          <span data-node="plan_standard_feature_1_text" data-node-type="text" data-node-label="Standard Feature 1 Text" data-node-default="Advanced tools">{{plan_standard_feature_1_text}}</span>
        </li>
        <li class="flex items-center gap-2">
          <img data-node="plan_standard_feature_2_icon" data-node-type="file" data-node-label="Standard Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_standard_feature_2_icon}}" class="w-4 h-4" alt="Icon">
          <span data-node="plan_standard_feature_2_text" data-node-type="text" data-node-label="Standard Feature 2 Text" data-node-default="Multi-workspace">{{plan_standard_feature_2_text}}</span>
        </li>
        <li class="flex items-center gap-2">
          <img data-node="plan_standard_feature_3_icon" data-node-type="file" data-node-label="Standard Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_standard_feature_3_icon}}" class="w-4 h-4" alt="Icon">
          <span data-node="plan_standard_feature_3_text" data-node-type="text" data-node-label="Standard Feature 3 Text" data-node-default="Priority support">{{plan_standard_feature_3_text}}</span>
        </li>
        <li class="flex items-center gap-2">
          <img data-node="plan_standard_feature_4_icon" data-node-type="file" data-node-label="Standard Feature 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_standard_feature_4_icon}}" class="w-4 h-4" alt="Icon">
          <span data-node="plan_standard_feature_4_text" data-node-type="text" data-node-label="Standard Feature 4 Text" data-node-default="100GB bandwidth">{{plan_standard_feature_4_text}}</span>
        </li>
        <li class="flex items-center gap-2">
          <img data-node="plan_standard_feature_5_icon" data-node-type="file" data-node-label="Standard Feature 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_standard_feature_5_icon}}" class="w-4 h-4" alt="Icon">
          <span data-node="plan_standard_feature_5_text" data-node-type="text" data-node-label="Standard Feature 5 Text" data-node-default="150 pages">{{plan_standard_feature_5_text}}</span>
        </li>
        <li class="flex items-center gap-2">
          <img data-node="plan_standard_feature_6_icon" data-node-type="file" data-node-label="Standard Feature 6 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_standard_feature_6_icon}}" class="w-4 h-4" alt="Icon">
          <span data-node="plan_standard_feature_6_text" data-node-type="text" data-node-label="Standard Feature 6 Text" data-node-default="10 CMS collections">{{plan_standard_feature_6_text}}</span>
        </li>
      </ul>
    </div>

    <!-- PRO PLAN -->
    <div class="border shadow-sm rounded-xl p-8 flex flex-col justify-between">
      <div>
        <h3 data-node="plan_pro_name" data-node-type="text" data-node-label="Pro Plan Name" data-node-default="Pro Plan" class="text-gray-800 font-semibold text-lg">
          {{plan_pro_name}}
        </h3>
        <p class="text-4xl font-bold mt-3">
          <span data-node="plan_pro_price" data-node-type="text" data-node-label="Pro Plan Price" data-node-default="$550">{{plan_pro_price}}</span>
          <span data-node="plan_pro_duration" data-node-type="text" data-node-label="Pro Plan Duration" data-node-default="/m" class="text-xl font-normal">{{plan_pro_duration}}</span>
        </p>
        <p data-node="plan_pro_note" data-node-type="text" data-node-label="Pro Plan Note" data-node-default="Pause or cancel anytime" class="text-xs text-gray-500 mt-1">
          {{plan_pro_note}}
        </p>

        <a data-node="plan_pro_cta_link" data-node-type="page_links" data-node-label="Pro Plan CTA Link" data-node-default="#" href="{{plan_pro_cta_link}}" class="block w-full mt-6 bg-[#5F4BE2] hover:bg-[#5F4BE2] text-white py-3 rounded-lg font-medium text-center">
          <span data-node="plan_pro_cta_text" data-node-type="text" data-node-label="Pro Plan CTA Text" data-node-default="Get Started">{{plan_pro_cta_text}}</span>
        </a>

        <p class="font-semibold text-gray-800 mt-8" data-node="plan_standard_What" data-node-type="text" data-node-label="Pro Plan what" data-node-default="What's included:">{{plan_Pro_What}}</p>
        <ul class="space-y-3 text-sm mt-4 text-gray-700">
          <li class="flex items-center gap-2">
            <img data-node="plan_pro_feature_1_icon" data-node-type="file" data-node-label="Pro Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_pro_feature_1_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_pro_feature_1_text" data-node-type="text" data-node-label="Pro Feature 1 Text" data-node-default="Full suite">{{plan_pro_feature_1_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_pro_feature_2_icon" data-node-type="file" data-node-label="Pro Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_pro_feature_2_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_pro_feature_2_text" data-node-type="text" data-node-label="Pro Feature 2 Text" data-node-default="Unlimited workspaces">{{plan_pro_feature_2_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_pro_feature_3_icon" data-node-type="file" data-node-label="Pro Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868973/seltrix/templates/saas-template/plans/tick.png" src="{{plan_pro_feature_3_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_pro_feature_3_text" data-node-type="text" data-node-label="Pro Feature 3 Text" data-node-default="Premium support">{{plan_pro_feature_3_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_pro_feature_4_icon" data-node-type="file" data-node-label="Pro Feature 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_pro_feature_4_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_pro_feature_4_text" data-node-type="text" data-node-label="Pro Feature 4 Text" data-node-default="300GB bandwidth">{{plan_pro_feature_4_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_pro_feature_5_icon" data-node-type="file" data-node-label="Pro Feature 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_pro_feature_5_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_pro_feature_5_text" data-node-type="text" data-node-label="Pro Feature 5 Text" data-node-default="300 pages">{{plan_pro_feature_5_text}}</span>
          </li>
          <li class="flex items-center gap-2">
            <img data-node="plan_pro_feature_6_icon" data-node-type="file" data-node-label="Pro Feature 6 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765868974/seltrix/templates/saas-template/plans/wrong.png" src="{{plan_pro_feature_6_icon}}" class="w-4 h-4" alt="Icon">
            <span data-node="plan_pro_feature_6_text" data-node-type="text" data-node-label="Pro Feature 6 Text" data-node-default="20 CMS collections">{{plan_pro_feature_6_text}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>