Merge pull request #886 from Codeinwp/feat/opml-service/1335

feat: improve plugin first screen

Author: selul

assets/src/dashboard/parts/connect/index.js

@@ -166,27 +166,47 @@ const ConnectLayout = () => {
 
 			<div className={ connectContainerClasses }>
 				<div className="optml-connect__content basis-8/12">
-					<div className="text-gray-700 font-serif text-2 font-bold leading-7 m-0">{ optimoleDashboardApp.strings.account_needed_heading }</div>
+					<div className="inline-block bg-light-blue text-gray-500 text-sm font-medium px-4 py-1.5 rounded-full mb-4">{ optimoleDashboardApp.strings.account_needed_trust_badge }</div>
+
+					<div className="text-gray-700 font-serif text-2xl font-bold leading-7 m-0">{ optimoleDashboardApp.strings.account_needed_heading }</div>
 					<p
-						className="text-xl font-normal text-gray-800"
+						className="text-base font-normal text-gray-500"
+						dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_sub_heading } }
+					/>
+
+					<div className="inline-flex items-center bg-light-blue px-4 py-1.5 rounded-full mb-5 text-sm text-gray-800">
+						<span className="mr-2">⏱️</span>{ optimoleDashboardApp.strings.account_needed_setup_time }
+					</div>
+
+					<p
+						className="text-sm text-gray-700 mb-5 leading-normal"
 						dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_title } }
 					/>
 
-					<div className="flex py-3">
+
+					<div className="flex py-3 items-center">
 						<Icon icon="yes-alt" />
 						<p
 							className="text-base ml-3 m-0"
 							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_1 } }
 						/>
 					</div>
 
-					<div className="flex py-3">
+					<div className="flex py-3 items-center">
 						<Icon icon="yes-alt" />
 						<p
 							className="text-base ml-3 m-0"
 							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_2 } }
 						/>
 					</div>
+
+					<div className="flex py-3 items-center">
+						<Icon icon="yes-alt" />
+						<p
+							className="text-base ml-3 m-0"
+							dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_4 } }
+						/>
+					</div>
 				</div>
 
 				<div className="optml-connect__form basis-4/12 p-8 bg-light-blue border border-blue-300 rounded-md">
@@ -233,24 +253,22 @@ const ConnectLayout = () => {
 
 					<Button
 						variant="secondary"
-						className="optml__button flex w-full justify-center rounded font-bold mt-4 min-h-40"
+						className="optml__button flex w-full justify-center rounded font-bold mt-4 min-h-40 mb-4"
 						onClick={ () => setMethod( 'key' ) }
 					>
 						{ optimoleDashboardApp.strings.api_exists }
 					</Button>
 
+					<div class="flex items-center justify-center text-gray-600 mb-4">
+						<span class="mr-1.5">🔒</span>{ optimoleDashboardApp.strings.secure_connection }
+					</div>
+
 					<p
 						className="mb-0"
 						dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.signup_terms } }
 					/>
 				</div>
 			</div>
-
-			<div className="bg-grayish-blue text-gray-800 text-center font-bold uppercase p-2.5 rounded-b-lg">
-				<p
-					dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_footer } }
-				/>
-			</div>
 		</div>
 	);
 };

inc/admin.php

@@ -1423,7 +1423,10 @@ private function get_dashboard_strings() {
 			'refresh_stats_cta'              => __( 'Refresh Stats', 'optimole-wp' ),
 			'updating_stats_cta'             => __( 'UPDATING STATS', 'optimole-wp' ),
 			'api_key_placeholder'            => __( 'API Key', 'optimole-wp' ),
-			'account_needed_heading'         => __( 'Sign-up for API key', 'optimole-wp' ),
+			'account_needed_heading'         => __( 'Supercharge Your WordPress Images in 60 Seconds', 'optimole-wp' ),
+			'account_needed_sub_heading'     => __( 'Stop sacrificing image quality for page speed. Optimole delivers both.', 'optimole-wp' ),
+			'account_needed_trust_badge'     => __( 'TRUSTED BY 200,000+ HAPPY USERS', 'optimole-wp' ),
+			'account_needed_setup_time'      => __( 'Setup is instant - just click connect', 'optimole-wp' ),
 			'invalid_key'                    => __( 'Invalid API Key', 'optimole-wp' ),
 			'keep_connected'                 => __( 'Ok, keep me connected', 'optimole-wp' ),
 			'cloud_library'                  => __( 'Cloud Library', 'optimole-wp' ),
@@ -1437,6 +1440,7 @@ private function get_dashboard_strings() {
 			'email_address_label'            => __( 'Your email address', 'optimole-wp' ),
 			'steps_connect_api_title'        => __( 'Connect your account', 'optimole-wp' ),
 			'register_btn'                   => __( 'Create & connect your account', 'optimole-wp' ),
+			'secure_connection'              => __( 'Secure connection - your data is protected', 'optimole-wp' ),
 			'step_one_api_title'             => __( 'Enter your API key.', 'optimole-wp' ),
 			'optml_dashboard'                => sprintf(
 			/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */
@@ -1468,17 +1472,15 @@ private function get_dashboard_strings() {
 			'premium_support'                => __( 'Access our Premium Support', 'optimole-wp' ),
 			'account_needed_title'           => sprintf(
 			/* translators: 1 is the link to optimole.com */
-				__( 'In order to get access to free image optimization service you will need an API key from %s.', 'optimole-wp' ),
+				__( 'Connect to Optimole\'s powerful image optimization service with a free API key from %s.', 'optimole-wp' ),
 				' <a href="' . esc_url( tsdk_translate_link( 'https://dashboard.optimole.com/register', 'query' ) ) . '" target="_blank">optimole.com</a>'
 			),
 			'account_needed_subtitle_1'      => sprintf(
 			/* translators: 1 is starting bold tag, 2 is ending bold tag, 3 is the starting bold tag, 4 is the limit number, 5 is ending bold tag, 6 is the starting anchor tag for the docs link on how we count visits, 7 is the ending anchor tag. */
-				__( 'You will get access to our %1$simage optimization service for FREE%2$s in the limit of %3$s%4$s%5$s %6$svisitors%7$s per month.', 'optimole-wp' ),
+				__( '%1$sOptimize unlimited images%2$s for up to %3$s monthly %4$svisitors%5$s - completely FREE.', 'optimole-wp' ),
 				'<strong>',
 				'</strong>',
 				number_format_i18n( 1000 ),
-				'<strong>',
-				'</strong>',
 				'<a href="https://docs.optimole.com/article/1134-how-optimole-counts-the-number-of-visitors" target="_blank">',
 				'</a>'
 			),
@@ -1491,7 +1493,16 @@ private function get_dashboard_strings() {
 			'account_needed_subtitle_2'      => sprintf(
 			/* translators: 1 is the starting bold tag, 2 is the ending bold tag */
 				__(
-					'Bonus, if you dont use a CDN, we got you covered, %1$swe will serve the images using CloudFront CDN%2$s from 450+ locations.',
+					'%1$sInstant global delivery%2$s with CloudFront CDN - your images load 2-3x faster worldwide from 450+ locations.',
+					'optimole-wp'
+				),
+				'<strong>',
+				'</strong>'
+			),
+			'account_needed_subtitle_4'      => sprintf(
+			/* translators: 1 is the starting bold tag, 2 is the ending bold tag */
+				__(
+					'%1$sAdaptive optimization%2$s that perfectly sizes images for every visitor\'s device and connection speed.',
 					'optimole-wp'
 				),
 				'<strong>',