Skip to content

fix(landing): improve responsive hero and plugin discovery #425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
777genius merged 10 commits into from
Oct 13, 2026
Merged

fix(landing): improve responsive hero and plugin discovery #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e8679f9
fix(landing): improve responsive hero and plugin discovery
777genius Oct 12, 2026
169ee7c
fix(landing): compact hero steps and show demo preview
777genius Oct 12, 2026
4b895e6
fix(landing): reduce installation card bottom spacing
777genius Oct 12, 2026
eafd3e8
feat(landing): connect uploaded Mux product film
777genius Oct 12, 2026
05d7c83
style(landing): enlarge hero video and rebalance spacing
777genius Oct 12, 2026
c353b70
style(landing): emphasize demo playback control
777genius Oct 12, 2026
fd6c5f2
fix(landing): wrap long hero command tokens
777genius Oct 13, 2026
034f877
test(landing): stabilize live catalog and hydration checks
777genius Oct 13, 2026
4fcddb8
ci(landing): install only the headless browser used by tests
777genius Oct 13, 2026
36c108b
ci(landing): use headless shell for Pages validation
777genius Oct 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .github/workflows/landing.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ permissions:
jobs:
test:
runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || vars.CI_LINUX_RUNNER || 'ubuntu-latest' }}
timeout-minutes: 20
timeout-minutes: 35
steps:
- uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
with:
Expand Down Expand Up @@ -87,7 +87,7 @@ jobs:

- name: Install browser
working-directory: landing
run: pnpm exec playwright install --with-deps chromium
run: pnpm exec playwright install --with-deps --only-shell chromium

- name: Run browser E2E
id: browser-e2e
Expand All @@ -108,7 +108,7 @@ jobs:
combined-pages-validation:
if: github.event_name == 'pull_request'
runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || vars.CI_LINUX_RUNNER || 'ubuntu-latest' }}
timeout-minutes: 20
timeout-minutes: 35
permissions:
contents: read
strategy:
Expand Down Expand Up @@ -234,7 +234,7 @@ jobs:

- name: Install browser
working-directory: landing
run: pnpm exec playwright install --with-deps chromium
run: pnpm exec playwright install --with-deps --only-shell chromium

