feat: develop Tetragon Use Cases pages

Signed-off-by: Anna Artemova <annartmva@gmail.com>

docs/assets/scss/header.scss

@@ -22,16 +22,6 @@
   }
 
   @media screen and (max-width: 991.98px) {
-    .td-navbar-nav-scroll {
-      height: auto;
-    }
-    .navbar-nav {
-      padding-bottom: 0;
-      overflow: hidden;
-    }
-  }
-
-  @media screen and (max-width: 767px) {
     height: auto;
     padding: 8px 0;
 
@@ -44,6 +34,7 @@
         display: flex;
         justify-content: space-evenly;
         column-gap: 12px;
+        padding-bottom: 0;
         overflow-x: auto;
 
         -ms-overflow-style: none;
@@ -53,13 +44,17 @@
           display: none;
         }
       }
+
+      .nav-item {
+        flex-shrink: 0;
+      }
     }
   }
 
   .navbar-brand svg {
     height: 48px;
 
-    @media screen and (max-width: 767px) {
+    @media screen and (max-width: 991.98px) {
       height: 36px;
     }
   }
@@ -91,15 +86,69 @@
 
       &:hover,
       &:focus {
-        color: #5C6D70;
-        border-color: #5C6D70;
+        color: #5c6d70;
+        border-color: #5c6d70;
       }
 
-      @media screen and (max-width: 767px) {
+      @media screen and (max-width: 991.98px) {
         font-size: 14px;
         padding: 14px 2px;
       }
     }
+
+    .dropdown {
+      position: relative;
+
+      .dropdown-toggle::after {
+        position: relative;
+        top: 1px;
+      }
+
+      .dropdown-menu {
+        position: absolute;
+        top: 4px !important;
+        min-width: 300px;
+        padding: 4px 16px;
+        background: #fff;
+        border: 1px solid #e0e6f0;
+
+        .td-home & {
+          background-color: #f7fdfd;
+        }
+      }
+
+      .dropdown-item {
+        padding: 12px 0;
+        color: #253737;
+        font-size: 15px;
+        line-height: 100%;
+
+        &:hover,
+        &:focus {
+          color: #5c6d70;
+          background: transparent;
+        }
+      }
+
+      @media (max-width: 991.97px) {
+        position: static;
+
+        .dropdown-menu {
+          left: 50% !important;
+          transform: translate3d(-50%, 98px, 0px) !important;
+          width: calc(100% - 16px);
+          min-width: 0;
+          margin-top: 0;
+          z-index: 1000;
+          max-height: calc(100vh - 100%);
+          overflow-y: auto;
+
+          @media (max-width: 767.98px) {
+            transform: translate3d(-50%, 106px, 0px) !important;
+          }
+        }
+      }
+    }
   }
 
   .td-search {

docs/assets/scss/home.scss

@@ -14,6 +14,8 @@
 @import "home/contact";
 @import "home/presentation";
 @import "home/distribution";
+@import "home/intro";
+@import "home/case";
 
 .home {
   margin-left: auto;
@@ -43,6 +45,10 @@
     margin-right: auto;
     max-width: 1216px;
 
+    &--sm {
+      max-width: 800px;
+    }
+
     @media (max-width: $desktop) {
       padding: 0 40px;
     }

docs/assets/scss/home/case.scss

@@ -0,0 +1,77 @@
+.case {
+  padding-top: 235px;
+  color: #5e636e;
+
+  @media (max-width: $tablet) {
+    padding-top: 200px;
+  }
+
+  @media (max-width: $mobile) {
+    padding-top: 24px;
+  }
+
+  .container {
+    padding-inline: 44px;
+  }
+
+  h2 {
+    max-width: 90%;
+    margin-top: 65px;
+    margin-bottom: 20px;
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 1.125;
+    letter-spacing: -0.56px;
+    color: #253737;
+
+    @media (max-width: $tablet) {
+      font-size: 24px;
+    }
+
+    @media (max-width: $mobile) {
+      margin-top: 32px;
+    }
+  }
+
+  p {
+    margin-block: 14px;
+    text-wrap: pretty;
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 32px 72px;
+    margin-top: 28px;
+
+    @media (max-width: $mobile) {
+      grid-template-columns: repeat(1, 1fr);
+      gap: 24px;
+    }
+
+    img {
+      width: 56px;
+      height: 56px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    h3 {
+      margin-top: 16px;
+      margin-bottom: 0;
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 1.375;
+      color: #253737;
+
+      @media (max-width: $tablet) {
+        font-size: 20px;
+      }
+    }
+
+    p {
+      margin-top: 6px;
+      margin-bottom: 0;
+    }
+  }
+}

docs/assets/scss/home/intro.scss

@@ -0,0 +1,103 @@
+.intro {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  padding-top: 58px;
+  padding-bottom: 254px;
+  background-color: #f7fdfd;
+
+  @media (max-width: $tablet) {
+    padding-bottom: 200px;
+  }
+
+  @media (max-width: $mobile) {
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+
+  h1 {
+    text-align: center;
+    color: #253737;
+  }
+
+  p {
+    margin-top: 14px;
+    margin-inline: auto;
+    padding-inline: 36px;
+    text-align: center;
+    color: #2B383B;
+  }
+}
+
+.intro__video {
+  position: absolute;
+  left: 50%;
+  bottom: -215px;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 800px;
+  max-height: 443px;
+  padding: 14px;
+  border-radius: 12px;
+  border: 1px solid #e0e6f0;
+  background-color: white;
+
+  @media (max-width: $tablet) {
+    bottom: -180px;
+    max-width: 600px;
+  }
+
+  @media (max-width: $mobile) {
+    position: relative;
+    bottom: 0;
+    margin-top: 32px;
+    max-width: 100%;
+    padding: 8px;
+  }
+
+  .intro__preview,
+  .intro__video-content {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: 53.5%;
+    border-radius: 4px;
+    border: 1px solid #deeded;
+    overflow: hidden;
+  }
+
+  img,
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .intro__preview-button {
+    position: absolute;
+    inset: 0;
+    color: #CFDEFC;
+    background-color: rgba(0, 0, 0, 0.1);
+    border: none;
+    transition: all 0.2s ease-out;
+
+    &:hover,
+    &:focus {
+      color: #ffffff;
+      transform: scale(1.1);
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}