import{_ as y,o as a,c as v,a as e,d as k,u as w,e as _,j as o,f as r,g as t,M as p,w as x,k as h,T as g,m as B,x as j,$ as i}from"./index-deud-udu.js";import{c as S,_ as m,I as u}from"./icon-code-DW9QlmYJ.js";const F={},P={width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},$=e("path",{d:"M4 12H20M20 12L14 6M20 12L14 18",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,-1),N=[$];function M(f,d){return a(),v("svg",P,N)}const s=y(F,[["render",M]]),C=e("ul",{class:"flex space-x-2 rtl:space-x-reverse"},[e("li",null,[e("a",{href:"javascript:;",class:"text-primary hover:underline"},"Components")]),e("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[e("span",null,"Pricing Table")])],-1),H={class:"pt-5 space-y-8"},A={class:"panel"},T={class:"flex items-center justify-between mb-5"},G=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),D={class:"flex items-center"},L={class:"mb-5"},U={class:"max-w-[320px] md:max-w-[990px] mx-auto"},V={class:"md:flex justify-between space-y-4 md:space-y-0 md:space-x-4 rtl:space-x-reverse"},I={class:"p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary"},E=i('<h3 class="text-xl lg:text-2xl">Beginner Savers</h3><div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div><p class="text-[15px]">For people who are starting out in the water saving business</p><div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$19</strong> / monthly </div>',4),R={class:"space-y-2.5 mb-5 font-semibold group-hover:text-primary"},W={class:"flex justify-center items-center"},X={class:"flex justify-center items-center"},z={class:"flex justify-center items-center"},O=e("a",{href:"#",target:"_self",class:"btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50"},"Buy Now",-1),Y={class:"p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary"},q=i('<h3 class="text-xl lg:text-2xl">Advanced Savers</h3><div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div><p class="text-[15px]">For experienced water savers who&#39;d like to push their limits</p><div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$29</strong> / monthly </div>',4),J={class:"space-y-2.5 mb-5 font-semibold group-hover:text-primary"},K={class:"flex justify-center items-center"},Q={class:"flex justify-center items-center"},Z={class:"flex justify-center items-center"},ee=e("a",{href:"#",target:"_self",class:"btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50"},"Buy Now",-1),te={class:"p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary"},re=i('<h3 class="text-xl lg:text-2xl">Pro Savers</h3><div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div><p class="text-[15px]">For all the professionals who&#39;d like to educate others, too</p><div class="my-7 p-2.5 text-center text-lg group-hover:text-primary"><strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$79</strong> / monthly </div>',4),se={class:"space-y-2.5 mb-5 font-semibold group-hover:text-primary"},le={class:"flex justify-center items-center"},oe={class:"flex justify-center items-center"},ae={class:"flex justify-center items-center"},ie=e("a",{href:"#",target:"_self",class:"btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50"},"Buy Now",-1),de=e("pre",null,`<!-- basic -->
<div class="max-w-[320px] md:max-w-[990px] mx-auto">
  <div class="md:flex justify-between space-y-4 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
    <div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
      <h3 class="text-xl lg:text-2xl">Beginner Savers</h3>
      <div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
      <p class="text-[15px]">For people who are starting out in the water saving business</p>
      <div class="my-7 p-2.5 text-center text-lg group-hover:text-primary">
        <strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$19</strong> / monthly
      </div>
      <ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Free water saving e-book
        </li>
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Free access to forums
        </li>
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Beginners tips
        </li>
      </ul>
      <a
        href="#"
        target="_self"
        class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50"
        >Buy Now</a
      >
    </div>
    <div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
      <h3 class="text-xl lg:text-2xl">Advanced Savers</h3>
      <div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
      <p class="text-[15px]">For experienced water savers who'd like to push their limits</p>
      <div class="my-7 p-2.5 text-center text-lg group-hover:text-primary">
        <strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$29</strong> / monthly
      </div>
      <ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Free water saving e-book
        </li>
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Free access to forums
        </li>
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Advanced saving tips
        </li>
      </ul>
      <a
        href="#"
        target="_self"
        class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50"
        >Buy Now</a
      >
    </div>
    <div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
      <h3 class="text-xl lg:text-2xl">Pro Savers</h3>
      <div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
      <p class="text-[15px]">For all the professionals who'd like to educate others, too</p>
      <div class="my-7 p-2.5 text-center text-lg group-hover:text-primary">
        <strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$79</strong> / monthly
      </div>
      <ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Access to all books
        </li>
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Unlimited board topics
        </li>
        <li class="flex justify-center items-center">
          <svg> ... </svg>
          Beginners tips
        </li>
      </ul>
      <a
        href="#"
        target="_self"
        class="btn text-black shadow-none group-hover:text-primary group-hover:border-primary group-hover:bg-primary/10 dark:text-white-dark dark:border-white-dark/50"
        >Buy Now</a
      >
    </div>
  </div>
</div>
`,-1),ne={class:"panel"},ce={class:"flex items-center justify-between mb-5"},be=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Toggle",-1),pe={class:"flex items-center"},xe={class:"mb-5"},he={class:"max-w-[320px] md:max-w-[1140px] mx-auto dark:text-white-dark"},me={class:"mt-5 md:mt-10 text-center flex justify-center space-x-4 rtl:space-x-reverse font-semibold text-base"},ue={class:"w-12 h-6 relative"},ge=e("span",{for:"custom_switch_checkbox1",class:"outline_checkbox bg-icon border-2 border-[#ebedf2] dark:border-white-dark block h-full rounded-full before:absolute ltr:before:left-1 rtl:before:right-1 before:bg-[#ebedf2] dark:before:bg-white-dark before:bottom-1 before:w-4 before:h-4 before:rounded-full before:bg-[url(/assets/images/close.svg)] before:bg-no-repeat before:bg-center ltr:peer-checked:before:left-7 rtl:peer-checked:before:right-7 peer-checked:before:bg-[url(/assets/images/checked.svg)] peer-checked:border-primary peer-checked:before:bg-primary before:transition-all before:duration-300"},null,-1),ve=e("span",{class:"badge bg-success rounded-full absolute ltr:left-full rtl:right-full whitespace-nowrap ltr:ml-2 rtl:mr-2 my-auto hidden"},"20% Off",-1),fe=i('<div class="md:flex space-y-4 md:space-y-0 mt-5 md:mt-16 text-white-dark"><div class="p-4 lg:p-9 border ltr:md:border-r-0 rtl:md:border-l-0 border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md ltr:md:rounded-r-none rtl:md:rounded-l-none transition-all duration-300 hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]"><h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Cloud Hosting</h3><p>cPanel/WHM included. Intel Xeon E3 with guaranteed 2GB RAM.</p><div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$25</strong> / monthly </div><div class="mb-6"><strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Cloud Hosting Features</strong><ul class="space-y-3"><li>Single Domain</li><li>50 GB SSD</li><li>1 TB Premium Bandwidth</li></ul></div><button type="button" class="btn btn-dark w-full">Buy Now</button></div><div class="relative p-4 pt-14 lg:p-9 border border-[#e0e6ed] dark:border-[#1b2e4b] transition-all duration-300 rounded-t-md"><div class="absolute top-0 md:-top-[30px] inset-x-0 bg-primary text-white h-10 flex items-center justify-center text-base rounded-t-md"> Most Popular </div><h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">VPS Hosting</h3><p>cPanel/WHM included. Intel Xeon E5 with guaranteed 4GB RAM.</p><div class="my-7 p-2.5 text-center text-lg"><strong class="text-primary text-xl lg:text-4xl">$70</strong> / monthly</div><div class="mb-6"><strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">VPS Hosting Features</strong><ul class="space-y-3"><li>5 Domains</li><li>100 GB SSD</li><li>2 TB Premium Bandwidth</li></ul></div><button type="button" class="btn btn-primary w-full">Buy Now</button></div><div class="p-4 lg:p-9 border ltr:md:border-l-0 rtl:md:border-r-0 border-[#e0e6ed] dark:border-[#1b2e4b] rounded-md ltr:md:rounded-l-none rtl:md:rounded-r-none transition-all duration-300 hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]"><h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Business Hosting</h3><p>cPanel/WHM included. Intel Xeon E5 with guaranteed 8GB RAM.</p><div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$115</strong> / monthly </div><div class="mb-6"><strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Business Hosting Features</strong><ul class="space-y-3"><li>Unlimited Domains</li><li>1 TB SSD</li><li>5 TB Premium Bandwidth</li></ul></div><button type="button" class="btn btn-dark w-full">Buy Now</button></div></div>',1),ye=e("pre",null,`<!-- toggle -->
<div class="max-w-[320px] md:max-w-[1140px] mx-auto dark:text-white-dark">
  <div class="mt-5 md:mt-10 text-center flex justify-center space-x-4 rtl:space-x-reverse font-semibold text-base">
    <span :class="!yearlyPrice ? 'text-primary' : 'text-white-dark'">Monthly</span>

    <label class="w-12 h-6 relative">
      <input
        id="custom_switch_checkbox1"
        type="checkbox"
        class="custom_switch absolute ltr:left-0 rtl:right-0 top-0 w-full h-full opacity-0 z-10 cursor-pointer peer"
        v-model="yearlyPrice"
      />
      <span
        for="custom_switch_checkbox1"
        class="
          outline_checkbox
          bg-icon
          border-2 border-[#ebedf2]
          dark:border-white-dark
          block
          h-full
          rounded-full
          before:absolute
          ltr:before:left-1
          rtl:before:right-1
          before:bg-[#ebedf2]
          dark:before:bg-white-dark
          before:bottom-1 before:w-4 before:h-4 before:rounded-full before:bg-[url(/assets/images/close.svg)] before:bg-no-repeat before:bg-center
          ltr:peer-checked:before:left-7
          rtl:peer-checked:before:right-7
          peer-checked:before:bg-[url(/assets/images/checked.svg)] peer-checked:border-primary peer-checked:before:bg-primary
          before:transition-all before:duration-300
        "
      ></span>
    </label>
    <span class="relative" :class="yearlyPrice ? 'text-primary' : 'text-white-dark'"
      >Yearly <span class="badge bg-success rounded-full absolute ltr:left-full rtl:right-full whitespace-nowrap ltr:ml-2 rtl:mr-2 my-auto hidden">20% Off</span></span
    >
  </div>
  <div class="md:flex space-y-4 md:space-y-0 mt-5 md:mt-16 text-white-dark">
    <div
      class="
        p-4
        lg:p-9
        border
        ltr:md:border-r-0
        rtl:md:border-l-0
        border-[#e0e6ed]
        dark:border-[#1b2e4b]
        rounded-md
        ltr:md:rounded-r-none
        rtl:md:rounded-l-none
        transition-all
        duration-300
        hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
      "
    >
      <h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Cloud Hosting</h3>
      <p>cPanel/WHM included. Intel Xeon E3 with guaranteed 2GB RAM.</p>
      <div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$25</strong> / monthly</div>
      <div class="mb-6">
        <strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Cloud Hosting Features</strong>
        <ul class="space-y-3">
          <li>Single Domain</li>
          <li>50 GB SSD</li>
          <li>1 TB Premium Bandwidth</li>
        </ul>
      </div>
      <button type="button" class="btn btn-dark w-full">Buy Now</button>
    </div>
    <div class="relative p-4 pt-14 lg:p-9 border border-[#e0e6ed] dark:border-[#1b2e4b] transition-all duration-300 rounded-t-md">
      <div class="absolute top-0 md:-top-[30px] inset-x-0 bg-primary text-white h-10 flex items-center justify-center text-base rounded-t-md">Most Popular</div>
      <h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">VPS Hosting</h3>
      <p>cPanel/WHM included. Intel Xeon E5 with guaranteed 4GB RAM.</p>
      <div class="my-7 p-2.5 text-center text-lg"><strong class="text-primary text-xl lg:text-4xl">$70</strong> / monthly</div>
      <div class="mb-6">
        <strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">VPS Hosting Features</strong>
        <ul class="space-y-3">
          <li>5 Domains</li>
          <li>100 GB SSD</li>
          <li>2 TB Premium Bandwidth</li>
        </ul>
      </div>
      <button type="button" class="btn btn-primary w-full">Buy Now</button>
    </div>
    <div
      class="
        p-4
        lg:p-9
        border
        ltr:md:border-l-0
        rtl:md:border-r-0
        border-[#e0e6ed]
        dark:border-[#1b2e4b]
        rounded-md
        ltr:md:rounded-l-none
        rtl:md:rounded-r-none
        transition-all
        duration-300
        hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
      "
    >
      <h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Business Hosting</h3>
      <p>cPanel/WHM included. Intel Xeon E5 with guaranteed 8GB RAM.</p>
      <div class="my-7 p-2.5 text-center text-lg"><strong class="text-[#3b3f5c] dark:text-white-light text-xl lg:text-3xl">$115</strong> / monthly</div>
      <div class="mb-6">
        <strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Business Hosting Features</strong>
        <ul class="space-y-3">
          <li>Unlimited Domains</li>
          <li>1 TB SSD</li>
          <li>5 TB Premium Bandwidth</li>
        </ul>
      </div>
      <button type="button" class="btn btn-dark w-full">Buy Now</button>
    </div>
  </div>
</div>
`,-1),ke={class:"panel"},we={class:"flex items-center justify-between mb-5"},_e=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Animated",-1),Be={class:"flex items-center"},je=i('<div class="mb-5"><div class="max-w-[1140px] mx-auto mt-20 dark:text-white-dark"><div class="md:flex justify-between space-y-14 md:space-y-0 md:space-x-4 rtl:space-x-reverse"><div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group"><div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0"><span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$49</span><h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Freelancer</h3><p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="p-5"><ul class="space-y-2.5 mb-5 font-semibold"><li>Support forum</li><li>Free hosting</li><li>2 hours of support</li><li>5GB of storage space</li></ul><a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a></div></div><div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group"><div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0"><span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$89</span><h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Small business</h3><p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="p-5"><ul class="space-y-2.5 mb-5 font-semibold"><li>Unlimited calls</li><li>Free hosting</li><li>10 hours of support</li><li>10GB of storage space</li></ul><a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a></div></div><div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group"><div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0"><span class="bg-white dark:bg-[#0e1726] text-[#3b3f5c] dark:text-white-light border-2 border-primary w-[70px] h-[70px] lg:w-[100px] lg:h-[100px] rounded flex justify-center items-center text-xl lg:text-3xl font-bold -mt-[30px] shadow-[0_0_15px_1px_rgba(113,106,202,0.20)] transition-all duration-300 group-hover:-translate-y-[10px]">$129</span><h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Larger business</h3><p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div><div class="p-5"><ul class="space-y-2.5 mb-5 font-semibold"><li>Unlimited calls</li><li>Free hosting</li><li>Unlimited hours of support</li><li>1TB of storage space</li></ul><a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a></div></div></div></div></div>',1),Se=e("pre",null,`<!-- animated -->
<div class="max-w-[1140px] mx-auto mt-20 dark:text-white-dark">
  <div class="md:flex justify-between space-y-14 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
    <div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
      <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
        <span
          class="
            bg-white
            dark:bg-[#0e1726]
            text-[#3b3f5c]
            dark:text-white-light
            border-2 border-primary
            w-[70px]
            h-[70px]
            lg:w-[100px] lg:h-[100px]
            rounded
            flex
            justify-center
            items-center
            text-xl
            lg:text-3xl
            font-bold
            -mt-[30px]
            shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
            transition-all
            duration-300
            group-hover:-translate-y-[10px]
          "
          >$49</span
        >
        <h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Freelancer</h3>
        <p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="p-5">
        <ul class="space-y-2.5 mb-5 font-semibold">
          <li>Support forum</li>
          <li>Free hosting</li>
          <li>2 hours of support</li>
          <li>5GB of storage space</li>
        </ul>
        <a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
      </div>
    </div>
    <div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
      <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
        <span
          class="
            bg-white
            dark:bg-[#0e1726]
            text-[#3b3f5c]
            dark:text-white-light
            border-2 border-primary
            w-[70px]
            h-[70px]
            lg:w-[100px] lg:h-[100px]
            rounded
            flex
            justify-center
            items-center
            text-xl
            lg:text-3xl
            font-bold
            -mt-[30px]
            shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
            transition-all
            duration-300
            group-hover:-translate-y-[10px]
          "
          >$89</span
        >
        <h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Small business</h3>
        <p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="p-5">
        <ul class="space-y-2.5 mb-5 font-semibold">
          <li>Unlimited calls</li>
          <li>Free hosting</li>
          <li>10 hours of support</li>
          <li>10GB of storage space</li>
        </ul>
        <a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
      </div>
    </div>
    <div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
      <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
        <span
          class="
            bg-white
            dark:bg-[#0e1726]
            text-[#3b3f5c]
            dark:text-white-light
            border-2 border-primary
            w-[70px]
            h-[70px]
            lg:w-[100px] lg:h-[100px]
            rounded
            flex
            justify-center
            items-center
            text-xl
            lg:text-3xl
            font-bold
            -mt-[30px]
            shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
            transition-all
            duration-300
            group-hover:-translate-y-[10px]
          "
          >$129</span
        >
        <h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Larger business</h3>
        <p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="p-5">
        <ul class="space-y-2.5 mb-5 font-semibold">
          <li>Unlimited calls</li>
          <li>Free hosting</li>
          <li>Unlimited hours of support</li>
          <li>1TB of storage space</li>
        </ul>
        <a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
      </div>
    </div>
  </div>
</div>
`,-1),Ne=k({__name:"pricing-table",setup(f){w({title:"Pricing Table"});const{codeArr:d,toggleCode:b}=S(),n=_(!1);return(Fe,l)=>(a(),v("div",null,[C,e("div",H,[e("div",A,[e("div",T,[G,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:l[0]||(l[0]=c=>o(b)("code1"))},[e("span",D,[r(u,{class:"me-2"}),t(" Code ")])])]),e("div",L,[e("div",U,[e("div",V,[e("div",I,[E,e("ul",R,[e("li",W,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Free water saving e-book ")]),e("li",X,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Free access to forums ")]),e("li",z,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Beginners tips ")])]),O]),e("div",Y,[q,e("ul",J,[e("li",K,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Free water saving e-book ")]),e("li",Q,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Free access to forums ")]),e("li",Z,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Advanced saving tips ")])]),ee]),e("div",te,[re,e("ul",se,[e("li",le,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Access to all books ")]),e("li",oe,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Unlimited board topics ")]),e("li",ae,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Beginners tips ")])]),ie])])])]),o(d).includes("code1")?(a(),p(m,{key:0},{default:x(()=>[de]),_:1})):h("",!0)]),e("div",ne,[e("div",ce,[be,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:l[1]||(l[1]=c=>o(b)("code2"))},[e("span",pe,[r(u,{class:"me-2"}),t(" Code ")])])]),e("div",xe,[e("div",he,[e("div",me,[e("span",{class:g(n.value?"text-white-dark":"text-primary")},"Monthly",2),e("label",ue,[B(e("input",{id:"custom_switch_checkbox1",type:"checkbox",class:"custom_switch absolute ltr:left-0 rtl:right-0 top-0 w-full h-full opacity-0 z-10 cursor-pointer peer","onUpdate:modelValue":l[2]||(l[2]=c=>n.value=c)},null,512),[[j,n.value]]),ge]),e("span",{class:g(["relative",n.value?"text-primary":"text-white-dark"])},[t("Yearly "),ve],2)]),fe])]),o(d).includes("code2")?(a(),p(m,{key:0},{default:x(()=>[ye]),_:1})):h("",!0)]),e("div",ke,[e("div",we,[_e,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:l[3]||(l[3]=c=>o(b)("code3"))},[e("span",Be,[r(u,{class:"me-2"}),t(" Code ")])])]),je,o(d).includes("code3")?(a(),p(m,{key:0},{default:x(()=>[Se]),_:1})):h("",!0)])])]))}});export{Ne as default};
