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

@@ -75,7 +75,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
       (report) =>
         (isMonthInfo ? report.month === month : true) && report.year === year,
     );
-    setReportUrl(selectedReport?.url);
+    setReportUrl(selectedReport?.file.url);
   }, [isMonthInfo, month, year, reports, setReportUrl]);
 
   return (

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

@@ -12,7 +12,7 @@ import { Report } from "@/queries/cooperative/report-section";
 import DropdownContainer from "./DropdownContainer";
 
 export type Reports = {
-  url: string;
+  file: { url: string };
   month?: string;
   year: number;
 }[];

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/ResearchDevelopment/TabSection/FellowshipTabContent/Testimonials/TestimonialCard.tsx

@@ -1,19 +1,16 @@
-import Image from "next/image";
-
-import CustomLink from "@/components/CustomLink";
 import { Testimonial } from "@/queries/research-development/tabs-data";
 
-const TestimonialCard: React.FC<Testimonial> = ({ url, thumbnail }) => (
-  <CustomLink href={url}>
-    <div className="relative h-[203px] w-full overflow-hidden rounded-2xl">
-      <Image
-        src={thumbnail.url}
-        alt="Thumbnail"
-        fill
-        className="object-cover"
-      />
-    </div>
-  </CustomLink>
+const TestimonialCard: React.FC<Testimonial> = ({ url }) => (
+  <div className="relative h-[203px] w-full overflow-hidden rounded-2xl">
+    <iframe
+      style={{ width: "100%", height: "100%" }}
+      src={url}
+      title="YouTube video player"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allowFullScreen
+    ></iframe>
+  </div>
 );
 
 export default TestimonialCard;

frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx

@@ -35,8 +35,8 @@ const KlerosBook: React.FC<IKlerosBook> = ({
         </div>
         <div className="flex flex-wrap gap-4">
           {downloadFormats.map((format) => (
-            <CustomLink key={format.text} href={format.link.url}>
-              <Button className="text-background-1">{format.text}</Button>
+            <CustomLink key={format.name} href={format.file.url}>
+              <Button className="text-background-1">{format.name}</Button>
             </CustomLink>
           ))}
         </div>

frontend/src/queries/cooperative/report-section.ts

@@ -32,18 +32,24 @@ export const cooperativePageReportQuery = gql`
     }
 
     annualReports {
-      url
+      file {
+        url
+      }
       year
     }
 
     riskReports {
-      url
+      file {
+        url
+      }
       month
       year
     }
 
     treasuryReports {
-      url
+      file {
+        url
+      }
       month
       year
     }
@@ -56,18 +62,18 @@ export type CooperativePageReportQueryType = {
   };
 
   annualReports: {
-    url: string;
+    file: { url: string };
     year: number;
   }[];
 
   riskReports: {
-    url: string;
+    file: { url: string };
     month: string;
     year: number;
   }[];
 
   treasuryReports: {
-    url: string;
+    file: { url: string };
     month: string;
     year: number;
   }[];

frontend/src/queries/research-development/tabs-data.ts

@@ -20,8 +20,8 @@ export const tabSectionQuery = gql`
         subtitle
         bookTitle
         downloadFormats {
-          text
-          link {
+          name
+          file {
             url
           }
         }
@@ -140,7 +140,10 @@ export type Fellow = {
 export type KlerosBook = {
   subtitle: string;
   bookTitle: string;
-  downloadFormats: ArrowLink[];
+  downloadFormats: Array<{
+    name: string;
+    file: { url: string };
+  }>;
   bookCover: {
     url: string;
   };