diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx
index e6301e444f53d..073209a47064b 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/index.tsx
@@ -104,11 +104,7 @@ export function HeroSection(
/>
-
- { navItems.map( ( item ) => {
- return - { item }
;
- } ) }
-
+
);
}
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts
index a606dc6fbfdea..264c4e4970132 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts
@@ -1,7 +1,7 @@
import { useCallback, useRef, useState } from 'react';
-const SCROLL_THRESHOLD_PERCENTAGE = 0.5;
-const SCROLL_THRESHOLD_BUFFER = 15;
+const SCROLL_THRESHOLD_PERCENTAGE = 0.2;
+const SCROLL_THRESHOLD_BUFFER = 5;
export default function useCompactOnScroll() {
const [ isCompact, setIsCompact ] = useState( false );
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 d0411c47be80c..ca14074845e13 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
@@ -1,8 +1,5 @@
import { useTranslate } from 'i18n-calypso';
-import { useContext } from 'react';
-import PressableLogo from 'calypso/assets/images/a8c-for-agencies/pressable-logo.svg';
-import VIPLogo from 'calypso/assets/images/a8c-for-agencies/vip-full-logo.svg';
-import WPCOMLogo from 'calypso/assets/images/a8c-for-agencies/wpcom-logo.svg';
+import { useContext, useMemo } from 'react';
import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
import { SectionProps } from '..';
import { MarketplaceTypeContext } from '../../context';
@@ -23,36 +20,40 @@ export const HostingContent = ( { section, onAddToCart }: Props ) => {
const isReferMode = marketplaceType === 'referral';
- let content;
- let logo;
- let title;
- if ( section === 'wpcom' ) {
- content = ;
- logo = ;
- title = translate(
- 'Optimized and hassle-free hosting for business websites, local merchants, and small online retailers.'
- );
- }
- if ( section === 'pressable' ) {
- content = onAddToCart( product, 1 ) } />;
- logo = ;
- title = translate(
- 'Premier Agency hosting best for large-scale businesses and major eCommerce sites.'
- );
- }
- if ( section === 'vip' ) {
- content = ;
- logo = ;
- title = translate(
- 'Deliver unmatched performance with the highest security standards on our enterprise content platform.'
- );
- }
+ const { content, title } = useMemo( () => {
+ if ( section === 'wpcom' ) {
+ return {
+ content: ,
+ title: isReferMode
+ ? translate( 'Refer a WordPress.com site to your client' )
+ : translate( 'Purchase sites individually or in bulk, as you need them' ),
+ };
+ }
+ if ( section === 'pressable' ) {
+ return {
+ content: onAddToCart( product, 1 ) } />,
+ title: isReferMode
+ ? translate( 'Refer a variety of plans, or single high-resource sites to your clients' )
+ : translate(
+ 'Choose from a variety of plans, or purchase single high-resource sites as add-ons'
+ ),
+ };
+ }
+ if ( section === 'vip' ) {
+ return {
+ content: ,
+ title: translate(
+ 'Deliver unmatched performance with the highest security standards on our enterprise platform'
+ ),
+ };
+ }
+
+ return { content: null, title: '' };
+ }, [ isReferMode, onAddToCart, section, translate ] );
+
return (
-
+
{ title }
{ content }
);
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss
index e1ee2c179d149..d6870b5cba76c 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/style.scss
@@ -8,28 +8,7 @@
.hosting-v3__content-header {
- display: none;
-
- @include break-medium {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- gap: 16px;
- padding: 0 40px 32px;
-
- .hosting-v3__content-header-title {
- @include a4a-font-body-md;
- }
-
- .hosting-v3__content-logo {
- .wordpress-vip-logo {
- display: inline-flex;
- }
-
- img {
- height: 32px;
- }
- }
- }
+ @include a4a-font-heading-lg;
+ text-align: center;
+ margin-block-end: 32px;
}
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx
index 6cf162874d303..380f31c5733a0 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/index.tsx
@@ -21,6 +21,7 @@ import { useDispatch } from 'calypso/state';
import { recordTracksEvent } from 'calypso/state/analytics/actions';
import { APIProductFamilyProduct } from 'calypso/state/partner-portal/types';
import ReferralToggle from '../common/referral-toggle';
+import withMarketplaceType from '../hoc/with-marketplace-type';
import useShoppingCart from '../hooks/use-shopping-cart';
import ShoppingCart from '../shopping-cart';
import HeroSection from './hero-section';
@@ -33,7 +34,7 @@ export type SectionProps = {
section: 'wpcom' | 'pressable' | 'vip';
};
-export default function HostingOverviewV3( { section }: SectionProps ) {
+function HostingOverviewV3( { section }: SectionProps ) {
const translate = useTranslate();
const dispatch = useDispatch();
@@ -133,3 +134,5 @@ export default function HostingOverviewV3( { section }: SectionProps ) {
);
}
+
+export default withMarketplaceType( HostingOverviewV3 );