diff --git a/frontend/src/app/for-lawyers/components/Card.tsx b/frontend/src/app/for-lawyers/components/Card.tsx new file mode 100644 index 0000000..fd24a98 --- /dev/null +++ b/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 = ({ title, description, icon }) => { + return ( +
+ Card Icon +

+ {title} +

+ +

{description}

+
+ ); +}; + +export default Card; diff --git a/frontend/src/app/for-lawyers/components/Flowchart.tsx b/frontend/src/app/for-lawyers/components/Flowchart.tsx new file mode 100644 index 0000000..889a95d --- /dev/null +++ b/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 = ({ + name, + description, + index, + background, +}) => { + return ( +
+
+ + {name} + +
+ + {/* ribbon */} +
+
+ {index} +
+
+ +
+

{description}

+
+
+ ); +}; + +interface IFlowchart { + items: FlowchartItems; + background: IFlowchartItem["background"]; +} + +const Flowchart: React.FC = ({ items, background }) => { + return ( +
+ {items.map((item) => ( + + ))} +
+ ); +}; + +export default Flowchart; diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx new file mode 100644 index 0000000..fd7a36a --- /dev/null +++ b/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(heroQuery) + ).forLawyersPageHero; + + return ( +
+
+

+ {header} +

+

{subtitle}

+
+ {buttons.map((button) => ( + + + + ))} +
+ span]:text-start [&>span]:text-primary-text", + )} + /> +
+ Hero Image Background +
+ ); +}; + +export default Hero; diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx new file mode 100644 index 0000000..d2da1e2 --- /dev/null +++ b/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 = ({ + name, + methodType, + icon, + items, +}) => { + return ( +
+

+ {name} +

+ +
+ {items.map((item, index) => ( +
+ {item.name} +
+

+ {item.name} +

+

+ {item.value} +

+
+
+ ))} +
+ + {icon ? ( + Kleros-icon + ) : null} +
+ ); +}; + +export default TableCardContent; diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx new file mode 100644 index 0000000..96f64ac --- /dev/null +++ b/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 = ({ + table, +}) => { + return ( +
+
+ +
+ +
+ +
+ +
+
+ +
+
+
+ ); +}; + +export default ArbitrationMethodTable; diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx new file mode 100644 index 0000000..9c2e3cf --- /dev/null +++ b/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( + forLawyersPageKlerosEscrowSectionQuery, + ) + ).forLawyersPageKlerosEscrowSection; + return ( +
+

+ {header} +

+

{subtitle}

+ +

{flowchartLabel}

+ + +

+ {secondHeader} +

+

{secondSubtitle}

+ + +
+ ); +}; + +export default KlerosEscrowSection; diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx new file mode 100644 index 0000000..48412f9 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx @@ -0,0 +1,63 @@ +"use client"; +import { useMemo, useState } from "react"; + +import Pagination from "@/components/Pagination"; +import PublicationCard from "@/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard"; +import { useScreenSize } from "@/hooks/useScreenSize"; + +import { ForLawyersPageDisputeResolutionSectionQueryType } from "../../queries/kleros-dispute-resolution-section"; + +type IResearchSection = Pick< + ForLawyersPageDisputeResolutionSectionQueryType["forLawyersPageDisputeResolutionWithKlerosSection"], + "secondHeader" | "secondSubtitle" | "publications" +>; + +const ResearchSection: React.FC = ({ + secondHeader, + secondSubtitle, + publications, +}) => { + const [page, setPage] = useState(1); + + const screenSize = useScreenSize(); + + const itemsPerPage = useMemo( + () => (screenSize === "sm" ? 1 : 6), + [screenSize], + ); + + const items = useMemo( + () => + publications.slice( + itemsPerPage * (page - 1), + Math.min(publications.length, itemsPerPage * page), + ), + [publications, itemsPerPage, page], + ); + + return ( +
+

+ {secondHeader} +

+

{secondSubtitle}

+ +
+ {items.map((publication, index) => ( + + ))} +
+ setPage(val)} + /> +
+ ); +}; + +export default ResearchSection; diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx new file mode 100644 index 0000000..c344ba3 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx @@ -0,0 +1,63 @@ +import clsx from "clsx"; + +import { request } from "@/utils/graphQLClient"; + +import { + forLawyersPageDisputeResolutionSectionQuery, + ForLawyersPageDisputeResolutionSectionQueryType, +} from "../../queries/kleros-dispute-resolution-section"; + +import ArbitrationMethodTable from "./ArbitrationMethodTable"; +import KlerosEscrowSection from "./KlerosEscrowSection"; +import ResearchSection from "./ResearchSection"; + +const KlerosDisputeResolutionSection: React.FC = async () => { + const { + headerSubtitle, + header, + subtitle, + secondHeader, + secondSubtitle, + thirdHeader, + thirdSubtitle, + arbitrationMethodTable, + publications, + } = ( + await request( + forLawyersPageDisputeResolutionSectionQuery, + ) + ).forLawyersPageDisputeResolutionWithKlerosSection; + return ( +
+
+

+ {headerSubtitle} +

+

+ {header} +

+

{subtitle}

+
+ + + + +
+

+ {thirdHeader} +

+

{thirdSubtitle}

+
+ + +
+ ); +}; + +export default KlerosDisputeResolutionSection; diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx new file mode 100644 index 0000000..da3af98 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx @@ -0,0 +1,51 @@ +"use client"; + +import Image from "next/image"; + +import { useScreenSize } from "@/hooks/useScreenSize"; + +import { ForLawyersPageKlerosEnterpiseSectionType } from "../../queries/kleros-enterprise-section"; + +import HighlightedText from "./HighlightedText"; + +type IDisputeResolutionProcess = Pick< + ForLawyersPageKlerosEnterpiseSectionType["forLawyersPageKlerosEnterpriseSection"], + "disputeResolutionProcessHeader" | "processDiagram" | "processDiagramDesktop" +>; + +const DisputeResolutionProcess: React.FC = ({ + disputeResolutionProcessHeader, + processDiagram, + processDiagramDesktop, +}) => { + const screenSize = useScreenSize(); + return ( +
+ + +
+ {screenSize === "lg" ? ( + Process diagram + ) : ( + Process diagram + )} +
+
+ ); +}; + +export default DisputeResolutionProcess; diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx new file mode 100644 index 0000000..aecf8d1 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx @@ -0,0 +1,49 @@ +import clsx from "clsx"; + +import { HighlightedText as IHighlightedText } from "../../queries/kleros-enterprise-section"; + +const HighlightedText: React.FC< + IHighlightedText & { fullTextStyle?: string; highlightedTextStyle?: string } +> = ({ fullText, highlightedText, fullTextStyle, highlightedTextStyle }) => { + const FullText = ( + + {fullText} + + ); + if (!highlightedText) return FullText; + + const index = fullText.indexOf(highlightedText); + + if (index === -1) return FullText; + + const beforeMatch = fullText.slice(0, index); + const match = fullText.slice(index, index + highlightedText.length); + const afterMatch = fullText.slice(index + highlightedText.length); + + return ( + + {beforeMatch} + + {match} + + {afterMatch} + + ); +}; + +export default HighlightedText; diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx new file mode 100644 index 0000000..d9f9f2f --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx @@ -0,0 +1,54 @@ +import clsx from "clsx"; +import Image from "next/image"; + +import { request } from "@/utils/graphQLClient"; + +import { + lemonCashSectionQuery, + lemonCashSectionQueryType, +} from "../../queries/lemon-cash"; + +const LemonCashSection: React.FC = async () => { + const { + header, + primarySubtitle, + secondarySubtitle, + icon, + testimony, + testimonyAuthor, + } = (await request(lemonCashSectionQuery)) + .lemonCashSection; + + return ( +
+

+ {header} +

+

{primarySubtitle}

+

+ {secondarySubtitle} +

+ +
+ Lemon cash +
+

{testimony}

+

{testimonyAuthor}

+
+
+
+ ); +}; + +export default LemonCashSection; diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx new file mode 100644 index 0000000..2240ff0 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx @@ -0,0 +1,81 @@ +import React from "react"; + +import clsx from "clsx"; + +import { IMethodsTable } from "."; + +const DesktopTable: React.FC = ({ table }) => { + const { tableHeadings, tableRows } = table; + + return ( +
+ {tableHeadings.map(({ heading }, index) => ( +
+ + {heading} + +
+ ))} + + {tableRows.map(({ rowHeading, rowData }, rowIndex) => ( + +
+ + {rowHeading} + +
+ + {rowData.map(({ primaryValue, secondaryValue }, index) => ( +
+

+ {primaryValue} +

+

+ {secondaryValue} +

+
+ ))} + + ))} +
+ ); +}; + +export default DesktopTable; diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx new file mode 100644 index 0000000..0efd117 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx @@ -0,0 +1,64 @@ +import React, { useState } from "react"; + +import clsx from "clsx"; + +import { Table } from "@/app/for-lawyers/queries/kleros-enterprise-section"; +import Divider from "@/components/Divider"; +import Pagination from "@/components/Pagination"; + +import { IMethodsTable } from "."; + +const TableItem: React.FC<{ + heading: string; + tableHeadings: Table["tableHeadings"]; + tableData: Table["tableRows"][number]["rowData"]; +}> = ({ heading, tableHeadings, tableData }) => { + return ( +
+

{heading}

{" "} + + {tableHeadings.slice(1).map(({ heading }, index) => ( +
+

{heading}

+
+

+ {tableData[index].primaryValue} +

+

+ {tableData[index].secondaryValue} +

+
+
+ ))} +
+ ); +}; + +const MobileTable: React.FC = ({ table }) => { + const [page, setPage] = useState(1); + const { tableHeadings, tableRows } = table; + + return ( +
+ + setPage(val)} + className="mt-12" + /> +
+ ); +}; + +export default MobileTable; diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/index.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/index.tsx new file mode 100644 index 0000000..dc612f2 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/index.tsx @@ -0,0 +1,26 @@ +"use client"; +import { Table } from "@/app/for-lawyers/queries/kleros-enterprise-section"; +import { useScreenSize } from "@/hooks/useScreenSize"; + +import DesktopTable from "./DesktopTable"; +import MobileTable from "./MobileTable"; + +export interface IMethodsTable { + table: Table; +} + +const MethodsTable: React.FC = ({ table }) => { + const screenSize = useScreenSize(); + + return ( +
+ {screenSize === "lg" ? ( + + ) : ( + + )} +
+ ); +}; + +export default MethodsTable; diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx new file mode 100644 index 0000000..4ce7303 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx @@ -0,0 +1,74 @@ +import clsx from "clsx"; + +import ExternalLink from "@/components/ExternalLink"; +import { request } from "@/utils/graphQLClient"; + +import { + ForLawyersPageKlerosEnterpiseSectionType, + forLawyersPageKlerosEnterpriseSectionQuery, +} from "../../queries/kleros-enterprise-section"; +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, + processDiagramDesktop, + table, + arrowLink, + } = ( + await request( + forLawyersPageKlerosEnterpriseSectionQuery, + ) + ).forLawyersPageKlerosEnterpriseSection; + return ( +
+
+

{headerSubtitle}

+

+ {header} +

+ +
+ +
+ {cards.map((card) => ( + + ))} +
+ + + + + + +
+ ); +}; + +export default KlerosEnterpriseSection; diff --git a/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx new file mode 100644 index 0000000..b1f33f5 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx @@ -0,0 +1,65 @@ +import clsx from "clsx"; +import Image from "next/image"; + +import ExternalLink from "@/components/ExternalLink"; +import { request } from "@/utils/graphQLClient"; + +import { + ForLawyersPageBecomeAFellowSection, + forLawyersPageBecomeAFellowSectionQuery, +} from "../../queries/kleros-become-a-fellow-section"; + +const KlerosFellowSection: React.FC = async () => { + const { + header, + headerSubtitle, + firstSubtitle, + secondSubtitle, + fellowImages, + arrowLink, + } = ( + await request( + forLawyersPageBecomeAFellowSectionQuery, + ) + ).forLawyersPageBecomeAFellowSection; + + return ( +
+
+

{headerSubtitle}

+

+ {header} +

+

{firstSubtitle}

+

{secondSubtitle}

+
+ +
+ {fellowImages.map((fellow) => ( + fellow image + ))} +
+ + +
+ ); +}; + +export default KlerosFellowSection; diff --git a/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx new file mode 100644 index 0000000..bd58225 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx @@ -0,0 +1,56 @@ +import clsx from "clsx"; + +import ExternalLink from "@/components/ExternalLink"; +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 } = ( + await request( + forLawyersPageMediationSectionQuery, + ) + ).forLawyersPageMediationSection; + return ( +
+
+

+ {header} +

+

{subtitle}

+
+ + + +
+

+ {benefitsHeader} +

+
+ {cards.map((card) => ( + + ))} +
+
+ + +
+ ); +}; + +export default KlerosMediationSection; diff --git a/frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx new file mode 100644 index 0000000..2182ad0 --- /dev/null +++ b/frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx @@ -0,0 +1,32 @@ +import clsx from "clsx"; + +import LearnMore from "@/components/LearnMore"; +import { request } from "@/utils/graphQLClient"; + +import { + ForLawyersPageParticipateSection, + forLawyersPageParticipateSectionQuery, +} from "../../queries/kleros-participation-section"; + +const KlerosParticipateSection: React.FC = async () => { + const { header, subtitle, headerSubtitle, starterKitSection } = ( + await request( + forLawyersPageParticipateSectionQuery, + ) + ).forLawyersPageParticipateSection; + return ( +
+
+

{headerSubtitle}

+

+ {header} +

+

{subtitle}

+
+ + +
+ ); +}; + +export default KlerosParticipateSection; diff --git a/frontend/src/app/for-lawyers/page.tsx b/frontend/src/app/for-lawyers/page.tsx new file mode 100644 index 0000000..e80beda --- /dev/null +++ b/frontend/src/app/for-lawyers/page.tsx @@ -0,0 +1,21 @@ +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"; + +const ForLawyers: React.FC = async () => { + return ( + <> + + + + + + + + ); +}; + +export default ForLawyers; diff --git a/frontend/src/app/for-lawyers/queries/hero.ts b/frontend/src/app/for-lawyers/queries/hero.ts new file mode 100644 index 0000000..d4e53c3 --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/hero.ts @@ -0,0 +1,39 @@ +import { gql } from "graphql-request"; + +import { ArrowLink } from "@/queries/navbar"; + +export const heroQuery = gql` + { + forLawyersPageHero { + header + subtitle + buttons { + text + link { + url + } + } + arrowLink { + text + link { + url + } + } + background { + url + } + } + } +`; + +export type HeroQueryType = { + forLawyersPageHero: { + header: string; + subtitle: string; + buttons: ArrowLink[]; + arrowLink: ArrowLink; + background: { + url: string; + }; + }; +}; diff --git a/frontend/src/app/for-lawyers/queries/kleros-become-a-fellow-section.ts b/frontend/src/app/for-lawyers/queries/kleros-become-a-fellow-section.ts new file mode 100644 index 0000000..9d3d04b --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/kleros-become-a-fellow-section.ts @@ -0,0 +1,36 @@ +import { gql } from "graphql-request"; + +import { ArrowLink } from "@/queries/navbar"; + +export const forLawyersPageBecomeAFellowSectionQuery = gql` + { + forLawyersPageBecomeAFellowSection { + headerSubtitle + header + firstSubtitle + secondSubtitle + fellowImages(pagination: { limit: 50 }) { + url + } + arrowLink { + text + link { + url + } + } + } + } +`; + +export type ForLawyersPageBecomeAFellowSection = { + forLawyersPageBecomeAFellowSection: { + headerSubtitle: string; + header: string; + firstSubtitle: string; + secondSubtitle: string; + fellowImages: { + url: string; + }[]; + arrowLink: ArrowLink; + }; +}; diff --git a/frontend/src/app/for-lawyers/queries/kleros-dispute-resolution-section.ts b/frontend/src/app/for-lawyers/queries/kleros-dispute-resolution-section.ts new file mode 100644 index 0000000..5644479 --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/kleros-dispute-resolution-section.ts @@ -0,0 +1,76 @@ +import { gql } from "graphql-request"; + +import { ArrowLink } from "@/queries/navbar"; + +export const forLawyersPageDisputeResolutionSectionQuery = gql` + { + forLawyersPageDisputeResolutionWithKlerosSection { + headerSubtitle + header + subtitle + secondHeader + secondSubtitle + thirdHeader + thirdSubtitle + + arbitrationMethodTable { + name + methodType + items { + name + value + icon { + url + } + } + icon { + url + } + } + + publications(pagination: { limit: 50 }) { + topic + authors + paperLink { + text + link { + url + } + } + } + } + } +`; + +export type ArbitrationMethodTableType = { + name: string; + methodType: "kleros" | "other"; + items: { + name: string; + value: string; + icon: { + url: string; + }; + }[]; + icon: { + url: string; + }; +}; + +export type ForLawyersPageDisputeResolutionSectionQueryType = { + forLawyersPageDisputeResolutionWithKlerosSection: { + headerSubtitle: string; + header: string; + subtitle: string; + secondHeader: string; + secondSubtitle: string; + thirdHeader: string; + thirdSubtitle: string; + arbitrationMethodTable: ArbitrationMethodTableType[]; + publications: { + topic: string; + authors: string; + paperLink: ArrowLink; + }[]; + }; +}; diff --git a/frontend/src/app/for-lawyers/queries/kleros-enterprise-section.ts b/frontend/src/app/for-lawyers/queries/kleros-enterprise-section.ts new file mode 100644 index 0000000..98f838c --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/kleros-enterprise-section.ts @@ -0,0 +1,101 @@ +import { gql } from "graphql-request"; + +import { ArrowLink } from "@/queries/navbar"; + +export const forLawyersPageKlerosEnterpriseSectionQuery = gql` + { + forLawyersPageKlerosEnterpriseSection { + headerSubtitle + header + + subtitle { + fullText + highlightedText + } + + cards { + title + description + icon { + url + } + } + arrowLink { + text + link { + url + } + } + + disputeResolutionProcessHeader { + fullText + highlightedText + } + + processDiagram { + url + } + + processDiagramDesktop { + url + } + + table { + tableHeadings { + heading + } + tableRows { + rowHeading + rowData { + primaryValue + secondaryValue + } + } + } + } + } +`; + +export type Table = { + tableHeadings: { + heading: string; + }[]; + tableRows: { + rowHeading: string; + rowData: { + primaryValue: string; + secondaryValue: string; + }[]; + }[]; +}; + +export type HighlightedText = { + fullText: string; + highlightedText: string; +}; + +export type Card = { + title: string; + description: string; + icon: { + url: string; + }; +}; + +export type ForLawyersPageKlerosEnterpiseSectionType = { + forLawyersPageKlerosEnterpriseSection: { + headerSubtitle: string; + header: string; + subtitle: HighlightedText; + cards: Card[]; + arrowLink: ArrowLink; + disputeResolutionProcessHeader: HighlightedText; + processDiagram: { + url: string; + }; + processDiagramDesktop: { + url: string; + }; + table: Table; + }; +}; diff --git a/frontend/src/app/for-lawyers/queries/kleros-escrow-section.ts b/frontend/src/app/for-lawyers/queries/kleros-escrow-section.ts new file mode 100644 index 0000000..1b06cfc --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/kleros-escrow-section.ts @@ -0,0 +1,40 @@ +import { gql } from "graphql-request"; + +import { ArrowLink } from "@/queries/navbar"; + +import { Flowchart } from "./kleros-mediation-section"; + +export const forLawyersPageKlerosEscrowSectionQuery = gql` + { + forLawyersPageKlerosEscrowSection { + header + subtitle + flowchartLabel + secondHeader + secondSubtitle + flowchart { + name + description + index + } + arrowLink { + text + link { + url + } + } + } + } +`; + +export type ForLawyersPageKlerosEscrowSection = { + forLawyersPageKlerosEscrowSection: { + header: string; + subtitle: string; + secondHeader: string; + secondSubtitle: string; + flowchartLabel: string; + flowchart: Flowchart; + arrowLink: ArrowLink; + }; +}; diff --git a/frontend/src/app/for-lawyers/queries/kleros-mediation-section.ts b/frontend/src/app/for-lawyers/queries/kleros-mediation-section.ts new file mode 100644 index 0000000..ba327d3 --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/kleros-mediation-section.ts @@ -0,0 +1,50 @@ +import { gql } from "graphql-request"; + +import { ArrowLink } from "@/queries/navbar"; + +import { Card } from "./kleros-enterprise-section"; + +export const forLawyersPageMediationSectionQuery = gql` + { + forLawyersPageMediationSection { + header + subtitle + flowchart { + name + description + index + } + benefitsHeader + cards { + title + description + icon { + url + } + } + arrowLink { + text + link { + url + } + } + } + } +`; + +export type Flowchart = { + name: string; + description: string; + index: number; +}[]; + +export type ForLawyersPageMediationSectionType = { + forLawyersPageMediationSection: { + header: string; + subtitle: string; + flowchart: Flowchart; + benefitsHeader: string; + cards: Card[]; + arrowLink: ArrowLink; + }; +}; diff --git a/frontend/src/app/for-lawyers/queries/kleros-participation-section.ts b/frontend/src/app/for-lawyers/queries/kleros-participation-section.ts new file mode 100644 index 0000000..df99792 --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/kleros-participation-section.ts @@ -0,0 +1,40 @@ +import { gql } from "graphql-request"; + +import { ArrowLink } from "@/queries/navbar"; + +export const forLawyersPageParticipateSectionQuery = gql` + { + forLawyersPageParticipateSection { + headerSubtitle + header + subtitle + starterKitSection { + title + button { + text + link { + url + } + } + background { + url + } + } + } + } +`; + +export type ForLawyersPageParticipateSection = { + forLawyersPageParticipateSection: { + headerSubtitle: string; + header: string; + subtitle: string; + starterKitSection: { + title: string; + button: ArrowLink; + background: { + url: string; + }; + }; + }; +}; diff --git a/frontend/src/app/for-lawyers/queries/lemon-cash.ts b/frontend/src/app/for-lawyers/queries/lemon-cash.ts new file mode 100644 index 0000000..53975cf --- /dev/null +++ b/frontend/src/app/for-lawyers/queries/lemon-cash.ts @@ -0,0 +1,29 @@ +import { gql } from "graphql-request"; + +export const lemonCashSectionQuery = gql` + { + lemonCashSection { + header + primarySubtitle + secondarySubtitle + icon { + url + } + testimony + testimonyAuthor + } + } +`; + +export type lemonCashSectionQueryType = { + lemonCashSection: { + header: string; + primarySubtitle: string; + secondarySubtitle: string; + icon: { + url: string; + }; + testimony: string; + testimonyAuthor: string; + }; +}; diff --git a/frontend/src/components/Cooperative/MemberSection/index.tsx b/frontend/src/components/Cooperative/MemberSection/index.tsx index 4fc4a18..d66236d 100644 --- a/frontend/src/components/Cooperative/MemberSection/index.tsx +++ b/frontend/src/components/Cooperative/MemberSection/index.tsx @@ -1,8 +1,7 @@ import ExternalLink from "@/components/ExternalLink"; +import LearnMore from "@/components/LearnMore"; import { CooperativePageMemberQueryType } from "@/queries/cooperative/member-section"; -import LearnMore from "./LearnMore"; - interface IMemberSection { memberData: CooperativePageMemberQueryType["cooperativePageMemberSection"]; } diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx index eb29f07..ab5e856 100644 --- a/frontend/src/components/ExternalLink.tsx +++ b/frontend/src/components/ExternalLink.tsx @@ -19,15 +19,13 @@ const ExternalLink: React.FC = ({ text, url, className }) => { rel="noopener noreferrer" className={clsx("block hover:brightness-[1.2]", className)} > - - {text} - + {text} Arrow link image ); diff --git a/frontend/src/components/Cooperative/MemberSection/LearnMore.tsx b/frontend/src/components/LearnMore.tsx similarity index 68% rename from frontend/src/components/Cooperative/MemberSection/LearnMore.tsx rename to frontend/src/components/LearnMore.tsx index 293b8ef..179b670 100644 --- a/frontend/src/components/Cooperative/MemberSection/LearnMore.tsx +++ b/frontend/src/components/LearnMore.tsx @@ -4,20 +4,26 @@ import Image from "next/image"; import Link from "next/link"; import Button from "@/components/Button"; -import { CooperativeLearnMoreSection } from "@/queries/cooperative/member-section"; +import { ArrowLink } from "@/queries/navbar"; -const LearnMore: React.FC = ({ - title, - button, - background, -}) => { +interface ILearnMore { + title: string; + button: ArrowLink; + background: { + url: string; + }; +} + +const LearnMore: React.FC = ({ title, button, background }) => { return (
-

{title}

+

+ {title} +

= ({ className, }) => { return ( -
+
{Array.from(Array(numPages), (_, index) => (