make the get started button on the landing more fancy

src/app/(pages)/page.tsx

@@ -27,19 +27,19 @@ type Button = {
    * open the link in a new tab.
    */
   openInNewTab?: boolean;
+
+  /**
+   * The class name to apply to the button.
+   */
+  className?: string;
 };
 
 const buttons: Button[] = [
   {
     title: "Get Started",
-    tooltip: "Click to get started!",
+    tooltip: "Click to get started with the API",
     url: "/documentation",
-  },
-  {
-    title: "Documentation",
-    tooltip: "Click to open the documentation",
-    url: "https://api.mcutils.xyz/swagger-ui.html",
-    openInNewTab: true,
+    className: "bg-gradient-to-r from-indigo-500 to-emerald-500 px-7 hover:opacity-75 transition-all transform-gpu",
   },
 ];
 
@@ -64,7 +64,7 @@ export default function Home(): ReactElement {
             return (
               <Tooltip key={index}>
                 <TooltipTrigger asChild>
-                  <Button key={index}>
+                  <Button key={index} className={button.className ? button.className : ""}>
                     <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
                       <p>{button.title}</p>
                     </Link>