Homepage: Showcase CTA Improvement

[marko-srb]

Context:
As the launching of Showcase v2 is getting closer, we are envisioning updating a CTA section on the hompage as well, in order to follow the updated content.

This is a light update suggestion, without major layout changes.

Here is the Figma link.

Here's a comparative view of live section, next to the suggested changes. These should include:

1. Copy edits (so 'starry elements' of the new showcase are present here, and hopefully inviting)
2. New website selection/screenshots
3. New logos (some of the old ones aren't on WP anymore - Vogue, for example)

Note. Ideal behavior on the mobile is to hide first row of dots. If not possible, can we hide dot-starry-pattern once the responsive size gets to mobile?

CC: @thetinyl @jasmussen @ndiego

[marko-srb]

There are some title ideas in the file itself.

@thetinyl would you mind trying something along these lines for the title, and adjusting the paragraph to connect?

[ndiego]

I think the dot layout should be relatively easy to accomplish. Here is some demo code:

<!-- wp:group {"align":"full","style":{"spacing":{"padding":<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-contrast-background-color has-background" style="padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:cover {"url":"https://cldup.com/o3gBGnbYgL.svg","id":422,"isRepeated":true,"dimRatio":0,"customOverlayColor":"#FFF","minHeight":124,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"className":"has-dots","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignwide is-repeated has-custom-content-position is-position-top-left has-dots" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:124px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#FFF"></span><div role="img" class="wp-block-cover__image-background wp-image-422 is-repeated" style="background-position:50% 50%;background-image:url(https://cldup.com/o3gBGnbYgL.svg)"></div><div class="wp-block-cover__inner-container"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#3858e9"}},"fontSize":"medium"} -->
<div class="wp-block-button has-custom-font-size has-medium-font-size"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#3858e9">Find Inspiration</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

It just needed a custom CSS class on the Cover block. This might need some fine tuning, but I used:

.has-dots .wp-block-cover__image-background {
    background-position: 0 27px !important;
    background-repeat: repeat-x;
}

[thetinyl]

Thanks @marko-srb. I've shared my copy suggestions in Figma. I actually think the current headline (with a conceptual tie-in update) is pretty strong already.

I have some thoughts around the company logos based on your updated version (this is assuming these are your suggested replacements):

• Sony Music is no longer in the showcase, so we should replace... some options could be: Harvard, NYT Company, TechCrunch
• This is a personal opinion, but do we think it could be worth swapping some of the logos that are really just WP blogs (Spotify, Meta, Microsoft) for companies that are using WP for their whole site? There are a few other brands that are relatively well-known (I think) in different industries that could work: noma, Momofuku, Capgemini, for example. Not saying we should replace all those big tech names, but it feels strange to be leaning on a brand only because their blog is powered by WP.

[ndiego]

I actually think the current headline (with a conceptual tie-in update) is pretty strong already.

I agree. While I like the starry theme in concept/visually, the current headline is straight to the point. The Showcase demonstrates the possibilities that WordPress provides. While we could have a bit more fun with it, I do think the main headline should be super clear.

[marko-srb]

@thetinyl

Thanks for the copy edits and the logo suggestions.

Copy is ready. Logos selection is a bit tricky thing. When I look at previous solution, there were only famous brands there. Although I get the concept behind

swapping some of the logos that are really just WP blogs (Spotify, Meta, Microsoft) for companies that are using WP for their whole site

I don't think adding non-recognizable brand logos there is good. Who'll recognize Noma? Momofuku? And in general, logos are reserved here, and generally as a signal of the logos you can recognize. I think we can swap, but I am not sure those would be the right ones.

I'll send a suggestion shortly.

Thank you!

[marko-srb]

How about this?

@thetinyl let me know your thoughts about it, with context of my previous comment.

CC: @jasmussen @ndiego

[ndiego]

I defer to @thetinyl on copy, but I think this looks great!

[thetinyl]

Looks good with the updated language, thanks!

I don't think adding non-recognizable brand logos there is good. Who'll recognize Noma? Momofuku? And in general, logos are reserved here, and generally as a signal of the logos you can recognize. I think we can swap, but I am not sure those would be the right ones.

I can definitely see where you're coming from. I'll just add that there are some superstar brands in other industries (I used restaurants/food as an example) that may not be known for everyone, but will be very well known in those industries and anyone who follows them/aspires to be like them. Just thinking about the mandate from Matt about folks seeing themselves in the Showcase.

I think we're fine with what's there at the moment.

[ndiego]

Editor demo (frontend will look like the current layout when synced)

@marko-srb @thetinyl @eidolonnight @jasmussen In the interest of time, I have updated the logos, copy, and graphics using the current layout. This way, no code changes are required other than the sync to the theme.

Are you comfortable with this approach? We can then add the dots post-launch.

[thetinyl]

Copy-wise, looks good to me. Thanks for doing that!

[jasmussen]

Looks good.

[marko-srb]

@ndiego

We have a slight issue with the logos spacing/padding on mobile.

Let me know if I should open a separate issue for this. Thanks.

[ryelle]

@WordPress/meta-design @thetinyl @ndiego Is there anything else that needs to happen here? It looks like the logo issue above is fixed now:

[thetinyl]

The logo adjustment was likely a result of needing to swap Spotify out for something else.

As far as I'm aware, from a copy/content perspective, nothing more is needed.

[ndiego]

Yeah, I think we can close.