← All changes
|
backend/views/components/ProPlan/components/PricingSection.jsx
+16
-16
1.4.2
→
1.4.21
View file →
| @@ -6,32 +6,32 @@ | ||
| 6 | 6 | function PricingSection() { |
| 7 | 7 | const [yearly, setYearly] = useState(true); |
| 8 | 8 | |
| 9 | 9 | return ( |
| 10 | - <div className="disco-max-w-5xl disco-mx-auto disco-px-4 disco-pb-10"> | |
| 10 | + <div className="disco:max-w-5xl disco:mx-auto disco:px-4 disco:pb-10"> | |
| 11 | 11 | {/* Toggle */} |
| 12 | - <div className="disco-flex disco-items-center disco-justify-center disco-gap-3 disco-mb-8"> | |
| 12 | + <div className="disco:flex disco:items-center disco:justify-center disco:gap-3 disco:mb-8"> | |
| 13 | 13 | <span |
| 14 | - className={`disco-text-sm disco-font-medium ${yearly ? 'disco-text-gray-900' : 'disco-text-gray-400'}`} | |
| 14 | + className={`disco:text-sm disco:font-medium ${yearly ? 'disco:text-gray-900' : 'disco:text-gray-400'}`} | |
| 15 | 15 | > |
| 16 | 16 | Yearly |
| 17 | 17 | </span> |
| 18 | 18 | <button |
| 19 | 19 | onClick={() => setYearly(!yearly)} |
| 20 | - className={`disco-relative disco-w-12 disco-h-6 disco-rounded-full disco-transition-colors ${!yearly ? 'disco-bg-emerald-500' : 'disco-bg-gray-300'}`} | |
| 20 | + className={`disco:relative disco:w-12 disco:h-6 disco:rounded-full disco:transition-colors ${!yearly ? 'disco:bg-emerald-500' : 'disco:bg-gray-300'}`} | |
| 21 | 21 | > |
| 22 | 22 | <span |
| 23 | - className={`disco-absolute disco-top-0.5 disco-w-5 disco-h-5 disco-bg-white disco-rounded-full disco-shadow disco-transition-transform ${!yearly ? 'disco-left-6' : 'disco-left-0.5'}`} | |
| 23 | + className={`disco:absolute disco:top-0.5 disco:w-5 disco:h-5 disco:bg-white disco:rounded-full disco:shadow disco:transition-transform ${!yearly ? 'disco:left-6' : 'disco:left-0.5'}`} | |
| 24 | 24 | /> |
| 25 | 25 | </button> |
| 26 | 26 | <span |
| 27 | - className={`disco-text-sm disco-font-medium ${!yearly ? 'disco-text-gray-900' : 'disco-text-gray-400'}`} | |
| 27 | + className={`disco:text-sm disco:font-medium ${!yearly ? 'disco:text-gray-900' : 'disco:text-gray-400'}`} | |
| 28 | 28 | > |
| 29 | 29 | Lifetime |
| 30 | 30 | </span> |
| 31 | 31 | |
| 32 | 32 | <span |
| 33 | - className="disco-text-white disco-text-xs disco-font-bold disco-px-2 disco-py-0.5 disco-rounded-full disco-transition-all" | |
| 33 | + className="disco:text-white disco:text-xs disco:font-bold disco:px-2 disco:py-0.5 disco:rounded-full disco:transition-all" | |
| 34 | 34 | style={{ |
| 35 | 35 | background: !yearly |
| 36 | 36 | ? `linear-gradient(103deg, #16A34A 0%, #22C55E 100%)` |
| 37 | 37 | : 'linear-gradient(103deg, #F59E0B 0%, #C55022 100%)', |
| @@ -39,15 +39,15 @@ | ||
| 39 | 39 | > |
| 40 | 40 | {!yearly ? 'BEST VALUE' : 'SAVE 60%'} |
| 41 | 41 | </span> |
| 42 | 42 | </div> |
| 43 | - <p className="disco-text-center disco-text-gray-400 disco-text-sm disco-mb-8"> | |
| 43 | + <p className="disco:text-center disco:text-gray-400 disco:text-sm! disco:mb-8!"> | |
| 44 | 44 | Upgrade now and save big. Pay once — only renew to continue |
| 45 | 45 | updates. |
| 46 | 46 | </p> |
| 47 | 47 | |
| 48 | 48 | {/* Cards */} |
| 49 | - <div className="disco-w-full disco-grid disco-grid-cols-1 md:disco-grid-cols-3 disco-gap-6 disco-items-start"> | |
| 49 | + <div className="disco:w-full disco:grid disco:grid-cols-1 disco:md:grid-cols-3 disco:gap-6 disco:items-start"> | |
| 50 | 50 | {pricingPlans.map((plan, i) => ( |
| 51 | 51 | <PricingCard key={i} plan={plan} yearly={yearly} /> |
| 52 | 52 | ))} |
| 53 | 53 | </div> |
| @@ -52,31 +52,31 @@ | ||
| 52 | 52 | ))} |
| 53 | 53 | </div> |
| 54 | 54 | |
| 55 | 55 | {/* Trust bar */} |
| 56 | - <div className="disco-flex disco-flex-wrap disco-items-center disco-justify-center disco-gap-6 disco-mt-10 disco-text-sm disco-text-gray-500"> | |
| 57 | - <span className="disco-font-semibold disco-text-black"> | |
| 58 | - <span className="disco-font-bold disco-text-lg disco-text-primary"> | |
| 56 | + <div className="disco:flex disco:flex-wrap disco:items-center disco:justify-center disco:gap-6 disco:mt-10 disco:text-sm disco:text-gray-500"> | |
| 57 | + <span className="disco:font-semibold disco:text-black"> | |
| 58 | + <span className="disco:font-bold disco:text-lg disco:text-primary"> | |
| 59 | 59 | 700+ |
| 60 | 60 | </span>{' '} |
| 61 | 61 | Active stores |
| 62 | 62 | </span> |
| 63 | - <span className="disco-flex disco-items-center disco-gap-1"> | |
| 63 | + <span className="disco:flex disco:items-center disco:gap-1"> | |
| 64 | 64 | {[1, 2, 3, 4, 5].map((n) => ( |
| 65 | 65 | <StarIcon key={n} filled /> |
| 66 | 66 | ))} |
| 67 | - <span className="disco-ml-1 disco-font-medium"> | |
| 67 | + <span className="disco:ml-1 disco:font-medium"> | |
| 68 | 68 | 4.6/5 rating |
| 69 | 69 | </span> |
| 70 | 70 | </span> |
| 71 | 71 | <span> |
| 72 | - <span className="disco-font-bold disco-text-lg disco-text-primary"> | |
| 72 | + <span className="disco:font-bold disco:text-lg disco:text-primary"> | |
| 73 | 73 | 14-day |
| 74 | 74 | </span>{' '} |
| 75 | 75 | Money-back guarantee |
| 76 | 76 | </span> |
| 77 | 77 | <span> |
| 78 | - <span className="disco-font-bold disco-text-lg disco-text-primary"> | |
| 78 | + <span className="disco:font-bold disco:text-lg disco:text-primary"> | |
| 79 | 79 | 24h |
| 80 | 80 | </span>{' '} |
| 81 | 81 | Priority support |
| 82 | 82 | </span> |