simple-module-pagebuilder 0.0.1__py3-none-any.whl

pagebuilder/components/widgets/definition-list-widget.tsx

@@ -0,0 +1,144 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { EyebrowSplitSection } from './_internal/eyebrow-split-section';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type DefinitionSection = {
+  subheading: string;
+  body: string;
+  image1: string;
+  image1Alt: string;
+  image2: string;
+  image2Alt: string;
+};
+
+export type DefinitionItem = {
+  title: string;
+  sections: DefinitionSection[];
+};
+
+export type DefinitionListWidgetProps = {
+  eyebrow: string;
+  heading: string;
+  items: DefinitionItem[];
+};
+
+function SectionImages({ section }: { section: DefinitionSection }) {
+  const imgs = [
+    section.image1 ? { src: section.image1, alt: section.image1Alt } : null,
+    section.image2 ? { src: section.image2, alt: section.image2Alt } : null,
+  ].filter((x): x is { src: string; alt: string } => x !== null);
+  if (imgs.length === 0) return null;
+  return (
+    <div className={imgs.length === 2 ? 'grid grid-cols-2 gap-4' : ''}>
+      {imgs.map((img, i) => (
+        <img
+          // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+          key={i}
+          src={img.src}
+          alt={img.alt}
+          loading="lazy"
+          className="aspect-[3/2] w-full rounded-lg object-cover"
+        />
+      ))}
+    </div>
+  );
+}
+
+export const DefinitionListWidget: ComponentConfig<DefinitionListWidgetProps> = {
+  label: 'Definition list (rich accordion)',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    heading: { type: 'text', label: 'Heading' },
+    items: {
+      type: 'array',
+      label: 'Definitions',
+      arrayFields: {
+        title: { type: 'text', label: 'Title' },
+        sections: {
+          type: 'array',
+          label: 'Sections',
+          arrayFields: {
+            subheading: { type: 'text', label: 'Sub-heading' },
+            body: { type: 'textarea', label: 'Body' },
+            image1: { type: 'text', label: 'Image 1 URL' },
+            image1Alt: { type: 'text', label: 'Image 1 alt' },
+            image2: { type: 'text', label: 'Image 2 URL (optional)' },
+            image2Alt: { type: 'text', label: 'Image 2 alt' },
+          },
+          defaultItemProps: {
+            subheading: '',
+            body: '',
+            image1: '',
+            image1Alt: '',
+            image2: '',
+            image2Alt: '',
+          },
+        },
+      },
+      defaultItemProps: { title: 'New definition', sections: [] },
+      min: 1,
+      max: 20,
+    },
+  },
+  defaultProps: {
+    eyebrow: 'Definitions',
+    heading: 'Definitions',
+    items: [{ title: 'Definition', sections: [] }],
+  },
+  render: ({ eyebrow, heading, items }) => (
+    <EyebrowSplitSection eyebrow={eyebrow} heading={heading}>
+      <div className="border-t border-[#1a353e]/15">
+        {items?.map((item, idx) => (
+          <details
+            // Index key: items have no stable id, and keying by title would
+            // collide on duplicate titles (defaultItemProps.title is fixed).
+            // Reordering in the editor can rebind open-state to a slot — an
+            // accepted editor-only edge until items carry an id.
+            // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+            key={idx}
+            className="group border-b border-[#1a353e]/15"
+            // `open` set at mount only (widget has no state → no re-render
+            // re-asserts it), so the first row starts open but stays toggleable.
+            {...(idx === 0 ? { open: true } : {})}
+          >
+            <summary
+              className="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold"
+              style={{ color: 'var(--pb-heading-color)' }}
+            >
+              {/* Inside <summary>: emphasis only — a nested anchor here
+								    would be invalid HTML and hijack the toggle. */}
+              {renderRichText(item.title || '', { allowLinks: false })}
+              <span
+                aria-hidden="true"
+                className="shrink-0 text-2xl font-light leading-none text-[#1a353e]"
+              >
+                <span className="group-open:hidden">+</span>
+                <span className="hidden group-open:inline">−</span>
+              </span>
+            </summary>
+            <div className="flex flex-col gap-5 pb-6">
+              {item.sections?.map((section, si) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                <div key={si} className="flex flex-col gap-3">
+                  {section.subheading && (
+                    <p className="font-semibold" style={{ color: 'var(--pb-heading-color)' }}>
+                      {renderRichText(section.subheading)}
+                    </p>
+                  )}
+                  {section.body && (
+                    <RichTextBlock
+                      text={section.body}
+                      className="leading-[var(--pb-body-leading,1.625)]"
+                      style={{ color: 'var(--pb-body-color)' }}
+                    />
+                  )}
+                  <SectionImages section={section} />
+                </div>
+              ))}
+            </div>
+          </details>
+        ))}
+      </div>
+    </EyebrowSplitSection>
+  ),
+};

