edit card size

client/src/pages/About.js

@@ -20,7 +20,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { Helmet } from 'react-helmet-async';
-import api from '../utils/api'; // ✅ بدل staticData
+import api from '../utils/api'; 
 
 const API_BASE = process.env.REACT_APP_API_URL || 'http://localhost:5080';
 const toMediaUrl = (url) => {
@@ -30,14 +30,13 @@ const toMediaUrl = (url) => {
     return url;
   }
   if (url.startsWith('/uploads/')) return `${API_BASE}${url}`;
-  return url; // /images/... stays on client
+  return url; 
 };
 
 const unwrapContent = (res) => {
   return res?.data?.data?.content || res?.data?.data || res?.data || null;
 };
 
-// ✅ remove HTML tags مثل <p>..</p>
 const stripHtml = (html = '') => String(html).replace(/<[^>]*>/g, '').trim();
 
 const About = () => {
@@ -47,7 +46,6 @@ const About = () => {
   const [loading, setLoading] = useState(true);
   const currentLanguage = i18n.language;
 
-  // ✅ Fetch about page content from API بدل static data
   useEffect(() => {
     let mounted = true;
 
@@ -138,7 +136,6 @@ const About = () => {
   // Use translations for non-English languages, API content for English
   const useTranslations = currentLanguage !== 'en';
 
-  // ✅ stripHtml only for content coming from dashboard (English)
   const heroTitle = useTranslations ? t('about.heroTitle') : stripHtml(content?.hero?.title || t('about.heroTitle'));
   const heroSubtitle = useTranslations ? t('about.heroSubtitle') : stripHtml(content?.hero?.subtitle || t('about.heroSubtitle'));
   const heroDescription = useTranslations ? '' : stripHtml(content?.hero?.description || '');
@@ -167,7 +164,6 @@ const About = () => {
     ...valuesSectionStatic,
     title: stripHtml(valuesSectionStatic.title || ''),
     content: stripHtml(valuesSectionStatic.content || ''),
-    // items (إذا موجودة) نتركها كما هي بدون تغيير
   };
 
   return (
@@ -321,16 +317,20 @@ const About = () => {
             
       <Grid container spacing={4}>
         {(valuesSection.items && valuesSection.items.length > 0 ? valuesSection.items : values).map((value, index) => (
-                <Grid item xs={12} sm={6} md={3} key={index}>
+          <Grid item xs={12} sm={6} md={3} key={index} sx={{ display: 'flex' }}>
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: index * 0.1 }}
               viewport={{ once: true }}
+              style={{ height: '100%', width: '100%', display: 'flex' }}
             >
               <Card
                 sx={{
                   height: '100%',
+                  flex: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
                   textAlign: 'center',
                   p: 3,
                   '&:hover': {