| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { VideoTooltipIcon } from "../../../icons/icons"; |
| 3 |
import { StarHalfIcon, StarIcon, TrustPilotIcon, TrustPilotStar, WPIcon } from "../shared/icon"; |
| 4 |
import { Fragment } from "@wordpress/element"; |
| 5 |
|
| 6 |
const InfoText = ({ text }) => { |
| 7 |
return ( |
| 8 |
<span className="spspc-settings-info"> |
| 9 |
<i className="dashicons dashicons-info-outline spspc-info-icon"></i> |
| 10 |
<span className="spspc-help-tooltip">{text}</span> |
| 11 |
</span> |
| 12 |
); |
| 13 |
}; |
| 14 |
|
| 15 |
const LightToPro = () => { |
| 16 |
const features = [ |
| 17 |
{ |
| 18 |
title: __("Design & Templates", "post-carousel"), |
| 19 |
section: true |
| 20 |
}, |
| 21 |
{ |
| 22 |
title: __("All Core Plugin Features", "post-carousel"), |
| 23 |
free: "yes", |
| 24 |
pro: "yes", |
| 25 |
}, |
| 26 |
{ |
| 27 |
title: __("Advanced Gutenberg Post Blocks", "post-carousel"), |
| 28 |
free: "27", |
| 29 |
pro: "51+", |
| 30 |
hot: true, |
| 31 |
new: true, |
| 32 |
info: __("Showcase Posts, Pages, or Media in Elegant Post Carousel, Slider, Grid, List, Thumbnails, Timeline, and News Ticker layouts.", "post-carousel") |
| 33 |
}, |
| 34 |
{ |
| 35 |
title: __("Starter Sites, Templates, and Ready Patterns", "post-carousel"), |
| 36 |
free: "no", |
| 37 |
pro: "yes", |
| 38 |
new: true, |
| 39 |
}, |
| 40 |
{ |
| 41 |
title: __("Smart Design Library", "post-carousel"), |
| 42 |
free: "20+", |
| 43 |
pro: "100+", |
| 44 |
new: true, |
| 45 |
}, |
| 46 |
{ |
| 47 |
title: __("Modern Post Layouts & Built-in Templates", "post-carousel"), |
| 48 |
free: "25+", |
| 49 |
pro: "150+", |
| 50 |
}, |
| 51 |
{ |
| 52 |
title: __("Archive & Single Pages Builder", "post-carousel"), |
| 53 |
free: "no", |
| 54 |
pro: "19", |
| 55 |
hot: true, |
| 56 |
new: true, |
| 57 |
info: __("Build Post Archive or Single Page with Stylish & Customizable Post Title, Featured Image/Video, Post Excerpt, Post Count, Likes, Date, Comments, Reading Time, Views, Like Count, Archive Title, Breadcrumbs, Next/Previous, Social Share, Author Box, Smart Post Tag, and more.", "post-carousel") |
| 58 |
}, |
| 59 |
{ |
| 60 |
title: __("Smart Content Blocks for Dynamic Display", "post-carousel"), |
| 61 |
free: "1", |
| 62 |
pro: "10", |
| 63 |
hot: true, |
| 64 |
new: true, |
| 65 |
info: __("Add Versatile Website Section with Smart Blocks, including Section Heading, Container, Smart Image, Smart Search (Pro), Smart List, Smart Button, Taxonomy, Social Profiles, Smart Info Box, and Table of Contents-TOC blocks.", "post-carousel") |
| 66 |
}, |
| 67 |
{ |
| 68 |
title: __("Reusable Saved Templates for Page Builders", "post-carousel"), |
| 69 |
// free: "yes", |
| 70 |
// pro: "yes", |
| 71 |
free: "2", |
| 72 |
pro: "Unlimited", |
| 73 |
}, |
| 74 |
{ |
| 75 |
title: __("Query & Filtering", "post-carousel"), |
| 76 |
section: true |
| 77 |
}, |
| 78 |
{ |
| 79 |
title: __("Advanced Post Query Builder", "post-carousel"), |
| 80 |
free: "Limited", |
| 81 |
pro: "Advanced", |
| 82 |
}, |
| 83 |
{ |
| 84 |
title: __("Filter Post by Keyword & Custom Fields", "post-carousel"), |
| 85 |
free: "no", |
| 86 |
pro: "yes", |
| 87 |
}, |
| 88 |
{ |
| 89 |
title: __("Include / Exclude Post Control", "post-carousel"), |
| 90 |
free: "no", |
| 91 |
pro: "yes", |
| 92 |
}, |
| 93 |
{ |
| 94 |
title: __("Advanced Frontend Live Filtering", "post-carousel"), |
| 95 |
free: "Limited", |
| 96 |
pro: "Advanced", |
| 97 |
hot: true, |
| 98 |
new: true, |
| 99 |
info: __("Use filters like keyword, author, taxonomy, or date to refine results and discover content faster.", "post-carousel") |
| 100 |
}, |
| 101 |
{ |
| 102 |
title: __("AJAX Live Search", "post-carousel"), |
| 103 |
free: "no", |
| 104 |
pro: "yes", |
| 105 |
hot: true, |
| 106 |
}, |
| 107 |
{ |
| 108 |
title: __("AJAX Pagination & Infinite Scroll", "post-carousel"), |
| 109 |
free: "Limited", |
| 110 |
pro: "Advanced", |
| 111 |
}, |
| 112 |
{ |
| 113 |
title: __("Content & Layout Control", "post-carousel"), |
| 114 |
section: true |
| 115 |
}, |
| 116 |
{ |
| 117 |
title: __("Supports All Content Types", "post-carousel"), |
| 118 |
free: "yes", |
| 119 |
pro: "yes", |
| 120 |
info: __("Display Any content types like Post Pages, Media, and CPTs with Smart Posts Easily.", "post-carousel") |
| 121 |
}, |
| 122 |
{ |
| 123 |
title: __("Dynamic Layout Control Per Blocks", "post-carousel"), |
| 124 |
free: "Limited", |
| 125 |
pro: "Advanced", |
| 126 |
hot: true, |
| 127 |
}, |
| 128 |
{ |
| 129 |
title: __("Trendy Content Orientations", "post-carousel"), |
| 130 |
free: "1", |
| 131 |
pro: "8", |
| 132 |
}, |
| 133 |
{ |
| 134 |
title: __("Advanced Carousel & Slider Controls", "post-carousel"), |
| 135 |
free: "Basic", |
| 136 |
pro: "Advanced", |
| 137 |
}, |
| 138 |
{ |
| 139 |
title: __("Equal Height & Partial Slide View", "post-carousel"), |
| 140 |
free: "no", |
| 141 |
pro: "yes", |
| 142 |
hot: true, |
| 143 |
}, |
| 144 |
{ |
| 145 |
title: __("Post Featured Video Support", "post-carousel"), |
| 146 |
free: "no", |
| 147 |
pro: "yes", |
| 148 |
}, |
| 149 |
{ |
| 150 |
title: __("Taxonomy Display Positions and Custom Styling", "post-carousel"), |
| 151 |
free: "Limited", |
| 152 |
pro: "Advanced", |
| 153 |
}, |
| 154 |
{ |
| 155 |
title: __("Display Posts Gallery Images", "post-carousel"), |
| 156 |
free: "no", |
| 157 |
pro: "yes", |
| 158 |
new: true, |
| 159 |
}, |
| 160 |
{ |
| 161 |
title: __("Popup Post View", "post-carousel"), |
| 162 |
free: "no", |
| 163 |
pro: "yes", |
| 164 |
}, |
| 165 |
{ |
| 166 |
title: __("Highlight Latest Posts with a Scrolling News Ticker", "post-carousel"), |
| 167 |
free: "no", |
| 168 |
pro: "yes", |
| 169 |
hot: true, |
| 170 |
}, |
| 171 |
{ |
| 172 |
title: __("Drag & Drop Content Ordering", "post-carousel"), |
| 173 |
free: "no", |
| 174 |
pro: "yes", |
| 175 |
}, |
| 176 |
{ |
| 177 |
title: __("Engagement & Visual Effects", "post-carousel"), |
| 178 |
section: true |
| 179 |
}, |
| 180 |
{ |
| 181 |
title: __("Interactive Hover Effects & Animations", "post-carousel"), |
| 182 |
free: "no", |
| 183 |
pro: "yes", |
| 184 |
}, |
| 185 |
{ |
| 186 |
title: __("Post Highlight & Badges", "post-carousel"), |
| 187 |
free: "no", |
| 188 |
pro: "yes", |
| 189 |
new: true, |
| 190 |
hot: true, |
| 191 |
}, |
| 192 |
{ |
| 193 |
title: __("Customizable CTA & Read More Button", "post-carousel"), |
| 194 |
free: "no", |
| 195 |
pro: "yes", |
| 196 |
}, |
| 197 |
{ |
| 198 |
title: __("Social Share Popup Display", "post-carousel"), |
| 199 |
free: "no", |
| 200 |
pro: "yes", |
| 201 |
}, |
| 202 |
{ |
| 203 |
title: __("Back-to-Top Navigation", "post-carousel"), |
| 204 |
free: "no", |
| 205 |
pro: "yes", |
| 206 |
}, |
| 207 |
{ |
| 208 |
title: __("Performance & Integrations", "post-carousel"), |
| 209 |
section: true |
| 210 |
}, |
| 211 |
{ |
| 212 |
title: __("SEO Meta Integration (Yoast, Rank Math, All-in-One SEO, Squirrly, SEOPress, etc.)", "post-carousel"), |
| 213 |
free: "no", |
| 214 |
pro: "yes", |
| 215 |
}, |
| 216 |
{ |
| 217 |
title: __("Popular Page Builders: Elementor, Divi, WPBakery, Beaver, Bricks, and more", "post-carousel"), |
| 218 |
free: "yes", |
| 219 |
pro: "yes", |
| 220 |
}, |
| 221 |
{ |
| 222 |
title: __("Responsive Device-Based Content Control", "post-carousel"), |
| 223 |
free: "no", |
| 224 |
pro: "yes", |
| 225 |
}, |
| 226 |
{ |
| 227 |
title: __("Image Optimization", "post-carousel"), |
| 228 |
free: "no", |
| 229 |
pro: "yes", |
| 230 |
}, |
| 231 |
{ |
| 232 |
title: __("Global Typography & Styling", "post-carousel"), |
| 233 |
free: "yes", |
| 234 |
pro: "yes", |
| 235 |
hot: true, |
| 236 |
}, |
| 237 |
{ |
| 238 |
title: __("ACF, Pods, Meta box, Toolset, and etc. Compatible", "post-carousel"), |
| 239 |
free: "yes", |
| 240 |
pro: "yes", |
| 241 |
hot: true, |
| 242 |
}, |
| 243 |
{ |
| 244 |
title: __("Lightweight, Fast & Fully Responsive", "post-carousel"), |
| 245 |
free: "yes", |
| 246 |
pro: "yes", |
| 247 |
}, |
| 248 |
{ |
| 249 |
title: __("Retina-Ready & Custom Responsive Breakpoints", "post-carousel"), |
| 250 |
free: "yes", |
| 251 |
pro: "yes", |
| 252 |
}, |
| 253 |
{ |
| 254 |
title: __("Translation and Localization Support", "post-carousel"), |
| 255 |
free: "yes", |
| 256 |
pro: "yes", |
| 257 |
}, |
| 258 |
{ |
| 259 |
title: __("Premium Updates & Security", "post-carousel"), |
| 260 |
free: "no", |
| 261 |
pro: "yes", |
| 262 |
}, |
| 263 |
{ |
| 264 |
title: __("Priority Expert Support", "post-carousel"), |
| 265 |
free: "no", |
| 266 |
pro: "yes", |
| 267 |
}, |
| 268 |
]; |
| 269 |
|
| 270 |
const testimonials = [ |
| 271 |
{ |
| 272 |
text: "Very easy to set up and nice options even in the free version which I'm using on a NFP horse club site. Very professional look. I'm new to WordPress and still getting the hang of it so finding a plugin...", |
| 273 |
name: "Comlodge", |
| 274 |
role: "Web Developer", |
| 275 |
img: "comlodge.png", |
| 276 |
user: "wordpress", |
| 277 |
}, |
| 278 |
{ |
| 279 |
text: "The support is excellent !!,Five stars for the plugin and five stars for the support service. We have had some doubts and they have been resolved all of them at the moment.We are very happy with the...", |
| 280 |
name: "Annamaspons", |
| 281 |
role: "Entrepreneur", |
| 282 |
img: "testimonial-avatar.svg", |
| 283 |
user: "wordpress", |
| 284 |
}, |
| 285 |
{ |
| 286 |
text: "The Team at ShapedPlugin are amazing. They helped me custom stylise a post header. I would recommend Smart Post pro to anyone looking for a different set up on their Wordpress site.", |
| 287 |
name: "Adrian North", |
| 288 |
role: "Agency Owner from London", |
| 289 |
img: "testimonial-avatar.svg", |
| 290 |
user: "trustpilot", |
| 291 |
}, |
| 292 |
]; |
| 293 |
|
| 294 |
const generateFreeOrProContent = (content, type) => { |
| 295 |
if (content === "yes") { |
| 296 |
return <span className={`spspc-free-pro spspc-check-icon`}></span>; |
| 297 |
} |
| 298 |
|
| 299 |
if (content === "no") { |
| 300 |
return <span className={`spspc-free-pro spspc-close-icon`}></span>; |
| 301 |
} |
| 302 |
|
| 303 |
return <span className={`spspc-free-pro`}> <b>{content}</b></span>; |
| 304 |
}; |
| 305 |
|
| 306 |
return ( |
| 307 |
<section className="spspc__help lite-to-pro-page" id="lite-to-pro-tab"> |
| 308 |
<div className="spspc-container"> |
| 309 |
<div className="spspc-lite-to-pro-wrap"> |
| 310 |
<div className="spspc-call-to-action-top"> |
| 311 |
<div> |
| 312 |
<h2 className="spspc-section-title">Unlock the Full Editorial Experience</h2> |
| 313 |
<span className="spspc-section-subtitle"> |
| 314 |
Design, organize, and display your content exactly the way you want with powerful features. |
| 315 |
</span> |
| 316 |
</div> |
| 317 |
<a |
| 318 |
target="_blank" |
| 319 |
rel="noreferrer" |
| 320 |
href="https://wpsmartpost.com/pricing/?ref=1" |
| 321 |
className="spspc-big-btn" |
| 322 |
> |
| 323 |
Upgrade to Pro Now! |
| 324 |
</a> |
| 325 |
</div> |
| 326 |
<div className="spspc-features"> |
| 327 |
<ul> |
| 328 |
<li className="spspc-header"> |
| 329 |
<span className="spspc-title">FEATURES</span> |
| 330 |
<span className="spspc-free">Lite</span> |
| 331 |
<span className="spspc-pro"> |
| 332 |
<i className="spspc-light-to-pro-icon"> |
| 333 |
<svg |
| 334 |
width="18" |
| 335 |
height="18" |
| 336 |
viewBox="0 0 18 18" |
| 337 |
fill="none" |
| 338 |
xmlns="http://www.w3.org/2000/svg" |
| 339 |
> |
| 340 |
<path |
| 341 |
d="M11.494 5.77c.212.388.568.679 1.005.77a1.4 1.4 0 0 0 1.24-.352l2.63-2.41-.853 6.78H2.5l-.854-6.78 1.08.989 1.55 1.421a1.4 1.4 0 0 0 1.242.352 1.5 1.5 0 0 0 1.003-.77l2.487-4.56z" |
| 342 |
stroke="#fff" |
| 343 |
strokeWidth="1.524" |
| 344 |
/> |
| 345 |
<path |
| 346 |
d="M15.439 15.707H2.577c-.414 0-.749-.41-.749-.915v-2.01h14.36v2.01c0 .506-.336.915-.75.915" |
| 347 |
fill="#fff" |
| 348 |
/> |
| 349 |
</svg> |
| 350 |
</i>{" "} |
| 351 |
PRO |
| 352 |
</span> |
| 353 |
</li> |
| 354 |
|
| 355 |
{features.map((item, index) => ( |
| 356 |
<Fragment key={index}> |
| 357 |
{!item.section && <li className="spspc-body" key={index}> |
| 358 |
<span className="spspc-title"> |
| 359 |
{item?.title} |
| 360 |
{item?.info && <InfoText text={item?.info} />} |
| 361 |
{item?.video && ( |
| 362 |
<span className="spspc-settings-info"> |
| 363 |
<VideoTooltipIcon color="#757575" /> |
| 364 |
<span className="spspc-help-tooltip"> |
| 365 |
<video src={item?.video} autoPlay loop muted /> |
| 366 |
</span> |
| 367 |
</span> |
| 368 |
)} |
| 369 |
{item?.new && <i className="spspc-new">{__("new", "post-carousel")}</i>} |
| 370 |
{item?.hot && <i className="spspc-hot">{__("hot", "post-carousel")}</i>} |
| 371 |
</span> |
| 372 |
{generateFreeOrProContent(item?.free, "free")} |
| 373 |
{generateFreeOrProContent(item?.pro, "pro")} |
| 374 |
</li>} |
| 375 |
{item.section && <li className="spspc-lite-vs-pro-section-title"> |
| 376 |
<span>{item?.title}</span> |
| 377 |
</li>} |
| 378 |
</Fragment> |
| 379 |
))} |
| 380 |
</ul> |
| 381 |
</div> |
| 382 |
{/* <div className="spspc-trustpilot-section"> |
| 383 |
<h4>Excellent</h4> |
| 384 |
<ul> |
| 385 |
<li><TrustPilotIcon /></li> |
| 386 |
<li><TrustPilotIcon /></li> |
| 387 |
<li><TrustPilotIcon /></li> |
| 388 |
<li><TrustPilotIcon /></li> |
| 389 |
<li><TrustPilotIcon /></li> |
| 390 |
</ul> |
| 391 |
<span>4.8/5 based on 112+ reviews on</span> |
| 392 |
<TrustPilotStar /> |
| 393 |
<strong><a href="https://www.trustpilot.com/review/shapedplugin.com" target="_blank">Trustpilot</a></strong> |
| 394 |
</div> */} |
| 395 |
<div className="spspc-upgrade-to-pro"> |
| 396 |
<h2 className="spspc-section-title">Upgrade To PRO & Enjoy Advanced Features!</h2> |
| 397 |
<span className="spspc-section-subtitle"> |
| 398 |
Already, <b>30000+</b> people are using Smart Post to build more engaging and dynamic websites. |
| 399 |
</span> |
| 400 |
<div className="spspc-upgrade-to-pro-btn"> |
| 401 |
<div className="spspc-action-btn"> |
| 402 |
<a |
| 403 |
target="_blank" |
| 404 |
href="https://wpsmartpost.com/pricing/?ref=1" |
| 405 |
className="spspc-big-btn" |
| 406 |
> |
| 407 |
Upgrade to Pro Now! |
| 408 |
</a> |
| 409 |
<span className="spspc-small-paragraph"> |
| 410 |
14-Day No-Questions-Asked{" "} |
| 411 |
<a target="_blank" href="https://shapedplugin.com/refund-policy/"> |
| 412 |
Refund Policy |
| 413 |
</a> |
| 414 |
</span> |
| 415 |
</div> |
| 416 |
<a target="_blank" href="https://wpsmartpost.com/" className="spspc-big-btn-border"> |
| 417 |
See Full Features |
| 418 |
</a> |
| 419 |
</div> |
| 420 |
</div> |
| 421 |
</div> |
| 422 |
<div className="spspc-testimonial"> |
| 423 |
<div className="spspc-testimonial-header"> |
| 424 |
<div className="spspc-testimonial-ratings"> |
| 425 |
<a |
| 426 |
href='https://wordpress.org/support/plugin/post-carousel/reviews/' |
| 427 |
target='_blank' |
| 428 |
rel="noreferrer" |
| 429 |
title="Reviews on WordPress" |
| 430 |
className="spspc-testimonial-rating-item"> |
| 431 |
<div className="spspc-testimonial-rating-wordpress"> |
| 432 |
<div className="spspc-wp-mark"> |
| 433 |
<WPIcon /> |
| 434 |
</div> |
| 435 |
<div className="spspc-wp-text"> |
| 436 |
<StarIcon /> |
| 437 |
<StarIcon /> |
| 438 |
<StarIcon /> |
| 439 |
<StarIcon /> |
| 440 |
<StarHalfIcon /> |
| 441 |
</div> |
| 442 |
</div> |
| 443 |
<span className="spspc-testimonial-rating-score">4.8/5</span> |
| 444 |
<span className="spspc-testimonial-review-count">200+ Reviews</span> |
| 445 |
</a> |
| 446 |
<a |
| 447 |
href='https://www.trustpilot.com/review/shapedplugin.com' |
| 448 |
target='_blank' |
| 449 |
rel="noreferrer" |
| 450 |
title="Reviews on Trustpilot" |
| 451 |
className="spspc-testimonial-rating-item"> |
| 452 |
<div className="spspc-testimonial-rating-trustpilot"> |
| 453 |
<div className="spspc-trustpilot-mark"> |
| 454 |
<TrustPilotStar /> |
| 455 |
</div> |
| 456 |
</div> |
| 457 |
<div className="spspc-trustpilot-stars"> |
| 458 |
<StarIcon color='#fff' /> |
| 459 |
<StarIcon color='#fff' /> |
| 460 |
<StarIcon color='#fff' /> |
| 461 |
<StarIcon color='#fff' /> |
| 462 |
<StarIcon color='#fff' /> |
| 463 |
</div> |
| 464 |
<span className="spspc-testimonial-rating-score">4.9/5</span> |
| 465 |
<span className="spspc-testimonial-review-count">140+ Reviews</span> |
| 466 |
</a> |
| 467 |
</div> |
| 468 |
<h2 className="spspc-testimonial-title"> |
| 469 |
Don't Just Take Our Word for It — See What Users Say! |
| 470 |
</h2> |
| 471 |
</div> |
| 472 |
<div className="spspc-testimonial-wrap"> |
| 473 |
{testimonials.map((item, index) => ( |
| 474 |
<div className={`spspc-testimonial-card ${item?.user === 'trustpilot' ? 'spspc-testimonial-card-trustpilot' : ''}`} key={index}> |
| 475 |
<div className="spspc-testimonial-card-header"> |
| 476 |
<div className="spspc-testimonial-reviewer"> |
| 477 |
<div className="spspc-testimonial-avatar"> |
| 478 |
{item?.user === 'trustpilot' ? ( |
| 479 |
<div className="spspc-testimonial-avatar-initials"> |
| 480 |
<span>{item.name.slice(0, 2).toUpperCase()}</span> |
| 481 |
</div> |
| 482 |
) : ( |
| 483 |
<img |
| 484 |
src={`${sp_pcp_block_settings?.pluginUrl}admin/help-page/img/${item.img}`} |
| 485 |
alt={item.name} |
| 486 |
/> |
| 487 |
)} |
| 488 |
<div className="spspc-testimonial-source-badge"> |
| 489 |
{item?.user === 'trustpilot' ? <TrustPilotStar /> : <WPIcon />} |
| 490 |
</div> |
| 491 |
</div> |
| 492 |
<div className="spspc-testimonial-reviewer-info"> |
| 493 |
<h3>{item.name}</h3> |
| 494 |
<p>{item.role}</p> |
| 495 |
</div> |
| 496 |
</div> |
| 497 |
</div> |
| 498 |
<div className="spspc-testimonial-rating-stars"> |
| 499 |
{item?.user === 'trustpilot' ? ( |
| 500 |
<div className="spspc-testimonial-rating-trustpilot-stars"> |
| 501 |
<span className="spspc-trustpilot-star-item"><StarIcon color='#fff' /></span> |
| 502 |
<span className="spspc-trustpilot-star-item"><StarIcon color='#fff' /></span> |
| 503 |
<span className="spspc-trustpilot-star-item"><StarIcon color='#fff' /></span> |
| 504 |
<span className="spspc-trustpilot-star-item"><StarIcon color='#fff' /></span> |
| 505 |
<span className="spspc-trustpilot-star-item"><StarIcon color='#fff' /></span> |
| 506 |
</div> |
| 507 |
) : ( |
| 508 |
<span>� |
| 509 |
� |
| 510 |
� |
| 511 |
� |
| 512 |
� |
| 513 |
</span> |
| 514 |
)} |
| 515 |
</div> |
| 516 |
<div className="spspc-testimonial-card-content"> |
| 517 |
<p>{item.text}</p> |
| 518 |
</div> |
| 519 |
</div> |
| 520 |
))} |
| 521 |
</div> |
| 522 |
</div> |
| 523 |
</div> |
| 524 |
</section> |
| 525 |
); |
| 526 |
}; |
| 527 |
|
| 528 |
export default LightToPro; |
| 529 |
|
