diff --git a/client/a8c-for-agencies/components/page-section/backgrounds/background-11.svg b/client/a8c-for-agencies/components/page-section/backgrounds/background-11.svg new file mode 100644 index 00000000000000..b03b7cca70d39e --- /dev/null +++ b/client/a8c-for-agencies/components/page-section/backgrounds/background-11.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + 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 ba71729d51678e..7d5869063df4f6 100644 --- a/client/a8c-for-agencies/components/page-section/backgrounds/index.tsx +++ b/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', +}; diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/enterprise-agency-hosting/index.tsx b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/enterprise-agency-hosting/index.tsx new file mode 100644 index 00000000000000..5116b22d412e95 --- /dev/null +++ b/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 ( + <> +
+
+
+
+ | { translate( 'Enterprise WordPress' ) } +
+ +
+ { translate( 'Custom pricing' ) } +
+ + +
+ +
+
+ { translate( 'The platform the biggest brands trust.' ) } +
+ + { isReferMode && ( +
+ { translate( + 'Earn a one-time 5% commission on client referrals to WordPress VIP. {{a}}Full Terms ↗{{/a}}', + { + components: { + a: ( + + ), + }, + } + ) } +
+ ) } + + + +
+ + Meta + + Spotify + + News Corp + Capgemini + New York Post +
+
+
+
+ + + + + ); +} diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/enterprise-agency-hosting/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/enterprise-agency-hosting/style.scss new file mode 100644 index 00000000000000..41d691175228cf --- /dev/null +++ b/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; + } + } +} 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 c660054ace0484..15b28dc1e4a105 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 @@ -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';