fix: styles

src/components/CardContainer.tsx

@@ -0,0 +1,56 @@
+import { Box, Typography } from '@mui/material';
+export function CardContainer({
+  title,
+  subtitle,
+  action,
+  children,
+  highlighted,
+}: {
+  title: string;
+  subtitle: string;
+  action?: React.ReactNode;
+  children?: React.ReactNode;
+  highlighted?: boolean;
+}) {
+  return (
+    <Box
+      sx={{
+        width: '754px',
+        backgroundColor: 'white',
+        // boxShadow: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          backgroundColor: highlighted ? '#E3F2FD' : '#F5F5F5',
+          p: 2,
+          borderRadius: 1,
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Typography
+            variant="h6"
+            color={highlighted ? '#2979FF' : 'text.primary'}
+          >
+            {title}
+          </Typography>
+          <Typography
+            color={highlighted ? '#2979FF' : 'text.secondary'}
+            variant="body2"
+          >
+            {subtitle}
+          </Typography>
+        </Box>
+        {action}
+      </Box>
+
+      {children}
+    </Box>
+  );
+}

src/components/CountDownTimer.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+
+interface CountdownTimerProps {
+  initialSeconds: number;
+  onComplete?: () => void;
+}
+
+export function CountDownTimer({
+  initialSeconds,
+  onComplete,
+}: CountdownTimerProps) {
+  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);
+
+  useEffect(() => {
+    setSecondsLeft(initialSeconds);
+  }, [initialSeconds]);
+
+  useEffect(() => {
+    if (secondsLeft <= 0) {
+      onComplete?.();
+      return;
+    }
+    const timer = setInterval(() => {
+      setSecondsLeft((prev) => prev - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [secondsLeft, onComplete]);
+
+  const toPersianDigits = (str: string) =>
+    str.replace(/\d/g, (d: string) => '۰۱۲۳۴۵۶۷۸۹'[parseInt(d)]);
+
+  const formatTime = (totalSeconds: number) => {
+    const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
+    const seconds = String(totalSeconds % 60).padStart(2, '0');
+    return toPersianDigits(`${minutes}:${seconds}`);
+  };
+
+  return <span>{formatTime(secondsLeft)}</span>;
+}