...
In Sanity, in the path,
RBI Sanity Studio > Marketing Content > Components > Homepage Component > Hero
there should be added a toggle to show/hide theComplementary CTA
sub-sectionThe toggle should be named
Secondary CTA
The current sub-section
Complementary CTA
should be renamed toSecondary 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
It should not be a permanent LD flag
Designs:
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2837%3A83001&t=6vGuil8CU4c3vOzP-1
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1830%3A84009&t=zNRPSr8NnlQB10C0-1
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=217%3A95839&t=DNksX5RjI3ZEfBeU-1
...
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
It should not be a permanent LD flag
Designs:
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74808&t=6vGuil8CU4c3vOzP-1
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A69463&t=zNRPSr8NnlQB10C0-1
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105588&t=DNksX5RjI3ZEfBeU-1
...
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
It should not be a permanent LD flag
Hero Background Color Options
...
The
Reversed
toggle should be renamed toBackground 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 reducedThe 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
It should not be a permanent LD flag
Designs:
Full-Color Background:
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74806&t=6vGuil8CU4c3vOzP-1
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68295&t=zNRPSr8NnlQB10C0-1
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1
Split Background:
...