home page updates

Author: adictonator

page-home.php

@@ -20,6 +20,8 @@
 	get_template_part('template-parts/sections/section', 'cards');
 	get_template_part('template-parts/sections/section', 'reasons');
 	get_template_part('template-parts/sections/section', 'features');
+	get_template_part('template-parts/sections/section', 'free-reasons');
+	get_template_part('template-parts/sections/section', 'social-proof');
 	get_template_part('template-parts/sections/section', 'testimonials');
 	get_template_part('template-parts/sections/section', 'pricing');
 	get_template_part('template-parts/sections/section', 'faq');

template-parts/sections/section-features.php

@@ -17,12 +17,12 @@
 		<div class="mx-auto max-w-7xl md:pb-24 md:pt-0 py-10 md:space-y-10 space-y-5">
 			<div class="space-y-5 max-w-4xl mx-auto text-center md:px-0 px-5">
 				<h2 class="text-2xl max-w-3xl mx-auto font-bold md:text-5xl font-display">
-					Discover Premium Features <br /> of <span class="text-brand-blue">CJT PLUS</span>
+					Main features of <br /><span class="text-brand-blue">CSS & JavaScript Toolbox</span>
 				</h2>
 
-				<p class="md:text-base text-sm font-medium text-neutral-500">
+				<!--<p class="md:text-base text-sm font-medium text-neutral-500">
 					CJT PLUS simplifies and secures the process of incorporating custom WordPress features using code snippets, allowing you to minimize plugin usage on your website.
-				</p>
+				</p>-->
 			</div>
 			<div class="relative grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5 lg:px-0 px-5">
 				<div class="md:p-6 p-5 md:space-y-10 space-y-5 bg-white rounded shadow-md">
@@ -31,56 +31,56 @@
 							<path d="M35.625 15.2175C35.625 14.33 36.09 13.5275 36.6275 12.82C37.18 12.095 37.5 11.235 37.5 10.3125C37.5 7.7225 34.9825 5.625 31.875 5.625C28.7675 5.625 26.25 7.725 26.25 10.3125C26.25 11.235 26.57 12.095 27.1225 12.82C27.66 13.5275 28.125 14.33 28.125 15.2175C28.1261 15.4319 28.0841 15.6443 28.0015 15.8421C27.9189 16.0399 27.7974 16.2191 27.6441 16.3691C27.4909 16.519 27.3092 16.6366 27.1096 16.7149C26.9101 16.7933 26.6968 16.8307 26.4825 16.825C23.0042 16.7248 19.5318 16.4746 16.075 16.075C16.54 20.1075 16.8075 24.2 16.8625 28.3425C16.8648 28.5598 16.8239 28.7753 16.7423 28.9766C16.6606 29.178 16.5397 29.3611 16.3866 29.5153C16.2336 29.6695 16.0514 29.7917 15.8507 29.875C15.65 29.9582 15.4348 30.0007 15.2175 30C14.33 30 13.5275 29.535 12.82 28.9975C12.1034 28.4378 11.2217 28.131 10.3125 28.125C7.7225 28.125 5.625 30.6425 5.625 33.75C5.625 36.8575 7.725 39.375 10.3125 39.375C11.235 39.375 12.095 39.055 12.82 38.5025C13.5275 37.965 14.33 37.5 15.2175 37.5C15.9925 37.5 16.605 38.15 16.5475 38.925C16.2365 43.1638 15.7008 47.383 14.9425 51.565C18.7375 52.04 22.5875 52.3375 26.4825 52.45C26.6968 52.4557 26.9101 52.4183 27.1096 52.3399C27.3092 52.2616 27.4909 52.144 27.6441 51.9941C27.7974 51.8441 27.9189 51.6649 28.0015 51.4671C28.0841 51.2693 28.1261 51.0569 28.125 50.8425C28.125 49.955 27.66 49.1525 27.1225 48.445C26.5628 47.7284 26.256 46.8467 26.25 45.9375C26.25 43.35 28.77 41.25 31.875 41.25C34.9825 41.25 37.5 43.35 37.5 45.9375C37.5 46.86 37.18 47.72 36.6275 48.445C36.09 49.1525 35.6275 49.955 35.6275 50.8425C35.6275 51.675 36.32 52.34 37.1525 52.2925C41.7012 52.025 46.231 51.4991 50.72 50.7175C51.3992 46.8131 51.8848 42.8774 52.175 38.925C52.1881 38.7423 52.1633 38.5589 52.1022 38.3862C52.0411 38.2136 51.9449 38.0554 51.8198 37.9216C51.6948 37.7878 51.5434 37.6813 51.3752 37.6088C51.207 37.5362 51.0257 37.4992 50.8425 37.5C49.955 37.5 49.1525 37.965 48.445 38.5025C47.72 39.055 46.86 39.375 45.9375 39.375C43.35 39.375 41.25 36.8575 41.25 33.75C41.25 30.6425 43.35 28.125 45.9375 28.125C46.8625 28.125 47.72 28.445 48.445 28.9975C49.1525 29.535 49.955 30 50.845 30C51.0623 30.0007 51.2775 29.9582 51.4782 29.875C51.6789 29.7917 51.8611 29.6695 52.0141 29.5153C52.1672 29.3611 52.2881 29.178 52.3698 28.9766C52.4514 28.7753 52.4923 28.5598 52.49 28.3425C52.4299 23.8622 52.1211 19.3886 51.565 14.9425C46.85 15.7975 42.04 16.3775 37.15 16.665C36.9532 16.6759 36.7562 16.6465 36.5712 16.5784C36.3863 16.5104 36.2171 16.4052 36.0743 16.2694C35.9314 16.1336 35.8179 15.97 35.7406 15.7887C35.6634 15.6073 35.624 15.4146 35.625 15.2175Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
 						</svg>
 
