nav+ departments+ home
This commit is contained in:
@ -1,72 +1,690 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Element } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
|
||||
const About = () => {
|
||||
const { t } = useTranslation();
|
||||
const home10 = "https://i.imgur.com/MW2Sk0y.jpg";
|
||||
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: [
|
||||
"الجودة الاحترافية",
|
||||
"السلامة المهنية",
|
||||
"الاستدامة والمسؤولية",
|
||||
"التطوير المستمر",
|
||||
"الشفافية و بناء الثقة"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
AOS.init({ duration: 1000, once: false });
|
||||
// Animations
|
||||
const rotating = keyframes`
|
||||
from {
|
||||
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
|
||||
rotateY(0);
|
||||
}
|
||||
to {
|
||||
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
|
||||
rotateY(1turn);
|
||||
}
|
||||
`;
|
||||
|
||||
const handleScroll = () => {
|
||||
AOS.refresh();
|
||||
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' ? '#4a4a4a' : '#d1c9be'};
|
||||
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' ? '#f5e7c673' : '#f5e7c673'};
|
||||
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: #e06923;
|
||||
background: ${props => props.$theme === 'dark' ? '#F7B980' : '#F7B980'};
|
||||
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:#e06923;
|
||||
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' ? '#131313' : '#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(245 238 230 / 65%)'};
|
||||
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: 650px;
|
||||
width: 100%;
|
||||
height: 86%;
|
||||
background: ${props => props.$theme === 'dark' ? 'rgba(49, 49, 49, 0.9)' : 'rgba(245, 238, 230, 0.9)'};
|
||||
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);
|
||||
}
|
||||
`;
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
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 (
|
||||
<Element name="about">
|
||||
<section
|
||||
className="w-full h-screen px-4 sm:px-6 lg:px-16 py-12 sm:py-16 text-black font-sans relative overflow-hidden"
|
||||
style={{ direction: "rtl", backgroundColor: "#111827" }}
|
||||
>
|
||||
{/* صورة الخلفية */}
|
||||
<div
|
||||
className="relative w-full sm:w-3/4 mx-auto z-0"
|
||||
data-aos="fade-right"
|
||||
style={{
|
||||
borderRadius: "12px",
|
||||
border: "1px solid #EB8323",
|
||||
boxShadow:
|
||||
"0 0 15px 5px rgba(235, 131, 35, 0.4), 0 0 8px 2px rgba(235, 131, 35, 0.3)",
|
||||
}}
|
||||
<StyledWrapper $theme={theme}>
|
||||
<HeaderSection>
|
||||
<Title>
|
||||
<div
|
||||
className="pt-0 mb-2 text-4xl font-extrabold md:text-5xl lg:text-6xl"
|
||||
style={{
|
||||
background: 'linear-gradient(90deg, #e06923 0%, #ffffff 33%, #313131 66%, #e06923 100%)',
|
||||
backgroundSize: '300% 100%',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
color: 'transparent',
|
||||
animation: 'gradientFlow 3s ease infinite',
|
||||
fontWeight: 900,
|
||||
letterSpacing: '-0.5px'
|
||||
}}
|
||||
>
|
||||
من نحن
|
||||
</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 }}
|
||||
>
|
||||
<img
|
||||
src={home10}
|
||||
alt="شخص"
|
||||
className="w-full h-[450px] sm:h-[500px] md:h-[600px] object-cover rounded-lg transition-all duration-300"
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
<ChevronLeft size={28} />
|
||||
</LeftNavButton>
|
||||
|
||||
<Inner
|
||||
ref={innerRef}
|
||||
quantity={companyInfo.length}
|
||||
rotation={rotation}
|
||||
>
|
||||
{companyInfo.map((card, index) => {
|
||||
const Icon = card.icon;
|
||||
const isFront = isCardInFront(index);
|
||||
|
||||
{/* مربع النص المتراكب */}
|
||||
<div
|
||||
className="z-10 max-w-full px-4 sm:px-0 -mt-20 sm:mt-0 sm:absolute sm:bottom-10 sm:right-10
|
||||
bg-white/20 backdrop-blur-md text-black p-6 sm:p-12 rounded-xl shadow-2xl
|
||||
flex flex-col sm:max-w-md"
|
||||
data-aos="fade-left"
|
||||
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: '#e06923' }} />
|
||||
</IconWrapper>
|
||||
<CardTitle>{card.title}</CardTitle>
|
||||
<CardDescription $theme={theme}>
|
||||
{card.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<div>
|
||||
{isFront && (
|
||||
<ArrowHint style={{ color: '#e06923' }}>
|
||||
<ArrowDown size={24} style={{ color: '#e06923' }} />
|
||||
<span style={{ color: '#e06923' }}>إضغط لعرض التفاصيل</span>
|
||||
</ArrowHint>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</Inner>
|
||||
|
||||
<RightNavButton
|
||||
$theme={theme}
|
||||
onClick={handleNextCard}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<h1 className="mb-4 sm:mb-6 text-3xl sm:text-5xl font-extrabold md:text-6xl lg:text-7xl text-center self-center mt-0">
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
{t('about.title')}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-2xl leading-relaxed flex-grow text-center">
|
||||
{t('about.description')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Element>
|
||||
<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: '#e06923' }} />}
|
||||
{idx === 0 && <Target size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 2 && <Globe size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 3 && <Zap size={20} style={{ color: '#e06923' }} />}
|
||||
{idx === 4 && <Sparkles size={20} style={{ color: '#e06923' }} />}
|
||||
</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;
|
||||
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// DepartmentDetail.jsx
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import d1 from "../../../../src/assets/Images/d1.jpeg";
|
||||
@ -49,15 +48,15 @@ function ProjectsTimeline({
|
||||
|
||||
const stop1 = document.createElementNS(svgNS, "stop");
|
||||
stop1.setAttribute("offset", "0%");
|
||||
stop1.setAttribute("style", "stop-color:#ea580c;stop-opacity:1");
|
||||
stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
|
||||
|
||||
const stop2 = document.createElementNS(svgNS, "stop");
|
||||
stop2.setAttribute("offset", "50%");
|
||||
stop2.setAttribute("style", "stop-color:#dc2626;stop-opacity:1");
|
||||
stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
|
||||
|
||||
const stop3 = document.createElementNS(svgNS, "stop");
|
||||
stop3.setAttribute("offset", "100%");
|
||||
stop3.setAttribute("style", "stop-color:#b91c1c;stop-opacity:1");
|
||||
stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
|
||||
|
||||
gradient.appendChild(stop1);
|
||||
gradient.appendChild(stop2);
|
||||
@ -96,7 +95,7 @@ function ProjectsTimeline({
|
||||
path.setAttribute("stroke-width", "4");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(251, 191, 36, 0.3))";
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
|
||||
svgEl.appendChild(path);
|
||||
}
|
||||
}, [itemsRefs]);
|
||||
@ -193,31 +192,30 @@ function ProjectsTimeline({
|
||||
}, [itemsRefs, drawCurvedLines, projects.length]);
|
||||
|
||||
const css = `
|
||||
:root{--bg-start:#0f172a;--bg-mid:#1e293b;--bg-end:#334155}
|
||||
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
|
||||
.projects-timeline-root { direction: rtl; min-height: 100%; }
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
|
||||
.timeline-scroll::-webkit-scrollbar{ height:10px;}
|
||||
.timeline-scroll::-webkit-scrollbar-track{ background: transparent; border-radius:10px; margin:0 8px;}
|
||||
.timeline-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius:10px; border:2px solid transparent; background-clip:padding-box;}
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
|
||||
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
|
||||
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
|
||||
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
|
||||
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background:linear-gradient(135deg,#dc2626 0%,#b91c1c 50%,#991b1b 100%); color:white; box-shadow:0 8px 25px rgba(220,38,38,.4); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:5px solid rgba(255,255,255,.25); position:relative; z-index:2; backdrop-filter: blur(10px); }
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(220,38,38,.3); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 15px 50px rgba(220,38,38,.5); border-color: rgba(255,255,255,.5); transform: translateY(-15px) scale(1.05); animation: glow 2s ease-in-out infinite; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
|
||||
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
|
||||
@keyframes glow { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.15);} }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.3); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: #ffffff; border-radius:20px; padding:28px; min-width:320px; max-width:380px; box-shadow:0 8px 30px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04); opacity:.6; transform: scale(.92) translateY(10px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(251,191,36,.1); position:relative; overflow:hidden;}
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left,#dc2626,#b91c1c,#991b1b); opacity:0; transition:opacity .6s ease;}
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 20px 60px rgba(0,0,0,.12),0 5px 15px rgba(0,0,0,.06),0 0 0 1px rgba(220,38,38,.15); border-color: rgba(220,38,38,.25); }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
|
||||
.timeline-item.active .project-card::before { opacity:1; }
|
||||
.project-text { font-size:15px; line-height:2; color:#1f2937; font-weight:500; }
|
||||
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
|
||||
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(220,38,38,.08); transform: translateX(-4px); }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
|
||||
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:#dc2626; box-shadow:0 6px 20px rgba(0,0,0,.15); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(10px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fee2e2 100%); transform: scale(1.15); box-shadow:0 10px 35px rgba(220,38,38,.25); }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
|
||||
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
|
||||
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
|
||||
@media (max-width:768px){
|
||||
@ -234,7 +232,7 @@ function ProjectsTimeline({
|
||||
.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%, #475569 100%)" };
|
||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
||||
|
||||
return (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
@ -638,4 +636,4 @@ export default function DepartmentDetail() {
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
542
src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
Normal file
542
src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
Normal file
@ -0,0 +1,542 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import d1 from "../../../../src/assets/Images/d1.jpeg";
|
||||
import d12 from "../../../../src/assets/Images/d12.jpeg";
|
||||
import d13 from "../../../../src/assets/Images/d13.jpeg";
|
||||
import d7 from "../../../../src/assets/Images/d7.jpeg";
|
||||
|
||||
function ProjectsTimeline({
|
||||
projects,
|
||||
mainTitle = "المشاريع المنفذة",
|
||||
subtitle = "خط زمني شامل للأعمال والإنجازات",
|
||||
plain = false,
|
||||
}) {
|
||||
const wrapperRef = useRef(null);
|
||||
const scrollRef = useRef(null);
|
||||
const svgRef = useRef(null);
|
||||
const [itemsRefs, setItemsRefs] = useState([]);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setItemsRefs((r) => {
|
||||
const arr = Array(projects.length)
|
||||
.fill()
|
||||
.map((_, i) => r[i] || React.createRef());
|
||||
return arr;
|
||||
});
|
||||
}, [projects.length]);
|
||||
|
||||
const drawCurvedLines = useCallback(() => {
|
||||
const svgEl = svgRef.current;
|
||||
const wrapper = wrapperRef.current;
|
||||
if (!svgEl || !wrapper) return;
|
||||
|
||||
while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
|
||||
svgEl.setAttribute("width", wrapper.scrollWidth);
|
||||
svgEl.setAttribute("height", wrapper.offsetHeight);
|
||||
|
||||
if (!itemsRefs || itemsRefs.length < 2) return;
|
||||
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const defs = document.createElementNS(svgNS, "defs");
|
||||
const gradient = document.createElementNS(svgNS, "linearGradient");
|
||||
gradient.setAttribute("id", "timeline-gradient");
|
||||
gradient.setAttribute("x1", "0%");
|
||||
gradient.setAttribute("y1", "0%");
|
||||
gradient.setAttribute("x2", "100%");
|
||||
gradient.setAttribute("y2", "0%");
|
||||
|
||||
const stop1 = document.createElementNS(svgNS, "stop");
|
||||
stop1.setAttribute("offset", "0%");
|
||||
stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
|
||||
|
||||
const stop2 = document.createElementNS(svgNS, "stop");
|
||||
stop2.setAttribute("offset", "50%");
|
||||
stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
|
||||
|
||||
const stop3 = document.createElementNS(svgNS, "stop");
|
||||
stop3.setAttribute("offset", "100%");
|
||||
stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
|
||||
|
||||
gradient.appendChild(stop1);
|
||||
gradient.appendChild(stop2);
|
||||
gradient.appendChild(stop3);
|
||||
defs.appendChild(gradient);
|
||||
svgEl.appendChild(defs);
|
||||
|
||||
for (let i = 0; i < itemsRefs.length - 1; i++) {
|
||||
const item1 = itemsRefs[i].current;
|
||||
const item2 = itemsRefs[i + 1].current;
|
||||
if (!item1 || !item2) continue;
|
||||
|
||||
const circle1 = item1.querySelector(".year-circle");
|
||||
const circle2 = item2.querySelector(".year-circle");
|
||||
if (!circle1 || !circle2) continue;
|
||||
|
||||
const rect1 = circle1.getBoundingClientRect();
|
||||
const rect2 = circle2.getBoundingClientRect();
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
|
||||
const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
|
||||
const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
|
||||
const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
|
||||
const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
|
||||
|
||||
const controlPointOffset = Math.abs(x2 - x1) * 0.4;
|
||||
const cx1 = x1 - controlPointOffset;
|
||||
const cy1 = y1 - 40;
|
||||
const cx2 = x2 + controlPointOffset;
|
||||
const cy2 = y2 - 40;
|
||||
|
||||
const path = document.createElementNS(svgNS, "path");
|
||||
const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
|
||||
path.setAttribute("d", d);
|
||||
path.setAttribute("stroke", "url(#timeline-gradient)");
|
||||
path.setAttribute("stroke-width", "4");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
|
||||
svgEl.appendChild(path);
|
||||
}
|
||||
}, [itemsRefs]);
|
||||
|
||||
const setActiveItem = useCallback(
|
||||
(index) => {
|
||||
setCurrentIndex(index);
|
||||
itemsRefs.forEach((ref, i) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
if (i === index) el.classList.add("active");
|
||||
else el.classList.remove("active");
|
||||
});
|
||||
},
|
||||
[itemsRefs]
|
||||
);
|
||||
|
||||
const scrollToItem = useCallback(
|
||||
(index) => {
|
||||
if (index < 0 || index >= itemsRefs.length) return;
|
||||
const scrollContainer = scrollRef.current;
|
||||
const item = itemsRefs[index].current;
|
||||
if (!scrollContainer || !item) return;
|
||||
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const scrollLeft = scrollContainer.scrollLeft;
|
||||
|
||||
const targetScroll =
|
||||
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
|
||||
|
||||
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
||||
setActiveItem(index);
|
||||
},
|
||||
[itemsRefs, setActiveItem]
|
||||
);
|
||||
|
||||
const onPrev = () => {
|
||||
if (currentIndex > 0) scrollToItem(currentIndex - 1);
|
||||
};
|
||||
const onNext = () => {
|
||||
if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
drawCurvedLines();
|
||||
setActiveItem(0);
|
||||
}, 100);
|
||||
|
||||
const scrollContainer = scrollRef.current;
|
||||
let scrollTimeout = null;
|
||||
|
||||
const onScroll = () => {
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = setTimeout(() => {
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const containerCenter = containerRect.left + containerRect.width / 2;
|
||||
|
||||
let closestIndex = 0;
|
||||
let closestDistance = Infinity;
|
||||
|
||||
itemsRefs.forEach((ref, index) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const itemRect = el.getBoundingClientRect();
|
||||
const itemCenter = itemRect.left + itemRect.width / 2;
|
||||
const distance = Math.abs(containerCenter - itemCenter);
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (closestIndex !== currentIndex) {
|
||||
setActiveItem(closestIndex);
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
||||
if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
|
||||
const onResize = () => setTimeout(drawCurvedLines, 120);
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => drawCurvedLines(), 120);
|
||||
}, [itemsRefs, drawCurvedLines, projects.length]);
|
||||
|
||||
const css = `
|
||||
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
|
||||
.projects-timeline-root { direction: rtl; min-height: 100%; }
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
|
||||
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
|
||||
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
|
||||
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
|
||||
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
|
||||
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
|
||||
.timeline-item.active .project-card::before { opacity:1; }
|
||||
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
|
||||
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
|
||||
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
|
||||
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
|
||||
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
|
||||
@media (max-width:768px){
|
||||
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
|
||||
.timeline-item { margin:0 18px; }
|
||||
.year-circle { width:90px; height:90px; font-size:15px; }
|
||||
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
|
||||
.project-card { min-width:260px; max-width:300px; padding:20px; }
|
||||
.project-text { font-size:13px; }
|
||||
.scroll-btn { width:48px; height:48px; font-size:20px; }
|
||||
}
|
||||
|
||||
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
|
||||
.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%)" };
|
||||
|
||||
return (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
<style>{css}</style>
|
||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||
<div className="h-full flex flex-col">
|
||||
{!plain && (
|
||||
<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)" }}>
|
||||
{mainTitle}
|
||||
</h1>
|
||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<div className="flex-1 relative">
|
||||
<div 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} />
|
||||
{projects.map((project, idx) => (
|
||||
<div
|
||||
className="timeline-item"
|
||||
key={idx}
|
||||
ref={itemsRefs[idx]}
|
||||
data-index={idx}
|
||||
onClick={() => scrollToItem(idx)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
|
||||
}}
|
||||
>
|
||||
<div className="year-circle">{project.year}</div>
|
||||
<div className="project-card">
|
||||
<ul className="project-text" aria-live="polite">
|
||||
{project.items.map((it, i) => (
|
||||
<li key={i}>• {it}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scroll-indicator">
|
||||
<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>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const defaultProjects = [
|
||||
{ year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
|
||||
{ year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
|
||||
{ year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
|
||||
];
|
||||
|
||||
export default function DepartmentDetail2() {
|
||||
const [active, setActive] = useState(null);
|
||||
|
||||
const buttons = [
|
||||
{ id: 1, title: "اختصاص القسم", key: "expertise" },
|
||||
{ id: 3, title: "الاعمال المنفذة", key: "works" },
|
||||
];
|
||||
|
||||
const expertiseItems = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تنفيذ المجمعات السكنية والمناطق الخدمية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
),
|
||||
text: ". الأبنية الإدارية والتجارية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
|
||||
</svg>
|
||||
),
|
||||
text: ". الأبنية مسبقة الصنع والساندويش بانل والهنغارات والكرفانات المتنقلة وغرف التبريد"
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
),
|
||||
text: "الأعمال المدنية والمعمارية المتكاملة."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
),
|
||||
text: ". الإكساء الداخلي والخارجي."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
),
|
||||
text: ". الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
|
||||
}
|
||||
];
|
||||
|
||||
const displayItems = expertiseItems;
|
||||
const heroImage = active === "expertise" ? d12 : active === "works" ? d13 : d7;
|
||||
|
||||
const handleButtonClick = (key) => {
|
||||
setActive((prev) => (prev === key ? null : key));
|
||||
};
|
||||
|
||||
return (
|
||||
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
|
||||
<section className="relative">
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={active}
|
||||
initial={{ opacity: 0, scale: 1.05 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.98 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
|
||||
>
|
||||
<img
|
||||
src={heroImage}
|
||||
alt="مرافق سكنية وخدمية"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.25, duration: 0.45 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 z-10 flex items-center pointer-events-none">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{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">
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">يتضمن هذا القسم تنفيذ المشاريع السكنية والخدمية بمختلف أنواعها، ويشمل:</p>
|
||||
</motion.div>
|
||||
) : 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">
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</p>
|
||||
</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">
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم تنفيذ المرافق السكنيه والخدمية</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</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" style={{ zIndex: 99999 }}>
|
||||
<AnimatePresence>
|
||||
{!active && (
|
||||
<motion.div
|
||||
key="floating-buttons"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.45 }}
|
||||
className="w-full max-w-7xl mx-auto"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
||||
{buttons.map((b, index) => (
|
||||
<motion.button
|
||||
key={b.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
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"
|
||||
>
|
||||
<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="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<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}
|
||||
</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>
|
||||
</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">
|
||||
<span>انقر للاطّلاع على التفاصيل</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">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
{!active ? (
|
||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
||||
) : 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.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>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
||||
<ProjectsTimeline projects={defaultProjects} plain={true} />
|
||||
</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.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>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
{displayItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.25 }}
|
||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||
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-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">
|
||||
{item.icon}
|
||||
</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>
|
||||
|
||||
<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">{item.text}</p>
|
||||
</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">
|
||||
<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>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.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">
|
||||
<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" />
|
||||
<span className="text-xs sm:text-sm font-medium">خدمات احترافية متكاملة</span>
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -11,34 +11,35 @@ import { useNavigate } from "react-router-dom";
|
||||
|
||||
// images
|
||||
import d1 from "../../../../src/assets/Images/d1.jpeg";
|
||||
import d2 from "../../../../src/assets/Images/d2.jpeg";
|
||||
import d3 from "../../../../src/assets/Images/d3.jpeg";
|
||||
import d4 from "../../../../src/assets/Images/d4.jpeg";
|
||||
import d5 from "../../../../src/assets/Images/d5.jpeg";
|
||||
import d6 from "../../../../src/assets/Images/d6.jpeg";
|
||||
import d7 from "../../../../src/assets/Images/d7.png";
|
||||
import d8 from "../../../../src/assets/Images/d8.png";
|
||||
import d9 from "../../../../src/assets/Images/d9.png";
|
||||
import d7 from "../../../../src/assets/Images/d7.jpeg";
|
||||
import d14 from "../../../../src/assets/Images/d14.jpg";
|
||||
import d17 from "../../../../src/assets/Images/d17.png";
|
||||
import d18 from "../../../../src/assets/Images/d18.jpg";
|
||||
import d19 from "../../../../src/assets/Images/d19.jpeg";
|
||||
import d20 from "../../../../src/assets/Images/d20.jpeg";
|
||||
import d21 from "../../../../src/assets/Images/d21.jpeg";
|
||||
import d22 from "../../../../src/assets/Images/d22.jpg";
|
||||
|
||||
|
||||
|
||||
|
||||
// بيانات الأقسام
|
||||
const departments = [
|
||||
{ id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
|
||||
{ id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d2 },
|
||||
{ id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d3 },
|
||||
{ id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d4 },
|
||||
{ id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d5 },
|
||||
{ id: 6, title: "قسم المشاريع الاستراتيجية", image: d6 },
|
||||
{ id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d7 },
|
||||
{ id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d8 },
|
||||
{ id: 9, title: "قسم الاتمتة والتحكم", image: d9 },
|
||||
{ id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
|
||||
{ id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
|
||||
{ id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
|
||||
{ id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d18 },
|
||||
{ id: 6, title: "قسم المشاريع الاستراتيجية", image: d19 },
|
||||
{ id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d20 },
|
||||
{ id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d21 },
|
||||
{ id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
|
||||
|
||||
];
|
||||
|
||||
// بطاقة القسم
|
||||
function DepartmentCard({ dept, offset }) {
|
||||
const navigate = useNavigate();
|
||||
const wrapperRef = useRef(null);
|
||||
|
||||
// mouse tilt
|
||||
const rotateX = useMotionValue(0);
|
||||
const rotateY = useMotionValue(0);
|
||||
const scale = useMotionValue(1);
|
||||
@ -66,7 +67,6 @@ function DepartmentCard({ dept, offset }) {
|
||||
scale.set(1);
|
||||
};
|
||||
|
||||
// scroll parallax
|
||||
const { scrollY, scrollYProgress } = useScroll({ target: wrapperRef });
|
||||
const velocity = useVelocity(scrollY);
|
||||
const smoothVelocity = useSpring(velocity, {
|
||||
@ -91,6 +91,14 @@ function DepartmentCard({ dept, offset }) {
|
||||
([v, p]) => v + p
|
||||
);
|
||||
|
||||
const handleClick = () => {
|
||||
if (dept.id === 2) {
|
||||
navigate("/department-detail2");
|
||||
} else {
|
||||
navigate(`/departments/${dept.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
@ -99,7 +107,6 @@ function DepartmentCard({ dept, offset }) {
|
||||
style={{ perspective: 1400 }}
|
||||
className={`relative w-full ${offset}`}
|
||||
>
|
||||
{/* العنوان */}
|
||||
<div className="absolute bottom-6 right-[-32px] z-40 pointer-events-none max-w-xs">
|
||||
<motion.span
|
||||
style={{ translateZ: titleZ }}
|
||||
@ -112,12 +119,11 @@ function DepartmentCard({ dept, offset }) {
|
||||
</motion.span>
|
||||
</div>
|
||||
|
||||
{/* الصورة */}
|
||||
<motion.img
|
||||
src={dept.image}
|
||||
alt={dept.title}
|
||||
draggable={false}
|
||||
onClick={() => navigate(`/departments/${dept.id}`)}
|
||||
onClick={handleClick}
|
||||
style={{
|
||||
rotateX: rx,
|
||||
rotateY: ry,
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import { Button, Dropdown } from "flowbite-react";
|
||||
import styled from 'styled-components';
|
||||
import { Element } from "react-scroll";
|
||||
import Departments from "../Departments/Departments";
|
||||
|
||||
export default function EngineeringHeroFlowbite() {
|
||||
const defaultConfig = {
|
||||
main_title: "حلول هندسية متكاملة",
|
||||
subtitle: "نصمم ونبني المستقبل بخبرة ودقة واحترافية",
|
||||
main_title: "شريكك الهندسي لتنفيذ وإدارة المشاريع باحتراف",
|
||||
subtitle:
|
||||
"حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
|
||||
primary_color: "#e67e22",
|
||||
background_color: "#000000",
|
||||
text_color: "#ffffff",
|
||||
@ -15,9 +18,11 @@ export default function EngineeringHeroFlowbite() {
|
||||
};
|
||||
|
||||
const [config, setConfig] = useState(defaultConfig);
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
const mainTitleRef = useRef(null);
|
||||
const subtitleRef = useRef(null);
|
||||
const departmentsRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const id = "cairo-font-link";
|
||||
@ -30,6 +35,12 @@ export default function EngineeringHeroFlowbite() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// slight delay to ensure mount then trigger animations
|
||||
const t = setTimeout(() => setIsMounted(true), 60);
|
||||
return () => clearTimeout(t);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const main = mainTitleRef.current;
|
||||
const sub = subtitleRef.current;
|
||||
@ -38,17 +49,35 @@ export default function EngineeringHeroFlowbite() {
|
||||
const baseSize = config.font_size || defaultConfig.font_size;
|
||||
|
||||
if (main) {
|
||||
main.textContent = config.main_title || defaultConfig.main_title;
|
||||
const headingText = (config.main_title || defaultConfig.main_title)
|
||||
.split("\n")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
if (headingText.length === 1) {
|
||||
main.textContent = headingText[0];
|
||||
} 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
|
||||
.slice(1)
|
||||
.join("<br/>")}</span>`;
|
||||
}
|
||||
|
||||
main.style.fontFamily = font;
|
||||
main.style.fontSize = `${baseSize * 4}px`;
|
||||
main.style.fontSize = `${baseSize * 3.8}px`;
|
||||
main.style.color = config.text_color || defaultConfig.text_color;
|
||||
main.style.fontWeight = 800;
|
||||
main.style.textAlign = "right";
|
||||
}
|
||||
|
||||
if (sub) {
|
||||
sub.textContent = config.subtitle || defaultConfig.subtitle;
|
||||
sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
|
||||
.split("\n")
|
||||
.map((s) => `<div>${s.trim()}</div>`)
|
||||
.join("");
|
||||
sub.style.fontFamily = font;
|
||||
sub.style.fontSize = `${baseSize * 1.75}px`;
|
||||
sub.style.fontSize = `${baseSize * 1.1}px`;
|
||||
sub.style.color = config.text_color || defaultConfig.text_color;
|
||||
sub.style.textAlign = "right";
|
||||
sub.style.maxWidth = "800px";
|
||||
}
|
||||
|
||||
const root = document.documentElement;
|
||||
@ -139,127 +168,302 @@ export default function EngineeringHeroFlowbite() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const goToDepartments = (e) => {
|
||||
e && e.preventDefault && e.preventDefault();
|
||||
const el = document.getElementById("departments");
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
} else {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
const OrangeActionButton = ({ onClick, children }) => {
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<button className="button" onClick={onClick} aria-label="تعرف على أقسامنا">
|
||||
{children}
|
||||
<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>
|
||||
</button>
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: 'var(--ehb-background, #000000)' }}>
|
||||
<style>{`
|
||||
<div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: "var(--ehb-background, #000000)" }}>
|
||||
<style>{`
|
||||
:root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
|
||||
.logo-container{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--ehb-background) 0%, #34495e 100%);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeOutContainer 0.5s ease-out 4s forwards}
|
||||
.logo{width:80px;height:80px;border-radius:12px;position:absolute;opacity:0;transform:translateY(100%);display:flex;align-items:center;justify-content:center;background:transparent}
|
||||
.logo img{max-width:70%;max-height:70%;object-fit:contain;display:block}
|
||||
.logo-1{animation:jumpIn 0.6s ease-out 0.2s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
|
||||
.logo-2{animation:jumpIn 0.6s ease-out 0.4s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
|
||||
.logo-3{animation:jumpIn 0.6s ease-out 0.6s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
|
||||
.final-logo{width:120px;height:120px;background:transparent;border-radius:16px;position:absolute;opacity:0;transform:scale(0);animation:finalLogoAppear 0.6s ease-out 2.8s forwards;display:flex;align-items:center;justify-content:center}
|
||||
.final-logo img{max-width:80%;max-height:80%;object-fit:contain;display:block}
|
||||
@keyframes jumpIn{0%{opacity:0;transform:translateY(100%)}60%{transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
|
||||
@keyframes moveToMerge{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
|
||||
@keyframes finalLogoAppear{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
|
||||
@keyframes fadeOutContainer{to{opacity:0;visibility:hidden}}
|
||||
.hero-section{position:relative;width:100%;height:100%;overflow:hidden;opacity:0;animation:fadeInHero 1s ease-out 4.5s forwards}
|
||||
@keyframes fadeInHero{to{opacity:1}}
|
||||
|
||||
.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-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:40px;gap:2rem;direction:ltr;flex-direction:row}
|
||||
.hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px}
|
||||
.hero-left img{max-width:100%;height:auto;display:block}
|
||||
.hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
|
||||
.hero-title{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6s forwards}
|
||||
.hero-subtitle{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6.3s forwards}
|
||||
@keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}
|
||||
.hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}
|
||||
|
||||
/* Brighter, more luminous navy glows: stronger cores, additional layered highlights, subtle lens flare and increased saturation */
|
||||
.navy-glow{position:absolute;pointer-events:none;z-index:4;opacity:1;transform:translateZ(0);mix-blend-mode:screen;filter:blur(160px) saturate(160%);transition:opacity .45s ease, transform .45s ease, filter .45s ease;will-change:opacity,transform,filter}
|
||||
/* BIG IMAGE: slide-in slower, with delay */
|
||||
.hero-left img{ max-width:100%; height:auto; display:block; transform: translateX(-20px) scale(0.995); opacity:1; will-change: transform, opacity; }
|
||||
.hero-section.is-mounted .hero-left img{
|
||||
transform: translateX(-120px) scale(0.96);
|
||||
opacity: 0;
|
||||
animation: slideInLeft 1200ms cubic-bezier(.2,.9,.2,1) 200ms both;
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
0% { transform: translateX(-140px) scale(0.96); opacity: 0; filter: blur(2px); }
|
||||
65% { transform: translateX(18px) scale(1.02); opacity: 1; filter: blur(0); }
|
||||
100% { transform: translateX(0) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* bottom-left glow: very bright core + warm accent rim for contrast */
|
||||
.navy-glow.bottom-left{left:0;bottom:0;width:90vh;height:90vh;border-radius:50%;
|
||||
background: radial-gradient(circle at 15% 88%, rgba(10,34,78,0.98) 0%, rgba(22,54,110,0.76) 18%, rgba(40,78,140,0.48) 36%, rgba(6,23,58,0) 62%);
|
||||
box-shadow: 0 0 120px 32px rgba(10,34,78,0.12), inset 0 0 140px 10px rgba(230,126,34,0.035);
|
||||
animation: glowFloat 9s ease-in-out infinite alternate, glowPulse 5.8s ease-in-out infinite;}
|
||||
/* partner bubbles - pop slower and float slower */
|
||||
.partner-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
|
||||
.partner-bubble{
|
||||
width:110px;height:110px;border-radius:9999px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
|
||||
transform-origin:center;
|
||||
transform: translateY(10px) scale(0.9);
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.hero-section.is-mounted .partner-bubble{
|
||||
animation:
|
||||
popIn 900ms cubic-bezier(.2,.9,.2,1) both,
|
||||
floatBubble 5s ease-in-out 1100ms infinite;
|
||||
}
|
||||
.partner-bubble img{max-width:72%;max-height:72%;object-fit:contain;filter:grayscale(0.06) saturate(0.95)}
|
||||
.partner-bubble:hover{transform:translateY(-10px) scale(1.08);box-shadow:0 34px 72px rgba(0,0,0,0.55)}
|
||||
|
||||
/* layered depth */
|
||||
.navy-glow.bottom-left::before, .navy-glow.bottom-left::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
|
||||
.navy-glow.bottom-left::before{background: radial-gradient(circle at 22% 78%, rgba(120,170,220,0.22), rgba(120,170,220,0) 46%);transform:scale(0.95);filter:blur(42px);opacity:0.96}
|
||||
.navy-glow.bottom-left::after{background: radial-gradient(circle at 42% 92%, rgba(230,126,34,0.12), rgba(230,126,34,0) 52%);transform:scale(0.7);filter:blur(30px);opacity:0.7}
|
||||
/* tiny bright flare center */
|
||||
.navy-glow.bottom-left .flare{position:absolute;left:18%;bottom:20%;width:18vh;height:18vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 8%, rgba(10,34,78,0.0) 45%);filter:blur(28px);opacity:0.95}
|
||||
@keyframes popIn {
|
||||
0% { transform: translateY(30px) scale(0.6); opacity: 0; filter: blur(2px); }
|
||||
65% { transform: translateY(-10px) scale(1.06); opacity: 1; filter: blur(0); }
|
||||
100% { transform: translateY(0) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* top-right glow: tighter and brighter to balance composition */
|
||||
.navy-glow.top-right{right:0;top:0;width:78vh;height:78vh;border-radius:50%;
|
||||
background: radial-gradient(circle at 88% 12%, rgba(12,36,82,0.98) 0%, rgba(20,44,88,0.72) 16%, rgba(44,78,140,0.38) 36%, rgba(6,23,58,0) 62%);
|
||||
box-shadow: 0 0 110px 24px rgba(44,78,140,0.08), inset 0 0 120px 6px rgba(255,255,255,0.02);
|
||||
animation: glowFloat 11.5s ease-in-out infinite alternate, glowPulse 6.6s ease-in-out infinite}
|
||||
@keyframes floatBubble{0%{transform:translateY(0) scale(1)}25%{transform:translateY(-10px) scale(1.03)}50%{transform:translateY(-24px) scale(1.07)}75%{transform:translateY(-10px) scale(1.03)}100%{transform:translateY(0) scale(1)}}
|
||||
|
||||
.navy-glow.top-right::before, .navy-glow.top-right::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
|
||||
.navy-glow.top-right::before{background: radial-gradient(circle at 70% 30%, rgba(160,200,255,0.18), rgba(160,200,255,0) 48%);transform:scale(0.94);filter:blur(40px);opacity:0.98}
|
||||
.navy-glow.top-right::after{background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%);transform:scale(0.62);filter:blur(24px);opacity:0.6}
|
||||
.navy-glow.top-right .flare{position:absolute;right:14%;top:12%;width:10vh;height:10vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.28) 10%, rgba(12,36,82,0) 48%);filter:blur(20px);opacity:0.9}
|
||||
/* partner strip */
|
||||
.partner-strip-wrap{position:fixed;left:0;bottom:14px;z-index:30;pointer-events:auto;width:100%;display:flex;justify-content:flex-start;padding-left:40px;padding-right:40px}
|
||||
.partner-strip{backface-visibility:hidden;transform-style:preserve-3d;perspective:1000px;display:flex;align-items:center;gap:18px;padding:12px 20px;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,0.55);
|
||||
background:linear-gradient(90deg, rgba(6,23,58,0.98) 0%, rgba(30,50,90,0.9) 35%, rgba(230,126,34,0.98) 100%);
|
||||
transform: translateX(-120%) translateZ(0) rotateX(6deg) skewY(-2deg);
|
||||
animation: slideInStrip 1600ms cubic-bezier(.2,.9,.2,1) 600ms forwards;
|
||||
will-change:transform,opacity;
|
||||
}
|
||||
@keyframes slideInStrip{
|
||||
0%{opacity:0;transform:translateX(-120%) translateZ(0) rotateX(8deg) skewY(-4deg) scale(0.98)}
|
||||
70%{transform:translateX(12px) translateZ(6px) rotateX(2deg) skewY(-1deg) scale(1.01);opacity:1}
|
||||
100%{transform:translateX(0) translateZ(10px) rotateX(0deg) skewY(0deg) scale(1);opacity:1}
|
||||
}
|
||||
|
||||
/* slightly stronger pulse and float so glow reads as illuminated but stays subtle */
|
||||
@keyframes glowFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-22px) scale(1.045)}}
|
||||
@keyframes glowPulse{0%{opacity:1}50%{opacity:0.66}100%{opacity:1}}
|
||||
.partner-item{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:10px;min-width:84px;min-height:48px;background:rgba(255,255,255,0.04);backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(0,0,0,0.45);transition:transform 400ms cubic-bezier(.2,.9,.2,1),box-shadow 400ms}
|
||||
.partner-item img{max-height:36px;max-width:140px;object-fit:contain;display:block;filter:grayscale(0.06) saturate(0.95)}
|
||||
.partner-item:hover{transform:translateY(-6px) translateZ(18px) rotateX(6deg);box-shadow:0 30px 50px rgba(0,0,0,0.55)}
|
||||
|
||||
/* small responsive tweak so glows don't overwhelm on narrow screens */
|
||||
@media (max-width: 1024px){
|
||||
.partner-strip{padding:10px 14px;border-radius:12px}
|
||||
.partner-item{min-width:72px;min-height:44px}
|
||||
.partner-item img{max-height:30px}
|
||||
.partner-strip-wrap{padding-left:20px;padding-right:20px;bottom:10px}
|
||||
}
|
||||
@media (max-width: 640px){
|
||||
.navy-glow.bottom-left{width:56vh;height:56vh;filter:blur(110px)}
|
||||
.navy-glow.top-right{width:50vh;height:50vh;filter:blur(106px)}
|
||||
.navy-glow.bottom-left .flare, .navy-glow.top-right .flare{display:none}
|
||||
.partner-strip{gap:10px;padding:8px;border-radius:10px}
|
||||
.partner-item img{max-height:24px}
|
||||
.partner-logos{gap:12px}
|
||||
.partner-bubble{width:84px;height:84px}
|
||||
}
|
||||
|
||||
/* HERO TEXT: slide from right (slower) */
|
||||
.hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
|
||||
.hero-title{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
|
||||
.hero-subtitle{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
|
||||
|
||||
.hero-section.is-mounted .hero-title{
|
||||
opacity:0;
|
||||
transform: translateX(120px) translateY(10px) scale(0.995);
|
||||
animation: slideFromRight 1000ms cubic-bezier(.2,.9,.2,1) 260ms both;
|
||||
}
|
||||
.hero-section.is-mounted .hero-subtitle{
|
||||
opacity:0;
|
||||
transform: translateX(96px) translateY(6px) scale(0.995);
|
||||
animation: slideFromRight 1000ms cubic-bezier(.2,.9,.2,1) 520ms both;
|
||||
}
|
||||
@keyframes slideFromRight {
|
||||
0% { opacity:0; transform: translateX(120px) translateY(18px) scale(0.98); filter: blur(2px); }
|
||||
65% { transform: translateX(-8px) translateY(-8px) scale(1.02); opacity:1; filter: blur(0); }
|
||||
100% { opacity:1; transform: translateX(0) translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.navy-glow{position:absolute;pointer-events:none;filter:blur(120px);z-index:4;opacity:1}
|
||||
.navy-glow.bottom-left{left:0;bottom:0;width:80vh;height:80vh;background:radial-gradient(circle at 10% 90%, rgba(6,23,58,0.98), rgba(6,23,58,0.7), rgba(6,23,58,0.35) 40%, rgba(6,23,58,0) 70%)}
|
||||
.navy-glow.top-right{right:0;top:0;width:70vh;height:70vh;background:radial-gradient(circle at 90% 10%, rgba(6,23,58,0.95), rgba(6,23,58,0.6), rgba(6,23,58,0.3) 40%, rgba(6,23,58,0) 70%)}
|
||||
@media (max-width: 768px){
|
||||
.hero-layout{flex-direction:column;align-items:center;text-align:center}
|
||||
.hero-content{align-items:center}
|
||||
.hero-title{font-size:calc(var(--base,16px) * 2.2) !important}
|
||||
}
|
||||
|
||||
/* BUTTON: slower pop-in */
|
||||
.button {
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1.25rem;
|
||||
background-color: var(--ehb-primary, #e67e22);
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffff;
|
||||
gap: 10px;
|
||||
font-weight: bold;
|
||||
border: 3px solid #ffffff4d;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-section.is-mounted .button{
|
||||
transform: scale(0.6);
|
||||
opacity: 0;
|
||||
animation: popIn 900ms cubic-bezier(.2,.9,.2,1) 760ms both;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
|
||||
.button:hover { transform: scale(1.05); border-color: #fff9; }
|
||||
.button:hover .icon { transform: translate(4px); }
|
||||
.button:hover::before { animation: shine 1.5s ease-out infinite; }
|
||||
|
||||
.button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(
|
||||
120deg,
|
||||
rgba(255, 255, 255, 0) 30%,
|
||||
rgba(255, 255, 255, 0.8),
|
||||
rgba(255, 255, 255, 0) 70%
|
||||
);
|
||||
top: 0;
|
||||
left: -100px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
0% { transform: translateY(30px) scale(0.6); opacity: 0; filter: blur(2px); }
|
||||
65% { transform: translateY(-10px) scale(1.06); opacity: 1; filter: blur(0); }
|
||||
100% { transform: translateY(0) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { left: -100px; }
|
||||
60% { left: 100%; }
|
||||
to { left: 100%; }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="logo-container">
|
||||
<div className="logo logo-1" style={{ left: 'calc(50% - 200px)' }}>
|
||||
<img src="src/assets/TPS-logo.png" alt="TPS logo" />
|
||||
</div>
|
||||
<div className="logo logo-2" style={{ left: 'calc(50% - 40px)' }}>
|
||||
<img src="src/assets/NSC.png" alt="NSC logo" />
|
||||
</div>
|
||||
<div className="logo logo-3" style={{ left: 'calc(50% + 120px)' }}>
|
||||
<img src="src/assets/LOGO.png" alt="LOGO" />
|
||||
</div>
|
||||
<div className="final-logo">
|
||||
<img src="src/assets/REXNT.png" alt="REXNT" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hero-section">
|
||||
{/* removed the previous hero-image background as requested */}
|
||||
|
||||
<div className="navy-glow bottom-left"><div className="flare" /></div>
|
||||
<div className="navy-glow top-right"><div className="flare" /></div>
|
||||
|
||||
<div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
|
||||
<div className="navy-glow bottom-left" />
|
||||
<div className="navy-glow top-right" />
|
||||
<div className="hero-overlay" />
|
||||
|
||||
<div className="hero-layout">
|
||||
<div className="hero-left">
|
||||
<img src="src/assets/REXNT.png" alt="REXNT" />
|
||||
|
||||
<div className="partner-logos" aria-hidden>
|
||||
<div className="partner-bubble" style={{ animationDelay: "0ms" }} aria-label="شريك TPS">
|
||||
<img src="src/assets/TPS-logo.png" alt="TPS" />
|
||||
</div>
|
||||
<div className="partner-bubble" style={{ animationDelay: "180ms" }} aria-label="شريك NSC">
|
||||
<img src="src/assets/NSC.png" alt="NSC" />
|
||||
</div>
|
||||
<div className="partner-bubble" style={{ animationDelay: "360ms" }} aria-label="شريك LOGO">
|
||||
<img src="src/assets/LOGO.png" alt="LOGO" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hero-content">
|
||||
<h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 24, textShadow: '2px 2px 8px rgba(0,0,0,0.5)' }} />
|
||||
|
||||
<p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: '1px 1px 4px rgba(0,0,0,0.5)' }} />
|
||||
|
||||
<div className="mt-8 flex items-center gap-6 justify-end">
|
||||
<Button color="light" onClick={() => window?.scrollTo?.({ top: 0, behavior: 'smooth' })}>ابدأ</Button>
|
||||
|
||||
<div className="relative">
|
||||
<Button onClick={() => setDropdownOpen((s) => !s)} className="bg-[var(--ehb-primary)] text-black font-semibold">
|
||||
تواصل معنا
|
||||
</Button>
|
||||
|
||||
{dropdownOpen && (
|
||||
<div className="absolute mt-3 right-0 bg-[#06173a] border border-white/10 rounded p-3 text-white shadow-2xl">
|
||||
<a className="flex items-center gap-3 py-2 px-3 hover:underline" href="https://wa.me/963965656631" target="_blank" rel="noreferrer">📱 <span>+963965656631</span></a>
|
||||
<a className="flex items-center gap-3 py-2 px-3 hover:underline" href="mailto:info@TPS-STATIONS.COM">✉️ <span>info@TPS-STATIONS.COM</span></a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
<h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 16, textShadow: "2px 2px 10px rgba(0,0,0,0.6)" }} />
|
||||
<p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: "1px 1px 6px rgba(0,0,0,0.45)", lineHeight: 1.6 }} />
|
||||
<div style={{ marginTop: 18 }}>
|
||||
<OrangeActionButton onClick={goToDepartments}>تعرف على أقسامنا</OrangeActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="partner-strip-wrap" aria-hidden>
|
||||
<div className="partner-strip" role="presentation" aria-hidden>
|
||||
<div className="partner-item" aria-label="شريك TPS">
|
||||
<img src="src/assets/TPS-logo.png" alt="TPS" />
|
||||
</div>
|
||||
<div className="partner-item" aria-label="شريك NSC">
|
||||
<img src="src/assets/NSC.png" alt="NSC" />
|
||||
</div>
|
||||
<div className="partner-item" aria-label="شريك LOGO">
|
||||
<img src="src/assets/LOGO.png" alt="LOGO" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Element name="departments" id="departments">
|
||||
<Departments />
|
||||
</Element>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
.button {
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1.25rem;
|
||||
background-color: var(--ehb-primary, #e67e22);
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffff;
|
||||
gap: 10px;
|
||||
font-weight: bold;
|
||||
border: 3px solid #ffffff4d;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
|
||||
|
||||
.button:hover { transform: scale(1.05); border-color: #fff9; }
|
||||
.button:hover .icon { transform: translate(4px); }
|
||||
.button:hover::before { animation: shine 1.5s ease-out infinite; }
|
||||
|
||||
.button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(
|
||||
120deg,
|
||||
rgba(255, 255, 255, 0) 30%,
|
||||
rgba(255, 255, 255, 0.8),
|
||||
rgba(255, 255, 255, 0) 70%
|
||||
);
|
||||
top: 0;
|
||||
left: -100px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { left: -100px; }
|
||||
60% { left: 100%; }
|
||||
to { left: 100%; }
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user