Add introduction banner card to marketing page.
This commit is contained in:
Gan Eng Chin
parent
1d7b663186
commit
b6eec1e1bf
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
export { IntroductionBanner } from './IntroductionBanner';
|
||||||
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -7,6 +7,7 @@ import { useUser } from '@woocommerce/data';
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { getAdminSetting } from '~/utils/admin-settings';
|
import { getAdminSetting } from '~/utils/admin-settings';
|
||||||
|
import { IntroductionBanner } from './IntroductionBanner';
|
||||||
import { Campaigns } from './Campaigns';
|
import { Campaigns } from './Campaigns';
|
||||||
import { Channels } from './Channels';
|
import { Channels } from './Channels';
|
||||||
import { InstalledExtensions } from './InstalledExtensions';
|
import { InstalledExtensions } from './InstalledExtensions';
|
||||||
|
|
@ -37,6 +38,8 @@ export const MarketingOverviewMultichannel: React.FC = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="woocommerce-marketing-overview-multichannel">
|
<div className="woocommerce-marketing-overview-multichannel">
|
||||||
|
{ /* TODO: check wp_options and conditionally display introduction banner. */ }
|
||||||
|
<IntroductionBanner />
|
||||||
{ dataRegistered.length >= 1 && <Campaigns /> }
|
{ dataRegistered.length >= 1 && <Campaigns /> }
|
||||||
{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
|
{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) && (
|
||||||
<Channels
|
<Channels
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue