Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add introduction banner card to marketing page.

This commit is contained in:
Gan Eng Chin 2022-12-27 02:05:58 +08:00
parent 1d7b663186
commit b6eec1e1bf
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
6 changed files with 221 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.scss Normal file
View File

@ -0,0 +1,43 @@
.woocommerce-marketing-introduction-banner {
& > div {
display: flex;
}
.woocommerce-marketing-introduction-banner-content {
width: 350px;
margin: 32px 20px 32px 40px;
.woocommerce-marketing-introduction-banner-title {
font-size: 20px;
font-weight: 400;
line-height: 28px;
margin-bottom: $gap-smaller;
}
.woocommerce-marketing-introduction-banner-features {
font-size: 13px;
font-weight: 400;
line-height: 16px;
color: $gray-700;
svg {
fill: $studio-woocommerce-purple-50;
}
}
}
.woocommerce-marketing-introduction-banner-illustration {
width: 271px;
background: linear-gradient(
90deg,
rgba( 247, 237, 247, 0 ) 5.31%,
rgba( 196, 152, 217, 0.12 ) 77.75%
);
img {
display: block;
width: 100%;
height: 100%;
}
}
}

86
plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx Normal file
View File

@ -0,0 +1,86 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Card, Flex, FlexItem, FlexBlock } from '@wordpress/components';
import { Icon, trendingUp, megaphone } from '@wordpress/icons';
/**
* Internal dependencies
*/
import './IntroductionBanner.scss';
import wooIconUrl from './woo.svg';
import illustrationUrl from './illustration.svg';
export const IntroductionBanner = () => {
return (
<Card className="woocommerce-marketing-introduction-banner">
<div className="woocommerce-marketing-introduction-banner-content">
<div className="woocommerce-marketing-introduction-banner-title">
{ __(
'Reach new customers and increase sales without leaving WooCommerce',
'woocommerce'
) }
</div>
<Flex
className="woocommerce-marketing-introduction-banner-features"
direction="column"
gap={ 1 }
expanded={ false }
>
<FlexItem>
<Flex>
<Icon icon={ trendingUp } />
<FlexBlock>
{ __(
'Reach customers on other sales channels',
'woocommerce'
) }
</FlexBlock>
</Flex>
</FlexItem>
<FlexItem>
<Flex>
<Icon icon={ megaphone } />
<FlexBlock>
{ __(
'Advertise with marketing campaigns',
'woocommerce'
) }
</FlexBlock>
</Flex>
</FlexItem>
<FlexItem>
<Flex>
<Icon
icon={
<img
src={ wooIconUrl }
alt={ __(
'WooCommerce logo',
'woocommerce'
) }
width="24"
height="24"
/>
}
/>
<FlexBlock>
{ __( 'Built by WooCommerce', 'woocommerce' ) }
</FlexBlock>
</Flex>
</FlexItem>
</Flex>
</div>
<div className="woocommerce-marketing-introduction-banner-illustration">
<img
src={ illustrationUrl }
alt={ __(
'WooCommerce Marketing introduction banner illustration',
'woocommerce'
) }
/>
</div>
</Card>
);
};

73
plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/illustration.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

1
plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/index.ts Normal file
View File

@ -0,0 +1 @@
export { IntroductionBanner } from './IntroductionBanner';

