feat: DC-5348 Add new ai button on landing page

src/components/button/styles.module.scss

@@ -11,7 +11,7 @@
   line-height: 20px;
   text-align: center;
   .leftIcon {
-    margin-right: 4px;
+    margin-right: 8px;
   }
   .fa-arrow-right {
     transition: all 150ms ease-in-out;

src/pages/index.module.scss

@@ -50,6 +50,7 @@
       line-height: 120%;
     }
     .hero-code-wrapper {
+      margin-top: -8px;
       pre[class*="language-"] {
         background: #121521 !important;
         code span {
@@ -83,6 +84,9 @@
             top: 50%;
             transform: translateY(-50%);
           } 
+          code {
+            font-size: 18px;
+          }
         }
         &:hover {
           outline: 1px solid;

src/pages/index.tsx

@@ -11,6 +11,7 @@ import clsx from "clsx";
 import { useRef, useState } from "react";
 
 import Badge from "../components/button/Badge";
+import Button from "../components/button/Button";
 import { SquareLogo } from "../components/GettingStarted";
 import { Tooltip } from "../components/tooltip/Tooltip";
 import CodeBlock from "../theme/CodeBlock";
@@ -205,6 +206,7 @@ function HomepageHeroSection() {
           <CodeBlock className={clsx("language-terminal", styles["hero-code"])}>
             npx prisma init --db
           </CodeBlock>
+          <Button variant="link" color="teal" leftIcon="fa-regular fa-robot" label={"Get Started with Prisma & AI"} link="/ai" style={{ fontSize: `18px` }} />
         </div>
         {/* <Badge
           link="/"

src/theme/CodeBlock/Content/styles.module.scss

@@ -53,7 +53,7 @@
   column-gap: 0.2rem;
   position: absolute;
   /* rtl:ignore */
-  right: calc(var(--ifm-pre-padding) / 2);
+  right: 15px;
   top: calc(var(--ifm-pre-padding) / 2);
 }