feat(frontend): for-lawyers-page

frontend/src/app/for-lawyers/components/Card.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+import { Card as ICard } from "../queries/kleros-enterprise-section";
+
+const Card: React.FC<ICard> = ({ title, description, icon }) => {
+  return (
+    <div
+      className={clsx(
+        "rounded-2xl border border-stroke bg-background-2",
+        "p-6 pb-[56px] lg:pb-[60px]",
+        "flex flex-col items-start gap-4",
+      )}
+    >
+      <Image src={icon.url} width={90} height={90} alt="Card Icon" />
+      <h2 className="mb-2 text-lg font-medium text-primary-text lg:text-xl">
+        {title}
+      </h2>
+
+      <p className="text-secondary-text lg:text-lg">{description}</p>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/for-lawyers/components/Flowchart.tsx

@@ -0,0 +1,71 @@
+import clsx from "clsx";
+
+import { Flowchart as FlowchartItems } from "../queries/kleros-mediation-section";
+
+type IFlowchartItem = FlowchartItems[number] & {
+  background: "primary" | "secondary";
+};
+
+const FlowchartItem: React.FC<IFlowchartItem> = ({
+  name,
+  description,
+  index,
+  background,
+}) => {
+  return (
+    <div className="flex w-[284px] flex-col gap-6">
+      <div
+        className={clsx(
+          "h-[148px] rounded-2xl bg-[linear-gradient(90deg,_#D38BFF_0%,_#9747FF_100%)]",
+          "flex items-center justify-center p-6",
+        )}
+      >
+        <span className="text-center text-lg font-medium text-primary-text lg:text-xl">
+          {name}
+        </span>
+      </div>
+
+      {/* ribbon */}
+      <div className="pr-[14px]">
+        <div
+          className={clsx(
+            "relative h-7 w-[100%-14px] bg-primary-blue",
+            "flex items-center justify-center",
+            //start-arrow
+            "before:absolute before:left-0 before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
+            "before:border-b-transparent before:border-t-transparent",
+            background === "primary"
+              ? "before:border-l-background-1"
+              : "before:border-l-background-2",
+            //end arrow
+            "after:absolute after:right-[-14px] after:top-0 after:border-b-[14px] after:border-l-[14px] after:border-t-[14px]",
+            "after:border-b-transparent after:border-l-primary-blue after:border-t-transparent",
+          )}
+        >
+          <span className="text-xl text-background-2">{index}</span>
+        </div>
+      </div>
+
+      <div className="rounded-3xl border-2 border-stroke bg-background-2 p-6">
+        <p className="text-secondary-text lg:text-lg">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+interface IFlowchart {
+  items: FlowchartItems;
+  background: IFlowchartItem["background"];
+}
+
+const Flowchart: React.FC<IFlowchart> = ({ items, background }) => {
+  return (
+    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-start">
+      {items.map((item) => (
+        <FlowchartItem key={item.name} {...item} background={background} />
+      ))}
+    </div>
+  );
+};
+
+export default Flowchart;

frontend/src/app/for-lawyers/components/Hero.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import clsx from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+
+import Button from "@/components/Button";
+import ExternalLink from "@/components/ExternalLink";
+import { request } from "@/utils/graphQLClient";
+
+import { heroQuery, HeroQueryType } from "../queries/hero";
+
+const Hero: React.FC = async () => {
+  const { header, subtitle, buttons, arrowLink, background } = (
+    await request<HeroQueryType>(heroQuery)
+  ).forLawyersPageHero;
+
+  return (
+    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
+      <div className="space-y-8">
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-3xl">
+          {header}
+        </h1>
+        <p className="max-w-[685px] text-lg">{subtitle}</p>
+        <div className="flex flex-wrap gap-6">
+          {buttons.map((button) => (
+            <Link
+              key={button.text}
+              href={button.link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="secondary">
+                <span>{button.text}</span>
+              </Button>
+            </Link>
+          ))}
+        </div>
+        <ExternalLink
+          text={arrowLink.text}
+          url={arrowLink.link.url}
+          className={clsx(
+            "flex-wrap items-start lg:pb-9",
+            "[&>span]:text-start [&>span]:text-primary-text",
+          )}
+        />
+      </div>
+      <Image
+        src={background.url}
+        alt="Hero Image Background"
+        fill
+        priority
+        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

@@ -0,0 +1,73 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+import { ArbitrationMethodTableType } from "@/app/for-lawyers/queries/kleros-dispute-resolution-section";
+
+const TableCardContent: React.FC<ArbitrationMethodTableType> = ({
+  name,
+  methodType,
+  icon,
+  items,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "relative",
+        methodType === "kleros" ? "p-[26px]" : "p-8 pb-1 lg:pr-2",
+      )}
+    >
+      <h2
+        className={clsx(
+          "mb-12 text-lg font-medium lg:text-xl",
+          methodType === "kleros" ? "text-background-2" : "text-primary-text",
+        )}
+      >
+        {name}
+      </h2>
+
+      <div className="flex flex-col gap-6">
+        {items.map((item, index) => (
+          <div
+            key={`${item.name}-${index}`}
+            className="flex flex-row justify-start gap-4"
+          >
+            <Image
+              width={24}
+              height={24}
+              src={item.icon.url}
+              alt={item.name}
+              className="h-fit"
+            />
+            <div>
+              <p
+                className={clsx(
+                  "leading-none",
+                  methodType === "kleros"
+                    ? "text-background-2"
+                    : "text-primary-purple",
+                )}
+              >
+                {item.name}
+              </p>
+              <p className="text-primary-text lg:text-lg lg:font-medium">
+                {item.value}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {icon ? (
+        <Image
+          src={icon.url}
+          width={53.251}
+          height={49.259}
+          alt="Kleros-icon"
+          className="absolute right-[33.75px] top-[32px]"
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default TableCardContent;

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

@@ -0,0 +1,56 @@
+import clsx from "clsx";
+
+import { ArbitrationMethodTableType } from "@/app/for-lawyers/queries/kleros-dispute-resolution-section";
+
+import TableCardContent from "./TabelCardContent";
+
+interface IArbitrationMethodTable {
+  table: ArbitrationMethodTableType[];
+}
+
+const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
+  table,
+}) => {
+  return (
+    <div className="relative h-fit min-h-[1125px] w-full lg:min-h-[500px]">
+      <div
+        className={clsx(
+          "box-border rounded-3xl border-2 border-stroke bg-background-2",
+          "absolute left-0 top-0 h-full min-h-fit w-full",
+          "pb-[66.666%] lg:pb-0 lg:pr-[66.666%]",
+        )}
+      >
+        <TableCardContent {...table?.[0]} />
+      </div>
+
+      <div
+        className={clsx(
+          "box-border rounded-3xl bg-background-1",
+          "absolute left-0 top-1/3 h-2/3 min-h-fit w-full lg:left-1/3 lg:top-0 lg:h-full lg:w-2/3",
+          "pb-[33.333%] lg:pb-0 lg:pr-[33.333%]",
+        )}
+      >
+        <TableCardContent {...table?.[1]} />
+      </div>
+
+      <div
+        className={clsx(
+          "box-border rounded-3xl",
+          "bg-[linear-gradient(0deg,_#5B2B99_0%,_#27CDFE_100%)]",
+          "absolute left-0 top-2/3 h-1/3 w-full p-[6px] lg:left-2/3 lg:top-0 lg:h-full lg:w-1/3",
+        )}
+      >
+        <div
+          className={clsx(
+            "h-full w-full bg-[linear-gradient(90deg,_#D38BFF_0%,_#9747FF_100%)] shadow-[0px_2px_3px_0px_rgba(0,_0,_0,_0.06)]",
+            "rounded-3xl",
+          )}
+        >
+          <TableCardContent {...table?.[2]} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ArbitrationMethodTable;

frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx

@@ -0,0 +1,48 @@
+import ExternalLink from "@/components/ExternalLink";
+import { request } from "@/utils/graphQLClient";
+
+import {
+  ForLawyersPageKlerosEscrowSection,
+  forLawyersPageKlerosEscrowSectionQuery,
+} from "../../queries/kleros-escrow-section";
+import Flowchart from "../Flowchart";
+
+const KlerosEscrowSection: React.FC = async () => {
+  const {
+    header,
+    subtitle,
+    secondHeader,
+    secondSubtitle,
+    flowchart,
+    flowchartLabel,
+    arrowLink,
+  } = (
+    await request<ForLawyersPageKlerosEscrowSection>(
+      forLawyersPageKlerosEscrowSectionQuery,
+    )
+  ).forLawyersPageKlerosEscrowSection;
+  return (
+    <div>
+      <h1 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
+        {header}
+      </h1>
+      <p className="mb-16 text-secondary-text lg:text-lg">{subtitle}</p>
+
+      <p className="mb-12 text-primary-purple lg:text-lg">{flowchartLabel}</p>
+      <Flowchart items={flowchart} background="secondary" />
+
+      <h2 className="mb-6 mt-12 text-lg font-medium text-primary-text lg:text-xl">
+        {secondHeader}
+      </h2>
+      <p className="mb-8 text-secondary-text lg:text-lg">{secondSubtitle}</p>
+
+      <ExternalLink
+        text={arrowLink.text}
+        url={arrowLink.link.url}
+        className="flex-wrap justify-center lg:justify-start"
+      />
+    </div>
+  );
+};
+
+export default KlerosEscrowSection;