From 7f62550c7a56372230dac2a4e8d459601d8449b1 Mon Sep 17 00:00:00 2001
From: deme <joaommdemenech@gmail.com>
Date: Fri, 21 Apr 2023 14:22:44 -0300
Subject: [PATCH] [website,#778][m]: add Get Started and Gallery button to the
 hero section

---
 site/components/ButtonLink.tsx     | 26 ++++++++++++++++++++++++++
 site/components/Gallery.tsx        |  9 +++++----
 site/components/Hero.tsx           | 10 ++++++++++
 site/components/NewsletterForm.tsx |  2 +-
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 site/components/ButtonLink.tsx

diff --git a/site/components/ButtonLink.tsx b/site/components/ButtonLink.tsx
new file mode 100644
index 00000000..24f4ba94
--- /dev/null
+++ b/site/components/ButtonLink.tsx
@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+export default function ButtonLink({
+  style = 'primary',
+  className = '',
+  href = '',
+  children,
+}) {
+  let styleClassName = '';
+
+  if (style == 'primary') {
+    styleClassName = 'text-primary bg-blue-400 hover:bg-blue-300';
+  } else if (style == 'secondary') {
+    styleClassName =
+      'text-secondary border !border-secondary hover:text-primary hover:bg-blue-300';
+  }
+
+  return (
+    <Link
+      href={href}
+      className={`inline-block h-12 px-6 py-3 border border-transparent text-base font-medium rounded-md focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500 ${styleClassName} ${className}`}
+    >
+      {children}
+    </Link>
+  );
+}
diff --git a/site/components/Gallery.tsx b/site/components/Gallery.tsx
index f109fb35..daf2e890 100644
--- a/site/components/Gallery.tsx
+++ b/site/components/Gallery.tsx
@@ -49,12 +49,13 @@ const items = [
 export default function Gallery() {
   return (
     <Container>
-      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark ">
+      <h2
+        className="text-3xl font-bold text-primary dark:text-primary-dark"
+        id="gallery"
+      >
         Gallery
       </h2>
-      <p className="text-lg mt-8 ">
-        Discover what's being powered by Portal.JS
-      </p>
+      <p className="text-lg mt-8">Discover what's being powered by Portal.JS</p>
       <div className="not-prose my-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         {items.map((item) => {
           return <GalleryItem item={item} />;
diff --git a/site/components/Hero.tsx b/site/components/Hero.tsx
index 50d584e2..286be50f 100644
--- a/site/components/Hero.tsx
+++ b/site/components/Hero.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import { Fragment, useRef } from 'react';
+import ButtonLink from './ButtonLink';
 import NewsletterForm from './NewsletterForm';
 
 const codeLanguage = 'javascript';
@@ -53,6 +54,15 @@ export function Hero() {
               present a single dataset or build a full-scale data
               catalog/portal.
             </p>
+
+            <ButtonLink className="mt-8" href="/docs">
+              Get Started
+            </ButtonLink>
+
+            <ButtonLink className="ml-3" href="#gallery" style="secondary">
+              Gallery
+            </ButtonLink>
+
             <div className="md:max-w-md mx-auto">
               <NewsletterForm />
             </div>
diff --git a/site/components/NewsletterForm.tsx b/site/components/NewsletterForm.tsx
index 2a889daa..f372ae6f 100644
--- a/site/components/NewsletterForm.tsx
+++ b/site/components/NewsletterForm.tsx
@@ -51,7 +51,7 @@ export default function NewsletterForm() {
               >
                 <path d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z" />
               </svg>
-              Notify me
+              Notify Me
             </button>
             <input
               type="text"