Skip to content

Hero jumbotron component#72

Open
javiert-okta wants to merge 14 commits intoheader-componentfrom
hero-jumbotron-component
Open

Hero jumbotron component#72
javiert-okta wants to merge 14 commits intoheader-componentfrom
hero-jumbotron-component

Conversation

@javiert-okta
Copy link
Contributor

@javiert-okta javiert-okta commented Jan 5, 2026

By submitting a PR to this repository, you agree to the terms within the Auth0 Code of Conduct. Please see the contributing guidelines for how to create and submit a high-quality PR for this repo.

Description

The following PR adds the Hero Jumbotron component to render the main image on the homepage screen. The changes include:

  • Add a layout.modules.scss file to render elements correctly in the main tag
  • Update layout.tsx to render children after the headers
  • Added new Hero Jumbotron component with the necessary styling for mobile, tablet and desktop
  • Render the new component on the page.tsx file
  • Add the sass package
  • Add the new images for the hero jumbotron component
  • Deleted the images we are no longer using

Screenshots

  • Dark theme

Desktop:
image

Mobile:

image
  • Light theme

Desktop:
image

Mobile:

image

References

Link to Figma design

Testing

  • Check that the new Hero Jumbotron component matches the figma design (light/dark mode, mobile, tablet and desktop)
  • Verify the text is correct
  • Verify the images/fonts are loading correctly
  • Verify the headers still work as expected and do not mismatch with the new design

Checklist

  • I have added documentation for new/changed functionality in this PR or in auth0.com/docs
  • All active GitHub checks for tests, formatting, and security are passing
  • The correct base branch is being used, if not the default branch

@github-actions
Copy link

}

:global(body[data-theme="light"]) &:before {
background: url("https://cdn.auth0.com/website/passkeys-playground/assets/light.hero-banner-bg.png")
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do we get these images from the CDN instead of the /public/images folder?

backdrop-filter: blur(4rem);
border-radius: 0 0 1.5rem 1.5rem;

background-color: #191919;
Copy link
Contributor

Choose a reason for hiding this comment

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

Could be a css var

background-color: #191919;

:global(body[data-theme="light"]) & {
background-color: #f1f1f1;
Copy link
Contributor

Choose a reason for hiding this comment

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

Could be a css var

#4016a0 11.61%,
#3f59e4 100.07%
);
$color_bg_button_primary_hero:#1a1a1a;
Copy link
Contributor

Choose a reason for hiding this comment

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

Doesn't seem to be used. there's also --color_bg_button_primary_hero

#4016a0 11.61%,
#3f59e4 100.07%
);
$color_bg_button_primary_hero: #B0A5F1
Copy link
Contributor

Choose a reason for hiding this comment

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

Doesn't seem to be used, there's also --color_bg_button_primary_hero

Sign up for free to 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.

2 participants