feat(cxl-ui): cxl-featured-course-card v2

[HenerHoop]

https://app.clickup.com/t/86aya2ta8

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	63.46 KB (+0.29% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	27.65 KB (+0.37% 🔺)
packages/cxl-ui/pkg/dist-web/vendor.js	135.58 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	239.71 KB (+0.12% 🔺)

[HenerHoop]

I tested it on WPS on conversionxl/cxl-wpstarter#229 branch and found few glitches.

1. Short vs long content on slide

2. Long content looks bad on certain screen size

3. Header section without dark background looks bad

@pawelkmpt

1. What can we do here? With this task, the categories area should become smaller.
2. I see a slightly different view with the same dimensions. The mobile layout is kept until the large breakpoint.
3. "Make the header grey - ignore the changes inside the header for now (these are still being iterated on)". It seems like it's not working at the moment, or should I make more changes within the header as well?

[pawelkmpt]

"Make the header grey - ignore the changes inside the header for now (these are still being iterated on)". It seems like it's not working at the moment, or should I make more changes within the header as well?

I think @heshfekry wanted to share that we're still iterating on the new look of this section (bigger cards) and didn't expect that gray background would make header section look bad.

Please just make it look decent with minimal effort. Get inspired by the screenshot in the card, e.g. "Continue" part could be simply tweaked.

[pawelkmpt]

Adjust tag card:

- Featured-Course
+ Featured Course

[pawelkmpt]

2. I see a slightly different view with the same dimensions. The mobile layout is kept until the large breakpoint.

It looks better now. Maybe missed something in setup before.

[pawelkmpt]

1. What can we do here? With this task, the categories area should become smaller.

It more about the course title. I think we should think about how to handle such differences.

[pawelkmpt]

Black button on the black background causes weird padding on the left. Please remove it.

[pawelkmpt]

@HenerHoop @heshfekry I know why it looks so ugly on mobile:

• :host .container .name -> font-size should be 22px according to the design (var(--lumo-font-size-xl))
• make :host .content-before .instructor-image max-height: calc(var(--lumo-space-xl)*4); on mobile

It will result in:

[HenerHoop]

Adjust tag card:

- Featured-Course
+ Featured Course

@pawelkmpt @freudFlintstone Do you know why we use the theme value as the first tag in the _renderHeaderTags method? Using 'Featured courses' with a space means that styles are targeted in CSS based on 'courses'.

[HenerHoop]

@pawelkmpt Regarding the theme, one question to which you or Raphael might be able to answer. I also made some improvements to the header styles.

[pawelkmpt]

@pawelkmpt @freudFlintstone Do you know why we use the theme value as the first tag in the _renderHeaderTags method? Using 'Featured courses' with a space means that styles are targeted in CSS based on 'courses'.

It corresponded with initial design.

[pawelkmpt]

@heshfekry do you have any suggestions to colors of header section?

[heshfekry]

@heshfekry do you have any suggestions to colors of header section?

Ye drop the borders (including the red, as that is hover state) and introduce shadows like here.

Add white box around roadmap component.

Make 2 CTAs white. with black text.

Basically match this design, without the red border.