feat(frontend): add max width

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

frontend/src/components/Navbar/index.tsx

@@ -34,80 +34,85 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
   return (
     <header
       className={clsx(
-        "fixed left-0 right-0 top-0 z-50 flex h-20 w-full",
-        "items-center justify-between bg-black/35 px-2 py-2",
-        "text-base text-white backdrop-blur-md",
-        "md:px-16 xl:px-32",
+        "fixed left-0 right-0 top-0 z-50 h-20 w-full bg-black/35 px-2",
+        "backdrop-blur-md md:px-16 xl:px-32",
       )}
     >
-      <CustomLink
-        href="/home"
-        className="flex items-center"
-        onClick={() => toggleMenuOpen(false)}
+      <div
+        className={clsx(
+          "mx-auto flex h-full max-w-7xl items-center justify-between",
+          "text-base text-white",
+        )}
       >
-        <Image
-          alt="Kleros"
-          src={klerosLogo?.logo_svg.url}
-          width={184}
-          height={48}
-        />
-      </CustomLink>
+        <CustomLink
+          href="/home"
+          className="flex items-center"
+          onClick={() => toggleMenuOpen(false)}
+        >
+          <Image
+            alt="Kleros"
+            src={klerosLogo?.logo_svg.url}
+            width={184}
+            height={48}
+          />
+        </CustomLink>
 
-      <button
-        className="ml-auto block text-white lg:hidden"
-        onClick={toggleMenuOpen}
-      >
-        <HamburgerButton className="h-5 w-6" isOpen={menuOpen} />
-      </button>
+        <button
+          className="ml-auto block text-white lg:hidden"
+          onClick={toggleMenuOpen}
+        >
+          <HamburgerButton className="h-5 w-6" isOpen={menuOpen} />
+        </button>
 
-      <div className="hidden lg:flex">
-        <DesktopNavigation
-          {...{ pathname, navLinks, resourceSections, appsSection, socials }}
-        />
-      </div>
+        <div className="hidden lg:flex">
+          <DesktopNavigation
+            {...{ pathname, navLinks, resourceSections, appsSection, socials }}
+          />
+        </div>
 
-      <div className="hidden items-center lg:flex">
-        <CustomLink href={navbarButton?.link.url}>
-          <Button className="text-background-2">
-            {navbarButton?.link.name}
-          </Button>
-        </CustomLink>
-      </div>
+        <div className="hidden items-center lg:flex">
+          <CustomLink href={navbarButton?.link.url}>
+            <Button className="text-background-2">
+              {navbarButton?.link.name}
+            </Button>
+          </CustomLink>
+        </div>
 
-      <AnimatePresence>
-        {menuOpen ? (
-          <motion.div
-            className={clsx(
-              "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
-            )}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={() => toggleMenuOpen(false)}
-          >
+        <AnimatePresence>
+          {menuOpen ? (
             <motion.div
-              className="absolute bottom-0 top-0"
-              initial={{ right: "-100%" }}
-              animate={{ right: 0 }}
-              exit={{ right: "-100%" }}
+              className={clsx(
+                "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
+              )}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => toggleMenuOpen(false)}
             >
-              <MobileMenu
-                {...{
-                  pathname,
-                  navLinks,
-                  resourceSections,
-                  appsSection,
-                  socials,
-                  navbarButton,
-                }}
-                className="h-full overflow-y-auto md:h-auto"
-                closeFn={() => toggleMenuOpen(false)}
-                onClick={(e) => e.stopPropagation()}
-              />
+              <motion.div
+                className="absolute bottom-0 top-0"
+                initial={{ right: "-100%" }}
+                animate={{ right: 0 }}
+                exit={{ right: "-100%" }}
+              >
+                <MobileMenu
+                  {...{
+                    pathname,
+                    navLinks,
+                    resourceSections,
+                    appsSection,
+                    socials,
+                    navbarButton,
+                  }}
+                  className="h-full overflow-y-auto md:h-auto"
+                  closeFn={() => toggleMenuOpen(false)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </motion.div>
             </motion.div>
-          </motion.div>
-        ) : null}
-      </AnimatePresence>
+          ) : null}
+        </AnimatePresence>
+      </div>
     </header>
   );
 };