refactor: update homepage style and feature logos. (KusionStack#246)

jueli12 · May 31, 2023 · 6aad551 · 6aad551
1 parent 72085f6
commit 6aad551
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,13 +22,15 @@
     "@svgr/webpack": "^6.3.1",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
+    "flat-color-icons": "^1.1.0",
     "hast-util-is-element": "^1.1.0",
     "minimist": "^1.2.6",
     "nodejieba": "^2.6.0",
     "nth-check": "^2.0.1",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.9.0",
     "remark-math": "^3.0.1",
     "throttle-debounce": "3.0.1",
     "trim": "0.0.3",

diff --git a/src/components/ExampleScroller/index.tsx b/src/components/ExampleScroller/index.tsx
@@ -113,25 +113,6 @@ export const ExampleScroller = () => {
         seCss["section--showcase"],
       )}
     >
-      <h2
-        className={clsx(
-          seCss.section__title,
-          seCss["section__title--wide"],
-          "text--center",
-        )}
-        style={{ color: "var(--ifm-color-primary)" }}
-      >
-        Codify Your Modern Delivery
-      </h2>
-
-      <p
-        className={clsx(
-          "text--center",
-        )}
-      >
-        With configs, models, functions and rules
-      </p>
-
       <div className={shCss.showcase}>
         <div className={shCss.showcase__inner}>
           <div

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -56,12 +56,14 @@
 }
 
 html[data-theme='dark'] {
+  --feature-icon-color: #ffffff;
   --site-color-feedback-background: #f0f8ff;
   --site-color-favorite-background: #1d1e1e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
 }
 
 [data-theme='light'] {
+  --feature-icon-color: #000000;
   --ifm-color-primary: var(--primary-color);
   --ifm-color-secondary: #ffffff;
   --ifm-color-primary-dark: var(--primary-color);

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -10,23 +10,17 @@ import ThemedImage from '@theme/ThemedImage'
 
 import whoIsUsing from '../data/whoIsUsing'
 import styles from './index.module.css'
+import { FcInTransit, FcCollaboration, FcDeployment } from "react-icons/fc";
 
-
-function Feature({ imgUrl, imgDarkUrl, title, description, reverse }) {
+function Feature({ icon, title, description, reverse }) {
   return (
     <div className={clsx('row', styles.feature, reverse && styles.featureReverse)}>
       <div className="col col--6 text--center">
-        <ThemedImage className={styles.featureImage}
-          alt={title}
-          sources={{
-            light: useBaseUrl(imgUrl),
-            dark: useBaseUrl(imgDarkUrl)
-          }}
-        />
+        {icon}
       </div>
-      <div className={clsx('col col--6', styles.featureContent)}>
+      <div className={clsx('col col--6')}>
         <div>
-          <h3 style={{ color: "var(--ifm-color-primary)" }}>{title}</h3>
+          <h3 className={styles.featureTitle} style={{ color: "var(--ifm-color-primary)" }}>{title}</h3>
           <div>{description}</div>
         </div>
       </div>
@@ -84,8 +78,7 @@ function Home() {
         <div className="container">
           <div className="container">
             <Feature
-              imgUrl="/img/features/easy.png"
-              imgDarkUrl="/img/features/easy-white.png"
+              icon={<FcInTransit size={224} />}
               title={<Translate id="home.easyshipping">Easy App Shipping</Translate>}
               description={
                 <>
@@ -116,8 +109,7 @@ function Home() {
               }
             />
             <Feature
-              imgUrl="/img/features/teams.png"
-              imgDarkUrl="/img/features/teams-white.png"
+              icon={<FcCollaboration size={224} />}
               title={<Translate id="home.enterpriseops">Enterprise Declarative DevOps</Translate>}
               description={
                 <>
@@ -149,8 +141,7 @@ function Home() {
               reverse={true}
             />
             <Feature
-              imgUrl="/img/features/enable.png"
-              imgDarkUrl="/img/features/enable-white.png"
+              icon={<FcDeployment size={224} />}
               title={<Translate id="home.platformengineering">Enable Platform Engineering</Translate>}
               description={
                 <>
@@ -189,6 +180,19 @@ function Home() {
         <br></br>
 
         <div className="container">
+          <h2
+            className={clsx(
+              "text--center", styles.poppinsFont,
+            )}
+            style={{ color: "var(--ifm-color-primary)" }}
+          >
+            Codify Your Modern Delivery
+          </h2>
+          <p className={clsx(
+            "text--center", styles.description
+          )}>
+            With configs, models, functions and rules
+          </p>
           <ExampleScroller />
         </div>
 
@@ -199,7 +203,9 @@ function Home() {
 
         <div className="container">
           <div className="container text--center">
-            <h2 className="hero__subtitle" style={{ color: "var(--ifm-color-primary)" }}>
+            <h2 className={clsx(
+              "hero__subtitle", styles.poppinsFont,
+            )} style={{ color: "var(--ifm-color-primary)" }}>
               <Translate id="home.whoisusing">Adopted by</Translate>
             </h2>
             <div className={styles.whiteboard}>
@@ -223,7 +229,9 @@ function Home() {
 
         <div className="container">
           <div className="container text--center">
-            <h2 className="hero__subtitle">
+            <h2 className={clsx(
+              "hero__subtitle", styles.poppinsFont,
+            )} >
               KusionStack is in <Link to="https://cncf.io/">Cloud Native Computing Foundation</Link> landscape
             </h2>
             <br />

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -7,11 +7,6 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
 
-.containerheroBanner {
-  padding-top: 6rem;
-  padding: 6rem 2rem;
-}
-
 .heroLogoWrapper {
   position: relative;
   left: 50%;
@@ -66,24 +61,17 @@
 }
 
 .button {
+  font-family: "Poppins";
   font-weight: 500;
   padding: 12px 25px;
   font-size: 18px;
 }
 
-.featureCard {
-  background-color: var(--feature-card-background);
-  padding: 10px;
-  margin-bottom: 30px;
-}
-
-.featureCardIcon {
-  margin-bottom: 20px;
-}
-
-.featureCardTitle,
-.featureCardBody {
+.poppinsFont,
+.featureTitle,
+.featureBody {
   font-family: "Poppins";
+  font-weight: 600;
 }
 
 @media screen and (max-width: 966px) {
@@ -104,15 +92,6 @@
   }
 }
 
-.heroLogo {
-  width: 80%;
-  height: 80%;
-}
-
-.heroTitle {
-  padding-left: 1.5rem;
-}
-
 .feature {
   margin-bottom: 4.5rem;
 }
@@ -142,11 +121,6 @@
   }
 }
 
-.featureContent {
-  display: flex !important;
-  align-items: center;
-}
-
 .whiteboard {
   margin-top: 3rem;
 }