Implement VIP hosting page v3.

client/a8c-for-agencies/components/page-section/backgrounds/index.tsx

@@ -1,5 +1,6 @@
 import Background1Image from './background-1.svg';
 import Background10Image from './background-10.svg';
+import Background11Image from './background-11.svg';
 import Background2Image from './background-2.svg';
 import Background3Image from './background-3.svg';
 import Background4Image from './background-4.svg';
@@ -71,3 +72,8 @@ export const BackgroundType10: SectionBackground = {
 	color: '#EBF4FA',
 	size: 'auto 100%',
 };
+
+export const BackgroundType11: SectionBackground = {
+	image: `url(${ Background11Image })`,
+	color: '#F5F2F1',
+};

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

@@ -0,0 +1,178 @@
+import { VIPLogo, SalesforceLogo, SlackLogo, CNNLogo } from '@automattic/components';
+import { Button } from '@wordpress/components';
+import { Icon, external } from '@wordpress/icons';
+import { useTranslate } from 'i18n-calypso';
+import { BackgroundType11 } from 'calypso/a8c-for-agencies/components/page-section/backgrounds';
+import SimpleList from 'calypso/a8c-for-agencies/components/simple-list';
+import ProfileAvatar1 from 'calypso/assets/images/a8c-for-agencies/hosting/enterprise-testimonial-1.png';
+import ProfileAvatar2 from 'calypso/assets/images/a8c-for-agencies/hosting/enterprise-testimonial-2.png';
+import CapeGeminiLogo from 'calypso/assets/images/logos/capgemini.svg';
+import MetaLogo from 'calypso/assets/images/logos/meta.svg';
+import NewYorkPostLogo from 'calypso/assets/images/logos/new-york-post.svg';
+import NewsCorpLogo from 'calypso/assets/images/logos/news-corp.svg';
+import SpotifyLogo from 'calypso/assets/images/logos/spotify.svg';
+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 './style.scss';
+
+export default function EnterpriseAgencyHosting( { isReferMode }: { isReferMode: boolean } ) {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const onRequestDemoClick = () => {
+		dispatch(
+			recordTracksEvent( 'calypso_a4a_marketplace_hosting_enterprise_request_demo_click' )
+		);
+	};
+
+	const onReferClientClick = () => {
+		dispatch(
+			recordTracksEvent( 'calypso_a4a_marketplace_hosting_enterprise_refer_client_click' )
+		);
+	};
+
+	return (
+		<>
+			<div className="enterprise-agency-hosting-v3__top-wrapper">
+				<div className="enterprise-agency-hosting-v3__top">
+					<div className="enterprise-agency-hosting-v3__top-details is-card">
+						<div className="enterprise-agency-hosting-v3__top-details-heading">
+							<VIPLogo width={ 57 } height={ 25 } /> | { translate( 'Enterprise WordPress' ) }
+						</div>
+
+						<div className="enterprise-agency-hosting-v3__top-details-subheading">
+							{ translate( 'Custom pricing' ) }
+						</div>
+
+						<Button
+							className="enterprise-agency-hosting-v3__top-details-button"
+							href="https://wpvip.com/partner-application/?utm_source=partner&utm_medium=referral&utm_campaign=a4a"
+							onClick={ isReferMode ? onReferClientClick : onRequestDemoClick }
+							target="_blank"
+							variant="primary"
+						>
+							{ isReferMode ? translate( 'Refer client' ) : translate( 'Request a Demo' ) }
+							<Icon icon={ external } size={ 16 } />
+						</Button>
+					</div>
+
+					<div className="enterprise-agency-hosting-v3__top-details">
+						<div className="enterprise-agency-hosting-v3__top-details-heading">
+							{ translate( 'The platform the biggest brands trust.' ) }
+						</div>
+
+						{ isReferMode && (
+							<div className="enterprise-agency-hosting-v3__top-details-subheading">
+								{ translate(
+									'Earn a one-time 5% commission on client referrals to WordPress VIP. {{a}}Full Terms ↗{{/a}}',
+									{
+										components: {
+											a: (
+												<a
+													href="https://automattic.com/for-agencies/program-incentives"
+													target="_blank"
+													rel="noopener noreferrer"
+												/>
+											),
+										},
+									}
+								) }
+							</div>
+						) }
+
+						<SimpleList
+							items={ [
+								translate( 'Unmatched flexibility to build a customized web experience' ),
+								translate( 'Tools to increase customer engagement' ),
+								translate(
+									'Scalability to ensure top-notch site performance during campaigns or events'
+								),
+							] }
+						/>
+
+						<div className="enterprise-agency-hosting-v3__logos">
+							<SalesforceLogo />
+							<img src={ MetaLogo } alt="Meta" />
+							<SlackLogo />
+							<img src={ SpotifyLogo } alt="Spotify" />
+							<CNNLogo />
+							<img src={ NewsCorpLogo } alt="News Corp" />
+							<img src={ CapeGeminiLogo } alt="Capgemini" />
+							<img src={ NewYorkPostLogo } alt="New York Post" />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<HostingAdditionalFeaturesSection
+				heading={ translate( 'VIP Capabilities ' ) }
+				subheading={ translate( 'The leading content platform' ) }
+				description={ translate(
+					'Combine the ease of WordPress with enterprise-grade security and scalability.'
+				) }
+				background={ BackgroundType11 }
+				items={ [
+					translate( 'Rapid content authoring' ),
+					translate( 'Experience creation' ),
+					translate( 'Content guidance' ),
+					translate( 'Headless CMS' ),
+					translate( 'Development tools' ),
+					translate( 'Scalable platform' ),
+					translate( 'Enterprise-grade security' ),
+					translate( 'Website management' ),
+					translate( 'Integrated commerce' ),
+				] }
+				threeRows
+			/>
+			<HostingTestimonialsSection
+				heading={ translate( 'Love for VIP hosting' ) }
+				subheading={ translate( 'What agencies say' ) }
+				items={ [
+					{
+						profile: {
+							avatar: ProfileAvatar1,
+							name: 'David Rousseau',
+							title: translate( 'Vice President, %(companyName)s', {
+								args: {
+									companyName: 'Kaiser Family Foundation',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: translate( 'Read the case study' ),
+							siteLink:
+								'https://wpvip.com/case-studies/evolving-the-kaiser-family-foundations-data-rich-platforms/',
+						},
+						testimonial: translate(
+							"In the past, the staff didn't touch the CMS. They wrote things in Word, sent it to the production team, and they put it online. With WordPress, that workflow is changing slowly and dramatically." +
+								" We've trained many of our content creators in the CMS. And, the closer the content creators are to it, the more creatively they are able to think about it."
+						),
+					},
+
+					{
+						profile: {
+							avatar: ProfileAvatar2,
+							name: 'Joel Davies',
+							title: translate( 'Head of Editorial Operations, %(companyName)s', {
+								args: {
+									companyName: 'News UK',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: translate( 'Read the case study' ),
+							siteLink:
+								'https://wpvip.com/case-studies/behind-the-scenes-of-news-uks-rampant-speed-to-value-with-gutenberg/',
+						},
+						testimonial: translate(
+							'With Gutenberg, we were able to publish a breaking news story in two minutes versus five minutes in Classic [WordPress].' +
+								" The main reason for this is the reusable blocks which have been renamed 'The Game Changer.'"
+						),
+					},
+				] }
+				itemBackgroundColor="#F5F2F1"
+			/>
+		</>
+	);
+}

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

@@ -0,0 +1,96 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.enterprise-agency-hosting-v3__top-wrapper {
+	padding: 0 32px 16px;
+
+	> * {
+		@include break-medium {
+			max-width: 1500px;
+			margin-inline: auto !important;
+			padding: 0 64px 32px;
+		}
+	}
+
+}
+
+.enterprise-agency-hosting-v3__top {
+	background-color: #f5f2f1;
+	padding: 32px;
+	/* stylelint-disable-next-line scales/radii */
+	border-radius: 8px;
+	box-sizing: border-box;
+
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 48px;
+
+	@include break-xlarge {
+		grid-template-columns: 30% auto;
+	}
+}
+
+.enterprise-agency-hosting-v3__top-details {
+	gap: 16px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	&.is-card {
+		padding: 32px;
+		/* stylelint-disable-next-line scales/radii */
+		border-radius: 8px;
+		background-color: var(--color-surface);
+		box-shadow: 0 3px 1px 0 #0000000A;
+		justify-content: flex-start;
+	}
+
+	.simple-list-icon {
+		fill: var(--color-text);
+	}
+}
+
+.enterprise-agency-hosting-v3__top-details-heading {
+	@include a4a-font-heading-lg;
+	display: flex;
+}
+
+.enterprise-agency-hosting-v3__top-details.is-card .enterprise-agency-hosting-v3__top-details-subheading {
+	@include a4a-font-heading-xl;
+}
+
+.theme-a8c-for-agencies .enterprise-agency-hosting-v3__top-details-button.components-button.is-primary {
+	margin-block-start: auto;
+
+	background-color: var(--color-text);
+	color: var(--color-text-inverted);
+}
+
+.enterprise-agency-hosting-v3__logos {
+	padding-block: 24px;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 8px;
+
+	@include break-medium {
+		grid-template-columns: repeat(4, 1fr);
+	}
+
+	@include break-wide {
+		grid-template-columns: repeat(8, 1fr);
+	}
+
+	svg,
+	img {
+		width: 120px;
+		min-height: 40px;
+
+		@include break-xlarge {
+			width: auto;
+		}
+
+		@include break-huge {
+			width: 120px;
+		}
+	}
+}

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

@@ -3,7 +3,7 @@ import { useContext, useMemo } from 'react';
 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 EnterpriseAgencyHosting from './enterprise-agency-hosting';
 import PremierAgencyHosting from './premier-agency-hosting';
 import StandardAgencyHosting from './standard-agency-hosting';