Page Builder Collection Example using Eleventy

pages.data.js

const { client } = require('../helpers/contentful-client')
const groupBy = require('lodash/fp/groupBy')

async function getPageData() {

    // Get all of the locales
    const localeData = await client.getLocales()
    const localeList = await localeData.items.map(locale => locale.code)

    // Fetch collection of all page-builder pages for each locale
    const allPages = await Promise.all(
        localeList.map(async locale => {
            const entries = await client.getEntries({
                locale: locale,
                content_type: 'page',
                select: 'sys.updatedAt,fields',
                include: 4
            })

            const promised = await entries.items
                .filter(page => page.fields.title && !page.fields.doNotGenerate) // filter pages that should not be published.
                .map(page => {
                    page.fields.date = new Date(page.sys.updatedAt) // Eleventy expects a date here.
                    page.fields.locale = locale // Add specific locale to page
                    return page.fields
                })

            return promised
        })
    )

    // Spread locale specific page arrays into a single array
    const collection = allPages.reduce((acc, val) => [...acc, ...val], [])

    // Sort locale pages by slug (so we can see which locales we can access - not efficient!)
    const localeGroup = groupBy('slug', collection)
    
    // Add a list of available locales to every page - so we can safely use the language/country switcher)
    let localeSegmentedArray = []
    for (const [slug, pages] of Object.entries(localeGroup)) {
        const allLocales = pages.map(page => page.locale)        
        const update = collection
                .filter(data => data.slug === slug)
                .map(data => {
                    data.allLocales = allLocales.toString()
                    return data
                })

        localeSegmentedArray.push(update)
    }

    // Flatten data and make available to our template.
    const flatPages = localeSegmentedArray.reduce((acc, val) => [...acc, ...val], [])

    return flatPages
}

module.exports = getPageData

pages.liquid.js

---
layout: base.liquid
pagination:
    data: contentful-pages
    size: 1
    alias: c_page
    addAllPagesToCollections: true
permalink: "{% if c_page.locale != 'en' %}{{ c_page.locale }}/{% endif %}{% if c_page.slug == 'old-home' %}{% else %}{{ c_page.slug }}/{% endif %}"
tags: page

eleventyComputed:
  title: "{{ c_page.title }}"
  permalink: "{% if c_page.locale != 'en' %}{{ c_page.locale }}/{% endif %}{% if c_page.slug == 'old-home' %}{% else %}{{ c_page.slug }}/{% endif %}"
  locale: "{{ c_page.locale }}"
  meta_title: "{{ c_page.metadata.fields.title }}"
  meta_description: "{{ c_page.metadata.fields.description }}"
  allLocales: "{{ c_page.allLocales }}"
---
{% if locale == 'en' %}{% assign pageLocale = '' %}{% else %}{% capture pageLocale %}/{{ locale }}{% endcapture %}{% endif %}
{%- comment -%} Hero Banner {%- endcomment -%}
{% for banner in c_page.banners %}
    {% case banner.sys.contentType.sys.id %}
        {% when 'hero' %}
            {% include hero-banner, 
                banner_url: banner.fields.image.fields.file.url,
                banner_position: banner.fields.backgroundPosition,
                disableScroll: banner.fields.disableScroll,
                backgroundSize: banner.fields.backgroundSize,
                backgroundColor: banner.fields.backgroundColor,
                textLocation: banner.fields.textLocation,
                buttons: banner.fields.buttons,
                text: banner.fields.text,
                disableScroll: banner.fields.disableScroll
                minHeight: banner.fields.minHeight
            %}
        {% when 'heroCarousel' %}
            <section class="hero-carousel">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {% for slide in banner.fields.slides %}
                            <div class="swiper-slide">
                                <div class="hero-carousel--slide" style="background-image: linear-gradient(to right, rgba(0,0,0, 0.5) 50%, rgba(0,0,0, 0.5) 100%), url({{ slide.fields.image.fields.file.url }});">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-10">
                                                {% if slide.fields.title %}
                                                    <h1>{{ slide.fields.title }}</h1>
                                                {% endif %}
                                                {% if slide.fields.content %}
                                                    {{ slide.fields.content | richText }}
                                                {% endif %}
                                                {% if slide.fields.link.fields.title %}
                                                    <a class="btn btn-blue" href="{% localeLink locale, slide.fields.link.fields.url %}">{{ slide.fields.link.fields.title }}</a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </section>
    {% endcase %}
{% endfor %}

