From c8c6a2d6c7aaf7f3b20adba9699731e58e11899e Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Mon, 7 Jun 2021 17:04:20 -0700
Subject: [PATCH] set up hero header

---
 components/Breadcrumbs.tsx                    |  2 +-
 .../context/ProductSubLandingContext.tsx      | 10 +++++++++-
 components/landing/ProductSubLanding.tsx      |  8 +++++---
 components/landing/SubLandingHero.tsx         | 19 +++++++++++++++++++
 components/landing/SubLandingSection.tsx      | 17 +++++++++++++++++
 5 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 components/landing/SubLandingHero.tsx
 create mode 100644 components/landing/SubLandingSection.tsx

diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index 2393efe687..7e9e2427b4 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -14,7 +14,7 @@ export const Breadcrumbs = (props: Props) => {
   const router = useRouter()
   const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
-
+  console.log(pathWithLocale)
   return (
     <nav className="breadcrumbs f5" aria-label="Breadcrumb">
       {Object.values(breadcrumbs).map((breadcrumb) => {
diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index f24883e5c1..40fafdf38e 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -2,6 +2,8 @@ import { createContext, useContext } from 'react'
 import pick from 'lodash/pick'
 
 export type ProductSubLandingContextT = {
+  title: string,
+  intro: string,
 }
 
 export const ProductSubLandingContext = createContext<ProductSubLandingContextT | null>(null)
@@ -19,6 +21,12 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 }
 
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
+  const productTree = req.context.currentProductTree
   const page = req.context.page
-  return {}
+  return {
+    ...pick(page, [
+      'intro',
+    ]),
+    title: req.context.productMap[req.context.currentProduct].name + ' guides'
+  }
 }
diff --git a/components/landing/ProductSubLanding.tsx b/components/landing/ProductSubLanding.tsx
index b94d7185e2..9aacb126f2 100644
--- a/components/landing/ProductSubLanding.tsx
+++ b/components/landing/ProductSubLanding.tsx
@@ -7,6 +7,8 @@ import React from 'react'
 import { GuideCards } from './GuideCards'
 import { LandingSection } from './LandingSection'
 import { Breadcrumbs } from 'components/Breadcrumbs'
+import { SubLandingSection } from 'components/landing/SubLandingSection'
+import { SubLandingHero } from 'components/landing/SubLandingHero'
 
 export const ProductSubLanding = () => {
   const {
@@ -15,9 +17,9 @@ export const ProductSubLanding = () => {
 
   return (
     <DefaultLayout>
-      <LandingSection className="pt-3">
-        <Breadcrumbs />
-      </LandingSection>
+      <SubLandingSection>
+        <SubLandingHero />
+      </SubLandingSection>
     </DefaultLayout>
   )
 }
diff --git a/components/landing/SubLandingHero.tsx b/components/landing/SubLandingHero.tsx
new file mode 100644
index 0000000000..973c94eed0
--- /dev/null
+++ b/components/landing/SubLandingHero.tsx
@@ -0,0 +1,19 @@
+import { Breadcrumbs } from '../Breadcrumbs'
+import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+
+export const SubLandingHero = () => {
+  const { title, intro } = useProductSubLandingContext()
+  return (
+    <header className='d-flex gutter mb-6'>
+      <div className='col-12'>
+        <Breadcrumbs />
+        <h1 className='my-3 font-mktg'>{title}</h1>
+        <div 
+          className='lead-mktg color-text-secondary f4 description-text' 
+          dangerouslySetInnerHTML={{ __html: intro }} 
+        />
+      
+      </div>
+    </header>
+  )
+}
\ No newline at end of file
diff --git a/components/landing/SubLandingSection.tsx b/components/landing/SubLandingSection.tsx
new file mode 100644
index 0000000000..d7ff0819c6
--- /dev/null
+++ b/components/landing/SubLandingSection.tsx
@@ -0,0 +1,17 @@
+import cx from 'classnames'
+
+type Props = {
+  title?: React.ReactNode
+  sectionLink?: string
+  children?: React.ReactNode
+  className?: string
+}
+export const SubLandingSection = ({ title, children, className, sectionLink }: Props) => {
+  return (
+    <div className={cx('container-xl px-3 px-md-6 pt-3 pb-2', className)} id={sectionLink}>
+      <h1 className='my-3 font-mktg'>{title}</h1>
+      {children}
+    </div>
+    
+  )
+}