From 40399dee0de1c421f154d3fdbb6fec5e4f40187b Mon Sep 17 00:00:00 2001
From: "zhouxinyi@apecloud.com" <zhouxinyi@apecloud.com>
Date: Thu, 11 Jan 2024 18:26:24 +0800
Subject: [PATCH] feat: add btn

---
 src/pages/index.module.less | 53 ++++++++++++++++++++++---------------
 src/pages/index.tsx         | 16 +++++++----
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/pages/index.module.less b/src/pages/index.module.less
index dfa1b0a21..9ea7d87dc 100644
--- a/src/pages/index.module.less
+++ b/src/pages/index.module.less
@@ -164,26 +164,6 @@
           }
           .btnText{
             color: #fff;
-            // background: #fff
-            //   linear-gradient(
-            //   -135deg,
-            //   transparent 25%,
-            //   #a4c8fe  30%,
-            //   #ffb88f 50%,
-            //   #faff72 60%,
-            //   transparent 60%,
-            //   transparent
-            //   );
-            // background-size: 80px 60px;
-            // background-clip: text;
-            // background-repeat: no-repeat;
-            // -webkit-text-fill-color: transparent;
-            // -webkit-animation: btnScratchy 3s linear infinite;
-            // -moz-animation: btnScratchy 3s linear infinite;
-            // -ms-animation: btnScratchy 3s linear infinite;
-            // -o-animation: btnScratchy 3s linear infinite;
-            // animation: btnScratchy 3s linear infinite;
-            // color: transparent;
           }
         }
       }
@@ -313,10 +293,10 @@
   }
 }
 .features {
+  text-align: center;
   background: #fff;
   padding: 60px 0;
   h1 {
-    text-align: center;
     font-size: 54px;
     margin-bottom:40px;
     color: #313d4d;
@@ -345,6 +325,37 @@
       }
     }
   }
+  .actionItem {
+    width: 260px;
+    margin: 0px 12px;
+    font-weight: 700;
+    padding: 12px 30px;
+    text-decoration: none;
+    transition: 0.3s;
+    display: inline-block;
+    vertical-align: middle;
+    box-sizing: border-box;
+    transition-duration: 0.3s;
+    font-size: 18px;
+    border-radius: 32px;
+    text-align: center;
+    border: 1px solid #313d4d;
+    background-color: #313d4d;
+    &:hover {
+      border: 1px solid #e6e6e6;
+      cursor: pointer;
+      animation: btnSlider 0.5s;
+      text-decoration: none;
+      box-shadow: 0 0 8px 3px #afafb1;
+      background-color: #4e6583;
+      .btnText{
+        color: #fff;
+      }
+    }
+    .btnText{
+      color: #fff;
+    }
+  }
 }
 
 @media (max-width: 1360px) {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 553524b6c..0e3a81632 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -138,8 +138,8 @@ export default function Home(): JSX.Element {
                   </Link>
                   <a
                     className={styles.actionItem}
-                    href="mailto:marcom@apecloud.com" target="_blank" rel="noreferrer noopener" >
-                    <span className={styles.btnText}>Book a demo</span>
+                    href="https://console.kubeblocks.io/" target="" rel="noreferrer noopener" >
+                    <span className={styles.btnText}>KubeBlocks Cloud</span>
                   </a>
                 </div>
               </div>
@@ -152,7 +152,7 @@ export default function Home(): JSX.Element {
         <div className={styles.description}>
           <div className={styles.content}>
             <h1>Why you need KubeBlocks</h1>
-            {isMedium? <div className={styles.context}>
+            {isMedium ? <div className={styles.context}>
               <p>Building data infrastructure on K8s becomes increasingly popular. However, the most prominent obstacles are</p>
               <p>the difficulties of integrating with cloud providers, the lack of reliable operators, and the steep learning</p>
               <p>curve of K8s. KubeBlocks offers an open-source option that helps application developers and platform</p>
@@ -160,8 +160,8 @@ export default function Home(): JSX.Element {
               <p>No need to be a K8s professional, anyone can set up a full-stack, </p>
               <p>production-ready data infrastructure in minutes.</p>
             </div> : <div className={styles.context}>
-              <p>Building data infrastructure on K8s becomes increasingly popular. However, the most prominent obstacles are the difficulties of integrating with cloud providers, the lack of reliable operators, and the steep learning curve of K8s. 
- KubeBlocks offers an open-source option that helps application developers and platform engineers set up feature-rich services for RDBMS, NoSQL, streaming and analytical systems. </p>  
+              <p>Building data infrastructure on K8s becomes increasingly popular. However, the most prominent obstacles are the difficulties of integrating with cloud providers, the lack of reliable operators, and the steep learning curve of K8s.
+                KubeBlocks offers an open-source option that helps application developers and platform engineers set up feature-rich services for RDBMS, NoSQL, streaming and analytical systems. </p>
               <p>No need to be a K8s professional, anyone can set up a full-stack, production-ready data infrastructure in minutes.</p>
             </div>}
             <div className={styles.text}>Created by <span>ApeCloud</span></div>
@@ -197,6 +197,12 @@ export default function Home(): JSX.Element {
               )
             })}
           </ul>
+          <a
+            className={styles.actionItem}
+            href="mailto:marcom@apecloud.com" target="_blank" rel="noreferrer noopener" >
+            <span className={styles.btnText}>Book a demo</span>
+          </a>
+
         </div>
       </div>
     </Layout>