Site Migration: Redesign on site input step

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/index.tsx

@@ -1,5 +1,6 @@
 import { useHasEnTranslation } from '@automattic/i18n-utils';
 import { StepContainer, Title, SubTitle, HOSTED_SITE_MIGRATION_FLOW } from '@automattic/onboarding';
+import { Icon, next, published, shield } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { type FC, useEffect, useState, useCallback } from 'react';
 import CaptureInput from 'calypso/blocks/import/capture/capture-input';
@@ -16,9 +17,8 @@ import type { Step } from '../../types';
 import type { UrlData } from 'calypso/blocks/import/types';
 
 import './style.scss';
-
 interface HostingDetailsProps {
-	items: { title: string; description: string }[];
+	items: { title: string; description: string; icon: JSX.Element }[];
 }
 
 const HostingDetails: FC< HostingDetailsProps > = ( { items } ) => {
@@ -32,7 +32,9 @@ const HostingDetails: FC< HostingDetailsProps > = ( { items } ) => {
 			<div className="import__site-identify-hosting-details--list">
 				{ items.map( ( item, index ) => (
 					<div key={ index } className="import__site-identify-hosting-details--list-item">
-						<p className="import__site-identify-hosting-details--list-item-title">{ item.title }</p>
+						<div className="import__site-identify-hosting-details--list-item-icon">
+							{ item.icon }
+						</div>
 						<p className="import__site-identify-hosting-details--list-item-description">
 							{ item.description }
 						</p>
@@ -92,32 +94,31 @@ export const Analyzer: FC< Props > = ( { onComplete, onSkip, hideImporterListLin
 
 	// TODO: Remove extra steps and properties for non-English locales once we have translations -- hosting details.
 	const hostingDetailItems = {
-		'unmatched-uptime': {
-			title: translate( 'Unmatched Reliability and Uptime' ),
+		'blazing-fast-speeds': {
+			title: translate( 'Blazing fast speeds' ),
 			titleString: 'Unmatched Reliability and Uptime', // Temporary string for non-English locales. Remove once we have translations.
 			description: translate(
-				"Our infrastructure's 99.99% uptime, combined with our automatic update system, ensures your site remains accessible and secure."
+				'Blazing fast speeds with lighting-fast load times for a seamless experience.'
 			),
 			descriptionString:
 				"Our infrastructure's 99.99% uptime, combined with our automatic update system, ensures your site remains accessible and secure.", // Temporary string for non-English locales. Remove once we have translations.
+			icon: <Icon size={ 20 } icon={ next } />,
 		},
-		'effortless-customization': {
-			title: translate( 'Effortless Customization' ),
+		'unmatched-reliability': {
+			title: translate( 'Unmatched reliability' ),
 			titleString: 'Effortless Customization',
-			description: translate(
-				'Our tools and options let you easily design a website to meet your needs, whether you’re a beginner or an expert.'
-			),
+			description: translate( 'Unmatched reliability with 99.999% uptime and unmetered traffic.' ),
 			descriptionString:
 				'Our tools and options let you easily design a website to meet your needs, whether you’re a beginner or an expert.',
+			icon: <Icon size={ 20 } icon={ published } />,
 		},
-		'blazing-fast-speed': {
-			title: translate( 'Blazing Fast Page Speed' ),
+		'security-monitoring': {
+			title: translate( 'Round-the-clock security monitoring' ),
 			titleString: 'Blazing Fast Page Speed',
-			description: translate(
-				'Our global CDN with 28+ locations delivers lightning-fast load times for a seamless visitor experience.'
-			),
+			description: translate( 'Round-the-clock security monitoring and DDoS protection.' ),
 			descriptionString:
 				'Our global CDN with 28+ locations delivers lightning-fast load times for a seamless visitor experience.',
+			icon: <Icon size={ 20 } icon={ shield } />,
 		},
 	};
 

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/style.scss

@@ -83,29 +83,43 @@
 }
 
 .import__site-identify-hosting-details {
-	background-color: #f6f7f7;
-	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
 	gap: 1.25rem;
-	margin: 40px auto 0 auto;
-	max-width: 368px;
-	padding: 1.5rem;
 
 	&--title {
 		color: var(--studio-gray-100);
 		font-size: 1.25rem;
 		font-weight: 500;
+		margin-top: 40px;
+		text-align: center;
 	}
 
 	&--list {
+		background-color: #f6f7f7;
+		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
 		gap: 1.25rem;
+		margin: 0 auto;
+		max-width: 368px;
+		padding: 1.5rem;
+
+		&-item-icon {
+			width: 36px;
+			height: 36px;
+			border-radius: 4px;
+			background-color: var(--studio-gray-5);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 0.5rem;
+			flex-shrink: 0;
+		}
 
 		&-item {
 			display: flex;
-			flex-direction: column;
+			flex-direction: row;
 			gap: 0.25rem;
 
 			&-description {

client/landing/stepper/declarative-flow/internals/steps-repository/site-migration-identify/test/index.tsx

@@ -160,10 +160,9 @@ describe( 'SiteMigrationIdentify', () => {
 		render( { navigation: { submit } } );
 
 		expect( screen.getByText( /Why should you host with us/ ) ).toBeVisible();
-		expect( screen.getByText( /Unmatched Reliability and Uptime/ ) ).toBeVisible();
 		expect(
 			screen.getByText(
-				/Our infrastructure's 99.99% uptime, combined with our automatic update system, ensures your site remains accessible and secure./
+				/Blazing fast speeds with lighting-fast load times for a seamless experience./
 			)
 		).toBeVisible();
 	} );