Refactor/site refactor and fixes

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

@@ -32,7 +32,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
             "relative h-7 w-[100%-14px] bg-primary-blue",
             "flex items-center justify-center",
             //start-arrow
-            "before:absolute before:left-0 before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
+            "before:absolute before:-left-[1px] before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
             "before:border-b-transparent before:border-t-transparent",
             background === "primary"
               ? "before:border-l-background-1"
@@ -60,7 +60,7 @@ interface IFlowchart {
 
 const Flowchart: React.FC<IFlowchart> = ({ items, background }) => {
   return (
-    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-start">
+    <div className="flex w-full flex-wrap justify-center gap-4 md:justify-center">
       {items.map((item) => (
         <FlowchartItem key={item.name} {...item} background={background} />
       ))}

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

@@ -23,7 +23,7 @@ const LearnPosts: React.FC = async () => {
         <div className="mx-auto flex flex-wrap gap-4">
           {cards.map(({ icon, title, subtitle, link }) => (
             <CtaCard
-              className="flex-grow xl:max-h-[378px] xl:max-w-[364px]"
+              className="flex-grow xl:max-h-[364px] xl:max-w-[378px]"
               key={title}
               {...{ icon, title, description: subtitle, arrowLink: link }}
             />

frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx

@@ -10,14 +10,14 @@ import { Reports } from "./ReportCard";
 interface IDropdownContainer
   extends Pick<Report, "yearDropdownLabel" | "monthDropdownLabel"> {
   reports: Reports;
-  setReportUrl: (url?: string) => void;
+  setSelectedReport: (report?: Reports[number]) => void;
 }
 
 type IProcessedReports = Record<number, Array<string>>;
 
 const DropdownContainer: React.FC<IDropdownContainer> = ({
   reports,
-  setReportUrl,
+  setSelectedReport,
   yearDropdownLabel,
   monthDropdownLabel,
 }) => {
@@ -75,8 +75,8 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
       (report) =>
         (isMonthInfo ? report.month === month : true) && report.year === year,
     );
-    setReportUrl(selectedReport?.url);
-  }, [isMonthInfo, month, year, reports, setReportUrl]);
+    setSelectedReport(selectedReport);
+  }, [isMonthInfo, month, year, reports, setSelectedReport]);
 
   return (
     <div

frontend/src/components/Cooperative/ReportSection/ReportCard.tsx

@@ -6,13 +6,12 @@ import clsx from "clsx";
 import Image from "next/image";
 
 import Button from "@/components/Button";
-import CustomLink from "@/components/CustomLink";
 import { Report } from "@/queries/cooperative/report-section";
 
 import DropdownContainer from "./DropdownContainer";
 
 export type Reports = {
-  url: string;
+  file: { url: string };
   month?: string;
   year: number;
 }[];
@@ -29,7 +28,35 @@ const ReportCard: React.FC<IReportCard> = ({
   monthDropdownLabel,
   downloadButtonText,
 }) => {
-  const [reportUrl, setReportUrl] = useState<string>();
+  const [selectedReport, setSelectedReport] = useState<Reports[number]>();
+
+  const handleDownload = () => {
+    if (!selectedReport || !selectedReport.file.url) return;
+    fetch(selectedReport.file.url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement("a");
+        link.href = url;
+
+        const contentType = blob.type;
+
+        const extension = contentType.split("/")[1] || "octet-stream";
+        const fileExtension = extension === "json" ? "json" : extension;
+
+        link.download = `${selectedReport.month ? selectedReport.month + "-" : ""}${selectedReport.year}.${fileExtension}`;
+
+        document.body.appendChild(link);
+
+        link.click();
+
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      })
+      .catch((error) => {
+        console.error("Error fetching the file:", error);
+      });
+  };
 
   return (
     <div
@@ -47,21 +74,20 @@ const ReportCard: React.FC<IReportCard> = ({
         <DropdownContainer
           {...{
             reports,
-            setReportUrl,
+            setSelectedReport,
             yearDropdownLabel,
             monthDropdownLabel,
           }}
         />
 
-        <CustomLink href={reportUrl ?? ""}>
-          <Button
-            variant="primary"
-            className="text-background-1"
-            disabled={typeof reportUrl === "undefined"}
-          >
-            {downloadButtonText}
-          </Button>
-        </CustomLink>
+        <Button
+          variant="primary"
+          className="text-background-1"
+          disabled={typeof selectedReport === "undefined"}
+          onClick={handleDownload}
+        >
+          {downloadButtonText}
+        </Button>
       </div>
 
       <div

frontend/src/components/CtaCard.tsx

@@ -45,9 +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="text-base text-secondary-text lg:text-lg">{description}</p>
+      <p className="mb-6 text-base text-secondary-text lg:text-lg">
+        {description}
+      </p>
       {typeof arrowLink !== "undefined" ? (
-        <div className="mt-6 w-full">
+        <div className="mt-auto w-full">
           <Divider />
           <ExternalLink
             text={arrowLink.text}

frontend/src/components/ExternalLink.tsx

@@ -16,7 +16,10 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
   return (
     <CustomLink
       href={url}
-      className={clsx("block hover:brightness-[1.2]", className)}
+      className={clsx(
+        "flex items-center gap-4 hover:brightness-[1.2]",
+        className,
+      )}
     >
       <span className="text-center text-primary-blue md:text-lg">{text}</span>
       <Image

frontend/src/components/ForBuilders/Hero.tsx

@@ -14,10 +14,12 @@ interface IHero {
 
 const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
-    <div className="relative px-6 pb-12 pt-32">
+    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-6">
-        <h1 className="w-min text-3xl">{heroData.title}</h1>
-        <p className="text-lg">{heroData.subtitle}</p>
+        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+          {heroData.title}
+        </h1>
+        <p className="max-w-[685px] text-lg">{heroData.subtitle}</p>
         <div>
           <CustomLink href={heroData.button.link.url}>
             <Button variant="secondary">
@@ -34,7 +36,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
                 width="24"
                 height="24"
                 alt="Arrow link image"
-                className="inline"
+                className="inline h-4 w-4 lg:h-6 lg:w-6"
               />
             </CustomLink>
           ))}
@@ -43,10 +45,9 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
       <Image
         src={heroData.background.url}
         alt="Hero Image Background"
-        width="1440"
-        height="835"
+        fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover object-left"
+        className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
   );

frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx

@@ -10,11 +10,11 @@ interface IHeader {
 
 const Header: React.FC<IHeader> = ({ useCasesData }) => {
   return (
-    <div className="mb-16">
-      <h2 className="mb-6 text-xl text-primary-purple">
+    <div className="mb-12 lg:mb-16">
+      <h2 className="mb-6 text-lg text-primary-purple lg:text-2xl">
         {useCasesData.useCaseTitle}
       </h2>
-      <p className="mb-12 text-lg text-secondary-text">
+      <p className="mb-12 text-secondary-text lg:mb-16 lg:text-xl">
         {useCasesData.useCaseDescription}
       </p>
       <Image

frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx

@@ -9,10 +9,10 @@ interface IHeader {
 const Header: React.FC<IHeader> = ({ useCasesData }) => {
   return (
     <div>
-      <h2 className="mb-6 text-xl text-primary-text">
+      <h2 className="mb-6 text-lg text-primary-text lg:text-xl">
         {useCasesData.keyChallenges.title}
       </h2>
-      <p className="mb-12 text-lg text-secondary-text">
+      <p className="mb-12 text-secondary-text lg:text-lg">
         {useCasesData.keyChallenges.description}
       </p>
     </div>

frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx

@@ -1,15 +1,8 @@
 import React from "react";
 
-import clsx from "clsx";
-import Image from "next/image";
-
-import CustomLink from "@/components/CustomLink";
-import Card from "@/components/Navbar/AppsDropdownContent/Card";
 import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
 
-const hoverEffect = clsx(
-  "hover:scale-[1.03] transform transition duration-100",
-);
+import SafeSnap from "./SafeSnap";
 
 interface IHowKlerosSolvesIt {
   useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
@@ -18,45 +11,10 @@ interface IHowKlerosSolvesIt {
 const HowKlerosSolvesIt: React.FC<IHowKlerosSolvesIt> = ({ useCasesData }) => {
   return (
     <div>
-      <h2 className="mb-6 text-xl text-primary-purple">
+      <h2 className="mb-8 text-lg text-primary-purple lg:text-xl">
         {useCasesData.solutionSections.header}
       </h2>
-      <div className="rounded-2xl border border-stroke bg-background-2 p-6">
-        <h2 className="mb-4 text-xl">{useCasesData.solutionSections.title}</h2>
-        <div className="mb-8 text-lg text-secondary-text">
-          {useCasesData.solutionSections.description}
-        </div>
-        <div className="mb-4 text-secondary-text">
-          {useCasesData.solutionSections.solutionHeader}
-        </div>
-        <div className="mb-6">
-          <Card
-            key={useCasesData.solutionSections?.solution?.solution_name}
-            solution={useCasesData.solutionSections.solution}
-            variant="small"
-          />
-        </div>
-        <div className="mb-4 text-secondary-text">
-          {useCasesData.solutionSections.partnersHeader}
-        </div>
-        <div className="flex flex-row gap-x-6 rounded-2xl border border-stroke p-4">
-          {useCasesData.solutionSections.partners.map((partner) => (
-            <CustomLink
-              key={partner?.name}
-              href={partner?.url}
-              className={clsx(hoverEffect, "cursor-pointer")}
-            >
-              <Image
-                key={partner?.name}
-                src={partner?.icon_svg?.url}
-                alt={partner?.name}
-                width={64}
-                height={64}
-              />
-            </CustomLink>
-          ))}
-        </div>
-      </div>
+      <SafeSnap {...{ useCasesData }} />
     </div>
   );
 };

frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx

@@ -0,0 +1,67 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+import CustomLink from "@/components/CustomLink";
+import Card from "@/components/Navbar/AppsDropdownContent/Card";
+import { UseCasesQueryType } from "@/queries/for-builders/use-cases";
+
+interface ISafeSnap {
+  useCasesData: UseCasesQueryType["forBuildersPageUseCasesSection"];
+}
+
+const SafeSnap: React.FC<ISafeSnap> = ({ useCasesData }) => {
+  return (
+    <div className="rounded-2xl border border-stroke bg-background-2 p-6 pb-8 lg:p-8 lg:pb-16">
+      <h2 className="mb-4 text-lg font-medium lg:text-xl">
+        {useCasesData.solutionSections.title}
+      </h2>
+      <div className="mb-8 text-secondary-text lg:text-lg">
+        {useCasesData.solutionSections.description}
+      </div>
+
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <div className="flex flex-col gap-4">
+          <div className="text-secondary-text">
+            {useCasesData.solutionSections.solutionHeader}
+          </div>
+          <div>
+            <Card
+              key={useCasesData.solutionSections?.solution?.solution_name}
+              solution={useCasesData.solutionSections.solution}
+              variant="small"
+              className="border-gradient-purple-blue !rounded-2xl border-none before:!p-[1px]"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-grow flex-col gap-4">
+          <div className="text-secondary-text">
+            {useCasesData.solutionSections.partnersHeader}
+          </div>
+          <div className="border-gradient-purple-blue flex flex-row gap-x-6 !rounded-2xl p-4 before:!p-[1px]">
+            {useCasesData.solutionSections.partners.map((partner) => (
+              <CustomLink
+                key={partner?.name}
+                href={partner?.url}
+                className={clsx(
+                  "transform transition duration-100 hover:scale-[1.01]",
+                  "cursor-pointer",
+                )}
+              >
+                <Image
+                  key={partner?.name}
+                  src={partner?.icon_svg?.url}
+                  alt={partner?.name}
+                  width={64}
+                  height={64}
+                />
+              </CustomLink>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SafeSnap;