Adding links banner section to page builder

src/apps/pages/sections/LinksBanner.astro

@@ -0,0 +1,27 @@
+---
+import clsx from 'clsx';
+import _ from 'underscore';
+import { toBackgroundClass } from '@utils/pageBuilder';
+import Container from '@components/Container.astro';
+
+const { background, links, overlap } = Astro.props;
+---
+<div class={clsx(
+  'w-full',
+  { '-mt-[80px]' : overlap }
+)}>
+  <Container>
+    <div class='gap-2 w-full grid auto-cols-fr grid-flow-col'>
+      {
+        _.map(links, link => ( 
+          <a href={link.url || '#'} class={clsx(
+            'hero-tab flex items-center justify-center py-8 px-12 font-serif italic text-2xl z-50 h-[80px]',
+            toBackgroundClass(background)
+          )}>
+            <p>{ link.label }</p>
+          </a>
+        ))
+      }
+    </div>
+  </Container>
+</div>

src/components/PageBody.astro

@@ -11,6 +11,7 @@ import TextImage from '@apps/pages/sections/TextImage';
 import Container from '@components/Container.astro';
 import clsx from 'clsx';
 import _ from 'underscore';
+import LinksBanner from '@apps/pages/sections/LinksBanner.astro';
 import { toBackgroundClass } from '@utils/pageBuilder';
 
 const { sections, transparent, home } = Astro.props;
@@ -20,6 +21,7 @@ const SectionTypes = {
   carousel: 'Carousel',
   freeText: 'Free_text',
   images: 'Images',
+  linkBanner: 'Link_banner',
   multiColumn: 'Multi_column',
   featureQuote: 'Feature_quote',
   spacer: 'Spacer',
@@ -133,5 +135,10 @@ const SectionTypes = {
         {...section}
       />
     )}
+    { section?.__typename?.endsWith(SectionTypes.linkBanner) && ( 
+      <LinksBanner
+       {...section}
+      />
+    )}
   </section>
 ))}

tina/content/pages.ts

@@ -75,6 +75,9 @@ export const ColorOptionsButton = [{
 }, {
   label: 'Secondary',
   value: ColorValues.secondary
+}, {
+  label: 'Main Background',
+  value: ColorValues.layout
 }];
 
 export const ColorOptions = [{
@@ -699,6 +702,34 @@ const staticSectionTemplates: Template<false>[] = [{
     label: 'Button Text',
     type: 'string'
   }]
+}, {
+  name: 'link_banner',
+  label: 'Links Banner',
+  fields: [{
+    name: 'background',
+    label: 'Link Background Color',
+    type: 'string',
+    options: ColorOptionsButton
+  }, {
+    name: 'overlap',
+    label: 'Overlap previous section?',
+    description: 'If selected, the links banner will be positioned at the bottom of the previous section, rather than below it',
+    type: 'boolean'
+  }, {
+    name: 'links',
+    label: 'Links',
+    list: true,
+    type: 'object',
+    fields: [{
+      name: 'label',
+      label: 'Label',
+      type: 'string'
+    }, {
+      name: 'url',
+      label: 'URL',
+      type: 'string'
+    }]
+  }]
 }];
 
 const Pages: Collection = {