feat: responsive design and english translator for this section

src/components/CardContainer.tsx

@@ -1,4 +1,5 @@
 import { Box, Typography } from '@mui/material';
+
 export function CardContainer({
   title,
   subtitle,
@@ -15,13 +16,16 @@ export function CardContainer({
   return (
     <Box
       sx={{
-        maxWidth: '786px',
         width: '100%',
-        backgroundColor: 'white',
+        maxWidth: {
+          xs: '100%',
+          sm: '500pxpx',
+          md: '786px',
+        },
         display: 'flex',
         flexDirection: 'column',
         gap: 2,
-        px: 2,
+        px: { xs: 2, sm: 3, md: 4 },
         py: 2,
       }}
     >
@@ -30,7 +34,7 @@ export function CardContainer({
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
-          backgroundColor: highlighted ? '#E3F2FD' : '#F5F5F5',
+          backgroundColor: highlighted ? 'primary.light' : 'background.default',
           p: 2,
           borderRadius: 1,
         }}
@@ -38,12 +42,12 @@ export function CardContainer({
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
           <Typography
             variant="h6"
-            color={highlighted ? '#2979FF' : 'text.primary'}
+            color={highlighted ? 'primary.main' : 'text.primary'}
           >
             {title}
           </Typography>
           <Typography
-            color={highlighted ? '#2979FF' : 'text.secondary'}
+            color={highlighted ? 'primary.main' : 'text.secondary'}
             variant="body2"
           >
             {subtitle}