diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx
new file mode 100644
index 0000000..4c3ace1
--- /dev/null
+++ b/frontend/src/components/ForBuilders/Hero.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
+import Button from "@/components/Button";
+import { HeroQueryType } from "@/queries/for-builders/hero";
+
+interface IHero {
+  heroData: HeroQueryType["forBuildersPageHero"];
+}
+
+const Hero: React.FC<IHero> = ({ heroData }) => {
+  return (
+    <div className="relative pt-32 pb-12 px-6">
+      <div className="space-y-6">
+        <h1 className="text-3xl w-min">{heroData.title}</h1>
+        <p className="text-lg">{heroData.subtitle}</p>
+        <div>
+          <Link
+            href={heroData.button.link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button variant="secondary">
+              <span>{heroData.button.text}</span>
+            </Button>
+          </Link>
+        </div>
+        <div className="block space-x-2">
+          {heroData.arrowLink.map((arrowLink) => (
+            <Link
+              key={arrowLink.text}
+              href={arrowLink.link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="mr-2">{arrowLink.text}</span>
+              <Image
+                src={LinkArrow}
+                width="24"
+                height="24"
+                alt="Arrow link image"
+                className="inline"
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+      <Image
+        src={heroData.background.url}
+        alt="Hero Image Background"
+        width="1440"
+        height="835"
+        className="absolute top-0 h-full object-cover object-left left-0 z-[-1]"
+      />
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/frontend/src/components/ForBuilders/IntegrateSection/GetInTouch.tsx b/frontend/src/components/ForBuilders/IntegrateSection/GetInTouch.tsx
new file mode 100644
index 0000000..fb40caf
--- /dev/null
+++ b/frontend/src/components/ForBuilders/IntegrateSection/GetInTouch.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+
+import Link from "next/link";
+// import Image from "next/image";
+
+import Button from "@/components/Button";
+
+import { IntegrateQueryType } from "@/queries/for-builders/integrate";
+
+interface IGetInTouch {
+  integrateData: IntegrateQueryType["forBuildersPageIntegrateSection"];
+}
+
+const GetInTouch: React.FC<IGetInTouch> = ({ integrateData }) => {
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center flex-column mt-16">
+        <h2 className="text-primary-text text-xl mb-8">
+          {integrateData.getInTouchSection.header}
+        </h2>
+        <Link
+          href={integrateData.getInTouchSection.button.link.url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Button>
+            <span className="text-background-2">
+              {integrateData.getInTouchSection.button.text}
+            </span>
+          </Button>
+        </Link>
+      </div>
+      {/* <Image
+        src={integrateData.getInTouchSection.background.url}
+        alt="Get In Touch Image Background"
+        width="900"
+        height="400"
+        className="absolute z-[0]"
+      /> */}
+    </>
+  );
+};
+export default GetInTouch;
diff --git a/frontend/src/components/ForBuilders/IntegrateSection/LearnMore.tsx b/frontend/src/components/ForBuilders/IntegrateSection/LearnMore.tsx
new file mode 100644
index 0000000..1278706
--- /dev/null
+++ b/frontend/src/components/ForBuilders/IntegrateSection/LearnMore.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+
+import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
+
+import { IntegrateQueryType } from "@/queries/for-builders/integrate";
+
+interface ILearnMore {
+  integrateData: IntegrateQueryType["forBuildersPageIntegrateSection"];
+}
+
+const LearnMore: React.FC<ILearnMore> = ({ integrateData }) => {
+  return (
+    <Link
+      href={integrateData.arrowLink.link.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="block mt-16 text-center"
+    >
+      <span className="mr-4 text-lg text-primary-blue">
+        {integrateData.arrowLink.text}
+      </span>
+      <Image
+        src={LinkArrow}
+        width="24"
+        height="24"
+        alt="Arrow link image"
+        className="inline"
+      />
+    </Link>
+  );
+};
+export default LearnMore;
diff --git a/frontend/src/components/ForBuilders/IntegrateSection/index.tsx b/frontend/src/components/ForBuilders/IntegrateSection/index.tsx
new file mode 100644
index 0000000..1707bbf
--- /dev/null
+++ b/frontend/src/components/ForBuilders/IntegrateSection/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import AppsDropdownContent from "@/components/Navbar/AppsDropdownContent";
+
+import { IntegrateQueryType } from "@/queries/for-builders/integrate";
+import GetInTouch from "./GetInTouch";
+import LearnMore from "./LearnMore";
+
+interface IIntegrateSection {
+  integrateData: IntegrateQueryType["forBuildersPageIntegrateSection"];
+}
+
+const IntegrateSection: React.FC<IIntegrateSection> = ({ integrateData }) => {
+  return (
+    <div className="bg-background-2 pt-12 pb-16 px-6">
+      <h2 className="text-lg text-primary-purple mb-8">
+        {integrateData.header}
+      </h2>
+      <h1 className="text-2xl text-primary-text mb-8">{integrateData.title}</h1>
+      <p className="text-lg text-secondary-text">{integrateData.description}</p>
+      <AppsDropdownContent appsSection={integrateData.appsSection} />
+      <GetInTouch {...{ integrateData }} />
+      <LearnMore {...{ integrateData }} />
+    </div>
+  );
+};
+export default IntegrateSection;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
new file mode 100644
index 0000000..80dc352
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+import Image from "next/image";
+
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+
+interface IHeader {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const Header: React.FC<IHeader> = ({ useCasesData }) => {
+  return (
+    <div className="mb-16">
+      <h2 className="text-xl mb-6 text-primary-purple">
+        {useCasesData.useCaseTitle}
+      </h2>
+      <p className="text-lg mb-12 text-secondary-text">
+        {useCasesData.useCaseDescription}
+      </p>
+      <Image
+        src={useCasesData.useCaseBanner.url}
+        alt="UseCaseBanner mobile"
+        width="400"
+        height="835"
+      />
+    </div>
+  );
+};
+export default Header;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
new file mode 100644
index 0000000..2756931
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+
+interface IHeader {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const Header: React.FC<IHeader> = ({ useCasesData }) => {
+  return (
+    <div>
+      <h2 className="text-xl mb-6 text-primary-text">
+        {useCasesData.keyChallenges.title}
+      </h2>
+      <p className="text-lg mb-12 text-secondary-text">
+        {useCasesData.keyChallenges.description}
+      </p>
+    </div>
+  );
+};
+export default Header;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
new file mode 100644
index 0000000..cf7d64f
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+import Card from "@/components/Navbar/AppsDropdownContent/Card";
+import Image from "next/image";
+import clsx from "clsx";
+import Link from "next/link";
+
+const hoverEffect = clsx(
+  "hover:scale-[1.03] transform transition duration-100"
+);
+
+interface IHowKlerosSolvesIt {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const HowKlerosSolvesIt: React.FC<IHowKlerosSolvesIt> = ({ useCasesData }) => {
+  return (
+    <div>
+      <h2 className="text-xl mb-6 text-primary-purple">
+        {useCasesData.solutionSections.header}
+      </h2>
+      <div className="bg-background-2 border border-stroke rounded-2xl p-6">
+        <h2 className="text-xl mb-4">{useCasesData.solutionSections.title}</h2>
+        <div className="text-lg text-secondary-text mb-8">
+          {useCasesData.solutionSections.description}
+        </div>
+        <div className="text-secondary-text mb-4">
+          {useCasesData.solutionSections.solutionHeader}
+        </div>
+        <div className="mb-6">
+          <Card
+            key={useCasesData.solutionSections?.solution?.solution_name}
+            solution={useCasesData.solutionSections.solution}
+            variant="small"
+          />
+        </div>
+        <div className="text-secondary-text mb-4">
+          {useCasesData.solutionSections.partnersHeader}
+        </div>
+        <div className="flex flex-row border border-stroke rounded-2xl p-4 gap-x-6">
+          {useCasesData.solutionSections.partners.map((partner) => (
+            <Link
+              key={partner?.name}
+              href={partner?.url}
+              rel="noopener noreferrer"
+              target="_blank"
+              className={clsx(hoverEffect, "cursor-pointer")}
+            >
+              <Image
+                key={partner?.name}
+                src={partner?.icon_svg?.url}
+                alt={partner?.name}
+                width={64}
+                height={64}
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default HowKlerosSolvesIt;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/index.tsx
new file mode 100644
index 0000000..dfb53d6
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+import Header from "./Header";
+import HowKlerosSolvesIt from "./HowKlerosSolvesIt";
+
+interface IKeyChallenges {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const KeyChallenges: React.FC<IKeyChallenges> = ({ useCasesData }) => {
+  return (
+    <div>
+      <Header {...{ useCasesData }} />
+      <HowKlerosSolvesIt {...{ useCasesData }} />
+    </div>
+  );
+};
+export default KeyChallenges;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
new file mode 100644
index 0000000..5c2ed35
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+
+import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
+
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+
+interface ILearnMore {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const LearnMore: React.FC<ILearnMore> = ({ useCasesData }) => {
+  return (
+    <Link
+      href={useCasesData.arrowLink.link.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="block mt-16 text-center"
+    >
+      <span className="mr-4 text-lg text-primary-blue">{useCasesData.arrowLink.text}</span>
+      <Image
+        src={LinkArrow}
+        width="24"
+        height="24"
+        alt="Arrow link image"
+        className="inline"
+      />
+    </Link>
+  );
+};
+export default LearnMore;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
new file mode 100644
index 0000000..9baab6f
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import KeyChallenges from "./KeyChallenges";
+import Header from "./Header";
+import LearnMore from "./LearnMore";
+
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+
+interface IDAOSection {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const DAOSection: React.FC<IDAOSection> = ({ useCasesData }) => {
+  return (
+    <div>
+      <Header {...{ useCasesData }} />
+      <KeyChallenges {...{ useCasesData }} />
+      <LearnMore {...{ useCasesData }} />
+    </div>
+  );
+};
+export default DAOSection;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/UseCasesCards.tsx b/frontend/src/components/ForBuilders/UseCasesSection/UseCasesCards.tsx
new file mode 100644
index 0000000..9f137c5
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/UseCasesCards.tsx
@@ -0,0 +1,26 @@
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+import React from "react";
+
+interface IUseCasesCards {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const UseCasesCards: React.FC<IUseCasesCards> = ({ useCasesData }) => {
+  return (
+    <div className="flex mb-12 flex-row flex-wrap gap-4">
+      {useCasesData.useCases.map((useCase, index) => (
+        <div
+          key={useCase.name}
+          className={`${
+            index === 0
+              ? "bg-primary-purple text-lg text-white px-8 py-4 rounded-full"
+              : "border-gradient-purple-blue text-lg text-secondary-text px-8 py-4"
+          }`}
+        >
+          {useCase.name}
+        </div>
+      ))}
+    </div>
+  );
+};
+export default UseCasesCards;
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
new file mode 100644
index 0000000..2120e58
--- /dev/null
+++ b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+
+import DAOSection from "./DAOSection";
+import UseCasesCards from "./UseCasesCards";
+
+interface IUseCasesSection {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const UseCasesSection: React.FC<IUseCasesSection> = ({ useCasesData }) => {
+  return (
+    <div className="relative pt-16 pb-16 px-6 bg-background-1">
+      <h1 className="text-3xl mb-12 font-medium">
+        {useCasesData.sectionHeader}
+      </h1>
+      <UseCasesCards {...{ useCasesData }} />
+      <DAOSection {...{ useCasesData }} />
+    </div>
+  );
+};
+
+export default UseCasesSection;
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
index 72cbdc9..5dbdb29 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
@@ -7,7 +7,7 @@ const hoverEffect = clsx(
   "hover:scale-[1.01] transform transition duration-100"
 );
 const cardBaseStyle = clsx(
-  "bg-background-2 rounded-lg border border-stroke text-wrap",
+  "bg-background-2 rounded-2xl border border-stroke text-wrap",
   "p-4 flex gap-4 h-full lg:items-start"
 );
 const headerTextStyle = clsx("text-primary-purple font-bold text-base");
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
index 486b06d..7857190 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
@@ -3,7 +3,7 @@ import Card from "./Card";
 import LinkArrow from "@/assets/svgs/icons/link-arrow.svg";
 import Image from "next/image";
 import clsx from "clsx";
-import Link from "next/link"
+import Link from "next/link";
 
 interface AppsDropdownContentProps {
   appsSection: AppsSection;
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
index 08697c0..c6ebf75 100644
--- a/frontend/src/components/Navbar/index.tsx
+++ b/frontend/src/components/Navbar/index.tsx
@@ -20,7 +20,7 @@ export const overlayStyle = clsx(
 
 const headerBaseStyle = clsx(
   "flex fixed top-0 left-0 right-0 z-50 h-20 w-full",
-  "justify-between items-center text-white shadow-sm",
+  "justify-between items-center text-white",
   "py-2 text-base transition-colors duration-500"
 );
 
diff --git a/frontend/src/pages/for-builders.tsx b/frontend/src/pages/for-builders.tsx
new file mode 100644
index 0000000..e49ffde
--- /dev/null
+++ b/frontend/src/pages/for-builders.tsx
@@ -0,0 +1,67 @@
+import { graphQLClient } from "@/utils/graphQLClient";
+import Footer from "@/components/Footer";
+import Hero from "@/components/ForBuilders/Hero";
+import Navbar from "@/components/Navbar";
+import UseCasesSection from "@/components/ForBuilders/UseCasesSection";
+import IntegrateSection from "@/components/ForBuilders/IntegrateSection";
+import { footerQuery, FooterQueryType } from "@/queries/footer";
+import { navbarQuery, NavbarQueryType } from "@/queries/navbar";
+import { heroQuery, HeroQueryType } from "@/queries/for-builders/hero";
+import {
+  useCasesQuery,
+  UseCasesQueryType,
+} from "@/queries/for-builders/use-cases";
+import {
+  integrateQuery,
+  IntegrateQueryType,
+} from "@/queries/for-builders/integrate";
+
+interface IForBuilders {
+  navbarData: NavbarQueryType;
+  footerData: FooterQueryType;
+  heroData: HeroQueryType["forBuildersPageHero"];
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+  integrateData: IntegrateQueryType["forBuildersPageIntegrateSection"];
+}
+
+const ForBuilders: React.FC<IForBuilders> = ({
+  footerData,
+  heroData,
+  navbarData,
+  useCasesData,
+  integrateData,
+}) => {
+  return (
+    <div>
+      <Navbar {...{ navbarData }} />
+      <Hero {...{ heroData }} />
+      <UseCasesSection {...{ useCasesData }} />
+      <IntegrateSection {...{ integrateData }} />
+      <Footer {...{ footerData }} />
+    </div>
+  );
+};
+
+export const getStaticProps = async () => {
+  const navbarData = await graphQLClient.request<NavbarQueryType>(navbarQuery);
+  const footerData = await graphQLClient.request<FooterQueryType>(footerQuery);
+  const heroData = await graphQLClient.request<HeroQueryType>(heroQuery);
+  const useCasesData = await graphQLClient.request<UseCasesQueryType>(
+    useCasesQuery
+  );
+  const integrateData = await graphQLClient.request<IntegrateQueryType>(
+    integrateQuery
+  );
+
+  return {
+    props: {
+      navbarData,
+      footerData,
+      heroData: heroData.forBuildersPageHero,
+      useCasesData: useCasesData.forBuildersPageUseCasesSection,
+      integrateData: integrateData.forBuildersPageIntegrateSection,
+    },
+  };
+};
+
+export default ForBuilders;
diff --git a/frontend/src/queries/for-builders/hero.tsx b/frontend/src/queries/for-builders/hero.tsx
new file mode 100644
index 0000000..a1c37a2
--- /dev/null
+++ b/frontend/src/queries/for-builders/hero.tsx
@@ -0,0 +1,47 @@
+import { gql } from "graphql-request";
+
+export const heroQuery = gql`
+  {
+    forBuildersPageHero {
+      title
+      subtitle
+      button {
+        text
+        link {
+          url
+        }
+      }
+      arrowLink {
+        text
+        link {
+          url
+        }
+      }
+      background {
+        url
+      }
+    }
+  }
+`;
+
+export type HeroQueryType = {
+  forBuildersPageHero: {
+    title: string;
+    subtitle: string;
+    button: {
+      text: string;
+      link: {
+        url: string;
+      };
+    };
+    arrowLink: {
+      text: string;
+      link: {
+        url: string;
+      };
+    }[];
+    background: {
+      url: string;
+    };
+  };
+};
diff --git a/frontend/src/queries/for-builders/integrate.tsx b/frontend/src/queries/for-builders/integrate.tsx
new file mode 100644
index 0000000..dd3749a
--- /dev/null
+++ b/frontend/src/queries/for-builders/integrate.tsx
@@ -0,0 +1,78 @@
+import { gql } from "graphql-request";
+import { AppsSection } from "../navbar";
+
+export const integrateQuery = gql`
+  {
+    forBuildersPageIntegrateSection {
+      header
+      title
+      description
+      appsSection {
+        solutions {
+          solution_name
+          header_title
+          header_description
+          logo_svg {
+            url
+          }
+          url
+        }
+        arrowLink {
+          text
+          link {
+            url
+          }
+        }
+      }
+      getInTouchSection {
+        header
+        button {
+          text
+          link {
+            name
+            url
+          }
+        }
+        background {
+          url
+        }
+      }
+      arrowLink {
+        text
+        link {
+          name
+          url
+        }
+      }
+    }
+  }
+`;
+
+export type IntegrateQueryType = {
+  forBuildersPageIntegrateSection: {
+    header: string;
+    title: string;
+    description: string;
+    appsSection: AppsSection;
+    getInTouchSection: {
+      header: string;
+      button: {
+        text: string;
+        link: {
+          name: string;
+          url: string;
+        };
+      };
+      background: {
+        url: string;
+      };
+    };
+    arrowLink: {
+      text: string;
+      link: {
+        name: string;
+        url: string;
+      };
+    };
+  };
+};
diff --git a/frontend/src/queries/for-builders/use-cases.tsx b/frontend/src/queries/for-builders/use-cases.tsx
new file mode 100644
index 0000000..07fd2a7
--- /dev/null
+++ b/frontend/src/queries/for-builders/use-cases.tsx
@@ -0,0 +1,97 @@
+import { gql } from "graphql-request";
+
+export const useCasesQuery = gql`
+  {
+    forBuildersPageUseCasesSection {
+      sectionHeader
+      useCases {
+        name
+      }
+      useCaseTitle
+      useCaseDescription
+      useCaseBanner {
+        url
+      }
+      keyChallenges {
+        title
+        description
+      }
+      solutionSections {
+        header
+        title
+        description
+        solutionHeader
+        solution {
+          solution_name
+          header_title
+          logo_svg {
+            url
+          }
+          url
+        }
+        partnersHeader
+        partners {
+          name
+          icon_svg {
+            url
+          }
+          url
+        }
+      }
+      arrowLink {
+        text
+        link {
+          name
+          url
+        }
+      }
+    }
+  }
+`;
+
+export type UseCasesQueryType = {
+  forBuildersPageUseCasesSection: {
+    sectionHeader: string;
+    useCases: {
+      name: string;
+    }[];
+    useCaseTitle: string;
+    useCaseDescription: string;
+    useCaseBanner: {
+      url: string;
+    };
+    keyChallenges: {
+      title: string;
+      description: string;
+    };
+    solutionSections: {
+      header: string;
+      title: string;
+      description: string;
+      solutionHeader: string;
+      solution: {
+        solution_name: string;
+        header_title: string;
+        logo_svg: {
+          url: string;
+        };
+        url: string;
+      };
+      partnersHeader: string;
+      partners: {
+        name: string;
+        icon_svg: {
+          url: string;
+        };
+        url: string;
+      }[];
+    };
+    arrowLink: {
+      text: string;
+      link: {
+        name: string;
+        url: string;
+      };
+    };
+  };
+};
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 0a8d866..623269b 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -64,3 +64,25 @@ body {
   max-height: 332px;
   opacity: 1;
 }
+
+.border-gradient-purple-blue {
+  position: relative;
+  border-radius: 9999px;
+  z-index: 1;
+}
+
+.border-gradient-purple-blue::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(to bottom, #9747ff, #27cdfe);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  z-index: -1;
+}