Add January Bump card to My Home screen

client/my-sites/customer-home/cards/constants.js

@@ -32,6 +32,7 @@ export const SECTION_BLOGGING_PROMPT = 'home-section-blogging-prompt';
 export const SECTION_BLOGANUARY_BLOGGING_PROMPT = 'home-section-bloganuary-blogging-prompt';
 export const SECTION_MANAGE_SITE = 'home-section-manage-site';
 export const TASK_AFFILIATES = 'home-task-affiliates';
+export const TASK_JANUARY_BUMP = 'home-task-january-bump';
 export const TASK_CONNECT_ACCOUNTS = 'home-task-connect-accounts';
 export const TASK_EARN_FEATURES = 'home-task-earn-features';
 export const TASK_GO_MOBILE_ANDROID = 'home-task-go-mobile-android';

client/my-sites/customer-home/cards/tasks/january-bump/index.jsx

@@ -0,0 +1,33 @@
+import { localizeUrl } from '@automattic/i18n-utils';
+import { useTranslate } from 'i18n-calypso';
+import januaryBumpIllustration from 'calypso/assets/images/customer-home/illustration--january-bump.png';
+import { TASK_JANUARY_BUMP } from 'calypso/my-sites/customer-home/cards/constants';
+import Task from 'calypso/my-sites/customer-home/cards/tasks/task';
+
+import './style.scss';
+
+const JanuaryBump = () => {
+	const translate = useTranslate();
+
+	const title = translate( 'Start That ‘Someday Project’ Now' );
+	const description = translate(
+		'Whatever your New Year’s resolutions are—from starting a newsletter to taking on the world with a bold new business—tap into the powerful platform that’s here to help you make it happen sooner.'
+	);
+
+	return (
+		<Task
+			customClass="task__january-bump"
+			title={ title }
+			description={ description }
+			actionText={ translate( 'Start today' ) }
+			actionUrl={ localizeUrl(
+				'https://wordpress.com/pricing/start-your-someday-project?ref=my-home-card'
+			) }
+			completeOnStart={ false }
+			illustration={ januaryBumpIllustration }
+			taskId={ TASK_JANUARY_BUMP }
+		/>
+	);
+};
+
+export default JanuaryBump;

client/my-sites/customer-home/cards/tasks/january-bump/style.scss

@@ -0,0 +1,45 @@
+.task {
+	&.task__january-bump {
+		position: relative;
+
+		&::before,
+		&::after {
+			content: "";
+			position: absolute;
+			display: block;
+			z-index: -1;
+		}
+		&::before {
+			width: 654px;
+			border-radius: 100%;
+			height: 654px;
+			background: #3858e9;
+			filter: blur(81px);
+			top: 50%;
+			left: 50%;
+			transform: translate(5%, 5%);
+		}
+
+		&::after {
+			background-image: url(calypso/assets/images/customer-home/plus-pattern-white.png);
+			top: 0;
+			left: 0;
+			width: calc(100% + 32px);
+			height: calc(100% + 32px);
+			background-size: 14px;
+		}
+
+		.task__actions {
+			flex-direction: column;
+			display: inline-flex;
+		}
+		.task__skip {
+			text-align: left;
+		}
+
+		.task__illustration {
+			width: 44%;
+			max-width: 272px;
+		}
+	}
+}

client/my-sites/customer-home/locations/card-components.ts

@@ -26,6 +26,7 @@ import {
 	SECTION_BLOGANUARY_BLOGGING_PROMPT,
 	SECTION_LEARN_GROW,
 	TASK_AFFILIATES,
+	TASK_JANUARY_BUMP,
 	TASK_CONNECT_ACCOUNTS,
 	TASK_DOMAIN_UPSELL,
 	TASK_EARN_FEATURES,
@@ -78,6 +79,7 @@ import EarnFeatures from 'calypso/my-sites/customer-home/cards/tasks/earn-featur
 import Fiverr from 'calypso/my-sites/customer-home/cards/tasks/fiverr';
 import GoMobile from 'calypso/my-sites/customer-home/cards/tasks/go-mobile';
 import GoogleDomainOwners from 'calypso/my-sites/customer-home/cards/tasks/google-domain-owners';
+import JanuaryBump from 'calypso/my-sites/customer-home/cards/tasks/january-bump';
 import Marketplace from 'calypso/my-sites/customer-home/cards/tasks/marketplace';
 import NoticeHomeLimitedTimeOfferCoupon from 'calypso/my-sites/customer-home/cards/tasks/notice-home-limited-time-offer-coupon';
 import PromotePost from 'calypso/my-sites/customer-home/cards/tasks/promote-post';
@@ -110,6 +112,7 @@ const PRIMARY_CARD_COMPONENTS: CardComponentMap = {
 	[ NOTICE_SITE_LAUNCH_SELLER_UPSELL ]: SiteLaunchSellerUpsell,
 	[ NOTICE_STAGING_SITE ]: StagingSiteNotice,
 	[ TASK_AFFILIATES ]: Affiliates,
+	[ TASK_JANUARY_BUMP ]: JanuaryBump,
 	[ TASK_CONNECT_ACCOUNTS ]: ConnectAccounts,
 	[ TASK_DOMAIN_UPSELL ]: DomainUpsell,
 	[ TASK_EARN_FEATURES ]: EarnFeatures,

client/my-sites/customer-home/style.scss

@@ -308,10 +308,6 @@ body.is-section-home.theme-default.color-scheme {
 		@include break-small {
 			margin: 32px;
 		}
-
-		@media (min-width: ($break-wide + 1)) {
-			margin: 0 32px 32px;
-		}
 	}
 
 	// Extend the checklist to the edge of the primary content area