-						<h3 class="text-xl font-semibold text-gray-900 md:text-xl">Shortcodes & Metabox <br />Code Blocks</h3>
+						<h3 class="text-xl font-semibold text-gray-900 md:text-xl">Powerful code editor</h3>
 						<div class="bg-orange-300 w-16 h-2 rounded-2xl"></div>
 						<p class="font-medium text-neutral-500 md:text-base text-sm">
-							The CJT Plus allows users to easily incorporate custom code snippets, shortcodes, and meta boxes into their WordPress websites, enhancing their functionality and design without extensive coding knowledge.
+							Our code editor is more than just a plain text field. It features the tools you would expect in a desktop (IDE) editor such as syntax highlighting and error checking. Supports CSS, JavaScript, PHP, HTML, and plain text.
 						</p>
 					</div>
-					<a href="#" class="group rounded text-sm inline-flex items-center font-semibold gap-x-2.5 text-brand-blue">
+					<!--<a href="#" class="group rounded text-sm inline-flex items-center font-semibold gap-x-2.5 text-brand-blue">
 						Read More
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3 group-hover:translate-x-0.5 duration-150">
 							<path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd"></path>
 						</svg>
-					</a>
+					</a>-->
 				</div>
 				<div class="md:p-6 p-5 md:space-y-10 space-y-5 bg-white rounded shadow-md">
 					<div class="md:space-y-5 space-y-2.5">
 						<svg viewBox="0 0 48 48" class="md:size-20 size-10 md:p-3 p-2 bg-pink-400 rounded" fill="none" xmlns="http://www.w3.org/2000/svg">
 							<path d="M9.28838 6.97503L10.0859 11.7575C10.5997 14.8421 12.0646 17.689 14.2759 19.9L18.3759 24L17.4084 25.9375C16.8659 27.02 17.0784 28.3275 17.9334 29.1825L21.3034 32.5525C21.8284 33.0775 22.1259 33.795 22.1259 34.54V37.2625C22.1259 38.3275 22.7259 39.3 23.6809 39.7775L24.0634 39.9675C25.1459 40.51 26.4534 40.2975 27.3084 39.4425L29.1159 37.635C31.9031 34.8473 33.8802 31.3545 34.8359 27.53C34.9602 27.0342 34.9421 26.5135 34.7838 26.0275C34.6255 25.5415 34.3334 25.11 33.9409 24.7825L30.6159 22.0125C29.9884 21.4875 29.1609 21.265 28.3534 21.4L25.4284 21.8875C24.987 21.961 24.5345 21.9281 24.1084 21.7916C23.6823 21.6551 23.2949 21.4188 22.9784 21.1025L22.2409 20.365C21.9797 20.1039 21.7725 19.7938 21.6312 19.4526C21.4899 19.1113 21.4171 18.7456 21.4171 18.3763C21.4171 18.0069 21.4899 17.6412 21.6312 17.3C21.7725 16.9587 21.9797 16.6487 22.2409 16.3875L22.5659 16.0575C22.9838 15.6397 23.5226 15.3641 24.106 15.2698C24.6894 15.1756 25.2877 15.2675 25.8159 15.5325L27.3234 16.2875C27.7033 16.4783 28.1336 16.5445 28.5532 16.4767C28.9729 16.409 29.3605 16.2108 29.6611 15.9102C29.9616 15.6096 30.1599 15.222 30.2276 14.8024C30.2953 14.3827 30.2291 13.9524 30.0384 13.5725L29.6259 12.75L32.7659 10.6575C34.3942 9.57112 35.7109 8.07862 36.5859 6.32753L36.9509 5.59753M9.28838 6.97503C5.74367 10.0383 3.24355 14.1316 2.13683 18.6839C1.03011 23.2362 1.37199 28.0204 3.11478 32.3691C4.85757 36.7178 7.91433 40.414 11.8586 42.942C15.8029 45.4701 20.4379 46.7039 25.117 46.4713C29.7961 46.2387 34.286 44.5514 37.9601 41.6446C41.6342 38.7379 44.3094 34.7568 45.6123 30.2567C46.9153 25.7566 46.781 20.9621 45.2283 16.5419C43.6756 12.1218 40.7819 8.29413 36.9509 5.59753M9.28838 6.97503C13.3721 3.43605 18.597 1.4917 24.0009 1.50003C28.8234 1.50003 33.2909 3.01503 36.9509 5.59753" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
 						</svg>
-						<h3 class="text-xl font-semibold text-gray-900 md:text-xl">Global Code <br /> Blocks</h3>
+						<h3 class="text-xl font-semibold text-gray-900 md:text-xl">Choose exactly where to run your code</h3>
 						<div class="bg-pink-400 w-16 h-2 rounded-2xl"></div>
 						<p class="font-medium text-neutral-500 md:text-base text-sm">
-							The Global Code Blocks are designed to streamline the process of adding custom code snippets to WordPress websites. With this feature, users can create reusable code blocks that can be applied globally across their websites, ensuring consistency and efficiency in managing customizations.
+							Our location editor is like a switchboard that allows you to 'connect' your code to specific sections of your website. For example, you can choose your contact page to run a chat widget; or choose your entire website to run a Google Analytics script.
 						</p>
 					</div>
-					<a href="#" class="group rounded text-sm inline-flex items-center font-semibold gap-x-2.5 text-brand-blue">
+					<!--<a href="#" class="group rounded text-sm inline-flex items-center font-semibold gap-x-2.5 text-brand-blue">
 						Read More
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3 group-hover:translate-x-0.5 duration-150">
 							<path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd"></path>
 						</svg>
-					</a>
+					</a>-->
 				</div>
 				<div class="md:p-6 p-5 md:space-y-10 space-y-5 bg-white rounded shadow-md">
 					<div class="md:space-y-5 space-y-2.5">
 						<svg class="md:size-20 size-10 md:p-3 p-2 bg-cyan-400 rounded" viewBox="0 0 54 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 							<path d="M48.5 24.125V44.75C48.5 45.7446 48.1049 46.6984 47.4016 47.4017C46.6984 48.1049 45.7446 48.5 44.75 48.5H9.125C8.13044 48.5 7.17661 48.1049 6.47335 47.4017C5.77009 46.6984 5.375 45.7446 5.375 44.75V24.125M26 8.1875C26 6.88956 25.6151 5.62077 24.894 4.54157C24.1729 3.46238 23.148 2.62124 21.9489 2.12454C20.7497 1.62784 19.4302 1.49788 18.1572 1.7511C16.8842 2.00432 15.7149 2.62933 14.7971 3.54711C13.8793 4.4649 13.2543 5.63422 13.0011 6.90722C12.7479 8.18022 12.8778 9.49972 13.3745 10.6989C13.8712 11.898 14.7124 12.9229 15.7916 13.644C16.8708 14.3651 18.1396 14.75 19.4375 14.75H26M26 8.1875V14.75M26 8.1875C26 6.88956 26.3849 5.62077 27.106 4.54157C27.8271 3.46238 28.852 2.62124 30.0511 2.12454C31.2503 1.62784 32.5698 1.49788 33.8428 1.7511C35.1158 2.00432 36.2851 2.62933 37.2029 3.54711C38.1207 4.4649 38.7457 5.63422 38.9989 6.90722C39.2521 8.18022 39.1222 9.49972 38.6255 10.6989C38.1288 11.898 37.2876 12.9229 36.2084 13.644C35.1292 14.3651 33.8604 14.75 32.5625 14.75H26M26 14.75V48.5M4.4375 24.125H49.4375C50.99 24.125 52.25 22.865 52.25 21.3125V17.5625C52.25 16.01 50.99 14.75 49.4375 14.75H4.4375C2.885 14.75 1.625 16.01 1.625 17.5625V21.3125C1.625 22.865 2.885 24.125 4.4375 24.125Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
 						</svg>
