feat: slack section web UI (#11365)

datahub-project · Sep 12, 2024 · d49b398 · d49b398
1 parent e341af6
commit d49b398
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 46 deletions.
diff --git a/docs-website/src/pages/_components/Community/community.module.scss b/docs-website/src/pages/_components/Community/community.module.scss
@@ -3,40 +3,15 @@
   flex-direction: column;
   background: #fafafa;
 }
+
 .community_section {
   position: relative;
   display: flex;
   justify-content: space-between;
   font-family: "Manrope";
 
-  // &::before {
-  //   position: absolute;
-  //   content: "";
-  //   top: 0;
-  //   left: 50%;
-  //   transform: translateX(-50%);
-  //   width: 80%;
-  //   height: 60px;
-  //   background-color: #ffffff;
-  //   border-bottom-left-radius: 10px;
-  //   border-bottom-right-radius: 10px;
-  // }
-
-  // &::after {
-  //   position: absolute;
-  //   content: "";
-  //   bottom: 0;
-  //   left: 50%;
-  //   transform: translateX(-50%);
-  //   width: 80%;
-  //   height: 60px;
-  //   background-color: #ffffff;
-  //   border-top-left-radius: 10px;
-  //   border-top-right-radius: 10px;
-  // }
-
   .community_section_left {
-    padding: 20px 0;
+    padding: 100px 0;
     width: 60%;
     height: 100%;
     background: #3e2644;
@@ -47,18 +22,21 @@
 
     .community_section_left_content {
       margin: 5rem auto;
+
       .community_section_heading {
         color: rgba($color: #fff, $alpha: 0.4);
         font-size: 3.5rem;
         line-height: normal;
         font-weight: bold;
       }
+
       p {
         font-size: 1.2rem;
         color: rgba($color: #fff, $alpha: 0.6);
         font-weight: light;
         margin-top: 10px;
       }
+
       a {
         cursor: pointer;
         display: inline-block;
@@ -70,22 +48,33 @@
         outline: none;
         border: 1px solid white;
         color: white;
+        text-decoration: none;
       }
     }
   }
+
   .community_section_right {
     width: 40%;
     background: #000000;
     flex: 1;
     color: white;
-    padding: 100px 50px;
     display: flex;
     justify-content: center;
     flex-direction: column;
     font-family: "Manrope";
 
+    .community_section_subText {
+      padding: 100px 50px 50px;
+      color: white;
+      font-size: 28px;
+
+      a {
+        text-decoration: none;
+      }
+    }
+
     .community_section_heading {
-      color: rgba($color: #fff, $alpha: 0.9);
+      color: rgba($color: #fff, $alpha: 0.4);
       font-size: 1.5rem;
       line-height: normal;
       font-weight: bold;
@@ -95,15 +84,16 @@
         font-weight: 300;
         cursor: pointer;
         display: inline-flex;
-        font-size: 1.2rem;
+        font-size: 20px;
         background-color: transparent;
         padding: 10px 20px;
         border-radius: 50px;
         outline: none;
-        border: 1px solid white;
+        border: 0.89px solid #E9EAEE;
         color: white;
         align-items: center;
         gap: 8px;
+
       }
     }
   }
@@ -156,18 +146,21 @@
       .community_section_left_content {
         width: 80%;
         margin: 2rem auto 5rem 2rem;
+
         .community_section_heading {
           color: rgba($color: #fff, $alpha: 0.4);
           font-size: 1.7rem;
           line-height: normal;
           font-weight: bold;
         }
+
         p {
           font-size: 0.8rem;
           color: rgba($color: #fff, $alpha: 0.6);
           font-weight: light;
           margin-top: 10px;
         }
+
         a {
           cursor: pointer;
           display: inline-block;
@@ -182,6 +175,7 @@
         }
       }
     }
+
     .community_section_right {
       width: 100%;
       background: #000000;
@@ -196,7 +190,8 @@
       .community_section_heading {
         width: 80%;
         margin: 2rem auto 10rem 2rem;
-        div{
+
+        div {
           color: white;
           font-size: 1.2rem;
           line-height: normal;
@@ -222,3 +217,132 @@
     }
   }
 }
+
+.carouselContainer {
+  width: 100%;
+  background-color: #000;
+  min-height: 100px;
+  min-width: 400px;
+}
+
+.slider {
+  background: #000;
+  height: 100px;
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: '';
+    width: 90%;
+    height: 100%;
+    z-index: 9;
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
+  }
+
+  &::after {
+    right: 0;
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
+  }
+}
+
+.carouselContainer {
+  overflow: hidden;
+}
+
+.slider {
+  position: relative;
+}
+
+.slide_track {
+  display: flex;
+  width: calc(100px * 6 * 2);
+  /* Width of the track */
+  animation: scroll 15s linear infinite;
+}
+
+.slide {
+  width: 100px;
+  height: 100px;
+  margin-left: 15px;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.slide img {
+  height: 100%;
+  width: 100%;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.slide::after {
+  position: absolute;
+  right: 5px;
+  top: 6px;
+  content: '';
+  width: 18px;
+  height: 18px;
+  background-image: url("/static/img/slack/Crown.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.slide::before {
+  width: 25px;
+  height: 25px;
+  border-radius: 25px;
+  right: 2px;
+  top: 2px;
+  position: absolute;
+  content: '';
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.numberContainer {
+  display: inline-block;
+  width: 190px;
+  text-align: right;
+}
+
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.numberChange {
+  display: inline-block;
+  animation: slideIn 0.5s ease-in-out;
+}