pricing-table.e514f0f8.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. import{d as v,u as f,e as y,c as k,a as e,j as o,f as r,g as t,W as p,w as x,l as m,L as g,p as w,N as _,s as a,o as n,a0 as s}from"./index.c685e846.js";import{c as B,_ as h,I as u}from"./icon-code.6d7a3662.js";const j=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),S={class:"pt-5 space-y-8"},F={class:"panel"},P={class:"flex items-center justify-between mb-5"},N=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),$={class:"flex items-center"},C={class:"mb-5"},H={class:"max-w-[320px] md:max-w-[990px] mx-auto"},M={class:"md:flex justify-between space-y-4 md:space-y-0 md:space-x-4 rtl:space-x-reverse"},A={class:"p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary"},G=a('<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),T={class:"space-y-2.5 mb-5 font-semibold group-hover:text-primary"},D={class:"flex justify-center items-center"},U={class:"flex justify-center items-center"},L={class:"flex justify-center items-center"},V=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),I={class:"p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary"},E=a('<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),W={class:"space-y-2.5 mb-5 font-semibold group-hover:text-primary"},R={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=a('<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),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=e("pre",null,`<!-- basic -->
  2. <div class="max-w-[320px] md:max-w-[990px] mx-auto">
  3. <div class="md:flex justify-between space-y-4 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
  4. <div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
  5. <h3 class="text-xl lg:text-2xl">Beginner Savers</h3>
  6. <div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
  7. <p class="text-[15px]">For people who are starting out in the water saving business</p>
  8. <div class="my-7 p-2.5 text-center text-lg group-hover:text-primary">
  9. <strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$19</strong> / monthly
  10. </div>
  11. <ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
  12. <li class="flex justify-center items-center">
  13. <svg> ... </svg>
  14. Free water saving e-book
  15. </li>
  16. <li class="flex justify-center items-center">
  17. <svg> ... </svg>
  18. Free access to forums
  19. </li>
  20. <li class="flex justify-center items-center">
  21. <svg> ... </svg>
  22. Beginners tips
  23. </li>
  24. </ul>
  25. <a
  26. href="#"
  27. target="_self"
  28. 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"
  29. >Buy Now</a
  30. >
  31. </div>
  32. <div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
  33. <h3 class="text-xl lg:text-2xl">Advanced Savers</h3>
  34. <div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
  35. <p class="text-[15px]">For experienced water savers who'd like to push their limits</p>
  36. <div class="my-7 p-2.5 text-center text-lg group-hover:text-primary">
  37. <strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$29</strong> / monthly
  38. </div>
  39. <ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
  40. <li class="flex justify-center items-center">
  41. <svg> ... </svg>
  42. Free water saving e-book
  43. </li>
  44. <li class="flex justify-center items-center">
  45. <svg> ... </svg>
  46. Free access to forums
  47. </li>
  48. <li class="flex justify-center items-center">
  49. <svg> ... </svg>
  50. Advanced saving tips
  51. </li>
  52. </ul>
  53. <a
  54. href="#"
  55. target="_self"
  56. 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"
  57. >Buy Now</a
  58. >
  59. </div>
  60. <div class="p-3 lg:p-5 border border-black dark:border-[#1b2e4b] text-center rounded group hover:border-primary">
  61. <h3 class="text-xl lg:text-2xl">Pro Savers</h3>
  62. <div class="border-t border-black dark:border-white-dark w-1/5 mx-auto my-6 group-hover:border-primary"></div>
  63. <p class="text-[15px]">For all the professionals who'd like to educate others, too</p>
  64. <div class="my-7 p-2.5 text-center text-lg group-hover:text-primary">
  65. <strong class="text-[#3b3f5c] dark:text-white-dark text-3xl lg:text-5xl group-hover:text-primary">$79</strong> / monthly
  66. </div>
  67. <ul class="space-y-2.5 mb-5 font-semibold group-hover:text-primary">
  68. <li class="flex justify-center items-center">
  69. <svg> ... </svg>
  70. Access to all books
  71. </li>
  72. <li class="flex justify-center items-center">
  73. <svg> ... </svg>
  74. Unlimited board topics
  75. </li>
  76. <li class="flex justify-center items-center">
  77. <svg> ... </svg>
  78. Beginners tips
  79. </li>
  80. </ul>
  81. <a
  82. href="#"
  83. target="_self"
  84. 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"
  85. >Buy Now</a
  86. >
  87. </div>
  88. </div>
  89. </div>
  90. `,-1),re={class:"panel"},se={class:"flex items-center justify-between mb-5"},le=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Toggle",-1),oe={class:"flex items-center"},ae={class:"mb-5"},ie={class:"max-w-[320px] md:max-w-[1140px] mx-auto dark:text-white-dark"},de={class:"mt-5 md:mt-10 text-center flex justify-center space-x-4 rtl:space-x-reverse font-semibold text-base"},ne={class:"w-12 h-6 relative"},ce=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),be=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),pe=a('<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),xe=e("pre",null,`<!-- toggle -->
  91. <div class="max-w-[320px] md:max-w-[1140px] mx-auto dark:text-white-dark">
  92. <div class="mt-5 md:mt-10 text-center flex justify-center space-x-4 rtl:space-x-reverse font-semibold text-base">
  93. <span :class="!yearlyPrice ? 'text-primary' : 'text-white-dark'">Monthly</span>
  94. <label class="w-12 h-6 relative">
  95. <input
  96. id="custom_switch_checkbox1"
  97. type="checkbox"
  98. class="custom_switch absolute ltr:left-0 rtl:right-0 top-0 w-full h-full opacity-0 z-10 cursor-pointer peer"
  99. v-model="yearlyPrice"
  100. />
  101. <span
  102. for="custom_switch_checkbox1"
  103. class="
  104. outline_checkbox
  105. bg-icon
  106. border-2 border-[#ebedf2]
  107. dark:border-white-dark
  108. block
  109. h-full
  110. rounded-full
  111. before:absolute
  112. ltr:before:left-1
  113. rtl:before:right-1
  114. before:bg-[#ebedf2]
  115. dark:before:bg-white-dark
  116. 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
  117. ltr:peer-checked:before:left-7
  118. rtl:peer-checked:before:right-7
  119. peer-checked:before:bg-[url(/assets/images/checked.svg)] peer-checked:border-primary peer-checked:before:bg-primary
  120. before:transition-all before:duration-300
  121. "
  122. ></span>
  123. </label>
  124. <span class="relative" :class="yearlyPrice ? 'text-primary' : 'text-white-dark'"
  125. >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
  126. >
  127. </div>
  128. <div class="md:flex space-y-4 md:space-y-0 mt-5 md:mt-16 text-white-dark">
  129. <div
  130. class="
  131. p-4
  132. lg:p-9
  133. border
  134. ltr:md:border-r-0
  135. rtl:md:border-l-0
  136. border-[#e0e6ed]
  137. dark:border-[#1b2e4b]
  138. rounded-md
  139. ltr:md:rounded-r-none
  140. rtl:md:rounded-l-none
  141. transition-all
  142. duration-300
  143. hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
  144. "
  145. >
  146. <h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Cloud Hosting</h3>
  147. <p>cPanel/WHM included. Intel Xeon E3 with guaranteed 2GB RAM.</p>
  148. <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>
  149. <div class="mb-6">
  150. <strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Cloud Hosting Features</strong>
  151. <ul class="space-y-3">
  152. <li>Single Domain</li>
  153. <li>50 GB SSD</li>
  154. <li>1 TB Premium Bandwidth</li>
  155. </ul>
  156. </div>
  157. <button type="button" class="btn btn-dark w-full">Buy Now</button>
  158. </div>
  159. <div class="relative p-4 pt-14 lg:p-9 border border-[#e0e6ed] dark:border-[#1b2e4b] transition-all duration-300 rounded-t-md">
  160. <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>
  161. <h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">VPS Hosting</h3>
  162. <p>cPanel/WHM included. Intel Xeon E5 with guaranteed 4GB RAM.</p>
  163. <div class="my-7 p-2.5 text-center text-lg"><strong class="text-primary text-xl lg:text-4xl">$70</strong> / monthly</div>
  164. <div class="mb-6">
  165. <strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">VPS Hosting Features</strong>
  166. <ul class="space-y-3">
  167. <li>5 Domains</li>
  168. <li>100 GB SSD</li>
  169. <li>2 TB Premium Bandwidth</li>
  170. </ul>
  171. </div>
  172. <button type="button" class="btn btn-primary w-full">Buy Now</button>
  173. </div>
  174. <div
  175. class="
  176. p-4
  177. lg:p-9
  178. border
  179. ltr:md:border-l-0
  180. rtl:md:border-r-0
  181. border-[#e0e6ed]
  182. dark:border-[#1b2e4b]
  183. rounded-md
  184. ltr:md:rounded-l-none
  185. rtl:md:rounded-r-none
  186. transition-all
  187. duration-300
  188. hover:shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
  189. "
  190. >
  191. <h3 class="text-xl mb-5 font-semibold text-[#0e1726] dark:text-white-light">Business Hosting</h3>
  192. <p>cPanel/WHM included. Intel Xeon E5 with guaranteed 8GB RAM.</p>
  193. <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>
  194. <div class="mb-6">
  195. <strong class="text-[#0e1726] dark:text-white-light text-[15px] mb-3 inline-block">Business Hosting Features</strong>
  196. <ul class="space-y-3">
  197. <li>Unlimited Domains</li>
  198. <li>1 TB SSD</li>
  199. <li>5 TB Premium Bandwidth</li>
  200. </ul>
  201. </div>
  202. <button type="button" class="btn btn-dark w-full">Buy Now</button>
  203. </div>
  204. </div>
  205. </div>
  206. `,-1),me={class:"panel"},he={class:"flex items-center justify-between mb-5"},ue=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Animated",-1),ge={class:"flex items-center"},ve=a('<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),fe=e("pre",null,`<!-- animated -->
  207. <div class="max-w-[1140px] mx-auto mt-20 dark:text-white-dark">
  208. <div class="md:flex justify-between space-y-14 md:space-y-0 md:space-x-4 rtl:space-x-reverse">
  209. <div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
  210. <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
  211. <span
  212. class="
  213. bg-white
  214. dark:bg-[#0e1726]
  215. text-[#3b3f5c]
  216. dark:text-white-light
  217. border-2 border-primary
  218. w-[70px]
  219. h-[70px]
  220. lg:w-[100px] lg:h-[100px]
  221. rounded
  222. flex
  223. justify-center
  224. items-center
  225. text-xl
  226. lg:text-3xl
  227. font-bold
  228. -mt-[30px]
  229. shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
  230. transition-all
  231. duration-300
  232. group-hover:-translate-y-[10px]
  233. "
  234. >$49</span
  235. >
  236. <h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Freelancer</h3>
  237. <p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  238. </div>
  239. <div class="p-5">
  240. <ul class="space-y-2.5 mb-5 font-semibold">
  241. <li>Support forum</li>
  242. <li>Free hosting</li>
  243. <li>2 hours of support</li>
  244. <li>5GB of storage space</li>
  245. </ul>
  246. <a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
  247. </div>
  248. </div>
  249. <div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
  250. <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
  251. <span
  252. class="
  253. bg-white
  254. dark:bg-[#0e1726]
  255. text-[#3b3f5c]
  256. dark:text-white-light
  257. border-2 border-primary
  258. w-[70px]
  259. h-[70px]
  260. lg:w-[100px] lg:h-[100px]
  261. rounded
  262. flex
  263. justify-center
  264. items-center
  265. text-xl
  266. lg:text-3xl
  267. font-bold
  268. -mt-[30px]
  269. shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
  270. transition-all
  271. duration-300
  272. group-hover:-translate-y-[10px]
  273. "
  274. >$89</span
  275. >
  276. <h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Small business</h3>
  277. <p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  278. </div>
  279. <div class="p-5">
  280. <ul class="space-y-2.5 mb-5 font-semibold">
  281. <li>Unlimited calls</li>
  282. <li>Free hosting</li>
  283. <li>10 hours of support</li>
  284. <li>10GB of storage space</li>
  285. </ul>
  286. <a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
  287. </div>
  288. </div>
  289. <div class="border border-[#e0e6ed] dark:border-[#1b2e4b] rounded transition-all duration-300 group">
  290. <div class="border-b border-[#e0e6ed] dark:border-[#1b2e4b] p-5 pt-0">
  291. <span
  292. class="
  293. bg-white
  294. dark:bg-[#0e1726]
  295. text-[#3b3f5c]
  296. dark:text-white-light
  297. border-2 border-primary
  298. w-[70px]
  299. h-[70px]
  300. lg:w-[100px] lg:h-[100px]
  301. rounded
  302. flex
  303. justify-center
  304. items-center
  305. text-xl
  306. lg:text-3xl
  307. font-bold
  308. -mt-[30px]
  309. shadow-[0_0_15px_1px_rgba(113,106,202,0.20)]
  310. transition-all
  311. duration-300
  312. group-hover:-translate-y-[10px]
  313. "
  314. >$129</span
  315. >
  316. <h3 class="text-xl lg:text-2xl mt-4 mb-2.5">Larger business</h3>
  317. <p class="text-[15px]">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  318. </div>
  319. <div class="p-5">
  320. <ul class="space-y-2.5 mb-5 font-semibold">
  321. <li>Unlimited calls</li>
  322. <li>Free hosting</li>
  323. <li>Unlimited hours of support</li>
  324. <li>1TB of storage space</li>
  325. </ul>
  326. <a href="#" target="_self" class="btn btn-primary w-full">Buy Now</a>
  327. </div>
  328. </div>
  329. </div>
  330. </div>
  331. `,-1),Be=v({__name:"pricing-table",setup(ye){f({title:"Pricing Table"});const{codeArr:c,toggleCode:b}=B(),i=y(!1);return(ke,l)=>(n(),k("div",null,[j,e("div",S,[e("div",F,[e("div",P,[N,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]=d=>o(b)("code1"))},[e("span",$,[r(u,{class:"me-2"}),t(" Code ")])])]),e("div",C,[e("div",H,[e("div",M,[e("div",A,[G,e("ul",T,[e("li",D,[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",U,[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",L,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Beginners tips ")])]),V]),e("div",I,[E,e("ul",W,[e("li",R,[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(" Advanced saving 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(" Access to all books ")]),e("li",Q,[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",Z,[r(s,{class:"w-3.5 h-3.5 ltr:mr-1 rtl:ml-1 rtl:rotate-180 shrink-0"}),t(" Beginners tips ")])]),ee])])])]),o(c).includes("code1")?(n(),p(h,{key:0},{default:x(()=>[te]),_:1})):m("",!0)]),e("div",re,[e("div",se,[le,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]=d=>o(b)("code2"))},[e("span",oe,[r(u,{class:"me-2"}),t(" Code ")])])]),e("div",ae,[e("div",ie,[e("div",de,[e("span",{class:g(i.value?"text-white-dark":"text-primary")},"Monthly",2),e("label",ne,[w(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]=d=>i.value=d)},null,512),[[_,i.value]]),ce]),e("span",{class:g(["relative",i.value?"text-primary":"text-white-dark"])},[t("Yearly "),be],2)]),pe])]),o(c).includes("code2")?(n(),p(h,{key:0},{default:x(()=>[xe]),_:1})):m("",!0)]),e("div",me,[e("div",he,[ue,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]=d=>o(b)("code3"))},[e("span",ge,[r(u,{class:"me-2"}),t(" Code ")])])]),ve,o(c).includes("code3")?(n(),p(h,{key:0},{default:x(()=>[fe]),_:1})):m("",!0)])])]))}});export{Be as default};