feat: add report links

Author: dennyabrain

src/images/ml-common-reports-1.png

@@ -1,19 +1,21 @@
-import DefaultLayoutNarrow from "@/components/default-layout-narrow";
+import DefaultLayoutNarrow from "@/components/default-layout-narrow"
 
 export default function Layout({ children }) {
-  return <DefaultLayoutNarrow>{children}</DefaultLayoutNarrow>;
+  return <DefaultLayoutNarrow>{children}</DefaultLayoutNarrow>
 }
 
-import { Box, Text, Image } from "grommet";
-import { LatestProductBlogsUpdates } from "../../components/LatestProductBlogsUpdates";
-import mlCommonsImage from "../../images/ml-commons-report-hero.png";
+import { Box, Text, Image } from "grommet"
+import { LatestProductBlogsUpdates } from "../../components/LatestProductBlogsUpdates"
+import mlCommonsImage from "../../images/ml-commons-report-hero.png"
+import mlCommonsReportOne from "../../images/ml-common-reports-1.png"
+import mlCommonsReportTwo from "../../images/ml-common-reports-2.png"
 
 # Building a Safety Benchmark Dataset in Hindi
 
-<Box 
-  background="neutral-1" 
-  pad={{ horizontal: "small", vertical: "xxsmall" }} 
-  round="xsmall" 
+<Box
+  background="neutral-1"
+  pad={{ horizontal: "small", vertical: "xxsmall" }}
+  round="xsmall"
   align="center"
   width="fit-content"
 >
@@ -26,11 +28,12 @@ import mlCommonsImage from "../../images/ml-commons-report-hero.png";
 
 In 2024, Tattle was selected in this pilot project to build a dataset of prompts in Hindi as part of ML Commons' safety benchmark.
 We followed Uli's participatory approach and created 2000 prompts in Hindi on two hazard categories: hate and sex-related crimes.
-These prompts were created by an expert group, consisting of individuals with expertise in journalism, social work, feminist advocacy, 
+These prompts were created by an expert group, consisting of individuals with expertise in journalism, social work, feminist advocacy,
 gender studies, fact-checking, political campaigning, education, psychology, and research.
 
 ## Project Team
-<div class="grid grid-cols-3 gap-x-4 gap-y-2">
+
+<div class="grid grid-cols-3 gap-x-4 gap-y-2 sm:flex sm:flex-row sm:flex-wrap sm:gap-2">
   <p class="m-0">Mansi Gupta</p>
   <p class="m-0">Srravya C</p>
   <p class="m-0">Vamsi Krishna Pothuru</p>
@@ -42,9 +45,32 @@ gender studies, fact-checking, political campaigning, education, psychology, and
   <p class="m-0">Maanas B</p>
 </div>
 
-
 ## Outcomes
-Our report, outlining the process of developing this dataset, is available here:  
-[View Report](https://drive.google.com/file/d/1OKpZ7qqT6hjbzaeUC7UnBF1oCTn7c70z/view)
 
-<LatestProductBlogsUpdates projects={["ml-commons-safety-benchmark"]}/>
+<div className="flex flex-row gap-4">
+  <div className="w-1/2 sm:w-full">
+    <a
+      href="https://drive.google.com/file/d/1OKpZ7qqT6hjbzaeUC7UnBF1oCTn7c70z/view"
+      target="_blank"
+    >
+      <Image
+        className="hover:scale-105 hover:shadow-2xl hover:bg-gray-50 rounded-md overflow-clip"
+        src={mlCommonsReportTwo}
+        alt="Landscape Analysis Report"
+        fit="contain"
+      />
+    </a>
+  </div>
+  <div className="w-1/2 sm:w-full">
+    <a href="https://arxiv.org/abs/2501.13912" target="_blank">
+      <Image
+        className="hover:scale-105 hover:shadow-2xl hover:bg-gray-50 rounded-md overflow-clip"
+        src={mlCommonsReportOne}
+        alt="ML Commons Report"
+        fit="cover"
+      />
+    </a>
+  </div>
+</div>
+
+<LatestProductBlogsUpdates projects={["ml-commons-safety-benchmark"]} />