Merge pull request #188 from apecloud/feat/home

feat: add btn
apecloud · Jan 11, 2024 · f541562 · f541562
2 parents e76f02e + 40399de
commit f541562
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 26 deletions.
diff --git 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
@@ -138,8 +138,8 @@ export default function Home(): JSX.Element {
                   </Link>
                   <a
                     className={styles.actionItem}
-                    href="mailto:[email protected]" 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,16 +152,16 @@ 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>
               <p>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, </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:[email protected]" target="_blank" rel="noreferrer noopener" >
+            <span className={styles.btnText}>Book a demo</span>
+          </a>
+
         </div>
       </div>
     </Layout>