← All changes
|
backend/views/components/ProPlan/components/PricingCard.jsx
+13
-13
1.3.53
→
1.4.19
View file →
| @@ -11,49 +11,49 @@ | ||
| 11 | 11 | }; |
| 12 | 12 | |
| 13 | 13 | return ( |
| 14 | 14 | <div |
| 15 | - className={`disco-relative disco-rounded-2xl disco-border-2 disco-shadow-lg hover:disco-border-primary disco-p-6 disco-bg-white disco-transition-all ${plan.popular ? 'disco-border-emerald-400 disco-shadow-lg disco-shadow-emerald-100 disco-z-10' : 'disco-border-gray-200'}`} | |
| 15 | + className={`disco:relative disco:rounded-2xl disco:border-2 disco:shadow-lg disco:hover:border-primary disco:p-6 disco:bg-white disco:transition-all ${plan.popular ? 'disco:border-emerald-400 disco:shadow-lg disco:shadow-emerald-100 disco:z-10' : 'disco:border-gray-200'}`} | |
| 16 | 16 | > |
| 17 | 17 | {plan.popular && ( |
| 18 | - <div className="disco-absolute disco-top-0 disco-left-0 disco-w-full disco-h-7 disco-bg-primary disco-text-white disco-text-xs disco-font-bold disco-px-4 disco-py-1 disco-rounded-tl-xl disco-rounded-tr-xl disco-flex disco-items-center disco-justify-center"> | |
| 18 | + <div className="disco:absolute disco:top-0 disco:left-0 disco:w-full disco:h-7 disco:bg-primary disco:text-white disco:text-xs disco:font-bold disco:px-4 disco:py-1 disco:rounded-tl-xl disco:rounded-tr-xl disco:flex disco:items-center disco:justify-center"> | |
| 19 | 19 | MOST POPULAR |
| 20 | 20 | </div> |
| 21 | 21 | )} |
| 22 | 22 | <h3 |
| 23 | - className={`disco-text-lg disco-font-bold disco-text-gray-900 ${plan.popular ? 'disco-mt-4' : ''}`} | |
| 23 | + className={`disco:text-lg! disco:font-bold! disco:text-gray-900 ${plan.popular ? 'disco:mt-4!' : ''}`} | |
| 24 | 24 | > |
| 25 | 25 | {plan.name} |
| 26 | 26 | </h3> |
| 27 | - <p className="disco-text-sm disco-text-gray-400 disco-mb-4"> | |
| 27 | + <p className="disco:text-sm! disco:text-gray-400 disco:mb-4!"> | |
| 28 | 28 | {plan.sub} |
| 29 | 29 | </p> |
| 30 | - <div className="disco-flex disco-items-baseline disco-gap-2 disco-mb-1"> | |
| 31 | - <span className="disco-text-4xl disco-font-extrabold disco-text-gray-900"> | |
| 30 | + <div className="disco:flex disco:items-baseline disco:gap-2 disco:mb-1"> | |
| 31 | + <span className="disco:text-4xl disco:font-extrabold disco:text-gray-900"> | |
| 32 | 32 | ${price} |
| 33 | 33 | </span> |
| 34 | 34 | {original && ( |
| 35 | - <span className="disco-text-lg disco-text-gray-300 disco-line-through"> | |
| 35 | + <span className="disco:text-lg disco:text-gray-300 disco:line-through"> | |
| 36 | 36 | ${original} |
| 37 | 37 | </span> |
| 38 | 38 | )} |
| 39 | 39 | </div> |
| 40 | - <p className="disco-text-xs disco-text-gray-400 disco-mb-5"> | |
| 40 | + <p className="disco:text-xs! disco:text-gray-400 disco:mb-5!"> | |
| 41 | 41 | Per year, billed annually |
| 42 | 42 | </p> |
| 43 | 43 | <button |
| 44 | 44 | onClick={handleClick} |
| 45 | - className={`disco-w-full disco-py-2.5 disco-rounded-lg disco-font-semibold disco-text-sm disco-transition-all ${plan.popular ? 'disco-bg-emerald-500 disco-text-white hover:disco-bg-primary' : 'disco-bg-[#F1F5F9] disco-border-[#E2E8F0] hover:disco-border-primary disco-text-[#334155] hover:disco-bg-primary hover:disco-text-white'}`} | |
| 45 | + className={`disco:w-full disco:py-2.5 disco:rounded-lg disco:font-semibold disco:text-sm disco:transition-all ${plan.popular ? 'disco:bg-emerald-500 disco:text-white disco:hover:bg-primary' : 'disco:bg-[#F1F5F9] disco:border-[#E2E8F0] disco:hover:border-primary disco:text-[#334155] disco:hover:bg-primary disco:hover:text-white'}`} | |
| 46 | 46 | > |
| 47 | 47 | ⚡️ Get Started → |
| 48 | 48 | </button> |
| 49 | - <ul className="disco-mt-5 disco-space-y-2.5"> | |
| 49 | + <ul className="disco:mt-5 disco:space-y-2.5!"> | |
| 50 | 50 | {plan.features.map((f, j) => ( |
| 51 | 51 | <li |
| 52 | 52 | key={j} |
| 53 | - className="disco-flex disco-items-start disco-gap-2 disco-text-sm disco-text-gray-600" | |
| 53 | + className="disco:flex disco:items-start disco:gap-2 disco:text-sm disco:text-gray-600" | |
| 54 | 54 | > |
| 55 | - <span className="disco-mt-0.5 disco-h-5 disco-w-5 disco-rounded-full disco-bg-primary-light disco-flex disco-items-center disco-justify-center disco-text-[#15803D]"> | |
| 55 | + <span className="disco:mt-0.5 disco:h-5 disco:w-5 disco:rounded-full disco:bg-primary-light disco:flex disco:items-center disco:justify-center disco:text-[#15803D]"> | |
| 56 | 56 | {'✓'} |
| 57 | 57 | {/* <CheckIcon /> */} |
| 58 | 58 | </span> |
| 59 | 59 | {f} |
| @@ -60,9 +60,9 @@ | ||
| 60 | 60 | </li> |
| 61 | 61 | ))} |
| 62 | 62 | </ul> |
| 63 | 63 | <p |
| 64 | - className={`disco-mt-4 disco-text-xs disco-font-medium disco-text-[#15803D] disco-bg-primary-light disco-py-3 disco-px-4 disco-rounded-lg`} | |
| 64 | + className={`disco:mt-4! disco:text-xs! disco:font-medium disco:text-[#15803D] disco:bg-primary-light disco:py-3 disco:px-4 disco:rounded-lg`} | |
| 65 | 65 | > |
| 66 | 66 | {'🛡️ Lifetime free after 5 years'} |
| 67 | 67 | </p> |
| 68 | 68 | </div> |