pagebuilder/components/widgets/divider-widget.tsx

@@ -0,0 +1,56 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+
+export type DividerWidgetProps = {
+  thickness: 'thin' | 'medium' | 'thick';
+  style: 'solid' | 'dashed' | 'dotted';
+  color: string;
+};
+
+const THICKNESS_CLASS: Record<DividerWidgetProps['thickness'], string> = {
+  thin: 'border-t',
+  medium: 'border-t-2',
+  thick: 'border-t-4',
+};
+
+const STYLE_CLASS: Record<DividerWidgetProps['style'], string> = {
+  solid: 'border-solid',
+  dashed: 'border-dashed',
+  dotted: 'border-dotted',
+};
+
+export const DividerWidget: ComponentConfig<DividerWidgetProps> = {
+  label: 'Divider',
+  fields: {
+    thickness: {
+      type: 'select',
+      label: 'Thickness',
+      options: [
+        { label: 'Thin', value: 'thin' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Thick', value: 'thick' },
+      ],
+    },
+    style: {
+      type: 'select',
+      label: 'Style',
+      options: [
+        { label: 'Solid', value: 'solid' },
+        { label: 'Dashed', value: 'dashed' },
+        { label: 'Dotted', value: 'dotted' },
+      ],
+    },
+    color: { type: 'text', label: 'Color (CSS value)' },
+  },
+  defaultProps: {
+    thickness: 'thin',
+    style: 'solid',
+    color: '#e5e7eb',
+  },
+  render: ({ thickness, style, color }) => (
+    <hr
+      className={cn('my-6', THICKNESS_CLASS[thickness], STYLE_CLASS[style])}
+      style={{ borderColor: color }}
+    />
+  ),
+};

pagebuilder/components/widgets/eyebrow-section-widget.tsx

@@ -0,0 +1,56 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { CSSProperties } from 'react';
+import { AccentText } from './_internal/accent-text';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type EyebrowSectionWidgetProps = {
+  eyebrow: string;
+  heading: string;
+  body: string;
+};
+
+export const EyebrowSectionWidget: ComponentConfig<EyebrowSectionWidgetProps> = {
+  label: 'Eyebrow + heading + body',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    heading: { type: 'text', label: 'Heading' },
+    body: { type: 'textarea', label: 'Body' },
+  },
+  defaultProps: {
+    eyebrow: 'Our story',
+    heading: 'How we got here',
+    body: 'Body text describing the section in more detail.',
+  },
+  render: ({ eyebrow, heading, body }) => (
+    <section className="container mx-auto px-4 py-12 max-w-3xl">
+      {eyebrow && (
+        <p className="text-sm font-semibold uppercase tracking-wider text-primary-700">
+          {renderRichText(eyebrow)}
+        </p>
+      )}
+      {/* AccentText, not bare renderRichText: this is a display heading on
+				    `--pb-display-weight`, where a plain <strong>'s relative `bolder`
+				    can compute to no visible change. */}
+      {heading && (
+        <h2
+          className="mt-2 text-2xl sm:text-3xl lg:text-4xl"
+          style={{
+            fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+            letterSpacing: 'var(--pb-display-tracking)',
+            fontFamily: 'var(--pb-display-font)',
+            color: 'var(--pb-heading-color)',
+          }}
+        >
+          <AccentText text={heading} />
+        </h2>
+      )}
+      {body && (
+        <RichTextBlock
+          text={body}
+          className="mt-4 text-lg leading-relaxed"
+          style={{ color: 'var(--pb-body-color)' }}
+        />
+      )}
+    </section>
+  ),
+};

