Skip to content

feat(redesign): Homepage Features and Banner component - #2204

Merged
g-francesca merged 36 commits into
redesignfrom
redesign-homepage-2
Mar 4, 2026
Merged

feat(redesign): Homepage Features and Banner component#2204
g-francesca merged 36 commits into
redesignfrom
redesign-homepage-2

Conversation

@g-francesca

@g-francescag-francesca commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

Preview
Note: PR created as draft while merging #2203 (since this branch was created from redesign-homepage branch)


This PR includes new homepage sections:

  • Features section: new Features pattern component displaying a 4-card grid (Performance, APIs, Middleware, Web Applications) with a responsive layout (stacked on mobile, side-by-side title/cards on desktop). Includes a new Card primitive and corresponding i18n strings.
  • Top Banner component — new Banner pattern component for full-width notification banners. Supports info/warning variants, optional date-range visibility (startDate/endDate), and optional dismiss-to-localStorage behaviour. Dismissed state is applied via an inline <style> injected before first paint to prevent layout shift on load.

Other changes

  • Added --blue-975 color token and updated --color-bg-info / --color-border-info dark-mode values for better contrast.
  • Refactored the inline theme-detection script in Layout.astro for readability; extended it to hide previously-dismissed banners before paint.

Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
have the right to submit it under the open source license
indicated in the file; or

(b) The contribution is based upon previous work that, to the best
of my knowledge, is covered under an appropriate open source
license and I have the right under that license to submit that
work with modifications, whether created in whole or in part
by me, under the same open source license (unless I am
permitted to submit under a different license), as indicated
in the file; or

(c) The contribution was provided directly to me by some other
person who certified (a), (b) or (c) and I have not modified
it.

(d) I understand and agree that this project and the contribution
are public and that a record of the contribution (including all
personal information I submit with it, including my sign-off) is
maintained indefinitely and may be redistributed consistent with
this project or the open source license(s) involved.

@netlify

netlifyBot commented Mar 3, 2026

Copy link
Copy Markdown

Deploy Preview for expressjscom-preview ready!

NameLink
🔨 Latest commit475d060
🔍 Latest deploy loghttps://app.netlify.com/projects/expressjscom-preview/deploys/69a807323b140f0008b467d6
😎 Deploy Previewhttps://deploy-preview-2204--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (🟢 up 4 from production)
Accessibility: 100 (🟢 up 13 from production)
Best Practices: 100 (no change from production)
SEO: 100 (🟢 up 6 from production)
PWA: 80 (🟢 up 50 from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@socket-security

socket-securityBot commented Mar 3, 2026

Copy link
Copy Markdown

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

ActionSeverityAlert (click "▶" to expand/collapse)
WarnHigh
Obfuscated code: npm vite is 91.0% likely obfuscated

Confidence: 0.91

Location:Package overview

From:astro/package-lock.jsonnpm/astro@5.18.0npm/vite@6.4.1

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/vite@6.4.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

bjohansebas
bjohansebas previously approved these changes Mar 4, 2026

@bjohansebasbjohansebas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@bjohansebas
bjohansebas dismissed their stale reviewMarch 4, 2026 03:48

Lol, I didn’t mean to approve this PR, it was the other one, haha

Comment threadastro/src/pages/[lang]/index.astro Outdated
</Container>
<!-- TODO: Banner added for demo purposes, will be removed before release, or replaced with a new one -->
<Banner
id="express-5-1-0-lts"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this ID for? I don’t think it’s necessary, and we’ll most likely forget to update it, so it’s probably better not to have it.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bjohansebas When the user dismisses the banner, it writes banner-dismissed-{id} to localStorage so the banner stays hidden in this case. Since the Banner is optionally dismissible, I reviewed the Banner type so that you don't need to pass the id in case dismissible is false (which is the default).

</li>
</ul>
</Container>
<!-- TODO: Banner added for demo purposes, will be removed before release, or replaced with a new one -->

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will be replaced with the blog post about the redesign

@bjohansebasbjohansebas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those are the only comments I have about the implementation :)

@socket-security

socket-securityBot commented Mar 4, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Addednpm/​typescript-eslint@​8.53.11001007496100
Addednpm/​typescript@​5.9.31001009010090

View full report

@g-francesca
g-francesca marked this pull request as ready for review March 4, 2026 10:07
@g-francesca
g-francesca requested a review from a team as a code ownerMarch 4, 2026 10:07

@ShubhamOulkarShubhamOulkar left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@g-francesca
g-francesca merged commit c62d32b into redesignMar 4, 2026
10 checks passed
@ShubhamOulkar
ShubhamOulkar deleted the redesign-homepage-2 branch March 4, 2026 12:27
@bjohansebasbjohansebas mentioned this pull request Apr 4, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@g-francesca@ShubhamOulkar@bjohansebas