Big Sky GF: Update design choice screen according to design (#99139)

* add images

* create goals first variation of the design choice

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/goals-first-design-choice.scss

@@ -0,0 +1,79 @@
+@import '@automattic/typography/styles/fonts';
+
+.goals-first-design-choice {
+	position: relative;
+	width: 380px;
+	padding: 24px;
+	border-radius: 4px;
+	outline: var( --studio-gray-5 ) solid 1px;
+	transition: outline ease-in 0.15s;
+	height: 100%;
+	cursor: pointer;
+
+	.goals-first-design-choice__background {
+		position: relative;
+		margin-bottom: 16px;
+		background-color: var( --studio-gray-5 );
+	}
+
+	.goals-first-design-choice__background-item {
+		position: relative;
+		width: 100%;
+		aspect-ratio: 4 / 3;
+		overflow: hidden;
+
+		img {
+			width: 100%;
+			height: 100%;
+			display: block;
+			object-fit: cover;
+		}
+
+		.goals-first-design-choice__foreground-image {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			transition: transform 0.15s ease-in-out;
+		}
+	}
+
+	.goals-first-design-choice__title {
+		margin-bottom: 4px;
+		color: var( --studio-gray-90 );
+		font-size: $font-body;
+		font-weight: 500;
+		line-height: 24px;
+		text-align: left;
+	}
+
+	.goals-first-design-choice__description {
+		color: var( --studio-gray-50 );
+		font-size: $font-body-small;
+		font-weight: 400;
+		line-height: 20px;
+		text-align: start;
+	}
+
+	.badge--info-blue {
+		background-color: var( --wp-components-color-accent, var( --wp-admin-theme-color ) );
+		color: var( --wp-components-color-accent-inverted, #fff );
+	}
+
+	.goals-first-design-choice__price-badge {
+		position: absolute;
+		top: -0.5em;
+		right: -0.5em;
+		z-index: 2;
+	}
+
+	&:hover,
+	&:focus-visible {
+		outline: #3858e9 solid 2px;
+
+		.goals-first-design-choice__foreground-image {
+			transform: scale( 1.05 );
+		}
+	}
+}

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/goals-first-design-choice.tsx

@@ -0,0 +1,60 @@
+import { Badge } from '@automattic/components';
+import clsx from 'clsx';
+import { preventWidows } from 'calypso/lib/formatting';
+import './goals-first-design-choice.scss';
+
+interface Props {
+	className?: string;
+	title: string;
+	description: string;
+	bgImageSrc?: string;
+	fgImageSrc?: string;
+	destination: string;
+	onSelect: ( destination: string ) => void;
+	badgeLabel?: React.ReactElement | string | number;
+}
+
+const GoalsFirstDesignChoice = ( {
+	className,
+	title,
+	description,
+	bgImageSrc,
+	fgImageSrc,
+	destination,
+	onSelect,
+	badgeLabel,
+}: Props ) => (
+	<button
+		className={ clsx( 'goals-first-design-choice', className ) }
+		aria-label={ title }
+		onClick={ () => onSelect( destination ) }
+	>
+		<div className="goals-first-design-choice__content">
+			<div className="goals-first-design-choice__background">
+				{ badgeLabel && (
+					<Badge type="info-blue" className="goals-first-design-choice__price-badge">
+						{ badgeLabel }
+					</Badge>
+				) }
+				<div className="goals-first-design-choice__background-item">
+					{ bgImageSrc && <img src={ bgImageSrc } alt={ title } /> }
+					{ fgImageSrc && (
+						<img
+							className="goals-first-design-choice__foreground-image"
+							src={ fgImageSrc }
+							alt={ title }
+						/>
+					) }
+				</div>
+			</div>
+			<div className="goals-first-design-choice__foreground">
+				<div className="goals-first-design-choice__title">{ title }</div>
+				<div className="goals-first-design-choice__description">
+					{ preventWidows( description ) }
+				</div>
+			</div>
+		</div>
+	</button>
+);
+
+export default GoalsFirstDesignChoice;

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/index.tsx

@@ -5,6 +5,7 @@ import { themesIllustrationImage } from '@automattic/design-picker';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { StepContainer, isOnboardingFlow } from '@automattic/onboarding';
 import { useSelect } from '@wordpress/data';
+import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
@@ -14,8 +15,12 @@ import { preventWidows } from 'calypso/lib/formatting';
 import { useIsBigSkyEligible } from '../../../../hooks/use-is-site-big-sky-eligible';
 import { ONBOARD_STORE } from '../../../../stores';
 import kebabCase from '../../../../utils/kebabCase';
+import bigSkyBg from './big-sky-bg.png';
+import bigSkyFg from './big-sky-fg.png';
 import hiBigSky from './big-sky-no-text-small.png';
 import DesignChoice from './design-choice';
+import GoalsFirstDesignChoice from './goals-first-design-choice';
+import themeChoiceFg from './theme-choice-fg.png';
 import type { Step } from '../../types';
 import './style.scss';
 
@@ -90,15 +95,31 @@ const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
 				}
 				stepContent={
 					<>
-						<div className="design-choices__body">
-							<DesignChoice
-								title={ translate( 'Choose a theme' ) }
-								description={ translate( 'Choose one of our professionally designed themes.' ) }
-								imageSrc={ themesIllustrationImage }
-								destination="designSetup"
-								onSelect={ handleSubmit }
-							/>
-							{ ! isLoading && isEligible && (
+						<div
+							className={ clsx( 'design-choices__body', {
+								'is-goals-first': isGoalsFirstVariation,
+							} ) }
+						>
+							{ ! isGoalsFirstVariation ? (
+								<DesignChoice
+									title={ translate( 'Choose a theme' ) }
+									description={ translate( 'Choose one of our professionally designed themes.' ) }
+									imageSrc={ themesIllustrationImage }
+									destination="designSetup"
+									onSelect={ handleSubmit }
+								/>
+							) : (
+								<GoalsFirstDesignChoice
+									title={ translate( 'Start with a theme' ) }
+									description={ translate(
+										'Choose a professionally designed theme and make it yours.'
+									) }
+									fgImageSrc={ themeChoiceFg }
+									destination="designSetup"
+									onSelect={ handleSubmit }
+								/>
+							) }
+							{ ! isLoading && isEligible && ! isGoalsFirstVariation && (
 								<DesignChoice
 									className="design-choices__try-big-sky"
 									title={ translate( 'Design with AI' ) }
@@ -137,6 +158,21 @@ const DesignChoicesStep: Step = ( { navigation, flow, stepName } ) => {
 									} }
 								/>
 							) }
+							{ ! isLoading && isEligible && isGoalsFirstVariation && (
+								<GoalsFirstDesignChoice
+									title={ translate( 'Create with AI (BETA)' ) }
+									description={ translate(
+										'Use our AI website builder to easily and quickly build the site of your dreams.'
+									) }
+									badgeLabel={ bigSkyBadgeLabel }
+									bgImageSrc={ bigSkyBg }
+									fgImageSrc={ bigSkyFg }
+									destination="launch-big-sky"
+									onSelect={ ( destination ) => {
+										handleSubmit( destination );
+									} }
+								/>
+							) }
 						</div>
 					</>
 				}

client/landing/stepper/declarative-flow/internals/steps-repository/design-choices/style.scss

@@ -31,6 +31,10 @@
 	flex-direction: row;
 	justify-content: center;
 	gap: 43px;
+
+	&.is-goals-first {
+		gap: 16px;
+	}
 }
 
 .design-choices__footer {