- name: Serve assembled artifact at deployment base
run: |
Expand Down
187 changes: 131 additions & 56 deletions landing/assets/styles/registry.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ img {
position: relative;
z-index: 2;
min-height: 600px;
padding-block: clamp(36px, 4vw, 56px);
padding-block: 24px 40px;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
align-items: center;
Expand Down Expand Up @@ -324,11 +324,86 @@ img {
.hero__plugin-count {
font-variant-numeric: tabular-nums;
}
.hero__demo {
.hero__install {
position: relative;
isolation: isolate;
}

.hero-demo-video {
width: min(100%, 480px);
margin: 0 auto 28px;
aspect-ratio: 16 / 9;
position: relative;
z-index: 2;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 12px;
background: var(--surface-solid);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.hero-demo-video__preview {
height: 100%;
display: grid;
align-content: center;
gap: 12px;
padding: 18px;
background: radial-gradient(ellipse at top right, rgba(153, 55, 234, 0.22), transparent 75%);
}
.hero-demo-video__terminal {
display: grid;
gap: 9px;
color: var(--cyan);
font-size: 0.64rem;
}
.hero-demo-video__terminal > span {
color: var(--subtle);
font-size: 0.5rem;
letter-spacing: 4px;
}
.hero-demo-video__caption {
display: flex;
align-items: center;
gap: 7px;
color: var(--text);
font-size: 0.72rem;
font-weight: 700;
}
.hero-demo-video__caption svg {
width: 24px;
height: 24px;
color: var(--primary-bright);
}
.hero-demo-video img,
.hero-demo-video iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
object-fit: cover;
}
.hero-demo-video button {
position: absolute;
inset: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
color: var(--primary);
background: rgba(4, 7, 15, 0.34);
cursor: pointer;
font-size: 1.125rem;
font-weight: 750;
}
.hero-demo-video button svg {
width: 36px;
height: 36px;
padding: 8px;
border-radius: 50%;
background: rgba(4, 7, 15, 0.82);
}

.hero__window {
position: relative;
z-index: 1;
Expand All @@ -339,15 +414,14 @@ img {
box-shadow: var(--shadow);
}
.hero__window-body {
padding: 24px 26px 22px;
padding: 24px 26px 10px;
}
.hero-quick-start__header {
padding: 0 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border-bottom: 1px solid var(--line);
}
.hero-quick-start__header h2 {
margin: 0;
Expand All @@ -367,16 +441,25 @@ img {
list-style: none;
}
.hero-quick-start__step {
padding: 15px 0;
padding: 8px 0;
display: grid;
grid-template-columns: 28px 112px minmax(0, 1fr);
gap: 12px;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
align-items: stretch;
}
.hero-quick-start__step:last-child {
padding-bottom: 0;
}
.hero-quick-start__caption {
min-width: 0;
display: flex;
align-items: center;
border-bottom: 1px solid var(--line);
gap: 6px;
}
.hero-quick-start__number {
width: 26px;
height: 26px;
width: 20px;
height: 20px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
Expand All @@ -389,20 +472,21 @@ img {
color: var(--green);
background: color-mix(in srgb, var(--green) 11%, var(--surface-raised));
}
.hero-quick-start__label strong,
.hero-quick-start__label small {
display: block;
.hero-quick-start__label strong {
display: inline;
}
.hero-quick-start__label {
min-width: 0;
display: flex;
align-items: baseline;
white-space: nowrap;
}
.hero-quick-start__label strong {
color: var(--text);
font-size: 0.75rem;
}
.hero-quick-start__label small {
margin-top: 2px;
color: var(--subtle);
font-size: 0.6rem;
font-size: 0.68rem;
}
.hero-quick-start__step .app-multiselect__trigger {
width: 100%;
min-height: 48px;
padding-inline: 12px;
}
Expand All @@ -412,6 +496,14 @@ img {
.hero-quick-start__step .command-snippet {
min-width: 0;
}
.hero-quick-start__step .command-snippet--inline pre {
overflow-x: visible;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.hero-quick-start__step .command-snippet--inline code {
min-width: 0;
}
.hero-quick-start__command {
min-width: 0;
}
Expand All @@ -431,22 +523,6 @@ img {
.hero-quick-start__more-install:focus-visible {
color: var(--cyan);
}
.hero-quick-start__footer {
padding: 13px 0 0 152px;
display: grid;
gap: 6px;
}
.hero-quick-start__footer p {
margin: 0;
color: var(--subtle);
font-size: 0.62rem;
}
.hero-quick-start__footer span {
margin-right: 5px;
color: var(--green);
font-size: 0.75rem;
font-weight: 900;
}
.preview-banner {
padding: 9px 20px;
border-bottom: 1px solid color-mix(in srgb, var(--coral) 55%, var(--line));
Expand Down Expand Up @@ -686,7 +762,8 @@ img {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 4px;
list-style: none;
}
.client-strip li {
Expand Down Expand Up @@ -735,11 +812,9 @@ img {
line-height: 1.2;
}
.client-strip__copy strong {
overflow: hidden;
color: var(--text);
font-size: 0.62rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: anywhere;
}
.client-strip__copy small {
color: var(--subtle);
Expand Down Expand Up @@ -1801,7 +1876,7 @@ img {
gap: 10px;
}
.plugin-card__identity--with-ribbon {
padding-right: 102px;
padding-right: 92px;
}
.plugin-card__identity-copy {
min-width: 0;
Expand Down Expand Up @@ -1871,8 +1946,8 @@ img {
position: absolute;
top: 14px;
right: 14px;
min-width: 104px;
padding: 6px 9px 6px 11px;
min-width: fit-content;
padding: 5px 8px;
border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
border-radius: 999px;
color: var(--primary-bright);
Expand All @@ -1888,6 +1963,7 @@ img {
letter-spacing: 0.045em;
text-align: center;
text-transform: none;
white-space: nowrap;
}
.plugin-card__ribbon::after {
content: none;
Expand Down Expand Up @@ -2756,7 +2832,8 @@ img {
@media (max-width: 980px) {
.hero {
grid-template-columns: 1fr;
padding-top: 70px;
padding-top: 32px;
gap: 32px;
}
.hero__copy {
text-align: center;
Expand All @@ -2769,10 +2846,10 @@ img {
}
.hero__demo {
width: min(100%, 610px);
margin: 25px auto 0;
margin: 0 auto;
}
.client-strip {
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.plugin-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
Expand Down Expand Up @@ -2840,7 +2917,8 @@ img {
}
.hero {
min-height: auto;
padding-block: 58px 80px;
padding-block: 32px 56px;
gap: 32px;
}
.hero h1 {
font-size: clamp(2.2rem, 11vw, 3.2rem);
Expand All @@ -2849,20 +2927,11 @@ img {
display: grid;
}
.hero__window-body {
padding: 18px 14px;
padding: 18px 14px 10px;
}
.hero-quick-start__header {
align-items: flex-start;
}
.hero-quick-start__step {
grid-template-columns: 28px minmax(0, 1fr);
}
.hero-quick-start__step > :last-child {
grid-column: 1 / -1;
}
.hero-quick-start__footer {
padding-left: 0;
}
.hero-quick-start__step .app-multiselect__trigger {
width: 100%;
}
Expand Down Expand Up @@ -2894,6 +2963,12 @@ img {
.client-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.client-strip li {
grid-column: auto;
}
.client-strip li:last-child {
grid-column: 2;
}
.client-strip li > a {
min-height: 66px;
}
Expand Down
Loading
Loading