{%- comment -%} Sections {%- endcomment -%}
{% for area in c_page.areas %}
    {% case area.sys.contentType.sys.id %}
        {% when 'area' %}
            {% assign data = area.fields %}
            {% if data.backgroundColor %}{% capture bgColor %}background-color: {{ data.backgroundColor }};{% endcapture%}{% else %}{% capture bgColor %}{% endcapture%}{% endif %}
            {% if data.textColor %}{% capture mainColor %}color: {{ data.textColor }};{% endcapture %}{% else %}{% capture mainColor %}{% endcapture %}{% endif %}
            {% if data.textAlign %}{% capture textAlign %}text-align: {{ data.textAlign }};{% endcapture %}{% else %}{% capture textAlign %}{% endcapture%}{% endif %}

            <section class="area" style="{{ bgColor }}{% padding area.fields.padding %}">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-10 mx-auto">
                            <div class="area-text" style="{% inline area.fields.textStyle %}">
                                {% if data.subtitle %}
                                    <span class="area--subtitle" style="{{ mainColor }}">{{ data.subtitle }}</span>
                                {% endif %}
                                {% unless data.suppressTitle %}
                                    <h3 class="area--title" style="{{ mainColor }}">{{ data.title }}</h3>
                                {% endunless %}
                                {% if data.text %}
                                    <div class="area--content {{ data.textSize }}" style="{% inline area.fields.textStyle %}{{ mainColor }}">
                                        {{ data.text | markdownify }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% if data.buttons %}
                        <div class="row">
                            <div class="col-12 text-center justify-content-between">
                                {% for button in data.buttons %}
                                    <a class="btn btn-cta" href="{% localeLink locale, button.fields.url %}">{{ button.fields.title }}</a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </section>
        {% when 'accordionArea' %}
            <section class="accordion-area">
                <div class="container">
                    <div class="row">
                        {% for accordion in area.fields.accordions %}
                            {% assign acc = accordion.fields %}
                            <div class="col-sm-12">
                                <div class="accordion-area--heading" data-toggle="collapse" href="#accordion-{{ forloop.index }}" role="button" aria-expanded="false">
                                    <div>{{ acc.titleText | markdownify }}</div>
                                    <div class="icons">
                                        <i class="fas fa-chevron-circle-up mr-3"></i>
                                    </div>
                                </div>
                                <div id="accordion-{{ forloop.index }}" class="collapse">
                                    {{ acc.text | markdownify }}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </section>
        {% when 'carousel' %}
            {% assign data = area.fields %}
            {% assign bgImage = data.backgroundImage.fields.file.url %}
            {% assign height = data.height %}
            {% assign slides = data.items %}
            <section class="carousel js-swiper" style="background-image: url({{ bgImage }});">
                <div class="w-100">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            {% for slide in slides %}
                                <div class="swiper-slide">
                                    <div class="carousel--slide">
                                        <div class="carousel--container">
                                            <div style="{% inline slide.fields.textStyle %}">
                                                {{ slide.fields.text | markdownify }}
                                            </div>
                                            <b>{{ slide.fields.attribution }}</b>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        {% assign length = slides | size %}
                        {% if length > 1 %}
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        {% endif %}
                    </div>
                </div>
            </section>
        {% when 'circlesSection' %}
            <section class="circle-section">
                {% for circle in area.fields.circles %}
                    <div class="circle" style="background-color: {{ circle.fields.color }};">
                        <div class="content">
                            {{ circle.fields.text | richText }}
                        </div>
                    </div>
                {% endfor %}
            </section>
        {% when 'eventsSection' %}
            <div class="event-section">
                <div class="container">
                    <div class="row px-0">
                        <div class="col-sm-12 px-0 text-center text-sm-left">
                            <h2>{{ area.fields.sectionTitle }}</h2>
                            <div>{{ area.fields.sectionTextArea | richText }}</div>
                        </div>
                    </div>
                    <div class="row">
                        {% if area.fields.useMostRecentEvents %}
                            {% assign filter = area.fields.filterEventTypes | first %}
                            {% for event in events %}
                                {% if event.eventType == filter %}
                                        <div class="event-section--row">
                                            <div class="event-section--name">
                                                {{ event.eventName }}
                                            </div>
                                            <div class="event-section--date" data-start-date="{{ event.eventStartDate }}" data-end-date="{{ event.eventEndDate }}">
                                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 64h-48V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H128V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM48 96h352c8.822 0 16 7.178 16 16v48H32v-48c0-8.822 7.178-16 16-16zm352 384H48c-8.822 0-16-7.178-16-16V192h384v272c0 8.822-7.178 16-16 16z"></path></svg>
                                                <span class="js-date"></span>
                                            </div>
                                            <div class="event-section--location">
                                                {% if event.eventLocation %}
                                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M192 96c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64zm0-256C85.961 0 0 85.961 0 192c0 77.413 26.97 99.031 172.268 309.67 9.534 13.772 29.929 13.774 39.465 0C357.03 291.031 384 269.413 384 192 384 85.961 298.039 0 192 0zm0 473.931C52.705 272.488 32 256.494 32 192c0-42.738 16.643-82.917 46.863-113.137S149.262 32 192 32s82.917 16.643 113.137 46.863S352 149.262 352 192c0 64.49-20.692 80.47-160 281.931z"></path></svg>
                                                    {{ event.eventLocation }}
                                                {% endif %}
                                            </div>
                                            <div class="event-section--btnContainer">
                                                <a class="btn btn-blue" href="{{ event.eventLink }}"  target="_blank" rel="noopener noreferrer">
                                                    Learn more
                                                </a>
                                            </div>
                                        </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </div>
        {% when 'fullImageArea' %}
            <section class="image-area my-5">
                <div class="container">
                    <div class="row mb-5">
                        <div class="col-xl-10 mx-auto">
                            {% if area.fields.title %}
                                <h3 class="area--title">{{ area.fields.title }}</h3>
                            {% endif %}
                            {% if area.fields.text %}
                                {{ area.fields.text | markdownify }}
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if area.fields.image %}
                    <div class="container position-relative">
                        <img src="{{ area.fields.image.fields.file.url }}" alt="" class="img-fluid mx-auto {% if area.fields.mobileImage %}d-none d-md-block{% else %}d-block{% endif %}">
                        {% if area.fields.mobileImage %}
                            <img src="{{ area.fields.mobileImage.fields.file.url }}" alt="" class="img-fluid mx-auto d-block d-md-none">
                        {% endif %}
                        {% if area.fields.tooltips %}
                            <svg id="hotzone" class="d-block mx-auto" viewBox="0 0 1500 827" width="100%" height="100%" preserveAspectRatio="xMinYMin slice">
                                {% for tooltip in area.fields.tooltips %}
                                    <circle class="image-area--hotspot" data-tooltip="{{ forloop.index }}" cx="{{ tooltip.fields.left }}" cy="{{ tooltip.fields.top }}" r="25" fill="transparent"></circle>
                                {% endfor %}
                            </svg>
                            {% for tooltip in area.fields.tooltips %}
                                <div class="image-area--tooltip js-tooltip d-none" data-tooltip="{{ forloop.index }}">
                                    {{ tooltip.fields.text | markdownify }}
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                    {% if area.fields.tooltips %}
                        <div class="container mt-5 d-sm-block d-lg-none">
                            <div class="row">
                                {% for tooltip in area.fields.tooltips %}
                                    <div class="col-12">
                                        <div class="image-area--accordion">
                                            <div class="image-area--top" data-toggle="collapse" href="#tooltip-accordion-{{ forloop.index }}" role="button" aria-expanded="false">
                                                <i class="fas fa-chevron-circle-down mr-3"></i>
                                                <h3>{{ tooltip.fields.title }}</h3>
                                            </div>
                                            <div id="tooltip-accordion-{{ forloop.index }}" class="image-area--bottom collapse">
                                                {{ tooltip.fields.text | markdownify }}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
            </section>
        {% when 'imageArea' %}
            {% assign data = area.fields %}
            {% assign column_num = data.columns | default: 1 %}
            <section class="grid-area" {% if data.backgroundColor %}style="background-color: {{ data.backgroundColor }}"{% endif %}>
                <div class="container{% if data.fullBackground %}-fluid{% endif %}">
                    <div class="container{% if data.fullWidthSubContainer %}-fluid{% endif %}">
                        {% if data.hideTitle != true %}
                            <div class="row">
                                <div class="col-xl-10 mx-auto">
                                    <div class="area-text">
                                        <h3 class="area--title">{{ data.title }}</h3>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        <div class="row">
                            {% for item in data.gridItems %}
                                {% case item.sys.contentType.sys.id %}
                                    {% when 'imageGridItem' %}
                                        {% assign data = item.fields %}

                                        {% if data.imageColumnSize %}
                                            {% assign image_column = data.imageColumnSize | times: 0.1 | times: 12 | round %}
                                            {% assign text_column = 12 | minus: image_column %}
                                        {% else %}
                                            {% assign image_column = 12 %}
                                            {% assign text_column = 12 %}
                                        {% endif %}
                                        <div class="col-lg-{{ 12 | divided_by: column_num | floor }} mb-4">
                                            <div class="grid-imageGridItem" style="background-color: {{ data.backgroundColor }}">
                                                <div class="row">
                                                    <div class="col-lg-{{ image_column }} mb-4">
                                                        {% if data.url %}
                                                            <a href="{% localeLink locale, data.url %}">
                                                                <img class="grid-imageGridItem--image" src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.title }}">
                                                            </a>
                                                        {% else %}
                                                            <img class="grid-imageGridItem--image" src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.title }}">
                                                        {% endif %}
                                                    </div>
                                                    <div class="col-lg-{{ text_column }}">
                                                        <div class="grid-imageGridItem--content {{ data.textSize }}">
                                                            {% if data.title %}
                                                                {% if data.url %}
                                                                    <a href="{% localeLink locale, data.url %}">
                                                                        <h3 class="mb-3" style="color: {{ data.headingColor }}">{{ data.title }}</h3>
                                                                    </a>
                                                                {% else %}
                                                                    <h3 class="mb-3" style="color: {{ data.headingColor }}">{{ data.title }}</h3>
                                                                {% endif %}
                                                            {% endif %}
                                                            {% if data.text %}
                                                                {{ data.text | markdownify }}
                                                            {% endif %}
                                                            {% if data.links %}
                                                                <div class="grid-imageGridItem--linkSection">
                                                                    {% for link in data.links %}
                                                                        <a class="grid-imageGridItem--link" href="{% localeLink locale, link.fields.url %}">{{ link.fields.title }}</a>
                                                                    {% endfor %}
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% when 'boxGridItem' %}
                                        {% assign data = item.fields %}
                                        {% assign base_size = 12 | divided_by: column_num | floor %}
                                        {% assign mobile_size = 12 | divided_by: 2 %}
                                        <div class="col-md-{{ mobile_size }} col-lg-{{ base_size }} my-4 mx-auto">
                                            <div class="grid-boxGridItem" style="border-color: {{ data.backgroundColor }}">
                                                <div>
                                                    {% if data.subTitle %}
                                                        <span class="grid-boxGridItem--subtitle">
                                                            {{ data.subTitle }}
                                                        </span>
                                                    {% endif %}
                                                        <h4 class="grid-boxGridItem--title">
                                                            {{ data.title }}
                                                        </h4>
                                                    {% if data.video.fields.placeholderImage and data.video.fields.url %}
                                                        <span class="grid-boxGridItem--video position-relative" data-video="{{ data.video.fields.url }}" data-toggle="modal" data-target="#videoModal">
                                                            <img class="img-fluid" src="{{ data.video.fields.placeholderImage.fields.file.url }}" alt="{{ data.video.fields.placeholderImage.fields.file.title }}">
                                                            <div class="video-button">
                                                                <div class="video-button--playButton"></div>
                                                            </div>
                                                            <div class="video-button--bg"></div>
                                                        </span>
                                                    {% endif %}
                                                    
                                                    {% if data.image.fields.file.url %}
                                                        <a href="{{ data.buttonUrl | default: "#"}}">
                                                            <span class="grid-boxGridItem--image">
                                                                <img class="img-fluid" src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.file.title }}">
                                                            </span>
                                                        </a>
                                                    {% endif %}
                                                    {% if data.suppressHorizontalRule == false %}
                                                        <hr>
                                                    {% endif %}
                                                    {% if data.text %}
                                                        <div class="grid-boxGridItem--copy">
                                                            {{ data.text | markdownify }}
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                {% if data.buttonText %}
                                                    <div>
                                                        <a class="btn btn-blue" href="{% localeLink locale, data.buttonUrl %}">{{ data.buttonText }}</a>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% when 'fullImageGridItem' %}
                                        {% assign data = item.fields %}
                                        {% assign sizing = column_num | divided_by: data.size %}
                                        <div class="col-lg-{{ 12 | divided_by: sizing }} mx-auto">
                                            <div class="grid-fullImageGridItem">
                                                <div class="grid-fullImageGridItem--image">
                                                    <img src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.file.title }}">
                                                </div>
                                                <div class="grid-fullImageGridItem--bar">
                                                    {{ data.text | markdownify }}
                                                </div>
                                            </div>         
                                        </div>
                                    {% when 'gridItem' %}
                                        {% assign data = item.fields %}
                                        {% assign sizing = column_num | divided_by: data.size %}
                                            <div class="col-lg-{{ 12 | divided_by: sizing | ceil }} mx-auto mb-3">
                                                <div class="grid-gridItem p-3 {{ data.textSize }}" style="background-color: {{ data.backgroundColor }}">
                                                    {{ data.text | markdownify }}
                                                </div>
                                            </div>
                                    {% when 'socialMediaGridItem' %}
                                        {% assign data = item.fields %}
                                        <div class="col my-4 mx-auto">
                                            <div class="grid-boxGridItem">
                                                <h4 class="grid-boxGridItem--title">
                                                    {{ data.title }}
                                                </h4>
                                                {% if data.type == 'twitter' %}
                                                    <a class="twitter-timeline" data-chrome="nofooter transparent noheader" data-height="450" data-theme="light" href="{{ data.link }}?ref_src=twsrc%5Etfw">Tweets</a>
                                                    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% when 'videoGridItem' %}
                                        {% assign data = item.fields.video.fields %}
                                        <div class="col mx-auto">
                                            <div class="grid-videoGridItem" data-video="{{ data.url }}" data-toggle="modal" data-target="#videoModal">
                                                <img class="img-fluid" src="{{ data.placeholderImage.fields.file.url }}" alt="{{ data.placeholderImage.fields.file.title }}">
                                            </div>
                                        </div>
                                    {% when 'accordionArea' %}
                                        <div class="col">
                                            <div class="accordion-area accordion-area--grid">
                                                <div class="container">
                                                    <div class="row">
                                                        {% for accordion in item.fields.accordions %}
                                                            {% assign acc = accordion.fields %}
                                                            <div class="col-sm-12">
                                                                <div class="accordion-area--heading" data-toggle="collapse" href="#accordion-{{ forloop.index }}" role="button" aria-expanded="false">
                                                                    <div>{{ acc.titleText | markdownify }}</div>
                                                                    <div class="icons">
                                                                        <i class="fas fa-chevron-circle-up mr-3"></i>
                                                                    </div>
                                                                </div>
                                                                <div id="accordion-{{ forloop.index }}" class="collapse">
                                                                    {{ acc.text | markdownify }}
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% else %}
                                {% endcase %}                                
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </section>
        {% when 'headerArea' %}
            <section class="general-header" style="background-color: {{ area.fields.backgroundColor }};">
                <h1>{{ area.fields.title }}</h1>
            </section>
        {% when 'hero' %}
            {% include hero-banner, 
                banner_url: banner.fields.image.fields.file.url,
                banner_position: banner.fields.backgroundPosition,
                disableScroll: banner.fields.disableScroll,
                text: banner.fields.text,
                disableScroll: banner.fields.disableScroll
            %}
        {% when 'imageOverlaySection' %}
            <section class="img-overlay-section">
                <div class="container-fluid px-0">
                    {% link area.fields.url %}
                    <div class="row no-gutters">
                        {% for imageBlock in  area.fields.imageBlocks %}
                                <div class="col-6 col-sm  img-overlay-section--block">
                                    <div class="img-overlay-section--overlay"></div>
                                    <div class="img-overlay-section--text">
                                        {{ imageBlock.fields.overlayText | richText }}
                                    </div>
                                    <img class="w-100" src="{{ imageBlock.fields.image.fields.file.url }}" alt="{{ imageBlock.fields.image.fields.file.title }}">
                                </div>
                        {% endfor %}
                    </div>
                    {% endlink %}
                </div>
            </section>
        {% when 'linkArea' %}
            <section class="link-area">
                <div class="container my-5">
                    <div class="row">
                        {% for link in area.fields.links %}
                            <div class="col my-3 text-center">
                                <a href="{% localeLink locale, link.fields.url %}"><img class="img-fluid" src="{{ link.fields.image.fields.file.url }}" alt="{{ link.fields.title }}"></a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </section>    
        {% when 'marketoForm' %}
            <section class="marketo-section">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            {{ area.fields.marketoFormContent | markdownify }}
                        </div>
                        <div class="col">
                            <div class="marketo-section--container">
                                <form id="mktoForm_{{ area.fields.marketoFormId }}"></form>
                                <p class="marketo-section--success d-none text-center">
                                    {{ area.fields.postSubmissionMessage.fields.value }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <script defer src="//app-sj27.marketo.com/js/forms2/js/forms2.min.js"></script>
                {% if area.fields.zoomInfoFormId %}
                    <script>window._zi = { formId: '{{ area.fields.zoomInfoFormId }}'}</script>
                {% endif %}
            </section>
        {% when 'quoteArea' %}
            <section class="quote-area">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="quote-area--quote" style="background-color: {{ area.fields.backgroundColor }};">
                                {{ area.fields.text | markdownify }}
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        {% when 'tooltipSection' %}
            <section class="tooltip-section">
                <div class="container">
                    <div class="row">
                        <h2 class="area--title">
                            {{ area.fields.title }}
                        </h2>
                    </div>
                    <div class="row no-gutters">
                        {% for tooltip in area.fields.tooltips %}
                            <div class="col-md">
                                <div class="tooltip-section--block mx-auto" data-toggle="tooltip" title="{{ tooltip.fields.text | plainText }}">
                                    <img src="{{ tooltip.fields.icon.fields.file.url }}" alt="{{ tooltip.fields.icon.fields.title }}">
                                    <h5>
                                        {{ tooltip.fields.header }}
                                    </h5>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </section>
        {% when 'sectionRowStandard' %}
            <section class="row-standard bg--{{ area.fields.backgroundColor | default: 'white' }} {{ area.fields.specialStyle }}">
                <div class="container">
                    <div class="row">
                        {% for column in area.fields.columns %}
                            {% assign item = column.fields %}
                            <div class="col-md d-flex align-items-center">
                                <div class="m-3">
                                    {% if item.image.fields.file.url %}
                                        <img class="img-fluid my-3" src="{{ item.image.fields.file.url }}" alt="{{ item.image.fields.file.title }}">
                                    {% endif %}
                                    {% if item.title %}
                                        <h3>{{ item.title }}</h3>
                                    {% endif %}
                                    {% if item.content %}
                                        {{ item.content | richText }}
                                    {% endif %}
                                    {% if item.link.fields.title %}
                                        <a class="btn btn-blue" href="{% localeLink locale, item.link.fields.url %}">
                                            {{ item.link.fields.title }} <i class="fas fa-chevron-circle-right"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </section>
        {% when 'carouselLogo' %}
            <section class="logo-carousel">
                {% if area.fields.title %}
                    <div class="container">
                        <div class="row text-center">
                        <h3 class="text-secondary">{{ area.fields.title }}</h3>
                        </div>
                    </div>
                {% endif %}
                <div class="container my-5">
                    <div class="swiper-container logo-carousel--swiper">
                        <div class="swiper-wrapper">
                            {% for image in area.fields.images %}
                                <div class="swiper-slide">
                                    <div class="d-flex justify-content-center">
                                        <img class="logo my-3" src="{{ image.fields.file.url }}" alt="{{ image.fields.file.title }}">
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </section>
        {% when 'sectionSwitchCards' %}
            <section class="switch-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <h3>{{ area.fields.title }}</h3>
                            <ul class="switch-section--list">
                                {% for card in area.fields.cards %}
                                    <li>
                                        <button class="btn btn-link js-switchcard py-0 {% if forloop.index <= 1 %}active{% endif %}" data-id="{{ forloop.index }}">
                                            {{ card.fields.title }}
                                        </button>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="col-md-8">
                            {% for card in area.fields.cards %}
                                <div class="switch-section--card {% if forloop.index <= 1 %}active{% endif %}" data-id="{{ forloop.index }}">
                                    {{ card.fields.content | richText }}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </section>
        {% else %}
            {{ area.sys.contentType.sys.id }}
    {% endcase %}
{% endfor %}

{%- comment -%} Call to actions {%- endcomment -%}
{% for cta in c_page.callToActions %}
    {% include call-to-action,
        title: cta.fields.title,
        text: cta.fields.text,
        url: cta.fields.url,
        bgColor: cta.fields.backgroundColor,
    %}
{% endfor %}

Example of the Data