From 9ad55e57d56574086b16031c08fed97803b590dc Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Mon, 21 Oct 2024 17:25:36 -0400
Subject: [PATCH] add large image component

---
 src/components/Typography.tsx             |  7 ++-
 src/components/custom-page/Hero.tsx       | 33 +++-------
 src/components/custom-page/LargeImage.tsx | 56 ++++++++++++++++-
 src/components/custom-page/Multimedia.tsx | 49 +++++++++++++++
 src/generated/graphqlDirectus.ts          | 74 +++++++++++++++++++++--
 src/graph/directus/customPages.graphql    | 11 ++++
 6 files changed, 198 insertions(+), 32 deletions(-)
 create mode 100644 src/components/custom-page/Multimedia.tsx

diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
index 0bd4d9a7..af25189b 100644
--- a/src/components/Typography.tsx
+++ b/src/components/Typography.tsx
@@ -113,7 +113,12 @@ export const Hero2 = styled.h2<{ $color?: ColorKey }>(({ theme, $color }) => ({
   color: $color && (theme.colors[$color] as string),
 }))
 
-export const Title2 = styled.h3<{ $color?: ColorKey }>(({ theme, $color }) => ({
+export const Title1 = styled.h3<{ $color?: ColorKey }>(({ theme, $color }) => ({
+  ...theme.partials.marketingText.title1,
+  color: $color && (theme.colors[$color] as string),
+}))
+
+export const Title2 = styled.h4<{ $color?: ColorKey }>(({ theme, $color }) => ({
   ...theme.partials.marketingText.title2,
   color: $color && (theme.colors[$color] as string),
 }))
diff --git a/src/components/custom-page/Hero.tsx b/src/components/custom-page/Hero.tsx
index ff64a14b..4076e97e 100644
--- a/src/components/custom-page/Hero.tsx
+++ b/src/components/custom-page/Hero.tsx
@@ -1,15 +1,13 @@
-import { Button, Code, Flex } from '@pluralsh/design-system'
+import { Button, Flex } from '@pluralsh/design-system'
 import Link from 'next/link'
 
-import { getImageUrl } from '@src/consts/routes'
 import { type HeroComponentFragment } from '@src/generated/graphqlDirectus'
 import { cn } from '@src/utils/cn'
 
-import { ImageAspectRatio } from '../AspectRatio'
-import Embed from '../Embed'
 import { Body1, Hero1 } from '../Typography'
 
 import { getSpacingClassName } from './common'
+import { Multimedia } from './Multimedia'
 
 export function Hero({
   spacing,
@@ -22,8 +20,6 @@ export function Hero({
   video_url: videoUrl,
   form,
 }: HeroComponentFragment) {
-  const imageUrl = getImageUrl(image)
-
   return (
     <section className={cn(getSpacingClassName(spacing), 'mx-xxxxxxlarge')}>
       <Flex gap="xxxlarge">
@@ -47,25 +43,12 @@ export function Hero({
             </Button>
           )}
         </Flex>
-        <div className="m-auto flex-1 ">
-          {mediaType === 'image' ? (
-            imageUrl && (
-              <ImageAspectRatio
-                $aspectRatio="16 / 10"
-                $url={imageUrl}
-              />
-            )
-          ) : mediaType === 'video' ? (
-            <Embed
-              aspectRatio="16/10"
-              url={videoUrl ?? ''}
-            />
-          ) : mediaType === 'form' ? (
-            <Code css={{ overflow: 'auto', maxHeight: '500px' }}>
-              {form ?? ''}
-            </Code>
-          ) : null}
-        </div>
+        <Multimedia
+          mediaType={mediaType}
+          image={image}
+          videoUrl={videoUrl}
+          form={form}
+        />
       </Flex>
     </section>
   )
diff --git a/src/components/custom-page/LargeImage.tsx b/src/components/custom-page/LargeImage.tsx
index 56956c7d..ceb0f5d6 100644
--- a/src/components/custom-page/LargeImage.tsx
+++ b/src/components/custom-page/LargeImage.tsx
@@ -1,5 +1,57 @@
+import { Button, Flex } from '@pluralsh/design-system'
+import Link from 'next/link'
+
 import { type LargeImageComponentFragment } from '@src/generated/graphqlDirectus'
 
-export function LargeImage({ spacing }: LargeImageComponentFragment) {
-  return <div>LargeImage</div>
+import { cn } from '../cn'
+import { Body2, OverlineLabel, Title1 } from '../Typography'
+
+import { getSpacingClassName } from './common'
+import { Multimedia } from './Multimedia'
+
+export function LargeImage({
+  spacing,
+  overline,
+  heading,
+  body_text: bodyText,
+  cta_text: ctaText,
+  cta_url: ctaUrl,
+  media_type: mediaType,
+  image,
+  video_url: videoUrl,
+  form,
+}: LargeImageComponentFragment) {
+  return (
+    <section className={cn(getSpacingClassName(spacing), 'mx-xxxxxxlarge')}>
+      <Flex gap="xxxlarge">
+        <Multimedia
+          mediaType={mediaType}
+          image={image}
+          videoUrl={videoUrl}
+          form={form}
+        />
+        <Flex
+          flex={1}
+          flexDirection="column"
+          justifyContent="center"
+          gap="medium"
+        >
+          {overline && <OverlineLabel>{overline}</OverlineLabel>}
+          <Title1>{heading}</Title1>
+          <Body2 $color="text-light">{bodyText}</Body2>
+          {ctaText && (
+            <Button
+              className="mt-medium w-fit"
+              as={Link}
+              target="_blank"
+              rel="noopener noreferrer"
+              href={ctaUrl}
+            >
+              {ctaText}
+            </Button>
+          )}
+        </Flex>
+      </Flex>
+    </section>
+  )
 }
diff --git a/src/components/custom-page/Multimedia.tsx b/src/components/custom-page/Multimedia.tsx
new file mode 100644
index 00000000..ab69eedc
--- /dev/null
+++ b/src/components/custom-page/Multimedia.tsx
@@ -0,0 +1,49 @@
+import { type ComponentProps } from 'react'
+
+import { Code } from '@pluralsh/design-system'
+
+import { getImageUrl } from '@src/consts/routes'
+import { type ImageFileFragment } from '@src/generated/graphqlDirectus'
+
+import { ImageAspectRatio } from '../AspectRatio'
+import Embed from '../Embed'
+
+export function Multimedia({
+  mediaType,
+  image,
+  videoUrl,
+  form,
+  aspectRatio = '16 / 10',
+  ...props
+}: {
+  mediaType: Nullable<string>
+  image: Nullable<ImageFileFragment>
+  videoUrl: Nullable<string>
+  form: Nullable<string>
+  aspectRatio?: string
+} & ComponentProps<'div'>) {
+  const imageUrl = getImageUrl(image)
+
+  return (
+    <div
+      className="m-auto flex-1"
+      {...props}
+    >
+      {mediaType === 'image' ? (
+        imageUrl && (
+          <ImageAspectRatio
+            $aspectRatio={aspectRatio}
+            $url={imageUrl}
+          />
+        )
+      ) : mediaType === 'video' ? (
+        <Embed
+          aspectRatio={aspectRatio}
+          url={videoUrl ?? ''}
+        />
+      ) : mediaType === 'form' ? (
+        <Code css={{ overflow: 'auto', maxHeight: '500px' }}>{form ?? ''}</Code>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/generated/graphqlDirectus.ts b/src/generated/graphqlDirectus.ts
index 029023f8..db658c9e 100644
--- a/src/generated/graphqlDirectus.ts
+++ b/src/generated/graphqlDirectus.ts
@@ -5557,12 +5557,21 @@ export type Create_Job_Listings_Input = {
 };
 
 export type Create_Large_Image_Input = {
+  body_text?: InputMaybe<Scalars['String']['input']>;
+  cta_text?: InputMaybe<Scalars['String']['input']>;
+  cta_url?: InputMaybe<Scalars['String']['input']>;
   date_created?: InputMaybe<Scalars['Date']['input']>;
   date_updated?: InputMaybe<Scalars['Date']['input']>;
+  form?: InputMaybe<Scalars['String']['input']>;
+  heading?: InputMaybe<Scalars['String']['input']>;
   id?: InputMaybe<Scalars['ID']['input']>;
+  image?: InputMaybe<Create_Directus_Files_Input>;
+  media_type?: InputMaybe<Scalars['String']['input']>;
+  overline?: InputMaybe<Scalars['String']['input']>;
   spacing?: InputMaybe<Scalars['String']['input']>;
   user_created?: InputMaybe<Create_Directus_Users_Input>;
   user_updated?: InputMaybe<Create_Directus_Users_Input>;
+  video_url?: InputMaybe<Scalars['String']['input']>;
 };
 
 export type Create_Logo_Strip_Input = {
@@ -6985,14 +6994,33 @@ export type Job_Listings_Filter = {
 
 export type Large_Image = {
   __typename?: 'large_image';
+  body_text?: Maybe<Scalars['String']['output']>;
+  cta_text?: Maybe<Scalars['String']['output']>;
+  cta_url?: Maybe<Scalars['String']['output']>;
   date_created?: Maybe<Scalars['Date']['output']>;
   date_created_func?: Maybe<Datetime_Functions>;
   date_updated?: Maybe<Scalars['Date']['output']>;
   date_updated_func?: Maybe<Datetime_Functions>;
+  form?: Maybe<Scalars['String']['output']>;
+  heading?: Maybe<Scalars['String']['output']>;
   id: Scalars['ID']['output'];
+  image?: Maybe<Directus_Files>;
+  media_type?: Maybe<Scalars['String']['output']>;
+  overline?: Maybe<Scalars['String']['output']>;
   spacing?: Maybe<Scalars['String']['output']>;
   user_created?: Maybe<Directus_Users>;
   user_updated?: Maybe<Directus_Users>;
+  video_url?: Maybe<Scalars['String']['output']>;
+};
+
+
+export type Large_ImageImageArgs = {
+  filter?: InputMaybe<Directus_Files_Filter>;
+  limit?: InputMaybe<Scalars['Int']['input']>;
+  offset?: InputMaybe<Scalars['Int']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  search?: InputMaybe<Scalars['String']['input']>;
+  sort?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
 };
 
 
@@ -7031,12 +7059,21 @@ export type Large_Image_Aggregated = {
 
 export type Large_Image_Aggregated_Count = {
   __typename?: 'large_image_aggregated_count';
+  body_text?: Maybe<Scalars['Int']['output']>;
+  cta_text?: Maybe<Scalars['Int']['output']>;
+  cta_url?: Maybe<Scalars['Int']['output']>;
   date_created?: Maybe<Scalars['Int']['output']>;
   date_updated?: Maybe<Scalars['Int']['output']>;
+  form?: Maybe<Scalars['Int']['output']>;
+  heading?: Maybe<Scalars['Int']['output']>;
   id?: Maybe<Scalars['Int']['output']>;
+  image?: Maybe<Scalars['Int']['output']>;
+  media_type?: Maybe<Scalars['Int']['output']>;
+  overline?: Maybe<Scalars['Int']['output']>;
   spacing?: Maybe<Scalars['Int']['output']>;
   user_created?: Maybe<Scalars['Int']['output']>;
   user_updated?: Maybe<Scalars['Int']['output']>;
+  video_url?: Maybe<Scalars['Int']['output']>;
 };
 
 export type Large_Image_Aggregated_Fields = {
@@ -7047,14 +7084,23 @@ export type Large_Image_Aggregated_Fields = {
 export type Large_Image_Filter = {
   _and?: InputMaybe<Array<InputMaybe<Large_Image_Filter>>>;
   _or?: InputMaybe<Array<InputMaybe<Large_Image_Filter>>>;
+  body_text?: InputMaybe<String_Filter_Operators>;
+  cta_text?: InputMaybe<String_Filter_Operators>;
+  cta_url?: InputMaybe<String_Filter_Operators>;
   date_created?: InputMaybe<Date_Filter_Operators>;
   date_created_func?: InputMaybe<Datetime_Function_Filter_Operators>;
   date_updated?: InputMaybe<Date_Filter_Operators>;
   date_updated_func?: InputMaybe<Datetime_Function_Filter_Operators>;
+  form?: InputMaybe<String_Filter_Operators>;
+  heading?: InputMaybe<String_Filter_Operators>;
   id?: InputMaybe<Number_Filter_Operators>;
+  image?: InputMaybe<Directus_Files_Filter>;
+  media_type?: InputMaybe<String_Filter_Operators>;
+  overline?: InputMaybe<String_Filter_Operators>;
   spacing?: InputMaybe<String_Filter_Operators>;
   user_created?: InputMaybe<Directus_Users_Filter>;
   user_updated?: InputMaybe<Directus_Users_Filter>;
+  video_url?: InputMaybe<String_Filter_Operators>;
 };
 
 export type Logo_Strip = {
@@ -9527,12 +9573,21 @@ export type Update_Job_Listings_Input = {
 };
 
 export type Update_Large_Image_Input = {
+  body_text?: InputMaybe<Scalars['String']['input']>;
+  cta_text?: InputMaybe<Scalars['String']['input']>;
+  cta_url?: InputMaybe<Scalars['String']['input']>;
   date_created?: InputMaybe<Scalars['Date']['input']>;
   date_updated?: InputMaybe<Scalars['Date']['input']>;
+  form?: InputMaybe<Scalars['String']['input']>;
+  heading?: InputMaybe<Scalars['String']['input']>;
   id?: InputMaybe<Scalars['ID']['input']>;
+  image?: InputMaybe<Update_Directus_Files_Input>;
+  media_type?: InputMaybe<Scalars['String']['input']>;
+  overline?: InputMaybe<Scalars['String']['input']>;
   spacing?: InputMaybe<Scalars['String']['input']>;
   user_created?: InputMaybe<Update_Directus_Users_Input>;
   user_updated?: InputMaybe<Update_Directus_Users_Input>;
+  video_url?: InputMaybe<Scalars['String']['input']>;
 };
 
 export type Update_Logo_Strip_Input = {
@@ -9913,7 +9968,7 @@ export type SolutionsQueryVariables = Exact<{
 
 export type SolutionsQuery = { __typename?: 'Query', solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, title?: string | null, description?: string | null, upper_features_title?: string | null, lower_features_title?: string | null, download_section_title?: string | null, download_section_description?: string | null, upper_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, lower_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, problems?: Array<{ __typename?: 'solution_problems', id: string, title?: string | null, subtitle?: string | null, problem?: string | null, solution?: string | null } | null> | null, featured_quote?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | null }> };
 
-export type CustomPageFragment = { __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | null } | null> | null };
+export type CustomPageFragment = { __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null, overline?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | null } | null> | null };
 
 export type CustomPageTinyFragment = { __typename?: 'custom_pages', id: string, slug: string };
 
@@ -9927,7 +9982,7 @@ export type CustomPageQueryVariables = Exact<{
 }>;
 
 
-export type CustomPageQuery = { __typename?: 'Query', custom_pages: Array<{ __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | null } | null> | null }> };
+export type CustomPageQuery = { __typename?: 'Query', custom_pages: Array<{ __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null, overline?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | null } | null> | null }> };
 
 export type HeroComponentFragment = { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null };
 
@@ -9935,7 +9990,7 @@ export type LogoStripComponentFragment = { __typename?: 'logo_strip', spacing?:
 
 export type SectionHeaderComponentFragment = { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null };
 
-export type LargeImageComponentFragment = { __typename?: 'large_image', spacing?: string | null };
+export type LargeImageComponentFragment = { __typename?: 'large_image', spacing?: string | null, overline?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null };
 
 export type CardsComponentFragment = { __typename?: 'cards', spacing?: string | null };
 
@@ -10299,8 +10354,19 @@ export const SectionHeaderComponentFragmentDoc = gql`
 export const LargeImageComponentFragmentDoc = gql`
     fragment LargeImageComponent on large_image {
   spacing
+  overline
+  heading
+  body_text
+  media_type
+  image {
+    ...ImageFile
+  }
+  video_url
+  form
+  cta_text
+  cta_url
 }
-    `;
+    ${ImageFileFragmentDoc}`;
 export const CardsComponentFragmentDoc = gql`
     fragment CardsComponent on cards {
   spacing
diff --git a/src/graph/directus/customPages.graphql b/src/graph/directus/customPages.graphql
index a8321921..dfa69a74 100644
--- a/src/graph/directus/customPages.graphql
+++ b/src/graph/directus/customPages.graphql
@@ -64,6 +64,17 @@ fragment SectionHeaderComponent on section_header {
 
 fragment LargeImageComponent on large_image {
   spacing
+  overline
+  heading
+  body_text
+  media_type
+  image {
+    ...ImageFile
+  }
+  video_url
+  form
+  cta_text
+  cta_url
 }
 
 fragment CardsComponent on cards {