Merge pull request #1796 from milvus-io/mark-1711

update community page

Author: ThyeeZz

public/images/community/office-hours.svg public/images/community/office-hour.svg

@@ -1,9 +1,10 @@
 {
   "title": "Join the Community",
+  "ctaLabel": "Join now",
   "officeHours": {
-    "title": "Join the Milvus Discord Community",
-    "content": "Find help, discover solutions, share ideas, and follow discussions. Get notified of upcoming Zilliz events!",
-    "button": "Join the Milvus Discord Server! "
+    "title": "Get Expert Help at Milvus Office Hours",
+    "content": "Book a free 1:1 session to get help with your production deployment from Zilliz, the experts on Milvus.",
+    "button": "Book Your Session"
   },
   "community": {
     "title": "Welcome to the Milvus Community",

public/images/community/socialMedia/linkedin.svg

@@ -10,6 +10,7 @@ import pageClasses from '@/styles/responsive.module.less';
 import clsx from 'clsx';
 import { ABSOLUTE_BASE_URL } from '@/consts';
 import CustomButton from '@/components/customButton';
+import { RightTopArrowIcon } from '@/components/icons/RightTopArrow';
 
 const OFFICE_HOUR_REGISTER_LINK = 'https://discord.com/invite/8uyFbECzPX';
 
@@ -32,11 +33,21 @@ export default function Community() {
       imgUrl: '/images/community/socialMedia/reddit.svg',
       href: 'https://www.reddit.com/r/vectordatabase/',
     },
+    {
+      label: 'Youtube',
+      imgUrl: '/images/community/socialMedia/youtube.svg',
+      href: 'https://www.youtube.com/@MilvusVectorDatabase/playlists',
+    },
     {
       label: 'Twitter',
       imgUrl: '/images/community/socialMedia/twitter.svg',
       href: 'https://twitter.com/milvusio',
     },
+    {
+      label: 'LinkedIn',
+      imgUrl: '/images/community/socialMedia/linkedin.svg',
+      href: 'https://www.linkedin.com/company/the-milvus-project/',
+    },
   ];
 
   const featureList = [
@@ -120,26 +131,29 @@ export default function Community() {
                 <li key={v.label}>
                   <img src={v.imgUrl} alt={v.label} />
                   <p className="">{v.label}</p>
-                  <CustomButton variant="outlined" href={v.href}>
-                    Join now
+                  <CustomButton
+                    variant="outlined"
+                    href={v.href}
+                    className={classes.linkBtn}
+                  >
+                    {t('ctaLabel')}
+                    <RightTopArrowIcon />
                   </CustomButton>
                 </li>
               ))}
             </ul>
 
             <div className={classes.officeHoursContainer}>
-              <div className={classes.imgWrapper}>
-                <img src="/images/community/event-discord.png" alt="Discord" />
-              </div>
+              <div className={classes.imgWrapper}></div>
               <div className={classes.contentWrapper}>
                 <h2 className={classes.title}>{t('officeHours.title')}</h2>
                 <p className={classes.desc}>{t('officeHours.content')}</p>
 
                 <CustomButton
                   variant="contained"
                   className={classes.linkBtn}
-                  href={OFFICE_HOUR_REGISTER_LINK}
-                  target="_blank"
+                  href="/blog/join-milvus-office-hours-to-get-support-from-vectordb-experts.md"
+                  endIcon={<RightTopArrowIcon />}
                 >
                   {t('officeHours.button')}
                 </CustomButton>
@@ -164,35 +178,14 @@ export default function Community() {
             </ul>
           </section>
 
-          <section className={classes.resourceSection}>
-            <div className={clsx(pageClasses.container, classes.innerSection)}>
-              <h2>{t('resource')}</h2>
-              <ul className={classes.resourceList}>
-                {resourceList.map(v => (
-                  <li key={v.label}>
-                    <div className={classes.topContent}>
-                      <img src={v.icon} alt={v.label} />
-                      <p className={classes.label}>{v.label}</p>
-                      <p className={classes.desc}>{v.desc}</p>
-                    </div>
-
-                    <CustomButton variant="outlined" href={v.href}>
-                      {v.btnLabel} <ArrowRightAltIcon />
-                    </CustomButton>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </section>
-
           <section
             className={clsx(pageClasses.container, classes.mailListSection)}
           >
             <h2>{t('mail.title')}</h2>
             <div className={classes.mailListWrapper}>
               {mailList.map(v => (
                 <Link className={classes.linkBtn} href={v.href}>
-                  <MailOutlineIcon fontSize="14" />
+                  <MailOutlineIcon />
                   <span>{v.label}</span>
                 </Link>
               ))}