pagebuilder/components/widgets/faq-render.tsx

@@ -0,0 +1,268 @@
+/** FAQ types, styles and render — split from faq-widget.tsx, which keeps the
+ *  field definitions, so both stay under the 300-line cap. */
+
+import type { CSSProperties } from 'react';
+
+import { parseMarkdownBlocks } from '../../utils/markdown';
+import { cn } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { DisclosureChevron } from './_internal/disclosure-chevron';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { eyebrowTextStyle } from './_shared';
+
+export type FaqItem = {
+  question: string;
+  answer: string;
+};
+
+export type FaqWidgetProps = {
+  eyebrow: string;
+  title: string;
+  /** Optional paragraph under the title (2-column layout only). */
+  lead?: string;
+  variant: 'cards' | 'divider';
+  /** "muted" wraps the 2-column layout in a soft rounded card (Mowing FAQs). */
+  surface?: 'default' | 'muted';
+  /**
+   * Optional CSS color for the 2-column band background (e.g. a tenant's
+   * program color). When set, the band renders with white text and rules.
+   */
+  surfaceColor?: string;
+  items: FaqItem[];
+};
+
+const DISPLAY_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+  color: 'var(--pb-heading-color)',
+};
+
+// Section heading size: reads `--pb-heading-md` (Mowing → 40px to match the
+// Figma) and falls back to the prior responsive scale (~30→48px) so tenants
+// that don't set the token (GCA, Recodo) render unchanged.
+const HEADING_STYLE: CSSProperties = {
+  ...DISPLAY_STYLE,
+  fontSize: 'var(--pb-heading-md, clamp(1.875rem, 1.3rem + 2.2vw, 3rem))',
+};
+
+/** An answer is light markdown: links, `- ` bullets and `**bold**`. */
+function Answer({ text, inverse }: { text: string; inverse?: boolean }) {
+  return (
+    <div
+      className="pb-5 leading-[var(--pb-body-leading,1.625)]"
+      style={
+        inverse
+          ? { color: 'var(--pb-surface-contrast, #ffffff)', opacity: 0.85 }
+          : { color: 'var(--pb-body-color)' }
+      }
+    >
+      {parseMarkdownBlocks(text || '').map((block, i) =>
+        block.type === 'ul' ? (
+          // biome-ignore lint/suspicious/noArrayIndexKey: blocks are positional slices of one string, re-derived each render
+          <ul key={i} className="list-disc pl-5 [&:not(:first-child)]:mt-3">
+            {block.items.map((li, j) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: list items are positional slices too
+              <li key={j}>{renderRichText(li)}</li>
+            ))}
+          </ul>
+        ) : (
+          // biome-ignore lint/suspicious/noArrayIndexKey: blocks are positional slices of one string, re-derived each render
+          <p key={i} className="[&:not(:first-child)]:mt-3">
+            {renderRichText(block.text)}
+          </p>
+        ),
+      )}
+    </div>
+  );
+}
+
+// Divider-row accordion (thin top/bottom rules, +/- toggle) — the GCA style,
+// shared by the 2-column (our-process) and single-column (FAQs / statements)
+// layouts.
+function DividerItems({ items, inverse = false }: { items: FaqItem[]; inverse?: boolean }) {
+  return (
+    <div
+      className={cn(
+        'border-t-[length:var(--pb-accordion-top-rule,1px)]',
+        inverse ? 'border-white/30' : 'border-[#1a353e]/15',
+      )}
+    >
+      {items?.map((item, idx) => (
+        // Keyed on the question so reordering in the editor carries each row's
+        // open/closed state with it; the index is only a fallback for a blank one.
+        <details
+          key={item.question || `faq-${idx}`}
+          className={cn('group border-b', inverse ? 'border-white/30' : 'border-[#1a353e]/15')}
+        >
+          <summary
+            className="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold"
+            style={{
+              color: inverse ? 'var(--pb-surface-contrast, #ffffff)' : 'var(--pb-heading-color)',
+            }}
+          >
+            {/* Inside <summary>: emphasis only — a nested anchor here would
+                be invalid HTML and hijack the toggle. */}
+            {renderRichText(item.question || '', { allowLinks: false })}
+            <span
+              aria-hidden="true"
+              className={cn(
+                'shrink-0 text-2xl font-light leading-none',
+                !inverse && 'text-[#1a353e]',
+              )}
+              style={inverse ? { color: 'var(--pb-surface-contrast, #ffffff)' } : undefined}
+            >
+              <span className="group-open:hidden">+</span>
+              <span className="hidden group-open:inline">−</span>
+            </span>
+          </summary>
+          <Answer text={item.answer} inverse={inverse} />
+        </details>
+      ))}
+    </div>
+  );
+}
+
+/** Figma 2-column layout: eyebrow left, heading + divider accordion right. */
+function SplitFaq({
+  eyebrow,
+  title,
+  lead,
+  surface,
+  surfaceColor,
+  items,
+}: Required<Pick<FaqWidgetProps, 'eyebrow' | 'title' | 'items'>> &
+  Pick<FaqWidgetProps, 'lead' | 'surface' | 'surfaceColor'>) {
+  const muted = surface === 'muted';
+  const inverse = !!surfaceColor;
+  return (
+    <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+      <div
+        className={cn(
+          'grid gap-8 lg:grid-cols-[var(--pb-split-cols,1fr_2fr)] lg:gap-[var(--pb-split-gap,3rem)]',
+          muted &&
+            !inverse &&
+            'rounded-[12px] bg-[var(--pb-surface-muted,#f3f3f4)] px-8 py-12 lg:px-0 lg:py-20',
+          inverse && 'rounded-[12px] px-8 py-12 lg:px-0 lg:py-20',
+        )}
+        style={inverse ? { backgroundColor: surfaceColor } : undefined}
+      >
+        <p
+          className={cn((muted || inverse) && 'lg:pl-12')}
+          style={{
+            // Eyebrow size/weight/case/tracking are theme-driven; the
+            // fallbacks keep today's look for tenants that don't set them.
+            ...eyebrowTextStyle('1.125rem', '400'),
+            color: inverse
+              ? 'var(--pb-surface-contrast, #ffffff)'
+              : 'var(--pb-heading-color,#161728)',
+          }}
+        >
+          {renderRichText(eyebrow)}
+        </p>
+        <div className="max-w-[var(--pb-split-content-max,none)]">
+          <div className="max-w-[var(--pb-faq-intro-max,none)]">
+            {/* AccentText, not bare renderRichText: these are display headings
+                on `--pb-display-weight`, where a plain <strong>'s relative
+                `bolder` can compute to no visible change. */}
+            {title && (
+              <h2
+                className="mb-8 leading-tight"
+                style={
+                  inverse
+                    ? { ...HEADING_STYLE, color: 'var(--pb-surface-contrast, #ffffff)' }
+                    : HEADING_STYLE
+                }
+              >
+                <AccentText text={title} />
+              </h2>
+            )}
+            {lead && (
+              <RichTextBlock
+                text={lead}
+                className="-mt-4 mb-8 text-lg leading-[var(--pb-body-leading,1.625)]"
+                style={
+                  inverse
+                    ? { color: 'var(--pb-surface-contrast, #ffffff)', opacity: 0.85 }
+                    : { color: 'var(--pb-body-color)' }
+                }
+              />
+            )}
+          </div>
+          <DividerItems items={items} inverse={inverse} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export function FaqRender({
+  eyebrow,
+  title,
+  lead = '',
+  variant = 'cards',
+  surface = 'default',
+  surfaceColor = '',
+  items,
+}: FaqWidgetProps) {
+  // The 2-column layout is opt-in via `eyebrow`.
+  if (eyebrow) {
+    return (
+      <SplitFaq
+        eyebrow={eyebrow}
+        title={title}
+        lead={lead}
+        surface={surface}
+        surfaceColor={surfaceColor}
+        items={items}
+      />
+    );
+  }
+
+  // Single narrow-column divider accordion (FAQs / statements pages — the page
+  // hero already supplies the title, so this is usually just the list).
+  if (variant === 'divider') {
+    return (
+      <section className="container mx-auto max-w-3xl px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+        {title && (
+          <h2 className="mb-8 leading-tight" style={HEADING_STYLE}>
+            <AccentText text={title} />
+          </h2>
+        )}
+        <DividerItems items={items} />
+      </section>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] max-w-3xl">
+      {title && (
+        <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center mb-10" style={DISPLAY_STYLE}>
+          <AccentText text={title} />
+        </h2>
+      )}
+      <div className="space-y-3">
+        {items?.map((item, idx) => (
+          <details
+            key={item.question || `faq-card-${idx}`}
+            className="group rounded-lg border bg-white dark:bg-gray-900 p-4"
+          >
+            <summary
+              className="cursor-pointer flex items-center justify-between text-lg font-semibold list-none"
+              style={{ color: 'var(--pb-heading-color)' }}
+            >
+              {renderRichText(item.question || '', { allowLinks: false })}
+              <DisclosureChevron />
+            </summary>
+            {/* Same light markdown as the divider variant's answers. */}
+            <RichTextBlock
+              text={item.answer}
+              className="mt-3 leading-[var(--pb-body-leading,1.625)]"
+              style={{ color: 'var(--pb-body-color)' }}
+            />
+          </details>
+        ))}
+      </div>
+    </div>
+  );
+}

