A4A: Implement WPCOM hosting section v3. (#97230)

* Implement WPCOM hosting section v3.

* Remove unused CSS rules.

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

@@ -1,11 +1,13 @@
 import Background1Image from './background-1.svg';
+import Background10Image from './background-10.svg';
 import Background2Image from './background-2.svg';
 import Background3Image from './background-3.svg';
 import Background4Image from './background-4.svg';
 import Background5Image from './background-5.svg';
 import Background6Image from './background-6.svg';
 import Background7Image from './background-7.svg';
 import Background8Image from './background-8.svg';
+import Background9Image from './background-9.svg';
 
 export type SectionBackground = {
 	image: string;
@@ -57,3 +59,15 @@ export const BackgroundType8: SectionBackground = {
 	color: '#EBF4FA',
 	size: 'auto 100%',
 };
+
+export const BackgroundType9: SectionBackground = {
+	image: `url(${ Background9Image })`,
+	color: '#EBF4FA',
+	size: 'auto 100%',
+};
+
+export const BackgroundType10: SectionBackground = {
+	image: `url(${ Background10Image })`,
+	color: '#EBF4FA',
+	size: 'auto 100%',
+};

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

@@ -0,0 +1,68 @@
+import { Card } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import PageSection, { PageSectionProps } from 'calypso/a8c-for-agencies/components/page-section';
+import SimpleList from 'calypso/a8c-for-agencies/components/simple-list';
+
+import './style.scss';
+
+type Props = Omit< PageSectionProps, 'children' > & {
+	features: {
+		icon: JSX.Element;
+		title: string;
+		items: string[];
+	}[];
+};
+
+function FeatureCard( {
+	title,
+	icon,
+	items,
+}: {
+	title: string;
+	icon: JSX.Element;
+	items: string[];
+} ) {
+	return (
+		<Card className="hosting-features-section-v2__card">
+			<div className="hosting-features-section-v2__card-header">
+				<Icon icon={ icon } />
+				<h2 className="hosting-features-section-v2__card-title">{ title }</h2>
+			</div>
+
+			<SimpleList className="hosting-features-section-v2__card-list" items={ items } />
+		</Card>
+	);
+}
+
+export default function HostingFeaturesSectionV2( {
+	icon,
+	heading,
+	subheading,
+	background,
+	description,
+	features,
+}: Props ) {
+	return (
+		<PageSection
+			className="hosting-features-section-v2"
+			icon={ icon }
+			heading={ heading }
+			subheading={ subheading }
+			background={ background }
+			description={ description }
+		>
+			<div className="hosting-features-section-v2__cards">
+				{ features.map( ( feature, index ) => {
+					return (
+						<FeatureCard
+							key={ `feature-card-${ index }` }
+							icon={ feature.icon }
+							title={ feature.title }
+							items={ feature.items }
+						/>
+					);
+				} ) }
+			</div>
+		</PageSection>
+	);
+}

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

@@ -0,0 +1,35 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.hosting-features-section-v2__cards {
+	display: grid;
+	gap: 16px;
+
+	@include break-large {
+		grid-template-columns: repeat(4, 350px);
+		gap: 32px;
+		overflow-x: auto;
+		margin-inline: -40px;
+		margin-block-end: -80px;
+		padding-inline: 40px;
+		padding-block-end: 80px;
+	}
+}
+
+.components-card.hosting-features-section-v2__card {
+	padding: 24px;
+	border: 1px solid var( --color-primary-5 );
+	box-shadow: none;
+	position: inherit;
+}
+
+.hosting-features-section-v2__card-header {
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
+	margin-block-end: 14px;
+}
+
+.hosting-features-section-v2__card-title {
+	@include a4a-font-heading-lg;
+}

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

@@ -0,0 +1,47 @@
+import { useTranslate } from 'i18n-calypso';
+import { SectionBackground } from 'calypso/a8c-for-agencies/components/page-section/backgrounds';
+import HostingBenefitsSection from '../../../common/hosting-benefits-section';
+
+type Props = {
+	background?: SectionBackground;
+};
+
+export default function ClientRelationships( { background }: Props ) {
+	const translate = useTranslate();
+	return (
+		<HostingBenefitsSection
+			heading={ translate( 'Improve your client relationships with our hosting' ) }
+			subheading={ translate( 'How Automattic can help' ) }
+			background={ background }
+			items={ [
+				{
+					title: translate( 'Create trust' ),
+					description: translate(
+						"With over 15 years of experience running hundreds of millions of sites on WordPress.com, including the highest-trafficked sites globally, we've developed a platform we confidently put up against any cloud service."
+					),
+					benefits: [
+						translate( '99.999% Uptime' ),
+						translate( 'High availability with automated scaling' ),
+					],
+				},
+				{
+					title: translate( 'Minimize risk' ),
+					description: translate(
+						'Automattic hosting plans offer exceptional security from day one, with the option to include or sell additional client-facing security features like real-time backups, anti-spam, and malware scanning.'
+					),
+					benefits: [ translate( 'Web Application Firewall' ), translate( 'DDoS protection' ) ],
+				},
+				{
+					title: translate( 'Increase speed' ),
+					description: translate(
+						"We're the only cloud platform team fully dedicated to optimizing WordPress. Your customers will feel the difference."
+					),
+					benefits: [
+						translate( 'Incredibly low page speed index' ),
+						'Automated WordPress edge caching',
+					],
+				},
+			] }
+		/>
+	);
+}

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

@@ -0,0 +1,80 @@
+import { code, copy, key, plus } from '@wordpress/icons';
+import { useTranslate } from 'i18n-calypso';
+import { BackgroundType9 } from 'calypso/a8c-for-agencies/components/page-section/backgrounds';
+import HostingFeaturesSectionV2 from '../../../common/hosting-features-section-v2';
+
+type Props = {
+	heading: string;
+};
+
+export default function HostingFeatures( { heading }: Props ) {
+	const translate = useTranslate();
+
+	return (
+		<HostingFeaturesSectionV2
+			heading={ heading }
+			subheading={ translate( 'World-class functionality' ) }
+			background={ BackgroundType9 }
+			features={ [
+				{
+					icon: copy,
+					title: translate( 'Performance' ),
+					items: [
+						translate( 'Global edge caching' ),
+						translate( 'Global CDN with 28+ locations' ),
+						translate( 'High-frequency CPUs' ),
+						translate( 'High-burst capacity' ),
+						translate( 'Automated datacenter failover' ),
+						translate( 'Extremely fast DNS with SSL' ),
+						translate( '10 PHP workers w/ auto-scaling' ),
+						translate( 'Uptime monitoring' ),
+					],
+				},
+				{
+					icon: key,
+					title: translate( 'Security' ),
+					items: [
+						translate( 'Real-time backups' ),
+						translate( 'DDOS protection and mitigation' ),
+						translate( 'Brute-force protection' ),
+						translate( 'Malware detection & removal' ),
+						translate( 'Spam protection with Akismet' ),
+						translate( 'Web application firewall (WAF)' ),
+						translate( 'One-click restores' ),
+						translate( 'Automated WordPress updates' ),
+						translate( 'Isolated site infrastructure' ),
+					],
+				},
+				{
+					icon: code,
+					title: translate( 'Dev Tools' ),
+					items: [
+						translate( 'Local development environment' ),
+						translate( 'Free staging site' ),
+						translate( 'WP-CLI access' ),
+						translate( 'SSH/SFTP access' ),
+						translate( 'GitHub deployments' ),
+						translate( 'Plugin auto-updates' ),
+						translate( 'Centralized site management' ),
+						translate( 'Domain management' ),
+						translate( 'Site activity log' ),
+					],
+				},
+				{
+					icon: plus,
+					title: translate( 'And More!' ),
+					items: [
+						translate( '24/7 priority expert support' ),
+						translate( 'Free managed migrations' ),
+						translate( 'Install plugins and themes' ),
+						translate( 'In-depth site analytics dashboard' ),
+						translate( 'Elastic-powered search' ),
+						translate( '4K, unbranded VideoPress player' ),
+						translate( 'Free domain for one year' ),
+						translate( 'Smart redirects' ),
+					],
+				},
+			] }
+		/>
+	);
+}

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

@@ -5,7 +5,7 @@ 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 StandardAgencyHosting from '../../hosting-overview/hosting-v2/standard-agency-hosting';
+import StandardAgencyHosting from './standard-agency-hosting';
 
 import './style.scss';
 
@@ -23,7 +23,7 @@ export const HostingContent = ( { section, onAddToCart }: Props ) => {
 	const { content, title } = useMemo( () => {
 		if ( section === 'wpcom' ) {
 			return {
-				content: <StandardAgencyHosting onAddToCart={ onAddToCart } />,
+				content: <StandardAgencyHosting />,
 				title: isReferMode
 					? translate( 'Refer a WordPress.com site to your client' )
 					: translate( 'Purchase sites individually or in bulk, as you need them' ),

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

@@ -0,0 +1,60 @@
+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/standard-testimonial-1.png';
+import ProfileAvatar2 from 'calypso/assets/images/a8c-for-agencies/hosting/standard-testimonial-2.png';
+import HostingTestimonialsSection from '../../../common/hosting-testimonials-section';
+import ClientRelationships from '../common/client-relationships';
+import HostingFeatures from '../common/hosting-features';
+
+export default function StandardAgencyHosting() {
+	const translate = useTranslate();
+
+	return (
+		<div className="standard-agency-hosting">
+			<section className="standard-agency-hosting__plan-selector-container">TODO</section>
+
+			<HostingFeatures heading={ translate( 'Included with every WordPress.com site' ) } />
+
+			<HostingTestimonialsSection
+				heading={ translate( 'Love for WordPress.com hosting' ) }
+				subheading={ translate( 'What agencies say' ) }
+				items={ [
+					{
+						profile: {
+							name: 'Ajit Bohra',
+							avatar: ProfileAvatar1,
+							title: translate( 'Founder, %(companyName)s', {
+								args: {
+									companyName: 'LUBUS',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: 'lubus.in',
+						},
+						testimonial: translate(
+							'We aimed to provide clients with a reliable hosting service we could endorse without hesitation, ultimately resulting in satisfied clients. We found that service with WordPress.com.'
+						),
+					},
+					{
+						profile: {
+							name: 'Brian Lalli',
+							avatar: ProfileAvatar2,
+							title: translate( 'President, %(companyName)s', {
+								args: {
+									companyName: 'Moon Rooster LLC',
+								},
+								comment: '%(companyName)s is the name of the company the testimonial is about.',
+							} ),
+							site: 'moonrooster.com',
+						},
+						testimonial: translate(
+							"WordPress.com has been crucial to my agency's growth. Its intuitive UI allows me to quickly create sleek, functional websites for my clients, and their reliable hosting and support enable me to rest easy, knowing my sites are in good hands."
+						),
+					},
+				] }
+			/>
+
+			<ClientRelationships background={ BackgroundType10 } />
+		</div>
+	);
+}