Adding CTA

Author: jayair

docs/pages/index.tsx

@@ -14,6 +14,11 @@ export default function Home() {
 
       <h2 className={styles.description}>{SITE.description}</h2>
 
+      <section className={styles.cta}>
+        <a href={SITE.github}>Star us on GitHub</a>
+        <a href={`${SITE.github}/blob/main/README.md`}>View README</a>
+      </section>
+
       <div className={styles.divider}></div>
 
       <section className={styles.about}>
@@ -100,6 +105,10 @@ export default function Home() {
           The goal of OpenNext is to create an open source, framework agnostic,
           serverless adapter for Next.js.
         </p>
+        <p>
+          OpenNext is currently built for AWS but we plan to support any
+          functions as a service platform.
+        </p>
         <p>
           We need your help keeping it up to date and feature complete. Make
           sure to{" "}

docs/styles/Home.module.css

@@ -25,6 +25,11 @@
   max-width: 500px;
   border-top: 1px solid var(--theme-divider);
 }
+@media only screen and (max-width: 480px) {
+  .divider {
+    margin: 3.5rem auto;
+  }
+}
 
 .description {
   margin: 0.5rem 0 0;
@@ -45,6 +50,50 @@
   margin-bottom: 0;
 }
 
+.cta {
+  margin-top: calc(var(--spacing-unit) * 1.25);
+  padding: 0 2rem;
+}
+.cta a {
+  padding: 1rem 2rem;
+  background-color: var(--theme-primary-button-bg);
+  color: var(--theme-bg);
+  border-radius: 7px;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  box-shadow: 0 4px 14px var(--theme-primary-button-shadow);
+  text-align: center;
+  transition: box-shadow 0.2s ease;
+}
+.cta a:hover {
+  box-shadow: 0 6px 20px var(--theme-primary-button-shadow-hover);
+}
+.cta a:last-child {
+  margin-left: 1.65rem;
+  background-color: var(--theme-secondary-button-bg);
+  color: var(--theme-text-light);
+  box-shadow: 0 4px 14px 0 var(--theme-secondary-button-shadow);
+}
+.cta a:last-child:hover {
+  box-shadow: 0 6px 20px 0 var(--theme-secondary-button-shadow-hover);
+}
+@media only screen and (max-width: 480px) {
+  .cta {
+    padding: 0;
+    margin-top: var(--spacing-unit);
+    width: 100%;
+  }
+  .cta a {
+    padding: 1.125rem 0;
+    display: block;
+    width: 100%;
+  }
+  .cta a:last-child {
+    margin-top: 1rem;
+    margin-left: 0;
+  }
+}
+
 .tech {
   align-self: stretch;
 }

docs/styles/globals.css

@@ -29,6 +29,13 @@
   --theme-text-lighter: hsla(var(--color-black), 0.4);
   --theme-accent: hsla(var(--color-green), 1);
 
+  --theme-primary-button-bg: var(--theme-accent);
+  --theme-secondary-button-bg: var(--theme-bg);
+  --theme-primary-button-shadow: hsla(var(--color-green), 0.3);
+  --theme-primary-button-shadow-hover: hsla(var(--color-green), 0.5);
+  --theme-secondary-button-shadow: hsla(var(--color-black), 0.1);
+  --theme-secondary-button-shadow-hover: hsla(var(--color-black), 0.16);
+
   --theme-divider: hsla(var(--color-black), 0.11);
 }
 
@@ -42,6 +49,13 @@
     --theme-text-lighter: hsla(var(--color-white), 0.4);
     --theme-accent: hsla(var(--color-green), 1);
 
+    --theme-primary-button-bg: var(--theme-accent);
+    --theme-secondary-button-bg: var(--theme-code-bg);
+    --theme-primary-button-shadow: hsla(var(--color-green), 0.3);
+    --theme-primary-button-shadow-hover: hsla(var(--color-green), 0.5);
+    --theme-secondary-button-shadow: hsla(var(--color-white), 0.1);
+    --theme-secondary-button-shadow-hover: hsla(var(--color-white), 0.16);
+
     --theme-divider: hsla(var(--color-white), 0.2);
   }