15
plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/woo.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 256 153" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<title>WooCommerce Logo</title>
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<path d="m23.759 0h208.38c13.187 0 23.863 10.675 23.863 23.863v79.542c0 13.187-10.675 23.863-23.863 23.863h-74.727l10.257 25.118-45.109-25.118h-98.695c-13.187 0-23.863-10.675-23.863-23.863v-79.542c-0.10466-13.083 10.571-23.863 23.758-23.863z" fill="#7f54b3"/>
<path d="m14.578 21.75c1.4569-1.9772 3.6423-3.0179 6.5561-3.226 5.3073-0.41626 8.3252 2.0813 9.0537 7.4927 3.226 21.75 6.7642 40.169 10.511 55.259l22.79-43.395c2.0813-3.9545 4.6829-6.0358 7.8049-6.2439 4.5789-0.3122 7.3886 2.6016 8.5333 8.7415 2.6016 13.841 5.9317 25.6 9.8862 35.59 2.7057-26.433 7.2846-45.476 13.737-57.236 1.561-2.9138 3.8504-4.3707 6.8683-4.5789 2.3935-0.20813 4.5789 0.52033 6.5561 2.0813 1.9772 1.561 3.0179 3.5382 3.226 5.9317 0.10406 1.8732-0.20813 3.4341-1.0407 4.9951-4.0585 7.4927-7.3886 20.085-10.094 37.567-2.6016 16.963-3.5382 30.179-2.9138 39.649 0.20813 2.6016-0.20813 4.8911-1.2488 6.8683-1.2488 2.2894-3.122 3.5382-5.5154 3.7463-2.7057 0.20813-5.5154-1.0406-8.2211-3.8504-9.678-9.8862-17.379-24.663-22.998-44.332-6.7642 13.32-11.759 23.311-14.985 29.971-6.1398 11.759-11.343 17.795-15.714 18.107-2.8098 0.20813-5.2033-2.1854-7.2846-7.1805-5.3073-13.633-11.031-39.961-17.171-78.985-0.41626-2.7057 0.20813-5.0992 1.665-6.9724zm223.64 16.338c-3.7463-6.5561-9.2618-10.511-16.65-12.072-1.9772-0.41626-3.8504-0.62439-5.6195-0.62439-9.9902 0-18.107 5.2033-24.455 15.61-5.4114 8.8455-8.1171 18.628-8.1171 29.346 0 8.013 1.665 14.881 4.9951 20.605 3.7463 6.5561 9.2618 10.511 16.65 12.072 1.9772 0.41626 3.8504 0.62439 5.6195 0.62439 10.094 0 18.211-5.2033 24.455-15.61 5.4114-8.9496 8.1171-18.732 8.1171-29.45 0.10406-8.1171-1.665-14.881-4.9951-20.501zm-13.112 28.826c-1.4569 6.8683-4.0585 11.967-7.9089 15.402-3.0179 2.7057-5.8276 3.8504-8.4293 3.3301-2.4976-0.52033-4.5789-2.7057-6.1398-6.7642-1.2488-3.226-1.8732-6.452-1.8732-9.4699 0-2.6016 0.20813-5.2033 0.72846-7.5967 0.93659-4.2667 2.7057-8.4293 5.5154-12.384 3.4341-5.0992 7.0764-7.1805 10.823-6.452 2.4976 0.52033 4.5789 2.7057 6.1398 6.7642 1.2488 3.226 1.8732 6.452 1.8732 9.4699 0 2.7057-0.20813 5.3073-0.72846 7.7008zm-52.033-28.826c-3.7463-6.5561-9.3659-10.511-16.65-12.072-1.9772-0.41626-3.8504-0.62439-5.6195-0.62439-9.9902 0-18.107 5.2033-24.455 15.61-5.4114 8.8455-8.1171 18.628-8.1171 29.346 0 8.013 1.665 14.881 4.9951 20.605 3.7463 6.5561 9.2618 10.511 16.65 12.072 1.9772 0.41626 3.8504 0.62439 5.6195 0.62439 10.094 0 18.211-5.2033 24.455-15.61 5.4114-8.9496 8.1171-18.732 8.1171-29.45 0-8.1171-1.665-14.881-4.9951-20.501zm-13.216 28.826c-1.4569 6.8683-4.0585 11.967-7.9089 15.402-3.0179 2.7057-5.8276 3.8504-8.4293 3.3301-2.4976-0.52033-4.5789-2.7057-6.1398-6.7642-1.2488-3.226-1.8732-6.452-1.8732-9.4699 0-2.6016 0.20813-5.2033 0.72846-7.5967 0.93658-4.2667 2.7057-8.4293 5.5154-12.384 3.4341-5.0992 7.0764-7.1805 10.823-6.452 2.4976 0.52033 4.5789 2.7057 6.1398 6.7642 1.2488 3.226 1.8732 6.452 1.8732 9.4699 0.10406 2.7057-0.20813 5.3073-0.72846 7.7008z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

3
plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
View File

@ -7,6 +7,7 @@ import { useUser } from '@woocommerce/data';
* Internal dependencies
*/
import { getAdminSetting } from '~/utils/admin-settings';
import { IntroductionBanner } from './IntroductionBanner';
import { Campaigns } from './Campaigns';
import { Channels } from './Channels';
import { InstalledExtensions } from './InstalledExtensions';
@ -37,6 +38,8 @@ export const MarketingOverviewMultichannel: React.FC = () => {
return (
<div className="woocommerce-marketing-overview-multichannel">
{ /* TODO: check wp_options and conditionally display introduction banner. */ }
<IntroductionBanner />
{ dataRegistered.length >= 1 && <Campaigns /> }
{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
<Channels