Add federal landing site

@luke Could you take a look at the implementation please? Also I'm missing the background for the landing header

Thanks!

assigned to @luke

changed the description

@jivanvl sorry but can we pls change the page title to "GitLab for the Public Sector" To me, that reads better than what we have currently.

@amara Edited and pushed a rebased commit

Thanks @jivanvl I will review the page shortly. You can find the icon pattern for the header background here.

Check out https://about.gitlab.com/installation/ to reference implementation, fill color, and gradient color for the header background.

@jivanvl leaving my feedback notes here in reference to the Sketch preview that will have all of the correct specs.

GENERAL

All body text is font-color #444444
Need to add left/right padding on smaller browser widths (i.e. tablet / mobile)
Can we restrict the page layout to a max width of 1170px?

HEADER

For Bring the power of Git and CI/CD to your federal, state, and education IT teams. font size should be 22px.

CTA SECTION

For the <p> text, can we include it all in one <p> tag with a line break between the two statements?

FEATURES SECTION

.characteristic-container should have a top-border color of #d7d7d7.
It also feels like the columns start to get narrow pretty quick, and jump to a single column too early — single column should only appear on mobile. Screenshots: Screen_Shot_2017-06-05_at_2.00.45_PM // Screen_Shot_2017-06-05_at_2.00.50_PM
point-title font-color is #6b4fb9
point-title font-size is 20px
padding for the top of the section should be 80px.

LOGO SECTION

