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

pagebuilder/components/widgets/site-header-widget.tsx

@@ -0,0 +1,182 @@
+/** Site header for the layout's header slot: utility bar + primary nav bar. */
+
+import type { ComponentConfig } from '@puckeditor/core';
+import { Menu, X } from 'lucide-react';
+import { useId, useState } from 'react';
+
+import { createCheckboxField, createImageField, mediaLibraryAdapter } from '../../fields';
+import { SOCIAL_ICON_OPTIONS, SocialIcon, type SocialIconName } from './_shared';
+import { DesktopNav, MobileNav, type SiteNavItem } from './site-header-nav';
+
+export interface UtilityLink {
+  label: string;
+  href: string;
+  /** Empty renders the label as text; otherwise the icon replaces it. */
+  icon?: SocialIconName | '';
+}
+
+export interface SiteHeaderWidgetProps {
+  logoUrl: string;
+  logoAlt: string;
+  homeHref: string;
+  utilityLinks: UtilityLink[];
+  navItems: SiteNavItem[];
+  ctaLabel: string;
+  ctaHref: string;
+  sticky: boolean;
+}
+
+function UtilityBar({ links }: { links: UtilityLink[] }) {
+  if (links.length === 0) return null;
+  return (
+    <div className="bg-primary-800 text-white">
+      <div className="mx-auto flex h-10 max-w-[1440px] items-center justify-end gap-4 px-4 text-[13px] sm:gap-6 sm:px-6 lg:px-12">
+        {links.map((link, index) => (
+          <a
+            // biome-ignore lint/suspicious/noArrayIndexKey: author rows are not uniquely identified until filled in
+            key={index}
+            href={link.href || '#'}
+            aria-label={link.icon ? link.label : undefined}
+            className="opacity-90 transition-opacity hover:opacity-100"
+          >
+            {link.icon ? <SocialIcon name={link.icon} className="size-4" /> : link.label}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function SiteHeaderRender({
+  logoUrl,
+  logoAlt,
+  homeHref,
+  utilityLinks,
+  navItems,
+  ctaLabel,
+  ctaHref,
+  sticky,
+}: SiteHeaderWidgetProps) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const mobileMenuId = useId();
+
+  return (
+    // The public page wraps this slot in its own <header>, which is exactly as
+    // tall as this block — so `position: sticky` here would have nothing to
+    // travel within. The attribute lets widgets-base.css make that *wrapper*
+    // sticky instead; see the `:has()` rule there.
+    <div data-pb-site-header={sticky ? 'sticky' : 'static'} className="gca-display">
+      <UtilityBar links={utilityLinks} />
+
+      <div className="border-b border-[color:var(--border,#e4e6e7)] bg-[var(--pb-surface,#fff)]">
+        <div className="mx-auto flex h-[72px] max-w-[1440px] items-center justify-between px-4 sm:px-6 lg:h-[112px] lg:px-12">
+          <a href={homeHref || '/'} aria-label={logoAlt || 'Home'}>
+            {logoUrl ? (
+              <img src={logoUrl} alt={logoAlt} className="h-10 w-auto lg:h-16" />
+            ) : (
+              <span className="text-sm font-bold uppercase leading-tight tracking-wide text-primary-800">
+                {logoAlt || 'Home'}
+              </span>
+            )}
+          </a>
+
+          <DesktopNav items={navItems} />
+
+          {ctaLabel && (
+            <a
+              href={ctaHref || '#'}
+              className="hidden rounded-[var(--pb-button-radius,9999px)] bg-primary-800 px-6 py-2.5 text-[17px] font-semibold text-white transition-colors hover:bg-primary-900 lg:inline-block"
+            >
+              {ctaLabel}
+            </a>
+          )}
+
+          <button
+            type="button"
+            onClick={() => setMobileOpen((open) => !open)}
+            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={mobileOpen}
+            aria-controls={mobileMenuId}
+            className="-mr-2 inline-flex size-10 items-center justify-center rounded-md text-primary-800 transition-colors hover:text-primary-900 lg:hidden"
+          >
+            {mobileOpen ? <X className="size-6" /> : <Menu className="size-6" />}
+          </button>
+        </div>
+      </div>
+
+      {mobileOpen && (
+        <MobileNav
+          id={mobileMenuId}
+          items={navItems}
+          ctaLabel={ctaLabel}
+          ctaHref={ctaHref}
+          onNavigate={() => setMobileOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+export const SiteHeaderWidget: ComponentConfig<SiteHeaderWidgetProps> = {
+  label: 'Site header (logo + navigation)',
+  fields: {
+    logoUrl: createImageField(mediaLibraryAdapter, 'Logo'),
+    logoAlt: { type: 'text', label: 'Logo alt text' },
+    homeHref: { type: 'text', label: 'Logo link' },
+    utilityLinks: {
+      type: 'array',
+      label: 'Utility bar (top strip)',
+      arrayFields: {
+        label: { type: 'text', label: 'Label' },
+        href: { type: 'text', label: 'Link' },
+        icon: {
+          type: 'select',
+          label: 'Show as icon (optional)',
+          options: [{ label: 'Text label', value: '' }, ...SOCIAL_ICON_OPTIONS],
+        },
+      },
+      defaultItemProps: { label: 'Link', href: '#', icon: '' },
+      getItemSummary: (item) => item.label || 'Link',
+      max: 8,
+    },
+    navItems: {
+      type: 'array',
+      label: 'Navigation',
+      arrayFields: {
+        label: { type: 'text', label: 'Label' },
+        href: { type: 'text', label: 'Link (ignored when sub-links are set)' },
+        children: {
+          type: 'array',
+          label: 'Sub-links (makes this a dropdown)',
+          arrayFields: {
+            label: { type: 'text', label: 'Label' },
+            href: { type: 'text', label: 'Link' },
+          },
+          defaultItemProps: { label: 'Sub-link', href: '#' },
+          getItemSummary: (child) => child.label || 'Sub-link',
+          max: 10,
+        },
+      },
+      defaultItemProps: { label: 'Section', href: '#', children: [] },
+      getItemSummary: (item) => item.label || 'Section',
+      max: 10,
+    },
+    ctaLabel: { type: 'text', label: 'Call-to-action label' },
+    ctaHref: { type: 'text', label: 'Call-to-action link' },
+    sticky: createCheckboxField('Stick to the top of the page on scroll'),
+  },
+  defaultProps: {
+    logoUrl: '',
+    logoAlt: 'Home',
+    homeHref: '/',
+    utilityLinks: [],
+    navItems: [
+      { label: 'Home', href: '/', children: [] },
+      { label: 'Contact', href: '#', children: [] },
+    ],
+    ctaLabel: '',
+    ctaHref: '#',
+    sticky: true,
+  },
+  render: SiteHeaderRender,
+};

pagebuilder/components/widgets/social-banner-widget.tsx

@@ -0,0 +1,83 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { renderRichText } from './_internal/rich-text';
+
+export type SocialBannerLink = {
+  label: string;
+  href: string;
+  iconUrl: string;
+};
+
+export type SocialBannerWidgetProps = {
+  heading: string;
+  subheading: string;
+  links: SocialBannerLink[];
+};
+
+export const SocialBannerWidget: ComponentConfig<SocialBannerWidgetProps> = {
+  label: 'Social banner (follow links)',
+  fields: {
+    heading: { type: 'text', label: 'Heading' },
+    subheading: { type: 'text', label: 'Subheading' },
+    links: {
+      type: 'array',
+      label: 'Links',
+      arrayFields: {
+        label: { type: 'text', label: 'Label' },
+        href: { type: 'text', label: 'URL' },
+        iconUrl: createImageField(mediaLibraryAdapter, 'Icon URL'),
+      },
+      defaultItemProps: {
+        label: 'Twitter',
+        href: '#',
+        iconUrl: '',
+      },
+      min: 1,
+      max: 10,
+    },
+  },
+  defaultProps: {
+    heading: 'Follow us',
+    subheading: 'Stay up to date with the latest news.',
+    links: [
+      { label: 'Twitter', href: '#', iconUrl: '' },
+      { label: 'GitHub', href: '#', iconUrl: '' },
+    ],
+  },
+  render: ({ heading, subheading, links }) => (
+    <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+      <div className="rounded-2xl bg-[var(--secondary,#1a353e)] px-6 py-14 text-center text-white sm:py-16">
+        {heading && (
+          <h2
+            className="mx-auto max-w-3xl leading-tight"
+            style={{
+              fontFamily: 'var(--pb-display-font)',
+              fontWeight: 'var(--pb-display-weight)',
+              fontSize: 'var(--pb-heading-lg, clamp(1.875rem, 1.3rem + 2.5vw, 3rem))',
+            }}
+          >
+            {renderRichText(heading)}
+          </h2>
+        )}
+        {subheading && <p className="mt-3 text-lg text-white/80">{renderRichText(subheading)}</p>}
+        {links && links.length > 0 && (
+          <div className="mt-6 flex flex-wrap items-center justify-center gap-8">
+            {links.map((link, idx) => (
+              <a
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                key={idx}
+                href={link.href || '#'}
+                className="inline-flex items-center gap-2 text-xl font-semibold transition-opacity hover:opacity-80"
+              >
+                {link.iconUrl && (
+                  <img src={link.iconUrl} alt="" loading="lazy" className="size-5 object-contain" />
+                )}
+                {renderRichText(link.label, { allowLinks: false })}
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  ),
+};

pagebuilder/components/widgets/stats-widget.tsx

@@ -0,0 +1,200 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { CSSProperties } from 'react';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { cn } from '../../utils/widgetUtils';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type StatItem = {
+  value: string;
+  label: string;
+  iconUrl?: string;
+};
+
+export type StatsWidgetProps = {
+  title: string;
+  subtitle: string;
+  items: StatItem[];
+  surface: 'default' | 'lime' | 'cards';
+};
+
+// Display tokens for the title/numbers — weight/tracking/font come from the
+// per-tenant page-builder theme (see styles.css `:root` for Recodo defaults and
+// `.gca-root` for the GCA overrides). Color is overridden in the lime surface.
+const DISPLAY_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+};
+
+export const StatsWidget: ComponentConfig<StatsWidgetProps> = {
+  label: 'Statistics',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    subtitle: { type: 'textarea', label: 'Subtitle' },
+    items: {
+      type: 'array',
+      label: 'Statistics',
+      arrayFields: {
+        value: { type: 'text', label: 'Value' },
+        label: { type: 'text', label: 'Label' },
+        iconUrl: createImageField(mediaLibraryAdapter, 'Icon image (optional)'),
+      },
+      defaultItemProps: { value: '100+', label: 'Item' },
+      min: 1,
+      max: 12,
+    },
+    surface: {
+      type: 'select',
+      label: 'Surface',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Lime', value: 'lime' },
+        { label: 'Cards', value: 'cards' },
+      ],
+    },
+  },
+  defaultProps: {
+    title: "We're trusted by thousands",
+    subtitle: 'Numbers that speak for themselves',
+    items: [
+      { value: '10K+', label: 'Users' },
+      { value: '99.9%', label: 'Uptime' },
+      { value: '24/7', label: 'Support' },
+    ],
+    surface: 'default',
+  },
+  render: (props) => <StatsView {...props} />,
+};
+
+// Presentational stats — shared by the static base widget (above) and the app's
+// live, data-driven override, so both render identically.
+export function StatsView({ title, subtitle, items, surface }: StatsWidgetProps) {
+  const count = items?.length ?? 0;
+
+  if (surface === 'cards') {
+    return (
+      <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+        {count > 0 && (
+          <dl className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {items.map((stat, idx) => (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                key={idx}
+                className="relative flex min-h-[142px] flex-col justify-center rounded-[12px] border border-[var(--border,#dcdcdf)] bg-[var(--pb-surface,#ffffff)] px-6 py-5"
+              >
+                {stat.iconUrl && (
+                  <span className="absolute right-6 top-6 flex size-14 items-center justify-center rounded-lg bg-[var(--secondary,#42547e)]">
+                    <img src={stat.iconUrl} alt="" className="size-8 object-contain" />
+                  </span>
+                )}
+                <dd
+                  className="text-[2.75rem] sm:text-[3.5rem] leading-none font-semibold"
+                  style={{
+                    fontFamily: 'var(--pb-display-font)',
+                    color: 'var(--pb-heading-color,#161728)',
+                  }}
+                >
+                  {renderRichText(stat.value)}
+                </dd>
+                <dt className="mt-3 text-base font-semibold text-[var(--pb-accent,#fa6e25)]">
+                  {renderRichText(stat.label)}
+                </dt>
+              </div>
+            ))}
+          </dl>
+        )}
+      </section>
+    );
+  }
+
+  if (surface === 'lime') {
+    // GCA "Stats item-5 column": left-aligned values and labels on the lime
+    // band, one line per value, thin ink dividers (SNAG_007).
+    return (
+      <section className="container mx-auto py-[var(--pb-section-py,3rem)] px-4 sm:px-6 lg:px-8">
+        {count > 0 && (
+          <div className="rounded-xl bg-[#d8ec29] px-6 py-8 lg:px-8 lg:py-10">
+            <dl className="flex flex-col justify-center sm:flex-row sm:flex-wrap lg:flex-nowrap">
+              {items.map((stat, idx) => (
+                <div
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                  key={idx}
+                  className={cn(
+                    'flex flex-1 flex-col px-4 py-4 sm:px-6',
+                    idx > 0 ? 'sm:border-l sm:border-[#1a353e]/20' : '',
+                  )}
+                >
+                  <dd
+                    className="order-1 text-[1.875rem] leading-[1.2] text-[#1a353e] sm:text-[2.125rem] xl:whitespace-nowrap"
+                    style={DISPLAY_STYLE}
+                  >
+                    {renderRichText(stat.value)}
+                  </dd>
+                  <dt className="order-2 mt-2 text-[18px] text-[#1a353e]">
+                    {renderRichText(stat.label)}
+                  </dt>
+                </div>
+              ))}
+            </dl>
+          </div>
+        )}
+      </section>
+    );
+  }
+
+  return (
+    <section className="container mx-auto py-[var(--pb-section-py,3rem)] px-4 sm:px-6 lg:px-8 font-semibold">
+      <div className="max-w-4xl mx-auto text-center">
+        {title && (
+          <h2
+            className="text-3xl sm:text-4xl"
+            style={{
+              ...DISPLAY_STYLE,
+              color: 'var(--pb-heading-color)',
+            }}
+          >
+            {renderRichText(title)}
+          </h2>
+        )}
+        {subtitle && <RichTextBlock text={subtitle} className="mt-3 text-xl sm:mt-4" />}
+      </div>
+      {count > 0 && (
+        <dl
+          className="mt-10 text-center max-w-3xl mx-auto grid gap-8 grid-cols-1 stats-grid"
+          style={
+            {
+              '--stats-cols': count,
+            } as React.CSSProperties
+          }
+        >
+          {items.map((stat, idx) => (
+            <div
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+              key={idx}
+              className="flex flex-col items-center"
+            >
+              {stat.iconUrl && (
+                <img src={stat.iconUrl} alt="" className="mx-auto mb-3 h-10 w-10 object-contain" />
+              )}
+              <dt
+                className="order-2 mt-2 text-lg leading-6 font-medium"
+                style={{ color: 'var(--pb-body-color)' }}
+              >
+                {renderRichText(stat.label)}
+              </dt>
+              <dd
+                className="order-1 text-5xl"
+                style={{
+                  ...DISPLAY_STYLE,
+                  color: 'var(--pb-heading-color)',
+                }}
+              >
+                {renderRichText(stat.value)}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      )}
+    </section>
+  );
+}

pagebuilder/components/widgets/steps-widget.tsx

@@ -0,0 +1,211 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import { cn } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { eyebrowTextStyle } from './_shared';
+
+export type StepItem = {
+  title: string;
+  description: string;
+  links: { label: string; href: string }[];
+  showAppBadges: boolean;
+};
+
+export type StepsWidgetProps = {
+  eyebrow: string;
+  title: string;
+  intro: string;
+  surface: 'default' | 'muted';
+  googlePlaySrc: string;
+  appStoreSrc: string;
+  items: StepItem[];
+};
+
+function ArrowUpRight() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="size-6 shrink-0 text-[color:var(--pb-link-arrow-color,currentColor)]"
+      aria-hidden="true"
+    >
+      <title>Open</title>
+      <path d="M7 17 17 7M9 7h8v8" />
+    </svg>
+  );
+}
+
+export const StepsWidget: ComponentConfig<StepsWidgetProps> = {
+  label: 'Steps (how to)',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow' },
+    title: { type: 'text', label: 'Title' },
+    intro: { type: 'textarea', label: 'Intro text' },
+    surface: {
+      type: 'select',
+      label: 'Surface',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Muted', value: 'muted' },
+      ],
+    },
+    googlePlaySrc: { type: 'text', label: 'Google Play badge image' },
+    appStoreSrc: { type: 'text', label: 'App Store badge image' },
+    items: {
+      type: 'array',
+      label: 'Steps',
+      arrayFields: {
+        title: { type: 'text', label: 'Step title' },
+        description: { type: 'textarea', label: 'Description' },
+        links: {
+          type: 'array',
+          label: 'Links',
+          arrayFields: {
+            label: { type: 'text', label: 'Label' },
+            href: { type: 'text', label: 'Link' },
+          },
+          defaultItemProps: { label: 'Link', href: '#' },
+        },
+        showAppBadges: {
+          type: 'radio',
+          label: 'Show app store badges',
+          options: [
+            { label: 'Yes', value: true },
+            { label: 'No', value: false },
+          ],
+        },
+      },
+      defaultItemProps: {
+        title: 'Step',
+        description: '',
+        links: [],
+        showAppBadges: false,
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'How to Contribute Data',
+    intro: '',
+    surface: 'muted',
+    googlePlaySrc: '',
+    appStoreSrc: '',
+    items: [
+      {
+        title: '1. Download Geo-Quest',
+        description: 'Get the app from the Google Play or Apple App Store.',
+        links: [],
+        showAppBadges: true,
+      },
+    ],
+  },
+  // Muted surface renders as a rounded card spanning the container (Mowing
+  // Figma "How to Contribute Data": 80px vertical padding, eyebrow inset 48px).
+  // Column geometry is tenant-tunable via `--pb-split-cols`/`--pb-split-gap`
+  // (Mowing aligns the content to the 4th page-grid column); the 1fr/2fr
+  // fallback keeps tenants without the tokens unchanged.
+  render: ({ eyebrow, title, intro, surface, googlePlaySrc, appStoreSrc, items }) => (
+    <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+      <div
+        className={cn(
+          'grid gap-y-6 md:grid-cols-[var(--pb-split-cols,1fr_2fr)] md:gap-x-[var(--pb-split-gap,2rem)]',
+          surface === 'muted' &&
+            'rounded-[12px] bg-[var(--pb-surface-muted,#f3f3f4)] px-8 py-12 lg:px-0 lg:py-20',
+        )}
+      >
+        {eyebrow && (
+          <p
+            className={cn(surface === 'muted' && '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: 'var(--pb-heading-color,#161728)',
+            }}
+          >
+            {renderRichText(eyebrow)}
+          </p>
+        )}
+        <div className={cn('max-w-2xl', !eyebrow && 'md:col-span-2')}>
+          {title && (
+            <h2
+              className="leading-tight"
+              style={{
+                color: 'var(--pb-heading-color)',
+                fontWeight: 'var(--pb-display-weight)',
+                fontFamily: 'var(--pb-display-font)',
+                fontSize: 'var(--pb-heading-md, clamp(1.875rem, 1.3rem + 1.4vw, 2.5rem))',
+              }}
+            >
+              {renderRichText(title)}
+            </h2>
+          )}
+          {intro && (
+            <RichTextBlock
+              text={intro}
+              className="mt-5 text-lg leading-[var(--pb-body-leading,1.625)] text-[var(--pb-body-color,#686873)]"
+            />
+          )}
+          <div className="mt-8 flex flex-col gap-10">
+            {items.map((step, idx) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+              <div key={idx}>
+                <h3 className="text-xl font-semibold" style={{ color: 'var(--pb-heading-color)' }}>
+                  {renderRichText(step.title)}
+                </h3>
+                {step.description && (
+                  // Inline AccentText, not RichTextBlock: step copy uses the
+                  // tenant accent treatment for `*word*` (Mowing's Figma), and
+                  // `whitespace-pre-line` keeps single newlines. Bullet lists
+                  // are deliberately not supported here.
+                  <p className="mt-2 whitespace-pre-line text-lg leading-[var(--pb-body-leading,1.625)] text-[var(--pb-body-color,#686873)]">
+                    <AccentText text={step.description} />
+                  </p>
+                )}
+                {step.showAppBadges && (googlePlaySrc || appStoreSrc) && (
+                  <div className="mt-5 flex flex-wrap gap-4">
+                    {googlePlaySrc && (
+                      <img
+                        src={googlePlaySrc}
+                        alt="Get it on Google Play"
+                        className="h-16 w-auto"
+                      />
+                    )}
+                    {appStoreSrc && (
+                      <img
+                        src={appStoreSrc}
+                        alt="Download on the App Store"
+                        className="h-16 w-auto"
+                      />
+                    )}
+                  </div>
+                )}
+                {step.links?.length > 0 && (
+                  <div className="mt-5">
+                    {step.links.map((l, i) => (
+                      <a
+                        // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+                        key={i}
+                        href={l.href}
+                        className="flex items-center justify-between gap-4 border-b border-[var(--border,#dcdcdf)] py-4 text-lg font-medium text-[color:var(--pb-heading-color,#161728)] transition-colors hover:text-[color:var(--pb-link-hover-color,var(--pb-heading-color,#161728))]"
+                      >
+                        {renderRichText(l.label, { allowLinks: false })}
+                        <ArrowUpRight />
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  ),
+};