feat(frontend): add industries cards

Author: alcercu

frontend/src/app/enterprise/components/KlerosEnterpriseSection/Industries/index.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+import { request } from "@/utils/graphQLClient";
+
+import { industriesQuery, IIndustriesQuery } from "./queries";
+
+const Industries: React.FC = async () => {
+  const industriesData = await request<IIndustriesQuery>(industriesQuery);
+
+  return (
+    <div className="flex flex-wrap gap-6 lg:mx-32">
+      {industriesData.enterprise.industries.map(({ title, icon }) => (
+        <div
+          className={clsx(
+            "flex flex-1 flex-col items-center rounded-2xl border",
+            "border-stroke p-6",
+          )}
+          key={title}
+        >
+          <Image
+            className="mx-10"
+            src={icon.url}
+            alt={title + " card image"}
+            width="72"
+            height="72"
+          />
+          <p className="mx-auto w-max text-lg text-primary-text lg:text-xl">
+            {title}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Industries;

frontend/src/app/enterprise/components/KlerosEnterpriseSection/Industries/queries.ts

@@ -0,0 +1,25 @@
+import { gql } from "graphql-request";
+
+export const industriesQuery = gql`
+  {
+    enterprise {
+      industries {
+        title
+        icon {
+          url
+        }
+      }
+    }
+  }
+`;
+
+export type IIndustriesQuery = {
+  enterprise: {
+    industries: Array<{
+      title: string;
+      icon: {
+        url: string;
+      };
+    }>;
+  };
+};

frontend/src/app/enterprise/components/KlerosEnterpriseSection/index.tsx

@@ -10,6 +10,7 @@ import {
 import Card from "../Card";
 
 import DisputeResolutionProcess from "./DisputeResolutionProcess";
+import Industries from "./Industries";
 import LemonCashSection from "./LemonCashSection";
 import MethodsTable from "./MethodsTable";
 
@@ -47,6 +48,9 @@ const KlerosEnterpriseSection: React.FC = async () => {
       />
 
       <LemonCashSection />
+
+      <Industries />
+
       <div className="mx-auto lg:px-32">
         <ExternalLink url={arrowLink.link.url} text={arrowLink.text} />
       </div>