Subscription with gradient background

[onuro]

Screenshot:

<!-- wp:cover {"minHeight":60,"minHeightUnit":"vh","customGradient":"linear-gradient(45deg,rgb(198,136,187) 0%,rgb(242,156,115) 100%)","isDark":false,"align":"full","style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:40px;padding-bottom:40px;min-height:60vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient" style="background:linear-gradient(45deg,rgb(198,136,187) 0%,rgb(242,156,115) 100%)"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:image {"id":6062,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/vub7ymwqhum.png?w=300" alt="" class="wp-image-6062" width="150" height="150"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<h2 class="has-text-align-center" style="font-style:normal;font-weight:700">John Doe</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Subscribe to this newsletter for full of inspiring stories about the life and work of John Doe.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}},"color":{"background":"#a76b7d"},"border":{"radius":"10px"}}} -->
<div class="wp-block-group has-background" style="border-radius:10px;background-color:#a76b7d;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:jetpack/subscriptions {"buttonWidth":"","submitButtonText":"\u003cstrong\u003e Subscribe\u003c/strong\u003e","customButtonBackgroundColor":"#fffffa","customTextColor":"#3a2325","borderRadius":10,"borderWeight":0,"customBorderColor":"#fffffa","padding":15,"spacing":10,"className":"is-style-compact"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline is-style-compact">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" submit_button_text="&lt;strong&gt; Subscribe&lt;/strong&gt;" custom_background_button_color="#fffffa" custom_text_button_color="#3a2325" custom_font_size="16px" custom_border_radius="10" custom_border_weight="1" custom_border_color="#fffffa" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true" success_message="Success! An email was just sent to confirm your subscription. Please find the email now and click &#039;Confirm Follow&#039; to start subscribing."]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Preview: https://dotcompatterns.wordpress.com/?p=6048&preview=true

[alaczek]

I think this one needs more design work, it feels weaker than the other ones. The profile image doesn't go well with the background, the typography is too plain, lacks hierarchy, and the white subscribe button doesn't work well with the black text imo.

[onuro]

Thanks for the input. What do you think about this update? @alaczek @iamtakashi

[iamtakashi]

Thanks for the update. Here are a few thoughts that are worth exploring:

• I'd try the icon-only style for the social links
• I'd change the name to something a little more realistic
• I'd try matching the colour of the button and the icon-only social links.

[onuro]

Thanks Takashi. I wasn't sure about the color of the social icons, so I've made a couple variations. Can't pick one over another myself yet. Any favorites?

[iamtakashi]

If the green is darker, I will go for the first one. But if the green stays like that, I think we should go for the second.