Edit background canvas

Edit background in home

src/Components/BackgroundCanvas/BackgroundCanvas.jsx

@@ -127,7 +127,7 @@ const BackgroundCanvas = ({ theme = 'light' }) => {
     camera.acceleration.z *= 0.9;
   };
 
-  const initCanvas = () => {
+const initCanvas = () => {
   const canvas = canvasRef.current;
   if (!canvas) return;
 
@@ -153,8 +153,17 @@ const BackgroundCanvas = ({ theme = 'light' }) => {
     1
   );
 
-    jointsRef.current = generateJoints(300, worldRef.current.width, worldRef.current.height);
-  };
+  const isMobile = window.innerWidth < 768;
+  const numberOfJoints = isMobile ? 80 : 300;
+  jointsRef.current = generateJoints(numberOfJoints, worldRef.current.width, worldRef.current.height);
+  
+  if (isMobile) {
+    jointsRef.current.forEach(joint => {
+      joint.bone_length = 120; 
+      joint.speed = 0.4; 
+    });
+  }
+};
 
   const animate = () => {
     const canvas = canvasRef.current;

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}>

src/Components/Sections/Contact/Contact.jsx

@@ -130,10 +130,7 @@ emailjs
                 initial={false}
               />
               <motion.div
-                className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#57acd9] to-transparent rounded-full"
-                initial={{ x: "-50%", width: "0%" }}
-                whileHover={{ width: "75%" }}
-                transition={{ duration: 0.3 }}
+               
               />
             </motion.div>
             <motion.div
@@ -169,10 +166,8 @@ emailjs
               />
               
               <motion.div
-                className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#2ecc71] to-transparent rounded-full"
-                initial={{ x: "-50%", width: "0%" }}
-                whileHover={{ width: "75%" }}
-                transition={{ duration: 0.3 }}
+              
+             
               />
             </motion.div>
           </motion.div>
@@ -184,7 +179,7 @@ emailjs
             className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-2xl border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-3xl transition-all duration-500 lg:w-1/2"
           >
             <div className="relative mb-3 pt-3">
-              <h2 className="text-2xl md:text-3xl font-bold text-center">
+              <h2 className="text-2xl md:text-3xl font-bold text-center" style={{ whiteSpace: 'pre-line' }}>
                 <span className="bg-clip-text text-[#063e5b] bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9]">
                   {t("contact.formTitle")} 
                 </span>

src/Components/Sections/Home/Home.jsx

@@ -9,8 +9,7 @@ export default function EngineeringHeroFlowbite() {
   const { t, i18n } = useTranslation();
 
   const defaultConfig = {
-    main_title:
-      "عندما تطلب الرؤية مستشارًا,  ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
+    main_title: "عندما تطلب الرؤية مستشارًا، ويحتاج المخطط منفذًا استراتيجيًا…\nنكون القرار بالقيادة من الرؤية حتى التسليم",
     subtitle:
       "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
     primary_color: "#e67e22",
@@ -226,7 +225,7 @@ export default function EngineeringHeroFlowbite() {
         :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px }
 
         .hero-section{position:relative;width:100%;height:100%;overflow:hidden}
-        .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
+        .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg, #4b6173, transparent);z-index:3}
         .hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,4vw,40px);gap:2rem;direction:ltr;flex-direction:row}
         .hero-layout.layout-ltr{flex-direction:row-reverse}
         .hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}
