From edc0308033598eec056afe961c964352d1be3a5c Mon Sep 17 00:00:00 2001 From: James Kenneth Guidaven Date: Mon, 9 Dec 2024 18:19:16 +0800 Subject: [PATCH 1/2] Implement WPCOM hosting section v3. --- .../backgrounds/background-10.svg | 3 + .../page-section/backgrounds/background-9.svg | 16 ++++ .../page-section/backgrounds/index.tsx | 14 ++++ .../hosting-features-section-v2/index.tsx | 68 ++++++++++++++++ .../hosting-features-section-v2/style.scss | 35 ++++++++ .../common/client-relationships.tsx | 47 +++++++++++ .../common/hosting-features.tsx | 80 +++++++++++++++++++ .../hosting-content/index.tsx | 4 +- .../standard-agency-hosting/index.tsx | 62 ++++++++++++++ .../standard-agency-hosting/style.scss | 24 ++++++ 10 files changed, 351 insertions(+), 2 deletions(-) create mode 100644 client/a8c-for-agencies/components/page-section/backgrounds/background-10.svg create mode 100644 client/a8c-for-agencies/components/page-section/backgrounds/background-9.svg create mode 100644 client/a8c-for-agencies/sections/marketplace/common/hosting-features-section-v2/index.tsx create mode 100644 client/a8c-for-agencies/sections/marketplace/common/hosting-features-section-v2/style.scss create mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/common/client-relationships.tsx create mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/common/hosting-features.tsx create mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/index.tsx create mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss 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 00000000000000..630c4790ea6f97 --- /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 00000000000000..9d0d5f393d4fd9 --- /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 3099417631df76..ba71729d51678e 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 00000000000000..5c036e4c79fa74 --- /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 00000000000000..ab3fbaefc52510 --- /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 00000000000000..bcfd79cdf01489 --- /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 00000000000000..c01205f8ac0806 --- /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 ca14074845e130..dd24394ce1065b 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 00000000000000..a9fe00df299fe5 --- /dev/null +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/index.tsx @@ -0,0 +1,62 @@ +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'; + +import './style.scss'; + +export default function StandardAgencyHosting() { + const translate = useTranslate(); + + return ( +
+
TODO
+ + + + + + +
+ ); +} diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss new file mode 100644 index 00000000000000..b11e60c7a24cdf --- /dev/null +++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss @@ -0,0 +1,24 @@ +@import "@wordpress/base-styles/breakpoints"; +@import "@wordpress/base-styles/mixins"; + +.standard-agency-hosting__plan-selector-container { + padding: 0 16px 48px; + + @include break-medium { + max-width: 1500px; + margin-inline: auto; + padding-inline: 40px; + } +} + +.standard-agency-hosting__banner-heading { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + text-align: center; +} + +.standard-agency-hosting__banner-description { + @include a4a-font-body-md; +} From eca52f287d4305d21cae5ea6c6e82c1cabf5ece5 Mon Sep 17 00:00:00 2001 From: James Kenneth Guidaven Date: Mon, 9 Dec 2024 18:26:42 +0800 Subject: [PATCH 2/2] Remove unused CSS rules. --- .../standard-agency-hosting/index.tsx | 2 -- .../standard-agency-hosting/style.scss | 24 ------------------- 2 files changed, 26 deletions(-) delete mode 100644 client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss 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 index a9fe00df299fe5..7522d9b4cd3651 100644 --- 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 @@ -6,8 +6,6 @@ import HostingTestimonialsSection from '../../../common/hosting-testimonials-sec import ClientRelationships from '../common/client-relationships'; import HostingFeatures from '../common/hosting-features'; -import './style.scss'; - export default function StandardAgencyHosting() { const translate = useTranslate(); diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss deleted file mode 100644 index b11e60c7a24cdf..00000000000000 --- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hosting-content/standard-agency-hosting/style.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; - -.standard-agency-hosting__plan-selector-container { - padding: 0 16px 48px; - - @include break-medium { - max-width: 1500px; - margin-inline: auto; - padding-inline: 40px; - } -} - -.standard-agency-hosting__banner-heading { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - text-align: center; -} - -.standard-agency-hosting__banner-description { - @include a4a-font-body-md; -}