From 1f1ce92ad459379e907734b64ab86414884bff72 Mon Sep 17 00:00:00 2001
From: Bogdan Nikolic <bogdan.nikolic87@gmail.com>
Date: Mon, 7 Oct 2024 12:33:52 +0200
Subject: [PATCH] 100-year-plan: Match design for diy or difm step (#95149)

---
 .../hundred-year-plan-diy-or-difm/index.tsx   | 40 +++++++++++++--
 .../hundred-year-plan-diy-or-difm/styles.scss | 50 ++++++++++++++++++-
 2 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx
index e64865627db7f..8c966dc970d31 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx
@@ -1,4 +1,6 @@
 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';
@@ -6,26 +8,54 @@ 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/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
index e1bb944593466..8fae0bdb47063 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
@@ -1 +1,49 @@
-/* Comment because we cannot have empty files */
\ No newline at end of file
+.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);
+			}
+		}
+	}
+}