From c9fad01c12c3b2beeb89b2562f4af0e7359d052d Mon Sep 17 00:00:00 2001
From: Roman Grinovski <roman.grinovski@gmail.com>
Date: Tue, 19 Sep 2023 10:46:13 +0200
Subject: [PATCH] add contribute button

---
 src/components/Button/index.tsx          | 5 +++--
 src/components/HowToContribute/index.tsx | 8 ++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 81032e69..2f830f7d 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -6,7 +6,7 @@ type ButtonProps = Props & {
   variant: "primary" | "secondary";
 };
 
-export default function Button({ children, variant, ...rest }: ButtonProps) {
+export default function Button({ children, variant, className, ...rest }: ButtonProps) {
   const Tag = "href" in rest ? Link : "button";
   return (
     <Tag
@@ -16,7 +16,8 @@ export default function Button({ children, variant, ...rest }: ButtonProps) {
         variant === "primary" &&
           "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600-hover hover:text-gray-900",
         variant === "secondary" &&
-          "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50"
+          "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50",
+          className
       )}
     >
       {children}
diff --git a/src/components/HowToContribute/index.tsx b/src/components/HowToContribute/index.tsx
index 7758e0c9..bcf41174 100644
--- a/src/components/HowToContribute/index.tsx
+++ b/src/components/HowToContribute/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import Link, { Props } from "@docusaurus/Link";
+import Link from "@docusaurus/Link";
+import Button from "../Button";
 
 // TODO enter final links once ready
 export default function HowToContribute() {
@@ -9,7 +10,7 @@ export default function HowToContribute() {
         <h2 className="text-center text-3xl md:text-5xl mb-3 md:mb-6 font-bold">
           How to use and contribute to OpenTofu?
         </h2>
-        <p className="text-gray-600 dark:text-gray-500 text-center text-base md:text-xl mb-6 md:mb-12 md:leading-relaxed">
+        <p className="text-gray-600 dark:text-gray-500 text-center text-base md:text-xl mb-3 md:mb-6 md:leading-relaxed">
           The best way to show practical support for the OpenTofu initiative is
           to contribute. This{" "}
           <Link
@@ -22,6 +23,9 @@ export default function HowToContribute() {
           submit issues, how to get involved in the discussion, how to work on
           the code, and how to contribute code changes.
         </p>
+        <Button className="mx-auto max-w-fit" variant="primary" href="https://github.com/opentffoundation/opentf/blob/main/CONTRIBUTING.md">
+          Contribute
+        </Button>
       </div>
     </section>
   );