-						<h3 class="text-xl font-semibold text-gray-900 md:text-xl">Templates & <br /> Packages</h3>
+						<h3 class="text-xl font-semibold text-gray-900 md:text-xl">Create and manage code templates</h3>
 						<div class="bg-cyan-400 w-16 h-2 rounded-2xl"></div>
 						<p class="font-medium text-neutral-500 md:text-base text-sm">
-							It is an element of the CJT Plus plugin that facilitates the creation and management of website code templates and packages. It allows users to save and organize sets of code snippets into templates or packages, making it easier to apply consistent customizations across different pages or sections of their website.
+							Storing your code snippets, scripts or stylesheets as reusable code templates will help streamline your site development by keeping things managed and organised. Your templates can then be easily embedded or linked to your code blocks.
 						</p>
 					</div>
-					<a href="#" class="group rounded text-sm inline-flex items-center font-semibold gap-x-2.5 text-brand-blue">
+					<!--<a href="#" class="group rounded text-sm inline-flex items-center font-semibold gap-x-2.5 text-brand-blue">
 						Read More
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3 group-hover:translate-x-0.5 duration-150">
 							<path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd"></path>
 						</svg>
-					</a>
+					</a>-->
 				</div>
-				<div class="md:p-6 p-5 md:space-y-10 space-y-5 bg-white rounded shadow-md">
+				<!--<div class="md:p-6 p-5 md:space-y-10 space-y-5 bg-white rounded shadow-md">
 					<div class="md:space-y-5 space-y-2.5">
 						<svg class="md:size-20 size-10 md:p-3 p-2 bg-purple-600 rounded" viewBox="0 0 52 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 							<path d="M1.625 23.875V22C1.625 20.5082 2.21763 19.0774 3.27252 18.0225C4.32742 16.9676 5.75816 16.375 7.25 16.375H44.75C46.2418 16.375 47.6726 16.9676 48.7275 18.0225C49.7824 19.0774 50.375 20.5082 50.375 22V23.875M28.65 7.775L23.35 2.475C23.0018 2.12638 22.5883 1.8498 22.1332 1.66105C21.6781 1.47231 21.1902 1.37511 20.6975 1.375H7.25C5.75816 1.375 4.32742 1.96763 3.27252 3.02252C2.21763 4.07742 1.625 5.50816 1.625 7V37C1.625 38.4918 2.21763 39.9226 3.27252 40.9775C4.32742 42.0324 5.75816 42.625 7.25 42.625H44.75C46.2418 42.625 47.6726 42.0324 48.7275 40.9775C49.7824 39.9226 50.375 38.4918 50.375 37V14.5C50.375 13.0082 49.7824 11.5774 48.7275 10.5225C47.6726 9.46763 46.2418 8.875 44.75 8.875H31.3025C30.3083 8.87412 29.3526 8.47846 28.65 7.775Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
