Added Distinguished Ambassador card (#1276)

* Added Distinguished Ambassador card * Renamed class * Fixes
qdrant · Nov 8, 2024 · 501e77b · 501e77b
1 parent 1ea328c
commit 501e77b
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 49 deletions.
diff --git a/qdrant-landing/content/stars/stars-list.md b/qdrant-landing/content/stars/stars-list.md
@@ -1,5 +1,17 @@
 ---
 title: Meet our Stars
+mainCards:
+- id: 0
+  headTitle: Distinguished Ambassador
+  headIcon:
+    src: /icons/fill/sparks-purple.svg
+    alt: Sparks
+  image:
+    src: /img/stars/m-k-pavan-kumar.jpg
+    alt: M K Pavan Kumar Photo
+  name: M K Pavan Kumar
+  position: Data Scientist and Lead GenAI
+  description: Kameshwara Pavan Kumar Mantha is a seasoned technology expert with 14 years of extensive experience in full stack development, cloud solutions, and artificial intelligence.<br><br>Specializing in Generative AI and Large Language Models, Pavan has established himself as a leader in these cutting-edge domains.
 cards:
   - id: 0
     image:
@@ -30,84 +42,76 @@ cards:
     position: Founder of SciPhi
     description: Physics PhD, Quant @ Citadel and Founder at SciPhi
   - id: 4
-    image:
-      src: /img/stars/m-k-pavan-kumar.jpg
-      alt: M K Pavan Kumar Photo
-    name: M K Pavan Kumar
-    position: Data Scientist and Lead GenAI
-    description: A seasoned technology expert with 14 years of experience in full stack development, cloud solutions, & artificial intelligence
-    distinguished: true
-  - id: 5
     image:
       src: /img/stars/niranjan-akella.jpg
       alt: Niranjan Akella Photo
     name: Niranjan Akella
     position: Scientist by Heart & AI Engineer
     description: I build & deploy AI models like LLMs, Diffusion Models & Vision Models at scale
-  - id: 6
+  - id: 5
     image:
       src: /img/stars/bojan-jakimovski.jpg
       alt: Bojan Jakimovski Photo
     name: Bojan Jakimovski
     position: Machine Learning Engineer
     description: I'm really excited to show the power of the Qdrant as vector database
-  - id: 7
+  - id: 6
     image:
       src: /img/stars/haydar-kulekci.jpg
       alt: Haydar KULEKCI Photo
     name: Haydar KULEKCI
     position: Senior Software Engineer
     description: I am a senior software engineer and consultant with over 10 years of experience in data management, processing, and software development.
-  - id: 8
+  - id: 7
     image:
       src: /img/stars/nicola-procopio.jpg
       alt: Nicola Procopio Photo
     name: Nicola Procopio
     position: Senior Data Scientist @ Fincons Group
     description: Nicola, a data scientist and open-source enthusiast since 2009, has used Qdrant since 2023. He developed fastembed for Haystack, vector search for Cheshire Cat A.I., and shares his expertise through articles, tutorials, and talks.
-  - id: 9
+  - id: 8
     image:
       src: /img/stars/eduardo-vasquez.jpg
       alt: Eduardo Vasquez Photo
     name: Eduardo Vasquez
     position: Data Scientist and MLOps Engineer
     description: I am a Data Scientist and MLOps Engineer exploring generative AI and LLMs, creating YouTube content on RAG workflows and fine-tuning LLMs. I hold an MSc in Statistics and Data Science.
-  - id: 10
+  - id: 9
     image:
       src: /img/stars/benito-martin.jpg
       alt: Benito Martin Photo
     name: Benito Martin
     position: Independent Consultant | Data Science, ML and AI Project Implementation | Teacher and Course Content Developer
     description: Over the past year, Benito developed MLOps and LLM projects. Based in Switzerland, Benito continues to advance his skills.
-  - id: 11
+  - id: 10
     image:
       src: /img/stars/nirant-kasliwal.jpg
       alt: Nirant Kasliwal Photo
     name: Nirant Kasliwal
     position: FastEmbed Creator
     description: I'm a Machine Learning consultant specializing in NLP and Vision systems for early-stage products. I've authored an NLP book recommended by Dr. Andrew Ng to Stanford's CS230 students and maintain FastEmbed at Qdrant for speed.
-  - id: 12
+  - id: 11
     image:
       src: /img/stars/denzell-ford.jpg
       alt: Denzell Ford Photo
     name: Denzell Ford
     position: Founder at Trieve, has been using Qdrant since late 2022.
     description: Denzell Ford, the founder of Trieve, has been using Qdrant since late 2022. He's passionate about helping people in the community.
-  - id: 13
+  - id: 12
     image:
       src: /img/stars/pavan-nagula.jpg
       alt: Pavan Nagula Photo
     name: Pavan Nagula
     position: Data Scientist | Machine Learning and Generative AI
     description: I'm Pavan, a data scientist specializing in AI, ML, and big data analytics. I love experimenting with new technologies in the AI and ML space, and Qdrant is a place where I've seen such innovative implementations recently.
-  - id: 14
+  - id: 13
     image:
       src: /img/stars/guohao-li.jpg
       alt: Guohao Li Photo
     name: Guohao Li
     position: Founder of Eigent.AI
     description: Guohao Li the founder of Eigent.AI, an artificial intelligence researcher and an open-source contributor working on building intelligent agents that can perceive, learn, communicate, reason, and act. He is the core lead of the open source projects CAMEL-AI.org.
-  - id: 15
+  - id: 14
     image:
       src: /img/stars/sahin-utar.jpg
       alt: Şahin Utar Photo

diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_stars-list.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_stars-list.scss
@@ -16,11 +16,16 @@
     z-index: 1;
   }
 