font-weight: 400 for Join these public sector organizations and start collaborating on code. text.
As you scale down the browser width some of the logos start to overlap.
The logos also move to single column too soon, mobile should be the only layout the are single column.
Need to add extra padding above and below logos on mobile.
Also check the width/height of the logos in the Sketch preview, some are intentionally smaller than the 76px height or 300px width.
The GSA and SEWP V logos are also intentionally smaller (all SVGs should have exported at the correct size.
GSA and SEWP V logos aren't centered on mobile like the others.
font-weight: 500 for Available on the GSA Schedule and NASA SEWP V. text.

CONTACT SECTION

Starting to get some overlap of the form and information on the right: Screen_Shot_2017-06-05_at_3.11.27_PM
Also as we get down to tablet / mobile width there are some padding issues, and I would suggest centering the entire form here: Screen_Shot_2017-06-05_at_3.13.18_PM

I think that's everything, please ping me with any questions or concerns. Great job putting together the initial layout!

@luke one question, the font sizes on really small screens for the landing page look really large, what sizes would you recommend?

@luke Also just updated the site, can you check it out, see if I'm missing anything

Thanks!

Thanks @jivanvl and sorry for the delay reviewing the updates — I plan to review the page first thing today.

As far as font sizes for smaller screens, I would suggest referencing https://about.gitlab.com/installation/. They seem to work pretty well on that page, and this way we are consistent throughout the site.

@jivanvl there are just a handful of edits to polish up the responsive layout, otherwise we are really close to wrapping this up. Let me know if you have questions on any of these.

CTA SECTION

Looks like we lost some of the padding below the Contact Us button on mobile, seems to be ok when the screen size is greater than ~750px wide.

FEATURES SECTION

It might just be me, but it looks like spacing between rows isn't quite consistent. I envisioned 80px spacing from the bottom of the tallest text box in the row to the top of the next row, hopefully this screenshot explains it better than I just did

On mobile there also seems to be inconsistent space between text blocks:

If we can make it so the rows stay evenly aligned across with each other at smaller screen sizes that would be great:

LOGO SECTION

Still seeing some logo overlap at smaller screen sizes:

Is it possible to have the logos arranged in two columns at this screen size? And show them in one column on mobile only? Also spacing between logos (here and on mobile) feels a little tight:

CONTACT FORM SECTION

Still seeing some text overlap with the form at smaller screen sizes — if we need to drop the info text below at this breakpoint I would be ok with that:

@amara should the final url be /public-sector instead of /federal to match the header messaging?

I suggest /public-sector as its more inclusive than /federal

@pauldalmeida do you agree?

Yes, I agree . Thanks

@luke

Is it possible to have the logos arranged in two columns at this screen size? And show them in one column on mobile only? Also spacing between logos (here and on mobile) feels a little tight

I'm using 20px padding to separate the logos on mobile, what's the size that you would recommend?

assigned to @jivanvl

@jivanvl let's go with 40px padding for the logos on mobile. Thanks!

@luke One question, so far I solved the issue of the form overlapping by sending the federal information to the next row, due to fact that Marketto wants the form at a minimum width of 690px, what do you think?

It sort of looks like this, but I'm unsure if I should center the information

As for the rest it's pretty much solved (or so I believe)

added 457 commits

0ed54305...1dada9d3 - 453 commits from branch master
542b6208 - Added federal landing site
a65ce6c6 - correct scss-linter errors
3e643380 - Adjusted styling for mobile and corrected paddings and margins
1a70a80a - Moved from /federal to /public-sector

Compare with previous version

@luke Can you take a look once you get a chance? Also left you a comment

Thanks!

assigned to @luke

@jivanvl thanks for making those improvements, looks like you resolved everything.

Sending the federal info to the next row works, but can we left align it with the edge of the form? On mobile it's aligned, but it's a bit off on screen sizes larger than that.

Once this is resolved I think we are ready for review and merge!

With the page title updated to "GitLab for Public Sector", the contact sales section should update to "Contact GitLab's Public Sector Sales Team", or just "Contact GitLab's Sales Team". If I'm an IT buyer for State or Local government or in Education, it would be weird to read this page and then end at "Contact Federal Sales".

Great catch @courtlandia! @amara do you have a preference for either "Contact GitLab's Public Sector Sales Team", or "Contact GitLab's Sales Team"?

I agree! It should be "Contact GitLab's Public Sector Sales Team"

@luke I can commit that change.

Can you confirm that we already changed the URL to be /public-sector

NVM! I see that Jose committed that change already!

assigned to @jivanvl

@jivanvl were you able to resolve https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/6301#note_32128589?

Thanks @amara for updating the section with a commit

@luke Not yet, I'm planning to tackle this in a couple of hours as I got one thing in my plate right now, apologies

Hmm the build failed. I just retried it. Fingers crossed that it works!

added 177 commits

1c14e3f9...18505f2e - 171 commits from branch master
4812efeb - Added federal landing site
6d81ef6e - correct scss-linter errors
132786a4 - Adjusted styling for mobile and corrected paddings and margins
c7cf0af4 - Moved from /federal to /public-sector
0410e1fa - Update CTA section
64317ed2 - Corrected margin for sm screens at the .fed-info section

Compare with previous version

@luke Sorry I took so long to get back to this, just pushed the missing piece of the puzzle

Should I ask someone for a FE maintainer to review it?

assigned to @luke

@jivanvl no worries, everything looks good!

@iamphill or @annabeldunstone can one of you review and merge? Thanks!

removed assignee

assigned to @jivanvl

resolved all discussions

added 56 commits

64317ed2...fd44c59c - 49 commits from branch master
8b3722a0 - Added federal landing site
4091158c - correct scss-linter errors
629d4b29 - Adjusted styling for mobile and corrected paddings and margins
dc5e1bee - Moved from /federal to /public-sector
bb6488ab - Update CTA section
4a9cce39 - Corrected margin for sm screens at the .fed-info section
bfad7fa4 - Removed unnecesary wrapper

Compare with previous version

added 56 commits

64317ed2...fd44c59c - 49 commits from branch master
8b3722a0 - Added federal landing site
4091158c - correct scss-linter errors
629d4b29 - Adjusted styling for mobile and corrected paddings and margins
dc5e1bee - Moved from /federal to /public-sector
bb6488ab - Update CTA section
4a9cce39 - Corrected margin for sm screens at the .fed-info section
bfad7fa4 - Removed unnecesary wrapper

Compare with previous version

@iamphill Improved the MR based on your comments, thanks for reviewing!

assigned to @iamphill

added 56 commits

64317ed2...fd44c59c - 49 commits from branch master
8b3722a0 - Added federal landing site
4091158c - correct scss-linter errors
629d4b29 - Adjusted styling for mobile and corrected paddings and margins
dc5e1bee - Moved from /federal to /public-sector
bb6488ab - Update CTA section
4a9cce39 - Corrected margin for sm screens at the .fed-info section
bfad7fa4 - Removed unnecesary wrapper

Compare with previous version

added 56 commits

64317ed2...fd44c59c - 49 commits from branch master
8b3722a0 - Added federal landing site
4091158c - correct scss-linter errors
629d4b29 - Adjusted styling for mobile and corrected paddings and margins
dc5e1bee - Moved from /federal to /public-sector
bb6488ab - Update CTA section
4a9cce39 - Corrected margin for sm screens at the .fed-info section
bfad7fa4 - Removed unnecesary wrapper

Compare with previous version

Got conflicts

assigned to @jivanvl

added 38 commits

bfad7fa4...e08401a3 - 31 commits from branch master
49018ffb - Added federal landing site
3f497407 - correct scss-linter errors
d314822b - Adjusted styling for mobile and corrected paddings and margins
ee195091 - Moved from /federal to /public-sector
73ae0337 - Update CTA section
c7dbad53 - Corrected margin for sm screens at the .fed-info section
aa2bd261 - Removed unnecesary wrapper

Compare with previous version

added 1 commit

e30031df - Removed unnecesary wrapper

Compare with previous version

@iamphill Fixed conflicts

assigned to @iamphill

merged

mentioned in commit 32b0fd9d

Admin message

Admin message

Add federal landing site

Screenshots

Merge request reports

Activity