From a4259555ae9a82324bc1241c38cfac3d442663dd Mon Sep 17 00:00:00 2001
From: Sambit Rath <sambit.rath.378@gmail.com>
Date: Sat, 5 Oct 2024 21:08:26 +0530
Subject: [PATCH 1/3] Migrate Translatathon/TranslatathonInANutshell.tsx to
 shadcs/tailwind

---
 .../TranslatathonInANutshell.tsx              | 106 ++++++------------
 1 file changed, 36 insertions(+), 70 deletions(-)

diff --git a/src/components/Translatathon/TranslatathonInANutshell.tsx b/src/components/Translatathon/TranslatathonInANutshell.tsx
index 53d1825338a..23994eddc27 100644
--- a/src/components/Translatathon/TranslatathonInANutshell.tsx
+++ b/src/components/Translatathon/TranslatathonInANutshell.tsx
@@ -1,9 +1,7 @@
-import { Flex, Heading, Text } from "@chakra-ui/react"
-
-import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
-
-import Link from "../Link"
+import { TwImage } from "@/components/Image"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Flex } from "@/components/ui/flex"
+import Link from "@/components/ui/Link"
 
 import dogeImage from "@/public/images/doge-computer.png"
 import futureImage from "@/public/images/future_transparent.png"
@@ -11,67 +9,41 @@ import settlementImage from "@/public/images/translatathon/settlement.png"
 
 export const TranslatathonInANutshell = () => {
   return (
-    <Flex
-      direction="column"
-      py={16}
-      px={8}
-      bgGradient="linear-gradient(
-        49.21deg,
-        rgba(127, 127, 213, 0.2) 19.87%,
-        rgba(134, 168, 231, 0.2) 58.46%,
-        rgba(145, 234, 228, 0.2) 97.05%
-      )"
-    >
-      <Flex m="auto">
-        <Heading as="h2" fontSize="3xl" mb={8}>
-          Translatathon essentials
-        </Heading>
+    <Flex className="flex-col bg-gradient-to-r from-[#7f7fd5]/20 via-[#86a8e7]/20 to-[#91eae4]/20 px-8 py-16">
+      <Flex className="m-auto">
+        <h2 className="mb-8 text-3xl">Translatathon essentials</h2>
       </Flex>
-      <Flex
-        w="full"
-        direction={{ base: "column", md: "row" }}
-        align="flex-start"
-        p={8}
-        gap={8}
-      >
-        <Flex w="full" direction="column" gap={2} alignSelf="center">
-          <Heading as="h3" fontSize="2xl">
-            Earn points
-          </Heading>
-          <Text>
+
+      <Flex className="w-full flex-col items-start gap-8 p-8 md:flex-row">
+        <Flex className="w-full flex-col justify-center gap-2">
+          <h3 className="text-2xl">Earn points</h3>
+          <p>
             Translate ethereum.org and ecosystem content to earn points and
             compete with other participants. 1 translated word = 1 point
-          </Text>
+          </p>
         </Flex>
-        <Flex w="full" justifyContent="center">
-          <Image
+        <Flex className="w-full justify-center">
+          <TwImage
             src={settlementImage}
             alt=""
-            w="327"
+            width={327}
             style={{ objectFit: "contain" }}
           />
         </Flex>
       </Flex>
-      <Flex
-        w="full"
-        direction={{ base: "column-reverse", md: "row" }}
-        align="flex-start"
-        p={8}
-        gap={8}
-      >
-        <Flex w="full" justifyContent="center">
-          <Image
+
+      <Flex className="w-full flex-col-reverse items-start gap-8 p-8 md:flex-row">
+        <Flex className="w-full justify-center">
+          <TwImage
             src={futureImage}
             alt=""
-            w="327"
+            width={327}
             style={{ objectFit: "contain" }}
           />
         </Flex>
-        <Flex w="full" direction="column" gap={2} alignSelf="center">
-          <Heading as="h3" fontSize="2xl">
-            Human translations only
-          </Heading>
-          <Text>
+        <Flex className="w-full flex-col justify-center gap-2">
+          <h3 className="text-2xl">Human translations only</h3>
+          <p>
             Using machine translation is forbidden! All translations will be
             reviewed and evaluated, and participants using machine translation
             will be automatically disqualified and not be eligible to claim
@@ -80,36 +52,30 @@ export const TranslatathonInANutshell = () => {
               terms and conditions
             </Link>
             )
-          </Text>
+          </p>
         </Flex>
       </Flex>
-      <Flex
-        w="full"
-        direction={{ base: "column", md: "row" }}
-        align="flex-start"
-        p={8}
-        gap={8}
-      >
-        <Flex w="full" direction="column" gap={2} alignSelf="center">
-          <Heading as="h3" fontSize="2xl">
-            Focus on untranslated lines only
-          </Heading>
-          <Text>
+
+      <Flex className="w-full flex-col items-start gap-8 p-8 md:flex-row">
+        <Flex className="w-full flex-col justify-center gap-2">
+          <h3 className="text-2xl">Focus on untranslated lines only</h3>
+          <p>
             Translate strings that do not have any suggested translations yet.
             Do not translate strings that have already been translated and
             approved
-          </Text>
+          </p>
         </Flex>
-        <Flex w="full" justifyContent="center">
-          <Image
+        <Flex className="w-full justify-center">
+          <TwImage
             src={dogeImage}
             alt=""
-            w="327"
+            width={327}
             style={{ objectFit: "contain" }}
           />
         </Flex>
       </Flex>
-      <Flex width="full" justifyContent="center">
+
+      <Flex className="w-full justify-center">
         <ButtonLink href="/contributing/translation-program/translatathon/details">
           Details and rules
         </ButtonLink>

From f25e176c57138459b099cb6087895b8737d1a17d Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 31 Oct 2024 15:18:28 +0100
Subject: [PATCH 2/3] align items

---
 .../Translatathon/TranslatathonInANutshell.tsx           | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Translatathon/TranslatathonInANutshell.tsx b/src/components/Translatathon/TranslatathonInANutshell.tsx
index 23994eddc27..6f472dd7b5a 100644
--- a/src/components/Translatathon/TranslatathonInANutshell.tsx
+++ b/src/components/Translatathon/TranslatathonInANutshell.tsx
@@ -15,7 +15,7 @@ export const TranslatathonInANutshell = () => {
       </Flex>
 
       <Flex className="w-full flex-col items-start gap-8 p-8 md:flex-row">
-        <Flex className="w-full flex-col justify-center gap-2">
+        <Flex className="w-full flex-col gap-2 self-center">
           <h3 className="text-2xl">Earn points</h3>
           <p>
             Translate ethereum.org and ecosystem content to earn points and
@@ -27,6 +27,7 @@ export const TranslatathonInANutshell = () => {
             src={settlementImage}
             alt=""
             width={327}
+            className="w-[327px]"
             style={{ objectFit: "contain" }}
           />
         </Flex>
@@ -38,10 +39,11 @@ export const TranslatathonInANutshell = () => {
             src={futureImage}
             alt=""
             width={327}
+            className="w-[327px]"
             style={{ objectFit: "contain" }}
           />
         </Flex>
-        <Flex className="w-full flex-col justify-center gap-2">
+        <Flex className="w-full flex-col gap-2 self-center">
           <h3 className="text-2xl">Human translations only</h3>
           <p>
             Using machine translation is forbidden! All translations will be
@@ -57,7 +59,7 @@ export const TranslatathonInANutshell = () => {
       </Flex>
 
       <Flex className="w-full flex-col items-start gap-8 p-8 md:flex-row">
-        <Flex className="w-full flex-col justify-center gap-2">
+        <Flex className="w-full flex-col gap-2 self-center">
           <h3 className="text-2xl">Focus on untranslated lines only</h3>
           <p>
             Translate strings that do not have any suggested translations yet.
@@ -70,6 +72,7 @@ export const TranslatathonInANutshell = () => {
             src={dogeImage}
             alt=""
             width={327}
+            className="w-[327px]"
             style={{ objectFit: "contain" }}
           />
         </Flex>

From 131342c8284ed4b3378ac6919b235154e7b7314b Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 31 Oct 2024 15:18:46 +0100
Subject: [PATCH 3/3] Update
 src/components/Translatathon/TranslatathonInANutshell.tsx

---
 src/components/Translatathon/TranslatathonInANutshell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Translatathon/TranslatathonInANutshell.tsx b/src/components/Translatathon/TranslatathonInANutshell.tsx
index 6f472dd7b5a..62c360b8858 100644
--- a/src/components/Translatathon/TranslatathonInANutshell.tsx
+++ b/src/components/Translatathon/TranslatathonInANutshell.tsx
@@ -14,7 +14,7 @@ export const TranslatathonInANutshell = () => {
         <h2 className="mb-8 text-3xl">Translatathon essentials</h2>
       </Flex>
 
-      <Flex className="w-full flex-col items-start gap-8 p-8 md:flex-row">
+      <Flex className="w-full flex-col items-center gap-8 p-8 md:flex-row">
         <Flex className="w-full flex-col gap-2 self-center">
           <h3 className="text-2xl">Earn points</h3>
           <p>