Merge pull request #1797 from milvus-io/mark-1704

optimize layout on milvus site

Author: ThyeeZz

src/components/footer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import Link from 'next/link';
 import clsx from 'clsx';
-
+import pageClasses from '@/styles/responsive.module.less';
 import {
   DISCORD_INVITE_URL,
   MILVUS_VIDEO_LINK,
@@ -93,20 +93,20 @@ const Footer = (props: Props) => {
   const { t } = useTranslation('common', { lng: lang });
 
   return (
-    <footer className="min-h-[390px] box-border bg-[#fff] border-t-[1px] border-solid border-[#ECECEE] font-mono">
-      <div
-        className={clsx(
-          'max-w-[1440px] mx-auto px-[48px] py-[80px] md:px-[135px] lg:px-[80px] xl:px-[135px]',
-          root
-        )}
-      >
+    <footer
+      className={clsx(
+        pageClasses.homeContainer,
+        'min-h-[390px] box-border bg-[#fff] border-t-[1px] border-solid border-[#ECECEE] font-mono'
+      )}
+    >
+      <div className={clsx('py-[80px]', root)}>
         <div
           className={clsx(
             'flex flex-col lg:flex-row justify-between space-y-8 lg:space-y-0 lg:space-x-16',
             content
           )}
         >
-          <div className="flex  flex-col items-center max-phone:items-start sm:items-start lg:items-start flex-shrink flex-grow-0 flex-[390px]">
+          <div className="flex  flex-col items-center max-phone:items-start sm:items-start lg:items-start flex-shrink-0 flex-grow-0 flex-[390px]">
             <img
               alt="Milvus logo"
               height="30"

src/pages/404.tsx

@@ -67,7 +67,9 @@ const NotFoundPage = (props: { blogList: BlogDataType[] }) => {
           />
         </Head>
 
-        <section className={clsx(pageClasses.container, styles.navContainer)}>
+        <section
+          className={clsx(pageClasses.homeContainer, styles.navContainer)}
+        >
           <h1 className={styles.pageTitle}>{t('title')}</h1>
           <p className={styles.abstract}>
             <Trans
@@ -93,7 +95,7 @@ const NotFoundPage = (props: { blogList: BlogDataType[] }) => {
           </ul>
         </section>
         <section
-          className={clsx(pageClasses.container, styles.exploreContainer)}
+          className={clsx(pageClasses.homeContainer, styles.exploreContainer)}
         >
           <h2 className="">{t('explore.title')}</h2>
           <p className="">{t('explore.desc')}</p>

src/pages/blog/index.tsx

@@ -577,17 +577,17 @@ const Blog: React.FC<Props> = props => {
         <link rel="alternate" href={absoluteUrl} hrefLang="en" />
       </Head>
       <main>
-        <header className={styles['banner']}>
-          <div className={pageClasses.blogContainer}>
+        <section className={styles['banner']}>
+          <div className={pageClasses.homeContainer}>
             <div className={styles['banner-detail']}>
               {renderRecommend()}
               {renderRecentTabs()}
             </div>
             {renderSubscribe()}
           </div>
-        </header>
+        </section>
         <section className={styles['content']}>
-          <div className={pageClasses.blogContainer}>
+          <div className={pageClasses.homeContainer}>
             <header className={styles['list-header']}>
               {renderFilter()}
               {renderSearcher()}

src/pages/bootcamp.tsx

@@ -35,7 +35,9 @@ export default function Bootcamp(props) {
           />
         </Head>
 
-        <div className={clsx(pageClasses.container, classes.bootcampContainer)}>
+        <div
+          className={clsx(pageClasses.homeContainer, classes.bootcampContainer)}
+        >
           <section className={classes.sectionContainer}>
             <h1 className={classes.seoTitle}>Milvus Bootcamp</h1>
             <h2 className={classes.title}>{title}</h2>

src/pages/community.tsx

@@ -123,7 +123,9 @@ export default function Community() {
         </Head>
 
         <div className={classes.communityPageContainer}>
-          <section className={clsx(pageClasses.container, classes.headSection)}>
+          <section
+            className={clsx(pageClasses.homeContainer, classes.headSection)}
+          >
             <h1 className="">{t('title')}</h1>
 
             <ul className={classes.mediaWrapper}>
@@ -162,7 +164,7 @@ export default function Community() {
           </section>
 
           <section
-            className={clsx(pageClasses.container, classes.contentSection)}
+            className={clsx(pageClasses.homeContainer, classes.contentSection)}
           >
             <h2>{t('community.title')}</h2>
             <h3 className={classes.sectionDesc}>{t('community.content')}</h3>
@@ -179,7 +181,7 @@ export default function Community() {
           </section>
 
           <section
-            className={clsx(pageClasses.container, classes.mailListSection)}
+            className={clsx(pageClasses.homeContainer, classes.mailListSection)}
           >
             <h2>{t('mail.title')}</h2>
             <div className={classes.mailListWrapper}>

src/pages/intro.tsx

@@ -115,7 +115,7 @@ export default function WhatIsMilvus() {
 
       <main>
         <section className={styles.headerSection}>
-          <div className={clsx(pageClasses.container, styles.innerSection)}>
+          <div className={clsx(pageClasses.homeContainer, styles.innerSection)}>
             <h1 className="">{t('title')}</h1>
             <p className={styles.desc}>{t('desc')}</p>
           </div>

src/pages/milvus-demos/index.tsx

@@ -130,13 +130,17 @@ export default function MilvusDemos() {
         </Head>
 
         <section className={classes.headerSection}>
-          <div className={clsx(pageClasses.container, classes.innerSection)}>
+          <div
+            className={clsx(pageClasses.homeContainer, classes.innerSection)}
+          >
             <h1 className={classes.title}>{t('title')}</h1>
             <p className={classes.desc}>{t('desc')}</p>
           </div>
         </section>
 
-        <section className={clsx(pageClasses.container, classes.demoContainer)}>
+        <section
+          className={clsx(pageClasses.homeContainer, classes.demoContainer)}
+        >
           <ul className={classes.demoList}>
             {DEMOS.map(demo => (
               <li key={demo.name}>

src/pages/tools/sizing.tsx

@@ -165,7 +165,10 @@ export default function SizingTool() {
             />
           </div>
 
-          <ZillizAdv className={classes.zillizAdv} />
+          <ZillizAdv
+            className={classes.zillizAdv}
+            ctaLink="https://cloud.zilliz.com/signup?utm_source=partner&utm_medium=referral&utm_campaign=2024-12-19_resouces_milvus-sizing-tool_milvusio"
+          />
         </div>
       </Layout>
     </main>

src/pages/use-cases.tsx

@@ -41,7 +41,9 @@ export default function UseCasesTemplate(props: {
       </Head>
       <main>
         <div className={styles.casePageContainer} ref={scrollContainer}>
-          <div className={clsx(pageClasses.container, styles.contentContainer)}>
+          <div
+            className={clsx(pageClasses.homeContainer, styles.contentContainer)}
+          >
             <section className={styles.headerSection}>
               <Typography variant="h2" component="h1">
                 {t('title')}

src/parts/blogs/zillizAdv/index.tsx

@@ -7,9 +7,12 @@ import clsx from 'clsx';
 const CTA_LINK =
   'https://cloud.zilliz.com/signup?utm_source=partner&utm_medium=referral&utm_campaign=2024-12-19_blog_overview-page_milvusio';
 
-export default function ZillizAdv(props: { className?: string }) {
+export default function ZillizAdv(props: {
+  className?: string;
+  ctaLink?: string;
+}) {
   const { t } = useTranslation('blog');
-  const { className = '' } = props;
+  const { className = '', ctaLink = CTA_LINK } = props;
   const features = [
     t('blog:zillizAdv.feature1'),
     t('blog:zillizAdv.feature2'),
@@ -34,7 +37,7 @@ export default function ZillizAdv(props: { className?: string }) {
         </h3>
         <ul className={styles['zilliz-adv-features']}>{featureItems}</ul>
         <Link
-          href={CTA_LINK}
+          href={ctaLink}
           target="_blank"
           className={styles['zilliz-adv-btn']}
         >

src/styles/404.module.less

@@ -33,7 +33,7 @@
     }
 
     li {
-      flex: 0 0 297px;
+      flex: 0 0 327px;
 
       @media @tablet, @phone {
         flex: auto;

src/styles/responsive.module.less

@@ -56,16 +56,21 @@
 
 .homeContainer {
   margin: 0 auto;
-  max-width: calc(@homepage-content-width + 80px);
-  width: 100%;
-  padding: 0 40px;
+  max-width: 1580px;
+
+  @media @desktop1024, @desktop1440 {
+    width: calc(100vw - 270px);
+  }
+
+  @media @desktop1920 {
+    width: calc(100vw - 340px);
+  }
 
   @media @tablet {
-    max-width: 100%;
-    padding: 0 40px;
+    width: calc((100vw - 180px) / 10 * 8 + 140px);
   }
 
   @media @phone {
-    padding: 0 25px;
+    width: calc(100vw - 50px);
   }
 }

src/styles/sizingTool.module.less

@@ -60,7 +60,7 @@
     margin-bottom: 80px;
     gap: 60px;
 
-    @media @tablet, @phone {
+    @media (max-width: 1280px) {
       flex-direction: column;
     }