feat(frontend): add max width

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

@@ -13,7 +13,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
   background,
 }) => {
   return (
-    <div className="flex w-[284px] flex-col gap-6">
+    <div className="flex max-w-[270px] flex-col gap-6">
       <div
         className={clsx(
           "h-[148px] rounded-2xl bg-[linear-gradient(90deg,_#D38BFF_0%,_#9747FF_100%)]",
@@ -60,7 +60,11 @@ interface IFlowchart {
 
 const Flowchart: React.FC<IFlowchart> = ({ items, background }) => {
   return (
-    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-center">
+    <div
+      className={
+        "mx-auto grid w-fit grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
+      }
+    >
       {items.map((item) => (
         <FlowchartItem key={item.name} {...item} background={background} />
       ))}

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

@@ -1,6 +1,5 @@
 import React from "react";
 
-import clsx from "clsx";
 import Image from "next/image";
 
 import Button from "@/components/Button";
@@ -18,7 +17,7 @@ const Hero: React.FC = async () => {
   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">
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
         </h1>
         <p className="max-w-[685px] text-lg">{subtitle}</p>
@@ -34,10 +33,7 @@ const Hero: React.FC = async () => {
         <ExternalLink
           text={arrowLink.text}
           url={arrowLink.link.url}
-          className={clsx(
-            "flex-wrap items-start lg:pb-9",
-            "[&>span]:text-start [&>span]:text-primary-text",
-          )}
+          className="text-start lg:pb-9 [&>span]:text-primary-text"
         />
       </div>
       <Image

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

@@ -12,7 +12,11 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
   table,
 }) => {
   return (
-    <div className="relative h-fit min-h-[1125px] w-full lg:min-h-[500px]">
+    <div
+      className={
+        "relative h-fit min-h-[1125px] w-full lg:min-h-[500px] lg:px-32"
+      }
+    >
       <div
         className={clsx(
           "box-border rounded-3xl border-2 border-stroke bg-background-2",

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

@@ -23,24 +23,36 @@ const KlerosEscrowSection: React.FC = async () => {
   ).forLawyersPageKlerosEscrowSection;
   return (
     <div>
-      <h1 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
+      <h1
+        className={
+          "mb-6 text-lg font-medium text-primary-text lg:px-32 lg:text-2xl"
+        }
+      >
         {header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:text-lg">{subtitle}</p>
+      <p className="mb-16 text-secondary-text lg:px-32 lg:text-lg">
+        {subtitle}
+      </p>
 
-      <p className="mb-12 text-primary-purple lg:text-lg">{flowchartLabel}</p>
+      <p className="mb-12 text-primary-purple lg:px-32 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">
+      <h2
+        className={
+          "mb-6 mt-12 text-lg font-medium text-primary-text lg:px-32 lg:text-xl"
+        }
+      >
         {secondHeader}
       </h2>
-      <p className="mb-8 text-secondary-text lg:text-lg">{secondSubtitle}</p>
+      <p className="mb-8 text-secondary-text lg:px-32 lg:text-lg">
+        {secondSubtitle}
+      </p>
 
-      <ExternalLink
-        text={arrowLink.text}
-        url={arrowLink.link.url}
-        className="flex-wrap justify-center lg:justify-start"
-      />
+      <div className="mx-auto lg:mx-0 lg:px-32">
+        <ExternalLink text={arrowLink.text} url={arrowLink.link.url} />
+      </div>
     </div>
   );
 };

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

@@ -36,7 +36,7 @@ const ResearchSection: React.FC<IResearchSection> = ({
   );
 
   return (
-    <div>
+    <div className="lg:px-32">
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
         {secondHeader}
       </h2>

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

@@ -32,10 +32,10 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       className={clsx(
         "bg-background-2",
         "flex flex-col gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-6 lg:px-32">
         <h3 className="mb-6 text-primary-purple lg:text-lg">
           {headerSubtitle}
         </h3>
@@ -48,7 +48,7 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       <ArbitrationMethodTable table={arbitrationMethodTable} />
       <ResearchSection {...{ secondHeader, secondSubtitle, publications }} />
 
-      <div className="my-4">
+      <div className="my-4 lg:px-32">
         <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
           {thirdHeader}
         </h2>

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

@@ -14,7 +14,7 @@ const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
   processDiagram,
 }) => {
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-8 lg:px-32">
       <HighlightedText
         {...disputeResolutionProcessHeader}
         fullTextStyle="!text-primary-text !text-lg !font-medium lg:!text-xl"

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx

@@ -20,7 +20,7 @@ const LemonCashSection: React.FC = async () => {
     .lemonCashSection;
 
   return (
-    <div>
+    <div className="lg:px-32">
       <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
         {header}
       </h2>

frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx

@@ -41,7 +41,9 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
               rowIndex !== tableRows.length - 1 && "border-b border-b-stroke",
             )}
           >
-            <span className="break-words text-lg font-medium text-primary-purple">
+            <span
+              className={"break-words text-lg font-medium text-primary-purple"}
+            >
               {rowHeading}
             </span>
           </div>

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

@@ -34,18 +34,18 @@ const KlerosEnterpriseSection: React.FC = async () => {
       className={clsx(
         "bg-background-2",
         "flex flex-col gap-12 lg:gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-6">
+      <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">
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:px-32">
         {cards.map((card) => (
           <Card key={card.title} {...card} />
         ))}
@@ -59,11 +59,9 @@ const KlerosEnterpriseSection: React.FC = async () => {
       />
 
       <LemonCashSection />
-      <ExternalLink
-        url={arrowLink.link.url}
-        text={arrowLink.text}
-        className="flex-wrap justify-center"
-      />
+      <div className="mx-auto lg:px-32">
+        <ExternalLink url={arrowLink.link.url} text={arrowLink.text} />
+      </div>
       <MethodsTable {...{ table }} />
     </div>
   );

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

@@ -56,7 +56,7 @@ const KlerosFellowSection: React.FC = async () => {
       <ExternalLink
         text={arrowLink.text}
         url={arrowLink.link.url}
-        className="w-full flex-wrap justify-center"
+        className="mx-auto"
       />
     </div>
   );

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

@@ -21,10 +21,10 @@ const KlerosMediationSection: React.FC = async () => {
       className={clsx(
         "bg-background-1",
         "flex flex-col gap-16",
-        "px-6 py-12 lg:px-32 lg:py-24",
+        "px-6 py-12 lg:py-24",
       )}
     >
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 lg:px-32">
         <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
           {header}
         </h1>
@@ -33,7 +33,7 @@ const KlerosMediationSection: React.FC = async () => {
 
       <Flowchart items={flowchart} background="primary" />
 
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 lg:px-32">
         <h2 className="text-lg text-primary-text lg:text-xl">
           {benefitsHeader}
         </h2>
@@ -47,7 +47,7 @@ const KlerosMediationSection: React.FC = async () => {
       <ExternalLink
         text={arrowLink.text}
         url={arrowLink.link.url}
-        className="w-full flex-wrap justify-center"
+        className="mx-auto"
       />
     </div>
   );

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

@@ -19,7 +19,7 @@ const CaseStudies: React.FC = async () => {
         <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
         <p className="text-base lg:text-lg">{subtitle}</p>
       </div>
-      <div className="mt-16 grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div className="mt-16 grid grid-cols-1 gap-4 lg:grid-cols-3">
         {cards.map(({ title, subtitle, icon, link }) => (
           <CtaCard
             key={title}

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

@@ -13,7 +13,11 @@ const GetInTouch: React.FC = async () => {
   ).then((res) => res.homeGetInTouchSection);
 
   return (
-    <div className="bg-background-1 px-6 py-12 md:grid md:grid-cols-2 lg:px-32 lg:py-24">
+    <div
+      className={
+        "bg-background-1 px-6 py-12 md:grid md:grid-cols-2 lg:px-32 lg:py-24"
+      }
+    >
       <div>
         <h3 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
           {title}
@@ -22,7 +26,7 @@ const GetInTouch: React.FC = async () => {
         <ExternalLink className="mb-16" text={link.text} url={link.link.url} />
       </div>
       <Image
-        className="mx-auto mb-20 lg:ml-auto"
+        className="mx-auto mb-20 lg:mx-0 lg:ml-auto lg:justify-self-end"
         alt="Kleros Logo"
         src={icon.url}
         width="296"

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

@@ -26,7 +26,7 @@ const Hero: React.FC = async () => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-20">
       <div className="space-y-8">
-        <h1 className="text-2xl font-medium lg:text-3xl">{title}</h1>
+        <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
         <div className="lg:hidden">
           <CustomLink href={primaryButton.link.url}>
@@ -45,7 +45,7 @@ const Hero: React.FC = async () => {
         <ExternalLink
           url={arrowLink.link.url}
           text={arrowLink.text}
-          className="[&>span]:text-base [&>span]:text-primary-text"
+          className="text-start [&>span]:text-base [&>span]:text-primary-text"
         />
         <TokenStats {...{ tokenStats }} />
       </div>

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

@@ -20,10 +20,14 @@ const LearnPosts: React.FC = async () => {
       <div className="flex flex-col gap-8">
         <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
         <p className="text-base lg:text-lg">{subtitle}</p>
-        <div className="mx-auto mb-12 mt-16 flex flex-wrap gap-4">
+        <div
+          className={
+            "mx-auto mb-12 mt-16 flex flex-wrap gap-4 xl:grid xl:grid-cols-3"
+          }
+        >
           {cards.map(({ icon, title, subtitle, link }) => (
             <CtaCard
-              className="flex-grow xl:max-h-[364px] xl:max-w-[378px]"
+              className="flex-grow"
               key={title}
               {...{ icon, title, description: subtitle, arrowLink: link }}
             />

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

@@ -13,23 +13,25 @@ const TrustedBy: React.FC = async () => {
     await request<PartnersQueryType>(partnersQuery);
 
   return (
-    <div className="bg-background-2 px-6 py-12 lg:px-10">
+    <div className="bg-background-2 py-12">
       <h3 className="mx-auto mb-8 w-max text-lg text-secondary-text">
         Trusted By
       </h3>
-      <div
-        className={clsx(
-          "hover-pause-child-animation",
-          "relative grid auto-cols-max grid-flow-col overflow-hidden",
-        )}
-      >
-        <PartnersCarousel {...{ partners }} />
-        <BlurredBorders />
+      <div className="px-6 lg:px-10">
+        <div
+          className={clsx(
+            "hover-pause-child-animation relative grid auto-cols-max",
+            "grid-flow-col overflow-hidden",
+          )}
+        >
+          <PartnersCarousel {...{ partners }} />
+          <BlurredBorders />
+        </div>
       </div>
       <div
         className={clsx(
-          "mt-16 grid grid-cols-1 items-center justify-items-center gap-8",
-          "lg:grid-cols-3",
+          "mt-16 flex flex-col items-center justify-items-center gap-8 px-6",
+          "md:px-32 lg:flex-row lg:justify-between xl:gap-16",
         )}
       >
         {institutions.map(({ name, link, image }) => (

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

@@ -12,13 +12,17 @@ const UseCases: React.FC = async () => {
   ).then((res) => res.homeUseCasesSection);
 
   return (
-    <div className="space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24">
+    <div
+      className={
+        "space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
+      }
+    >
       <h3 className="text-xl font-medium lg:text-3xl"> {title} </h3>
       <UseCasesCards />
       <ExternalLink
         text={arrowLink.text}
         url={arrowLink.link.url}
-        className="lg:justify-center"
+        className="mx-auto"
       />
     </div>
   );

frontend/src/app/layout.tsx

@@ -28,7 +28,7 @@ export default async function RootLayout({
       <OverlayScrollbarBody className="bg-background-1 antialiased">
         <main className={clsx(urbanist.className)}>
           <Navbar {...{ navbarData }} />
-          {children}
+          <div className="mx-auto max-w-7xl"> {children} </div>
           <Footer />
         </main>
       </OverlayScrollbarBody>

frontend/src/components/BrandAssets/LogosPackageSection.tsx

@@ -31,7 +31,6 @@ const LogosPackageSection: React.FC<ILogosPackageSection> = ({
       <ExternalLink
         url={logosPackageData.arrowLink.link.url}
         text={logosPackageData.arrowLink.text}
-        className="z-[1] flex-wrap"
       />
     </div>
   );