100-year-plan: Match design for diy or difm step (#95149)

Automattic · Oct 7, 2024 · 1f1ce92 · 1f1ce92
1 parent 4525d1d
commit 1f1ce92
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 6 deletions.
diff --git a/...epper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx b/...epper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx
@@ -1,31 +1,61 @@
 import { Button } from '@wordpress/components';
+import { Icon, check } from '@wordpress/icons';
+import { useTranslate } from 'i18n-calypso';
 import FormattedHeader from 'calypso/components/formatted-header';
 import HundredYearPlanStepWrapper from '../hundred-year-plan-step-wrapper';
 import type { Step } from '../../types';
 
 import './styles.scss';
 
 const HundredYearPlanDIYOrDIFM: Step = function HundredYearPlanDIYOrDIFM( { navigation, flow } ) {
+	const translate = useTranslate();
 	const { submit } = navigation;
 
 	return (
 		<HundredYearPlanStepWrapper
 			stepContent={
 				<div>
-					<Button onClick={ () => submit?.( { diyOrDifmChoice: 'difm' } ) }>Do it for me</Button>
-					<Button onClick={ () => submit?.( { diyOrDifmChoice: 'diy' } ) }>Do it myself</Button>
+					<ul>
+						<li>
+							<Icon size={ 18 } icon={ check } />{ ' ' }
+							{ translate( 'Conduct a comprehensive digital longevity assessment' ) }
+						</li>
+						<li>
+							<Icon size={ 18 } icon={ check } />{ ' ' }
+							{ translate( 'Showcase our comprehensive legacy-building tools' ) }
+						</li>
+						<li>
+							<Icon size={ 18 } icon={ check } />{ ' ' }
+							{ translate( 'Answer all your questions about long-term success' ) }
+						</li>
+						<li>
+							<Icon size={ 18 } icon={ check } />{ ' ' }
+							{ translate( 'Chart a course for the production of your new site' ) }
+						</li>
+					</ul>
+
+					<div className="buttons-container">
+						<Button variant="primary" onClick={ () => submit?.( { diyOrDifmChoice: 'difm' } ) }>
+							{ translate( 'Schedule your free call' ) }
+						</Button>
+
+						<Button variant="link" onClick={ () => submit?.( { diyOrDifmChoice: 'diy' } ) }>
+							{ translate( "I'll create my site on my own" ) }
+						</Button>
+					</div>
 				</div>
 			}
 			formattedHeader={
 				<FormattedHeader
 					brandFont
-					headerText="TODO: title"
-					subHeaderText="TODO: header"
+					headerText={ translate( "Let's craft your next century" ) }
+					subHeaderText={ translate( "Join us for an exclusive strategy session where we'll" ) }
 					subHeaderAlign="center"
 				/>
 			}
-			stepName="hundred-year-plan-setup"
+			stepName="hundred-year-plan-setup hundred-year-plan-setup__diy-or-difm"
 			flowName={ flow }
+			justifyStepContent="center"
 		/>
 	);
 };

diff --git a/...per/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss b/...per/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
@@ -1 +1,49 @@
-/* Comment because we cannot have empty files */
+.hundred-year-plan-setup__diy-or-difm {
+
+	.step-container__header {
+		margin-bottom: 0;
+	}
+
+	ul {
+		margin: 0 0.5rem 2.5rem 0.5rem;
+		list-style-type: none;
+
+		li {
+			color: var(--studio-gray-60);
+		}
+
+		svg {
+			position: relative;
+			top: 8px;
+			padding: 5px !important;
+			margin-right: 5px !important;
+			background-color: var(--studio-gray-5);
+			border-radius: 100%;
+		}
+	}
+
+	.buttons-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		.components-button {
+			margin-bottom: 1rem;
+
+			&.is-primary {
+				padding-left: 1.5rem;
+				padding-right: 1.5rem;
+				background-color: var(--studio-gray-100);
+
+				&:hover {
+					background-color: var(--studio-gray-70);
+				}
+			}
+
+			&.is-link {
+				color: var(--studio-gray-100);
+			}
+		}
+	}
+}