add two column text

src/components/custom-page/TwoColumnText.tsx

@@ -0,0 +1,29 @@
+import { Markdown } from '@pluralsh/design-system'
+
+import { type TwoColumnTextComponentFragment } from '@src/generated/graphqlDirectus'
+
+import { cn } from '../cn'
+
+import { getSpacingClassName } from './common'
+
+export function TwoColumnText({
+  spacing,
+  main_content: mainContent,
+  side_content: sideContent,
+}: TwoColumnTextComponentFragment) {
+  return (
+    <section
+      className={cn(
+        getSpacingClassName(spacing),
+        'mx-xxxxxxlarge flex gap-xxlarge'
+      )}
+    >
+      <div className="w-2/3">
+        <Markdown text={mainContent} />
+      </div>
+      <div className="w-1/3">
+        <Markdown text={sideContent} />
+      </div>
+    </section>
+  )
+}

src/components/custom-page/common.tsx

@@ -9,6 +9,7 @@ import { LargeImage } from './LargeImage'
 import { LogoStrip } from './LogoStrip'
 import { MultiColumnText } from './MultiColumnText'
 import { SectionHeader } from './SectionHeader'
+import { TwoColumnText } from './TwoColumnText'
 
 const spacingToClassName = {
   relaxed: 'my-[192px]',
@@ -37,6 +38,8 @@ export function renderComponent(
       return <Cards {...component} />
     case 'blog_cards':
       return <BlogCards {...component} />
+    case 'two_column_text':
+      return <TwoColumnText {...component} />
     case 'multi_column_text':
       return <MultiColumnText {...component} />
     case 'customer_quote':