Skip to content

feat(shared): custom browser frames on landingpages #658

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

Closed
me-marcel wants to merge 1 commit into from
Closed

feat(shared): custom browser frames on landingpages #658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 8 additions & 0 deletions .github/actions/setup-env/action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,14 @@ runs:
exit 1
fi

- name: Restore package binary permissions
if: inputs.install-dependencies != 'true'
shell: bash
run: |
if [ -d node_modules/.bin ]; then
find node_modules/.bin -mindepth 1 -exec chmod +x {} +
fi

- name: Apply patches (artifact restore)
if: inputs.install-dependencies != 'true'
shell: bash
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/pull-request-checks.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,7 @@ jobs:
path: |
dist/
node_modules/
include-hidden-files: true
retention-days: 1
compression-level: 6

Expand Down
1 change: 1 addition & 0 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ jobs:
path: |
dist/
node_modules/
include-hidden-files: true
retention-days: 1
compression-level: 6

Expand Down
29 changes: 23 additions & 6 deletions libs/domains/agenstra/frontend/feature-landingpage/src/lib/cloud/cloud.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,29 @@ <h2 class="h2 fw-semibold mb-4 text-dark" i18n="@@featurePortalCloud-teaserTitle
>Managed console + workspaces</fpc-badge
>
</div>
<img
src="assets/images/screenshots/cloud_framed.png"
alt="Agenstra Cloud management interface"
class="img-fluid w-100 cloud-why-visual-img"
i18n-alt="@@featurePortalCloud-teaserScreenshotAlt"
/>
<div class="browser-peek">
<div class="browser-frame">
<div class="browser-frame__toolbar" aria-hidden="true">
<span class="browser-frame__lights">
<span class="browser-frame__light browser-frame__light--close"></span>
<span class="browser-frame__light browser-frame__light--minimize"></span>
<span class="browser-frame__light browser-frame__light--zoom"></span>
</span>
<span class="browser-frame__address">
<i class="bi bi-lock-fill"></i>
cloud.agenstra.com
</span>
</div>
<div class="browser-frame__viewport">
<img
src="assets/images/screenshots/cloud_framed.png"
alt="Agenstra Cloud management interface"
class="browser-frame__screenshot"
i18n-alt="@@featurePortalCloud-teaserScreenshotAlt"
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 d-flex flex-column gap-3">
Expand Down
4 changes: 0 additions & 4 deletions libs/domains/agenstra/frontend/feature-landingpage/src/lib/cloud/cloud.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,3 @@
overflow-x: hidden;
}
}

.cloud-why-visual-img {
margin-top: -8rem;
}
29 changes: 22 additions & 7 deletions libs/domains/agenstra/frontend/feature-landingpage/src/lib/desktop/desktop.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,28 @@ <h1 class="display-4 fw-semibold mb-4 hero-title" i18n="@@featurePortalDesktop-h
Available for: Windows, Linux
</p>
</div>
<div class="col-lg-6 text-center position-relative desktop-hero-visual">
<img
src="assets/images/screenshots/spaces-dark_framed-alt.png"
alt="Agenstra Desktop application"
class="desktop-screenshot img-fluid d-none d-lg-block"
i18n-alt="@@featurePortalDesktop-heroAlt"
/>
<div class="col-lg-6 position-relative desktop-hero-visual">
<div class="app-window d-none d-lg-block">
<div class="app-window__titlebar" aria-hidden="true">
<span class="app-window__title">
<img src="assets/images/icon_colorful.svg" alt="" class="app-window__icon" />
Agenstra Desktop
</span>
<span class="app-window__controls">
<i class="bi bi-dash-lg"></i>
<i class="bi bi-square"></i>
<i class="bi bi-x-lg"></i>
</span>
</div>
<div class="app-window__viewport">
<img
src="assets/images/screenshots/spaces-dark_framed-alt.png"
alt="Agenstra Desktop application"
class="app-window__screenshot"
i18n-alt="@@featurePortalDesktop-heroAlt"
/>
</div>
</div>
</div>
</div>
</div>
Expand Down
65 changes: 62 additions & 3 deletions libs/domains/agenstra/frontend/feature-landingpage/src/lib/desktop/desktop.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,68 @@
min-height: 12rem;
}

.desktop-screenshot {
max-width: 100%;
height: auto;
// Native Windows/Linux-style app window (no browser chrome) so Desktop reads as an installed app; it is slightly
// wider than its column and turned towards the copy, bleeding off the hero edge on narrower large screens
.app-window {
position: relative;
z-index: 1;
width: 115%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--bs-border-radius-lg);
background-color: var(--bs-dark);
box-shadow:
0 2rem 4rem rgba(0, 0, 0, 0.45),
0 0 6rem rgba(139, 92, 246, 0.18);
transform: perspective(2000px) rotateY(-8deg);
transform-origin: left center;
}

.app-window__titlebar {
display: flex;
align-items: center;
justify-content: space-between;
height: 2.25rem;
padding-left: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.8125rem;
}

.app-window__title {
display: flex;
align-items: center;
gap: 0.5rem;
}

.app-window__icon {
width: 1rem;
height: 1rem;
}

.app-window__controls {
display: flex;
align-self: stretch;

> .bi {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
font-size: 0.75rem;
}
}

.app-window__viewport {
aspect-ratio: 16 / 9;
overflow: hidden;
}

.app-window__screenshot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
}

