A4A: Implement Pressable hosting section v3.

client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/index.tsx

@@ -1,13 +1,15 @@
 import { Icon, check } from '@wordpress/icons';
 import clsx from 'clsx';
+import { TranslateResult } from 'i18n-calypso';
 import PageSection, { PageSectionProps } from 'calypso/a8c-for-agencies/components/page-section';
 
 import './style.scss';
 
 type Props = Omit< PageSectionProps, 'children' > & {
-	items: string[];
-	fiveRows?: boolean;
+	items: TranslateResult[];
 	threeRows?: boolean;
+	fourRows?: boolean;
+	fiveRows?: boolean;
 };
 
 export default function HostingAdditionalFeaturesSection( {
@@ -17,8 +19,9 @@ export default function HostingAdditionalFeaturesSection( {
 	background,
 	description,
 	items,
-	fiveRows,
 	threeRows,
+	fourRows,
+	fiveRows,
 }: Props ) {
 	return (
 		<PageSection
@@ -30,8 +33,9 @@ export default function HostingAdditionalFeaturesSection( {
 		>
 			<ul
 				className={ clsx( 'hosting-additional-features', {
-					'is-five-rows': fiveRows,
 					'is-three-rows': threeRows,
+					'is-four-rows': fourRows,
+					'is-five-rows': fiveRows,
 				} ) }
 			>
 				{ items.map( ( item, itemIndex ) => (

client/a8c-for-agencies/sections/marketplace/common/hosting-additional-features-section/style.scss

@@ -44,27 +44,38 @@ ul.hosting-additional-features {
 	}
 }
 
+ul.hosting-additional-features.is-three-rows {
+	@include break-xlarge {
+		grid-template-rows: repeat(6, 1fr);
+		grid-auto-flow: column;
+	}
 
-ul.hosting-additional-features.is-five-rows {
+	@include break-wide {
+		grid-template-rows: repeat(3, 1fr);
+		grid-auto-flow: column;
+	}
+}
+
+ul.hosting-additional-features.is-four-rows {
 	@include break-xlarge {
-		grid-template-rows: repeat(10, 1fr);
+		grid-template-rows: repeat(8, 1fr);
 		grid-auto-flow: column;
 	}
 
 	@include break-wide {
-		grid-template-rows: repeat(5, 1fr);
+		grid-template-rows: repeat(4, 1fr);
 		grid-auto-flow: column;
 	}
 }
 
-ul.hosting-additional-features.is-three-rows {
+ul.hosting-additional-features.is-five-rows {
 	@include break-xlarge {
-		grid-template-rows: repeat(6, 1fr);
+		grid-template-rows: repeat(10, 1fr);
 		grid-auto-flow: column;
 	}
 
 	@include break-wide {
-		grid-template-rows: repeat(3, 1fr);
+		grid-template-rows: repeat(5, 1fr);
 		grid-auto-flow: column;
 	}
 }

client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx

@@ -4,7 +4,7 @@ import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
 import { SectionProps } from '..';
 import { MarketplaceTypeContext } from '../../context';
 import EnterpriseAgencyHosting from '../../hosting-overview/hosting-v2/enterprise-agency-hosting';
-import PremierAgencyHosting from '../../hosting-overview/hosting-v2/premier-agency-hosting';
+import PremierAgencyHosting from './premier-agency-hosting';
 import StandardAgencyHosting from './standard-agency-hosting';
 
 import './style.scss';
@@ -31,7 +31,7 @@ export const HostingContent = ( { section, onAddToCart }: Props ) => {
 		}
 		if ( section === 'pressable' ) {
 			return {
-				content: <PremierAgencyHosting onAddToCart={ ( product ) => onAddToCart( product, 1 ) } />,
+				content: <PremierAgencyHosting />,
 				title: isReferMode
 					? translate( 'Refer a variety of plans, or single high-resource sites to your clients' )
 					: translate(

client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/index.tsx

@@ -0,0 +1,104 @@
+import { JetpackLogo } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { BackgroundType10 } from 'calypso/a8c-for-agencies/components/page-section/backgrounds';
+import ProfileAvatar1 from 'calypso/assets/images/a8c-for-agencies/hosting/premier-testimonial-1.png';
+import ProfileAvatar2 from 'calypso/assets/images/a8c-for-agencies/hosting/premier-testimonial-2.png';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import HostingAdditionalFeaturesSection from '../../../common/hosting-additional-features-section';
+import HostingTestimonialsSection from '../../../common/hosting-testimonials-section';
+import ClientRelationships from '../common/client-relationships';
+import HostingFeatures from '../common/hosting-features';
+
+import './style.scss';
+
+export default function PremierAgencyHosting() {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const onJetpackCompleteMoreLinkClick = () => {
+		dispatch( recordTracksEvent( 'a4a_hosting_premier_jetpack_complete_more_link_click' ) );
+	};
+
+	return (
+		<div className="premier-agency-hosting">
+			<section className="premier-agency-hosting__plan-selector-container">TODO</section>
+
+			<HostingFeatures heading={ translate( 'Included with every Pressable site' ) } />
+
+			<HostingAdditionalFeaturesSection
+				icon={ <JetpackLogo size={ 16 } /> }
+				heading={ translate( 'Jetpack Complete included' ) }
+				subheading={ translate( "Supercharge your clients' sites" ) }
+				description={ translate(
+					'Every Pressable site comes with a free Jetpack Complete license — an $899/year/site value.'
+				) }
+				items={ [
+					translate( 'VaultPress Backup w/ 1TB storage' ),
+					translate( 'Scan w/ WAF' ),
+					translate( 'Akismet Anti-spam w/ 60k API calls/mo' ),
+					translate( 'Stats w/ 100k views/mo (Commercial use)' ),
+					translate( 'VideoPress w/ 1TB storage' ),
+					translate( 'Boost w/ Auto CSS Generation' ),
+					translate( 'Social Advanced w/ unlimited shares' ),
+					translate( 'Site Search up to 100k records and 100k requests/mo' ),
+					translate( 'CRM Entrepreneur' ),
+					translate( 'All Jetpack features' ),
+					translate( '{{a}}And more{{/a}} ↗', {
+						components: {
+							a: (
+								<a
+									href="https://jetpack.com/complete/"
+									target="_blank"
+									rel="noopener noreferrer"
+									onClick={ onJetpackCompleteMoreLinkClick }
+								/>
+							),
+						},
+					} ),
+				] }
+				fourRows
+			/>
+
+			<HostingTestimonialsSection
+				heading={ translate( 'Love for Pressable hosting' ) }
+				subheading={ translate( 'What agencies say' ) }
+				background={ BackgroundType10 }
+				items={ [
+					{
+						profile: {
+							avatar: ProfileAvatar1,
+							name: 'Ben Giordano',
+							title: translate( 'Founder, %(companyName)s', {
+								args: {
+									companyName: 'Freshy',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: 'freshysites.com',
+						},
+						testimonial:
+							"We needed a hosting provider that was as knowledgeable about WordPress as we are. With Pressable's affiliation with Automattic, the same people behind WordPress.com and WordPress VIP, we knew we'd found the right home for our client portfolio.",
+					},
+					{
+						profile: {
+							name: 'Justin Barrett',
+							avatar: ProfileAvatar2,
+							title: translate( 'Director of Technology, %(companyName)s', {
+								args: {
+									companyName: 'Autoshop Solutions',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: 'autoshopsolutions.com',
+						},
+						testimonial:
+							'As an agency with hundreds of clients, Pressable changed the game for our ability to grow as a business and offer best-in-class products for our clients. With fantastic support, superior uptime, and solutions to make even the largest challenges possible, Pressable is always there.',
+					},
+				] }
+			/>
+
+			<ClientRelationships />
+		</div>
+	);
+}

client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/premier-agency-hosting/style.scss

@@ -0,0 +1,12 @@
+.premier-agency-hosting ul.hosting-additional-features {
+	.gridicon {
+		fill: var(--studio-jetpack-green);
+	}
+
+	a,
+	a:visited,
+	a:hover {
+		text-decoration: underline;
+		color: var(--color-text);
+	}
+}