diff --git a/client/a8c-for-agencies/components/page-section/backgrounds/background-10.svg b/client/a8c-for-agencies/components/page-section/backgrounds/background-10.svg
new file mode 100644
index 0000000000000..630c4790ea6f9
--- /dev/null
+++ b/client/a8c-for-agencies/components/page-section/backgrounds/background-10.svg
@@ -0,0 +1,3 @@
+
diff --git a/client/a8c-for-agencies/components/page-section/backgrounds/background-9.svg b/client/a8c-for-agencies/components/page-section/backgrounds/background-9.svg
new file mode 100644
index 0000000000000..9d0d5f393d4fd
--- /dev/null
+++ b/client/a8c-for-agencies/components/page-section/backgrounds/background-9.svg
@@ -0,0 +1,16 @@
+
diff --git a/client/a8c-for-agencies/components/page-section/backgrounds/index.tsx b/client/a8c-for-agencies/components/page-section/backgrounds/index.tsx
index 3099417631df7..ba71729d51678 100644
--- a/client/a8c-for-agencies/components/page-section/backgrounds/index.tsx
+++ b/client/a8c-for-agencies/components/page-section/backgrounds/index.tsx
@@ -1,4 +1,5 @@
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';
@@ -6,6 +7,7 @@ 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%',
+};
diff --git a/client/a8c-for-agencies/sections/marketplace/common/hosting-features-section-v2/index.tsx b/client/a8c-for-agencies/sections/marketplace/common/hosting-features-section-v2/index.tsx
new file mode 100644
index 0000000000000..5c036e4c79fa7
--- /dev/null
+++ b/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 (
+
+
+
+
{ title }
+
+
+
+
+ );
+}
+
+export default function HostingFeaturesSectionV2( {
+ icon,
+ heading,
+ subheading,
+ background,
+ description,
+ features,
+}: Props ) {
+ return (
+
+
+ { features.map( ( feature, index ) => {
+ return (
+
+ );
+ } ) }
+
+
+ );
+}
diff --git a/client/a8c-for-agencies/sections/marketplace/common/hosting-features-section-v2/style.scss b/client/a8c-for-agencies/sections/marketplace/common/hosting-features-section-v2/style.scss
new file mode 100644
index 0000000000000..ab3fbaefc5251
--- /dev/null
+++ b/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;
+}
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/common/client-relationships.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/common/client-relationships.tsx
new file mode 100644
index 0000000000000..bcfd79cdf0148
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/common/hosting-features.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/common/hosting-features.tsx
new file mode 100644
index 0000000000000..c01205f8ac080
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx
index ca14074845e13..dd24394ce1065 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/index.tsx
+++ b/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: ,
+ content: ,
title: isReferMode
? translate( 'Refer a WordPress.com site to your client' )
: translate( 'Purchase sites individually or in bulk, as you need them' ),
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/index.tsx
new file mode 100644
index 0000000000000..7522d9b4cd365
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+ );
+}