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/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,11 @@ import {
 import Card from "../Card";
 
 import DisputeResolutionProcess from "./DisputeResolutionProcess";
-import HighlightedText from "./HighlightedText";
 import LemonCashSection from "./LemonCashSection";
 import MethodsTable from "./MethodsTable";
 
 const KlerosEnterpriseSection: React.FC = async () => {
   const {
-    headerSubtitle,
-    header,
-    subtitle,
     cards,
     disputeResolutionProcessHeader,
     processDiagram,
@@ -37,14 +33,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} />

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

@@ -1,14 +1,14 @@
 import clsx from "clsx";
 
 import ExternalLink from "@/components/ExternalLink";
+import Flowchart from "@/components/Flowchart";
 import { request } from "@/utils/graphQLClient";
 
 import {
   forLawyersPageMediationSectionQuery,
   ForLawyersPageMediationSectionType,
 } from "../../queries/kleros-mediation-section";
 import Card from "../Card";
-import Flowchart from "../Flowchart";
 
 const KlerosMediationSection: React.FC = async () => {
   const { header, subtitle, cards, flowchart, benefitsHeader, arrowLink } = (

frontend/src/app/for-lawyers/page.tsx → frontend/src/app/enterprise/page.tsx

@@ -5,9 +5,7 @@ import { getPageMetadata } from "@/utils/seo";
 import Hero from "./components/Hero";
 import KlerosDisputeResolutionSection from "./components/KlerosDisputeResolutionSection";
 import KlerosEnterpriseSection from "./components/KlerosEnterpriseSection";
-import KlerosFellowSection from "./components/KlerosFellowSection";
-import KlerosMediationSection from "./components/KlerosMediationSection";
-import KlerosParticipateSection from "./components/KlerosParticipateSection";
+// import KlerosMediationSection from "./components/KlerosMediationSection";
 
 export const generateMetadata = async (): Promise<Metadata> => {
   return getPageMetadata("forLawyersPageSeo");
@@ -18,10 +16,7 @@ const ForLawyers: React.FC = async () => {
     <>
       <Hero />
       <KlerosEnterpriseSection />
-      <KlerosMediationSection />
       <KlerosDisputeResolutionSection />
-      <KlerosParticipateSection />
-      <KlerosFellowSection />
     </>
   );
 };

frontend/src/app/home/components/Enterprise/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import clsx from "clsx";
+
+import CtaCard from "@/components/CtaCard";
+import { request } from "@/utils/graphQLClient";
+
+import { enterpriseQuery, IEnterpriseQuery } from "./queries";
+
+const Web3: React.FC = async () => {
+  const { title, subtitle, cards } = await request<IEnterpriseQuery>(
+    enterpriseQuery,
+  ).then(({ homeEnterprise }) => homeEnterprise);
+
+  return (
+    <div className="bg-background-1 px-6 pb-12 pt-6 lg:px-32 lg:pb-24 lg:pt-12">
+      <div className="flex flex-col gap-8">
+        <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
+          {title}
+        </h3>
+        <p className="text-base text-primary-text lg:text-lg">{subtitle}</p>
+        <div
+          className={clsx(
+            "mx-auto mb-12 mt-4 flex flex-wrap gap-4",
+            "xl:mt-16 xl:grid xl:grid-cols-3",
+          )}
+        >
+          {cards.map(({ icon, title, subtitle }) => (
+            <CtaCard
+              className="flex-grow"
+              key={title}
+              {...{ icon, title, description: subtitle }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Web3;

frontend/src/app/home/components/Enterprise/queries.ts

@@ -0,0 +1,31 @@
+import { gql } from "graphql-request";
+
+export const enterpriseQuery = gql`
+  {
+    homeEnterprise {
+      title
+      subtitle
+      cards {
+        icon {
+          url
+        }
+        title
+        subtitle
+      }
+    }
+  }
+`;
+
+export type IEnterpriseQuery = {
+  homeEnterprise: {
+    title: string;
+    subtitle: string;
+    cards: Array<{
+      icon: {
+        url: string;
+      };
+      title: string;
+      subtitle: string;
+    }>;
+  };
+};

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

@@ -4,36 +4,26 @@ import Image from "next/image";
 
 import Button from "@/components/Button";
 import CustomLink from "@/components/CustomLink";
-import ExternalLink from "@/components/ExternalLink";
 import { request } from "@/utils/graphQLClient";
 
 import { HeroQueryType, heroQuery } from "../queries/hero";
 
-import TokenStats from "./TokenStats";
-
 const Hero: React.FC = async () => {
   const heroData = await request<HeroQueryType>(heroQuery);
-  const {
-    title,
-    subtitle,
-    primaryButton,
-    secondaryButton,
-    arrowLink,
-    background,
-    tokenStats,
-  } = heroData.homePageHero;
+  const { title, subtitle, primaryButton, secondaryButton, background } =
+    heroData.homePageHero;
 
   return (
-    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-20">
+    <div className="relative px-6 pb-56 pt-44 md:pt-52 lg:px-32 lg:pb-72">
       <div className="space-y-8">
         <h1 className="text-2xl font-medium text-primary-text lg:text-4xl">
           {title}
         </h1>
         <p className="text-lg text-primary-text">{subtitle}</p>
-        <div className="lg:hidden">
+        <div>
           <CustomLink href={primaryButton.link.url}>
-            <Button>
-              <span className="text-background-2"> {primaryButton.text} </span>
+            <Button variant="secondary">
+              <span> {primaryButton.text} </span>
             </Button>
           </CustomLink>
         </div>
@@ -44,12 +34,6 @@ const Hero: React.FC = async () => {
             </Button>
           </CustomLink>
         </div>
-        <ExternalLink
-          url={arrowLink.link.url}
-          text={arrowLink.text}
-          className="text-start [&>span]:text-base [&>span]:text-primary-text"
-        />
-        <TokenStats {...{ tokenStats }} />
       </div>
       <Image
         src={background.url}