Fix(frontend)/apply feedback round 1

frontend/src/app/for-builders/page.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 
 import Hero from "@/components/ForBuilders/Hero";
 import UseCasesSection from "@/components/ForBuilders/UseCasesSection";
-import IntegrateSection from "@/components/IntegrateSection";
 import { heroQuery, HeroQueryType } from "@/queries/for-builders/hero";
 import {
   useCasesQuery,
@@ -25,7 +24,6 @@ const ForBuilders: React.FC = async () => {
       <UseCasesSection
         {...{ useCasesData: useCasesData.forBuildersPageUseCasesSection }}
       />
-      <IntegrateSection />
     </>
   );
 };

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

@@ -2,39 +2,26 @@ import React from "react";
 
 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 { heroQuery, HeroQueryType } from "../queries/hero";
 
 const Hero: React.FC = async () => {
-  const { header, subtitle, buttons, arrowLink, background } = (
+  const { header, subtitle, 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="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">
+        <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 className="flex flex-wrap gap-6">
-          {buttons.map((button) => (
-            <CustomLink key={button.text} href={button.link.url}>
-              <Button variant="secondary">
-                <span>{button.text}</span>
-              </Button>
-            </CustomLink>
-          ))}
-        </div>
-        <ExternalLink
-          text={arrowLink.text}
-          url={arrowLink.link.url}
-          className="text-start lg:pb-9 [&>span]:text-primary-text"
-        />
       </div>
       <Image
         src={background.url}

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

@@ -8,7 +8,6 @@ import {
 } from "../../queries/kleros-dispute-resolution-section";
 
 import ArbitrationMethodTable from "./ArbitrationMethodTable";
-import KlerosEscrowSection from "./KlerosEscrowSection";
 import ResearchSection from "./ResearchSection";
 
 const KlerosDisputeResolutionSection: React.FC = async () => {
@@ -54,8 +53,6 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
         </h2>
         <p className="text-secondary-text lg:text-lg">{thirdSubtitle}</p>
       </div>
-
-      <KlerosEscrowSection />
     </div>
   );
 };

frontend/src/app/for-lawyers/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/home/components/CaseStudies.tsx

@@ -14,7 +14,7 @@ const CaseStudies: React.FC = async () => {
   ).then((res) => res.homeCaseStudiesSection);
 
   return (
-    <div className="bg-background-2 px-6 py-12 lg:px-32 lg:pt-24">
+    <div className="bg-background-1 px-6 py-12 lg:px-32 lg:pt-24">
       <div className="flex flex-col gap-8">
         <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
           {title}

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

@@ -9,8 +9,6 @@ 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 {
@@ -20,11 +18,10 @@ const Hero: React.FC = async () => {
     secondaryButton,
     arrowLink,
     background,
-    tokenStats,
   } = 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}
@@ -49,7 +46,6 @@ const Hero: React.FC = async () => {
           text={arrowLink.text}
           className="text-start [&>span]:text-base [&>span]:text-primary-text"
         />
-        <TokenStats {...{ tokenStats }} />
       </div>
       <Image
         src={background.url}

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

@@ -16,7 +16,7 @@ const LearnPosts: React.FC = async () => {
     );
 
   return (
-    <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
+    <div className="bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
       <div className="flex flex-col gap-8">
         <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
           {title}

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

@@ -14,7 +14,7 @@ const UseCases: React.FC = async () => {
   return (
     <div
       className={
-        "space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
+        "space-y-8 bg-background-1 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
       }
     >
       <h3 className="text-xl font-medium text-primary-text lg:text-3xl">

frontend/src/app/home/page.tsx

@@ -22,10 +22,10 @@ const Home: React.FC = async () => {
       <Hero />
       <TrustedBy />
       <HowKlerosWorks />
+      <LearnPosts />
       <CaseStudies />
       <UseCases />
-      <LearnPosts />
-      <IntegrateSection />
+      <IntegrateSection listMode />
       <StartEarning />
       <GetInTouch />
     </>

frontend/src/app/home/queries/hero.tsx

@@ -23,11 +23,6 @@ export const heroQuery = gql`
           url
         }
       }
-      tokenStats {
-        key
-        primaryValue
-        secondaryValue
-      }
       background {
         url
       }
@@ -57,11 +52,6 @@ export type HeroQueryType = {
         url: string;
       };
     };
-    tokenStats: Array<{
-      key: string;
-      primaryValue: string;
-      secondaryValue: string;
-    }>;
     background: {
       url: string;
     };

frontend/src/components/CtaCard.tsx

@@ -45,7 +45,11 @@ const CtaCard: React.FC<ICtaCard> = ({
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
         {title}
       </h2>
-      <p className="mb-6 text-base text-secondary-text lg:text-lg">
+      <p
+        className={
+          "mb-6 whitespace-pre-wrap text-base text-secondary-text lg:text-lg"
+        }
+      >
         {description}
       </p>
       {typeof arrowLink !== "undefined" ? (

frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx

@@ -18,9 +18,13 @@ const CuratorTabContent: React.FC<EarnPageBecomeACuratorTab> = ({
         {title}
       </div>
       <div className="text-secondary-text lg:text-lg">{description}</div>
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {ctaCard.map((card) => (
-          <CtaCard key={card.title} {...card} />
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-6">
+        {ctaCard.map((card, i) => (
+          <CtaCard
+            className={i + 1 < ctaCard.length / 2 ? "col-span-3" : "col-span-2"}
+            key={card.title}
+            {...card}
+          />
         ))}
       </div>
       <ExternalLink

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

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 
-import { Flowchart as FlowchartItems } from "../queries/kleros-mediation-section";
+import { Flowchart as FlowchartItems } from "@/app/for-lawyers/queries/kleros-mediation-section";
 
 type IFlowchartItem = FlowchartItems[number] & {
   background: "primary" | "secondary";

frontend/src/components/IntegrateSection/index.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 
-import ExternalLink from "@/components/ExternalLink";
 import AppsDropdownContent from "@/components/Navbar/AppsDropdownContent";
 import { integrateQuery, IntegrateQueryType } from "@/queries/integrate";
 import { request } from "@/utils/graphQLClient";
 
 import LearnMore from "../LearnMore";
 
-const IntegrateSection: React.FC = async () => {
+interface IIntegrateSection {
+  listMode?: boolean;
+}
+
+const IntegrateSection: React.FC<IIntegrateSection> = async ({ listMode }) => {
   const integrateData = await request<IntegrateQueryType>(integrateQuery).then(
     (res) => res.forBuildersPageIntegrateSection,
   );
@@ -25,6 +28,7 @@ const IntegrateSection: React.FC = async () => {
       </p>
       <AppsDropdownContent
         appsSection={integrateData.appsSection}
+        {...{ listMode }}
         className="pt-8 lg:pt-16"
       />
       <LearnMore
@@ -33,11 +37,6 @@ const IntegrateSection: React.FC = async () => {
         button={integrateData.arrowLink}
         className="!mt-12 lg:!mt-16"
       />
-      <ExternalLink
-        className="mx-auto mt-12 lg:mt-16"
-        text={integrateData.arrowLink.text}
-        url={integrateData.arrowLink.link.url}
-      />
     </div>
   );
 };

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

@@ -1,11 +1,10 @@
 import ExternalLink from "@/components/ExternalLink";
-import { request } from "@/utils/graphQLClient";
-
+import Flowchart from "@/components/Flowchart";
 import {
   ForLawyersPageKlerosEscrowSection,
   forLawyersPageKlerosEscrowSectionQuery,
-} from "../../queries/kleros-escrow-section";
-import Flowchart from "../Flowchart";
+} from "@/queries/kleros-escrow-section";
+import { request } from "@/utils/graphQLClient";
 
 const KlerosEscrowSection: React.FC = async () => {
   const {

frontend/src/components/Navbar/AppsDropdownContent/index.tsx

@@ -7,21 +7,25 @@ import Card from "./Card";
 
 interface AppsDropdownContentProps {
   appsSection: AppsSection;
+  listMode?: boolean;
   closeFn?: () => void;
   className?: string;
 }
 
 const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
   appsSection,
+  listMode = false,
   closeFn,
   className,
 }) => (
   <div className={clsx(className, "mx-auto lg:max-w-[1172px]")}>
     <div
       className={clsx(
         "grid w-full grid-cols-1 gap-3 bg-background-2",
-        "md:grid-cols-2 md:grid-rows-5",
-        "lg:grid-flow-col lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
+        !listMode && [
+          "md:grid-cols-2 md:grid-rows-5",
+          "lg:grid-flow-col lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
+        ],
       )}
     >
       {appsSection?.solutions.map((solution, i) => (

frontend/src/app/for-lawyers/queries/kleros-escrow-section.ts → frontend/src/queries/kleros-escrow-section.ts

@@ -1,9 +1,8 @@
 import { gql } from "graphql-request";
 
+import { Flowchart } from "@/app/for-lawyers/queries/kleros-mediation-section";
 import { ArrowLink } from "@/queries/navbar";
 
-import { Flowchart } from "./kleros-mediation-section";
-
 export const forLawyersPageKlerosEscrowSectionQuery = gql`
   {
     forLawyersPageKlerosEscrowSection {