feat: for builders page

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;