Update landing page content and style

3 files changed, 46 insertions, 37 deletions

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 275794b..f46a565 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -8,12 +8,12 @@
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #026fc5;
-  --ifm-color-primary-dark: #0061ac;
-  --ifm-color-primary-darker: #024f8a;
-  --ifm-color-primary-darkest: #003761;
-  --ifm-color-primary-light: #097acf;
-  --ifm-color-primary-lighter: #1389e4;
-  --ifm-color-primary-lightest: #209af8;
+  --ifm-color-primary-dark: #0264b1;
+  --ifm-color-primary-darker: #025ea7;
+  --ifm-color-primary-darkest: #014e8a;
+  --ifm-color-primary-light: #027ad9;
+  --ifm-color-primary-lighter: #0280e3;
+  --ifm-color-primary-lightest: #0690fc;
   --ifm-code-font-size: 95%;
 }
 
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index ca209fc..1b1fc65 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -7,36 +7,33 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
 
 const features = [
-  // {
-  //   title: <>Easy to Use</>,
-  //   imageUrl: 'img/undraw_docusaurus_mountain.svg',
-  //   description: (
-  //     <>
-  //       Docusaurus was designed from the ground up to be easily installed and
-  //       used to get your website up and running quickly.
-  //     </>
-  //   ),
-  // },
-  // {
-  //   title: <>Focus on What Matters</>,
-  //   imageUrl: 'img/undraw_docusaurus_tree.svg',
-  //   description: (
-  //     <>
-  //       Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-  //       ahead and move your docs into the <code>docs</code> directory.
-  //     </>
-  //   ),
-  // },
-  // {
-  //   title: <>Powered by React</>,
-  //   imageUrl: 'img/undraw_docusaurus_react.svg',
-  //   description: (
-  //     <>
-  //       Extend or customize your website layout by reusing React. Docusaurus can
-  //       be extended while reusing the same header and footer.
-  //     </>
-  //   ),
-  // },
+  {
+    title: <>Powered by Zephyr™</>,
+    imageUrl: "img/undraw_zephyr.svg",
+    description: (
+      <>
+        With a wide range of architecture support, ZMK is ready for many existing keyboards.
+      </>
+    ),
+  },
+  {
+    title: <>Permissive Licensing</>,
+    imageUrl: "img/undraw_open_source.svg",
+    description: (
+      <>
+        MIT licensed to remove any future limitations in innovation.
+      </>
+    ),
+  },
+  {
+    title: <>Wireless First</>,
+    imageUrl: "img/undraw_wireless.svg",
+    description: (
+      <>
+        Designed for the future, including wireless support.
+      </>
+    ),
+  },
 ];
 
 function Feature({ imageUrl, title, description }) {
@@ -69,7 +66,7 @@ function Home() {
           <div className={styles.buttons}>
             <Link
               className={classnames(
-                "button button--outline button--secondary button--lg",
+                "button button--outline button--lg",
                 styles.getStarted
               )}
               to={useBaseUrl("docs/")}
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css
index c1aa851..3f90e3d 100644
--- a/docs/src/pages/styles.module.css
+++ b/docs/src/pages/styles.module.css
@@ -10,6 +10,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: linear-gradient(150deg, #026fc5, #7929d2);
+  color: #fff;
 }
 
 @media screen and (max-width: 966px) {
@@ -18,6 +20,16 @@
   }
 }
 
+.getStarted {
+  color: #fff;
+}
+
+.getStarted:hover {
+  background: #fff;
+  color: #000;
+  border-color: #fff;
+}
+
 .buttons {
   display: flex;
   align-items: center;