Edit title About us

src/Components/Sections/About/About.jsx

@@ -1,683 +1,3 @@
-// import React, { useState, useRef, useEffect } from "react";
-// import { motion } from "framer-motion";
-// import {
-//   Building,
-//   Eye,
-//   MessageSquare,
-//   Heart,
-//   X,
-//   Sparkles,
-//   Zap,
-//   Target,
-//   Globe,
-//   Shield,
-//   ChevronLeft,
-//   ArrowDown,
-//   ChevronRight
-// } from "lucide-react";
-// import styled, { keyframes } from "styled-components";
-
-
-// const companyInfo = [
-//   {
-//     id: 1,
-//     title: "من نحن",
-//     icon: Building,
-//     description: `تتمثل غايتنا في تقديم حلول هندسية وتقنية متكاملة تشمل تصميم و تنفيذ وإشراف وإدارة المشاريع الصناعية والخدمية ابتداءً من الدراسات والتخطيط مروراً بالتنفيذ والتركيب وصولاً إلى التشغيل والصيانة، توريد و تركيب المعدات و الآلات و خطوط الإنتاج و قطع الصيانة، تمثيل الشركات و الوكالات و المشاركة في المناقصات و المزايدات مع القطاعين العام و الخاص و ذلك وفق القوانين و الأنظمة المعمول بها`,
-//     features: [
-//       "تنفيذ الأعمال المدنية والمعمارية و المعدنية و الميكانيكية و الكهربائية ",
-//       "التحكم و تصميم و تطوير و تنفيذ الأنظمة و التطبيقات البرمجية و قواعد البيانات حسب متطلبات كل مشروع بما في ذلك أنظمة الأتمتة و التحكم",
-//       "تطوير و تنفيذ أنظمة متخصصة لإدارة و تشغيل المنشآت الصناعية و محطات الوقود ",
-//       "التفتيش الفني بكل أنواعه",
-//     ]
-//   },
-//   {
-//     id: 2,
-//     title: "رؤيتنا",
-//     icon: Eye,
-//     description: `أن نكون الشريك الهندسي التقني الموثوق في تنفيذ و إدارة المشاريع الصناعية والسكنية و النفطية والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية عبر حلول حديثة ومستدامة.`,
-//     features: [
-//       "الشريك الهندسي الموثوق",
-//       "تنمية البنية التحتية",
-//       "حلول مستدامة وحديثة",
-//       "الريادة في القطاع الهندسي"
-//     ]
-//   },
-//   {
-//     id: 3,
-//     title: "رسالتنا",
-//     icon: MessageSquare,
-//     description: `تقديم خدمات هندسية ودراسات تنفيذية وإشراف متكامل بأعلى معايير الجودة والسلامة، من خلال كوادر مؤهلة وخبرات متخصصة، مع الالتزام بالوقت والتكلفة وتحقيق أعلى قيمة مضافة لعملائنا.`,
-//     features: [
-//       "أعلى معايير الجودة والسلامة",
-//       "الالتزام بالوقت والتكلفة",
-//       "فرق عمل متخصصة ومؤهلة",
-//       "تحقيق القيمة المضافة للعملاء"
-//     ]
-//   },
-//   {
-//     id: 4,
-//     title: "قيمنا",
-//     icon: Heart,
-//     description: `نؤمن بقيم ثابتة توجه أعمالنا وعلاقاتنا مع العملاء والشركاء: الجودة والتميز في كل ما نقدمه، النزاهة المهنية في التعامل، الالتزام بالاستدامة والمسؤولية البيئية والاجتماعية.`,
-//     features: [
-//       "الجودة الاحترافية",
-//       "السلامة المهنية",
-//       "الاستدامة والمسؤولية",
-//       "التطوير المستمر",
-//       "الشفافية و بناء الثقة"
-//     ]
-//   }
-// ];
-
-// const rotating = keyframes`
-//   from {
-//     transform: perspective(var(--perspective)) rotateX(var(--rotateX))
-//       rotateY(0);
-//   }
-//   to {
-//     transform: perspective(var(--perspective)) rotateX(var(--rotateX))
-//       rotateY(1turn);
-//   }
-// `;
-
-// const floatAnimation = keyframes`
-//   0%, 100% {
-//     transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
-//       translateZ(var(--translateZ)) translateY(0px);
-//   }
-//   50% {
-//     transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
-//       translateZ(var(--translateZ)) translateY(-10px);
-//   }
-// `;
-
-// const StyledWrapper = styled.div`
-//   width: 100%;
-//   height: 100vh;
-//   position: relative;
-//   overflow: hidden;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   transition: background-color 0.3s ease;
-// `;
-
-// const Wrapper = styled.div`
-//   width: 100%;
-//   height: 100%;
-//   position: relative;
-//   text-align: center;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   overflow: hidden;
-//   z-index: 2;
-// `;
-
-// const Inner = styled(motion.div)`
-//   --quantity: ${props => props.quantity || 4};
-//   --w: 250px;
-//   --h: 350px;
-//   --translateZ: 320px;
-//   --rotateX: -8deg;
-//   --perspective: 2000px;
-//   position: absolute;
-//   width: var(--w);
-//   height: var(--h);
-//   top: 26%;
-//   left: calc(50% - (var(--w) / 2));
-//   transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(${props => props.rotation || 0}deg);
-//   transform-style: preserve-3d;
-//   transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-//   z-index: 10;
-// `;
-
-// const Card = styled.div.attrs(props => ({
-//   style: {
-//     '--index': props['data-index'] || 0,
-//   }
-// }))`
-//   position: absolute;
-//   border: 2px solid ${props => props.$theme === 'dark' ? '#47718b' : '#47718b'};
-//   border-radius: 20px;
-//   overflow: visible;
-//   inset: 0;
-//   transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
-//     translateZ(var(--translateZ));
-//   cursor: pointer;
-//   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-//   background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#3c4b5d, #57acd9)' : 'linear-gradient(45deg,white,#47718b)'};
-//   backdrop-filter: blur(15px);
-//   -webkit-backdrop-filter: blur(15px);
-
-//   &:hover {
-//     transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
-//       translateZ(calc(var(--translateZ) + 80px)) scale(1.05);
-//     border-color: #47718b;
-//     // background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg,#57acd9, transpatent)' : '#063e5b'};
-//     box-shadow:
-//       0 0 30px rgba(4, 28, 64, 0.3),
-//       0 0 60px rgba(4, 28, 64, 0.2);
-//   }
-
-//   ${props => props.$isFront && `
-//     transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
-//       translateZ(calc(var(--translateZ) + 50px)) scale(1.03);
-//     border-color:#47718b;
-//     box-shadow:
-//       0 15px 35px rgba(4, 28, 64, 0.2),
-//       0 5px 15px rgba(4, 28, 64, 0.1);
-//   `}
-// `;
-
-// const CardContent = styled.div`
-//   width: 100%;
-//   height: 100%;
-//   padding: 25px;
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: space-between;
-//   position: relative;
-//   overflow: hidden;
-//   border-radius: 18px;
-//   transition: all 0.3s ease;
-// `;
-
-// const CardHeader = styled.div`
-//   position: relative;
-//   z-index: 2;
-// `;
-
-// const IconWrapper = styled.div`
-//   width: 30px;
-//   height: 20px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   margin-bottom: 20px;
-//   transition: all 0.3s ease;
-// `;
-
-// const CardTitle = styled.h3`
-//   font-size: 30px;
-//   font-weight: 700;
-//   color: #041c40;
-//   margin-bottom: 6px;
-//   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-//   letter-spacing: -0.5px;
-//   text-align: center !important;
-// `;
-
-// const CardDescription = styled.p`
-//   font-size: 14px;
-//   line-height: 1.6;
-//   color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
-//   margin-bottom: 6px;
-//   display: -webkit-box;
-//   -webkit-line-clamp: 8;
-//   -webkit-box-orventical: vertical;
-//   overflow: hidden;
-//   text-align: right;
-//   position: relative;
-//   flex-grow: 1;
-//   opacity: 0.9;
-// `;
-
-// const ArrowHint = styled(motion.div)`
-//   position: absolute;
-//   bottom: 15px;
-//   left: 50%;
-//   transform: translateX(-50%);
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   gap: 5px;
-//   color: #041c40;
-//   z-index: 2;
-//   opacity: 0.7;
-//   transition: all 0.3s ease;
-
-//   span {
-//     font-size: 11px;
-//     color: #041c40;
-//     font-weight: 500;
-//     opacity: 0;
-//     white-space: nowrap;
-//     transition: opacity 0.3s ease;
-//   }
-
-//   svg {
-//     animation: bounce 2s infinite;
-//     transition: all 0.3s ease;
-//     color: #041c40;
-//   }
-
-//   @keyframes bounce {
-//     0%, 100% {
-//       transform: translateY(0);
-//     }
-//     50% {
-//       transform: translateY(5px);
-//     }
-//   }
-
-//   &:hover {
-//     opacity: 1;
-//     span {
-//       opacity: 1;
-//     }
-//     svg {
-//       animation: bounce 1s infinite;
-//     }
-//   }
-// `;
-
-// const HeaderSection = styled.div`
-//   text-align: center;
-//   position: absolute;
-//   top: 60px;
-//   left: 50%;
-//   transform: translateX(-50%);
-//   z-index: 10;
-//   width: 100%;
-// `;
-
-// const Title = styled.div`
-//   font-size: 42px;
-//   text-align: center;
-//   font-weight: 800;
-//   color: #041c40;
-//   margin-bottom: 15px;
-//   text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
-//   letter-spacing: -0.5px;
-// `;
-
-// const Subtitle = styled.div`
-//   font-size: 16px;
-//   color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
-//   opacity: 0.8;
-//   max-width: 600px;
-//   margin: 0 auto;
-//   font-weight: 300;
-//   line-height: 1.5;
-// `;
-
-// const DetailModal = styled(motion.div)`
-//   position: fixed;
-//   top: 0;
-//   left: 0;
-//   right: 0;
-//   bottom: 0;
-//   background: ${props => props.$theme === 'dark' ? 'rgb(49 49 49 / 75%)' : 'rgb(49 49 49 / 75%)'};
-//   backdrop-filter: blur(20px);
-//   -webkit-backdrop-filter: blur(20px);
-//   z-index: 2000;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   padding: 15px;
-// `;
-
-// const ModalContent = styled(motion.div)`
-//   max-width: 750px;
-//   width: 100%;
-//   height: 80%;
-//   background: ${props => props.$theme === 'dark' ? 'linear-gradient(45deg, #063e5b, gray);' : 'linear-gradient(45deg,#539cc4, gray)'};
-//   backdrop-filter: blur(40px);
-//   -webkit-backdrop-filter: blur(40px);
-//   border-radius: 25px;
-//   border: 2px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
-//   padding: 12px 20px;
-//   position: relative;
-//   color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
-// `;
-
-// const CloseButton = styled(motion.button)`
-//   position: absolute;
-//   top: 10px;
-//   right: 10px;
-//   width: 40px;
-//   height: 40px;
-//   border-radius: 50%;
-//   border: 1px solid rgba(4, 28, 64, 0.3);
-//   background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   cursor: pointer;
-//   color: #041c40;
-//   z-index: 1001;
-//   transition: all 0.3s ease;
-
-//   &:hover {
-//     background: rgba(4, 28, 64, 0.1);
-//     transform: rotate(90deg);
-//     border-color: #041c40;
-//   }
-// `;
-
-// const NavButton = styled(motion.button)`
-//   position: absolute;
-//   top: 50%;
-//   transform: translateY(-50%);
-//   width: 60px;
-//   height: 60px;
-//   border-radius: 50%;
-//   background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
-//   backdrop-filter: blur(10px);
-//   border: 1px solid ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   cursor: pointer;
-//   color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
-//   z-index: 100;
-//   transition: all 0.3s ease;
-
-//   &:hover {
-//     background: rgba(4, 28, 64, 0.1);
-//     border-color: #041c40;
-//     transform: translateY(-50%) scale(1.1);
-//     color: #041c40;
-//   }
-
-//   &:disabled {
-//     opacity: 0.3;
-//     cursor: not-allowed;
-//     &:hover {
-//       background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.8)' : 'rgba(245, 238, 230, 0.8)'};
-//       transform: translateY(-50%) scale(1);
-//       border-color: ${props => props.$theme === 'dark' ? '#4a4a4a' : '#d1c9be'};
-//       color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
-//     }
-//   }
-// `;
-
-// const LeftNavButton = styled(NavButton)`
-//   left: 30px;
-// `;
-
-// const RightNavButton = styled(NavButton)`
-//   right: 30px;
-// `;
-
-// const DotsContainer = styled.div`
-//   position: absolute;
-//   bottom: 40px;
-//   left: 50%;
-//   transform: translateX(-50%);
-//   display: flex;
-//   gap: 12px;
-//   z-index: 100;
-// `;
-
-// const Dot = styled.div.attrs(props => ({
-//   'data-active': props['data-active'] || 'false'
-// }))`
-//   width: 12px;
-//   height: 12px;
-//   border-radius: 50%;
-//   background: ${props => 
-//     props['data-active'] === 'true' 
-//       ? '#041c40' 
-//       : props.$theme === 'dark' 
-//         ? 'rgba(224, 105, 35, 0.3)' 
-//         : 'rgba(4, 28, 64, 0.3)'
-//   };
-//   cursor: pointer;
-//   transition: all 0.3s ease;
-
-//   &:hover {
-//     background: ${props => 
-//       props['data-active'] === 'true' 
-//         ? '#041c40' 
-//         : props.$theme === 'dark' 
-//           ? 'rgba(224, 105, 35, 0.5)' 
-//           : 'rgba(4, 28, 64, 0.5)'
-//     };
-//     transform: scale(1.2);
-//   }
-// `;
-
-// const About = ({ theme = 'light' }) => {
-//   const [selectedCard, setSelectedCard] = useState(null);
-//   const [rotation, setRotation] = useState(0);
-//   const [activeCardIndex, setActiveCardIndex] = useState(0);
-//   const innerRef = useRef(null);
-
-//   const handleCardClick = (card) => {
-//     setSelectedCard(card);
-//   };
-
-//   const handleCloseModal = () => {
-//     setSelectedCard(null);
-//   };
-
-//   const handleNextCard = () => {
-//     const angleStep = 360 / companyInfo.length;
-//     setRotation(prev => prev - angleStep);
-//     setActiveCardIndex(prev => (prev + 1) % companyInfo.length);
-//   };
-
-//   const handlePrevCard = () => {
-//     const angleStep = 360 / companyInfo.length;
-//     setRotation(prev => prev + angleStep);
-//     setActiveCardIndex(prev => (prev - 1 + companyInfo.length) % companyInfo.length);
-//   };
-
-//   const handleDotClick = (index) => {
-//     const angleStep = 360 / companyInfo.length;
-//     const targetRotation = -index * angleStep;
-//     setRotation(targetRotation);
-//     setActiveCardIndex(index);
-//   };
-
-//   const isCardInFront = (index) => {
-//     const cardAngle = (index * (360 / companyInfo.length) + rotation) % 360;
-//     const normalizedAngle = (cardAngle + 360) % 360;
-//     return Math.abs(normalizedAngle) < 30 || Math.abs(normalizedAngle - 360) < 30;
-//   };
-
-//   return (
-//     <StyledWrapper $theme={theme}>
-//       <HeaderSection>
-//         <Title>
-// <div 
-//     className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl"
-
-// >
-//     من نحن
-// </div>
-//         </Title>
-//         <Subtitle $theme={theme}>
-//           <div className="text-lg font-medium lg:text-xl mb-6 max-w-3xl mx-auto">
-//             رحلة التميز الهندسي والتقني، هنا حيث تلتقي الخبرة بالابتكار
-//           </div>
-//         </Subtitle>
-//       </HeaderSection>
-      
-//       <Wrapper>
-//         <LeftNavButton
-//           $theme={theme}
-//           onClick={handlePrevCard}
-//           whileHover={{ scale: 1.1 }}
-//           whileTap={{ scale: 0.9 }}
-//         >
-//           <ChevronLeft size={28} />
-//         </LeftNavButton>
-        
-//         <Inner
-//           ref={innerRef}
-//           quantity={companyInfo.length}
-//           rotation={rotation}
-//         >
-//           {companyInfo.map((card, index) => {
-//             const Icon = card.icon;
-//             const isFront = isCardInFront(index);
-
-//             return (
-//               <Card
-//                 key={card.id}
-//                 data-index={index}
-//                 $theme={theme}
-//                 $isFront={isFront}
-//                 onClick={() => isFront && handleCardClick(card)}
-//               >
-//                 <CardContent $theme={theme}>
-//                   <CardHeader>
-//                     <IconWrapper>
-//                       <Icon size={32} style={{ color: '#57acd9' }} />
-//                     </IconWrapper>
-//                     <CardTitle>{card.title}</CardTitle>
-//                     <CardDescription $theme={theme}>
-//                       {card.description}
-//                     </CardDescription>
-//                   </CardHeader>
-
-//                   <div>
-//                     {isFront && (
-//                       <ArrowHint style={{ color: '#57acd9' }}>
-//                         <ArrowDown size={24} style={{ color: '#57acd9' }} />
-//                         <span style={{ color: '#57acd9' }}>إضغط لعرض التفاصيل</span>
-//                       </ArrowHint>
-//                     )}
-//                   </div>
-//                 </CardContent>
-//               </Card>
-//             );
-//           })}
-//         </Inner>
-        
-//         <RightNavButton
-//           $theme={theme}
-//           onClick={handleNextCard}
-//           whileHover={{ scale: 1.1 }}
-//           whileTap={{ scale: 0.9 }}
-//         >
-//           <ChevronRight size={28} />
-//         </RightNavButton>
-        
-//         <DotsContainer>
-//           {companyInfo.map((_, index) => (
-//             <Dot
-//               key={index}
-//               $theme={theme}
-//               data-active={index === activeCardIndex ? 'true' : 'false'}
-//               onClick={() => handleDotClick(index)}
-//             />
-//           ))}
-//         </DotsContainer>
-//       </Wrapper>
-      
-//       {selectedCard && (
-//         <DetailModal
-//           $theme={theme}
-//           initial={{ opacity: 0 }}
-//           animate={{ opacity: 1 }}
-//           exit={{ opacity: 0 }}
-//           onClick={handleCloseModal}
-//         >
-//           <ModalContent
-//             $theme={theme}
-//             initial={{ scale: 0.8, opacity: 0 }}
-//             animate={{ scale: 1, opacity: 1 }}
-//             exit={{ scale: 0.8, opacity: 0 }}
-//             transition={{ type: "spring", damping: 25, stiffness: 200 }}
-//             onClick={(e) => e.stopPropagation()}
-//           >
-//             <CloseButton
-//               $theme={theme}
-//               onClick={handleCloseModal}
-//               whileHover={{ rotate: 90 }}
-//               whileTap={{ scale: 0.9 }}
-//             >
-//               <X size={20} />
-//             </CloseButton>
-            
-//             <div style={{ gap: '20px', marginBottom: '30px', textAlign:'center' }}>
-//               <div>
-//                 <h2 style={{
-//                   fontSize: '36px',
-//                   fontWeight: '800',
-//                   color: theme === 'dark' ? '#F5EEE6' : '#041c40',
-//                   marginBottom: '10px',
-//                 }}>
-//                   {selectedCard.title}
-//                 </h2>
-//               </div>
-//             </div>
-            
-//             <div style={{ marginBottom: '30px' }}>
-//               <p style={{
-//                 color: theme === 'dark' ? '#F5EEE6' : '#131313',
-//                 lineHeight: '1.7',
-//                 fontSize: '16px',
-//                 textAlign: 'right',
-//                 padding: '20px',
-//                 background: 'rgba(4, 28, 64, 0.05)',
-//                 backdropFilter: 'blur(10px)',
-//                 borderRadius: '16px',
-//                 border: '1px solid rgba(4, 28, 64, 0.2)'
-//               }}>
-//                 {selectedCard.description}
-//               </p>
-//             </div>
-
-//             <div style={{ marginBottom: '30px' }}>
-//               <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px' }}>
-//                 {selectedCard.features.map((feature, idx) => (
-//                   <div key={idx} style={{
-//                     padding: '18px',
-//                     background: 'rgba(4, 28, 64, 0.05)',
-//                     backdropFilter: 'blur(15px)',
-//                     borderRadius: '15px',
-//                     border: '1px solid rgba(4, 28, 64, 0.2)',
-//                     display: 'flex',
-//                     alignItems: 'center',
-//                     gap: '15px',
-//                     cursor: 'pointer',
-//                     transition: 'all 0.3s ease',
-//                   }}>
-//                     <div style={{
-//                       width: '40px',
-//                       height: '40px',
-//                       borderRadius: '12px',
-//                       background: 'rgba(4, 28, 64, 0.1)',
-//                       display: 'flex',
-//                       alignItems: 'center',
-//                       justifyContent: 'center',
-//                       flexShrink: 0
-//                     }}>
-//                       {idx === 1 && <Shield size={20} style={{ color: '#57acd9' }} />}
-//                       {idx === 0 && <Target size={20} style={{ color: '#57acd9' }} />}
-//                       {idx === 2 && <Globe size={20} style={{ color: '#57acd9' }} />}
-//                       {idx === 3 && <Zap size={20} style={{ color: '#57acd9' }} />}
-//                       {idx === 4 && <Sparkles size={20} style={{ color: '#57acd9' }} />}
-//                     </div>
-//                     <span style={{
-//                       color: theme === 'dark' ? '#F5EEE6' : '#131313',
-//                       fontSize: '15px',
-//                       fontWeight: '500',
-//                       flex: 1
-//                     }}>
-//                       {feature}
-//                     </span>
-//                   </div>
-//                 ))}
-//               </div>
-//             </div>
-//           </ModalContent>
-//         </DetailModal>
-//       )}
-//     </StyledWrapper>
-//   );
-// };
-
-// export default About;
-
-
-
 import React, { useState, useRef, useEffect } from "react";
 import { motion } from "framer-motion";
 import {
@@ -699,78 +19,6 @@ import styled, { keyframes } from "styled-components";
 import { useTranslation } from "react-i18next";
 
 
-// تعريف companyInfo باستخدام الترجمة
-const About = ({ theme = 'light' }) => {
-  const { t } = useTranslation();
-  
-  const companyInfo = [
-    {
-      id: 1,
-      title: t("about.cards.aboutUs.title"),
-      icon: Building,
-      description: t("about.cards.aboutUs.description"),
-      features: t("about.cards.aboutUs.features", { returnObjects: true })
-    },
-    {
-      id: 2,
-      title: t("about.cards.vision.title"),
-      icon: Eye,
-      description: t("about.cards.vision.description"),
-      features: t("about.cards.vision.features", { returnObjects: true })
-    },
-    {
-      id: 3,
-      title: t("about.cards.mission.title"),
-      icon: MessageSquare,
-      description: t("about.cards.mission.description"),
-      features: t("about.cards.mission.features", { returnObjects: true })
-    },
-    {
-      id: 4,
-      title: t("about.cards.values.title"),
-      icon: Heart,
-      description: t("about.cards.values.description"),
-      features: t("about.cards.values.features", { returnObjects: true })
-    }
-  ];
-
-  const [selectedCard, setSelectedCard] = useState(null);
-  const [rotation, setRotation] = useState(0);
-  const [activeCardIndex, setActiveCardIndex] = useState(0);
-  const innerRef = useRef(null);
-
-  const handleCardClick = (card) => {
-    setSelectedCard(card);
-  };
-
-  const handleCloseModal = () => {
-    setSelectedCard(null);
-  };
-
-  const handleNextCard = () => {
-    const angleStep = 360 / companyInfo.length;
-    setRotation(prev => prev - angleStep);
-    setActiveCardIndex(prev => (prev + 1) % companyInfo.length);
-  };
-
-  const handlePrevCard = () => {
-    const angleStep = 360 / companyInfo.length;
-    setRotation(prev => prev + angleStep);
-    setActiveCardIndex(prev => (prev - 1 + companyInfo.length) % companyInfo.length);
-  };
-
-  const handleDotClick = (index) => {
-    const angleStep = 360 / companyInfo.length;
-    const targetRotation = -index * angleStep;
-    setRotation(targetRotation);
-    setActiveCardIndex(index);
-  };
-
-  const isCardInFront = (index) => {
-    const cardAngle = (index * (360 / companyInfo.length) + rotation) % 360;
-    const normalizedAngle = (cardAngle + 360) % 360;
-    return Math.abs(normalizedAngle) < 30 || Math.abs(normalizedAngle - 360) < 30;
-  };
 
   const rotating = keyframes`
     from {
@@ -989,19 +237,23 @@ const About = ({ theme = 'light' }) => {
     text-align: center;
     font-weight: 800;
     color: #041c40;
-    margin-bottom: 15px;
+    margin-bottom: 2px;
     text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
     letter-spacing: -0.5px;
+    position: relative;
+    top: -10px;
   `;
 
   const Subtitle = styled.div`
-    font-size: 16px;
+    font-size: 14px;
     color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
     opacity: 0.8;
     max-width: 600px;
-    margin: 0 auto;
+    margin: 12px auto;
     font-weight: 300;
-    line-height: 1.5;
+    line-height: 1;
+    position: relative;
+    top: -20px;
   `;
 
   const DetailModal = styled(motion.div)`
@@ -1141,6 +393,78 @@ const About = ({ theme = 'light' }) => {
     }
   `;
 
+const About = ({ theme = 'light' }) => {
+  const { t } = useTranslation();
+  
+  const companyInfo = [
+    {
+      id: 1,
+      title: t("about.cards.aboutUs.title"),
+      icon: Building,
+      description: t("about.cards.aboutUs.description"),
+      features: t("about.cards.aboutUs.features", { returnObjects: true })
+    },
+    {
+      id: 2,
+      title: t("about.cards.vision.title"),
+      icon: Eye,
+      description: t("about.cards.vision.description"),
+      features: t("about.cards.vision.features", { returnObjects: true })
+    },
+    {
+      id: 3,
+      title: t("about.cards.mission.title"),
+      icon: MessageSquare,
+      description: t("about.cards.mission.description"),
+      features: t("about.cards.mission.features", { returnObjects: true })
+    },
+    {
+      id: 4,
+      title: t("about.cards.values.title"),
+      icon: Heart,
+      description: t("about.cards.values.description"),
+      features: t("about.cards.values.features", { returnObjects: true })
+    }
+  ];
+
+  const [selectedCard, setSelectedCard] = useState(null);
+  const [rotation, setRotation] = useState(0);
+  const [activeCardIndex, setActiveCardIndex] = useState(0);
+  const innerRef = useRef(null);
+
+  const handleCardClick = (card) => {
+    setSelectedCard(card);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedCard(null);
+  };
+
+  const handleNextCard = () => {
+    const angleStep = 360 / companyInfo.length;
+    setRotation(prev => prev - angleStep);
+    setActiveCardIndex(prev => (prev + 1) % companyInfo.length);
+  };
+
+  const handlePrevCard = () => {
+    const angleStep = 360 / companyInfo.length;
+    setRotation(prev => prev + angleStep);
+    setActiveCardIndex(prev => (prev - 1 + companyInfo.length) % companyInfo.length);
+  };
+
+  const handleDotClick = (index) => {
+    const angleStep = 360 / companyInfo.length;
+    const targetRotation = -index * angleStep;
+    setRotation(targetRotation);
+    setActiveCardIndex(index);
+  };
+
+  const isCardInFront = (index) => {
+    const cardAngle = (index * (360 / companyInfo.length) + rotation) % 360;
+    const normalizedAngle = (cardAngle + 360) % 360;
+    return Math.abs(normalizedAngle) < 30 || Math.abs(normalizedAngle - 360) < 30;
+  };
+
   return (
     <section id="about" >
     <StyledWrapper $theme={theme}>