Versions Compared

Old Version 5

changes.mady.by.user de Sousa Santos, Rodrigo

Saved on

compared with

New Version 6

changes.mady.by.user Hainzenreder, Diego

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Problem statement

Acceptance criteria

Make Secondary CTA Optional

  • In Sanity, in the path, RBI Sanity Studio > Marketing Content > Components > Homepage Component > Hero there should be added a toggle to show/hide the Complementary CTA sub-section

    • The toggle should be named Secondary CTA

    • The current sub-section Complementary CTA should be renamed to Secondary CTA Configuration

    • Everything else should be kept the same as today

    • The toggle should be on by default so it doesn’t break existing markets currently using the secondary CTA

  • When the secondary CTA toggle is off, the height of the hero should be reduced/adjusted to eliminate the space occupied by the secondary CTA

Designs:

Expand the Width of the Primary CTA

  • On desktop and tablet breakpoints, when the hero layout is side by side, and the secondary CTA toggle is off, the primary CTA should expand horizontally to the entire width of its parent container

Designs:

Resize Hero According to Image Size

  • Images uploaded to Sanity’s Hero Component should fit horizontally the image container of the hero and proportionally resize vertically

    • E.g.

      • If the container is 300 px wide and an image of 1000 x 1000 px is uploaded, the image displayed should be 300 x 300 px

      • If the container is 300 px wide and an image of 600 x 900 px is uploaded, the image displayed should be 300 x 450 px

      • If the container is 300 px wide and an image of 200 x 300 px is uploaded, the image displayed should be 200 x 300 px

  • The hero component should adjust its total height according to the height of the image uploaded

Hero Background Color Options

Context

  • Today in Sanity’s Hero Component there’s a Reversed option that can be toggled on that enables a background color and changes the texts and buttons to a light color

What Needs to Change

  • The Reversed toggle should be renamed to Background Color

  • The description of the toggle should be updated to “Turn this on to add and choose a background color for the homepage Hero.”

  • When the Background Color toggle is on it should show:

    • A dropdown to choose the background color with the following options:

      • Burger King:

        • Brown (default option)

          • Elements over this background should be displayed in their reversed (light color) version

        • Red

          • Elements over this background should be displayed in their reversed (light color) version

        • Green

          • Elements over this background should be displayed in their reversed (light color) version

        • Orange

        • Yellow

      • Popeyes:

        • Orange (default option)

          • Elements over this background should be displayed in their reversed (light color) version

        • Purple

          • Elements over this background should be displayed in their reversed (light color) version

      • Firehouse Subs

        • Red (default option)

          • Elements over this background should be displayed in their reversed (light color) version

        • Yellow

    • Another toggle named Split Background

      • The Split Background toggle should have the following description: “Turn this on to split the background color.”

      • By turning the Split Background toggle on the background color area should be reduced

        • The Heading and Sub-Heading should be displayed over the colored background

        • The CTAs should be displayed below the colored background area

          • The background color of the bottom portion should not be configurable

Designs:

Success metrics

Solution

...