From 7a09e8fdcab6f1a91e661e1844a56006f8a10819 Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Wed, 12 Jan 2022 21:13:09 -0600
Subject: [PATCH] add back get started button

---
 packages/website/app/routes/index.tsx | 53 ++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/packages/website/app/routes/index.tsx b/packages/website/app/routes/index.tsx
index 023a91a..6a7c185 100644
--- a/packages/website/app/routes/index.tsx
+++ b/packages/website/app/routes/index.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import dotsBackgroundUrl from "~/assets/dots-background.svg"
 import { AppFooter } from "~/modules/app/app-footer"
 import { AppLogo } from "~/modules/app/app-logo"
@@ -7,6 +8,18 @@ import { maxWidthContainer } from "~/modules/ui/components"
 import { LandingAnimation } from "../modules/landing/landing-animation"
 import { ControlledModal } from "../modules/ui/modal"
 
+const buttonClass = ({ variant }: { variant: "solid" | "semiblack" }) => {
+  const variantClass = {
+    solid: clsx`bg-emerald-700 hover:bg-emerald-800`,
+    semiblack: clsx`bg-black/25 hover:bg-black/40`,
+  }[variant]
+
+  return clsx(
+    "inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg hover:translate-y-[-2px] hover:shadow",
+    variantClass,
+  )
+}
+
 export default function Landing() {
   return (
     <>
@@ -20,28 +33,40 @@ export default function Landing() {
         </header>
         <div className="flex flex-col gap-4 my-auto px-4">
           <AppLogo className="w-full max-w-lg mx-auto" />
+
           <div className="max-w-md w-full mx-auto">
             <LandingAnimation />
           </div>
+
           <p className="text-center text-lg font-light -mb-1">
             Create interactive Discord messages with React.
           </p>
 
-          <ControlledModal
-            button={(button) => (
-              <button
-                {...button}
-                className="px-3 py-1.5 font-medium bg-black/25 text-sm rounded-full self-center hover:bg-black/40 transition active:transition-none active:translate-y-[2px]"
-              >
-                Show Code
-              </button>
-            )}
-          >
-            <div className="text-sm sm:text-base">
-              <LandingCode />
-            </div>
-          </ControlledModal>
+          <div className="flex gap-4 self-center">
+            <a
+              href="/guides/getting-started"
+              className={buttonClass({ variant: "solid" })}
+            >
+              Get Started
+            </a>
+
+            <ControlledModal
+              button={(button) => (
+                <button
+                  {...button}
+                  className={buttonClass({ variant: "semiblack" })}
+                >
+                  Show Code
+                </button>
+              )}
+            >
+              <div className="text-sm sm:text-base">
+                <LandingCode />
+              </div>
+            </ControlledModal>
+          </div>
         </div>
+
         <div className="text-center">
           <AppFooter />
         </div>