💄Enterprise revamp

components/blocks/Banner.template.tsx

@@ -0,0 +1,84 @@
+import { Template } from "tinacms";
+import { actionsButtonTemplate } from "./ActionsButton.template";
+import { modalButtonTemplate } from "./ModalButton.template";
+
+export const BannerTemplate: Template = {
+  name: "Banner",
+  label: "Banner",
+  ui: {
+    defaultItem: () => {
+      return {
+        backgroundColour: '#000000',
+        headline: 'PlaceHolder',
+        text: 'PlaceHolder',
+        headlineColor: '#000000',
+        bodyColor: '#000000',
+      }
+    }
+  },
+  fields: [
+    {
+      name: "backgroundColour",
+      label: "Background Colour",
+      type: "string",
+      ui: {
+        component: "color",
+      },
+    },
+    {
+      name: "headlineColor",
+      label: "Headline Color",
+      type: "string",
+      required: true,
+      ui: {
+        component: "color",
+      },
+    },
+    {
+      name: "bodyColor",
+      label: "Body Color",
+      type: "string",
+      required: true,
+
+      ui: {
+        component: "color",
+      },
+    },
+    {
+      name: "headline",
+      label: "Headline",
+      type: "string",
+    },
+    {
+      name: "text",
+      label: "Text",
+      type: "string",
+    },
+    {
+      name: "buttons",
+      label: "Buttons",
+      list: true,
+      type: "object",
+      templates: [actionsButtonTemplate as Template,
+        modalButtonTemplate as Template,
+      ],
+    },
+    {
+      name: "image",
+      label: "Image",
+      type: "image",
+    },
+    {
+      name: 'isReversed',
+      label: 'Text on Right?',
+      description:
+        'This is the position of the text, relative to the media. Off is left, and on is right.',
+      type: 'boolean',
+      ui: {
+        component: 'toggle',
+        parse: (value) => !!value,
+        format: (value) => !!value,
+      },
+    },
+  ],
+};

