Add new landing hero and assets (#57450)

Author: Ebonsignori

assets/images/banner-images/hero-1.png

@@ -202,6 +202,10 @@ export const schema = {
     product_video_transcript: {
       type: 'string',
     },
+    // Hero image for landing pages
+    heroImage: {
+      type: 'string',
+    },
     interactive: {
       type: 'boolean',
     },

assets/images/banner-images/hero-2.png

@@ -39,6 +39,7 @@ export type ProductLandingContextT = {
   introLinks: Record<string, string> | null
   productVideo: string
   productVideoTranscript: string
+  heroImage?: string
   featuredLinks: Record<string, Array<FeaturedLink>>
   productUserExamples: Array<{ username: string; description: string }>
   productCommunityExamples: Array<{ repo: string; description: string }>
@@ -113,6 +114,7 @@ export const getProductLandingContextFromRequest = async (
     ...pick(page, ['introPlainText', 'beta_product', 'intro']),
     productVideo,
     productVideoTranscript: page.product_video_transcript || null,
+    heroImage: page.heroImage || null,
     hasGuidesPage,
     product: {
       href: productTree.href,

assets/images/banner-images/hero-3.png

@@ -1,14 +1,14 @@
 import { useMemo } from 'react'
 
 import { DefaultLayout } from '@/frame/components/DefaultLayout'
-import { useBespokeContext } from '@/landings/context/BespokeContext'
+import { useLandingContext } from '@/landings/context/LandingContext'
 import { LandingHero } from '@/landings/components/shared/LandingHero'
 import { ArticleGrid } from '@/landings/components/shared/LandingArticleGridWithFilter'
 
 import type { ArticleCardItems } from '@/landings/types'
 
 export const BespokeLanding = () => {
-  const { title, intro, tocItems } = useBespokeContext()
+  const { title, intro, heroImage, introLinks, tocItems } = useLandingContext()
 
   const flatArticles: ArticleCardItems = useMemo(
     () => tocItems.flatMap((item) => item.childTocItems || []),
@@ -18,7 +18,7 @@ export const BespokeLanding = () => {
   return (
     <DefaultLayout>
       <div data-search="article-body">
-        <LandingHero title={title} intro={intro} />
+        <LandingHero title={title} intro={intro} heroImage={heroImage} introLinks={introLinks} />
 
         <div data-search="hide">
           <ArticleGrid flatArticles={flatArticles} />

assets/images/banner-images/hero-4.png

@@ -1,15 +1,15 @@
 import { useMemo } from 'react'
 
 import { DefaultLayout } from '@/frame/components/DefaultLayout'
-import { useDiscoveryContext } from '@/landings/context/DiscoveryContext'
+import { useLandingContext } from '@/landings/context/LandingContext'
 import { LandingHero } from '@/landings/components/shared/LandingHero'
 import { ArticleGrid } from '@/landings/components/shared/LandingArticleGridWithFilter'
 import { LandingCarousel } from '@/landings/components/shared/LandingCarousel'
 
 import type { ArticleCardItems } from '@/landings/types'
 
 export const DiscoveryLanding = () => {
-  const { title, intro, tocItems, recommended } = useDiscoveryContext()
+  const { title, intro, heroImage, introLinks, tocItems, recommended } = useLandingContext()
 
   const flatArticles: ArticleCardItems = useMemo(
     () => tocItems.flatMap((item) => item.childTocItems || []),
@@ -19,7 +19,7 @@ export const DiscoveryLanding = () => {
   return (
     <DefaultLayout>
       <div>
-        <LandingHero title={title} intro={intro} />
+        <LandingHero title={title} intro={intro} heroImage={heroImage} introLinks={introLinks} />
         <LandingCarousel flatArticles={flatArticles} recommended={recommended} />
         <ArticleGrid flatArticles={flatArticles} />
       </div>