Add icons and descriptions for four features (#64)

* FactoryPicture * preliminary version * detail * correspond2review * fix bug * cleanup --------- Co-authored-by: Twice <twice@apache.org> Co-authored-by: PragmaTwice <twice.mliu@gmail.com>
apache · Mar 20, 2023 · 397050a · 397050a
1 parent de6b3e6
commit 397050a
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 30 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -6,7 +6,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Apache Kvrocks (incubating)',
+  title: 'Apache Kvrocks',
   tagline: 'A distributed key value NoSQL database that uses RocksDB as storage engine and is compatible with Redis protocol',
   url: 'https://kvrocks.apache.org',
   baseUrl: '/',
@@ -64,6 +64,10 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      colorMode: {
+        defaultMode: 'light',
+        disableSwitch: true,
+      },
       navbar: {
         title: 'Apache Kvrocks',
         logo: {
@@ -100,7 +104,7 @@ const config = {
         ],
       },
       footer: {
-        style: 'dark',
+        style: 'light',
         links: [
           {
             title: 'Docs',
@@ -149,9 +153,9 @@ const config = {
         },
         copyright: `<div style="text-align: left;">
           <div>
-            <p style="font-family: Avenir-Medium,serif;font-size: 14px;color: #999;line-height: 20px;"> Apache Kvrocks is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF. </p>
+            <p style="font-family: Avenir-Medium,serif;font-size: 14px;color: rgba(59, 61, 63, 1);line-height: 20px;"> Apache Kvrocks is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF. </p>
           </div>
-          <div style="border-top: 1px solid #ccc;min-height: 60px;line-height: 20px;text-align: center;font-family: Avenir-Medium,serif;font-size: 14px;color: #999;display: flex;align-items: center;"><span>Copyright © ${new Date().getFullYear()} The Apache Software Foundation. Apache Kvrocks, Kvrocks, and its feather logo are trademarks of The Apache Software Foundation.</span></div>
+          <div style="border-top: 1px solid rgba(59, 61, 63, 1);min-height: 60px;line-height: 20px;text-align: center;font-family: Avenir-Medium,serif;font-size: 14px;color: rgba(59, 61, 63, 1);display: flex;align-items: center;"><span>Copyright © ${new Date().getFullYear()} The Apache Software Foundation. Apache Kvrocks, Kvrocks, and its feather logo are trademarks of The Apache Software Foundation.</span></div>
         </div>`,
       },
       prism: {

diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
@@ -1,61 +1,67 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import feature0 from '/img/feature-0.png';
+import feature1 from '/img/feature-1.png';
+import feature2 from '/img/feature-2.png';
+import feature3 from '/img/feature-3.png';
+import feature4 from '/img/feature-4.png';
 
 type FeatureItem = {
+  imgPath:string;
   title: string;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Redis Compatible',
-    description: (
-      <>
-        Users can access Apache Kvrocks via any Redis client.
-      </>
-    ),
-  },
-  {
+    imgPath:feature1,
+
     title: 'Namespace',
     description: (
       <>
-        Similar to Redis SELECT but equipped with token per namespace.
+        Similar to Redis SELECT but equipped with token per namespace
       </>
     ),
   },
   {
+    imgPath:feature2,
     title: 'Replication',
     description: (
       <>
-        Async replication using binlog like MySQL.
+        Async replication using binlog like MySQL
       </>
     ),
   },
   {
+    imgPath:feature3,
     title: 'High Available',
     description: (
       <>
-        Support Redis sentinel to failover when master or slave was failed.
+        Support Redis sentinel to failover when master or slave was failed
       </>
     ),
   },
   {
+    imgPath:feature4,
     title: 'Cluster',
     description: (
       <>
-        Centralized management but accessible via any Redis cluster client.
+        Centralized management but accessible via any Redis cluster client
       </>
     ),
   },
 ];
 
-function Feature({title, description}: FeatureItem) {
+function Feature({imgPath,title, description}: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center padding-horiz--md">
+    <div className={clsx('col col--6')}>
+      <div className="text--center padding-horiz--md" style={{width:'100%',height:'100%',margin:'50px 0px'}}>
+        <img style={{width:'auto',height:'35%',marginBottom:'30px'}} src={imgPath} alt={title}/>
         <h3>{title}</h3>
-        <p>{description}</p>
+        <div style={{width:'100%',display:'flex',justifyContent:'center',alignItems:'center'}}>
+          <p style={{fontFamily:'PingFang SC-Light',fontWeight:'light',color:'rgba(59, 61, 63, 1)',width:'55%'}}>{description}</p>
+        </div>
       </div>
     </div>
   );
@@ -66,6 +72,24 @@ export default function HomepageFeatures(): JSX.Element {
     <section className={styles.features}>
       <div className="container">
         <div className="row">
+          <div className={clsx('col col--12')} style={{marginBottom:'100px'}}>
+            <div className="text--center padding-horiz--md" style={{width:'100%',height:'100%',marginTop:'50px'}}>
+              <h1>Redis Compatible</h1>
+              <div className={styles.blueLine}>
+                <div></div>
+              </div>
+              <p>Users can access Apache Kvrocks via any Redis client</p>
+              {/* <div className={styles.redisCompatible}>
+                <img src={feature0} alt='Redis Compatible'/>
+                <div className={styles.Pie}>
+                  <div className='Pie round'></div>
+                  <div className='Pie-tri'>
+                    <div className={styles.tri}></div>
+                  </div>
+                </div>
+              </div> */}
+            </div>
+          </div>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}

diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -9,3 +9,64 @@
   height: 200px;
   width: 200px;
 }
+
+.blueLine {
+  width:100%;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  margin:20px 0
+}
+
+.blueLine div{
+  width:15%;
+  border-radius:20pt;
+  border:2px solid rgba(0, 114, 252, 1)
+}
+
+.blueLine + p{
+  font-family:'PingFang SC-Light';
+  font-weight:light;
+  color:rgba(59, 61, 63, 1)
+}
+
+.redisCompatible{
+  display:flex;
+  flex-direction:row;
+  position:relative;
+  padding-top:20px
+}
+
+.redisCompatible img{
+  width:60%;
+  float:left;
+  margin:10px 0
+}
+
+.Pie{
+  margin:60px 0
+}
+
+.Pie > div:first-child{
+  width:240px;
+  height:240px;
+  background-color:rgba(60, 119, 235, 1);
+  border-radius:50%;
+  position:absolute;
+  right:80px
+}
+
+.Pie > div:nth-child(2){
+  width:0;
+  height:0;
+  position:absolute;
+  right:250px
+}
+
+.tri{
+  border-left:20px solid transparent;
+  border-right:20px solid transparent;
+  border-bottom:130px solid rgba(247, 136, 107, 1);
+  border-top:0;
+  transform: rotate(150deg)
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -9,6 +9,7 @@
   --ifm-color-primary: #3071a9;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-footer-background-color:rgba(115, 150, 233, 0.61);
 }
 
 .docusaurus-highlight-code-line {
@@ -39,3 +40,16 @@
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
+
+.header-slack-link:hover {
+  opacity: 0.6;
+}
+
+.header-slack-link::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m21.902.148c-3.299%200-5.973%202.68-5.973%205.985a5.979%205.979%200%200%200%205.973%205.985h5.974v-5.985a5.98%205.98%200%200%200%20-5.974-5.985m0%2015.96h-15.929c-3.299%200-5.973%202.68-5.973%205.986%200%203.305%202.674%205.985%205.973%205.985h15.93c3.298%200%205.973-2.68%205.973-5.985%200-3.306-2.675-5.986-5.974-5.986%22%20fill%3D%22%2372c5ef%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m59.734%2022.094c0-3.306-2.675-5.986-5.974-5.986s-5.973%202.68-5.973%205.986v5.985h5.973a5.98%205.98%200%200%200%205.974-5.985m-15.929%200v-15.961a5.98%205.98%200%200%200%20-5.974-5.985c-3.299%200-5.973%202.68-5.973%205.985v15.96c0%203.307%202.674%205.987%205.973%205.987a5.98%205.98%200%200%200%205.974-5.985%22%20fill%3D%22%2368b57f%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m37.831%2060a5.98%205.98%200%200%200%205.974-5.985%205.98%205.98%200%200%200%20-5.974-5.985h-5.973v5.985c0%203.305%202.674%205.985%205.973%205.985m0-15.96h15.93c3.298%200%205.973-2.68%205.973-5.986a5.98%205.98%200%200%200%20-5.974-5.985h-15.929c-3.299%200-5.973%202.68-5.973%205.985a5.979%205.979%200%200%200%205.973%205.985%22%20fill%3D%22%23dfb23b%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m0%2038.054a5.979%205.979%200%200%200%205.973%205.985%205.98%205.98%200%200%200%205.974-5.985v-5.985h-5.974c-3.299%200-5.973%202.68-5.973%205.985m15.929%200v15.96c0%203.306%202.674%205.986%205.973%205.986a5.98%205.98%200%200%200%205.974-5.985v-15.961a5.979%205.979%200%200%200%20-5.974-5.985c-3.299%200-5.973%202.68-5.973%205.985%22%20fill%3D%22%23c6275b%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")
+    no-repeat;
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -18,10 +18,29 @@
 
 .buttons {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: left;
+  justify-content: left;
+}
+
+.buttons a{
+  border-radius:90pt;
+  box-shadow:0pt 5pt 6pt 1pt rgba(48, 113, 169, 0.16);
+  background-color:white;
+  margin-right: 2rem;
+  color:rgba(0, 91, 244, 1);
+  display:flex
 }
 
 .buttons a:first-child {
-  margin-right: 1rem;
+  background-color:rgba(40, 117, 243, 1);
+  box-shadow:0pt 5pt 6pt 1pt rgba(0, 0, 0, 0.16);
+  color:white
+}
+
+.buttons a:nth-child(2){
+  border:1px solid rgba(0, 91, 244, 1);
+}
+
+.buttons a:nth-child(3){
+  border:1px solid rgba(0, 91, 244, 1);
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,27 +6,39 @@ import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 import styles from './index.module.css';
+import Pic from '/img/mainPic.png';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+    <header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage:'linear-gradient(to top, rgba(230, 239, 255, 1) , rgba(255, 255, 255, 1))',textAlign:'left',display:'flex'}}>
+      <div className="container" style={{margin:'0 0 0 10%',width:'40%'}}>
+        <h1 className="hero__title" style={{color:'black'}}>{siteConfig.title}</h1>
+        <h2 className='hero__secondary__title' style={{color:'rgba(40, 117, 243, 1)'}}>(incubating)</h2>
+        <div className="hero__subtitle" style={{color:'rgba(59, 61, 63, 1)',fontWeight:'Light',width:'30rem',marginTop:'2rem'}}>{siteConfig.tagline}</div>
+        <div className={styles.buttons} style={{margin:'10rem 0 0 0'}}>
           <Link
             className="button button--secondary button--lg"
             to="/docs/getting-started">
-            Quick start
+            QUICK START
           </Link>
           <Link
             className="button button--secondary button--lg"
             to="https://github.com/apache/incubator-kvrocks">
-            GitHub
+            <div className='header-github-link' style={{marginRight:'10px'}}></div>
+            GITHUB
+          </Link>
+          <Link
+            className="button button--secondary button--lg"
+            to="https://kvrocks.slack.com/join/shared_invite/zt-p5928e3r-OUAK8SUgC8GOceGM6dAz6w#/shared-invite/email">
+            <div className='header-slack-link' style={{marginRight:'10px'}}></div>
+            SLACK
           </Link>
         </div>
       </div>
+      <div className="image image--main--right" style={{width:'40%'}}>
+        <img src={Pic} />
+      </div>
     </header>
   );
 }

diff --git a/static/img/feature-0.png b/static/img/feature-0.png
diff --git a/static/img/feature-1.png b/static/img/feature-1.png
diff --git a/static/img/feature-2.png b/static/img/feature-2.png
diff --git a/static/img/feature-3.png b/static/img/feature-3.png
diff --git a/static/img/feature-4.png b/static/img/feature-4.png
diff --git a/static/img/mainPic.png b/static/img/mainPic.png