Merge pull request #1611 from milvus-io/preview

Preview

src/components/card/DemoCard.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import * as styles from './DemoCard.module.less';
+import styles from './DemoCard.module.less';
 import VideoPlayer from '../videoPlayer';
 import InfoSubmitter from '../infoSubmitter';
 import { useTranslation } from 'react-i18next';
+import CustomButton from '@/components/customButton';
 
 const UNIQUE_EMAIL_ID = 'UNIQUE_EMAIL_ID';
 
@@ -68,39 +69,50 @@ const DemoCard = ({
   };
 
   return (
-    <div className={`${styles.demoCard} ${index % 2 === 1 ? styles.even : ''}`}>
+    <div className={styles.demoCard}>
+      <div className={styles.coverWrapper}>
+        <img src={cover} alt={name} />
+      </div>
       <div className={styles.contentWrapper}>
         <h3>{name}</h3>
         <p>{desc}</p>
         <div className={styles.btnGroup}>
-          {href && (
-            <button className={`${styles.tryBtn}`} onClick={handleSubmitEmail}>
-              Try Demo
-            </button>
-          )}
+          <CustomButton
+            onClick={handleSubmitEmail}
+            className={styles.tryBtn}
+            variant="outlined"
+          >
+            Try Demo
+          </CustomButton>
 
           {videoSrc && (
-            <button className={`${styles.watchBtn}`} onClick={handleWatchVideo}>
+            <CustomButton
+              className={styles.watchBtn}
+              variant="text"
+              onClick={handleWatchVideo}
+              endIcon={
+                <svg
+                  width="14"
+                  height="15"
+                  viewBox="0 0 14 15"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M10.4668 6.85159C10.7334 7.05159 10.7334 7.45159 10.4668 7.65159L3.80009 12.6516C3.47047 12.8988 3.00009 12.6636 3.00009 12.2516V2.25159C3.00009 1.83956 3.47047 1.60437 3.80009 1.85159L10.4668 6.85159Z"
+                    stroke="black"
+                    stroke-width="1.3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              }
+            >
               Watch Demo
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-              >
-                <path
-                  d="m10 16.5 6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                  fill="white"
-                ></path>
-              </svg>
-            </button>
+            </CustomButton>
           )}
         </div>
       </div>
-      <div className={styles.coverWrapper}>
-        <img src={cover} alt={name} />
-      </div>
     </div>
   );
 };

src/components/card/DemoCard.module.less

@@ -3,150 +3,56 @@
 .demoCard {
   display: flex;
   width: 100%;
-  justify-content: space-between;
-
-  @media @tablet {
+  align-items: center;
+  gap: 60px;
+  border: 1px solid @color-black3;
+  background-color: @color-white1;
+  padding: 30px;
+  border-radius: 16px;
+
+  @media @tablet, @phone {
     flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  @media @phone {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  &.even {
-    .coverWrapper {
-      order: 1;
-
-      @media @phone {
-        order: 0;
-      }
-    }
   }
 
   .coverWrapper {
-    order: 0;
-    width: 735px;
-    background-color: #fafafa;
-    filter: drop-shadow(0px 20px 45px rgba(0, 43, 125, 0.25));
-    border-radius: 6px;
+    flex: 1;
+    border-radius: 12px;
     text-align: center;
-    margin-right: 24px;
-
-    @media @tablet {
-      margin-bottom: 48px;
-      max-width: 80%;
-      margin-right: 0;
-    }
-
-    @media @phone {
-      margin-bottom: 24px;
-      max-width: 100%;
-      height: fit-content;
-      margin-right: 0;
-    }
+    overflow: hidden;
+    aspect-ratio: 55 / 27;
 
     img {
       width: 100%;
-
-      @media @tablet {
-        max-width: 100%;
-      }
-
-      @media @phone {
-        width: 100%;
-        height: auto;
-      }
     }
   }
 
   .contentWrapper {
-    order: 1;
-
-    width: 400px;
-
-    @media @phone {
-      max-width: 100%;
-    }
-
-    @media @tablet {
-      text-align: center;
-    }
-
-    @media @phone {
-      text-align: center;
-    }
+    flex: 1;
 
     h3 {
-      font-size: 32px;
-      line-height: 42px;
-      font-weight: 700;
-      margin-bottom: 24px;
-
-      @media @phone {
-        font-size: 20px;
-        line-height: 24px;
-      }
+      .heading3();
+      margin-bottom: 12px;
     }
 
     p {
-      font-size: 16px;
-      line-height: 24px;
-
-      @media @phone {
-        font-size: 14px;
-        line-height: 24px;
-      }
+      .paragraph2-regular();
+      color: @color-black2;
+      margin-bottom: 20px;
     }
 
     .btnGroup {
-      margin-top: 40px;
       display: flex;
       align-items: center;
 
-      @media @tablet {
-        justify-content: center;
-      }
-
-      @media @phone {
-        margin-top: 24px;
-        justify-content: center;
-      }
-
       .tryBtn {
-        text-transform: capitalize;
-        margin-right: 10px;
-        color: #fff;
-        .customButton;
-        .containedBtn;
-      }
-
-      .watchBtn {
-        text-transform: capitalize;
-        display: flex;
-        align-items: center;
-        border-radius: 19px;
-        .customButton;
+        background-color: transparent;
 
         &:hover {
-          color: #00a1ea;
-          svg {
-            path {
-              fill: #00a1ea;
-            }
-          }
+          opacity: 0.7;
         }
+      }
 
-        svg {
-          margin-left: 10px;
-
-          path {
-            fill: #000;
-          }
-        }
+      .watchBtn {
       }
     }
   }

src/i18n/en/demo.json

@@ -10,6 +10,10 @@
       "title": "Image Search",
       "desc": "Images made searchable. Instantaneously return the most similar images from a massive database."
     },
+    "hybridSearch": {
+      "title": "Hybrid Search",
+      "desc": "Experience advanced text search with the BGE-M3 model, delivering precise Dense, Sparse, and Hybrid results for enhanced query relevance."
+    },
     "ossChat": {
       "title": "OSSChat",
       "desc": "Enhanced ChatGPT with documentation, issues, blog posts, community Q&A as knowledge bases. Built for every community and developer."

src/pages/milvus-demos/index.jsx

@@ -12,8 +12,9 @@ import { ABSOLUTE_BASE_URL } from '@/consts';
 import { DEMO_MULTIMODAL_SEARCH_URL } from '@/consts/externalLinks';
 import { useTranslation } from 'react-i18next';
 
-const TITLE = 'Milvus Demos';
-const DESC = 'Milvus vector search demos';
+const TITLE = 'Similarity Search Demos Powered by Milvus';
+const DESC =
+  'Milvus vector database makes it easy to add similarity search to your AI applications. Try demos powered by Milvus and learn how to build them yourself.';
 
 export default function MilvusDemos() {
   const { t } = useTranslation('demo');
@@ -23,7 +24,7 @@ export default function MilvusDemos() {
       name: t('demos.multimodal.title'),
       desc: t('demos.multimodal.desc'),
       href: DEMO_MULTIMODAL_SEARCH_URL,
-      cover: '/images/demos/multimodal-image-search.jpeg',
+      cover: '/images/demos/multimodal-image-search.png',
       lowerCaseName: 'multimodal image search',
     },
     {
@@ -35,19 +36,27 @@ export default function MilvusDemos() {
       videoSrc: 'https://www.youtube.com/watch?v=hkU9hJnhGsU',
       lowerCaseName: 'image search',
     },
+    {
+      name: t('demos.hybridSearch.title'),
+      desc: t('demos.hybridSearch.desc'),
+      href: 'https://demos.milvus.io/hybrid-search/ ',
+      cover: '/images/demos/hybrid-search.png',
+      // videoSrc: 'https://www.youtube.com/watch?v=UvhL2vVZ-f4',
+      lowerCaseName: 'hybrid search',
+    },
     {
       name: t('demos.ossChat.title'),
       desc: t('demos.ossChat.desc'),
       href: 'https://osschat.io/',
-      cover: '/images/demos/ossChat.png',
+      cover: '/images/demos/oss-chat.png',
       // videoSrc: 'https://www.youtube.com/watch?v=UvhL2vVZ-f4',
       lowerCaseName: 'chatbots',
     },
     {
       name: t('demos.chemicalSearch.title'),
       desc: t('demos.chemicalSearch.desc'),
       // href: 'http://molsearch.milvus.io/',
-      cover: '/images/demos/chemical-search.svg',
+      cover: '/images/demos/chemical-structure-search.png',
       videoSrc: 'https://www.youtube.com/watch?v=4u_RZeMBTNI',
       lowerCaseName: 'chemical',
     },