add large image component

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

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

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

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