Added the integration with BE

src/app/[locale]/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from "react";
 import { notFound } from "next/navigation";
+import { SecondarySection } from "@/features/secondary-section/secondary-section.tsx";
 import { getClient } from "@/utils/apollo-client";
 import { isNotNull } from "@/utils/type-guards/is-not-null";
 import { GET_LAYOUT_DATA } from "@/queries/get-layout-data";
@@ -79,6 +80,9 @@ const renderSection = (section?: PagePageSectionsDynamicZone | null) => {
         />
       );
     }
+    case "ComponentSectionsSecondaryBanner": {
+      return <SecondarySection data={section} />;
+    }
     case "ComponentSectionsColumnsWithTabs": {
       return <CategorizedNews data={section} />;
     }

src/components/secondary-card/secondary-card.tsx

@@ -1,37 +1,49 @@
-import Image from "next/image";
-import { Button } from "@/components/button/button.tsx";
+import { ButtonLink } from "@/components/button-link/button-link.tsx";
 import { Title } from "@/components/title/title.tsx";
 import { Typography } from "@/components/typography/typography.tsx";
-import coverImage from "@/assets/images/secondary.png";
+import { getWavyCardTheme } from "@/components/secondary-card/utils.ts";
+import { ComponentSectionsSecondaryBanner } from "@/__generated__/graphql.ts";
 import "./secondary-card.scss";
 
 export interface SecondaryCardProps {
-  theme?: "primary" | "secondary" | "tertiary";
+  data: ComponentSectionsSecondaryBanner;
 }
 
-export const SecondaryCard = ({ theme = "primary" }: SecondaryCardProps) => {
+export const SecondaryCard = ({ data }: SecondaryCardProps) => {
   return (
-    <div className="secondary-card" data-theme={theme}>
+    <div className="secondary-card" style={getWavyCardTheme(data)}>
       <div className="secondary-card-info">
-        <Title className="secondary-card-title">Through equipment</Title>
-        <Typography className="secondary-card-body">
-          Connect-ed plays a crucial role in leveling the educational playing
-          field by providing underprivileged students with donated electronic
-          equipment, such as laptops. This support enables students to access
-          essential educational resources, facilitating their learning and
-          empowering them for a brighter future.
-        </Typography>
+        <Title className="secondary-card-title">{data.name}</Title>
+        <Typography className="secondary-card-body">{data.text}</Typography>
         <div className="secondary-card-actions">
-          <Button variant="inverted" theme={theme}>
-            Find out more
-          </Button>
-          <Button variant="inverted" theme={theme}>
-            Donate today
-          </Button>
+          {data.cta1 && (
+            <ButtonLink
+              variant={data.cta1.type ?? undefined}
+              href={data.cta1.url ?? ""}
+              // @ts-expect-error - theme should be changed for the button
+              theme={data?.backgroundColor}
+            >
+              {data.cta1.label}
+            </ButtonLink>
+          )}
+          {data.cta2 && (
+            <ButtonLink
+              variant={data.cta2.type ?? undefined}
+              href={data.cta2.url ?? ""}
+              // @ts-expect-error - theme should be changed for the button
+              theme={data?.backgroundColor}
+            >
+              {data.cta2.label}
+            </ButtonLink>
+          )}
         </div>
       </div>
       <div className="secondary-card-image-wrapper">
-        <Image alt="" fill src={coverImage} className="secondary-card-image" />
+        <img
+          alt={data?.image.altText ?? ""}
+          src={data.image.image?.data?.attributes?.url ?? undefined}
+          className="secondary-card-image"
+        />
       </div>
     </div>
   );

src/components/secondary-card/utils.ts

@@ -0,0 +1,5 @@
+import { getThemeStyle } from "@/utils/get-theme-style.ts";
+import { ComponentSectionsSecondaryBanner } from "@/__generated__/graphql.ts";
+
+export const getWavyCardTheme = (data?: ComponentSectionsSecondaryBanner) =>
+  getThemeStyle([["--background-color", data?.backgroundColor]]);

src/components/section-base/title/section-base-title.tsx

@@ -1,15 +1,42 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { ElementType, HTMLAttributes, useEffect, useRef } from "react";
 import cc from "classcat";
 import { Title, TitleProps } from "@/components/title/title";
 import "./section-base-title.scss";
 
+type SectionBaseTitleProps = Omit<TitleProps, "as"> & {
+  level?: number;
+};
+
+const getTitleTag = (
+  level: number,
+): ElementType<
+  HTMLAttributes<HTMLHeadingElement>,
+  "h1" | "h2" | "h3" | "h4" | "h5"
+> => {
+  switch (level) {
+    case 1:
+      return "h1";
+    case 2:
+      return "h2";
+    case 3:
+      return "h3";
+    case 4:
+      return "h4";
+    case 5:
+      return "h5";
+    default:
+      return "h3";
+  }
+};
+
 export const SectionBaseTitle = ({
   className,
   children,
+  level = 3,
   ...delegatedProps
-}: TitleProps) => {
+}: SectionBaseTitleProps) => {
   const ref = useRef<HTMLHeadingElement>(null);
 
   useEffect(() => {
@@ -39,6 +66,7 @@ export const SectionBaseTitle = ({
     <Title
       ref={ref}
       {...delegatedProps}
+      as={getTitleTag(level)}
       className={cc(["section-base-title", className])}
     >
       {children}

src/features/secondary-section/secondary-section.tsx

@@ -1,27 +1,24 @@
 import { SecondaryCard } from "@/components/secondary-card/secondary-card.tsx";
 import { SectionBase } from "@/components/section-base/section-base.tsx";
 import { WavyCard } from "@/components/wavy-card/wavy-card.tsx";
+import { ComponentSectionsSecondaryBanner } from "@/__generated__/graphql.ts";
 import { SectionBaseTitle } from "@/components/section-base";
 import "./secondary-section.scss";
 
 export interface SecondarySectionProps {
-  items?: { theme?: "primary" | "secondary" | "tertiary" }[];
+  data: ComponentSectionsSecondaryBanner;
 }
 
-export const SecondarySection = ({ items }: SecondarySectionProps) => {
+export const SecondarySection = ({ data }: SecondarySectionProps) => {
   return (
     <SectionBase className="secondary-section">
       <SectionBaseTitle className="secondary-section-title">
-        How we’re helping
+        {data?.title?.text}
       </SectionBaseTitle>
       <ul className="secondary-section-list">
-        {items?.map((item, index) => (
-          // TODO: use id or title instead of index
-          // eslint-disable-next-line react/no-array-index-key
-          <WavyCard key={index} as="li" theme={item.theme}>
-            <SecondaryCard theme={item.theme} />
-          </WavyCard>
-        ))}
+        <WavyCard as="li" theme={data.backgroundColor}>
+          <SecondaryCard data={data} />
+        </WavyCard>
       </ul>
     </SectionBase>
   );