Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.2

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.2

post-carousel / src / admin / pages / liteToPro.js

liteToPro.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.2, at src/admin/pages/liteToPro.js

515 lines 16.9 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { VideoTooltipIcon } from "../../icons/icons";
3	import { StarHalfIcon, StarIcon, TrustPilotIcon, TrustPilotStar, WPIcon } from "./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	const generateFreeOrProContent = (content, type) => {
270	if (content === "yes") {
271	return <span className={`spspc-free-pro spspc-check-icon`}></span>;
272	}
273
274	if (content === "no") {
275	return <span className={`spspc-free-pro spspc-close-icon`}></span>;
276	}
277
278	return <span className={`spspc-free-pro`}> <b>{content}</b></span>;
279	};
280
281	return (
282	<section className="spspc__help lite-to-pro-page" id="lite-to-pro-tab">
283	<div className="spspc-container">
284	<div className="spspc-lite-to-pro-wrap">
285	<div className="spspc-call-to-action-top">
286	<div>
287	<h2 className="spspc-section-title">Unlock the Full Editorial Experience</h2>
288	<span className="spspc-section-subtitle">
289	Design, organize, and display your content exactly the way you want with powerful features.
290	</span>
291	</div>
292	<a
293	target="_blank"
294	rel="noreferrer"
295	href="https://wpsmartpost.com/pricing/?ref=1"
296	className="spspc-big-btn"
297	>
298	Upgrade to Pro Now!
299	</a>
300	</div>
301	<div className="spspc-features">
302	<ul>
303	<li className="spspc-header">
304	<span className="spspc-title">FEATURES</span>
305	<span className="spspc-free">Lite</span>
306	<span className="spspc-pro">
307	<i className="spspc-light-to-pro-icon">
308	<svg
309	width="18"
310	height="18"
311	viewBox="0 0 18 18"
312	fill="none"
313	xmlns="http://www.w3.org/2000/svg"
314	>
315	<path
316	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"
317	stroke="#fff"
318	strokeWidth="1.524"
319	/>
320	<path
321	d="M15.439 15.707H2.577c-.414 0-.749-.41-.749-.915v-2.01h14.36v2.01c0 .506-.336.915-.75.915"
322	fill="#fff"
323	/>
324	</svg>
325	</i>{" "}
326	PRO
327	</span>
328	</li>
329
330	{features.map((item, index) => (
331	<Fragment key={index}>
332	{!item.section && <li className="spspc-body" key={index}>
333	<span className="spspc-title">
334	{item?.title}
335	{item?.info && <InfoText text={item?.info} />}
336	{item?.video && (
337	<span className="spspc-settings-info">
338	<VideoTooltipIcon color="#757575" />
339	<span className="spspc-help-tooltip">
340	<video src={item?.video} autoPlay loop muted />
341	</span>
342	</span>
343	)}
344	{item?.new && <i className="spspc-new">{__("new", "post-carousel")}</i>}
345	{item?.hot && <i className="spspc-hot">{__("hot", "post-carousel")}</i>}
346	</span>
347	{generateFreeOrProContent(item?.free, "free")}
348	{generateFreeOrProContent(item?.pro, "pro")}
349	</li>}
350	{item.section && <li className="spspc-lite-vs-pro-section-title">
351	<span>{item?.title}</span>
352	</li>}
353	</Fragment>
354	))}
355	</ul>
356	</div>
357	<div className="spspc-trustpilot-section">
358	<h4>Excellent</h4>
359	<ul>
360	<li><TrustPilotIcon /></li>
361	<li><TrustPilotIcon /></li>
362	<li><TrustPilotIcon /></li>
363	<li><TrustPilotIcon /></li>
364	<li><TrustPilotIcon /></li>
365	</ul>
366	<span>4.8/5 based on 112+ reviews on</span>
367	<TrustPilotStar />
368	<strong><a href="https://www.trustpilot.com/review/shapedplugin.com" target="_blank">Trustpilot</a></strong>
369	</div>
370	<div className="spspc-upgrade-to-pro">
371	<h2 className="spspc-section-title">Upgrade To PRO & Enjoy Advanced Features!</h2>
372	<span className="spspc-section-subtitle">
373	Already, <b>30000+</b> people are using Smart Post to build more engaging and dynamic websites.
374	</span>
375	<div className="spspc-upgrade-to-pro-btn">
376	<div className="spspc-action-btn">
377	<a
378	target="_blank"
379	href="https://wpsmartpost.com/pricing/?ref=1"
380	className="spspc-big-btn"
381	>
382	Upgrade to Pro Now!
383	</a>
384	<span className="spspc-small-paragraph">
385	14-Day No-Questions-Asked{" "}
386	<a target="_blank" href="https://shapedplugin.com/refund-policy/">
387	Refund Policy
388	</a>
389	</span>
390	</div>
391	<a
392	target="_blank"
393	href="https://wpsmartpost.com/blocks/"
394	className="spspc-big-btn-border spspc-live-pro-demo"
395	>
396	Explore Blocks
397	</a>
398	<a target="_blank" href="https://wpsmartpost.com/" className="spspc-big-btn-border">
399	See Full Features
400	</a>
401	</div>
402	</div>
403	</div>
404	<div className="spspc-testimonial">
405	<div className="spspc-testimonial-title-section">
406	<span className="spspc-testimonial-subtitle">NO NEED TO TAKE OUR WORD FOR IT</span>
407	<h2 className="spspc-section-title">Our Users Love Smart Post Pro!</h2>
408	<div className="spspc-testimonial-wp-review">
409	<ul>
410	<li><StarIcon /></li>
411	<li><StarIcon /></li>
412	<li><StarIcon /></li>
413	<li><StarIcon /></li>
414	<li><StarHalfIcon /></li>
415	</ul>
416	<a href="https://wordpress.org/support/plugin/post-carousel/reviews/" target="_blank">
417	<span>4.8 based on <strong>200+</strong> reviews on</span>
418	<WPIcon />
419	</a>
420	</div>
421	</div>
422	<div className="spspc-testimonial-wrap">
423	<div className="spspc-testimonial-area">
424	<div className="spspc-testimonial-content">
425	<p>
426	Very easy to set up and nice options even in the free version which I’m using on a
427	NFP horse club site. Very professional look. I’m new to WordPress and still getting
428	the hang of it so finding a plugin...
429	</p>
430	</div>
431	<div className="spspc-testimonial-info">
432	<div className="spspc-img">
433	<img
434	src={`${sp_pcp_block_settings?.pluginUrl}admin/help-page/img/comlodge.png`}
435	alt=""
436	/>
437	</div>
438	<div className="spspc-info">
439	<h3>Comlodge</h3>
440	<div className="spspc-star">
441	<i>�
442	�
443	�
444	�
445	�
446	</i>
447	</div>
448	</div>
449	</div>
450	</div>
451	<div className="spspc-testimonial-area">
452	<div className="spspc-testimonial-content">
453	<p>
454	The support is excellent !!,Five stars for the plugin and five stars for the support
455	service. We have had some doubts and they have been resolved all of them at the
456	moment.We are very happy with the...
457	</p>
458	</div>
459	<div className="spspc-testimonial-info">
460	<div className="spspc-img">
461	<img
462	src={`${sp_pcp_block_settings?.pluginUrl}admin/help-page/img/testimonial-avatar.svg`}
463	alt=""
464	/>
465	</div>
466	<div className="spspc-info">
467	<h3>Annamaspons</h3>
468	<div className="spspc-star">
469	<i>�
470	�
471	�
472	�
473	�
474	</i>
475	</div>
476	</div>
477	</div>
478	</div>
479	<div className="spspc-testimonial-area">
480	<div className="spspc-testimonial-content">
481	<p>
482	This is the third site on which I’ve used the free version of what seems to be a
483	pretty unique product. It’s easy to get a good carousel going quickly from either
484	pages or posts. A couple more navigatio...
485	</p>
486	</div>
487	<div className="spspc-testimonial-info">
488	<div className="spspc-img">
489	<img
490	src={`${sp_pcp_block_settings?.pluginUrl}admin/help-page/img/testimonial-avatar.svg`}
491	alt=""
492	/>
493	</div>
494	<div className="spspc-info">
495	<h3>Glenn Watson</h3>
496	<div className="spspc-star">
497	<i>�
498	�
499	�
500	�
501	�
502	</i>
503	</div>
504	</div>
505	</div>
506	</div>
507	</div>
508	</div>
509	</div>
510	</section>
511	);
512	};
513
514	export default LightToPro;
515