Add portal header to builder tools and showcase

cardano-foundation · Mar 12, 2021 · dd1e7d4 · dd1e7d4
1 parent b1935ed
commit dd1e7d4
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 40 deletions.
diff --git a/src/pages/showcase/index.js b/src/pages/showcase/index.js
@@ -1,34 +1,45 @@
 
 import React from 'react';
-
-import Image from '@theme/IdealImage';
-import Layout from '@theme/Layout';
-
 import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import Image from '@theme/IdealImage';
 import styles from './styles.module.css';
 import showcases from '../../data/showcases';
 
-const TITLE = 'Showcase';
-const DESCRIPTION =
-  'See the awesome projects people are building with Cardano.';
-const EDIT_URL =
-  'https://github.com/cardano-foundation/developer-portal/edit/main/src/data/showcases.js';
+const TITLE       = 'Showcase';
+const DESCRIPTION = 'See the awesome projects people are building with Cardano';
+const EDIT_URL    = 'https://github.com/cardano-foundation/developer-portal/edit/main/src/data/showcases.js';
+const CTA         = 'Add your project';
+
+function PortalHeader() {
+  return (
+      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{TITLE}</h1>
+          <p className="hero__subtitle">{DESCRIPTION}</p>
+          <div className={styles.buttons}>
+          <Link
+            className={clsx(
+              'button button--outline button--warn button--lg',
+              styles.getStarted,
+            )}
+            href={EDIT_URL}
+            target={'_blank'}>
+            {CTA}
+          </Link>
+        </div>
+        </div>
+      </header> 
+  );
+}
 
 function Showcase() {
   return (
     <Layout title={TITLE} description={DESCRIPTION}>
+      <PortalHeader />
       <main className="container margin-vert--lg">
         <div className="text--center margin-bottom--xl">
-          <h1>{TITLE}</h1>
-          <p>{DESCRIPTION}</p>
-          <p>
-            <a
-              className={'button button--primary button--lg'}
-              href={EDIT_URL}
-              target={'_blank'}>
-              Add your project!
-            </a>
-          </p>
         </div>
         <div className="row">
           {showcases.map((showcase) => (

diff --git a/src/pages/showcase/styles.module.css b/src/pages/showcase/styles.module.css
@@ -5,6 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+ .heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  background-image: url('/img/hero-header-zoom.png');  
+  background-size: cover;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
 .showcaseUser {
   height: 100%;
 }

diff --git a/src/pages/tools/index.js b/src/pages/tools/index.js
@@ -1,34 +1,44 @@
-
 import React from 'react';
-
-import Image from '@theme/IdealImage';
-import Layout from '@theme/Layout';
-
 import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import Image from '@theme/IdealImage';
 import styles from './styles.module.css';
 import tools from '../../data/builder-tools';
 
-const TITLE = 'Builder Tools';
-const DESCRIPTION =
-  'Tools to help you build on Cardano.';
-const EDIT_URL =
-  'https://github.com/cardano-foundation/developer-portal/edit/main/src/data/builder-tools.js';
+const TITLE       = 'Builder Tools';
+const DESCRIPTION = 'Tools to help you build on Cardano';
+const EDIT_URL    =  'https://github.com/cardano-foundation/developer-portal/edit/main/src/data/builder-tools.js';
+const CTA         = 'Add your tool';
+
+function PortalHeader() {
+    return (
+        <header className={clsx('hero hero--primary', styles.heroBanner)}>
+          <div className="container">
+            <h1 className="hero__title">{TITLE}</h1>
+            <p className="hero__subtitle">{DESCRIPTION}</p>
+            <div className={styles.buttons}>
+            <Link
+              className={clsx(
+                'button button--outline button--warn button--lg',
+                styles.getStarted,
+              )}
+              href={EDIT_URL}
+              target={'_blank'}>
+              {CTA}
+            </Link>
+          </div>
+          </div>
+        </header> 
+    );
+  }
 
 function BuilderTools() {
   return (
     <Layout title={TITLE} description={DESCRIPTION}>
+      <PortalHeader />
       <main className="container margin-vert--lg">
         <div className="text--center margin-bottom--xl">
-          <h1>{TITLE}</h1>
-          <p>{DESCRIPTION}</p>
-          <p>
-            <a
-              className={'button button--primary button--lg'}
-              href={EDIT_URL}
-              target={'_blank'}>
-              Add your tool!
-            </a>
-          </p>
         </div>
         <div className="row">
           {tools.map((tool) => (
@@ -80,4 +90,6 @@ function BuilderTools() {
   );
 }
 
-export default BuilderTools;
+export default BuilderTools;
+
+
diff --git a/src/pages/tools/styles.module.css b/src/pages/tools/styles.module.css
@@ -5,6 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+ .heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  background-image: url('/img/hero-header-zoom.png');  
+  background-size: cover;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
 .showcaseUser {
   height: 100%;
 }