V2 Hotspots Block - Restyling

[DanielaPedrochevd]

Agile requirement
As a business owner, I want to display the cool technical characteristics of diesel powertrains so that users can learn more about them and as a way of promoting their interest.

Usage on current website: https://www.macktrucks.com/trucks/lr-series/features/, and on another site: https://info.macktrucks.com/futureofmd

Description
Create a redesigned block based on Hotspots that follows the design in figma and works in the following way:

• User can select any of the "+" icons and a card will open displaying information about the signalised part of the motor.
• The card displays a header, some text and a picture.
• Users can exit the card using the "x" button.
• Users can navigate between "hot spots" using the navigation arrows in the tab.
• Additionally, users can have a 360 look of the motor rotating it using the slider ?

Acceptance criteria:

• Making the hot spot from white to red
• Reformat the content card text layout
  • white background
  • order of card elements: title, smaller picture, description
  • navigation arrows, include numbering of the hot spot cards
  • card index i:n
    • i - no of the card the user clicked
    • n - total no of cards
  • close button has a background colour (background: #B3976B;)
    • Size should be 44 pixels, accessibility standards
  • Mobile tablet: Acts like a carousel to go from one element to another
  • Desktop design should be in place at 1024 pixels

Open questions:

• Do we need to keep the old and new design for hot spots (ex. dark background, white buttons) ?
  • Follow figma design, create copy of old block and make new version
• Is the FPO pink tag on the images with the image or needs to be added on top ?
  • for position only not needed
• If text in content cards it too long, need internal scroll
• Keep old version of PDP

Develop and then demo to Wendy

[DanielaPedrochevd]

@WendyKruger related to the last bullet point in the description, is that how the slider should work in the hot spots design? https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=1985-319847&mode=dev

[BeckyMedlin]

@DanielaPedrochevd Should we break this into two stories and handle the 360 view separately?

[WendyKruger]

@WendyKruger related to the last bullet point in the description, is that how the slider should work in the hot spots design? https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=1985-319847&mode=dev

yes, that is the intention.

@DanielaPedrochevd Should we break this into two stories and handle the 360 view separately?

yes, please split with the 360 as an enhancement,

[BeckyMedlin]

@shirin27 @mollyaljenkins This ticket needs to be split up. @WendyKruger would like the current block styling changed first. Let's refine these into smaller stories. Thank you!

[shirin27]

Kamino cloned this issue to hlxsites/vg-macktrucks-com