fixed EE page header (#1034)

Co-authored-by: Taron Chatoyan <[email protected]>
kestra-io · Mar 13, 2024 · 444bffb · 444bffb
1 parent e652024
commit 444bffb
Show file tree

Hide file tree

Showing 4 changed files with 57,919 additions and 71 deletions.
diff --git a/components/enterprise/Header.vue b/components/enterprise/Header.vue
@@ -1,21 +1,22 @@
 <template>
-    <div class="container-fluid container">
-        <div class="hero hero-sm mx-2 sm-mx-0">
-            <div class="row" data-aos="fade-right">
-                <div class="col-12 col-md-8 col-lg-6 order-1 order-md-0 pr-4">
-                    <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="https://kestra.io/demo" target="_blank"
-                                  class="btn btn-animated btn-purple-animated" data-aos="zoom-in">
-                            Talk to Us
-                        </NuxtLink>
+    <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="https://kestra.io/demo" target="_blank"
+                                      class="btn btn-animated btn-purple-animated" data-aos="zoom-in">
+                                Talk to Us
+                            </NuxtLink>
+                        </div>
                     </div>
                 </div>
-                <div class="order-0 order-md-1 d-flex d-md-none">
-                    <img class="img-container img-fluid" src="/landing/ee/background.svg"
-                         alt="Illustration of Kestra's logo with a dark background" data-aos="zoom-in"/>
+                <div class="col-md-6 order-0 order-md-1" data-aos="zoom-in">
+                    <img class="zoom img-fluid" src="/landing/ee/header.svg" alt="A screenshot of the user interface of Kestra's application"/>
                 </div>
             </div>
         </div>
@@ -26,85 +27,72 @@
     @import "../../assets/styles/variable";
 
     .container-fluid {
+        background: url("/landing/ee/header-bg.svg") no-repeat 100% 100%;
         color: var(--bs-white);
-        background: url("/landing/ee/bg.svg") no-repeat 32% 63%;
-        background-size: 127% 181% !important;
-        border-bottom: 1px solid #252526;
+        padding-top: 5rem;
+        background-position: 79% 54%;
 
-        @include media-breakpoint-down(md) {
-            background-image: none !important;
-        }
-
-        h1, .subtitle {
-            margin: 0;
-            padding: 0;
+        @include media-breakpoint-down(xxl) {
+            background-position: 30% 54%;
         }
 
-        h1 {
-            font-size: $font-size-4xl;
-            font-weight: 300;
-            font-family: $font-family-sans-serif;
-            max-width: 75%;
+        @include media-breakpoint-down(lg) {
+            background-position: 50% 80%;
         }
 
-        span {
-            background: linear-gradient(90deg, #E151F7 0.45%, #5C47F5 43.61%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-size: $font-size-4xl;
-            letter-spacing: calc($spacer * -0.188);
-            font-family: $font-family-sans-serif;
-
-            @include media-breakpoint-down(lg) {
-                font-size: 1.625rem !important;
-            }
+        @include media-breakpoint-down(md) {
+            background-position: 68% 389%;
+            background-size: 307% 107%;
         }
 
         @include media-breakpoint-down(sm) {
-            h1, h1 > span {
-                font-size: 1.625rem !important;
-                max-width: 100%;
-            }
+            background-size: auto;
+            background-position: 60% 200%;
         }
 
-        .subtitle {
-            font-size: 1.875rem;
-            font-weight: 100;
-        }
-
-        .description {
-            font-size: $font-size-xl;
-            font-weight: 300;
-        }
-
-        .img-container {
-            position: relative;
-            transform: scale(1.3);
-            margin-bottom: 50px;
-            left: 20px;
-            transform-origin: 40% 30%;
-        }
-
-        .hero {
-            padding-bottom: 5rem;
+        .container {
+            border-bottom: $block-border;
 
-            .baseline {
+            h1 {
+                font-size: $font-size-4xl;
                 font-weight: 300;
-                max-width: 78%;
+                font-family: $font-family-sans-serif;
+                max-width: 75%;
+            }
+
+            span {
+                background: linear-gradient(90deg, #E151F7 0.45%, #5C47F5 43.61%);
+                background-clip: text;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                font-size: $font-size-4xl;
+                font-family: $font-family-sans-serif;
 
                 @include media-breakpoint-down(lg) {
-                    font-size: $font-size-base;
+                    font-size: 1.625rem !important;
                 }
+            }
 
-                @include media-breakpoint-down(sm) {
+            @include media-breakpoint-down(sm) {
+                h1, h1 > span {
+                    font-size: 1.625rem !important;
                     max-width: 100%;
                 }
             }
 
+        }
+
+        .hero {
+            padding-bottom: 5rem;
+            padding-top: 0rem;
             @include media-breakpoint-down(md) {
                 padding-top: 0;
             }
+
+            .baseline {
+                font-weight: 300;
+            }
         }
+
     }
 </style>
diff --git a/components/enterprise/Security.vue b/components/enterprise/Security.vue
@@ -119,11 +119,11 @@
             position: absolute;
             height: 100%;
             width: 100%;
-            position: absolute;
             background: url("/landing/ee/background-mask.svg") no-repeat center;
             background-size: 156% 100%;
             overflow: hidden;
             top: -33%;
+            z-index: -1;
         }
         .subtitle {
             margin: 0 !important;