ENG: Cross-stage feature discovery moment, part 2

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

All the stuff that wasn’t done as part of ENG: MVC Create Cross-stage feature discovery m... (#348494 - closed).

Design specs

Page as it is today	Page after completion of this issue

Vertically sliced iterations

1. Add the semi-sticky footer

   • Add a footer to the layout (might need to create your own at this point)
     • Make it semi-sticky to the viewport (i.e. if the content is less than the height of the viewport, the foot sticks to the very bottom of the viewport, if the content is greater than the height of the viewport, the footer flows with the content)
   • Add the footer title: “Free 30 days trial”
   • Add the footer copy: “Try everything for free. No credit card required.”
   • Reproduce the CTAs from the header into the footer
     • Double-check that it works well to have multiple versions of the hand_raise_lead_button.vue component/app on the page
   • Update the view specs
   • Update the feature specs to click on CTAs in the header & in the footer to make sure both places work as expected
2. Add social proof sections

   • Add the copy to the header area: “Trusted by enterprises, loved by developers”
   • Add the chosen logos to the header: hotjar, siemens, wish, & KnowBe4
   • Add the “How they use GitLab.” section
     • Add the title: “How they use GitLab.”
     • Create data objects for the three examples
     • Figure out where/how to get the color versions of the logos (this might be the default, actually)
   • Style it all up
   • Update the view specs
3. Create special styles for the mobile version of the “Access advanced features.” section (if still desired)

   • We want a single row which scrolls horizontally
   • Test & debug the horizontal scrolling effect in multiple browsers

---

Related to #351851 (closed) & #348494 (closed).