| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { CheckIcon, CloseIcon, FilledStarIcon } from '../icons'; |
| 3 |
import { btnLg, btnPrimary } from '../tw'; |
| 4 |
|
| 5 |
const features = [ |
| 6 |
{ label: __('Core Widgets', 'ultimate-store-kit'), free: true, pro: true, freeNote: '35+', proNote: '100+' }, |
| 7 |
{ label: __('Theme Compatibility', 'ultimate-store-kit'), free: true, pro: true }, |
| 8 |
{ label: __('Dynamic Content & Custom Fields', 'ultimate-store-kit'), free: true, pro: true }, |
| 9 |
{ label: __('Proper Documentation', 'ultimate-store-kit'), free: true, pro: true }, |
| 10 |
{ label: __('Updates & Support', 'ultimate-store-kit'), free: true, pro: true }, |
| 11 |
{ label: __('Ready Made Blocks', 'ultimate-store-kit'), free: true, pro: true }, |
| 12 |
{ label: __('Ready Made Pages', 'ultimate-store-kit'), free: true, pro: true }, |
| 13 |
{ label: __('Rooten Theme Pro Features', 'ultimate-store-kit'), free: false, pro: true }, |
| 14 |
{ label: __('Priority Support', 'ultimate-store-kit'), free: false, pro: true }, |
| 15 |
]; |
| 16 |
|
| 17 |
const HIcon = ({ d, viewBox = '0 0 24 24', filled = false }) => ( |
| 18 |
<svg className="h-4 w-4 shrink-0 text-uks-brand" viewBox={viewBox} fill={filled ? 'currentColor' : 'none'} stroke={filled ? 'none' : 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> |
| 19 |
{Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />} |
| 20 |
</svg> |
| 21 |
); |
| 22 |
|
| 23 |
const highlights = [ |
| 24 |
{ |
| 25 |
text: __('Incredibly Advanced', 'ultimate-store-kit'), |
| 26 |
icon: <HIcon d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />, |
| 27 |
}, |
| 28 |
{ |
| 29 |
text: __('Refund or Cancel Anytime', 'ultimate-store-kit'), |
| 30 |
icon: <HIcon d={['M9 14 4 9l5-5', 'M4 9h10.5a5.5 5.5 0 0 1 0 11H11']} />, |
| 31 |
}, |
| 32 |
{ |
| 33 |
text: __('Dynamic Content', 'ultimate-store-kit'), |
| 34 |
icon: <HIcon d={['M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z', 'M14 2v6h6', 'M8 13h8', 'M8 17h4']} />, |
| 35 |
}, |
| 36 |
{ |
| 37 |
text: __('Super-Flexible Widgets', 'ultimate-store-kit'), |
| 38 |
icon: <HIcon d={['M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z']} />, |
| 39 |
}, |
| 40 |
{ |
| 41 |
text: __('24/7 Premium Support', 'ultimate-store-kit'), |
| 42 |
icon: <HIcon d={['M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z']} />, |
| 43 |
}, |
| 44 |
{ |
| 45 |
text: __('Third Party Plugins', 'ultimate-store-kit'), |
| 46 |
icon: <HIcon d={['M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4z', 'm2 22 3-3', 'M7.5 13.5 10 11', 'M10.5 16.5 13 14', 'm18 3-4 4h6l-4 4']} />, |
| 47 |
}, |
| 48 |
{ |
| 49 |
text: __('Special Discount!', 'ultimate-store-kit'), |
| 50 |
icon: <HIcon d={['M9 5H2v7l6.29 6.29c.94.94 2.48.94 3.42 0l3.58-3.58c.94-.94.94-2.48 0-3.42L9 5z', 'M6 9.01V9']} />, |
| 51 |
}, |
| 52 |
{ |
| 53 |
text: __('Custom Field Integration', 'ultimate-store-kit'), |
| 54 |
icon: <HIcon d={['M12 20h9', 'M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z']} />, |
| 55 |
}, |
| 56 |
{ |
| 57 |
text: __('With Live Chat Support', 'ultimate-store-kit'), |
| 58 |
icon: <HIcon d={['M8 12h.01', 'M12 12h.01', 'M16 12h.01', 'M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 0 1-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z']} />, |
| 59 |
}, |
| 60 |
{ |
| 61 |
text: __('Trusted Payment Methods', 'ultimate-store-kit'), |
| 62 |
icon: <HIcon d={['M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z']} />, |
| 63 |
}, |
| 64 |
{ |
| 65 |
text: __('Interactive Effects', 'ultimate-store-kit'), |
| 66 |
icon: <HIcon d={['M12 2v4', 'm16.2 7.8 2.9-2.9', 'M18 12h4', 'm16.2 16.2 2.9 2.9', 'M12 18v4', 'm4.9 19.1 2.9-2.9', 'M2 12h4', 'm4.9 4.9 2.9 2.9']} />, |
| 67 |
}, |
| 68 |
{ |
| 69 |
text: __('Video Tutorial', 'ultimate-store-kit'), |
| 70 |
icon: <HIcon d={['M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z', 'M9.75 15.02 15.5 12l-5.75-3.02v6.04z']} />, |
| 71 |
}, |
| 72 |
]; |
| 73 |
|
| 74 |
const GetPro = ({ isPro }) => { |
| 75 |
if (isPro) { |
| 76 |
return ( |
| 77 |
<div className="rounded-usk border border-slate-200 bg-white p-6 text-center sm:p-10"> |
| 78 |
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100"> |
| 79 |
<CheckIcon className="h-7 w-7 text-emerald-600" /> |
| 80 |
</div> |
| 81 |
<h2 className="m-0 mb-2 text-xl font-bold text-slate-800"> |
| 82 |
{__('You already have Pro!', 'ultimate-store-kit')} |
| 83 |
</h2> |
| 84 |
<p className="m-0 text-sm text-slate-500"> |
| 85 |
{__('Thank you for being a Pro user. You have access to all features.', 'ultimate-store-kit')} |
| 86 |
</p> |
| 87 |
</div> |
| 88 |
); |
| 89 |
} |
| 90 |
|
| 91 |
return ( |
| 92 |
<div className="space-y-5"> |
| 93 |
|
| 94 |
{/* Comparison Table */} |
| 95 |
<div className="overflow-hidden rounded-usk border border-solid border-gray-100 bg-white"> |
| 96 |
|
| 97 |
{/* Header row */} |
| 98 |
<div className="flex border-b border-gray-100"> |
| 99 |
<div className="flex flex-[2] items-center px-3 py-3 sm:px-5 sm:py-3.5"> |
| 100 |
<span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 sm:text-[11px]"> |
| 101 |
{__('Features', 'ultimate-store-kit')} |
| 102 |
</span> |
| 103 |
</div> |
| 104 |
<div className="flex w-20 items-center justify-center border-l border-gray-100 bg-slate-50 py-3 sm:w-28 sm:py-3.5 lg:w-36"> |
| 105 |
<span className="text-[11px] font-bold text-slate-500 sm:text-[12px]"> |
| 106 |
{__('Free', 'ultimate-store-kit')} |
| 107 |
</span> |
| 108 |
</div> |
| 109 |
<div className="flex w-20 items-center justify-center border-l border-uks-brand/30 bg-uks-brand py-3 sm:w-28 sm:py-3.5 lg:w-36"> |
| 110 |
<span className="inline-flex items-center gap-1 text-[11px] font-bold text-white sm:gap-1.5 sm:text-[12px]"> |
| 111 |
<FilledStarIcon className="h-3 w-3" /> |
| 112 |
{__('Pro', 'ultimate-store-kit')} |
| 113 |
</span> |
| 114 |
</div> |
| 115 |
</div> |
| 116 |
|
| 117 |
{/* Feature rows */} |
| 118 |
{features.map((f, i) => ( |
| 119 |
<div |
| 120 |
key={i} |
| 121 |
className={`flex items-center border-b border-gray-50 last:border-b-0 ${i % 2 === 1 ? 'bg-slate-50/50' : 'bg-white'}`} |
| 122 |
> |
| 123 |
<div className="flex min-w-0 flex-[2] items-center gap-2 px-3 py-3 sm:px-5 sm:py-3.5"> |
| 124 |
<span className="text-[12px] font-medium text-slate-700 sm:text-[13px]"> |
| 125 |
{f.label} |
| 126 |
</span> |
| 127 |
{f.freeNote && f.proNote && ( |
| 128 |
<span className="hidden shrink-0 rounded-full border border-slate-100 bg-white px-2 py-0.5 text-[10px] font-semibold text-slate-400 sm:inline-block"> |
| 129 |
{f.freeNote} → {f.proNote} |
| 130 |
</span> |
| 131 |
)} |
| 132 |
</div> |
| 133 |
<div className={`flex w-20 shrink-0 items-center justify-center border-l py-3 sm:w-28 sm:py-3.5 lg:w-36 ${i % 2 === 1 ? 'border-gray-100 bg-slate-50/50' : 'border-gray-50 bg-white'}`}> |
| 134 |
{f.free ? ( |
| 135 |
<CheckIcon className="mx-auto h-[18px] w-[18px] text-uks-brand" /> |
| 136 |
) : ( |
| 137 |
<CloseIcon className="mx-auto h-[18px] w-[18px] text-slate-300" /> |
| 138 |
)} |
| 139 |
</div> |
| 140 |
<div className="flex w-20 shrink-0 items-center justify-center border-l border-uks-brand/20 bg-uks-brand/[0.07] py-3 sm:w-28 sm:py-3.5 lg:w-36"> |
| 141 |
{f.pro ? ( |
| 142 |
<CheckIcon className="mx-auto h-[18px] w-[18px] text-uks-brand" /> |
| 143 |
) : ( |
| 144 |
<CloseIcon className="mx-auto h-[18px] w-[18px] text-slate-300" /> |
| 145 |
)} |
| 146 |
</div> |
| 147 |
</div> |
| 148 |
))} |
| 149 |
</div> |
| 150 |
|
| 151 |
{/* What's included + CTA */} |
| 152 |
<div className="overflow-hidden rounded-usk border border-solid border-gray-100 bg-white"> |
| 153 |
|
| 154 |
{/* Highlights grid */} |
| 155 |
<div className="p-4 sm:p-5 lg:p-6"> |
| 156 |
<p className="m-0 mb-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400 sm:mb-4"> |
| 157 |
{__("What's included with Pro", 'ultimate-store-kit')} |
| 158 |
</p> |
| 159 |
<div className="grid grid-cols-1 gap-2 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"> |
| 160 |
{highlights.map((h, i) => ( |
| 161 |
<div |
| 162 |
key={i} |
| 163 |
className="flex items-center gap-2 rounded-lg border border-slate-100 bg-slate-50/70 px-3 py-2.5 sm:gap-2.5" |
| 164 |
> |
| 165 |
<span className="shrink-0" aria-hidden="true">{h.icon}</span> |
| 166 |
<span className="text-[12px] font-medium leading-snug text-slate-600">{h.text}</span> |
| 167 |
</div> |
| 168 |
))} |
| 169 |
</div> |
| 170 |
</div> |
| 171 |
|
| 172 |
{/* CTA strip */} |
| 173 |
<div className="flex flex-col items-center gap-3 border-t border-uks-brand/15 bg-gradient-to-br from-uks-brand/[0.07] to-transparent px-4 py-5 text-center sm:px-6 sm:py-6"> |
| 174 |
<p className="m-0 text-[13px] font-semibold text-slate-700"> |
| 175 |
{__('Ready to unlock all Pro features?', 'ultimate-store-kit')} |
| 176 |
</p> |
| 177 |
<a |
| 178 |
href="https://storekit.pro/pricing" |
| 179 |
target="_blank" |
| 180 |
rel="noopener noreferrer" |
| 181 |
className={`${btnLg} ${btnPrimary} gap-2`} |
| 182 |
> |
| 183 |
<FilledStarIcon className="h-4 w-4" /> |
| 184 |
{__('Upgrade to Pro — View Pricing', 'ultimate-store-kit')} |
| 185 |
</a> |
| 186 |
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 text-[11px] text-slate-400"> |
| 187 |
<span className="flex items-center gap-1"> |
| 188 |
<CheckIcon className="h-3.5 w-3.5 text-emerald-500" /> |
| 189 |
{__('30-day money-back', 'ultimate-store-kit')} |
| 190 |
</span> |
| 191 |
<span className="flex items-center gap-1"> |
| 192 |
<CheckIcon className="h-3.5 w-3.5 text-emerald-500" /> |
| 193 |
{__('Cancel anytime', 'ultimate-store-kit')} |
| 194 |
</span> |
| 195 |
<span className="flex items-center gap-1"> |
| 196 |
<CheckIcon className="h-3.5 w-3.5 text-emerald-500" /> |
| 197 |
{__('Instant access', 'ultimate-store-kit')} |
| 198 |
</span> |
| 199 |
</div> |
| 200 |
</div> |
| 201 |
</div> |
| 202 |
|
| 203 |
</div> |
| 204 |
); |
| 205 |
}; |
| 206 |
|
| 207 |
export default GetPro; |
| 208 |
|
