Experiment-driven Update: Quicklinks in header (#6178)

dbt-labs · Oct 18, 2024 · 42975b2 · 42975b2
2 parents 6e15224 + b8e7d43
commit 42975b2
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/website/src/components/hero/index.js b/website/src/components/hero/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './styles.module.css';
 
-function Hero({ heading, subheading, showGraphic = false, customStyles = {}, classNames = '', colClassNames = '' }) {
+function Hero({ heading, subheading, showGraphic = false, customStyles = {}, classNames = '', colClassNames = '', callToActionsTitle, callToActions = [] }) {
   return (
     <header className={` ${styles.Hero} container-fluid ${classNames ? classNames : ''}`} style={customStyles && customStyles}>
       {showGraphic && (
@@ -12,6 +12,22 @@ function Hero({ heading, subheading, showGraphic = false, customStyles = {}, cla
           <div className={`col col--7 ${colClassNames ? colClassNames : ''}`}>
             <h1>{heading}</h1>
             <p>{subheading}</p>
+            {callToActionsTitle && <span className={styles.callToActionsTitle}>{callToActionsTitle}</span>}
+            {callToActions.length > 0 && (
+              <div className={styles.callToActions}>
+                {callToActions.map((c, index) => (
+                  c.href ? (
+                    <a key={index} href={c.href} title={c.title} className={`${styles.callToAction}`} target={c.newTab ? '_blank' : '_self'}>
+                      {c.title}
+                    </a>
+                  ) : (
+                    <a key={index} onClick={c.onClick} className={`${styles.callToAction}`}>
+                      {c.title}
+                    </a>
+                  )
+                ))}
+              </div>
+            )}
           </div>
         </div>
       </div>

diff --git a/website/src/components/hero/styles.module.css b/website/src/components/hero/styles.module.css
@@ -49,3 +49,34 @@
     width: 60%;
   }
 }
+
+.callToActionsTitle {
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-size: 1.25rem;
+  display: block;
+}
+
+.callToActions {
+  display: flex;
+  flex-flow: wrap;
+  gap: 0.8rem;
+  justify-content: center;
+}
+
+.callToAction {
+  outline: #fff solid 1px;
+  border-radius: 4px;
+  padding: 0 12px;
+  color: #fff;
+  transition: all .2s;
+  cursor: pointer;
+}
+
+.callToAction:hover, .callToAction:active, .callToAction:focus {
+  text-decoration: none;
+  outline: rgb(4, 115, 119) solid 1px;
+  background-color: rgb(4, 115, 119);
+  color: #fff;
+}
diff --git a/website/src/components/quickstartGuideList/index.js b/website/src/components/quickstartGuideList/index.js
@@ -61,7 +61,7 @@ function QuickstartList({ quickstartData }) {
 
     // Update the URL with the new search parameters
     history.replace({ search: params.toString() });
-};
+  };
 
   // Handle all filters
   const handleDataFilter = () => {
@@ -98,6 +98,30 @@ function QuickstartList({ quickstartData }) {
     handleDataFilter();
   }, [selectedTags, selectedLevel, searchInput]); // Added searchInput to dependency array
 
+  // Set the featured guides that will show as CTAs in the hero section
+  // The value of the tag must match a tag in the frontmatter of the guides in order for the filter to apply after clicking
+  const heroCTAs = [
+    {
+      title: 'Quickstart guides',
+      value: 'Quickstart'
+    },
+    {
+      title: 'Use Jinja to improve your SQL code',
+      value: 'Jinja'
+    },
+    {
+      title: 'Orchestration',
+      value: 'Orchestration'
+    },
+  ];
+
+  // Function to handle CTA clicks
+  const handleCallToActionClick = (value) => {
+    const params = new URLSearchParams(location.search);
+    params.set('tags', value);
+    history.replace({ search: params.toString() });
+  };
+
   return (
     <Layout>
       <Head>
@@ -111,6 +135,13 @@ function QuickstartList({ quickstartData }) {
         showGraphic={false}
         customStyles={{ marginBottom: 0 }}
         classNames={styles.quickstartHero}
+        callToActions={heroCTAs.map(guide => ({
+          title: guide.title,
+          href: guide.href,
+          onClick: () => handleCallToActionClick(guide.value),
+          newTab: guide.newTab
+        }))}
+        callToActionsTitle={'Popular guides'}
       />
       <section id='quickstart-card-section'>
         <div className={`container ${styles.quickstartFilterContainer} `}>
@@ -135,7 +166,7 @@ function QuickstartList({ quickstartData }) {
         </div>
       </section>
     </Layout>
-  )
+  );
 }
 
 export default QuickstartList;