pagebuilder/components/widgets/faq-widget.tsx

@@ -0,0 +1,64 @@
+/** FAQ widget: field definitions and config assembly.
+ *  Types, styles and render live in faq-render.tsx. */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { FaqRender, type FaqWidgetProps } from './faq-render';
+
+export type { FaqItem, FaqWidgetProps } from './faq-render';
+
+export const FaqWidget: ComponentConfig<FaqWidgetProps> = {
+  label: 'FAQ',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow (enables 2-column layout)' },
+    title: { type: 'text', label: 'Title' },
+    lead: { type: 'textarea', label: 'Lead paragraph (2-column layout)' },
+    variant: {
+      type: 'select',
+      label: 'Style',
+      options: [
+        { label: 'Cards', value: 'cards' },
+        { label: 'Divider rows', value: 'divider' },
+      ],
+    },
+    surface: {
+      type: 'select',
+      label: 'Surface (2-column layout)',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Muted (soft card)', value: 'muted' },
+      ],
+    },
+    surfaceColor: {
+      type: 'text',
+      label: 'Surface color (CSS, white text — optional)',
+    },
+    items: {
+      type: 'array',
+      label: 'Questions',
+      arrayFields: {
+        question: { type: 'text', label: 'Question' },
+        answer: { type: 'textarea', label: 'Answer' },
+      },
+      defaultItemProps: {
+        question: 'Your question?',
+        answer: 'The answer goes here.',
+      },
+      min: 1,
+      max: 30,
+    },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'Frequently asked questions',
+    lead: '',
+    variant: 'cards',
+    surface: 'default',
+    surfaceColor: '',
+    items: [
+      { question: 'How does this work?', answer: 'It just does.' },
+      { question: 'Is it free?', answer: "There's a free plan." },
+    ],
+  },
+  render: (props) => <FaqRender {...props} />,
+};

