Additional improvement and bug fixes.

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

@@ -104,11 +104,7 @@ export function HeroSection(
 				/>
 			</div>
 
-			<ul className="hosting-v3-hero-section__tabs">
-				{ navItems.map( ( item ) => {
-					return <li key={ item.key }>{ item }</li>;
-				} ) }
-			</ul>
+			<ul className="hosting-v3-hero-section__tabs">{ navItems }</ul>
 		</div>
 	);
 }

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 );

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 = <StandardAgencyHosting onAddToCart={ onAddToCart } />;
-		logo = <img src={ WPCOMLogo } alt="WPCOM" />;
-		title = translate(
-			'Optimized and hassle-free hosting for business websites, local merchants, and small online retailers.'
-		);
-	}
-	if ( section === 'pressable' ) {
-		content = <PremierAgencyHosting onAddToCart={ ( product ) => onAddToCart( product, 1 ) } />;
-		logo = <img src={ PressableLogo } alt="Pressable" />;
-		title = translate(
-			'Premier Agency hosting best for large-scale businesses and major eCommerce sites.'
-		);
-	}
-	if ( section === 'vip' ) {
-		content = <EnterpriseAgencyHosting isReferMode={ isReferMode } />;
-		logo = <img src={ VIPLogo } alt="VIP" />;
-		title = translate(
-			'Deliver unmatched performance with the highest security standards on our enterprise content platform.'
-		);
-	}
+	const { content, title } = useMemo( () => {
+		if ( section === 'wpcom' ) {
+			return {
+				content: <StandardAgencyHosting onAddToCart={ onAddToCart } />,
+				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: <PremierAgencyHosting onAddToCart={ ( product ) => 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: <EnterpriseAgencyHosting isReferMode={ isReferMode } />,
+				title: translate(
+					'Deliver unmatched performance with the highest security standards on our enterprise platform'
+				),
+			};
+		}
+
+		return { content: null, title: '' };
+	}, [ isReferMode, onAddToCart, section, translate ] );
+
 	return (
 		<div className="hosting-v3__content">
-			<div className="hosting-v3__content-header">
-				<div className="hosting-v3__content-logo">{ logo }</div>
-				<div className="hosting-v3__content-header-title">{ title }</div>
-			</div>
+			<h2 className="hosting-v3__content-header">{ title }</h2>
 			{ content }
 		</div>
 	);

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;
 }

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 ) {
 		</Layout>
 	);
 }
+
+export default withMarketplaceType( HostingOverviewV3 );