add back get started button

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,18 +33,28 @@ 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>
 
+          <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="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]"
+                  className={buttonClass({ variant: "semiblack" })}
                 >
                   Show Code
                 </button>
@@ -42,6 +65,8 @@ export default function Landing() {
               </div>
             </ControlledModal>
           </div>
+        </div>
+
         <div className="text-center">
           <AppFooter />
         </div>