fix(Trilemma): adjust structure and spacing

Author: TylerAPfledderer

src/components/Trilemma/Triangle.tsx

@@ -112,7 +112,6 @@ export const TriangleSVG = ({
       viewBox="-100 100 850 915"
       fill="background.base"
       width={{ base: "full", lg: "auto" }}
-      my={{ base: -28, sm: -16, lg: 0 }}
       mt={{ lg: 32 }}
       me={{ lg: 32 }}
     >

src/components/Trilemma/index.tsx

@@ -5,13 +5,13 @@ import {
   DrawerContent,
   DrawerOverlay,
   Flex,
+  Heading,
   Hide,
   Stack,
+  Text,
 } from "@chakra-ui/react"
 
 import Card from "@/components/Card"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 
 import { TriangleSVG, TriangleSVGProps } from "./Triangle"
 import { useTrilemma } from "./useTrilemma"
@@ -36,29 +36,32 @@ const Trilemma = () => {
     <Flex
       alignItems="center"
       flexDirection={{ base: "column", lg: "row" }}
-      gap={12}
-      py={12}
-      pl={{ lg: 12 }}
-      pr={{ lg: 32 }}
+      justifyContent="space-between"
+      columnGap="12"
+      rowGap="8"
     >
       <Stack
-        gap={8}
-        py={{ lg: 8 }}
-        px={{ base: 12, lg: 0 }}
+        spacing="8"
+        mt={{ base: "16", md: "20" }}
+        mb={{ lg: "20" }}
+        ms={{ md: "12" }}
+        me={{ md: "12", lg: 0 }}
         flex={{
           lg: "0 1 500px",
         }}
       >
-        <OldHeading fontSize="2rem" mt={0}>
+        <Heading fontSize="2rem">
           {t("page-roadmap-vision-trilemma-h2")}
-        </OldHeading>
-        <Text>{t("page-roadmap-vision-trilemma-p")}</Text>
-        <Text>{t("page-roadmap-vision-trilemma-p-1")}</Text>
-        <Text>{t("page-roadmap-vision-trilemma-p-2")}</Text>
-        <Text fontWeight={600} hideFrom="lg">
-          {t("page-roadmap-vision-trilemma-modal-tip")}:
-        </Text>
-        <Card {...cardDetail} mt={8} minH="300px" hideBelow="lg" />
+        </Heading>
+        <Flex flexDir="column" gap="6">
+          <Text>{t("page-roadmap-vision-trilemma-p")}</Text>
+          <Text>{t("page-roadmap-vision-trilemma-p-1")}</Text>
+          <Text>{t("page-roadmap-vision-trilemma-p-2")}</Text>
+          <Text fontWeight={600} hideFrom="lg">
+            {t("page-roadmap-vision-trilemma-modal-tip")}:
+          </Text>
+        </Flex>
+        <Card {...cardDetail} minH="300px" hideBelow="lg" />
       </Stack>
       <Hide above="lg">
         <Drawer
@@ -67,7 +70,7 @@ const Trilemma = () => {
           placement="bottom"
         >
           <DrawerOverlay background="rgba(0,0,0,0.3)" />
-          <DrawerContent borderTopRadius="2xl" background="background.base">
+          <DrawerContent borderTopRadius="1rem" background="background.base">
             <Card {...cardDetail} background="none" border="none" my="8" />
             <DrawerCloseButton top="6" insetInlineEnd="6" />
           </DrawerContent>