Onboarding Copy Polish: Update design picker subtitle (#101806)

* update subtitle copy

* update style variation copy

* Add copy under premium styles header in color variations

Author: vykes-mac

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

@@ -926,7 +926,7 @@ const UnifiedDesignPickerStep: StepType< {
 		: translate( 'Pick a design' );
 
 	const subHeaderText = translate(
-		'One of these homepage options could be great to start with. You can always change later.'
+		'Choose a homepage design that works for you. You can always change it later.'
 	);
 
 	// Use this to prioritize themes in certain categories.

packages/global-styles/src/components/color-palette-variations/index.tsx

@@ -1,3 +1,4 @@
+import { PLAN_PERSONAL, PLAN_PREMIUM, getPlan } from '@automattic/calypso-products';
 import { PremiumBadge } from '@automattic/components';
 import {
 	__unstableComposite as Composite,
@@ -31,6 +32,7 @@ interface ColorPaletteVariationsProps {
 	selectedColorPaletteVariation: GlobalStylesObject | null;
 	onSelect: ( colorPaletteVariation: GlobalStylesObject | null ) => void;
 	limitGlobalStyles?: boolean;
+	isGlobalStylesOnPersonal?: boolean;
 }
 
 const ColorPaletteVariation = ( {
@@ -87,11 +89,19 @@ const ColorPaletteVariations = ( {
 	selectedColorPaletteVariation,
 	onSelect,
 	limitGlobalStyles,
+	isGlobalStylesOnPersonal = window.isGlobalStylesOnPersonal ?? false,
 }: ColorPaletteVariationsProps ) => {
 	const { base } = useContext( GlobalStylesContext );
 	const colorPaletteVariations = useColorPaletteVariations( stylesheet ) ?? [];
 	const composite = useCompositeState();
 
+	const upgradeToPlan = isGlobalStylesOnPersonal ? PLAN_PERSONAL : PLAN_PREMIUM;
+
+	const variationDescription = translate(
+		'Preview our style variations for free or pick your own fonts and colors with the %(planName)s plan later on.',
+		{ args: { planName: getPlan( upgradeToPlan )?.getTitle() ?? '' } }
+	);
+
 	return (
 		<Composite
 			{ ...composite }
@@ -124,6 +134,7 @@ const ColorPaletteVariations = ( {
 						}
 					/>
 				</h3>
+				<p className="global-styles-variations__group-description">{ variationDescription }</p>
 				<div className="color-palette-variations">
 					{ colorPaletteVariations.map( ( colorPaletteVariation, index ) => (
 						<ColorPaletteVariation

packages/global-styles/src/components/color-palette-variations/style.scss

@@ -1,4 +1,6 @@
 @import "@automattic/typography/styles/variables";
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
 
 .color-palette-variations {
 	display: grid;
@@ -70,3 +72,17 @@
 .global-styles-variations__group-title-actual {
 	white-space: nowrap;
 }
+
+.global-styles-variations__group-description {
+	color: var(--color-neutral-60);
+	font-size: 0.875rem;
+	letter-spacing: -0.15px;
+	padding: 6px 0 6px 0;
+	line-height: 20px;
+	margin: 0;
+
+	display: none;
+	@include break-large {
+		display: block;
+	}
+}

packages/global-styles/src/components/global-styles-variations/index.tsx

@@ -115,7 +115,7 @@ const GlobalStylesVariations = ( {
 
 	const variationDescription = needsUpgrade
 		? translate(
-				'Unlock style variations and tons of other features with the %(planName)s plan, or try them out now for free.',
+				'Preview our style variations for free or pick your own fonts and colors with the %(planName)s plan later on.',
 				{ args: { planName: getPlan( upgradeToPlan )?.getTitle() ?? '' } }
 		  )
 		: translate( 'You can change your style at any time.' );