pagebuilder/components/widgets/feature-card-widget.tsx

@@ -0,0 +1,98 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { CSSProperties } from 'react';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { AccentText } from './_internal/accent-text';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type FeatureCardWidgetProps = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  imageAlt: string;
+  linkLabel: string;
+  linkHref: string;
+};
+
+export const FeatureCardWidget: ComponentConfig<FeatureCardWidgetProps> = {
+  label: 'Feature card (image + text)',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow tag' },
+    title: { type: 'text', label: 'Title' },
+    description: { type: 'textarea', label: 'Description' },
+    imageUrl: createImageField(mediaLibraryAdapter, 'Image URL'),
+    imageAlt: { type: 'text', label: 'Image alt text' },
+    linkLabel: { type: 'text', label: 'Link label' },
+    linkHref: { type: 'text', label: 'Link URL' },
+  },
+  defaultProps: {
+    eyebrow: 'Featured',
+    title: 'A great looking card',
+    description: 'Pair an image with text and a clear call to action.',
+    imageUrl: '',
+    imageAlt: '',
+    linkLabel: 'Read more',
+    linkHref: '#',
+  },
+  render: ({ eyebrow, title, description, imageUrl, imageAlt, linkLabel, linkHref }) => (
+    <article className="container mx-auto px-4 py-16 lg:py-20 sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+      <div className="flex flex-col max-w-screen-lg overflow-hidden border rounded shadow-sm lg:flex-row sm:mx-auto">
+        <div className="relative lg:w-1/2">
+          {imageUrl ? (
+            <img
+              src={imageUrl}
+              alt={imageAlt || title}
+              loading="lazy"
+              className="object-cover w-full lg:absolute h-80 lg:h-full"
+            />
+          ) : (
+            <div className="w-full lg:absolute h-80 lg:h-full bg-gradient-to-br from-gray-200 to-gray-300" />
+          )}
+        </div>
+        <div className="flex flex-col justify-center p-8 lg:p-16 lg:pl-10 lg:w-1/2">
+          {eyebrow && (
+            <p className="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider uppercase rounded-full bg-teal-100 text-teal-800 w-fit">
+              {renderRichText(eyebrow)}
+            </p>
+          )}
+          {/* AccentText, not bare renderRichText: this is a display heading on
+					    `--pb-display-weight`, where a plain <strong>'s relative `bolder`
+					    can compute to no visible change. */}
+          {title && (
+            <h3
+              className="mb-3 text-3xl leading-none sm:text-4xl"
+              style={{
+                fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+                letterSpacing: 'var(--pb-display-tracking)',
+                fontFamily: 'var(--pb-display-font)',
+                color: 'var(--pb-heading-color)',
+              }}
+            >
+              <AccentText text={title} />
+            </h3>
+          )}
+          {description && <RichTextBlock text={description} className="mb-5" />}
+          {linkLabel && (
+            <div className="flex items-center">
+              <a
+                href={linkHref || '#'}
+                className="inline-flex items-center font-semibold transition-colors duration-200 text-primary-700 hover:text-primary-900"
+              >
+                {renderRichText(linkLabel, { allowLinks: false })}
+                <svg
+                  className="inline-block w-3 ml-2"
+                  fill="currentColor"
+                  viewBox="0 0 12 12"
+                  aria-hidden="true"
+                >
+                  <title>Arrow right</title>
+                  <path d="M9.707,5.293l-5-5A1,1,0,0,0,3.293,1.707L7.586,6,3.293,10.293a1,1,0,1,0,1.414,1.414l5-5A1,1,0,0,0,9.707,5.293Z" />
+                </svg>
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </article>
+  ),
+};