neat landing page

packages/docs/app/routes/index.tsx

@@ -1,10 +1,26 @@
-export default function Index() {
+import { Link } from "remix"
+import LandingExample from "~/landing-example.mdx"
+
+export default function Landing() {
   return (
-    <main>
-      <h1>Reacord</h1>
-      <pre>code snippet here</pre>
-      <p>Create interactive Discord messages using React and JSX.</p>
-      <button>Get Started</button>
+    <main className="flex min-w-0 min-h-screen p-4 text-center">
+      <div className="w-full max-w-screen-md px-4 py-6 m-auto space-y-5 rounded-lg shadow-md bg-slate-800">
+        <h1 className="text-6xl font-light">reacord</h1>
+        <div className="w-full overflow-x-auto">
+          <section className="mx-auto text-sm shadow w-fit sm:text-base">
+            <LandingExample />
+          </section>
+        </div>
+        <p className="px-8 text-2xl font-light">
+          Create interactive Discord messages using React and JSX.
+        </p>
+        <Link
+          to="/docs/guides/getting-started"
+          className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md "
+        >
+          Get Started
+        </Link>
+      </div>
     </main>
   )
 }