fix(static-pages): polish marketing page layouts and styles#179
Merged
Conversation
The for-companies and for-projects CTA banners faded from pure white, making the gradient barely perceptible. Start from neutral-50 so the gray-to-accent-blue transition reads clearly. Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Apply the secondary serif font (Roboto Slab) to the project testimonial quote so it matches the display typography used in the section headings. Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
The 3-column grid left a single orphan card on the last row. Switch to a 1/2/4-column responsive grid (16 companies divide evenly at every breakpoint) and replace the per-index border math with a gap-px divider technique that adapts to any column count. Reduce the logo avatar from large to normal so the tighter 4-column cards are not cramped, and align the loading skeleton to the same grid. Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Make the About page Get Started button hug its content, drop the solid primary background for the transparent text-link style (matching the landing 'View all' link), and right-align it within the steps column. Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
nunoeufrasio
requested review from
dealako,
emlimlf,
lewisojile and
mlehotskylf
as code owners
Contributor
There was a problem hiding this comment.
Pull request overview
This PR applies visual polish and layout improvements across the static marketing pages (“For Companies”, “For Projects”, “About”), primarily via Tailwind class adjustments to better align typography, gradients, and responsive layout behavior.
Changes:
- Updated CTA banner gradients to start from
neutral-50(instead of pure white) for clearer gradient contrast. - Adjusted “For Projects” testimonial quote typography to use the secondary serif font.
- Reworked the “Companies already investing” section into a responsive 1/2/4-column grid with a
gap-pxdivider technique; reduced avatar size to fit the denser layout and aligned the loading skeleton to the same grid. - Updated the About page “Learn more for Projects” CTA to a transparent/text-link style and right-aligned placement.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/app/components/modules/static-pages/components/for-projects/testimonial.vue | Applies secondary font styling to testimonial quote text. |
| frontend/app/components/modules/static-pages/components/for-projects/cta.vue | Tweaks CTA banner gradient start color to neutral-50. |
| frontend/app/components/modules/static-pages/components/for-companies/cta.vue | Tweaks CTA banner gradient start color to neutral-50. |
| frontend/app/components/modules/static-pages/components/for-companies/companies.vue | Replaces index-based borders with responsive grid + divider technique; updates skeleton layout and avatar sizing. |
| frontend/app/components/modules/static-pages/components/about/get-started.vue | Switches CTA button to transparent style and right-aligns it within the steps column. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Address review comment from copilot[bot]: - companies.vue: replace the gap-px/background divider with per-cell right/bottom borders on a white container. The grid no longer relies on the company count being a multiple of the column count, so a variable-length list (e.g. once the API becomes a backend proxy) renders cleanly instead of showing empty gray divider cells. Reworded the comment that hard-coded the "16 companies" assumption. Resolves 1 review thread. Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Contributor
Author
Review Feedback AddressedCommit: 31f97ae Changes Made
Threads Resolved1 of 1 unresolved thread addressed in this iteration. |
mlehotskylf
approved these changes
Jun 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Visual polish across the static marketing pages (
for-companies,for-projects,about):neutral-50→ accent blue instead of pure white, so the gradient reads clearly (for-companies/cta.vue,for-projects/cta.vue).for-projects/testimonial.vue).largetonormalso the tighter 4-column cards aren't cramped, and the loading skeleton is aligned to the same grid (for-companies/companies.vue).about/get-started.vue).How
% 3border math in the companies grid with agap-px+ background-divider technique that adapts to any column count.lfx-buttontype swap (primary→transparent) for the About CTA.Testing
prettier --check,eslint, andtsc --noEmitall pass.Checklist