Compare commits
19 Commits
e9ae4e7bf6
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| bccefd097f | |||
| 56051026db | |||
| 23982cc0e6 | |||
| 2a1d6f1f06 | |||
| 69528ac0c7 | |||
| bcd76787f4 | |||
| 0792b32fcc | |||
| 955a827d78 | |||
| 9c641cc650 | |||
| 93b89b7665 | |||
| d3f4bb9349 | |||
| a7c577ee09 | |||
| a96b4fd326 | |||
| 5cf1e54c58 | |||
| 88ab4119e8 | |||
| 301232fef1 | |||
| fa6f8aba26 | |||
| 2ea31c3f5d | |||
| 062a4257e4 |
@ -127,35 +127,44 @@ const BackgroundCanvas = ({ theme = 'light' }) => {
|
|||||||
camera.acceleration.z *= 0.9;
|
camera.acceleration.z *= 0.9;
|
||||||
};
|
};
|
||||||
|
|
||||||
const initCanvas = () => {
|
const initCanvas = () => {
|
||||||
const canvas = canvasRef.current;
|
const canvas = canvasRef.current;
|
||||||
if (!canvas) return;
|
if (!canvas) return;
|
||||||
|
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
const view = {
|
const view = {
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
height: window.innerHeight,
|
height: window.innerHeight,
|
||||||
};
|
|
||||||
|
|
||||||
canvas.width = view.width;
|
|
||||||
canvas.height = view.height;
|
|
||||||
|
|
||||||
worldRef.current = {
|
|
||||||
width: view.width * 2,
|
|
||||||
height: view.height * 2,
|
|
||||||
};
|
|
||||||
|
|
||||||
cameraRef.current = new Camera(
|
|
||||||
{
|
|
||||||
x: worldRef.current.width / 2,
|
|
||||||
y: worldRef.current.height / 2,
|
|
||||||
},
|
|
||||||
1
|
|
||||||
);
|
|
||||||
|
|
||||||
jointsRef.current = generateJoints(300, worldRef.current.width, worldRef.current.height);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
canvas.width = view.width;
|
||||||
|
canvas.height = view.height;
|
||||||
|
|
||||||
|
worldRef.current = {
|
||||||
|
width: view.width * 2,
|
||||||
|
height: view.height * 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
cameraRef.current = new Camera(
|
||||||
|
{
|
||||||
|
x: worldRef.current.width / 2,
|
||||||
|
y: worldRef.current.height / 2,
|
||||||
|
},
|
||||||
|
1
|
||||||
|
);
|
||||||
|
|
||||||
|
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 animate = () => {
|
||||||
const canvas = canvasRef.current;
|
const canvas = canvasRef.current;
|
||||||
if (!canvas) return;
|
if (!canvas) return;
|
||||||
|
|||||||
@ -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 React, { useState, useRef, useEffect } from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import {
|
import {
|
||||||
@ -699,78 +19,6 @@ import styled, { keyframes } from "styled-components";
|
|||||||
import { useTranslation } from "react-i18next";
|
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`
|
const rotating = keyframes`
|
||||||
from {
|
from {
|
||||||
@ -989,19 +237,23 @@ const About = ({ theme = 'light' }) => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #041c40;
|
color: #041c40;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 2px;
|
||||||
text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
|
text-shadow: 0 2px 10px rgba(4, 28, 64, 0.2);
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Subtitle = styled.div`
|
const Subtitle = styled.div`
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
color: ${props => props.$theme === 'dark' ? '#F5EEE6' : '#131313'};
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 12px auto;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.5;
|
line-height: 1;
|
||||||
|
position: relative;
|
||||||
|
top: -20px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const DetailModal = styled(motion.div)`
|
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 (
|
return (
|
||||||
<section id="about" >
|
<section id="about" >
|
||||||
<StyledWrapper $theme={theme}>
|
<StyledWrapper $theme={theme}>
|
||||||
|
|||||||
@ -130,10 +130,7 @@ emailjs
|
|||||||
initial={false}
|
initial={false}
|
||||||
/>
|
/>
|
||||||
<motion.div
|
<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>
|
||||||
<motion.div
|
<motion.div
|
||||||
@ -169,10 +166,8 @@ emailjs
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<motion.div
|
<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>
|
||||||
</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"
|
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">
|
<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]">
|
<span className="bg-clip-text text-[#063e5b] bg-gradient-to-r from-[#4a7c9b] via-[#063e5b] to-[#57acd9]">
|
||||||
{t("contact.formTitle")}
|
{t("contact.formTitle")}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -1,15 +1,13 @@
|
|||||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import "../../../../src/i18n"; // احتفظت بالاستيراد كما طلبت
|
import "../../../../src/i18n";
|
||||||
|
|
||||||
// استيراد الصور كما كانت في واجهتك
|
|
||||||
import d1 from "../../../../src/assets/Images/d1.jpeg";
|
import d1 from "../../../../src/assets/Images/d1.jpeg";
|
||||||
import d2 from "../../../../src/assets/Images/d2.jpeg";
|
import d2 from "../../../../src/assets/Images/d2.jpeg";
|
||||||
import d3 from "../../../../src/assets/Images/d3.jpeg";
|
import d3 from "../../../../src/assets/Images/d3.jpeg";
|
||||||
import d4 from "../../../../src/assets/Images/d4.jpeg";
|
import d4 from "../../../../src/assets/Images/d4.jpeg";
|
||||||
|
|
||||||
/* -------------------- ProjectsTimeline (مضمن داخل نفس الملف كما في واجهتك) -------------------- */
|
|
||||||
function ProjectsTimeline({
|
function ProjectsTimeline({
|
||||||
projects,
|
projects,
|
||||||
mainTitle = "المشاريع المنفذة",
|
mainTitle = "المشاريع المنفذة",
|
||||||
@ -130,7 +128,11 @@ function ProjectsTimeline({
|
|||||||
const scrollLeft = scrollContainer.scrollLeft;
|
const scrollLeft = scrollContainer.scrollLeft;
|
||||||
|
|
||||||
const targetScroll =
|
const targetScroll =
|
||||||
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
|
scrollLeft +
|
||||||
|
itemRect.left -
|
||||||
|
containerRect.left -
|
||||||
|
containerRect.width / 2 +
|
||||||
|
itemRect.width / 2;
|
||||||
|
|
||||||
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
||||||
setActiveItem(index);
|
setActiveItem(index);
|
||||||
@ -187,7 +189,8 @@ function ProjectsTimeline({
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearTimeout(t);
|
clearTimeout(t);
|
||||||
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
|
if (scrollContainer)
|
||||||
|
scrollContainer.removeEventListener("scroll", onScroll);
|
||||||
window.removeEventListener("resize", onResize);
|
window.removeEventListener("resize", onResize);
|
||||||
};
|
};
|
||||||
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
||||||
@ -238,25 +241,64 @@ function ProjectsTimeline({
|
|||||||
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
const mainStyle = plain
|
||||||
|
? { background: "#ffffff", paddingBottom: 0 }
|
||||||
|
: {
|
||||||
|
background:
|
||||||
|
"linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
<div
|
||||||
|
className={`projects-timeline-root w-full h-full ${
|
||||||
|
plain ? "plain-bleed" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<style>{css}</style>
|
<style>{css}</style>
|
||||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
{!plain && (
|
{!plain && (
|
||||||
<header className="text-center py-8 px-4">
|
<header className="text-center py-8 px-4">
|
||||||
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
<h1
|
||||||
|
id="main-title"
|
||||||
|
className={` ${
|
||||||
|
plain
|
||||||
|
? "text-3xl md:text-4xl font-bold text-gray-900"
|
||||||
|
: "text-5xl font-bold text-white"
|
||||||
|
} mb-3`}
|
||||||
|
style={
|
||||||
|
plain
|
||||||
|
? { textShadow: "none" }
|
||||||
|
: { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
|
||||||
|
}
|
||||||
|
>
|
||||||
{mainTitle}
|
{mainTitle}
|
||||||
</h1>
|
</h1>
|
||||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
<p
|
||||||
|
id="subtitle"
|
||||||
|
className={`${
|
||||||
|
plain
|
||||||
|
? "text-base text-gray-700"
|
||||||
|
: "text-xl text-white opacity-90"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
</header>
|
</header>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
|
<div
|
||||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
className="timeline-scroll h-full"
|
||||||
|
id="timeline-scroll"
|
||||||
|
ref={scrollRef}
|
||||||
|
aria-label="خط زمني قابل للتمرير"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="timeline-wrapper"
|
||||||
|
id="timeline-wrapper"
|
||||||
|
ref={wrapperRef}
|
||||||
|
>
|
||||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||||
{projects.map((project, idx) => (
|
{projects.map((project, idx) => (
|
||||||
<div
|
<div
|
||||||
@ -285,8 +327,24 @@ function ProjectsTimeline({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="scroll-indicator">
|
<div className="scroll-indicator">
|
||||||
<button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
|
<button
|
||||||
<button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
|
className="scroll-btn"
|
||||||
|
aria-label="السابق"
|
||||||
|
onClick={onPrev}
|
||||||
|
disabled={currentIndex === 0}
|
||||||
|
title="السابق"
|
||||||
|
>
|
||||||
|
◄
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="scroll-btn"
|
||||||
|
aria-label="التالي"
|
||||||
|
onClick={onNext}
|
||||||
|
disabled={currentIndex === projects.length - 1}
|
||||||
|
title="التالي"
|
||||||
|
>
|
||||||
|
►
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -295,8 +353,6 @@ function ProjectsTimeline({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* -------------------- نهاية ProjectsTimeline -------------------- */
|
|
||||||
|
|
||||||
const defaultProjects = [
|
const defaultProjects = [
|
||||||
{
|
{
|
||||||
year: "1999-2015",
|
year: "1999-2015",
|
||||||
@ -308,7 +364,10 @@ const defaultProjects = [
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
|
{ year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
|
||||||
{ year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
|
{
|
||||||
|
year: "2002",
|
||||||
|
items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"],
|
||||||
|
},
|
||||||
{ year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
|
{ year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
|
||||||
{
|
{
|
||||||
year: "2016",
|
year: "2016",
|
||||||
@ -317,7 +376,10 @@ const defaultProjects = [
|
|||||||
"أي أم، التايتيك - التروت، تصميم وتنفيذ",
|
"أي أم، التايتيك - التروت، تصميم وتنفيذ",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
|
{
|
||||||
|
year: "2016-2017",
|
||||||
|
items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"],
|
||||||
|
},
|
||||||
{ year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
|
{ year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
|
||||||
{
|
{
|
||||||
year: "2019",
|
year: "2019",
|
||||||
@ -327,8 +389,17 @@ const defaultProjects = [
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
|
{ year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
|
||||||
{ year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
|
{
|
||||||
{ year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
|
year: "2021",
|
||||||
|
items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
year: "2022",
|
||||||
|
items: [
|
||||||
|
"استكمال منشأ تيسير لمعمل المتحدة",
|
||||||
|
"معمل المثنى للتصنيع السريع - طرطوس",
|
||||||
|
],
|
||||||
|
},
|
||||||
{ year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
|
{ year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -342,29 +413,47 @@ export default function DepartmentDetail() {
|
|||||||
{ id: 3, title: t("department.buttons.works"), key: "works" },
|
{ id: 3, title: t("department.buttons.works"), key: "works" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const expertiseItems = t("department.expertiseItems", { returnObjects: true }) || [
|
const expertiseItemsRaw = t("department.expertiseItems", {
|
||||||
"دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
|
returnObjects: true,
|
||||||
"الدراسات الهندسية الأولية والنهائية والتفصيلية",
|
});
|
||||||
"تصميم المخططات التنفيذية",
|
const expertiseItems = Array.isArray(expertiseItemsRaw)
|
||||||
"تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية",
|
? expertiseItemsRaw
|
||||||
"تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة",
|
: [
|
||||||
"تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم",
|
"دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
|
||||||
"الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية",
|
"الدراسات الهندسية الأولية والنهائية والتفصيلية",
|
||||||
];
|
"تصميم المخططات التنفيذية",
|
||||||
|
"تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية",
|
||||||
|
"تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة",
|
||||||
|
"تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم",
|
||||||
|
"الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية",
|
||||||
|
];
|
||||||
|
|
||||||
const servicesItems = t("department.servicesItems", { returnObjects: true }) || [
|
const servicesItemsRaw = t("department.servicesItems", {
|
||||||
"الصيانة الدورية والوقائية.",
|
returnObjects: true,
|
||||||
"الصيانة الطارئة ومعالجة الأعطال.",
|
});
|
||||||
"إعادة التأهيل والتحديث الفني للمنشآت.",
|
const servicesItems = Array.isArray(servicesItemsRaw)
|
||||||
"فحص وتقييم الحالة الفنية للتجهيزات والآلات.",
|
? servicesItemsRaw
|
||||||
"أعمال التفتيش الفني والهندسي وفق المعايير العالمية.",
|
: [
|
||||||
"رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
|
"الصيانة الدورية والوقائية.",
|
||||||
];
|
"الصيانة الطارئة ومعالجة الأعطال.",
|
||||||
|
"إعادة التأهيل والتحديث الفني للمنشآت.",
|
||||||
|
"فحص وتقييم الحالة الفنية للتجهيزات والآلات.",
|
||||||
|
"أعمال التفتيش الفني والهندسي وفق المعايير العالمية.",
|
||||||
|
"رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
|
||||||
|
];
|
||||||
|
|
||||||
const defaultProjectsTranslated = t("department.defaultProjects", { returnObjects: true }) || defaultProjects;
|
const defaultProjectsTranslated =
|
||||||
|
t("department.defaultProjects", { returnObjects: true }) || defaultProjects;
|
||||||
|
|
||||||
const displayItems = active === "services" ? servicesItems : expertiseItems;
|
const displayItems = active === "services" ? servicesItems : expertiseItems;
|
||||||
const heroImage = active === "expertise" ? d2 : active === "services" ? d3 : active === "works" ? d4 : d1;
|
const heroImage =
|
||||||
|
active === "expertise"
|
||||||
|
? d2
|
||||||
|
: active === "services"
|
||||||
|
? d3
|
||||||
|
: active === "works"
|
||||||
|
? d4
|
||||||
|
: d1;
|
||||||
|
|
||||||
const handleButtonClick = (key) => {
|
const handleButtonClick = (key) => {
|
||||||
setActive((prev) => (prev === key ? null : key));
|
setActive((prev) => (prev === key ? null : key));
|
||||||
@ -400,12 +489,21 @@ export default function DepartmentDetail() {
|
|||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{active === "expertise" ? (
|
{active === "expertise" ? (
|
||||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
<motion.div
|
||||||
|
key="expertise-title"
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="text-white max-w-4xl"
|
||||||
|
>
|
||||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
||||||
{t("department.hero.expertiseBadge") || "اختصاص القسم"}
|
{t("department.hero.expertiseBadge") ||
|
||||||
|
"اختصاص القسم"}
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
||||||
{t("department.hero.expertiseTitle") || "حلول متكاملة للمنشآت الصناعية"}
|
{t("department.hero.expertiseTitle") ||
|
||||||
|
"حلول متكاملة للمنشآت الصناعية"}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||||
{t("department.hero.expertiseSubtitle") ||
|
{t("department.hero.expertiseSubtitle") ||
|
||||||
@ -413,19 +511,35 @@ export default function DepartmentDetail() {
|
|||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : active === "services" ? (
|
) : active === "services" ? (
|
||||||
<motion.div key="services-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
<motion.div
|
||||||
|
key="services-title"
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="text-white max-w-4xl"
|
||||||
|
>
|
||||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
||||||
{t("department.hero.servicesBadge") || "خدمات القسم"}
|
{t("department.hero.servicesBadge") || "خدمات القسم"}
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
||||||
{t("department.hero.servicesTitle") || "خدمات الصيانة للمنشآت وخطوط الإنتاج"}
|
{t("department.hero.servicesTitle") ||
|
||||||
|
"خدمات الصيانة للمنشآت وخطوط الإنتاج"}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||||
{t("department.hero.servicesSubtitle") || "يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"}
|
{t("department.hero.servicesSubtitle") ||
|
||||||
|
"يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : active === "works" ? (
|
) : active === "works" ? (
|
||||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
<motion.div
|
||||||
|
key="works-title"
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="text-white max-w-4xl"
|
||||||
|
>
|
||||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
||||||
{t("department.hero.worksBadge") || "الأعمال المنفذة"}
|
{t("department.hero.worksBadge") || "الأعمال المنفذة"}
|
||||||
</div>
|
</div>
|
||||||
@ -433,13 +547,22 @@ export default function DepartmentDetail() {
|
|||||||
{t("department.hero.worksTitle") || "الأعمال المنفذة"}
|
{t("department.hero.worksTitle") || "الأعمال المنفذة"}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||||
{t("department.hero.worksSubtitle") || "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."}
|
{t("department.hero.worksSubtitle") ||
|
||||||
|
"عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : (
|
) : (
|
||||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
<motion.div
|
||||||
|
key="default-title"
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="text-white max-w-4xl"
|
||||||
|
>
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
|
||||||
{t("department.sectionTitle") || "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"}
|
{t("department.sectionTitle") ||
|
||||||
|
"قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"}
|
||||||
</h2>
|
</h2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
@ -447,7 +570,10 @@ export default function DepartmentDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
|
<div
|
||||||
|
className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
|
||||||
|
style={{ zIndex: 99999 }}
|
||||||
|
>
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{!active && (
|
{!active && (
|
||||||
<motion.div
|
<motion.div
|
||||||
@ -465,7 +591,11 @@ export default function DepartmentDetail() {
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
whileHover={{
|
||||||
|
scale: 1.03,
|
||||||
|
y: -6,
|
||||||
|
transition: { duration: 0.2 },
|
||||||
|
}}
|
||||||
whileTap={{ scale: 0.97 }}
|
whileTap={{ scale: 0.97 }}
|
||||||
onClick={() => handleButtonClick(b.key)}
|
onClick={() => handleButtonClick(b.key)}
|
||||||
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
|
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
|
||||||
@ -477,12 +607,24 @@ export default function DepartmentDetail() {
|
|||||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
||||||
{b.id}
|
{b.id}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
|
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">
|
||||||
|
{b.title}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
||||||
<span>{t("department.clickForDetails")}</span>
|
<span>{t("department.clickForDetails")}</span>
|
||||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -495,8 +637,16 @@ export default function DepartmentDetail() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 z-10">
|
<div className="absolute bottom-0 left-0 right-0 z-10">
|
||||||
<svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
<svg
|
||||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
className="w-full h-12 sm:h-16 md:h-24"
|
||||||
|
viewBox="0 0 1200 120"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
|
||||||
|
fill="#ffffff"
|
||||||
|
opacity="1"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@ -529,11 +679,25 @@ export default function DepartmentDetail() {
|
|||||||
{b.id}
|
{b.id}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
|
<h3 className="text-sm font-bold text-gray-800">
|
||||||
<p className="text-xs text-gray-600 mt-1">{t("department.clickForDetails")}</p>
|
{b.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-600 mt-1">
|
||||||
|
{t("department.clickForDetails")}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
className="w-5 h-5 text-amber-500"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
))}
|
))}
|
||||||
@ -546,25 +710,92 @@ export default function DepartmentDetail() {
|
|||||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{!active ? (
|
{!active ? (
|
||||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
<motion.div
|
||||||
|
key="buttons-spacer"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.25 }}
|
||||||
|
className="h-0"
|
||||||
|
/>
|
||||||
) : active === "works" ? (
|
) : active === "works" ? (
|
||||||
<motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
<motion.div
|
||||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
|
key="timeline-view"
|
||||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.45 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.15, duration: 0.45 }}
|
||||||
|
onClick={() => setActive(null)}
|
||||||
|
whileHover={{ x: 8 }}
|
||||||
|
className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>{t("department.backToMenu")}</span>
|
<span>{t("department.backToMenu")}</span>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
|
||||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
<div
|
||||||
<ProjectsTimeline projects={defaultProjectsTranslated} plain={true} />
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
left: "50%",
|
||||||
|
right: "50%",
|
||||||
|
marginLeft: "-50vw",
|
||||||
|
marginRight: "-50vw",
|
||||||
|
width: "100vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProjectsTimeline
|
||||||
|
projects={defaultProjectsTranslated}
|
||||||
|
plain={true}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : (
|
) : (
|
||||||
<motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
<motion.div
|
||||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
|
key="details-view"
|
||||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -20 }}
|
||||||
|
transition={{ duration: 0.45 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.08, duration: 0.45 }}
|
||||||
|
onClick={() => setActive(null)}
|
||||||
|
whileHover={{ x: 8 }}
|
||||||
|
className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>{t("department.backToMenu")}</span>
|
<span>{t("department.backToMenu")}</span>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
@ -581,19 +812,51 @@ export default function DepartmentDetail() {
|
|||||||
>
|
>
|
||||||
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
||||||
<div className="relative flex-shrink-0">
|
<div className="relative flex-shrink-0">
|
||||||
<motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
|
<motion.div
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/></svg>
|
whileHover={{ rotate: 360, scale: 1.08 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 pt-1">
|
<div className="flex-1 pt-1">
|
||||||
<p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{text}</p>
|
<p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">
|
||||||
|
{text}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
<motion.div
|
||||||
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, x: -8 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
whileHover={{ opacity: 1, x: 0 }}
|
||||||
|
className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 sm:w-6 sm:h-6"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
@ -601,11 +864,21 @@ export default function DepartmentDetail() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 0.6, duration: 0.45 }}
|
||||||
|
className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center"
|
||||||
|
>
|
||||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||||
<span className="text-xs sm:text-sm font-medium">Professional integrated services</span>
|
<span className="text-xs sm:text-sm font-medium">
|
||||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
Professional integrated services
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
|
||||||
|
style={{ animationDelay: "0.5s" }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import d19 from "../../../../src/assets/Images/d19.jpeg";
|
import d19 from "../../../../src/assets/Images/d19.jpeg";
|
||||||
@ -15,7 +15,7 @@ function ProjectsTimeline({
|
|||||||
dir = "rtl",
|
dir = "rtl",
|
||||||
scrollLabel = "خط زمني قابل للتمرير",
|
scrollLabel = "خط زمني قابل للتمرير",
|
||||||
prevLabel = "السابق",
|
prevLabel = "السابق",
|
||||||
nextLabel = "التالي"
|
nextLabel = "التالي",
|
||||||
}) {
|
}) {
|
||||||
const wrapperRef = useRef(null);
|
const wrapperRef = useRef(null);
|
||||||
const scrollRef = useRef(null);
|
const scrollRef = useRef(null);
|
||||||
@ -131,7 +131,11 @@ function ProjectsTimeline({
|
|||||||
const scrollLeft = scrollContainer.scrollLeft;
|
const scrollLeft = scrollContainer.scrollLeft;
|
||||||
|
|
||||||
const targetScroll =
|
const targetScroll =
|
||||||
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
|
scrollLeft +
|
||||||
|
itemRect.left -
|
||||||
|
containerRect.left -
|
||||||
|
containerRect.width / 2 +
|
||||||
|
itemRect.width / 2;
|
||||||
|
|
||||||
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
||||||
setActiveItem(index);
|
setActiveItem(index);
|
||||||
@ -188,7 +192,8 @@ function ProjectsTimeline({
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearTimeout(t);
|
clearTimeout(t);
|
||||||
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
|
if (scrollContainer)
|
||||||
|
scrollContainer.removeEventListener("scroll", onScroll);
|
||||||
window.removeEventListener("resize", onResize);
|
window.removeEventListener("resize", onResize);
|
||||||
};
|
};
|
||||||
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
||||||
@ -253,25 +258,65 @@ function ProjectsTimeline({
|
|||||||
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
const mainStyle = plain
|
||||||
|
? { background: "#ffffff", paddingBottom: 0 }
|
||||||
|
: {
|
||||||
|
background:
|
||||||
|
"linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`} dir={dir}>
|
<div
|
||||||
|
className={`projects-timeline-root w-full h-full ${
|
||||||
|
plain ? "plain-bleed" : ""
|
||||||
|
}`}
|
||||||
|
dir={dir}
|
||||||
|
>
|
||||||
<style>{css}</style>
|
<style>{css}</style>
|
||||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
{!plain && (
|
{!plain && (
|
||||||
<header className="text-center py-8 px-4">
|
<header className="text-center py-8 px-4">
|
||||||
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
<h1
|
||||||
|
id="main-title"
|
||||||
|
className={` ${
|
||||||
|
plain
|
||||||
|
? "text-3xl md:text-4xl font-bold text-gray-900"
|
||||||
|
: "text-5xl font-bold text-white"
|
||||||
|
} mb-3`}
|
||||||
|
style={
|
||||||
|
plain
|
||||||
|
? { textShadow: "none" }
|
||||||
|
: { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
|
||||||
|
}
|
||||||
|
>
|
||||||
{mainTitle}
|
{mainTitle}
|
||||||
</h1>
|
</h1>
|
||||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
<p
|
||||||
|
id="subtitle"
|
||||||
|
className={`${
|
||||||
|
plain
|
||||||
|
? "text-base text-gray-700"
|
||||||
|
: "text-xl text-white opacity-90"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
</header>
|
</header>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label={scrollLabel}>
|
<div
|
||||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
className="timeline-scroll h-full"
|
||||||
|
id="timeline-scroll"
|
||||||
|
ref={scrollRef}
|
||||||
|
aria-label={scrollLabel}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="timeline-wrapper"
|
||||||
|
id="timeline-wrapper"
|
||||||
|
ref={wrapperRef}
|
||||||
|
>
|
||||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||||
{projects.map((project, idx) => (
|
{projects.map((project, idx) => (
|
||||||
<div
|
<div
|
||||||
@ -300,8 +345,24 @@ function ProjectsTimeline({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="scroll-indicator">
|
<div className="scroll-indicator">
|
||||||
<button className="scroll-btn" aria-label={prevLabel} onClick={onPrev} disabled={currentIndex === 0} title={prevLabel}>◄</button>
|
<button
|
||||||
<button className="scroll-btn" aria-label={nextLabel} onClick={onNext} disabled={currentIndex === projects.length - 1} title={nextLabel}>►</button>
|
className="scroll-btn"
|
||||||
|
aria-label={prevLabel}
|
||||||
|
onClick={onPrev}
|
||||||
|
disabled={currentIndex === 0}
|
||||||
|
title={prevLabel}
|
||||||
|
>
|
||||||
|
◄
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="scroll-btn"
|
||||||
|
aria-label={nextLabel}
|
||||||
|
onClick={onNext}
|
||||||
|
disabled={currentIndex === projects.length - 1}
|
||||||
|
title={nextLabel}
|
||||||
|
>
|
||||||
|
►
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -319,19 +380,53 @@ export default function DepartmentDetail6() {
|
|||||||
const cycleImgs = [d28, d27, d29];
|
const cycleImgs = [d28, d27, d29];
|
||||||
const [cycleIndex, setCycleIndex] = useState(0);
|
const [cycleIndex, setCycleIndex] = useState(0);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const tInterval = setInterval(() => setCycleIndex((i) => (i + 1) % cycleImgs.length), 3000);
|
const tInterval = setInterval(
|
||||||
|
() => setCycleIndex((i) => (i + 1) % cycleImgs.length),
|
||||||
|
3000
|
||||||
|
);
|
||||||
return () => clearInterval(tInterval);
|
return () => clearInterval(tInterval);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// buttons from translations (array)
|
// buttons from translations (array)
|
||||||
const buttons = t("departmentDetail6.buttons", { returnObjects: true });
|
const buttons = [
|
||||||
|
{ id: 1, title: t("departmentDetail6.buttons.1"), key: "expertise" },
|
||||||
|
{ id: 3, title: t("departmentDetail6.buttons.3"), key: "works" },
|
||||||
|
];
|
||||||
|
|
||||||
// card groups from translations
|
// card groups from translations
|
||||||
const cardGroups = t("departmentDetail6.cardGroups", { returnObjects: true });
|
const cardGroupsRaw = t("departmentDetail6.cardGroups", {
|
||||||
|
returnObjects: true,
|
||||||
|
});
|
||||||
|
|
||||||
const projectsTimeline = t("departmentDetail6.projectsTimeline.defaultProjects", { returnObjects: true });
|
const expertiseItemsRaw = t("departmentDetail6.expertiseItems", {
|
||||||
|
returnObjects: true,
|
||||||
|
});
|
||||||
|
const validExpertiseItems = Array.isArray(expertiseItemsRaw)
|
||||||
|
? expertiseItemsRaw
|
||||||
|
: [];
|
||||||
|
|
||||||
const heroImage = active === "expertise" ? cycleImgs[cycleIndex] : active === "works" ? d30 : d19;
|
const cardGroups = Array.isArray(cardGroupsRaw)
|
||||||
|
? cardGroupsRaw
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
title:
|
||||||
|
t("departmentDetail6.hero.expertiseBadge") ||
|
||||||
|
"Department Expertise",
|
||||||
|
items: validExpertiseItems,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const projectsTimeline = t(
|
||||||
|
"departmentDetail6.projectsTimeline.defaultProjects",
|
||||||
|
{ returnObjects: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
const heroImage =
|
||||||
|
active === "expertise"
|
||||||
|
? cycleImgs[cycleIndex]
|
||||||
|
: active === "works"
|
||||||
|
? d30
|
||||||
|
: d19;
|
||||||
|
|
||||||
const handleButtonClick = (key) => {
|
const handleButtonClick = (key) => {
|
||||||
setActive((prev) => (prev === key ? null : key));
|
setActive((prev) => (prev === key ? null : key));
|
||||||
@ -344,7 +439,10 @@ export default function DepartmentDetail6() {
|
|||||||
const backToMenu = t("departmentDetail6.backToMenu");
|
const backToMenu = t("departmentDetail6.backToMenu");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div dir={isRTL ? "rtl" : "ltr"} className="w-full min-h-screen bg-white pb-12">
|
<div
|
||||||
|
dir={isRTL ? "rtl" : "ltr"}
|
||||||
|
className="w-full min-h-screen bg-white pb-12"
|
||||||
|
>
|
||||||
<section className="relative">
|
<section className="relative">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
@ -354,7 +452,11 @@ export default function DepartmentDetail6() {
|
|||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
exit={{ opacity: 0, scale: 0.98 }}
|
exit={{ opacity: 0, scale: 0.98 }}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.6 }}
|
||||||
className={`relative ${active ? 'h-80 sm:h-96 md:h-[540px] lg:h-[680px]' : 'h-72 sm:h-80 md:h-[480px] lg:h-[580px]'} overflow-visible`}
|
className={`relative ${
|
||||||
|
active
|
||||||
|
? "h-80 sm:h-96 md:h-[540px] lg:h-[680px]"
|
||||||
|
: "h-72 sm:h-80 md:h-[480px] lg:h-[580px]"
|
||||||
|
} overflow-visible`}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={heroImage}
|
src={heroImage}
|
||||||
@ -373,27 +475,71 @@ export default function DepartmentDetail6() {
|
|||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{active === "expertise" ? (
|
{active === "expertise" ? (
|
||||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
<motion.div
|
||||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail6.hero.expertiseBadge")}</div>
|
key="expertise-title"
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail6.hero.expertiseTitle")}</h2>
|
initial={{ opacity: 0, x: -50 }}
|
||||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail6.hero.expertiseSubtitle")}</p>
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={`text-white max-w-4xl ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
||||||
|
{t("departmentDetail6.hero.expertiseBadge")}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
||||||
|
{t("departmentDetail6.hero.expertiseTitle")}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||||
|
{t("departmentDetail6.hero.expertiseSubtitle")}
|
||||||
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : active === "works" ? (
|
) : active === "works" ? (
|
||||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
<motion.div
|
||||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{t("departmentDetail6.hero.worksBadge")}</div>
|
key="works-title"
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{t("departmentDetail6.hero.worksTitle")}</h2>
|
initial={{ opacity: 0, x: -50 }}
|
||||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail6.hero.worksSubtitle")}</p>
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={`text-white max-w-4xl ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
||||||
|
{t("departmentDetail6.hero.worksBadge")}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
||||||
|
{t("departmentDetail6.hero.worksTitle")}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||||
|
{t("departmentDetail6.hero.worksSubtitle")}
|
||||||
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : (
|
) : (
|
||||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
<motion.div
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail6.hero.defaultTitle")}</h2>
|
key="default-title"
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={`text-white max-w-4xl ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
|
||||||
|
{t("departmentDetail6.hero.defaultTitle")}
|
||||||
|
</h2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
|
<div
|
||||||
|
className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
|
||||||
|
style={{ zIndex: 99999 }}
|
||||||
|
>
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{!active && (
|
{!active && (
|
||||||
<motion.div
|
<motion.div
|
||||||
@ -411,10 +557,16 @@ export default function DepartmentDetail6() {
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
whileHover={{
|
||||||
|
scale: 1.03,
|
||||||
|
y: -6,
|
||||||
|
transition: { duration: 0.2 },
|
||||||
|
}}
|
||||||
whileTap={{ scale: 0.97 }}
|
whileTap={{ scale: 0.97 }}
|
||||||
onClick={() => handleButtonClick(b.key)}
|
onClick={() => handleButtonClick(b.key)}
|
||||||
className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
|
className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
|
||||||
>
|
>
|
||||||
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||||
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
||||||
@ -424,12 +576,24 @@ export default function DepartmentDetail6() {
|
|||||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
||||||
{b.id}
|
{b.id}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
|
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">
|
||||||
|
{b.title}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
||||||
<span>{ui.clickToView}</span>
|
<span>{ui.clickToView}</span>
|
||||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -442,8 +606,16 @@ export default function DepartmentDetail6() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 z-10">
|
<div className="absolute bottom-0 left-0 right-0 z-10">
|
||||||
<svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
<svg
|
||||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
className="w-full h-12 sm:h-16 md:h-24"
|
||||||
|
viewBox="0 0 1200 120"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
|
||||||
|
fill="#ffffff"
|
||||||
|
opacity="1"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@ -470,17 +642,33 @@ export default function DepartmentDetail6() {
|
|||||||
transition={{ delay: index * 0.05, duration: 0.35 }}
|
transition={{ delay: index * 0.05, duration: 0.35 }}
|
||||||
whileHover={{ scale: 1.02 }}
|
whileHover={{ scale: 1.02 }}
|
||||||
onClick={() => handleButtonClick(b.key)}
|
onClick={() => handleButtonClick(b.key)}
|
||||||
className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
|
className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
|
||||||
>
|
>
|
||||||
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
|
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
|
||||||
{b.id}
|
{b.id}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
|
<h3 className="text-sm font-bold text-gray-800">
|
||||||
<p className="text-xs text-gray-600 mt-1">{ui.clickToView}</p>
|
{b.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-600 mt-1">
|
||||||
|
{ui.clickToView}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
className="w-5 h-5 text-amber-500"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
))}
|
))}
|
||||||
@ -493,21 +681,63 @@ export default function DepartmentDetail6() {
|
|||||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{!active ? (
|
{!active ? (
|
||||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
<motion.div
|
||||||
|
key="buttons-spacer"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.25 }}
|
||||||
|
className="h-0"
|
||||||
|
/>
|
||||||
) : active === "works" ? (
|
) : active === "works" ? (
|
||||||
<motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
<motion.div
|
||||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
|
key="timeline-view"
|
||||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.45 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.15, duration: 0.45 }}
|
||||||
|
onClick={() => setActive(null)}
|
||||||
|
whileHover={{ x: 8 }}
|
||||||
|
className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
|
||||||
|
isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>{backToMenu}</span>
|
<span>{backToMenu}</span>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
|
||||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
left: "50%",
|
||||||
|
right: "50%",
|
||||||
|
marginLeft: "-50vw",
|
||||||
|
marginRight: "-50vw",
|
||||||
|
width: "100vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<ProjectsTimeline
|
<ProjectsTimeline
|
||||||
projects={projectsTimeline}
|
projects={projectsTimeline}
|
||||||
plain={true}
|
plain={true}
|
||||||
dir={isRTL ? 'rtl' : 'ltr'}
|
dir={isRTL ? "rtl" : "ltr"}
|
||||||
mainTitle={t("departmentDetail6.hero.worksTitle")}
|
mainTitle={t("departmentDetail6.hero.worksTitle")}
|
||||||
subtitle={t("departmentDetail6.hero.worksSubtitle")}
|
subtitle={t("departmentDetail6.hero.worksSubtitle")}
|
||||||
scrollLabel={t("departmentDetail6.scroll.ariaLabel")}
|
scrollLabel={t("departmentDetail6.scroll.ariaLabel")}
|
||||||
@ -517,36 +747,102 @@ export default function DepartmentDetail6() {
|
|||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : (
|
) : (
|
||||||
<motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
<motion.div
|
||||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
|
key="details-view"
|
||||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -20 }}
|
||||||
|
transition={{ duration: 0.45 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.08, duration: 0.45 }}
|
||||||
|
onClick={() => setActive(null)}
|
||||||
|
whileHover={{ x: 8 }}
|
||||||
|
className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
|
||||||
|
isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>{backToMenu}</span>
|
<span>{backToMenu}</span>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-6">
|
<div className="grid grid-cols-1 gap-6">
|
||||||
{cardGroups.map((group, gIndex) => (
|
{cardGroups.map((group, gIndex) => (
|
||||||
<div key={gIndex} className="bg-white rounded-2xl p-4 sm:p-6 shadow-lg border border-gray-100">
|
<div
|
||||||
<h3 className="text-lg font-bold text-gray-800 mb-3">{group.title}</h3>
|
key={gIndex}
|
||||||
|
className="bg-white rounded-2xl p-4 sm:p-6 shadow-lg border border-gray-100"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-bold text-gray-800 mb-3">
|
||||||
|
{group.title}
|
||||||
|
</h3>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
{group.items.map((text, idx) => (
|
{group.items.map((text, idx) => (
|
||||||
<motion.div key={idx} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.2 }} transition={{ delay: idx * 0.06, duration: 0.4 }} className="relative group">
|
<motion.div
|
||||||
|
key={idx}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, amount: 0.2 }}
|
||||||
|
transition={{ delay: idx * 0.06, duration: 0.4 }}
|
||||||
|
className="relative group"
|
||||||
|
>
|
||||||
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
||||||
<div className="relative flex-shrink-0">
|
<div className="relative flex-shrink-0">
|
||||||
<motion.div whileHover={{ rotate: 360, scale: 1.03 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
|
<motion.div
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>
|
whileHover={{ rotate: 360, scale: 1.03 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M5 13l4 4L19 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 pt-1">
|
<div className="flex-1 pt-1">
|
||||||
<p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium">{text}</p>
|
<p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium">
|
||||||
|
{text}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
<div className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
||||||
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
className="w-4 h-4 sm:w-6 sm:h-6"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -557,11 +853,21 @@ export default function DepartmentDetail6() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 0.6, duration: 0.45 }}
|
||||||
|
className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center"
|
||||||
|
>
|
||||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||||
<span className="text-xs sm:text-sm font-medium">{t("departmentDetail6.ui.servicesProfessional")}</span>
|
<span className="text-xs sm:text-sm font-medium">
|
||||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
{t("departmentDetail6.ui.servicesProfessional")}
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
|
||||||
|
style={{ animationDelay: "0.5s" }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@ -320,9 +320,13 @@ export default function DepartmentDetail7() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// جلب الأزرار/البيانات من الترجمة
|
// جلب الأزرار/البيانات من الترجمة
|
||||||
const buttons = t("departmentDetail7.buttons", { returnObjects: true });
|
const buttons = [
|
||||||
|
{ id: 1, title: t("departmentDetail7.buttons.1"), key: "expertise" },
|
||||||
|
{ id: 2, title: t("departmentDetail7.buttons.2"), key: "works" },
|
||||||
|
];
|
||||||
const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true });
|
const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true });
|
||||||
const expertiseTexts = t("departmentDetail7.expertiseItems", { returnObjects: true });
|
const expertiseTextsRaw = t("departmentDetail7.expertiseItems", { returnObjects: true });
|
||||||
|
const expertiseTexts = Array.isArray(expertiseTextsRaw) ? expertiseTextsRaw : [];
|
||||||
const hero = t("departmentDetail7.hero", { returnObjects: true });
|
const hero = t("departmentDetail7.hero", { returnObjects: true });
|
||||||
const ui = t("departmentDetail7.ui", { returnObjects: true });
|
const ui = t("departmentDetail7.ui", { returnObjects: true });
|
||||||
const backToMenu = t("departmentDetail7.backToMenu");
|
const backToMenu = t("departmentDetail7.backToMenu");
|
||||||
|
|||||||
@ -15,7 +15,7 @@ function ProjectsTimeline({
|
|||||||
dir = "rtl",
|
dir = "rtl",
|
||||||
scrollLabel = "خط زمني قابل للتمرير",
|
scrollLabel = "خط زمني قابل للتمرير",
|
||||||
prevLabel = "السابق",
|
prevLabel = "السابق",
|
||||||
nextLabel = "التالي"
|
nextLabel = "التالي",
|
||||||
}) {
|
}) {
|
||||||
const wrapperRef = useRef(null);
|
const wrapperRef = useRef(null);
|
||||||
const scrollRef = useRef(null);
|
const scrollRef = useRef(null);
|
||||||
@ -25,7 +25,9 @@ function ProjectsTimeline({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setItemsRefs((r) => {
|
setItemsRefs((r) => {
|
||||||
const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
|
const arr = Array(projects.length)
|
||||||
|
.fill()
|
||||||
|
.map((_, i) => r[i] || React.createRef());
|
||||||
return arr;
|
return arr;
|
||||||
});
|
});
|
||||||
}, [projects.length]);
|
}, [projects.length]);
|
||||||
@ -129,7 +131,11 @@ function ProjectsTimeline({
|
|||||||
const scrollLeft = scrollContainer.scrollLeft;
|
const scrollLeft = scrollContainer.scrollLeft;
|
||||||
|
|
||||||
const targetScroll =
|
const targetScroll =
|
||||||
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
|
scrollLeft +
|
||||||
|
itemRect.left -
|
||||||
|
containerRect.left -
|
||||||
|
containerRect.width / 2 +
|
||||||
|
itemRect.width / 2;
|
||||||
|
|
||||||
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
||||||
setActiveItem(index);
|
setActiveItem(index);
|
||||||
@ -186,7 +192,8 @@ function ProjectsTimeline({
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearTimeout(t);
|
clearTimeout(t);
|
||||||
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
|
if (scrollContainer)
|
||||||
|
scrollContainer.removeEventListener("scroll", onScroll);
|
||||||
window.removeEventListener("resize", onResize);
|
window.removeEventListener("resize", onResize);
|
||||||
};
|
};
|
||||||
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
||||||
@ -250,25 +257,65 @@ function ProjectsTimeline({
|
|||||||
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
const mainStyle = plain
|
||||||
|
? { background: "#ffffff", paddingBottom: 0 }
|
||||||
|
: {
|
||||||
|
background:
|
||||||
|
"linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`} dir={dir}>
|
<div
|
||||||
|
className={`projects-timeline-root w-full h-full ${
|
||||||
|
plain ? "plain-bleed" : ""
|
||||||
|
}`}
|
||||||
|
dir={dir}
|
||||||
|
>
|
||||||
<style>{css}</style>
|
<style>{css}</style>
|
||||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
{!plain && (
|
{!plain && (
|
||||||
<header className="text-center py-8 px-4">
|
<header className="text-center py-8 px-4">
|
||||||
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
<h1
|
||||||
|
id="main-title"
|
||||||
|
className={` ${
|
||||||
|
plain
|
||||||
|
? "text-3xl md:text-4xl font-bold text-gray-900"
|
||||||
|
: "text-5xl font-bold text-white"
|
||||||
|
} mb-3`}
|
||||||
|
style={
|
||||||
|
plain
|
||||||
|
? { textShadow: "none" }
|
||||||
|
: { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }
|
||||||
|
}
|
||||||
|
>
|
||||||
{mainTitle}
|
{mainTitle}
|
||||||
</h1>
|
</h1>
|
||||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
<p
|
||||||
|
id="subtitle"
|
||||||
|
className={`${
|
||||||
|
plain
|
||||||
|
? "text-base text-gray-700"
|
||||||
|
: "text-xl text-white opacity-90"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{subtitle}
|
||||||
|
</p>
|
||||||
</header>
|
</header>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex-1 relative">
|
<div className="flex-1 relative">
|
||||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label={scrollLabel}>
|
<div
|
||||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
className="timeline-scroll h-full"
|
||||||
|
id="timeline-scroll"
|
||||||
|
ref={scrollRef}
|
||||||
|
aria-label={scrollLabel}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="timeline-wrapper"
|
||||||
|
id="timeline-wrapper"
|
||||||
|
ref={wrapperRef}
|
||||||
|
>
|
||||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||||
{projects.map((project, idx) => (
|
{projects.map((project, idx) => (
|
||||||
<div
|
<div
|
||||||
@ -297,8 +344,24 @@ function ProjectsTimeline({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="scroll-indicator">
|
<div className="scroll-indicator">
|
||||||
<button className="scroll-btn" aria-label={prevLabel} onClick={onPrev} disabled={currentIndex === 0} title={prevLabel}>◄</button>
|
<button
|
||||||
<button className="scroll-btn" aria-label={nextLabel} onClick={onNext} disabled={currentIndex === projects.length - 1} title={nextLabel}>►</button>
|
className="scroll-btn"
|
||||||
|
aria-label={prevLabel}
|
||||||
|
onClick={onPrev}
|
||||||
|
disabled={currentIndex === 0}
|
||||||
|
title={prevLabel}
|
||||||
|
>
|
||||||
|
◄
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="scroll-btn"
|
||||||
|
aria-label={nextLabel}
|
||||||
|
onClick={onNext}
|
||||||
|
disabled={currentIndex === projects.length - 1}
|
||||||
|
title={nextLabel}
|
||||||
|
>
|
||||||
|
►
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -315,44 +378,110 @@ export default function DepartmentDetail8() {
|
|||||||
const [active, setActive] = useState(null);
|
const [active, setActive] = useState(null);
|
||||||
|
|
||||||
const hero = t("departmentDetail8.hero", { returnObjects: true });
|
const hero = t("departmentDetail8.hero", { returnObjects: true });
|
||||||
const buttons = t("departmentDetail8.buttons", { returnObjects: true });
|
|
||||||
const projectsTimeline = t("departmentDetail8.projectsTimeline.defaultProjects", { returnObjects: true });
|
const buttons = [
|
||||||
const expertiseTexts = t("departmentDetail8.expertiseItems", { returnObjects: true });
|
{ id: 1, title: t("departmentDetail8.buttons.1"), key: "expertise" },
|
||||||
|
{ id: 2, title: t("departmentDetail8.buttons.2"), key: "works" },
|
||||||
|
];
|
||||||
|
const projectsTimeline = t(
|
||||||
|
"departmentDetail8.projectsTimeline.defaultProjects",
|
||||||
|
{ returnObjects: true }
|
||||||
|
);
|
||||||
|
const expertiseTextsRaw = t("departmentDetail8.expertiseItems", {
|
||||||
|
returnObjects: true,
|
||||||
|
});
|
||||||
|
const expertiseTexts = Array.isArray(expertiseTextsRaw)
|
||||||
|
? expertiseTextsRaw
|
||||||
|
: [];
|
||||||
const ui = t("departmentDetail8.ui", { returnObjects: true });
|
const ui = t("departmentDetail8.ui", { returnObjects: true });
|
||||||
const backToMenu = t("departmentDetail8.backToMenu");
|
const backToMenu = t("departmentDetail8.backToMenu");
|
||||||
const scrollLabels = t("departmentDetail8.scroll", { returnObjects: true });
|
const scrollLabels = t("departmentDetail8.scroll", { returnObjects: true });
|
||||||
|
|
||||||
const icons = [
|
const icons = [
|
||||||
(
|
<svg
|
||||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i1">
|
className="w-7 h-7"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 7h13l3 3v7a1 1 0 01-1 1h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4a1 1 0 01-1-1V7zM16 7v4" />
|
fill="none"
|
||||||
</svg>
|
stroke="currentColor"
|
||||||
),
|
viewBox="0 0 24 24"
|
||||||
(
|
key="i1"
|
||||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i2">
|
>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M4 7h4l4 5 4-5h4M5 19a2 2 0 104 0 2 2 0 00-4 0zm10 0a2 2 0 104 0 2 2 0 00-4 0z" />
|
<path
|
||||||
</svg>
|
strokeLinecap="round"
|
||||||
),
|
strokeLinejoin="round"
|
||||||
(
|
strokeWidth="2.2"
|
||||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i3">
|
d="M3 7h13l3 3v7a1 1 0 01-1 1h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4a1 1 0 01-1-1V7zM16 7v4"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 7l9-4 9 4-9 4-9-4zM21 8v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8" />
|
/>
|
||||||
</svg>
|
</svg>,
|
||||||
),
|
<svg
|
||||||
(
|
className="w-7 h-7"
|
||||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i4">
|
fill="none"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 12l4 4 8-8 4 4M14 7l3-3M7 17l-3 3" />
|
stroke="currentColor"
|
||||||
</svg>
|
viewBox="0 0 24 24"
|
||||||
),
|
key="i2"
|
||||||
(
|
>
|
||||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i5">
|
<path
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 9l9-5 9 5v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM9 22V12" />
|
strokeLinecap="round"
|
||||||
</svg>
|
strokeLinejoin="round"
|
||||||
),
|
strokeWidth="2.2"
|
||||||
(
|
d="M4 7h4l4 5 4-5h4M5 19a2 2 0 104 0 2 2 0 00-4 0zm10 0a2 2 0 104 0 2 2 0 00-4 0z"
|
||||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key="i6">
|
/>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M12 8v4l2 2M6.16 4.94l1.42 1.42M17.42 4.94l-1.42 1.42M4 13h2M18 13h2M6.16 19.06l1.42-1.42M17.42 19.06l-1.42-1.42" />
|
</svg>,
|
||||||
</svg>
|
<svg
|
||||||
)
|
className="w-7 h-7"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
key="i3"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.2"
|
||||||
|
d="M3 7l9-4 9 4-9 4-9-4zM21 8v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8"
|
||||||
|
/>
|
||||||
|
</svg>,
|
||||||
|
<svg
|
||||||
|
className="w-7 h-7"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
key="i4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.2"
|
||||||
|
d="M3 12l4 4 8-8 4 4M14 7l3-3M7 17l-3 3"
|
||||||
|
/>
|
||||||
|
</svg>,
|
||||||
|
<svg
|
||||||
|
className="w-7 h-7"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
key="i5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.2"
|
||||||
|
d="M3 9l9-5 9 5v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM9 22V12"
|
||||||
|
/>
|
||||||
|
</svg>,
|
||||||
|
<svg
|
||||||
|
className="w-7 h-7"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
key="i6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.2"
|
||||||
|
d="M12 8v4l2 2M6.16 4.94l1.42 1.42M17.42 4.94l-1.42 1.42M4 13h2M18 13h2M6.16 19.06l1.42-1.42M17.42 19.06l-1.42-1.42"
|
||||||
|
/>
|
||||||
|
</svg>,
|
||||||
];
|
];
|
||||||
|
|
||||||
const expertiseItems = expertiseTexts.map((text, idx) => {
|
const expertiseItems = expertiseTexts.map((text, idx) => {
|
||||||
@ -368,10 +497,14 @@ export default function DepartmentDetail8() {
|
|||||||
setActive((prev) => (prev === key ? null : key));
|
setActive((prev) => (prev === key ? null : key));
|
||||||
};
|
};
|
||||||
|
|
||||||
const heroImage = active === "expertise" ? d34 : active === "works" ? d33 : d21;
|
const heroImage =
|
||||||
|
active === "expertise" ? d34 : active === "works" ? d33 : d21;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div dir={isRTL ? "rtl" : "ltr"} className="w-full min-h-screen bg-white pb-12">
|
<div
|
||||||
|
dir={isRTL ? "rtl" : "ltr"}
|
||||||
|
className="w-full min-h-screen bg-white pb-12"
|
||||||
|
>
|
||||||
<section className="relative">
|
<section className="relative">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
@ -400,27 +533,71 @@ export default function DepartmentDetail8() {
|
|||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{active === "expertise" ? (
|
{active === "expertise" ? (
|
||||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
<motion.div
|
||||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.expertiseBadge}</div>
|
key="expertise-title"
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.expertiseTitle}</h2>
|
initial={{ opacity: 0, x: -50 }}
|
||||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.expertiseSubtitle}</p>
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={`text-white max-w-4xl ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
||||||
|
{hero.expertiseBadge}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
||||||
|
{hero.expertiseTitle}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||||
|
{hero.expertiseSubtitle}
|
||||||
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : active === "works" ? (
|
) : active === "works" ? (
|
||||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
<motion.div
|
||||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">{hero.worksBadge}</div>
|
key="works-title"
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">{hero.worksTitle}</h2>
|
initial={{ opacity: 0, x: -50 }}
|
||||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{hero.worksSubtitle}</p>
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={`text-white max-w-4xl ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">
|
||||||
|
{hero.worksBadge}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">
|
||||||
|
{hero.worksTitle}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||||
|
{hero.worksSubtitle}
|
||||||
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : (
|
) : (
|
||||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className={`text-white max-w-4xl ${isRTL ? 'text-right' : 'text-left'}`}>
|
<motion.div
|
||||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{hero.defaultTitle}</h2>
|
key="default-title"
|
||||||
|
initial={{ opacity: 0, x: -50 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: 50 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className={`text-white max-w-4xl ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
|
||||||
|
{hero.defaultTitle}
|
||||||
|
</h2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block" style={{ zIndex: 99999 }}>
|
<div
|
||||||
|
className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden sm:block"
|
||||||
|
style={{ zIndex: 99999 }}
|
||||||
|
>
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{!active && (
|
{!active && (
|
||||||
<motion.div
|
<motion.div
|
||||||
@ -438,10 +615,16 @@ export default function DepartmentDetail8() {
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
whileHover={{
|
||||||
|
scale: 1.03,
|
||||||
|
y: -6,
|
||||||
|
transition: { duration: 0.2 },
|
||||||
|
}}
|
||||||
whileTap={{ scale: 0.97 }}
|
whileTap={{ scale: 0.97 }}
|
||||||
onClick={() => handleButtonClick(b.key)}
|
onClick={() => handleButtonClick(b.key)}
|
||||||
className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`}
|
className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`}
|
||||||
>
|
>
|
||||||
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||||
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
||||||
@ -450,12 +633,24 @@ export default function DepartmentDetail8() {
|
|||||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
||||||
{b.id}
|
{b.id}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
|
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">
|
||||||
|
{b.title}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
||||||
<span>{ui.clickToView}</span>
|
<span>{ui.clickToView}</span>
|
||||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -468,8 +663,16 @@ export default function DepartmentDetail8() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 z-10">
|
<div className="absolute bottom-0 left-0 right-0 z-10">
|
||||||
<svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
<svg
|
||||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
className="w-full h-12 sm:h-16 md:h-24"
|
||||||
|
viewBox="0 0 1200 120"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z"
|
||||||
|
fill="#ffffff"
|
||||||
|
opacity="1"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@ -496,17 +699,33 @@ export default function DepartmentDetail8() {
|
|||||||
transition={{ delay: index * 0.05, duration: 0.35 }}
|
transition={{ delay: index * 0.05, duration: 0.35 }}
|
||||||
whileHover={{ scale: 1.02 }}
|
whileHover={{ scale: 1.02 }}
|
||||||
onClick={() => handleButtonClick(b.key)}
|
onClick={() => handleButtonClick(b.key)}
|
||||||
className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
|
className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${
|
||||||
|
isRTL ? "text-right" : "text-left"
|
||||||
|
} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
|
||||||
>
|
>
|
||||||
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
|
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
|
||||||
{b.id}
|
{b.id}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
|
<h3 className="text-sm font-bold text-gray-800">
|
||||||
<p className="text-xs text-gray-600 mt-1">{ui.clickToView}</p>
|
{b.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-600 mt-1">
|
||||||
|
{ui.clickToView}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
className="w-5 h-5 text-amber-500"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
))}
|
))}
|
||||||
@ -519,21 +738,63 @@ export default function DepartmentDetail8() {
|
|||||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{!active ? (
|
{!active ? (
|
||||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
<motion.div
|
||||||
|
key="buttons-spacer"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.25 }}
|
||||||
|
className="h-0"
|
||||||
|
/>
|
||||||
) : active === "works" ? (
|
) : active === "works" ? (
|
||||||
<motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
<motion.div
|
||||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
|
key="timeline-view"
|
||||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.45 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.15, duration: 0.45 }}
|
||||||
|
onClick={() => setActive(null)}
|
||||||
|
whileHover={{ x: 8 }}
|
||||||
|
className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
|
||||||
|
isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>{backToMenu}</span>
|
<span>{backToMenu}</span>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
|
||||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
left: "50%",
|
||||||
|
right: "50%",
|
||||||
|
marginLeft: "-50vw",
|
||||||
|
marginRight: "-50vw",
|
||||||
|
width: "100vw",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<ProjectsTimeline
|
<ProjectsTimeline
|
||||||
projects={projectsTimeline}
|
projects={projectsTimeline}
|
||||||
plain={true}
|
plain={true}
|
||||||
dir={isRTL ? 'rtl' : 'ltr'}
|
dir={isRTL ? "rtl" : "ltr"}
|
||||||
mainTitle={hero.worksTitle}
|
mainTitle={hero.worksTitle}
|
||||||
subtitle={hero.worksSubtitle}
|
subtitle={hero.worksSubtitle}
|
||||||
scrollLabel={scrollLabels.ariaLabel}
|
scrollLabel={scrollLabels.ariaLabel}
|
||||||
@ -543,10 +804,36 @@ export default function DepartmentDetail8() {
|
|||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
) : (
|
) : (
|
||||||
<motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
<motion.div
|
||||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}>
|
key="details-view"
|
||||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, y: 20 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -20 }}
|
||||||
|
transition={{ duration: 0.45 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.08, duration: 0.45 }}
|
||||||
|
onClick={() => setActive(null)}
|
||||||
|
whileHover={{ x: 8 }}
|
||||||
|
className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${
|
||||||
|
isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>{backToMenu}</span>
|
<span>{backToMenu}</span>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
@ -563,30 +850,60 @@ export default function DepartmentDetail8() {
|
|||||||
>
|
>
|
||||||
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
||||||
<div className="relative flex-shrink-0">
|
<div className="relative flex-shrink-0">
|
||||||
<motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
|
<motion.div
|
||||||
|
whileHover={{ rotate: 360, scale: 1.08 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"
|
||||||
|
>
|
||||||
{item.icon}
|
{item.icon}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 pt-1">
|
<div className="flex-1 pt-1">
|
||||||
<p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
|
<p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">
|
||||||
|
{item.text}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
<motion.div
|
||||||
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
initial={{ opacity: 0, x: -8 }}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
|
whileHover={{ opacity: 1, x: 0 }}
|
||||||
|
className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 sm:w-6 sm:h-6"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2.2"
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 0.6, duration: 0.45 }}
|
||||||
|
className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full"
|
||||||
|
>
|
||||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||||
<span className="text-xs sm:text-sm font-medium">{ui.servicesProfessional}</span>
|
<span className="text-xs sm:text-sm font-medium">
|
||||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
{ui.servicesProfessional}
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
|
||||||
|
style={{ animationDelay: "0.5s" }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -21,7 +21,11 @@ import d21 from "../../../../src/assets/Images/d21.jpeg";
|
|||||||
import d22 from "../../../../src/assets/Images/d22.jpg";
|
import d22 from "../../../../src/assets/Images/d22.jpg";
|
||||||
|
|
||||||
const departments = [
|
const departments = [
|
||||||
{ id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج",
|
||||||
|
image: d1,
|
||||||
|
},
|
||||||
{ id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
|
{ id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
|
||||||
{ id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
|
{ id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
|
||||||
{ id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
|
{ id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
|
||||||
@ -79,11 +83,14 @@ function DepartmentCard({ dept, offset, index }) {
|
|||||||
|
|
||||||
const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]);
|
const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]);
|
||||||
|
|
||||||
const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p);
|
const y = useTransform(
|
||||||
|
[velocityParallax, progressParallax],
|
||||||
|
([v, p]) => v + p
|
||||||
|
);
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
if (dept.id === 1) {
|
if (dept.id === 1) {
|
||||||
navigate("/departments/:id");
|
navigate("/departments/1");
|
||||||
}
|
}
|
||||||
if (dept.id === 9) {
|
if (dept.id === 9) {
|
||||||
navigate("/department-detail9");
|
navigate("/department-detail9");
|
||||||
@ -110,7 +117,9 @@ function DepartmentCard({ dept, offset, index }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const translatedTitle = t(`departments.list.${dept.id - 1}`, { defaultValue: dept.title });
|
const translatedTitle = t(`departments.list.${dept.id - 1}`, {
|
||||||
|
defaultValue: dept.title,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -140,7 +149,8 @@ function DepartmentCard({ dept, offset, index }) {
|
|||||||
scale: s,
|
scale: s,
|
||||||
y,
|
y,
|
||||||
transformStyle: "preserve-3d",
|
transformStyle: "preserve-3d",
|
||||||
boxShadow: "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
|
boxShadow:
|
||||||
|
"0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
|
||||||
}}
|
}}
|
||||||
className="cursor-pointer w-full h-56 sm:h-72 md:h-96 lg:h-[28rem] object-cover rounded-2xl bg-white/20 backdrop-blur-md border border-white/10"
|
className="cursor-pointer w-full h-56 sm:h-72 md:h-96 lg:h-[28rem] object-cover rounded-2xl bg-white/20 backdrop-blur-md border border-white/10"
|
||||||
/>
|
/>
|
||||||
@ -152,10 +162,14 @@ export default function Departments() {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="departments" className="min-h-screen text-black bg-transparent" dir="rtl">
|
<section
|
||||||
|
id="departments"
|
||||||
|
className="min-h-screen text-black bg-transparent"
|
||||||
|
dir="rtl"
|
||||||
|
>
|
||||||
<header className="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-10 sm:pt-12 relative z-20">
|
<header className="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-10 sm:pt-12 relative z-20">
|
||||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40] drop-shadow-lg">
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40] drop-shadow-lg">
|
||||||
{t('departments.heading', { defaultValue: 'أقسامنا' })}
|
{t("departments.heading", { defaultValue: "أقسامنا" })}
|
||||||
</h1>
|
</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,15 @@
|
|||||||
import React, { useEffect, useState, useRef } from "react";
|
import React, { useEffect, useState, useRef } from "react";
|
||||||
import styled from 'styled-components';
|
import styled from "styled-components";
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from "react-i18next";
|
||||||
|
import REXNT from "../../../assets/Images/REXNT.png";
|
||||||
|
import TPSlogo from "../../../assets/Images/TPS-logo.png";
|
||||||
|
import NSC from "../../../assets/Images/NSC.png";
|
||||||
|
import LOGO from "../../../assets/Images/LOGO.png";
|
||||||
export default function EngineeringHeroFlowbite() {
|
export default function EngineeringHeroFlowbite() {
|
||||||
const { t, i18n } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
|
|
||||||
const defaultConfig = {
|
const defaultConfig = {
|
||||||
main_title: "عندما تطلب الرؤية مستشارًا, ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
|
main_title: "عندما تطلب الرؤية مستشارًا، ويحتاج المخطط منفذًا استراتيجيًا…\nنكون القرار بالقيادة من الرؤية حتى التسليم",
|
||||||
subtitle:
|
subtitle:
|
||||||
"حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
|
"حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
|
||||||
primary_color: "#e67e22",
|
primary_color: "#e67e22",
|
||||||
@ -20,8 +23,8 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
|
|
||||||
const [config, setConfig] = useState({
|
const [config, setConfig] = useState({
|
||||||
...defaultConfig,
|
...defaultConfig,
|
||||||
main_title: t ? t('hero.main_title') : defaultConfig.main_title,
|
main_title: t ? t("hero.main_title") : defaultConfig.main_title,
|
||||||
subtitle: t ? t('hero.subtitle') : defaultConfig.subtitle,
|
subtitle: t ? t("hero.subtitle") : defaultConfig.subtitle,
|
||||||
});
|
});
|
||||||
const [isMounted, setIsMounted] = useState(false);
|
const [isMounted, setIsMounted] = useState(false);
|
||||||
|
|
||||||
@ -34,7 +37,8 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
const link = document.createElement("link");
|
const link = document.createElement("link");
|
||||||
link.id = id;
|
link.id = id;
|
||||||
link.rel = "stylesheet";
|
link.rel = "stylesheet";
|
||||||
link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
|
link.href =
|
||||||
|
"https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
|
||||||
document.head.appendChild(link);
|
document.head.appendChild(link);
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
@ -46,23 +50,23 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const updateFromI18n = () => {
|
const updateFromI18n = () => {
|
||||||
const lang = i18n.language || 'en';
|
const lang = i18n.language || "en";
|
||||||
let main = t('hero.main_title');
|
let main = t("hero.main_title");
|
||||||
if (lang && lang.startsWith('en')) {
|
if (lang && lang.startsWith("en")) {
|
||||||
main = main.replace(/[—–]/g, ' - ');
|
main = main.replace(/[—–]/g, " - ");
|
||||||
}
|
}
|
||||||
setConfig((c) => ({
|
setConfig((c) => ({
|
||||||
...c,
|
...c,
|
||||||
main_title: main,
|
main_title: main,
|
||||||
subtitle: t('hero.subtitle'),
|
subtitle: t("hero.subtitle"),
|
||||||
}));
|
}));
|
||||||
document.documentElement.lang = lang;
|
document.documentElement.lang = lang;
|
||||||
document.documentElement.dir = lang.startsWith('ar') ? 'rtl' : 'ltr';
|
document.documentElement.dir = lang.startsWith("ar") ? "rtl" : "ltr";
|
||||||
};
|
};
|
||||||
updateFromI18n();
|
updateFromI18n();
|
||||||
i18n.on && i18n.on('languageChanged', updateFromI18n);
|
i18n.on && i18n.on("languageChanged", updateFromI18n);
|
||||||
return () => {
|
return () => {
|
||||||
i18n.off && i18n.off('languageChanged', updateFromI18n);
|
i18n.off && i18n.off("languageChanged", updateFromI18n);
|
||||||
};
|
};
|
||||||
}, [i18n, t]);
|
}, [i18n, t]);
|
||||||
|
|
||||||
@ -70,23 +74,34 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
const main = mainTitleRef.current;
|
const main = mainTitleRef.current;
|
||||||
const sub = subtitleRef.current;
|
const sub = subtitleRef.current;
|
||||||
const baseFontStack = "Arial, sans-serif";
|
const baseFontStack = "Arial, sans-serif";
|
||||||
const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
|
const font =
|
||||||
|
(config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
|
||||||
const baseSize = config.font_size || defaultConfig.font_size;
|
const baseSize = config.font_size || defaultConfig.font_size;
|
||||||
|
|
||||||
const applyStyles = () => {
|
const applyStyles = () => {
|
||||||
const lang = i18n.language || 'en';
|
const lang = i18n.language || "en";
|
||||||
const isArabic = lang.startsWith('ar');
|
const isArabic = lang.startsWith("ar");
|
||||||
const width = typeof window !== "undefined" ? window.innerWidth : 1024;
|
const width = typeof window !== "undefined" ? window.innerWidth : 1024;
|
||||||
const responsiveBase = width <= 400 ? baseSize * 0.78 : width <= 640 ? baseSize * 0.88 : width <= 1024 ? baseSize * 0.96 : baseSize;
|
const responsiveBase =
|
||||||
|
width <= 400
|
||||||
|
? baseSize * 0.78
|
||||||
|
: width <= 640
|
||||||
|
? baseSize * 0.88
|
||||||
|
: width <= 1024
|
||||||
|
? baseSize * 0.96
|
||||||
|
: baseSize;
|
||||||
const headingMultiplier = width <= 640 ? 2.6 : 3.2;
|
const headingMultiplier = width <= 640 ? 2.6 : 3.2;
|
||||||
const subtitleMultiplier = width <= 640 ? 0.95 : 1.1;
|
const subtitleMultiplier = width <= 640 ? 0.95 : 1.1;
|
||||||
const mainText = (config.main_title || defaultConfig.main_title).replace(/\s+/g, " ").trim();
|
const mainText = (config.main_title || defaultConfig.main_title)
|
||||||
|
.replace(/\s+/g, " ")
|
||||||
|
.trim();
|
||||||
const mainTextLength = mainText.length;
|
const mainTextLength = mainText.length;
|
||||||
const lengthFactor = mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
|
const lengthFactor =
|
||||||
|
mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
|
||||||
const maxFont = 68;
|
const maxFont = 68;
|
||||||
const minFont = Math.max( Math.round(responsiveBase * 1.6), 14 );
|
const minFont = Math.max(Math.round(responsiveBase * 1.6), 14);
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
root.style.setProperty('--base', `${responsiveBase}px`);
|
root.style.setProperty("--base", `${responsiveBase}px`);
|
||||||
|
|
||||||
if (main) {
|
if (main) {
|
||||||
const headingText = (config.main_title || defaultConfig.main_title)
|
const headingText = (config.main_title || defaultConfig.main_title)
|
||||||
@ -96,12 +111,20 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
if (headingText.length === 1) {
|
if (headingText.length === 1) {
|
||||||
main.textContent = headingText[0];
|
main.textContent = headingText[0];
|
||||||
} else {
|
} else {
|
||||||
main.innerHTML = `<span style="display:block;line-height:1.02">${headingText[0]}</span><span style="display:block;font-weight:700;opacity:0.95;margin-top:6px">${headingText
|
main.innerHTML = `<span style="display:block;line-height:1.02">${
|
||||||
|
headingText[0]
|
||||||
|
}</span><span style="display:block;font-weight:700;opacity:0.95;margin-top:6px">${headingText
|
||||||
.slice(1)
|
.slice(1)
|
||||||
.join("<br/>")}</span>`;
|
.join("<br/>")}</span>`;
|
||||||
}
|
}
|
||||||
main.style.fontFamily = font;
|
main.style.fontFamily = font;
|
||||||
const computedSize = Math.min(Math.max(Math.round(responsiveBase * headingMultiplier * lengthFactor), minFont), maxFont);
|
const computedSize = Math.min(
|
||||||
|
Math.max(
|
||||||
|
Math.round(responsiveBase * headingMultiplier * lengthFactor),
|
||||||
|
minFont
|
||||||
|
),
|
||||||
|
maxFont
|
||||||
|
);
|
||||||
main.style.fontSize = `${computedSize}px`;
|
main.style.fontSize = `${computedSize}px`;
|
||||||
main.style.color = config.text_color || defaultConfig.text_color;
|
main.style.color = config.text_color || defaultConfig.text_color;
|
||||||
main.style.fontWeight = 800;
|
main.style.fontWeight = 800;
|
||||||
@ -131,10 +154,22 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
sub.style.display = "block";
|
sub.style.display = "block";
|
||||||
}
|
}
|
||||||
|
|
||||||
root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
|
root.style.setProperty(
|
||||||
root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
|
"--ehb-primary",
|
||||||
root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
|
config.primary_color || defaultConfig.primary_color
|
||||||
root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
|
);
|
||||||
|
root.style.setProperty(
|
||||||
|
"--ehb-background",
|
||||||
|
config.background_color || defaultConfig.background_color
|
||||||
|
);
|
||||||
|
root.style.setProperty(
|
||||||
|
"--ehb-surface",
|
||||||
|
config.secondary_surface || defaultConfig.secondary_surface
|
||||||
|
);
|
||||||
|
root.style.setProperty(
|
||||||
|
"--ehb-action",
|
||||||
|
config.secondary_action || defaultConfig.secondary_action
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
applyStyles();
|
applyStyles();
|
||||||
@ -155,25 +190,42 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
const OrangeActionButton = ({ onClick }) => {
|
const OrangeActionButton = ({ onClick }) => {
|
||||||
return (
|
return (
|
||||||
<StyledWrapper>
|
<StyledWrapper>
|
||||||
<button className="button" onClick={onClick} aria-label={t('hero.action')}>
|
<button
|
||||||
{t('hero.action')}
|
className="button"
|
||||||
<svg className="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
onClick={onClick}
|
||||||
<path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" clipRule="evenodd" />
|
aria-label={t("hero.action")}
|
||||||
|
>
|
||||||
|
{t("hero.action")}
|
||||||
|
<svg
|
||||||
|
className="icon"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</StyledWrapper>
|
</StyledWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const isArabic = i18n.language && i18n.language.startsWith('ar');
|
const isArabic = i18n.language && i18n.language.startsWith("ar");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div dir={isArabic ? "rtl" : "ltr"} className="h-screen w-full overflow-hidden content-container" style={{ background: "transparent" }}>
|
<div
|
||||||
|
dir={isArabic ? "rtl" : "ltr"}
|
||||||
|
className="h-screen w-full overflow-hidden content-container"
|
||||||
|
style={{ background: "transparent" }}
|
||||||
|
>
|
||||||
<style>{`
|
<style>{`
|
||||||
:root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px }
|
: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-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{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-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}
|
.hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}
|
||||||
@ -190,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-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
|
||||||
.partner-bubble{
|
.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-origin:center;
|
||||||
transform: translateY(10px) scale(0.95);
|
transform: translateY(10px) scale(0.95);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -230,6 +282,35 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
.partner-item img{max-height:30px}
|
.partner-item img{max-height:30px}
|
||||||
.partner-strip-wrap{padding-left:20px;padding-right:20px;bottom:10px}
|
.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){
|
@media (max-width: 640px){
|
||||||
.partner-strip{gap:10px;padding:8px;border-radius:10px}
|
.partner-strip{gap:10px;padding:8px;border-radius:10px}
|
||||||
.partner-item img{max-height:24px}
|
.partner-item img{max-height:24px}
|
||||||
@ -328,25 +409,57 @@ export default function EngineeringHeroFlowbite() {
|
|||||||
|
|
||||||
<div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
|
<div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
|
||||||
<div className="hero-overlay" />
|
<div className="hero-overlay" />
|
||||||
<div className={`hero-layout ${isArabic ? '' : 'layout-ltr'}`}>
|
<div className={`hero-layout ${isArabic ? "" : "layout-ltr"}`}>
|
||||||
<div className="hero-left">
|
<div className="hero-left">
|
||||||
<img src="src/assets/Images/REXNT.png" alt="REXNT" />
|
<img src={REXNT} alt="REXNT" />
|
||||||
<div className="partner-logos" aria-hidden>
|
<div className="partner-logos" aria-hidden>
|
||||||
<div className="partner-bubble" style={{ animationDelay: "0ms" }} aria-label="شريك TPS">
|
<div
|
||||||
<img src="src/assets/Images/TPS-logo.png" alt="TPS" />
|
className="partner-bubble"
|
||||||
|
style={{ animationDelay: "0ms" }}
|
||||||
|
aria-label="شريك TPS"
|
||||||
|
>
|
||||||
|
<img src={TPSlogo} alt="TPS" />
|
||||||
</div>
|
</div>
|
||||||
<div className="partner-bubble" style={{ animationDelay: "180ms" }} aria-label="شريك NSC">
|
<div
|
||||||
<img src="src/assets/Images/NSC.png" alt="NSC" />
|
className="partner-bubble nsc-bubble"
|
||||||
|
style={{ animationDelay: "180ms" }}
|
||||||
|
aria-label="شريك NSC"
|
||||||
|
>
|
||||||
|
<img src={NSC} alt="NSC" />
|
||||||
</div>
|
</div>
|
||||||
<div className="partner-bubble" style={{ animationDelay: "360ms" }} aria-label="شريك LOGO">
|
<div
|
||||||
<img src="src/assets/Images/LOGO.png" alt="LOGO" />
|
className="partner-bubble"
|
||||||
|
style={{ animationDelay: "360ms" }}
|
||||||
|
aria-label="شريك LOGO"
|
||||||
|
>
|
||||||
|
<img src={LOGO} alt="LOGO" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={`hero-content ${isArabic ? 'content-rtl' : 'content-ltr'}`}>
|
<div
|
||||||
<h1 ref={mainTitleRef} className="hero-title text-white" style={{ fontWeight: 800, marginBottom: 16, textShadow: "2px 2px 10px rgba(0,0,0,0.6)" }} />
|
className={`hero-content ${
|
||||||
<p ref={subtitleRef} className="hero-subtitle text-white" style={{ maxWidth: 800, textShadow: "1px 1px 6px rgba(0,0,0,0.45)", lineHeight: 1.6 }} />
|
isArabic ? "content-rtl" : "content-ltr"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<h1
|
||||||
|
ref={mainTitleRef}
|
||||||
|
className="hero-title text-white"
|
||||||
|
style={{
|
||||||
|
fontWeight: 800,
|
||||||
|
marginBottom: 16,
|
||||||
|
textShadow: "2px 2px 10px rgba(0,0,0,0.6)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
ref={subtitleRef}
|
||||||
|
className="hero-subtitle text-white"
|
||||||
|
style={{
|
||||||
|
maxWidth: 800,
|
||||||
|
textShadow: "1px 1px 6px rgba(0,0,0,0.45)",
|
||||||
|
lineHeight: 1.6,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<div className="action-wrapper" style={{ marginTop: 18 }}>
|
<div className="action-wrapper" style={{ marginTop: 18 }}>
|
||||||
<OrangeActionButton onClick={goToDepartments} />
|
<OrangeActionButton onClick={goToDepartments} />
|
||||||
</div>
|
</div>
|
||||||
@ -379,11 +492,22 @@ const StyledWrapper = styled.div`
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
|
.icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
.button:hover { transform: scale(1.05); border-color: #fff9; }
|
.button:hover {
|
||||||
.button:hover .icon { transform: translate(4px); }
|
transform: scale(1.05);
|
||||||
.button:hover::before { animation: shine 1.5s ease-out infinite; }
|
border-color: #fff9;
|
||||||
|
}
|
||||||
|
.button:hover .icon {
|
||||||
|
transform: translate(4px);
|
||||||
|
}
|
||||||
|
.button:hover::before {
|
||||||
|
animation: shine 1.5s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
.button::before {
|
.button::before {
|
||||||
content: "";
|
content: "";
|
||||||
@ -402,8 +526,14 @@ const StyledWrapper = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shine {
|
@keyframes shine {
|
||||||
0% { left: -100px; }
|
0% {
|
||||||
60% { left: 100%; }
|
left: -100px;
|
||||||
to { left: 100%; }
|
}
|
||||||
|
60% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Wallet, Zap, Users, PieChart, Sparkles } from "lucide-react";
|
import { Wallet, Zap, Users, PieChart, Sparkles } from "lucide-react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { withTranslation } from "react-i18next";
|
||||||
|
|
||||||
const Services = () => {
|
const Services = ({ t, i18n }) => {
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
@ -33,47 +32,42 @@ const Services = () => {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="services" >
|
<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 w-full" dir="rtl">
|
||||||
<div className="min-h-screen bg-transparent font-sans overflow-hidden relative">
|
<div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center w-full">
|
||||||
<div className="absolute inset-0 z-0 overflow-hidden">
|
<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="absolute inset-0 bg-transparent"></div>
|
<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">
|
||||||
</div>
|
{features.map((feature) => (
|
||||||
<div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center">
|
<div
|
||||||
<div className="flex flex-col justify-center max-h-screen">
|
key={feature.id}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 max-w-4xl mx-auto p-6">
|
className="group relative overflow-hidden w-full"
|
||||||
{features.map((feature) => (
|
>
|
||||||
<div
|
<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>
|
||||||
key={feature.id}
|
|
||||||
className="group relative overflow-hidden"
|
<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="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="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 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">
|
|
||||||
{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">
|
|
||||||
{feature.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 leading-relaxed text-sm">
|
|
||||||
{feature.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</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={`flex-1 min-w-0 ${i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'}`}>
|
||||||
<div className="absolute inset-0 lg:inset-y-0 lg:right-0 lg:left-auto lg:w-[100%]">
|
<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">
|
||||||
<div className="absolute inset-0">
|
{feature.title}
|
||||||
<div className="hidden lg:block absolute inset-0">
|
</h3>
|
||||||
|
<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="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
|
<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={{
|
style={{
|
||||||
clipPath: 'circle(150% at 0% 50%)',
|
clipPath: 'circle(150% at 0% 50%)',
|
||||||
borderTopLeftRadius: '0',
|
borderTopLeftRadius: '0',
|
||||||
@ -81,12 +75,11 @@ const Services = () => {
|
|||||||
borderTopRightRadius: '9999px',
|
borderTopRightRadius: '9999px',
|
||||||
borderBottomRightRadius: '9999px'
|
borderBottomRightRadius: '9999px'
|
||||||
}}
|
}}
|
||||||
>
|
></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="lg:hidden absolute inset-0">
|
<div className="lg:hidden absolute inset-0 w-full h-full">
|
||||||
<div
|
<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={{
|
style={{
|
||||||
clipPath: 'ellipse(150% 100% at 50% 0%)',
|
clipPath: 'ellipse(150% 100% at 50% 0%)',
|
||||||
borderBottomLeftRadius: '9999px',
|
borderBottomLeftRadius: '9999px',
|
||||||
@ -97,44 +90,53 @@ const Services = () => {
|
|||||||
<div className="absolute inset-0 border-2 border-white/20"></div>
|
<div className="absolute inset-0 border-2 border-white/20"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
|
<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-24 sm:w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
<div
|
||||||
<div className="absolute top-1/4 -left-16 w-64 h-64 bg-white/10 rounded-full backdrop-blur-md"></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 ${
|
||||||
<div className="absolute bottom-1/3 -left-8 w-48 h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
|
i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
|
||||||
<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>
|
>
|
||||||
<div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
|
<div className="space-y-6 sm:space-y-8 lg:space-y-10">
|
||||||
</div>
|
<div className="relative">
|
||||||
<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="flex items-center space-x-3 mb-2 rtl:space-x-reverse flex-wrap">
|
||||||
<div className="space-y-8 lg:space-y-10">
|
<span className="text-sm sm:text-base font-semibold tracking-widest text-white">
|
||||||
<div className="relative">
|
{t("services.summary")}
|
||||||
<div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse">
|
</span>
|
||||||
<span className="text-sm font-semibold tracking-widest text-white">
|
<Sparkles className="w-5 h-5 sm:w-6 sm:h-6 text-[#57acd9]" />
|
||||||
{t("services.summary")}
|
</div>
|
||||||
</span>
|
<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 ${
|
||||||
<Sparkles className="w-6 h-6 text-[#57acd9]" />
|
i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
|
||||||
|
}`}>
|
||||||
|
{t("services.pageTitle")}
|
||||||
|
</h1>
|
||||||
</div>
|
</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]">
|
|
||||||
{t("services.pageTitle")}
|
<div className="space-y-4">
|
||||||
</h1>
|
<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-16 sm:w-20 h-1 bg-gradient-to-r from-white to-[#57acd9] rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
<div className="space-y-4">
|
|
||||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl">
|
|
||||||
{t("services.mainHeading")}
|
|
||||||
</h2>
|
|
||||||
<div className="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">
|
|
||||||
{t("services.description")}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Services;
|
export default withTranslation()(Services);
|
||||||
2595
src/i18n.js
2595
src/i18n.js
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user