feat: develop Tetragon Enterprise page

Signed-off-by: Anna Artemova <[email protected]>
cilium · Nov 26, 2024 · 47ef420 · 47ef420
1 parent 4d79986
commit 47ef420
Show file tree

Hide file tree

Showing 22 changed files with 404 additions and 212 deletions.
diff --git a/docs/assets/scss/home.scss b/docs/assets/scss/home.scss
@@ -13,6 +13,7 @@
 @import "home/share";
 @import "home/contact";
 @import "home/presentation";
+@import "home/distribution";
 
 .home {
   margin-left: auto;

diff --git a/docs/assets/scss/home/distribution.scss b/docs/assets/scss/home/distribution.scss
@@ -0,0 +1,131 @@
+.distribution {
+  --border-color: #e0e6f0;
+
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  padding-bottom: 126px;
+  background-color: #f7fdfd;
+
+  @media (max-width: $tablet) {
+    padding-bottom: 58px;
+  }
+
+  .container {
+    padding-inline: 0;
+  }
+
+  &__content {
+    display: flex;
+    margin-top: 44px;
+    padding: 32px 0 28px;
+    background-color: #ffffff;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+
+    @media (max-width: $tablet) {
+      flex-direction: column;
+      margin-top: 32px;
+      padding: 0 32px;
+    }
+
+    @media (max-width: $mobile) {
+      margin-top: 24px;
+    }
+  }
+
+  &__main {
+    flex-shrink: 0;
+    width: 26.32%;
+    padding-inline: 32px;
+    border-right: 1px solid var(--border-color);
+
+    @media (max-width: $tablet) {
+      width: 100%;
+      padding: 32px 0;
+      border-right: 0;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    img {
+      @media (max-width: $tablet) {
+        width: 179px;
+        height: auto;
+      }
+    }
+
+    h3 {
+      margin-top: 20px;
+      margin-bottom: 6px;
+      font-weight: 600;
+      font-size: 22px;
+      line-height: 1.375;
+    }
+
+    p {
+      margin-bottom: 8px;
+    }
+  }
+
+  &__list {
+    display: flex;
+    margin-bottom: 0;
+
+    @media (max-width: $tablet) {
+      flex-direction: column;
+    }
+
+    li {
+      width: 33.3%;
+      padding-top: 16px;
+      padding-inline: 32px;
+      border-right: 1px solid var(--border-color);
+
+      &:last-of-type {
+        width: 36.4%;
+        border-right: 0;
+      }
+
+      @media (max-width: $tablet) {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        width: 100%;
+        padding: 32px 0;
+        border-right: 0;
+        border-bottom: 1px solid var(--border-color);
+
+        &:last-of-type {
+          width: 100%;
+          border-bottom: 0;
+        }
+      }
+
+      @media (max-width: 414px) {
+        flex-direction: column;
+        align-items: stretch;
+      }
+    }
+
+    img {
+      margin-bottom: 12px;
+
+      @media (max-width: $tablet) {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 1.375;
+
+      @media (max-width: $tablet) {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/docs/assets/scss/home/hero.scss b/docs/assets/scss/home/hero.scss
@@ -32,6 +32,10 @@
     }
   }
 
+  &--inner .container  {
+    padding-bottom: 56px;
+  }
+
   &__label {
     display: inline-flex;
     flex-wrap: wrap;
@@ -84,6 +88,15 @@
     grid-area: intro;
     padding-right: 4rem;
 
+    .hero--inner & {
+      padding-top: 96px;
+      padding-right: 0;
+
+      @media (max-width: $tablet) {
+        padding-top: 0;
+      }
+    }
+
     .title {
       margin-top: 22px;
       margin-bottom: 0;
@@ -92,6 +105,10 @@
     p {
       margin-top: 1rem;
       color: #2B383B;
+
+      .hero--inner & {
+        max-width: 500px;
+      }
     }
 
     @media (max-width: $desktop) {
@@ -112,6 +129,10 @@
 
       .title {
         max-width: 590px;
+
+        .hero--inner & {
+          max-width: 500px;
+        }
       }
 
       p {
@@ -122,6 +143,16 @@
     @media (max-width: $mobile) {
       .title {
         margin-top: 20px;
+
+        .hero--inner & {
+          max-width: 400px;
+        }
+      }
+
+      p {
+        .hero--inner & {
+          max-width: 360px;
+        }
       }
     }
   }
@@ -152,18 +183,28 @@
       max-width: 100%;
       height: auto;
 
+      .hero--inner & {
+        margin-left: auto;
+        margin-right: 45px;
+        margin-top: 8px;
+      }
+
       @media (max-width: $desktop) {
         max-width: 460px;
+
+        .hero--inner & {
+          margin-right: auto;
+        }
       }
 
       @media (max-width: $tablet) {
         max-width: 368px;
-        margin: 2rem auto;
+        margin: 2rem auto !important;
       }
 
       @media (max-width: $mobile) {
         max-width: 100%;
-        margin: 1.5rem auto 0 auto;
+        margin: 1.5rem auto 0 auto !important;
       }
     }