diff --git a/components/blocks-renderer.tsx b/components/blocks-renderer.tsx
index b7d478ab20..4a0c00da2d 100644
--- a/components/blocks-renderer.tsx
+++ b/components/blocks-renderer.tsx
@@ -135,7 +135,15 @@ const ImageTextBlock = dynamic(() =>
);
const CardCarousel = dynamic(() =>
- import("./blocks/cardCarousel/cardCarousel").then((mod) => mod.CardCarousel)
+ import("./blocks/cardCarousel/cardCarousel/cardCarousel").then(
+ (mod) => mod.CardCarousel
+ )
+);
+
+const TechnologyCardCarousel = dynamic(() =>
+ import("./blocks/cardCarousel/technologyCards/technologyCardCarousel").then(
+ (mod) => mod.TechnologyCardCarousel
+ )
);
const componentMap = {
@@ -174,6 +182,7 @@ const componentMap = {
ImageTextBlock,
AccordionBlock,
CardCarousel,
+ TechnologyCardCarousel,
};
export const Blocks = ({ prefix, blocks }) => {
diff --git a/components/blocks/cardCarousel/cardCarousel.tsx b/components/blocks/cardCarousel/cardCarousel/cardCarousel.tsx
similarity index 53%
rename from components/blocks/cardCarousel/cardCarousel.tsx
rename to components/blocks/cardCarousel/cardCarousel/cardCarousel.tsx
index ea73f0e9fb..48a26999a4 100644
--- a/components/blocks/cardCarousel/cardCarousel.tsx
+++ b/components/blocks/cardCarousel/cardCarousel/cardCarousel.tsx
@@ -1,24 +1,16 @@
"use client";
-import { ListItem } from "@/components/blocksSubtemplates/listItem";
-import { PillGroup } from "@/components/blocksSubtemplates/pillGroup";
+
import { Button } from "@/components/button/templateButton";
import { Container } from "@/components/util/container";
-import {
- Consultingv2BlocksCardCarousel as CardCarouselData,
- Consultingv2BlocksCardCarouselCards,
-} from "@/tina/types";
-import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { tinaField } from "tinacms/dist/react";
-import { cardOptions } from "../../blocksSubtemplates/tinaFormElements/colourOptions/cardOptions";
-import { Icon } from "../../blocksSubtemplates/tinaFormElements/icon";
-import V2ComponentWrapper from "../../layout/v2ComponentWrapper";
-import { CardList } from "./cardCarouseSlideshow";
-import { Tabs, useTabCarousel } from "./cardCarouselTabs";
+import V2ComponentWrapper from "../../../layout/v2ComponentWrapper";
+import { Card } from "../layout/card";
+import { CardList } from "../layout/cardCarouseSlideshow";
+import { Tabs, useTabCarousel } from "../layout/cardCarouselTabs";
-type CardData = Consultingv2BlocksCardCarouselCards;
-export const CardCarousel = ({ data }: { data: CardCarouselData }) => {
+export const CardCarousel = ({ data }) => {
//Check if any images are used in cards (adds a placeholder to the other cards)
const [hasImages, setHasImages] = useState(false);
const { tabsData, activeCategory, categoryGroup } = useTabCarousel({
@@ -98,7 +90,7 @@ export const CardCarousel = ({ data }: { data: CardCarouselData }) => {
);
})}
@@ -110,7 +102,7 @@ export const CardCarousel = ({ data }: { data: CardCarouselData }) => {
@@ -119,76 +111,3 @@ export const CardCarousel = ({ data }: { data: CardCarouselData }) => {
);
};
-type CardProps = {
- data: CardData & { cardStyle: number };
- placeholder: boolean;
-};
-const Card = ({ data, placeholder }: CardProps) => {
- //If image fails to load, use placeholder (Piers)
- const [usePlaceholder, setUsePlaceholder] = useState(false);
- const placeholderImage = "/images/videoPlaceholder.png";
-
- return (
- {
- return value.reference === data.cardStyle;
- })?.classes
- }`}
- >
- {(data.image || placeholder) && (
-
- setUsePlaceholder(true)}
- alt={data.altText ?? "Card Image"}
- fill={true}
- className="object-cover"
- />
-
- )}
-
- {data.chips &&
}
-
- {data.heading}
-
- {data.description && (
-
- {data.description}
-
- )}
- {data.featureList?.features?.map((item, index) => {
- return
;
- })}
- {data.embeddedButton && (
-
- )}
-
{
+ return value.reference === data.cardStyle;
+ })?.classes
+ }`}
+ >
+ {(data.image || placeholder) && (
+
+ setUsePlaceholder(true)}
+ alt={data.altText ?? "Card Image"}
+ fill={true}
+ className={data.contain ? "object-contain" : "object-cover"}
+ />
+
+ )}
+
+ {data.chips &&
}
+
+ {data.heading}
+
+ {data.description && (
+
+ {data.description}
+
+ )}
+ {data.featureList?.features?.map((item, index) => {
+ return
;
+ })}
+ {data.embeddedButton && (
+
+ )}
+