golden hour

/var/www/html/wp-content/plugins/wp-smushit/_src/react/views/webp

File/Folder	Size	Actions
free-content.jsx	2.03 KB
step-content.jsx	11.77 KB
step-footer.jsx	3.65 KB
steps-bar.jsx	2.35 KB

Edit: free-content.jsx

/**
 * External dependencies
 */
import React from 'react';

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;

export default ({ smushData }) => {
	return (
		<div className="sui-box-body">
			<div className="sui-message">
				<span className="wp-smush-no-image">
					<img
						src={smushData.urls.freeImg}
						alt={__('Smush WebP', 'wp-smushit')}
					/>
				</span>

<div className="sui-message-content">
					<p className="wp-smush-no-images-content">
						{__(
							'Fix the "Serve images in next-gen format" Google PageSpeed recommendation by setting up this feature. Serve WebP versions of your images to supported browsers, and gracefully fall back on JPEGs and PNGs for browsers that don\'t support WebP.',
							'wp-smushit'
						)}
					</p>

<ul className="smush-pro-features">
						<li className="smush-pro-feature-row">
							<div className="smush-pro-feature-title">
								{__(
									'Add or automatically apply the rules to enable Local WebP feature.',
									'wp-smushit'
								)}
							</div>
						</li>
						<li className="smush-pro-feature-row">
							<div className="smush-pro-feature-title">
								{__(
									'Fix “Serve images in next-gen format" Google PageSpeed recommendation.',
									'wp-smushit'
								)}
							</div>
						</li>
						<li className="smush-pro-feature-row">
							<div className="smush-pro-feature-title">
								{__(
									'Serve WebP version of images in the browsers that support it and fall back to JPEGs and PNGs for non supported browsers.',
									'wp-smushit'
								)}
							</div>
						</li>
					</ul>

<a
						href={smushData.urls.upsell}
						className="sui-button sui-button-purple"
						style={{ marginRight: '30px' }}
						target="_blank"
						rel="noreferrer"
					>
						{__('Try WebP for free', 'wp-smushit')}
					</a>
					<a
						href={smushData.urls.webpDoc}
						style={{ color: '#8D00B1' }}
						target="_blank"
						rel="noreferrer"
					>
						{__('Learn more', 'wp-smushit')}
					</a>
				</div>
			</div>
		</div>
	);
};