.desktop-workflow-node--focus {
Expand Down
102 changes: 67 additions & 35 deletions libs/domains/agenstra/frontend/feature-landingpage/src/lib/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,35 +76,50 @@ <h1 class="display-4 fw-semibold mb-4 hero-title" i18n="@@featurePortalHome-hero
</div>
<div class="container grid-section__container grid-section__container--hero-bottom">
<div class="row">
<div class="col-md-12 intent-cards" (mouseenter)="pauseAutoplay()" (mouseleave)="resumeAutoplay()">
<img
src="assets/images/screenshots/spaces-dark_framed.png"
alt="Agenstra workspaces"
class="img-fluid intent-card"
[class.d-none]="activeSlide() !== 1"
i18n-alt="@@featurePortalHome-heroSlideSpaces"
/>
<img
src="assets/images/screenshots/tasks-dark_framed.png"
alt="Agenstra tickets board"
class="img-fluid intent-card"
[class.d-none]="activeSlide() !== 2"
i18n-alt="@@featurePortalHome-heroSlideTickets"
/>
<img
src="assets/images/screenshots/editor-dark_framed.png"
alt="Agenstra web IDE"
class="img-fluid intent-card"
[class.d-none]="activeSlide() !== 3"
i18n-alt="@@featurePortalHome-heroSlideIde"
/>
<img
src="assets/images/screenshots/audit-dark_framed.png"
alt="Agenstra audit and usage statistics"
class="img-fluid intent-card"
[class.d-none]="activeSlide() !== 4"
i18n-alt="@@featurePortalHome-heroSlideAudit"
/>
<div class="col-md-12 intent-cards mt-10" (mouseenter)="pauseAutoplay()" (mouseleave)="resumeAutoplay()">
<div class="browser-frame intent-cards-browser">
<div class="browser-frame__toolbar" aria-hidden="true">
<span class="browser-frame__lights">
<span class="browser-frame__light browser-frame__light--close"></span>
<span class="browser-frame__light browser-frame__light--minimize"></span>
<span class="browser-frame__light browser-frame__light--zoom"></span>
</span>
<span class="browser-frame__address">
<i class="bi bi-lock-fill"></i>
cloud.agenstra.com
</span>
</div>
<div class="browser-frame__viewport">
<img
src="assets/images/screenshots/spaces-dark_framed.png"
alt="Agenstra workspaces"
class="browser-frame__screenshot"
[class.d-none]="activeSlide() !== 1"
i18n-alt="@@featurePortalHome-heroSlideSpaces"
/>
<img
src="assets/images/screenshots/tasks-dark_framed.png"
alt="Agenstra tickets board"
class="browser-frame__screenshot"
[class.d-none]="activeSlide() !== 2"
i18n-alt="@@featurePortalHome-heroSlideTickets"
/>
<img
src="assets/images/screenshots/editor-dark_framed.png"
alt="Agenstra web IDE"
class="browser-frame__screenshot"
[class.d-none]="activeSlide() !== 3"
i18n-alt="@@featurePortalHome-heroSlideIde"
/>
<img
src="assets/images/screenshots/audit-dark_framed.png"
alt="Agenstra audit and usage statistics"
class="browser-frame__screenshot"
[class.d-none]="activeSlide() !== 4"
i18n-alt="@@featurePortalHome-heroSlideAudit"
/>
</div>
</div>
<div
class="intent-card-indicators"
role="tablist"
Expand Down Expand Up @@ -672,12 +687,29 @@ <h2 class="h2 fw-semibold mb-4 text-dark" i18n="@@featurePortalHome-engineeringT
>Web IDE + agent chat</fpc-badge
>
</div>
<img
src="assets/images/screenshots/ide-dark_framed.png"
alt="Agenstra web IDE and dashboard"
class="img-fluid w-100 home-engineering-screenshot"
i18n-alt="@@featurePortalHome-dashboardAlt"
/>
<div class="browser-peek">
<div class="browser-frame">
<div class="browser-frame__toolbar" aria-hidden="true">
<span class="browser-frame__lights">
<span class="browser-frame__light browser-frame__light--close"></span>
<span class="browser-frame__light browser-frame__light--minimize"></span>
<span class="browser-frame__light browser-frame__light--zoom"></span>
</span>
<span class="browser-frame__address">
<i class="bi bi-lock-fill"></i>
cloud.agenstra.com
</span>
</div>
<div class="browser-frame__viewport">
<img
src="assets/images/screenshots/ide-dark_framed.png"
alt="Agenstra web IDE and dashboard"
class="browser-frame__screenshot"
i18n-alt="@@featurePortalHome-dashboardAlt"
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 d-flex flex-column gap-3">
Expand Down
38 changes: 14 additions & 24 deletions libs/domains/agenstra/frontend/feature-landingpage/src/lib/home/home.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,6 @@
box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
}

.home-engineering-screenshot {
display: block;
margin-top: -8rem;
}

.home-engineering-closing {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, #fff 55%);
}
Expand Down Expand Up @@ -143,14 +138,10 @@
}

.intent-cards {
margin-top: -5rem;
position: relative;

@media (max-width: 768px) {
padding-top: 2.5rem;
margin-top: 0;

> .intent-card {
.intent-cards-browser {
display: none;
}

Expand All @@ -159,29 +150,28 @@
}
}

@media (max-width: 992px) and (min-width: 768px) {
margin-top: -2rem;
}
// Chrome comes from `.browser-frame` in page.component.scss; the hero shows a wider crop of the screenshot
.intent-cards-browser {
z-index: 3;

@media (max-width: 1200px) and (min-width: 992px) {
margin-top: -3rem;
}
.browser-frame__viewport {
aspect-ratio: 16 / 7;
}

> .intent-card {
position: relative;
z-index: 3;
display: block;
.browser-frame__screenshot {
object-position: center;
}
}

.intent-card-indicators {
position: absolute;
left: 50%;
bottom: 0.75rem;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
gap: 0.125rem;
bottom: 0.75rem;
position: absolute;
z-index: 10;
left: 50%;
transform: translateX(-50%);
}

Expand Down
Loading
Loading