updated ui

src/components/new_ui/truth.tsx

@@ -135,6 +135,7 @@ function Truth() {
             </MotionText>
 
             <MotionStack
+                mx="auto"
                 mt={{ base: 3, sm: -5, md: -5, lg: -5, xl: -5 }}
                 columns={{ base: 1, sm: 1, md: 2 }}
                 p={{ base: 5, sm: 12, md: 20 }}
@@ -188,6 +189,7 @@ function Truth() {
             >
                 <MotionStack
                     w='100%'
+                    mt={5}
                     justify={'center'}
                     align={'center'}
                     initial={{ opacity: 0, scale: 0.9 }}
@@ -210,9 +212,9 @@ function Truth() {
             <MotionFlex
                 gap={12}
                 direction={{ base: 'column', sm: 'column', md: 'row' }}
-                justify="center"
+                justifyItems="center"
                 mt={5}
-                align={'flex-end'}
+                align={{ base: 'center', sm: 'center', md: 'flex-end', lg: 'flex-end', xl: 'flex-end' }}
                 initial={{ opacity: 0, y: 30 }}
                 animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                 transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
@@ -225,7 +227,8 @@ function Truth() {
                         transition={{ duration: 0.5, delay: 0.5 + index * 0.2, ease: "easeOut" }}
                     >
                         <MotionStack
-                            w='250px'
+                            w={{ base: '250px', sm: '250px', md: '220px', lg: '250px', xl: '250px' }}
+                            mx="auto"
                             justify={'flex-end'}
                             initial={{ opacity: 0, y: 20 }}
                             animate={isTitleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}