diff --git a/src/Components/Sections/About/About.jsx b/src/Components/Sections/About/About.jsx index 22bd2cc..c2934eb 100644 --- a/src/Components/Sections/About/About.jsx +++ b/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 ( -// -// -// -// <div -// className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl" - -// > -// من نحن -// </div> -// -// -//
-// رحلة التميز الهندسي والتقني، هنا حيث تلتقي الخبرة بالابتكار -//
-// -// - -// -// -// -// - -// -// {companyInfo.map((card, index) => { -// const Icon = card.icon; -// const isFront = isCardInFront(index); - -// return ( -// isFront && handleCardClick(card)} -// > -// -// -// -// -// -// {card.title} -// -// {card.description} -// -// - -//
-// {isFront && ( -// -// -// إضغط لعرض التفاصيل -// -// )} -//
-// -// -// ); -// })} -// - -// -// -// - -// -// {companyInfo.map((_, index) => ( -// handleDotClick(index)} -// /> -// ))} -// -// - -// {selectedCard && ( -// -// e.stopPropagation()} -// > -// -// -// - -//
-//
-//

-// {selectedCard.title} -//

-//
-//
- -//
-//

-// {selectedCard.description} -//

-//
- -//
-//
-// {selectedCard.features.map((feature, idx) => ( -//
-//
-// {idx === 1 && } -// {idx === 0 && } -// {idx === 2 && } -// {idx === 3 && } -// {idx === 4 && } -//
-// -// {feature} -// -//
-// ))} -//
-//
-// -// -// )} -// -// ); -// }; - -// 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 (