Fix(frontend)/apply feedback round 1

frontend/next.config.mjs

@@ -1,6 +1,31 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack: (config) => {
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg"),
+    );
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        // exclude if *.svg?url
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+        use: ["@svgr/webpack"],
+      },
+    );
+
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
   images: {
     minimumCacheTTL: 31536000,
     deviceSizes: [640, 750, 828, 1080, 1200, 1920],

frontend/package.json

@@ -23,6 +23,7 @@
     "react-use": "^17.6.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^22.10.5",
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",

frontend/src/app/enterprise/components/Hero.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import Image from "next/image";
+
+import { request } from "@/utils/graphQLClient";
+
+import { heroQuery, HeroQueryType } from "../queries/hero";
+
+const Hero: React.FC = async () => {
+  const { header, subtitle, background } = (
+    await request<HeroQueryType>(heroQuery)
+  ).forLawyersPageHero;
+
+  return (
+    <div className="relative px-6 pb-64 pt-44 md:pt-52 lg:px-32 lg:pb-80">
+      <div className="space-y-8">
+        <h1
+          className={
+            "pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl"
+          }
+        >
+          {header}
+        </h1>
+        <p className="max-w-[685px] text-lg text-primary-text">{subtitle}</p>
+      </div>
+      <Image
+        src={background.url}
+        alt="Hero Image Background"
+        fill
+        unoptimized
+        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+      />
+    </div>
+  );
+};
+
+export default Hero;

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx → frontend/src/app/enterprise/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
 
-import { ArbitrationMethodTableType } from "@/app/for-lawyers/queries/kleros-dispute-resolution-section";
+import { ArbitrationMethodTableType } from "@/app/enterprise/queries/kleros-dispute-resolution-section";
 
 const TableCardContent: React.FC<ArbitrationMethodTableType> = ({
   name,

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx → frontend/src/app/enterprise/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 
-import { ArbitrationMethodTableType } from "@/app/for-lawyers/queries/kleros-dispute-resolution-section";
+import { ArbitrationMethodTableType } from "@/app/enterprise/queries/kleros-dispute-resolution-section";
 
 import TableCardContent from "./TabelCardContent";
 

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx → frontend/src/app/enterprise/components/KlerosDisputeResolutionSection/index.tsx

@@ -8,20 +8,16 @@ import {
 } from "../../queries/kleros-dispute-resolution-section";
 
 import ArbitrationMethodTable from "./ArbitrationMethodTable";
-import KlerosEscrowSection from "./KlerosEscrowSection";
-import ResearchSection from "./ResearchSection";
+// import ResearchSection from "./ResearchSection";
 
 const KlerosDisputeResolutionSection: React.FC = async () => {
   const {
     headerSubtitle,
     header,
     subtitle,
-    secondHeader,
-    secondSubtitle,
     thirdHeader,
     thirdSubtitle,
     arbitrationMethodTable,
-    publications,
   } = (
     await request<ForLawyersPageDisputeResolutionSectionQueryType>(
       forLawyersPageDisputeResolutionSectionQuery,
@@ -46,16 +42,13 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       </div>
 
       <ArbitrationMethodTable table={arbitrationMethodTable} />
-      <ResearchSection {...{ secondHeader, secondSubtitle, publications }} />
 
       <div className="my-4 lg:px-32">
         <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
           {thirdHeader}
         </h2>
         <p className="text-secondary-text lg:text-lg">{thirdSubtitle}</p>
       </div>
-
-      <KlerosEscrowSection />
     </div>
   );
 };

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx → frontend/src/app/enterprise/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx

@@ -17,8 +17,8 @@ const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
     <div className="flex flex-col gap-8 lg:px-32">
       <HighlightedText
         {...disputeResolutionProcessHeader}
-        fullTextStyle="!text-primary-text !text-lg !font-medium lg:!text-xl"
-        highlightedTextStyle="!text-lg !font-medium lg:!text-xl"
+        fullTextStyle="!text-primary-text !text-xl !font-medium lg:!text-2xl"
+        highlightedTextStyle="!text-xl !font-medium lg:!text-2xl"
       />
 
       <div className="relative flex w-full justify-center">

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/LemonCashSection.tsx

@@ -0,0 +1,17 @@
+import Quote from "@/components/Quote";
+import { request } from "@/utils/graphQLClient";
+
+import {
+  lemonCashSectionQuery,
+  lemonCashSectionQueryType,
+} from "../../queries/lemon-cash";
+
+const LemonCashSection: React.FC = async () => {
+  const quote = (
+    await request<lemonCashSectionQueryType>(lemonCashSectionQuery)
+  ).lemonCashSection;
+
+  return <Quote className="lg:px-32" {...quote} />;
+};
+
+export default LemonCashSection;

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx → frontend/src/app/enterprise/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 
 import clsx from "clsx";
 
-import { Table } from "@/app/for-lawyers/queries/kleros-enterprise-section";
+import { Table } from "@/app/enterprise/queries/kleros-enterprise-section";
 import Divider from "@/components/Divider";
 import Pagination from "@/components/Pagination";
 

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/index.tsx → frontend/src/app/enterprise/components/KlerosEnterpriseSection/MethodsTable/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Table } from "@/app/for-lawyers/queries/kleros-enterprise-section";
+import { Table } from "@/app/enterprise/queries/kleros-enterprise-section";
 import { useScreenSize } from "@/hooks/useScreenSize";
 
 import DesktopTable from "./DesktopTable";

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx → frontend/src/app/enterprise/components/KlerosEnterpriseSection/index.tsx

@@ -10,15 +10,12 @@ import {
 import Card from "../Card";
 
 import DisputeResolutionProcess from "./DisputeResolutionProcess";
-import HighlightedText from "./HighlightedText";
+import Industries from "./Industries";
 import LemonCashSection from "./LemonCashSection";
 import MethodsTable from "./MethodsTable";
 
 const KlerosEnterpriseSection: React.FC = async () => {
   const {
-    headerSubtitle,
-    header,
-    subtitle,
     cards,
     disputeResolutionProcessHeader,
     processDiagram,
@@ -37,14 +34,6 @@ const KlerosEnterpriseSection: React.FC = async () => {
         "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-6 lg:px-32">
-        <h3 className="text-primary-purple lg:text-lg">{headerSubtitle}</h3>
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
-          {header}
-        </h1>
-        <HighlightedText {...subtitle} />
-      </div>
-
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:px-32">
         {cards.map((card) => (
           <Card key={card.title} {...card} />
@@ -59,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>

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

@@ -0,0 +1,52 @@
+import Card from "@/components/CtaCard";
+import Quote from "@/components/Quote";
+import { request } from "@/utils/graphQLClient";
+
+import {
+  forGovernmentsQuery,
+  IForGovernmentsQuery,
+  getBlock,
+  ICCText,
+  ICCCardsSection,
+  ICCLongText,
+  ICCQuote,
+} from "./queries";
+
+const ForGovernments: React.FC = async () => {
+  const sections = (await request<IForGovernmentsQuery>(forGovernmentsQuery))
+    .enterprise.GovernmentSection;
+  const { text } = getBlock<ICCText>(sections, "ComponentContentText");
+  const { longtext } = getBlock<ICCLongText>(
+    sections,
+    "ComponentContentLongText",
+  );
+  const { cards } = getBlock<ICCCardsSection>(
+    sections,
+    "ComponentContentCardsSection",
+  );
+  const quote = getBlock<ICCQuote>(sections, "ComponentContentQuote");
+
+  return (
+    <div
+      className={"flex flex-col gap-20 px-6 py-12 lg:gap-28 lg:px-32 lg:py-24"}
+    >
+      <div className="space-y-6">
+        <span className="text-xl font-medium lg:text-2xl">{text}</span>
+        <p className="lg:text-lg">{longtext}</p>
+      </div>
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {cards.map((card) => (
+          <Card
+            key={card.title}
+            title={card.title}
+            icon={card.icon}
+            description={card.subtitle}
+          />
+        ))}
+      </div>
+      <Quote {...quote} />
+    </div>
+  );
+};
+
+export default ForGovernments;