diff --git a/js/src/get-started-page/features-card/img-connection.svg b/js/src/get-started-page/features-card/img-connection.svg deleted file mode 100644 index 5aeee3a53e..0000000000 --- a/js/src/get-started-page/features-card/img-connection.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/js/src/get-started-page/features-card/img-dashboard.svg b/js/src/get-started-page/features-card/img-dashboard.svg new file mode 100644 index 0000000000..4d75347f4b --- /dev/null +++ b/js/src/get-started-page/features-card/img-dashboard.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/src/get-started-page/features-card/img-free-listings.svg b/js/src/get-started-page/features-card/img-free-listings.svg index c3adb73f16..074e2a803d 100644 --- a/js/src/get-started-page/features-card/img-free-listings.svg +++ b/js/src/get-started-page/features-card/img-free-listings.svg @@ -1,20 +1,34 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + diff --git a/js/src/get-started-page/features-card/img-google-ads.svg b/js/src/get-started-page/features-card/img-google-ads.svg deleted file mode 100644 index ae18bbaa6e..0000000000 --- a/js/src/get-started-page/features-card/img-google-ads.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/js/src/get-started-page/features-card/img-product-promotion.svg b/js/src/get-started-page/features-card/img-product-promotion.svg new file mode 100644 index 0000000000..45fb251ddf --- /dev/null +++ b/js/src/get-started-page/features-card/img-product-promotion.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/src/get-started-page/features-card/index.js b/js/src/get-started-page/features-card/index.js index f87590b1e2..6786692332 100644 --- a/js/src/get-started-page/features-card/index.js +++ b/js/src/get-started-page/features-card/index.js @@ -4,31 +4,76 @@ import { __ } from '@wordpress/i18n'; import { Card, + CardHeader, Flex, FlexBlock, __experimentalText as Text, } from '@wordpress/components'; +import { createInterpolateElement } from '@wordpress/element'; /** * Internal dependencies */ -import connectionImageURL from './img-connection.svg'; +import AppDocumentationLink from '.~/components/app-documentation-link'; import freeListingsImageURL from './img-free-listings.svg'; -import googleAdsImageURL from './img-google-ads.svg'; +import productPromotionImageURL from './img-product-promotion.svg'; +import dashboardImageURL from './img-dashboard.svg'; import './index.scss'; +const LearnMoreLink = ( { linkId, href } ) => { + return ( + + { createInterpolateElement( + __( 'Learn More →', 'google-listings-and-ads' ), + { + link: ( + + ), + } + ) } + + ); +}; + const FeaturesCard = () => { return ( - - + + + + { __( + '49% of shoppers surveyed say they use Google to discover or find a new item or product', + 'google-listings-and-ads' + ) } + + + { __( + 'With Google Listings & Ads, connect with the right shoppers at the right moment when they’re looking to buy products like yours.', + 'google-listings-and-ads' + ) } + + + { { variant="label" > { __( - 'Connect your store seamlessly', + 'Show products automatically on Google for free', 'google-listings-and-ads' ) } @@ -45,19 +90,23 @@ const FeaturesCard = () => { variant="body" > { __( - 'Sync your WooCommerce store data with Google Merchant Center to easily list your products across Google.', + 'When your products are added and approved, they’ll be eligible for free listings, reaching shoppers across Google’s network.', 'google-listings-and-ads' ) } + { { variant="label" > { __( - 'Reach online shoppers with free listings', + 'Promote products and drive more sales with paid ads', 'google-listings-and-ads' ) } @@ -74,19 +123,23 @@ const FeaturesCard = () => { variant="body" > { __( - `Showcase eligible products to shoppers looking for what you offer and drive traffic to your store with Google's free listings.`, + 'Connect your Google Ads account, choose a budget, and Google will optimize your ads so they appear at the right time and place. ', 'google-listings-and-ads' ) } + { { variant="label" > { __( - 'Boost store traffic and sales with Google Ads', + 'Track performance straight from your store dashboard', 'google-listings-and-ads' ) } @@ -103,10 +156,14 @@ const FeaturesCard = () => { variant="body" > { __( - 'Create a Performance Max campaign to promote products across Google Search, Shopping, Gmail, YouTube, and the Display Network.', + 'Real-time reporting all within your WooCommerce dashboard means you know how your campaigns are performing at all times.', 'google-listings-and-ads' ) } + diff --git a/js/src/get-started-page/features-card/index.scss b/js/src/get-started-page/features-card/index.scss index 745ef9f846..30644f6800 100644 --- a/js/src/get-started-page/features-card/index.scss +++ b/js/src/get-started-page/features-card/index.scss @@ -1,27 +1,78 @@ .gla-get-started-features-card { - .components-flex { - justify-content: space-around; + // Adjust imported from @wordpress/components. + // Repeat selector to make it higher priority. + .components-card__header.components-card__header { + flex-direction: column; + gap: $grid-unit-10; + padding: $grid-unit-60 $grid-unit * 14.125 $grid-unit-50; + text-align: center; @media (max-width: $break-small) { - flex-direction: column; + padding: $grid-unit-30 $grid-unit-30 $grid-unit-20; + gap: $grid-unit-20; } + } + + .components-flex { + gap: 50px; + padding: 0 $grid-unit * 11 $grid-unit-60; &__block { display: flex; flex-direction: column; align-items: center; - max-width: 195px; - margin: calc(var(--large-gap) / 4 * 5) 0; text-align: center; } + + @media (max-width: $break-small) { + flex-direction: column; + gap: 40px; + padding: 0 55px 44px; + } + } + + // Use more specific rules to make it higher priority to override component. + & &__description { + font-size: 14px; + line-height: 18px; } + // Use more specific rules to make it higher priority to override component. & &__label { - margin: $grid-unit-40 0 $grid-unit-20; - font-size: $default-font-size; + margin: $grid-unit-30 0 $grid-unit-20; + font-weight: bold; + font-size: 14px; + line-height: 18px; } + // Use more specific rules to make it higher priority to override component. & &__content { - line-height: 16px; + font-size: 14px; + line-height: 18px; + } + + // Use more specific rules to make it higher priority to override component. + & &__learn-more { + margin-top: $grid-unit; + font-weight: 500; + font-size: 14px; + line-height: 16.71px; + + a { + text-decoration: none; + } + } + + @media (max-width: $break-small) { + // Use more specific rules to make it higher priority to override component. + & &__title { + font-size: 20px; + line-height: 28px; + } + + // Use more specific rules to make it higher priority to override component. + & &__label { + margin: $grid-unit * 2.5 0 $grid-unit-20; + } } } diff --git a/js/src/get-started-page/index.js b/js/src/get-started-page/index.js index 45d2b06eef..9863b37dd1 100644 --- a/js/src/get-started-page/index.js +++ b/js/src/get-started-page/index.js @@ -2,9 +2,10 @@ * Internal dependencies */ import './index.scss'; -import UnsupportedNotices from './unsupported-notices'; import BenefitsCard from './benefits-card'; +import FeaturesCard from './features-card'; import GetStartedWithVideoCard from './get-started-with-video-card'; +import UnsupportedNotices from './unsupported-notices'; const GetStartedPage = () => { return ( @@ -12,6 +13,7 @@ const GetStartedPage = () => { + ); };