filter-gallery / admin / free-vs-pro.php

free-vs-pro.php in Filter Gallery trunk, at admin/free-vs-pro.php

385 lines 23.1 KB

Raw Download Zip

1	<?php
2	if (!defined('ABSPATH')) {
3	exit;
4	}
5	$ufg_loader_title = __('Loading Free vs Pro Comparison...', 'filter-gallery');
6	$ufg_loader_subtitle = __('Please wait while features comparison list loads', 'filter-gallery');
7	require_once 'loader.php';
8	?>
9	<div class="wrap ufg-pricing-page" style="margin: 30px 20px 0 10px;">
10
11
12
13	<div class="max-w-7xl">
14	<!-- Header Section -->
15	<div class="text-center mb-16" style="margin-top: 20px;">
16	<h1 class="main-title">Supercharge Your Gallery</h1>
17	<p class="main-subtitle">
18	Unlock advanced grid sorting, nested filters, pre-built design templates, dynamic loading layouts, and premium developer tools by upgrading to Pro.
19	</p>
20	</div>
21
22	<!-- Plan Cards -->
23	<div class="grid lg:grid-cols-2">
24	<!-- Free Plan -->
25	<div class="pricing-card free-card rounded-3xl p-12 border">
26	<div class="mb-8">
27	<span class="ufg-badge" style="background: #e2e8f0; color: #475569; padding: 4px 14px; border-radius: 99px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;">CURRENT PLAN</span>
28	<h2 class="font-black text-gray-900" style="font-size: 30px; margin-top: 16px; margin-bottom: 8px; color: #0f172a;">Free Version</h2>
29	<p class="text-gray-600" style="font-size: 14px; color: #64748b;">Essential features for building simple image displays.</p>
30	</div>
31	<div class="space-y-4 mb-10" style="margin-bottom: 40px; display: flex; flex-direction: column; gap: 14px;">
32	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> Unlimited Galleries & Shortcodes</div>
33	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> Responsive Columns Layouts</div>
34	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> Masonry Layout Grid Support</div>
35	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> Standard Lightbox Title Overlay</div>
36	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="cross-icon">✕</span> Justified & Presets Templates</div>
37	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="cross-icon">✕</span> Nested Categories & Icon Pickers</div>
38	</div>
39	<button class="cta-button free items-center justify-center flex">Active & Installed</button>
40	</div>
41
42	<!-- Pro Plan -->
43	<div class="pricing-card pro-card rounded-3xl p-12">
44	<div style="position: absolute; top: -14px; right: 32px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 6px 18px; border-radius: 99px; font-weight: 800; font-size: 11px; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(37,99,235,0.25);">MOST POPULAR</div>
45	<div class="mb-8">
46	<span class="ufg-badge" style="background: #dbeafe; color: #2563eb; padding: 4px 14px; border-radius: 99px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;">PROFESSIONAL</span>
47	<h2 class="font-black text-gray-900" style="font-size: 30px; margin-top: 16px; margin-bottom: 8px; color: #0f172a;">Pro Version</h2>
48	<p class="text-gray-600" style="font-size: 14px; color: #64748b;">Complete styling control for developers and web creators.</p>
49	</div>
50	<div class="space-y-4 mb-10" style="margin-bottom: 40px; display: flex; flex-direction: column; gap: 14px;">
51	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> <strong>Atelier Luxury & Custom Presets (Coming Soon)</strong></div>
52	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> <strong>Nested Hierarchical Sub-Categories (5 Levels)</strong></div>
53	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> <strong>Custom Redirect Links & Read More Buttons</strong></div>
54	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> <strong>Searchable FontAwesome Filters Icons</strong></div>
55	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> <strong>AJAX Load More, Pagination & Loading Screens</strong></div>
56	<div class="flex items-center" style="font-size: 14px; color: #475569;"><span class="check-icon">✓</span> <strong>Import/Export Dashboard & Priority Support</strong></div>
57	</div>
58	<a href="https://wpfrank.com/wordpress-plugins/filter-gallery-pro/" target="_blank" class="cta-button pro items-center justify-center flex">Upgrade to Pro Now</a>
59	</div>
60	</div>
61
62	<!-- Comparison Table -->
63	<div class="table-responsive-container">
64	<table class="comparison-table">
65	<thead>
66	<tr>
67	<th style="width: 50%;">Features</th>
68	<th class="text-center" style="width: 25%;">Free Version</th>
69	<th class="text-center" style="width: 25%;">Pro Version</th>
70	</tr>
71	</thead>
72	<tbody>
73	<!-- Section: Core Architecture -->
74	<tr class="table-category-row">
75	<td colspan="3">Core & Architecture</td>
76	</tr>
77	<tr>
78	<td>
79	<span class="feature-name">Unlimited Galleries</span>
80	<span class="feature-desc">Create and configure as many independent galleries as required.</span>
81	</td>
82	<td class="text-center"><span class="check-icon">✓</span></td>
83	<td class="text-center"><span class="check-icon">✓</span></td>
84	</tr>
85	<tr>
86	<td>
87	<span class="feature-name">Shortcodes Integration</span>
88	<span class="feature-desc">Place galleries in posts, pages, or widgets using shortcodes.</span>
89	</td>
90	<td class="text-center"><span class="text-bold-slate">[filter-gallery] & [ufg]</span></td>
91	<td class="text-center"><span class="text-bold-slate">[filter-gallery] & [ufg]</span></td>
92	</tr>
93	<tr>
94	<td>
95	<span class="feature-name">Responsive Breakpoints</span>
96	<span class="feature-desc">Adapts grid layout and display columns automatically to device viewport widths.</span>
97	</td>
98	<td class="text-center"><span class="check-icon">✓</span></td>
99	<td class="text-center"><span class="check-icon">✓</span></td>
100	</tr>
101	<tr>
102	<td>
103	<span class="feature-name">No Frontend Bloat / Speed Optimized</span>
104	<span class="feature-desc">Frontend script assets enqueued without Bootstrap or FontAwesome layout dependencies.</span>
105	</td>
106	<td class="text-center"><span class="check-icon">✓</span></td>
107	<td class="text-center"><span class="check-icon">✓</span></td>
108	</tr>
109
110	<!-- Section: Layouts & Templates -->
111	<tr class="table-category-row">
112	<td colspan="3">Gallery Layouts & Templates</td>
113	</tr>
114	<tr>
115	<td>
116	<span class="feature-name">Standard Columns Selection</span>
117	<span class="feature-desc">Select grid columns count for Desktop, Tablet, Landscape, and Portrait.</span>
118	</td>
119	<td class="text-center">Locked to standard options<br><span class="feature-desc">(Desktop: 3, 4, 6 only)</span></td>
120	<td class="text-center">Fully customizable<br><span class="text-bold-slate">Any value 1 to 6</span></td>
121	</tr>
122	<tr>
123	<td>
124	<span class="feature-name">Masonry Layout</span>
125	<span class="feature-desc">Auto-packs cards vertically to remove spacing gaps from multi-height items.</span>
126	</td>
127	<td class="text-center"><span class="check-icon">✓</span></td>
128	<td class="text-center"><span class="check-icon">✓</span></td>
129	</tr>
130	<tr>
131	<td>
132	<span class="feature-name">Justified Grid Layout</span>
133	<span class="feature-desc">Aligns cards dynamically to form straight edges on both margins.</span>
134	</td>
135	<td class="text-center"><span class="cross-icon">✕</span></td>
136	<td class="text-center"><span class="check-icon">✓</span></td>
137	</tr>
138	<tr>
139	<td>
140	<span class="feature-name">Native Layout Presets</span>
141	<span class="feature-desc">Includes advanced, pre-styled template presets like Atelier Luxury.</span>
142	</td>
143	<td class="text-center"><span class="cross-icon">✕</span></td>
144	<td class="text-center">Coming Soon</td>
145	</tr>
146
147	<!-- Section: Category Filtering -->
148	<tr class="table-category-row">
149	<td colspan="3">Category Filtering & Controls</td>
150	</tr>
151	<tr>
152	<td>
153	<span class="feature-name">Parent Categories Limits</span>
154	<span class="feature-desc">Number of main filter tags you can create.</span>
155	</td>
156	<td class="text-center">Maximum 5</td>
157	<td class="text-center"><span class="text-bold-slate">Unlimited</span></td>
158	</tr>
159	<tr>
160	<td>
161	<span class="feature-name">Multi-level Nesting Hierarchy</span>
162	<span class="feature-desc">Nest filters deeply underneath parents to structure categories.</span>
163	</td>
164	<td class="text-center"><span class="cross-icon">✕</span></td>
165	<td class="text-center"><span class="text-bold-slate">Yes - Up to 5 Levels</span></td>
166	</tr>
167	<tr>
168	<td>
169	<span class="feature-name">Category Menu Layout Styles</span>
170	<span class="feature-desc">Design of the filter tag listing (Dropdowns, Pill menus, etc.).</span>
171	</td>
172	<td class="text-center">Standard Buttons</td>
173	<td class="text-center"><span class="text-bold-slate">6 Styles</span><br><span class="feature-desc">(Buttons, Glow Slider, Dropdown, Hover, Flat, Text)</span></td>
174	</tr>
175	<tr>
176	<td>
177	<span class="feature-name">Filter Active Image Counts</span>
178	<span class="feature-desc">Displays counter badge with count of assigned assets next to tags.</span>
179	</td>
180	<td class="text-center"><span class="cross-icon">✕</span></td>
181	<td class="text-center"><span class="check-icon">✓</span></td>
182	</tr>
183	<tr>
184	<td>
185	<span class="feature-name">FontAwesome Icons on Categories</span>
186	<span class="feature-desc">Assign specific searchable icons directly to filter tags.</span>
187	</td>
188	<td class="text-center"><span class="cross-icon">✕</span></td>
189	<td class="text-center"><span class="text-bold-slate">Yes - Searchable Picker</span></td>
190	</tr>
191	<tr>
192	<td>
193	<span class="feature-name">All Button Visibility & Icon</span>
194	<span class="feature-desc">Enable/disable "All" filter button, rename label, or assign custom icons.</span>
195	</td>
196	<td class="text-center"><span class="check-icon">✓</span></td>
197	<td class="text-center"><span class="check-icon">✓</span></td>
198	</tr>
199	<tr>
200	<td>
201	<span class="feature-name">URL Filtering & Deep Linking</span>
202	<span class="feature-desc">Filter category automatically via URL parameters on load.</span>
203	</td>
204	<td class="text-center"><span class="cross-icon">✕</span></td>
205	<td class="text-center"><span class="check-icon">✓</span></td>
206	</tr>
207	<tr>
208	<td>
209	<span class="feature-name">Default Loaded Category</span>
210	<span class="feature-desc">Define a custom category tag to display automatically on load instead of "All".</span>
211	</td>
212	<td class="text-center"><span class="check-icon">✓</span></td>
213	<td class="text-center"><span class="check-icon">✓</span></td>
214	</tr>
215
216	<!-- Section: Media Customization & Styling -->
217	<tr class="table-category-row">
218	<td colspan="3">Media Customization & Styling</td>
219	</tr>
220	<tr>
221	<td>
222	<span class="feature-name">Grid Padding & Border Spacings</span>
223	<span class="feature-desc">Style card sizes, borders, paddings, and background panels in editor.</span>
224	</td>
225	<td class="text-center"><span class="check-icon">✓</span></td>
226	<td class="text-center"><span class="check-icon">✓</span></td>
227	</tr>
228	<tr>
229	<td>
230	<span class="feature-name">Level-by-Level Custom Colors</span>
231	<span class="feature-desc">Dedicated styling colors panel for each of the 5 categories levels.</span>
232	</td>
233	<td class="text-center">Fallback Only</td>
234	<td class="text-center">Separate pickers for text, BG, hovers, and active states</td>
235	</tr>
236	<tr>
237	<td>
238	<span class="feature-name">Image Title & Customization</span>
239	<span class="feature-desc">Show card titles, set custom title font sizes, and edit font colors.</span>
240	</td>
241	<td class="text-center"><span class="check-icon">✓</span></td>
242	<td class="text-center"><span class="check-icon">✓</span></td>
243	</tr>
244	<tr>
245	<td>
246	<span class="feature-name">Image Descriptions</span>
247	<span class="feature-desc">Add descriptive subtitles under images with text limit limits.</span>
248	</td>
249	<td class="text-center"><span class="check-icon">✓</span></td>
250	<td class="text-center"><span class="check-icon">✓</span></td>
251	</tr>
252	<tr>
253	<td>
254	<span class="feature-name">Redirect Link URLs</span>
255	<span class="feature-desc">Set custom redirection targets on cards pointing to external pages.</span>
256	</td>
257	<td class="text-center"><span class="cross-icon">✕</span></td>
258	<td class="text-center"><span class="check-icon">✓</span></td>
259	</tr>
260	<tr>
261	<td>
262	<span class="feature-name">Read More Button Customizer</span>
263	<span class="feature-desc">Modify labels, background/hover colors, and set FontAwesome icons.</span>
264	</td>
265	<td class="text-center"><span class="cross-icon">✕</span></td>
266	<td class="text-center"><span class="check-icon">✓</span></td>
267	</tr>
268	<tr>
269	<td>
270	<span class="feature-name">Custom CSS Box</span>
271	<span class="feature-desc">Inject custom raw CSS modifications directly in the settings panel.</span>
272	</td>
273	<td class="text-center"><span class="cross-icon">✕</span></td>
274	<td class="text-center"><span class="check-icon">✓</span></td>
275	</tr>
276	<tr>
277	<td>
278	<span class="feature-name">Image Sorting Controls</span>
279	<span class="feature-desc">Sort images manually, by ID, random shuffle, or alphabetically by title.</span>
280	</td>
281	<td class="text-center">ID & Manual only</td>
282	<td class="text-center"><span class="text-bold-slate">Advanced Options</span><br><span class="feature-desc">(Random, Title, ID, Manual)</span></td>
283	</tr>
284	<tr>
285	<td>
286	<span class="feature-name">Lightbox Settings</span>
287	<span class="feature-desc">Display full media metadata (descriptions, slide index numbering) inside modal.</span>
288	</td>
289	<td class="text-center">Title only</td>
290	<td class="text-center">Fully customizable</td>
291	</tr>
292	<tr>
293	<td>
294	<span class="feature-name">Image Hover Animations</span>
295	<span class="feature-desc">Choose from premium overlay transitions and zoom layouts on hover.</span>
296	</td>
297	<td class="text-center">Only 1 Effect</td>
298	<td class="text-center"><span class="text-bold-slate">15+ Hover Animations</span></td>
299	</tr>
300
301	<!-- Section: Loading & AJAX -->
302	<tr class="table-category-row">
303	<td colspan="3">Performance & AJAX Loading</td>
304	</tr>
305	<tr>
306	<td>
307	<span class="feature-name">AJAX Asynchronous Pagination</span>
308	<span class="feature-desc">Divides large galleries into pages with fast, non-refreshing AJAX loading.</span>
309	</td>
310	<td class="text-center"><span class="cross-icon">✕</span></td>
311	<td class="text-center"><span class="check-icon">✓</span></td>
312	</tr>
313	<tr>
314	<td>
315	<span class="feature-name">AJAX Asynchronous Load More</span>
316	<span class="feature-desc">Injects images to the bottom of the grid on button press asynchronously.</span>
317	</td>
318	<td class="text-center"><span class="cross-icon">✕</span></td>
319	<td class="text-center"><span class="check-icon">✓</span></td>
320	</tr>
321	<tr>
322	<td>
323	<span class="feature-name">Frontend Preloader Animation</span>
324	<span class="feature-desc">Displays a rotating CSS spinner and loading screen during initialization.</span>
325	</td>
326	<td class="text-center"><span class="check-icon">✓</span></td>
327	<td class="text-center"><span class="check-icon">✓</span></td>
328	</tr>
329
330	<!-- Section: Management & Support -->
331	<tr class="table-category-row">
332	<td colspan="3">Gallery Management & Support</td>
333	</tr>
334	<tr>
335	<td>
336	<span class="feature-name">Filter Duplicator</span>
337	<span class="feature-desc">Clone filters alongside their sub-level structures in one click.</span>
338	</td>
339	<td class="text-center"><span class="cross-icon">✕</span></td>
340	<td class="text-center"><span class="check-icon">✓</span></td>
341	</tr>
342	<tr>
343	<td>
344	<span class="feature-name">Bulk Deletion Modals</span>
345	<span class="feature-desc">"Delete Selected" and "Delete All" media options inside filter manager.</span>
346	</td>
347	<td class="text-center"><span class="cross-icon">✕</span></td>
348	<td class="text-center"><span class="check-icon">✓</span></td>
349	</tr>
350	<tr>
351	<td>
352	<span class="feature-name">Import & Export Dashboard</span>
353	<span class="feature-desc">Export gallery layout options to migrate them to different setups.</span>
354	</td>
355	<td class="text-center"><span class="check-icon">✓</span></td>
356	<td class="text-center"><span class="check-icon">✓</span></td>
357	</tr>
358	<tr>
359	<td>
360	<span class="feature-name">Premium Customer Support</span>
361	<span class="feature-desc">Priority developer support desk assistance.</span>
362	</td>
363	<td class="text-center"><span class="cross-icon">✕</span></td>
364	<td class="text-center"><span class="check-icon">✓</span></td>
365	</tr>
366	</tbody>
367	</table>
368	</div>
369
370	<!-- Bottom Callout Section -->
371	<div class="bottom-callout">
372	<h3>Ready to Create Beautiful, High-Performance Portfolios?</h3>
373	<p>
374	Upgrade to Filter Gallery Pro today to unlock nested filters hierarchy, searchable FontAwesome category icons, custom redirect link URLs, and advanced AJAX page rendering.
375	</p>
376	<div class="callout-buttons">
377	<a href="https://wpfrank.com/demo/filter-gallery-pro/" target="_blank" class="callout-btn demo">Pro Plugin Demo</a>
378	<a href="https://wpfrank.com/contact/" target="_blank" class="callout-btn contact">Contact To Upgrade Pro</a>
379	</div>
380	</div>
381
382	<div style="height: 60px;"></div>
383	</div>
384	</div>
385