@@ -133,35 +133,21 @@
 							<path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd"></path>
 						</svg>
 					</a>
-				</div>
+				</div>-->
 			</div>
 			<div class="lg:flex hidden justify-center">
-				<a class="inline-flex group gap-2.5 text-brand-blue py-3.5 font-bold uppercase lg:text-base text-sm" href="<?= home_url(); ?>/pricing#comparession-section">
+				<a class="inline-flex group gap-2.5 text-brand-blue py-3.5 font-bold lg:text-base text-sm" href="https://wordpress.org/plugins/css-javascript-toolbox/" target="_blank">
 					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<path d="M13.19 8.68803C13.8399 8.99828 14.4057 9.45996 14.8401 10.0343C15.2745 10.6086 15.5648 11.2787 15.6865 11.9885C15.8081 12.6982 15.7577 13.4268 15.5394 14.113C15.3212 14.7992 14.9414 15.423 14.432 15.932L9.93203 20.432C9.08811 21.2759 7.94351 21.7501 6.75003 21.7501C5.55655 21.7501 4.41195 21.2759 3.56803 20.432C2.72411 19.5881 2.25 18.4435 2.25 17.25C2.25 16.0565 2.72411 14.9119 3.56803 14.068L5.32503 12.311M18.675 11.689L20.432 9.93203C21.2759 9.08811 21.7501 7.94351 21.7501 6.75003C21.7501 5.55655 21.2759 4.41195 20.432 3.56803C19.5881 2.72411 18.4435 2.25 17.25 2.25C16.0565 2.25 14.9119 2.72411 14.068 3.56803L9.56803 8.06803C9.05866 8.57703 8.67889 9.20084 8.46061 9.88705C8.24233 10.5733 8.19191 11.3018 8.3136 12.0116C8.43528 12.7213 8.72552 13.3915 9.15992 13.9658C9.59432 14.5401 10.1602 15.0018 10.81 15.312" stroke="#005DA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
 					</svg>
 					<p class="border-b-2 border-neutral-400 hover:border-neutral-900 transition-colors">
-						Compare with CJT FREE
+						Try CSS & JavaScript Toolbox for FREE
 					</p>
 				</a>
 			</div>
 		</div>
 	</div>
 
-		<div class="space-y-5 my-10 lg:my-24 overflow-hidden">
-		<h2 class="font-bold font-display text-center text-neutral-700 lg:text-4xl text-xl lg:px-0 px-4">Organisations who trust CSS & JavaScript Toolbox <span class="text-brand-blue">PLUS</span></h2>
-		<div data-trusted-brands class="overflow-hidden mx-auto whitespace-nowrap">
-			<div class="w-fit will-change-transform justify-start inline-flex gap-10">
-				<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/brands/uom.webp" class="size-40 aspect-[2/3] object-contain hover:grayscale-0 grayscale duration-150" loading="lazy" />
-				<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/brands/mit.webp" class="size-40 aspect-[2/3] object-contain hover:grayscale-0 grayscale duration-150" loading="lazy" />
-				<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/brands/umc.webp" class="size-40 aspect-[2/3] object-contain hover:grayscale-0 grayscale duration-150" loading="lazy" />
-				<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/brands/nps.webp" class="size-40 aspect-[2/3] object-contain hover:grayscale-0 grayscale duration-150 py-5" loading="lazy" />
-				<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/brands/gsu.webp" class="size-40 aspect-[2/3] object-contain hover:grayscale-0 grayscale duration-150 py-5" loading="lazy" />
-				<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/brands/rock_uni.webp" class="size-40 aspect-[2/3] object-contain hover:grayscale-0 grayscale duration-150 py-5" loading="lazy" />
-			</div>
-		</div>
-	</div>
-
 	<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-300/50 absolute rotate-6 left-[8%] bottom-0 animate-small-blob']); ?>
 	<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 absolute -rotate-6 right-[8%] top-[40%] animate-small-blob-2']); ?>
 	<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 absolute rotate-3 right-40 bottom-[10%] animate-small-blob-3']); ?>