components/blocks/Banner.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import Image from 'next/image';
+import { tinaField } from 'tinacms/dist/react';
+import RenderButton from 'utils/renderButtonArrayHelper';
+
+
+
+const Banner = ({ data }) => {
+  const gradientBackground = data.backgroundColour
+    ? `linear-gradient(135deg, ${data.backgroundColour}33, ${data.backgroundColour})`
+    : 'transparent';
+
+  const renderButtons = (buttons) => {
+    return buttons.map((button, index) => (
+      <RenderButton key={index} button={button} index={index} />
+    ));
+  };
+
+  return (
+    <div
+      className="w-full pt-8"
+      style={{
+        background: gradientBackground,
+      }}
+    >
+      <div
+        className={`container mx-auto px-8 flex flex-col md:flex-col items-center text-left ${
+          data.isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'
+        }`}
+      >
+        {/* Left Column: Text and Buttons */}
+        <div className="lg:w-2/5 w-full flex flex-col gap-2 pl-0 lg:pl-20">
+          <h2
+            className="text-3xl font-semibold mb-4"
+            data-tina-field={tinaField(data, 'headline')}
+            style={{ color: data.textColour }}
+          >
+            {data.headline}
+          </h2>
+          <p
+            className="text-lg mb-6"
+            data-tina-field={tinaField(data, 'text')}
+            style={{ color: data.textColour }}
+          >
+            {data.text}
+          </p>
+
+          {/* Buttons */}
+          <div className="flex flex-col justify-start gap-4 mb-8">
+            {data.buttons && renderButtons(data.buttons)}
+          </div>
+        </div>
+
+        {/* Right Column: Image */}
+        {data.image && (
+          <div
+            className="lg:w-3/5 w-full flex items-center justify-center h-full"
+            data-tina-field={tinaField(data, 'image')}
+          >
+            <Image
+              src={data.image}
+              alt={data.headline}
+              className="w-full h-auto object-cover"
+              width={1000}
+              height={1000}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Banner;

components/blocks/Blocks.tsx

@@ -29,6 +29,7 @@ import { TinaBanner } from './TinaBanner';
 import { HighlightsSection } from './HighlightsSection';
 import { SpacerComponent } from './Spacer';
 import { CarouselFeatureBlock } from './CarouselFeature';
+import Banner from './Banner';
 
 export const Blocks = ({
   blocks,
@@ -54,6 +55,10 @@ export const Blocks = ({
         return (
           <FlyingBlock key={`block-${index}`} data={block} index={index} />
         );
+      case 'PageBlocksBanner':
+        return (
+          <Banner key={`block-${index}`} data={block}/>
+        )
       case 'PageBlocksEvents':
         return (
           <VerticalCardsBlock

components/blocks/FeatureGrid.template.ts

@@ -9,6 +9,11 @@ export const featureGridTemplate: Template = {
     previewSrc: '/img/blocks/feature-grid.png',
   },
   fields: [
+    {
+      name: 'sectionTitle',
+      label: 'Section Title',
+      type: 'string',
+    },
     {
       name: 'items',
       label: 'Feature Items',

components/blocks/FeatureGrid.tsx

@@ -1,26 +1,26 @@
-import React from 'react'
-import Link from 'next/link'
-import { Container } from './Container'
-import { Actions } from './ActionsButton'
-import GradGlow from '../../public/svg/grad-glow.svg'
-import { tinaField } from 'tinacms/dist/react'
-import { sanitizeLabel } from 'utils/sanitizeLabel'
+import React from 'react';
+import Link from 'next/link';
+import { Container } from './Container';
+import { Actions } from './ActionsButton';
+import GradGlow from '../../public/svg/grad-glow.svg';
+import { tinaField } from 'tinacms/dist/react';
+import { sanitizeLabel } from 'utils/sanitizeLabel';
 
 const Feature = ({ data, index, id }) => {
-  const { headline, text, actions, url } = data
+  const { headline, text, actions, url } = data;
 
   const formattedUrl =
     url && !url.match(/^https?:\/\//) && !url.startsWith('/')
       ? `http://${url}`
-      : url
-  const isInternalLink = formattedUrl && formattedUrl.startsWith('/')
+      : url;
+  const isInternalLink = formattedUrl && formattedUrl.startsWith('/');
 
   return !isInternalLink ? (
     <a
       href={formattedUrl}
       target="_blank"
       rel="noopener noreferrer"
-      className="group block py-6 px-8 md:py-9 md:px-11 lg:py-12 lg:px-14 rounded-sm bg-gradient-to-br from-white via-white to-white/50 shadow-[inset_0_0_0_1px_rgba(223,219,252,0.15),_0_0_1px_1px_rgba(223,219,252,0.5)] transition duration-500 hover:scale-105 hover:bg-gradient-to-br hover:from-orange-200 hover:via-orange-400 hover:to-orange-600 hover:z-20"
+      className="group block py-6 px-8 md:py-9 md:px-11 lg:py-8 lg:px-10 rounded-2xl shadow-lg bg-gradient-to-br from-white via-white to-white/50 transition duration-500 "
       style={{ textDecoration: 'none', overflow: 'visible' }}
       id={id}
     >
@@ -29,18 +29,18 @@ const Feature = ({ data, index, id }) => {
         className="flex flex-col gap-4"
       >
         {headline && (
-          <h3 className="text-2xl md:text-xl lg:text-2xl font-tuner leading-tight text-transparent bg-gradient-to-br from-blue-700/80 via-blue-900/90 to-blue-1000 bg-clip-text mb-2 group-hover:text-white break-words">
+          <h3 className="text-2xl md:text-xl lg:text-2xl font-tuner leading-tight text-transparent bg-gradient-to-br from-blue-700/80 via-blue-900/90 to-blue-1000 bg-clip-text break-words">
             {headline}
           </h3>
         )}
-        {text && <p className="group-hover:text-white">{text}</p>}
+        {text && <p>{text}</p>}
         {actions && <Actions items={actions} />}
       </div>
     </a>
   ) : (
     <Link
       href={formattedUrl}
-      className="h-full w-full group block py-6 px-8 md:py-9 md:px-11 lg:py-12 lg:px-14 rounded-sm bg-gradient-to-br from-white via-white to-white/50 shadow-[inset_0_0_0_1px_rgba(223,219,252,0.15),_0_0_1px_1px_rgba(223,219,252,0.5)] transition duration-500 hover:scale-105 hover:bg-gradient-to-br hover:from-orange-200 hover:via-orange-400 hover:to-orange-600 hover:z-20"
+      className="h-full w-full group block py-6 px-8 md:py-9 md:px-11 lg:py-12 lg:px-14 rounded-sm bg-gradient-to-br from-white via-white to-white/50 shadow-[inset_0_0_0_1px_rgba(223,219,252,0.15),_0_0_1px_1px_rgba(223,219,252,0.5)] transition duration-500 "
       style={{ textDecoration: 'none', overflow: 'visible' }}
       id={id}
     >
@@ -49,34 +49,35 @@ const Feature = ({ data, index, id }) => {
         className="flex flex-col gap-4"
       >
         {headline && (
-          <h3 className="text-2xl md:text-xl lg:text-2xl font-tuner leading-tight text-transparent bg-gradient-to-br from-blue-700/80 via-blue-900/90 to-blue-1000 bg-clip-text mb-2 group-hover:text-white break-words">
+          <h3 className="text-2xl md:text-xl lg:text-2xl font-tuner leading-tight text-transparent bg-gradient-to-br from-blue-700/80 via-blue-900/90 to-blue-1000 bg-clip-text mb-2 break-words">
             {headline}
           </h3>
         )}
-        {text && <p className="group-hover:text-white">{text}</p>}
+        {text && <p>{text}</p>}
         {actions && <Actions items={actions} />}
       </div>
     </Link>
-  )
-}
+  );
+};
 
-export default Feature
+export default Feature;
 
 export function FeatureGridBlock({ data, index }) {
-  const isMoreThanSix = data.items && data.items.length > 6
+  const isMoreThanSix = data.items && data.items.length > 6;
+
   return (
     <section
       key={'feature-grid-' + index}
-      className={'relative z-0 py-20 lg:py-28'}
+      className={'relative z-0 py-20 px-32 lg:py-28'}
       style={{ overflow: 'visible' }}
     >
+      <h2 className="text-center pb-6 font-tuner text-3xl text-blue-700 rounded-lg p-4">
+        {data.sectionTitle && data.sectionTitle}
+      </h2>
+
       <Container width="wide">
         <div
-          className={`grid gap-[0.5px] ${
-            isMoreThanSix
-              ? 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4'
-              : 'grid-flow-row grid-cols-auto-sm md:grid-cols-auto-lg'
-          } auto-rows-auto w-full rounded-xl overflow-visible shadow border border-blue-50/50 bg-gradient-to-br from-seafoam-200/30 to-blue-100/30`}
+          className={`grid gap-6 grid-cols-2 auto-rows-auto w-full rounded-xl overflow-visible`}
         >
           {data.items &&
             data.items.map((data, index) => {
@@ -87,11 +88,11 @@ export function FeatureGridBlock({ data, index }) {
                   index={index}
                   id={sanitizeLabel(data.headline)}
                 />
-              )
+              );
             })}
         </div>
       </Container>
       <GradGlow className="absolute w-full h-auto bottom-0 left-0 -z-1" />
     </section>
-  )
+  );
 }