Skip to content

Commit

Permalink
Feat 1911/enterprise (#1962)
Browse files Browse the repository at this point in the history 
* Redesign enterprise page

* added link to several buttons

* Fixs design issues.

* Fixed blocks styles.

* Implemented functionality to dynamically change the header background based on scroll position

* fixed Orchestra background

* changed Orchestra background

* fixed fonts

* fixed fonts

* Update OrchestraCore.vue

---------

Co-authored-by: Taron Chatoyan <[email protected]>
Co-authored-by: MartinRst <[email protected]>
  • Loading branch information
@t-chatoyan @MartinRst
3 people authored Dec 2, 2024
1 parent 565fbc1 commit d79a682
Show file tree
Hide file tree
Showing 58 changed files with 4,232 additions and 251 deletions.
2 changes: 2 additions & 0 deletions assets/styles/_variable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,8 @@ $purple-34: #10051F;
$purple-35: #736BCD;
$purple-36: #9CA1DE;
$purple-37: #A396FF;
$purple-38: #7078EF;
$purple-39: #817CFF;

$theme-colors: (
"primary": $primary,
Expand Down
226 changes: 201 additions & 25 deletions components/enterprise/Header.vue
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,82 @@
<template>
<div class="container-fluid">
<div class="hero container">
<div class="justify-content-between row">
<div class="col-md-6 align-items-center d-flex order-1 order-md-0">
<div>
<h1 data-aos="fade-right"><span class="dot">Kestra Enterprise</span> to Scale Your Workflows.</h1>
<p data-aos="fade-left" class="baseline">Made for organizations & professionals seeking to secure
production workloads with high-security standards and enterprise support.</p>
<div class="d-flex flex-wrap gap-2">
<NuxtLink href="/demo" class="btn btn-animated btn-purple-animated" data-aos="zoom-in">
Talk to sales
</NuxtLink>
<div class="justify-content-center row">
<div class="row justify-content-center align-items-center flex-column w-100 header-content">
<p class="text-center header-desc">Build For Critical Use Cases</p>
<h1 data-aos="fade-right">Scale With Kestra <br> Enterprise Edition</h1>
<div class="d-flex flex-wrap gap-2 button-group">
<NuxtLink href="/demo" class="btn btn-animated btn-purple-animated" data-aos="zoom-in">
Talk to sales
</NuxtLink>
</div>
<div class="teams-content">
<p>Trusted by Teams From:</p>
<div class="teams-logos">
<div>
<NuxtImg
width="100%"
height="63px"
loading="lazy"
format="webp"
class="img-fluid"
src="/landing/enterprise/teams/fila-logo.svg"
alt="FILA"
data-aos="fade-left"
/>
</div>
<div>
<NuxtImg
width="100%"
height="63px"
loading="lazy"
format="webp"
class="img-fluid"
src="/landing/enterprise/teams/gorgias-logo.svg"
alt="Gorgias"
data-aos="fade-left"
/>
</div>
<div>
<NuxtImg
width="100%"
height="63px"
loading="lazy"
format="webp"
class="img-fluid"
src="/landing/enterprise/teams/acxiom-logo.svg"
alt="Acxiom"
data-aos="fade-left"
/>
</div>
<div>
<NuxtImg
width="100%"
height="63px"
loading="lazy"
format="webp"
class="img-fluid"
src="/landing/enterprise/teams/loreal-logo.svg"
alt="L'Oréal"
data-aos="fade-left"
/>
</div>
<div>
<NuxtImg
width="100%"
height="63px"
loading="lazy"
format="webp"
class="img-fluid"
src="/landing/enterprise/teams/battelle-logo.svg"
alt="Battelle"
data-aos="fade-left"
/>
</div>
</div>
</div>
</div>
<div class="col-md-6 order-0 order-md-1" data-aos="zoom-in">
<NuxtImg
width="569px"
height="418px"
loading="lazy"
format="webp"
class="img-fluid"
src="/landing/ee/header.svg"
alt="A screenshot of the user interface of Kestra's application"
/>
</div>
<EnterpriseMeetKestra/>
</div>
</div>
</div>
Expand All @@ -34,10 +86,71 @@
@import "../../assets/styles/variable";
.container-fluid {
background: url("/landing/ee/header-bg.svg") no-repeat 100% 100%;
color: var(--bs-white);
padding-top: 5rem;
background-position: 79% 54%;
padding-right: 0;
padding-left: 0;
position: relative;
@include media-breakpoint-down(md) {
padding-top: $rem-10;
}
&::after {
content: "";
background-image: url(/landing/enterprise/bg-left.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: -50;
top: 435px;
width: 538px;
height: 830px;
@include media-breakpoint-down(xl) {
width: 335px;
height: 700px;
}
@include media-breakpoint-down(md) {
width: 300px;
height: 600px;
}
@include media-breakpoint-down(sm) {
display: none;
}
}
&::before {
content: "";
background-image: url(/landing/enterprise/bg-right.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: -67px;
right: 0;
z-index: -50;
width: 480px;
height: 566px;
@include media-breakpoint-down(xl) {
width: 400px;
height: 450px;
}
@include media-breakpoint-down(md) {
width: 300px;
height: 420px;
}
@include media-breakpoint-down(sm) {
background-image: url(/landing/enterprise/bg-right-mobile.png);
width: 240px;
height: 380px;
top: -25px;
}
}
@include media-breakpoint-down(xxl) {
background-position: 30% 54%;
Expand All @@ -60,11 +173,38 @@
.container {
border-bottom: $block-border;
.header-content {
@include media-breakpoint-down(md) {
align-items: start !important;
}
}
h1 {
font-size: $font-size-4xl;
font-weight: 300;
font-weight: 400;
font-family: $font-family-sans-serif;
max-width: 75%;
width: fit-content !important;
@include media-breakpoint-down(lg) {
font-size: $font-size-2xl !important;
}
}
.header-desc {
color: $purple-38;
font-size: calc($spacer * 1.5);
font-weight: 400;
margin-bottom: 30px;
text-align: center;
@include media-breakpoint-down(lg) {
font-size: $font-size-md !important;
margin-bottom: 10px;
}
@include media-breakpoint-down(md) {
text-align: start !important;
}
}
span {
Expand All @@ -80,6 +220,42 @@
}
}
.button-group {
width: fit-content;
}
.teams-content {
margin-top: calc($spacer * 2.125);
width: fit-content;
padding: 2rem 0;
p {
padding: 0 14px;
font-size: $font-size-xl;
font-weight: 300;
line-height: 25.85px;
text-align: center;
@include media-breakpoint-down(sm) {
text-align: start;
font-size: $font-size-sm;
}
}
.teams-logos {
display: flex;
gap: 21px;
padding: 0 14px;
img {
height: 18px;
}
@include media-breakpoint-down(md) {
flex-wrap: wrap;
}
}
}
@include media-breakpoint-down(sm) {
h1, h1 > span {
font-size: 1.625rem !important;
Expand Down
Loading

0 comments on commit d79a682

Please sign in to comment.