@@ -243,7 +242,7 @@ export default function EngineeringHeroFlowbite() {
         }
         .partner-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
         .partner-bubble{
-          width:132px;height:132px;border-radius:9999px;background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
+          width:140px;height:140px;border-radius:9999px;background:linear-gradient(180deg, rgba(255 255 255 / 17%), rgba(255 255 255 / 35%));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
           transform-origin:center;
           transform: translateY(10px) scale(0.95);
           opacity: 0;
@@ -283,6 +282,35 @@ export default function EngineeringHeroFlowbite() {
           .partner-item img{max-height:30px}
           .partner-strip-wrap{padding-left:20px;padding-right:20px;bottom:10px}
         }
+          .nsc-bubble img {
+  max-width: 100% !important;
+  max-height: 100% !important;
+  transform: scale(1.15);
+}
+
+.nsc-bubble:hover img {
+  transform: scale(1.25);
+}
+
+@media (max-width: 768px) {
+  .nsc-bubble img {
+    max-width: 80% !important;
+    max-height: 80% !important;
+    transform: scale(1.12);
+  }
+  
+  .nsc-bubble:hover img {
+    transform: scale(1.2);
+  }
+}
+
+@media (max-width: 480px) {
+  .nsc-bubble img {
+    max-width: 75% !important;
+    max-height: 75% !important;
+    transform: scale(1.1);
+  }
+}
         @media (max-width: 640px){
           .partner-strip{gap:10px;padding:8px;border-radius:10px}
           .partner-item img{max-height:24px}
@@ -393,7 +421,7 @@ export default function EngineeringHeroFlowbite() {
                 <img src={TPSlogo} alt="TPS" />
               </div>
               <div
-                className="partner-bubble"
+                className="partner-bubble  nsc-bubble"
                 style={{ animationDelay: "180ms" }}
                 aria-label="شريك NSC"
               >

src/Components/Sections/Services/Services.jsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { Wallet, Zap, Users, PieChart, Sparkles } from "lucide-react";
-import { useTranslation } from "react-i18next";
+import { withTranslation } from "react-i18next";
 
-const Services = () => {
-  const { t } = useTranslation();
+const Services = ({ t, i18n }) => {
   
   const features = [
     {
@@ -33,47 +32,42 @@ const Services = () => {
   ];
 
   return (
-    <section id="services" >
-    <div className="min-h-screen bg-transparent font-sans overflow-hidden relative" dir="rtl">
-    <div className="min-h-screen bg-transparent font-sans overflow-hidden relative">
-      <div className="absolute inset-0 z-0 overflow-hidden">
-        <div className="absolute inset-0 bg-transparent"></div>
-      </div>
-      <div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center">
-        <div className="flex flex-col justify-center max-h-screen">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 max-w-4xl mx-auto p-6">
+    <section id="services">
+      <div className="min-h-screen bg-transparent font-sans overflow-hidden relative w-full" dir="rtl">
+        <div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center w-full">
+          <div className="w-full lg:w-1/2 flex flex-col justify-center px-4 sm:px-6 md:px-8 py-12 lg:py-0">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4 sm:gap-6 md:gap-8 max-w-7xl mx-auto w-full">
     {features.map((feature) => (
   <div 
     key={feature.id} 
-                className="group relative overflow-hidden"
+    className="group relative overflow-hidden w-full"
   >
     <div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
     
-                <div className="relative p-6 z-10">
-                  <div className="flex items-start space-x-5 rtl:space-x-reverse">
-                    <div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg">
+    <div className="relative p-4 sm:p-5 md:p-6 z-10">
+      <div className="flex items-start space-x-4 rtl:space-x-reverse">
+        <div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg flex-shrink-0">
           {feature.icon}
         </div>
-                    <div className="flex-1">
-                      <h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-[#47718b] transition-colors duration-500">
+        <div className={`flex-1 min-w-0 ${i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'}`}>
+          <h3 className="text-lg sm:text-xl md:text-xl font-bold text-gray-800 mb-2 sm:mb-3 group-hover:text-[#47718b] transition-colors duration-500 break-words">
             {feature.title}
           </h3>
-                      <p className="text-gray-600 leading-relaxed text-sm">
+          <p className="text-gray-600 leading-relaxed text-sm sm:text-sm md:text-base break-words">
             {feature.description}
           </p>
         </div>
       </div>
     </div>
   </div>
-            ))}
+))}
             </div>
           </div>
-        <div className="relative lg:w-1/2 lg:min-h-screen flex items-center justify-center py-16 lg:py-0">
-          <div className="absolute inset-0 lg:inset-y-0 lg:right-0 lg:left-auto lg:w-[100%]">
-            <div className="absolute inset-0">
-              <div className="hidden lg:block absolute inset-0">
+          <div className="w-full lg:w-1/2 relative min-h-[60vh] lg:min-h-screen flex items-center justify-center py-12 sm:py-16 lg:py-0">
+            <div className="absolute inset-0 w-full h-full">
+              <div className="hidden lg:block absolute inset-0 w-full h-full">
                 <div 
-                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
+                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl w-full h-full"
                   style={{
                     clipPath: 'circle(150% at 0% 50%)',
                     borderTopLeftRadius: '0',
@@ -81,12 +75,11 @@ const Services = () => {
                     borderTopRightRadius: '9999px',
                     borderBottomRightRadius: '9999px'
                   }}
-                > 
+                ></div>
               </div>
-              </div>
-              <div className="lg:hidden absolute inset-0">
+              <div className="lg:hidden absolute inset-0 w-full h-full">
                 <div 
-                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
+                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl w-full h-full"
                   style={{
                     clipPath: 'ellipse(150% 100% at 50% 0%)',
                     borderBottomLeftRadius: '9999px',
@@ -97,34 +90,44 @@ const Services = () => {
                   <div className="absolute inset-0 border-2 border-white/20"></div>
                 </div>
               </div>
-            </div>
               <div className="absolute inset-0 overflow-hidden">
-              <div className="absolute top-1/4 -left-16 w-64 h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
-              <div className="absolute bottom-1/3 -left-8 w-48 h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
-              <div className="absolute top-1/2 right-1/4 w-32 h-32 bg-indigo-400/15 rounded-full backdrop-blur-md animate-pulse"></div>
+                <div className="absolute top-1/4 -left-8 sm:-left-16 w-48 h-48 sm:w-64 sm:h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
+                <div className="absolute bottom-1/3 -left-4 sm:-left-8 w-32 h-32 sm:w-48 sm:h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
+                <div className="absolute top-1/2 right-1/4 w-24 h-24 sm:w-32 sm:h-32 bg-indigo-400/15 rounded-full backdrop-blur-md animate-pulse"></div>
               </div>
-            <div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
+              
+              <div className="absolute top-0 left-0 w-24 sm:w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
             </div>
-          <div className="relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto">
-            <div className="space-y-8 lg:space-y-10">
+            <div 
+              className={`relative z-20 text-white p-6 sm:p-8 md:p-12 lg:p-16 max-w-full sm:max-w-2xl mx-auto w-full ${
+                i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+              }`}
+            >
+              <div className="space-y-6 sm:space-y-8 lg:space-y-10">
                 <div className="relative">
-                <div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse">
-                  <span className="text-sm font-semibold tracking-widest text-white">
+                  <div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse flex-wrap">
+                    <span className="text-sm sm:text-base font-semibold tracking-widest text-white">
                       {t("services.summary")}
                     </span>
-                  <Sparkles className="w-6 h-6 text-[#57acd9]" />
+                    <Sparkles className="w-5 h-5 sm:w-6 sm:h-6 text-[#57acd9]" />
                   </div>
-                <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4]">
+                  <h1 className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4] leading-tight ${
+                    i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+                  }`}>
                     {t("services.pageTitle")}
                   </h1>
                 </div>
+                
                 <div className="space-y-4">
-                <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl">
+                  <h2 className={`text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl ${
+                    i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+                  }`}>
                     {t("services.mainHeading")}
                   </h2>
-                <div className="w-20 h-1 bg-gradient-to-r from-white to-[#57acd9] rounded-full"></div>
+                  <div className="w-16 sm:w-20 h-1 bg-gradient-to-r from-white to-[#57acd9] rounded-full"></div>
                 </div>
-              <p className="text-lg md:text-xl text-purple-100/90 font-light leading-relaxed max-w-lg">
+                
+                <p className="text-base sm:text-lg md:text-xl text-purple-100/90 font-light leading-relaxed max-w-full sm:max-w-lg">
                   {t("services.description")}
                 </p>
               </div>
@@ -132,9 +135,8 @@ const Services = () => {
           </div>
         </div>
       </div>
-    </div>
-</section>
+    </section>
   );
 };
 
-export default Services;
+export default withTranslation()(Services);

src/i18n.js

@@ -13,10 +13,8 @@ const resources = {
                 contact: "Contact"
             },
             hero: {
-        main_title:
-          "When vision asks for a consultant, and the planner needs a strategic executor… we become the decision — leading from vision to delivery",
-        subtitle:
-          "Integrated solutions including design, implementation, operation and maintenance\nfor industrial and civil projects, following the latest standards and technologies",
+                main_title: "When vision asks for a consultant, and the planner needs a strategic executor…\nwe become the decision — leading from vision to delivery",
+                subtitle: "Integrated solutions including design, implementation, operation and maintenance\nfor industrial and civil projects, following the latest standards and technologies",
                 action: "Explore Departments"
             },
             home: {
@@ -95,8 +93,7 @@ Flexible Offices: Homs - Fairouzeh, Aleppo - Industrial Zone, Tartous - Dubai St
 Work Areas: Ready to implement works in all Syrian governorates`,
                 phone: "Phone Numbers",
                 email: "Email",
-        formTitle:
-          "From vision to execution... a partnership that creates successful projects. One message could be the turning point in executing your project successfully.",
+                formTitle: "...From vision to execution\na partnership that creates successful projects. One message could be the turning point in executing your project successfully.",
                 name: "Name",
                 namePlaceholder: "Enter your name",
                 emailPlaceholder: "example@example.com",
@@ -119,13 +116,11 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                 features: {
                     industrial: {
                         title: "Design and implementation of integrated industrial production lines",
-            description:
-              "Including iron, cement, food, pharmaceuticals, and plastics sectors with the highest quality and safety standards"
+                        description: "Including iron, cement, food, pharmaceuticals, and plastics sectors with the highest quality and safety standards"
                     },
                     residential: {
                         title: "Implementation of integrated residential and service projects",
-            description:
-              "Prefabricated housing units, service and administrative buildings, adhering to the highest engineering standards"
+                        description: "Prefabricated housing units, service and administrative buildings, adhering to the highest engineering standards"
                     },
                     infrastructure: {
                         title: "Construction and maintenance of infrastructure facilities",
@@ -195,8 +190,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     "Engineering inspection according to international standards",
                     "Improving operational efficiency and reducing downtime costs"
                 ],
-        defaultProjects: [
-          {
+                defaultProjects: [{
                         year: "1999-2015",
                         items: [
                             "Design, manufacture and installation of rolling and mill structures (Al-Wahib projects)",
@@ -269,8 +263,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     defaultTitle: "Building Rehabilitation & Maintenance Department",
                     expertiseBadge: "Department Expertise",
                     expertiseTitle: "Integrated rehabilitation and maintenance solutions",
-          expertiseSubtitle:
-            "This department delivers comprehensive maintenance and rehabilitation services for residential, service, administrative and industrial buildings, including:",
+                    expertiseSubtitle: "This department delivers comprehensive maintenance and rehabilitation services for residential, service, administrative and industrial buildings, including:",
                     worksBadge: "Executed Works",
                     worksTitle: "Executed Works",
                     worksSubtitle: "Showcasing our projects and the timeline of executed works",
@@ -304,8 +297,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     defaultTitle: "Fuel Stations & Oil Facilities Department",
                     expertiseBadge: "Department Expertise",
                     expertiseTitle: "Integrated fuel stations and oil facilities services",
-          expertiseSubtitle:
-            "This department specializes in design, construction, maintenance and technical services for fuel stations and strategic fuel facilities, including:",
+                    expertiseSubtitle: "This department specializes in design, construction, maintenance and technical services for fuel stations and strategic fuel facilities, including:",
                     worksBadge: "Executed Works",
                     worksTitle: "Executed Works",
                     worksSubtitle: "Showcasing our projects and the timeline of executed works",
@@ -318,8 +310,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "Back to main menu"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "2009",
                             items: [
                                 "Study and supervision of natural gas treatment plant at Adra smelting plant 2009",
@@ -367,8 +358,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     defaultTitle: "Technical & Engineering Inspection Department",
                     expertiseBadge: "Department Expertise",
                     expertiseTitle: "NDT & Technical Inspection Services",
-          expertiseSubtitle:
-            "This department provides comprehensive non-destructive testing (NDT), welding inspection and technical verification services according to international standards, including:",
+                    expertiseSubtitle: "This department provides comprehensive non-destructive testing (NDT), welding inspection and technical verification services according to international standards, including:",
                     worksBadge: "Executed Works",
                     worksTitle: "Executed Works",
                     worksSubtitle: "Showcasing our inspection and testing projects and timeline",
@@ -381,8 +371,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "Back to main menu"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "2009-2010",
                             items: [
                                 "Review and verification of engineering & technological drawings for rolling and smelting lines — Manufacturer: Danieli (Italy) 2009-2010"
@@ -457,8 +446,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     next: "Next"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "1999-2015",
                             items: [
                                 "Execution of industrial water treatment plants for steel smelting and rolling factories — multiple projects (1999-2015)."
@@ -539,8 +527,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "Back to main menu"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "1999-2009",
                             items: [
                                 "Metal structures for steel rolling factories: Al-Wahib, Al-Arabiya, Al-International."
@@ -594,8 +581,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "Back to main menu"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "2009-2024",
                             items: [
                                 "Provision and supplying of materials and equipment for industrial projects."
@@ -654,8 +640,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "Back to main menu"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "1999-2015",
                             items: [
                                 "Automation of control & operation systems for steel smelting and rolling plants (1999-2015)."
@@ -709,7 +694,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                 contact: "تواصل معنا"
             },
             hero: {
-        main_title: "عندما تطلب الرؤية مستشارًا, ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
+                main_title: "عندما تطلب الرؤية مستشارًا، ويحتاج المخطط منفذًا استراتيجيًا…\nنكون القرار بالقيادة من الرؤية حتى التسليم",
                 subtitle: "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
                 action: "تعرف على أقسامنا"
             },
@@ -789,7 +774,8 @@ Work Areas: Ready to implement works in all Syrian governorates`,
 مناطق العمل: جاهزين لتنفيذ الأعمال في جميع المحافظات السورية`,
                 phone: "أرقام الاتصال",
                 email: "البريد الإلكتروني",
-        formTitle: "من الرؤية إلى التنفيذ... شراكة تصنع مشاريع ناجحة رسلة واحدة قد تكون نقطة التحول في تنفيذ مشروعك بنجاح",
+                formTitle: "من الرؤية إلى التنفيذ...\nشراكة تصنع مشاريع ناجحة رسالة واحدة قد تكون نقطة التحول في تنفيذ رؤيتك",
+                // formTitle: "من الرؤية إلى التنفيذ... شراكة تصنع مشاريع ناجحة رسلة واحدة قد تكون نقطة التحول في تنفيذ مشروعك بنجاح",
                 name: "الاسم",
                 namePlaceholder: "أدخل اسمك",
                 emailPlaceholder: "example@example.com",
@@ -886,8 +872,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     "أعمال التفتيش الفني والهندسي وفق المعايير الدولية",
                     "رفع كفاءة التشغيل وتقليل تكاليف التوقف"
                 ],
-        defaultProjects: [
-          {
+                defaultProjects: [{
                         year: "1999-2015",
                         items: [
                             "دراسة وتصميم وتنفيذ المنشآت والهياكل لخطوط الدرفلة واللف (مشاريع الوهيب)",
@@ -993,8 +978,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     defaultTitle: "قسم محطات الوقود وصيانة المنشآت النفطية",
                     expertiseBadge: "اختصاص القسم",
                     expertiseTitle: "حلول متكاملة لمحطات الوقود والمنشآت النفطية",
-          expertiseSubtitle:
-            "يختص هذا القسم بتقديم خدمات التصميم، الإنشاء، الصيانة والخدمات الفنية لمحطات الوقود والمرافق الاستراتيجية، ويشمل:",
+                    expertiseSubtitle: "يختص هذا القسم بتقديم خدمات التصميم، الإنشاء، الصيانة والخدمات الفنية لمحطات الوقود والمرافق الاستراتيجية، ويشمل:",
                     worksBadge: "الأعمال المنفذة",
                     worksTitle: "الأعمال المنفذة",
                     worksSubtitle: "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة",
@@ -1007,8 +991,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "العودة للقائمة الرئيسية"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "2009",
                             items: [
                                 "دراسة وإشراف محطة معالجة الغاز الطبيعي في معمل الصهر عدرا 2009",
@@ -1050,8 +1033,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     defaultTitle: "قسم التفتيش والفحص الفني و الهندسي",
                     expertiseBadge: "اختصاص القسم",
                     expertiseTitle: "خدمات الفحص غير الإتلافي والتفتيش الفني",
-          expertiseSubtitle:
-            "يقدم هذا القسم خدمات الفحص غير الإتلافي (NDT)، فحص اللحامات والتحقق الفني وفق المعايير الدولية، ويشمل:",
+                    expertiseSubtitle: "يقدم هذا القسم خدمات الفحص غير الإتلافي (NDT)، فحص اللحامات والتحقق الفني وفق المعايير الدولية، ويشمل:",
                     worksBadge: "الأعمال المنفذة",
                     worksTitle: "الأعمال المنفذة",
                     worksSubtitle: "عرض مشروعاتنا في التفتيش والفحوصات وخط الزمن الخاص بها",
@@ -1064,8 +1046,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "العودة للقائمة الرئيسية"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "2009-2010",
                             items: [
                                 "تدقيق ومطابقة المخططات الهندسية والتكنولوجية لخطوط الدرفلة وصهر الحد - الشركة المصنعة: دانييلي (إيطاليا) 2009-2010"
@@ -1137,8 +1118,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     next: "التالي"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "1999-2015",
                             items: [
                                 "تنفيذ محطات معالجة المياه الصناعية لمعامل صهر ودرفلة الحديد (1999-2015)."
@@ -1216,8 +1196,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "العودة للقائمة الرئيسية"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "1999-2009",
                             items: [
                                 "المنشآت المعدنية لمعامل درفلة الحديد: الوهيب - العربية - الدولية."
@@ -1271,8 +1250,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "العودة للقائمة الرئيسية"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "2009-2024",
                             items: [
                                 "تأمين وتجهيز مواد ومعدات لمشاريع صناعية"
@@ -1328,8 +1306,7 @@ Work Areas: Ready to implement works in all Syrian governorates`,
                     backToMenu: "العودة للقائمة الرئيسية"
                 },
                 projectsTimeline: {
-          defaultProjects: [
-            {
+                    defaultProjects: [{
                             year: "1999-2015",
                             items: [
                                 "أتمتة منظومات التحكم والتشغيل لمعاهد صهر ودرفلة الحديد (1999-2015)."