+  &__cards {
+    row-gap: pxToRem(30);
+  }
+
   &__card {
     position: relative;
     width: 100%;
     max-width: pxToRem(255);
     height: 100%;
+    min-height: pxToRem(375);
     margin: 0 auto;
     padding: $spacer * 1.5;
     border-radius: pxToRem(12);
@@ -52,13 +57,6 @@
       color: $neutral-90;
     }
 
-    &-distinguished {
-      margin-bottom: $spacer * 0.5;
-      font-size: pxToRem(12);
-      line-height: pxToRem(21);
-      color: $secondary-violet-70;
-    }
-
     &-description {
       margin-bottom: 0;
       font-size: pxToRem(14);
@@ -78,6 +76,61 @@
     }
   }
 
+  &__main-card {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: space-between;
+    max-width: none;
+    min-height: auto;
+    gap: $spacer * 1.5;
+
+    &-content {
+      max-width: pxToRem(431);
+    }
+
+    &-head {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: $spacer * 0.5;
+      margin-bottom: $spacer;
+      font-size: pxToRem(14);
+      line-height: pxToRem(21);
+      color: $secondary-violet-70;
+
+      img {
+        width: $spacer;
+        height: $spacer;
+      }
+    }
+
+    &-title {
+      margin-bottom: $spacer * 0.5;
+      font-size: $spacer * 2;
+      line-height: $spacer * 2.5;
+      color: $neutral-98;
+    }
+
+    &-subtitle {
+      color: $neutral-90;
+    }
+
+    &-description {
+      margin-bottom: 0;
+      font-size: pxToRem(14);
+      line-height: pxToRem(21);
+      color: $neutral-60;
+    }
+
+    &-image {
+      position: relative;
+      width: 100%;
+      max-width: pxToRem(431);
+      z-index: 1;
+    }
+  }
+
   &__overlay {
     position: absolute;
     right: 0;
@@ -95,30 +148,23 @@
 
     &__title {
       margin-bottom: $spacer * 5;
-      font-size: $spacer * 4;
+      font-size: $spacer * 3.5;
       line-height: pxToRem(67);
     }
 
-    &__cards > div {
-      &:nth-of-type(1),
-      &:nth-of-type(3) {
-        .stars-list__card {
-          margin: 0 0 0 auto;
-        }
-      }
-
-      &:nth-of-type(2),
-      &:nth-of-type(4) {
-        .stars-list__card {
-          margin: 0 auto 0 0;
-        }
-      }
+    &__cards {
+      row-gap: $spacer * 2.5;
     }
-  }
 
-  @include media-breakpoint-up(xl) {
-    &__card {
-      margin: 0 auto !important;
+    &__main-card {
+      flex-direction: row;
+      align-items: flex-start;
+      padding: $spacer * 3.5 $spacer * 3;
+      text-align: left;
+
+      &-head {
+        justify-content: start;
+      }
     }
   }
 }
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/stars-list.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/stars-list.html
@@ -2,14 +2,28 @@
   <section class="stars-list">
     <div class="container">
       <h2 class="stars-list__title">{{ .Params.title }}</h2>
-      <div class="stars-list__cards row g-4 gy-md-3 justify-content-center">
+      <div class="stars-list__cards row gx-4">
+        {{ range .Params.mainCards }}
+          <div class="col-12">
+            <div class="stars-list__card stars-list__main-card">
+             <div class="stars-list__main-card-content">
+               <p class="stars-list__main-card-head">
+                 {{ .headTitle }}
+                 <img src="{{ .headIcon.src }}" alt="{{ .headIcon.alt }}">
+               </p>
+               <h6 class="stars-list__main-card-title">{{ .name }}</h6>
+               <p class="stars-list__main-card-subtitle">{{ .position }}</p>
+               <p class="stars-list__main-card-description">{{ .description | safeHTML }}</p>
+             </div>
+              <img class="stars-list__main-card-image" src="{{ .image.src }}" alt="{{ .image.alt }}" />
+              <div class="stars-list__card-overlay"></div>
+            </div>
+          </div>
+        {{ end }}
         {{ range .Params.cards }}
-          <div class="col-12 col-md-6 col-xl-3">
+          <div class="col-12 col-md-6 col-lg-4 col-xl-3">
             <div class="stars-list__card">
               <img class="stars-list__card-image" src="{{ .image.src }}" alt="{{ .image.alt }}" />
-              {{ if .distinguished }}
-                <p class="stars-list__card-distinguished">Distinguished Ambassador</p>
-              {{ end }}
               <h6 class="stars-list__card-title">{{ .name }}</h6>
               <p class="stars-list__card-subtitle">{{ .position }}</p>
               <p class="stars-list__card-description">{{ .description }}</p>

diff --git a/qdrant-landing/themes/qdrant-2024/static/icons/fill/sparks-purple.svg b/qdrant-landing/themes/qdrant-2024/static/icons/fill/sparks-purple.svg
diff --git a/qdrant-landing/themes/qdrant-2024/static/img/stars/m-k-pavan-kumar.jpg b/qdrant-landing/themes/qdrant-2024/static/img/stars/m-k-pavan-kumar.jpg