😀

1 files changed, 43 insertions, 0 deletions

diff --git a/docs/components/pages/home-shared/CTAButton.tsx b/docs/components/pages/home-shared/CTAButton.tsx
new file mode 100644
index 0000000..57da227
--- /dev/null
+++ b/docs/components/pages/home-shared/CTAButton.tsx
@@ -0,0 +1,43 @@
+import cn from "classnames";
+import { MouseEventHandler } from "react";
+import gradients from "./gradients.module.css";
+
+export function CTAButton({
+  children,
+  outline,
+  onClick,
+  monospace,
+}: {
+  outline?: boolean;
+  children: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  monospace?: boolean;
+}) {
+  const outlineClasses =
+    "border dark:border-neutral-400  dark:text-neutral-200 dark:hover:border-white dark:hover:text-white border-[#EAEAEA] text-neutral-800 hover:border-black hover:text-black";
+  const filledClasses =
+    "dark:text-black text-white border-transparent bg-black dark:bg-white";
+
+  return (
+    <div className="relative w-full group">
+      <button
+        onClick={onClick}
+        className={`w-full min-w-[120px] text-base font-medium no-underline ${
+          outline ? outlineClasses : filledClasses
+        } rounded md:leading-6 transition-all duration-300 ${
+          monospace ? "font-mono" : ""
+        }`}
+      >
+        {children}
+      </button>
+      {!outline && (
+        <div
+          className={cn(
+            "absolute bg-red-100 w-full h-full top-0 -z-10 rounded-full transition-all duration-300 blur-xl group-hover:opacity-70 opacity-0",
+            gradients.translatingGlow
+          )}
+        />
+      )}
+    </div>
+  );
+}