Merge pull request #1629 from milvus-io/preview

Preview
milvus-io · Sep 14, 2024 · c7deb72 · c7deb72
2 parents 6b9c12f + 543deb7
commit c7deb72
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 161 deletions.
diff --git a/src/blogs b/src/blogs
diff --git a/src/components/card/solutionCard/index.module.less b/src/components/card/solutionCard/index.module.less
@@ -8,7 +8,7 @@
   width: 100%;
   height: 100%;
   border: 1px solid var(--color-card-border);
-  border-radius: 4px;
+  border-radius: 12px;
   text-decoration: none;
   color: var(--color-doc-primary);
   padding: 16px 19px;

diff --git a/src/components/icons/ArrowRightAltIcon.tsx b/src/components/icons/ArrowRightAltIcon.tsx
@@ -0,0 +1,20 @@
+export const ArrowRightAltIcon = (props: { size?: number; color?: string }) => {
+  const { size = 14, color = '#00131A' } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+    >
+      <path
+        d="M2 7L12.7244 7M12.7244 7L7.57669 12.1477M12.7244 7L7.5767 1.85228"
+        stroke="#00131A"
+        stroke-width="1.3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/src/docs b/src/docs
diff --git a/src/pages/community.jsx b/src/pages/community.jsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import Layout from '@/components/layout/commonLayout';
 import { useTranslation } from 'react-i18next';
 import { DISCORD_INVITE_URL } from '@/consts';
-import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
+import { ArrowRightAltIcon } from '@/components/icons/ArrowRightAltIcon';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import classes from '@/styles/community.module.less';
 import pageClasses from '@/styles/responsive.module.less';
@@ -111,91 +111,94 @@ export default function Community() {
           />
         </Head>
 
-        <section className={clsx(pageClasses.container, classes.headSection)}>
-          <h1 className="">{t('title')}</h1>
+        <div className={classes.communityPageContainer}>
+          <section className={clsx(pageClasses.container, classes.headSection)}>
+            <h1 className="">{t('title')}</h1>
 
-          <ul className={classes.mediaWrapper}>
-            {socialMediaList.map(v => (
-              <li key={v.label}>
-                <img src={v.imgUrl} alt={v.label} />
-                <p className="">{v.label}</p>
-                <Link href={v.href}>Join now</Link>
-              </li>
-            ))}
-          </ul>
+            <ul className={classes.mediaWrapper}>
+              {socialMediaList.map(v => (
+                <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>
+                </li>
+              ))}
+            </ul>
 
-          <div className={classes.officeHoursContainer}>
-            <div className={classes.imgWrapper}>
-              <img src="/images/community/event-discord.png" alt="Discord" />
-            </div>
-            <div className={classes.contentWrapper}>
-              <h2 className={classes.title}>{t('officeHours.title')}</h2>
-              <p className={classes.desc}>{t('officeHours.content')}</p>
+            <div className={classes.officeHoursContainer}>
+              <div className={classes.imgWrapper}>
+                <img src="/images/community/event-discord.png" alt="Discord" />
+              </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"
-              >
-                {t('officeHours.button')}
-              </CustomButton>
+                <CustomButton
+                  variant="contained"
+                  className={classes.linkBtn}
+                  href={OFFICE_HOUR_REGISTER_LINK}
+                  target="_blank"
+                >
+                  {t('officeHours.button')}
+                </CustomButton>
+              </div>
             </div>
-          </div>
-        </section>
-
-        <section
-          className={clsx(pageClasses.container, classes.contentSection)}
-        >
-          <h2>{t('community.title')}</h2>
-          <h3 className={classes.sectionDesc}>{t('community.content')}</h3>
+          </section>
 
-          <ul className={classes.featureWrapper}>
-            {featureList.map(v => (
-              <li key={v.label}>
-                <img src={v.icon} alt={v.label} />
-                <p className={classes.label}>{v.label}</p>
-                <p className={classes.desc}>{v.desc}</p>
-              </li>
-            ))}
-          </ul>
-        </section>
+          <section
+            className={clsx(pageClasses.container, classes.contentSection)}
+          >
+            <h2>{t('community.title')}</h2>
+            <h3 className={classes.sectionDesc}>{t('community.content')}</h3>
 
-        <section className={classes.resourceSection}>
-          <div className={clsx(pageClasses.container, classes.innerSection)}>
-            <h2>{t('resource')}</h2>
-            <ul className={classes.resourceList}>
-              {resourceList.map(v => (
+            <ul className={classes.featureWrapper}>
+              {featureList.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>
-
-                  <Link href={v.href} className={classes.linkBtn}>
-                    {v.btnLabel}
-                    <ArrowRightAltIcon />
-                  </Link>
+                  <img src={v.icon} alt={v.label} />
+                  <p className={classes.label}>{v.label}</p>
+                  <p className={classes.desc}>{v.desc}</p>
                 </li>
               ))}
             </ul>
-          </div>
-        </section>
+          </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 />
-                <span>{v.label}</span>
-              </Link>
-            ))}
-          </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" />
+                  <span>{v.label}</span>
+                </Link>
+              ))}
+            </div>
+          </section>
+        </div>
       </Layout>
     </main>
   );

diff --git a/src/parts/useCase/useCaseCard/index.module.less b/src/parts/useCase/useCaseCard/index.module.less
@@ -19,23 +19,11 @@
     margin-bottom: 10px;
   }
 
-  .linkButton {
-    display: block;
-    padding: 10px 20px;
-    margin: 0;
-    outline: none;
-    border: 1px solid #00a1ea;
-    color: #00a1ea;
-    text-align: center;
-    font-family: 'Roboto Mono';
-    font-size: 14px;
+  .startLinkButton {
+    padding: 8px 28px;
+    width: 100%;
+    .paragraph4();
     font-weight: 500;
-    line-height: 18px;
-    border-radius: 19px;
-
-    &:hover {
-      border-color: #1493cc;
-      color: #1493cc;
-    }
+    justify-content: center;
   }
 }
diff --git a/src/parts/useCase/useCaseCard/index.tsx b/src/parts/useCase/useCaseCard/index.tsx
@@ -1,4 +1,5 @@
 import styles from './index.module.less';
+import CustomButton from '@/components/customButton';
 
 export default function UseCaseCard({ useCase }) {
   const { name, logo, description, link, cta_label } = useCase;
@@ -8,14 +9,16 @@ export default function UseCaseCard({ useCase }) {
       <img src={logo} alt={name} />
       <p className={styles.desc}>{description}</p>
       {link && (
-        <a
+        <CustomButton
           href={link}
           target="_blank"
-          rel="noreferrer"
-          className={styles.linkButton}
+          variant="outlined"
+          classes={{
+            root: styles.startLinkButton,
+          }}
         >
           {cta_label}
-        </a>
+        </CustomButton>
       )}
     </div>
   );