set up hero header

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) => {

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'
+  }
 }

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>
   )
 }

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>
+  )
+}

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>
+    
+  )
+}