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

@@ -18,7 +18,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>

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,23 +23,37 @@ 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"
+        className="flex-wrap justify-center lg:justify-start lg:px-32"
       />
     </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} />
         ))}
@@ -62,7 +62,7 @@ const KlerosEnterpriseSection: React.FC = async () => {
       <ExternalLink
         url={arrowLink.link.url}
         text={arrowLink.text}
-        className="flex-wrap justify-center"
+        className="flex-wrap justify-center lg:px-32"
       />
       <MethodsTable {...{ table }} />
     </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>

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/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}>

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,7 +12,11 @@ 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

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/Earn/Hero.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 
+import clsx from "clsx";
 import Image from "next/image";
 
 import { HeroQueryType } from "@/queries/earn/hero";
@@ -16,7 +17,12 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
 
-        <div className="flex items-center gap-8 rounded-full bg-background-translucent p-4 pr-8 md:w-fit">
+        <div
+          className={clsx(
+            "flex w-fit items-center gap-8 rounded-full",
+            "bg-background-translucent p-4 pr-8",
+          )}
+        >
           <Image
             src={statDisplay.icon.url}
             alt="icon"

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

@@ -21,7 +21,7 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
         "flex flex-col gap-8 px-6 py-8 md:px-8 md:py-12",
       )}
     >
-      <div className="flex flex-col gap-6 md:flex-row">
+      <div className="flex flex-row gap-6">
         <Image
           width={128}
           height={128}
@@ -30,20 +30,25 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
           alt="Product Icon"
         />
         <div className="flex flex-col gap-4">
-          <div className="text-primary-purple lg:text-lg">{header}</div>
-          <div className="text-lg text-primary-text md:text-2xl">
+          <span className="text-primary-purple lg:text-lg">{header}</span>
+          <span className="text-lg text-primary-text md:text-2xl">
             {productName}
-          </div>
+          </span>
         </div>
       </div>
       <div
-        style={{ backgroundImage: `url(${background.url})` }}
         className={clsx(
           "relative h-[308px] rounded-2xl md:h-[380px]",
           "bg-cover bg-[-314px] md:bg-[0px]",
           "flex items-center justify-center pt-3 md:pt-0",
         )}
       >
+        <Image
+          src={background.url}
+          alt="Background Image"
+          fill
+          className="rounded-2xl object-cover object-[65%]"
+        />
         <CustomLink
           href={learnMoreButton.link.url}
           className="z-[1] mt-16 md:mt-0"

frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx

@@ -13,7 +13,11 @@ const EnterCourtSection: React.FC<IEnterCourtSection> = ({
   background,
 }) => {
   return (
-    <div className="relative mt-16 flex w-full flex-col items-center justify-center p-8">
+    <div
+      className={
+        "relative mt-16 flex w-full flex-col items-center justify-center p-8"
+      }
+    >
       <CustomLink href={button.link.url} className="z-[1] mb-8">
         <Button>
           <span className="text-background-2">{button.text}</span>

frontend/src/components/ExternalLink.tsx

@@ -16,19 +16,18 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
   return (
     <CustomLink
       href={url}
-      className={clsx(
-        "flex items-center gap-4 hover:brightness-[1.2]",
-        className,
-      )}
+      className={clsx("block w-fit hover:brightness-[1.2]", className)}
     >
-      <span className="text-center text-primary-blue md:text-lg">{text}</span>
-      <Image
-        src={LinkArrow}
-        width="24"
-        height="24"
-        alt="Arrow link image"
-        className="inline aspect-square w-4 md:w-6"
-      />
+      <span className="text-center text-primary-blue md:text-lg">
+        <span className="mr-2 md:mr-4"> {text} </span>
+        <Image
+          src={LinkArrow}
+          width="24"
+          height="24"
+          alt="Arrow link image"
+          className="inline-block aspect-square w-4 md:w-6"
+        />
+      </span>
     </CustomLink>
   );
 };