diff --git a/src/components/FeaturedArticle.tsx b/src/components/FeaturedArticle.tsx
index 9c8021e..fc047ce 100644
--- a/src/components/FeaturedArticle.tsx
+++ b/src/components/FeaturedArticle.tsx
@@ -1,25 +1,32 @@
 import React from "react";
-import FeaturedContent from "./FeaturedContent";
+import FeaturedComponentBase from "./FeaturedComponentBase";
 import { Article } from "../model";
+import { Replace } from "../utils/types";
+import RenderElement from "./RenderElement";
 
 type FeaturedArticleProps = Readonly<{
-  article: Partial<Article>;
+  article: Replace<Article, { elements: Partial<Article["elements"]> }>;
 }>;
 
 const FeaturedArticle: React.FC<FeaturedArticleProps> = ({ article }) => {
-  const shouldRender = article.elements?.title.value || article.elements?.introduction.value
-    || article.elements?.publish_date.value || article.elements?.image.value.length;
+  const shouldRender = Object.entries(article.elements).length > 0;
 
-  return (
-    <FeaturedContent type="article" image={article.elements?.image}>
-      {shouldRender && (
-        <>
-          <div>
+  return shouldRender && (
+    <FeaturedComponentBase type="article" image={article.elements?.image}>
+      <>
+        <div>
+          <RenderElement element={article.elements.title} elementCodename="title" requiredElementType="text">
             <h2 className="text-center xl:text-left text-5xl font-semibold text-burgundy">
-              {article.elements?.title.value}
+              {article.elements.title?.value}
             </h2>
+          </RenderElement>
+          <RenderElement
+            element={article.elements.publish_date}
+            elementCodename="publish_date"
+            requiredElementType="date_time"
+          >
             <p className="text-center xl:text-left text-gray-light mt-6 text-lg">
-              {article.elements?.publish_date.value
+              {article.elements.publish_date?.value
                 && `Published on ${
                   new Date(article.elements.publish_date.value!).toLocaleDateString("en-US", {
                     month: "short",
@@ -28,18 +35,22 @@ const FeaturedArticle: React.FC<FeaturedArticleProps> = ({ article }) => {
                   })
                 }`}
             </p>
+          </RenderElement>
+          <RenderElement
+            element={article.elements.introduction}
+            elementCodename="introduction"
+            requiredElementType="text"
+          >
             <p className="text-center xl:text-left text-gray-700 mt-4 text-xl">
-              {article.elements?.introduction.value}
+              {article.elements.introduction?.value}
             </p>
-          </div>
-          {article.elements?.introduction.value && (
-            <a href="#" className="text-center xl:text-left text-burgundy text-xl mt-6 font-semibold underline">
-              Read more
-            </a>
-          )}
-        </>
-      )}
-    </FeaturedContent>
+          </RenderElement>
+        </div>
+        <a href="#" className="text-center xl:text-left text-burgundy text-xl mt-6 font-semibold underline">
+          Read more
+        </a>
+      </>
+    </FeaturedComponentBase>
   );
 };
 
diff --git a/src/components/FeaturedComponentBase.tsx b/src/components/FeaturedComponentBase.tsx
new file mode 100644
index 0000000..9eca9ee
--- /dev/null
+++ b/src/components/FeaturedComponentBase.tsx
@@ -0,0 +1,41 @@
+import { Elements } from "@kontent-ai/delivery-sdk";
+import { FC, PropsWithChildren } from "react";
+import RenderElement from "./RenderElement";
+
+type FeaturedContentProps = PropsWithChildren<
+  Readonly<{
+    type: "article" | "event";
+    image?: Elements.AssetsElement;
+  }>
+>;
+
+const FeaturedComponentBase: FC<FeaturedContentProps> = ({ type, image, children }) => {
+  const img = image?.value[0];
+  return (
+    <div className="flex flex-col gap-5 xl:gap-16 xl:flex-row py-5 xl:py-[104px] items-center">
+      <div className="basis-1/3">
+        <RenderElement element={image} elementCodename="image" requiredElementType="asset">
+          {img && (
+            <>
+              <span className="px-3.5 py-1.5 absolute text-[12px] bg-azure text-white mt-4 ms-4 rounded-md font-bold">
+                {type === "event" ? "FEATURED EVENT" : "FEATURED ARTICLE"}
+              </span>
+              <img
+                width={640}
+                height={420}
+                src={image.value[0]?.url ?? ""}
+                alt={image.value[0].description ?? "image alt"}
+                className="object-cover rounded-lg static"
+              />
+            </>
+          )}
+        </RenderElement>
+      </div>
+      <div className="basis-2/3 flex flex-col">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedComponentBase;
diff --git a/src/components/FeaturedContent.tsx b/src/components/FeaturedContent.tsx
index 540cf6d..8f0c232 100644
--- a/src/components/FeaturedContent.tsx
+++ b/src/components/FeaturedContent.tsx
@@ -1,37 +1,36 @@
-import { Elements } from "@kontent-ai/delivery-sdk";
-import { FC, PropsWithChildren } from "react";
+import { FC } from "react";
+import { isArticle, isEvent, LandingPage } from "../model";
+import PageSection from "./PageSection";
+import FeaturedArticle from "./FeaturedArticle";
+import FeaturedEvent from "./FeaturedEvent";
+import Divider from "./Divider";
 
-type FeaturedContentProps = PropsWithChildren<
-  Readonly<{
-    type: "article" | "event";
-    image?: Elements.AssetsElement;
-  }>
->;
+type FeaturedContentProps = {
+  featuredContent: LandingPage["elements"]["featured_content"];
+};
+
+const FeaturedContent: FC<FeaturedContentProps> = ({ featuredContent }) => {
+  const featuredArticle = featuredContent.linkedItems.find(isArticle);
+  const featuredEvent = featuredContent.linkedItems.find(isEvent);
 
-const FeaturedContent: FC<FeaturedContentProps> = ({ type, image, children }) => {
-  const img = image?.value[0];
   return (
-    <div className="flex flex-col gap-5 xl:gap-16 xl:flex-row py-5 xl:py-[104px] items-center">
-      <div className="basis-1/3">
-        {img && (
-          <>
-            <span className="px-3.5 py-1.5 absolute text-[12px] bg-azure text-white mt-4 ms-4 rounded-md font-bold">
-              {type === "event" ? "FEATURED EVENT" : "FEATURED ARTICLE"}
-            </span>
-            <img
-              width={640}
-              height={420}
-              src={image.value[0]?.url ?? ""}
-              alt={image.value[0].description ?? "image alt"}
-              className="object-cover rounded-lg static"
-            />
-          </>
+    <>
+      {featuredArticle
+        && (
+          <PageSection color="bg-creme">
+            <FeaturedArticle article={featuredArticle} />
+          </PageSection>
+        )}
+
+      {featuredArticle && featuredEvent && <Divider />}
+
+      {featuredEvent
+        && (
+          <PageSection color="bg-white">
+            <FeaturedEvent event={featuredEvent} />
+          </PageSection>
         )}
-      </div>
-      <div className="basis-2/3 flex flex-col">
-        {children}
-      </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/FeaturedEvent.tsx b/src/components/FeaturedEvent.tsx
index a1f1d35..f9c7f15 100644
--- a/src/components/FeaturedEvent.tsx
+++ b/src/components/FeaturedEvent.tsx
@@ -1,67 +1,79 @@
 import { FC } from "react";
-import FeaturedContent from "./FeaturedContent";
+import FeaturedComponentBase from "./FeaturedComponentBase";
 import { Event } from "../model";
 import { formatDate } from "../utils/date";
 import { browserParse, transformToPortableText } from "@kontent-ai/rich-text-resolver";
 import { PortableText } from "@portabletext/react";
 import { defaultPortableRichTextComponents } from "../utils/richtext";
+import { Replace } from "../utils/types";
+import RenderElement from "./RenderElement";
 
 type FeaturedEventProps = Readonly<{
-  event: Partial<Event>;
+  event: Replace<Event, { elements: Partial<Event["elements"]> }>;
 }>;
 
 const FeaturedEvent: FC<FeaturedEventProps> = ({ event }) => {
-  const descriptionPortableText = transformToPortableText(browserParse(event.elements?.description.value ?? ""));
-
   const createTag = (text: string) => (
     <div key={text} className="px-4 py-2 border-solid border rounded-full border-[#1D1D1B]">
       <p className="text-[#1D1D1B] text-lg">{text}</p>
     </div>
   );
 
-  const shouldRender = event.elements?.name.value || event.elements?.description.value !== "<p><br></p>"
-    || event.elements?.start_date.value
-    || event.elements?.end_date.value || event.elements?.image.value.length || event.elements?.event_topic.value.length
-    || event.elements?.event_type.value.length;
+  const shouldRender = Object.entries(event.elements).length > 0;
 
-  return (
-    <FeaturedContent image={event.elements?.image} type="event">
-      {shouldRender
-        ? (
-          <>
-            <div>
+  return shouldRender
+    ? (
+      <FeaturedComponentBase image={event.elements.image} type="event">
+        <>
+          <div>
+            <RenderElement element={event.elements.name} elementCodename="name" requiredElementType="text">
               <h2 className="text-center xl:text-left text-5xl font-semibold text-burgundy">
-                {event.elements?.name.value}
+                {event.elements.name?.value}
               </h2>
+            </RenderElement>
+            <RenderElement
+              element={event.elements.start_date}
+              elementCodename="start_date"
+              requiredElementType="date_time"
+            >
               <p className="text-center xl:text-left text-gray-light mt-6 text-lg">
                 {`${
-                  event.elements?.start_date.value !== null
-                    ? formatDate(event.elements?.start_date.value as string)
+                  event.elements.start_date?.value !== null
+                    ? formatDate(event.elements.start_date?.value as string)
                     : ""
                 }${
-                  event.elements?.end_date.value !== null
-                    ? ` - ${formatDate(event.elements?.end_date.value as string)}`
+                  event.elements.end_date?.value !== null
+                    ? ` - ${formatDate(event.elements.end_date?.value as string)}`
                     : ""
                 }`}
               </p>
-              <div className="flex mt-6 gap-2 justify-center xl:justify-normal">
-                {event.elements?.event_type.value.map(t => createTag(t.name.toUpperCase()))}
-                {event.elements?.event_topic.value.map(t => createTag(t.name.toUpperCase()))}
-              </div>
+            </RenderElement>
+            <div className="flex mt-6 gap-2 justify-center xl:justify-normal">
+              {event.elements.event_type?.value.map(t => createTag(t.name.toUpperCase()))}
+              {event.elements.event_topic?.value.map(t => createTag(t.name.toUpperCase()))}
+            </div>
+            <RenderElement
+              element={event.elements.description}
+              elementCodename="description"
+              requiredElementType="rich_text"
+            >
               <div className="mt-4">
-                <PortableText value={descriptionPortableText} components={defaultPortableRichTextComponents} />
+                <PortableText
+                  value={transformToPortableText(browserParse(event.elements.description?.value ?? "<p></p>"))}
+                  components={defaultPortableRichTextComponents}
+                />
               </div>
-            </div>
-            {event.elements?.description.value !== "<p><br></p>" && (
-              <a href="#" className="text-center xl:text-left text-burgundy text-xl mt-6 font-semibold underline">
-                Read more
-              </a>
-            )}
-          </>
-        )
-        : <></>}
-    </FeaturedContent>
-  );
+            </RenderElement>
+          </div>
+          {event.elements.description?.value !== "<p><br></p>" && (
+            <a href="#" className="text-center xl:text-left text-burgundy text-xl mt-6 font-semibold underline">
+              Read more
+            </a>
+          )}
+        </>
+      </FeaturedComponentBase>
+    )
+    : <></>;
 };
 
 export default FeaturedEvent;
diff --git a/src/components/HeroImage.tsx b/src/components/HeroImage.tsx
index b1a89af..2176315 100644
--- a/src/components/HeroImage.tsx
+++ b/src/components/HeroImage.tsx
@@ -1,11 +1,12 @@
 import { Elements } from "@kontent-ai/delivery-sdk";
 import { FC } from "react";
+import RenderElement from "./RenderElement";
 
 type HeroImageProps = Readonly<{
   data: {
-    headline?: string;
-    subheadline?: string;
-    heroImage: Elements.AssetsElement;
+    headline?: Elements.TextElement;
+    subheadline?: Elements.TextElement;
+    heroImage?: Elements.AssetsElement;
   };
 }>;
 
@@ -13,24 +14,30 @@ const HeroImage: FC<HeroImageProps> = ({ data }) => {
   return (
     <div className="flex flex-col xl:flex-row pt-10 xl:pt-[104px] pb-10 xl:pb-[160px] gap-5">
       <div className="xl:basis-1/2">
-        <h1 className="text-center xl:text-left font-libre text-[64px] md:text-[94px] text-burgundy font-bold leading-[64px] md:leading-[78px]">
-          {data.headline}
-        </h1>
-        <p className="text-center xl:text-left font-sans text-xl text-gray">
-          {data.subheadline}
-        </p>
+        <RenderElement element={data.headline} elementCodename="headline" requiredElementType="text">
+          <h1 className="text-center xl:text-left font-libre text-[64px] md:text-[94px] text-burgundy font-bold leading-[64px] md:leading-[78px]">
+            {data.headline?.value}
+          </h1>
+        </RenderElement>
+        <RenderElement element={data.subheadline} elementCodename="subheadline" requiredElementType="text">
+          <p className="text-center xl:text-left font-sans text-xl text-gray">{data.subheadline?.value}</p>
+        </RenderElement>
       </div>
       <div className="xl:basis-1/2">
-        {data.heroImage.value[0] && (
-          <img
-            className=" object-cover mx-auto"
-            width={670}
-            height={440}
-            src={data.heroImage.value[0].url}
-            alt={data.heroImage.value[0].description ?? "image-alt"}
-          >
-          </img>
-        )}
+        <RenderElement element={data.heroImage} elementCodename="hero_image" requiredElementType="text">
+          {data.heroImage?.value[0]
+            ? (
+              <img
+                className=" object-cover mx-auto"
+                width={670}
+                height={440}
+                src={data.heroImage.value[0].url}
+                alt={data.heroImage.value[0].description ?? "image-alt"}
+              >
+              </img>
+            )
+            : <></>}
+        </RenderElement>
       </div>
     </div>
   );
diff --git a/src/components/PageContent.tsx b/src/components/PageContent.tsx
index 55af68c..dd1e9fd 100644
--- a/src/components/PageContent.tsx
+++ b/src/components/PageContent.tsx
@@ -1,13 +1,13 @@
 import { FC } from "react";
 import { PortableText, PortableTextReactComponents, PortableTextTypeComponentProps } from "@portabletext/react";
 import { Elements } from "@kontent-ai/delivery-sdk";
-import { Video as VideoElement } from "../model";
+import { LandingPage, Video as VideoElement } from "../model";
 import Video from "./Video";
 import { browserParse, PortableTextComponent, transformToPortableText } from "@kontent-ai/rich-text-resolver";
 import { defaultPortableRichTextComponents } from "../utils/richtext";
 
 type PageContentProps = {
-  body: Elements.RichTextElement<VideoElement>;
+  body: LandingPage["elements"]["body_copy"];
 };
 
 const PageContent: FC<PageContentProps> = ({ body }) => {
diff --git a/src/components/RenderElement.tsx b/src/components/RenderElement.tsx
new file mode 100644
index 0000000..54377c1
--- /dev/null
+++ b/src/components/RenderElement.tsx
@@ -0,0 +1,67 @@
+import { Elements } from "@kontent-ai/delivery-sdk";
+import type { PropsWithChildren } from "react";
+import { ElementCodenames } from "../model";
+
+type AllElementsUnion =
+  | Elements.TextElement
+  | Elements.LinkedItemsElement
+  | Elements.MultipleChoiceElement
+  | Elements.DateTimeElement
+  | Elements.RichTextElement
+  | Elements.NumberElement
+  | Elements.AssetsElement
+  | Elements.UrlSlugElement
+  | Elements.TaxonomyElement
+  | Elements.CustomElement;
+
+type ElementTypeUnion =
+  | "text"
+  | "number"
+  | "modular_content"
+  | "asset"
+  | "date_time"
+  | "rich_text"
+  | "multiple_choice"
+  | "url_slug"
+  | "taxonomy"
+  | "custom";
+
+type RenderElementProps = PropsWithChildren<{
+  element?: AllElementsUnion;
+  elementCodename: ElementCodenames;
+  requiredElementType: ElementTypeUnion;
+  errorMessageClassName?: string;
+}>;
+
+const RenderElement = (props: RenderElementProps) => {
+  if (!props.element) {
+    return (
+      <p className={`text-balance font-sans text-xl text-gray ${props.errorMessageClassName ?? ""}`}>
+        Missing or invalid element codename{" "}
+        <b>
+          <i>{props.elementCodename}</i>
+        </b>. To learn more about codenames refer to the{" "}
+        <a href="https://kontent.ai/learn/docs/content-model/content-types#a-edit-codenames">
+          Kontent.ai documentation
+        </a>.
+      </p>
+    );
+  }
+
+  if (props.element.type !== props.requiredElementType) {
+    return (
+      <p className={`text-balance font-sans text-xl text-gray ${props.errorMessageClassName ?? ""}`}>
+        Invalid type of element with codename{" "}
+        <b>
+          <i>{props.elementCodename}</i>
+        </b>
+        {". "}
+        Required type of element: <b>{props.requiredElementType}</b>. Actual type: <b>{props.element.type}</b>.
+      </p>
+    );
+  }
+
+  return <>{props.children}</>;
+};
+
+export default RenderElement;
diff --git a/src/components/Video.tsx b/src/components/Video.tsx
index f2adf96..83f4b73 100644
--- a/src/components/Video.tsx
+++ b/src/components/Video.tsx
@@ -1,37 +1,49 @@
 import { FC } from "react";
-import { Video as VideoElement } from "../model";
+import { Video as VideoType } from "../model";
+import { Replace } from "../utils/types";
+import RenderElement from "./RenderElement";
 
 type VideoProps = {
-  video: Partial<VideoElement>;
+  video: Replace<VideoType, { elements: Partial<VideoType["elements"]> }>;
 };
 
 const Video: FC<VideoProps> = ({ video }) => {
   return (
     <div className="flex flex-col items-center">
-      <h2 className="text-azure text-[40px] md:text-[64px] leading-[54px] w-2/4 text-center">
-        {video.elements?.headline.value}
-      </h2>
-      <p className="w-4/6 text-center text-xl pt-6 text-gray">
-        {video.elements?.description.value}
-      </p>
-      {video.elements?.video_link?.value && (
-        <figure className="pt-20">
-          <iframe
-            className="m-auto"
-            title={video.elements.headline.value}
-            width={900}
-            height={590}
-            src={`${video.elements.video_link.value}${
-              video.elements.autoplay.value[0].codename === "true" ? "&autoplay=1&mute=1" : ""
-            }`}
-            referrerPolicy="strict-origin-when-cross-origin"
-            allow={"autoplay"}
-          />
-          <figcaption className="text-gray-light block m-auto w-fit text-xl pt-6">
-            {video.elements.caption.value}
-          </figcaption>
-        </figure>
-      )}
+      <RenderElement element={video.elements.headline} elementCodename="headline" requiredElementType="text">
+        <h2 className="text-azure text-[40px] md:text-[64px] leading-[54px] w-2/4 text-center">
+          {video.elements.headline?.value}
+        </h2>
+      </RenderElement>
+      <RenderElement element={video.elements.description} elementCodename="description" requiredElementType="text">
+        <p className="w-4/6 text-center text-xl pt-6 text-gray">
+          {video.elements.description?.value}
+        </p>
+      </RenderElement>
+      <RenderElement element={video.elements.video_link} elementCodename="video_link" requiredElementType="text">
+        {video.elements.video_link?.value
+          ? (
+            <figure className="pt-20">
+              <iframe
+                className="m-auto"
+                title={video.elements.headline?.value ?? "Video Title"}
+                width={900}
+                height={590}
+                src={`${video.elements.video_link.value}${
+                  video.elements.autoplay?.value[0].codename === "true" ? "&autoplay=1&mute=1" : ""
+                }`}
+                referrerPolicy="strict-origin-when-cross-origin"
+                allow={"autoplay"}
+              />
+              <RenderElement element={video.elements.caption} elementCodename="caption" requiredElementType="text">
+                <figcaption className="text-gray-light block m-auto w-fit text-xl pt-6">
+                  {video.elements.caption?.value}
+                </figcaption>
+              </RenderElement>
+            </figure>
+          )
+          : <></>}
+      </RenderElement>
     </div>
   );
 };
diff --git a/src/index.css b/src/index.css
index bd6213e..4068d6e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+a {
+  @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
+}
\ No newline at end of file
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 57045fa..d8d4933 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -1,29 +1,30 @@
 import { DeliveryError } from "@kontent-ai/delivery-sdk";
-import Divider from "../components/Divider";
-import FeaturedArticle from "../components/FeaturedArticle";
-import FeaturedEvent from "../components/FeaturedEvent";
+
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 import HeroImage from "../components/HeroImage";
 import PageContent from "../components/PageContent";
 import PageSection from "../components/PageSection";
 import "../index.css";
-import type { Article, Event, LandingPage } from "../model";
+import { type LandingPage } from "../model";
 import { createClient } from "../utils/client";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { FC } from "react";
 import { useAppContext } from "../context/AppContext";
+import { Replace } from "../utils/types";
+import RenderElement from "../components/RenderElement";
+import FeaturedContent from "../components/FeaturedContent";
 
-const LandingPage: FC = ({}) => {
+const LandingPage: FC = () => {
   const { environmentId, apiKey } = useAppContext();
 
   const landingPage = useSuspenseQuery({
     queryKey: ["landing_page"],
     queryFn: () =>
       createClient(environmentId, apiKey)
-        .item<LandingPage>("landing_page")
+        .item("landing_page")
         .toPromise()
-        .then(res => res.data.item)
+        .then(res => res.data.item as Replace<LandingPage, { elements: Partial<LandingPage["elements"]> }>)
         .catch((err) => {
           if (err instanceof DeliveryError) {
             return null;
@@ -32,51 +33,41 @@ const LandingPage: FC = ({}) => {
         }),
   });
 
-  const featuredArticle = landingPage.data?.elements?.featured_content.linkedItems
-    .find(i => i.system.type === "article") as Article | undefined;
-  const featuredEvent = landingPage.data?.elements?.featured_content.linkedItems
-    .find(i => i.system.type === "event") as Event | undefined;
-
   return (
     <div className="flex flex-col min-h-screen">
       <Header />
 
-      {landingPage.data
+      {landingPage.data && Object.entries(landingPage.data.elements).length
         ? (
           <div className="flex-grow">
-            {(landingPage.data.elements?.headline.value || landingPage.data.elements?.subheadline.value
-              || landingPage.data.elements?.hero_image.value.length)
-              && (
-                <PageSection color="bg-creme">
-                  <HeroImage
-                    data={{
-                      headline: landingPage.data.elements.headline.value,
-                      subheadline: landingPage.data.elements.subheadline.value,
-                      heroImage: landingPage.data.elements.hero_image,
-                    }}
-                  />
-                </PageSection>
-              )}
-            {landingPage.data.elements?.body_copy && landingPage.data.elements?.body_copy.value !== "<p><br></p>"
-              && (
+            <PageSection color="bg-creme">
+              <HeroImage
+                data={{
+                  headline: landingPage.data.elements.headline,
+                  subheadline: landingPage.data.elements.subheadline,
+                  heroImage: landingPage.data.elements.hero_image,
+                }}
+              />
+            </PageSection>
+            {landingPage.data.elements.body_copy
+              ? (
                 <PageSection color="bg-white">
                   <PageContent body={landingPage.data.elements?.body_copy} />
                 </PageSection>
-              )}
-            {featuredArticle
-              && (
-                <PageSection color="bg-creme">
-                  <FeaturedArticle article={featuredArticle} />
-                </PageSection>
-              )}
-
-            {featuredArticle && featuredEvent && <Divider />}
-            {featuredEvent
-              && (
+              )
+              : (
                 <PageSection color="bg-white">
-                  <FeaturedEvent event={featuredEvent as Event} />
+                  <div></div>
                 </PageSection>
               )}
+            <RenderElement
+              element={landingPage.data.elements.featured_content}
+              elementCodename="featured_content"
+              requiredElementType="modular_content"
+              errorMessageClassName="container"
+            >
+              <FeaturedContent featuredContent={landingPage.data.elements.featured_content!}></FeaturedContent>
+            </RenderElement>
           </div>
         )
         : <div className="flex-grow" />}
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..e54db7e
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Replace<T, NewValues extends { [key in keyof T]?: unknown }> = T extends any ?
+    & Omit<T, keyof NewValues>
+    & Readonly<NewValues>
+  : never;