Compare commits
4 Commits
330a0d1ff1
...
d087d2128a
| Author | SHA1 | Date | |
|---|---|---|---|
| d087d2128a | |||
| eec832ac17 | |||
| 22840a6ba2 | |||
| 7ad7dff0da |
1157
package-lock.json
generated
1157
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,7 +12,10 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emailjs/browser": "^4.4.1",
|
"@emailjs/browser": "^4.4.1",
|
||||||
"@heroicons/react": "^2.2.0",
|
"@heroicons/react": "^2.2.0",
|
||||||
|
"@heroicons/react": "^2.2.0",
|
||||||
"aos": "^2.3.4",
|
"aos": "^2.3.4",
|
||||||
|
"flowbite": "^4.0.1",
|
||||||
|
"flowbite-react": "^0.12.16",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"framer-motion": "^12.23.26",
|
"framer-motion": "^12.23.26",
|
||||||
"i18next": "^25.7.3",
|
"i18next": "^25.7.3",
|
||||||
@ -22,6 +25,9 @@
|
|||||||
"react-dom": "^19.2.0",
|
"react-dom": "^19.2.0",
|
||||||
"react-i18next": "^16.5.0",
|
"react-i18next": "^16.5.0",
|
||||||
"react-icons": "^5.5.0",
|
"react-icons": "^5.5.0",
|
||||||
|
"react-router-dom": "^7.11.0",
|
||||||
|
"react-scroll": "^1.9.3",
|
||||||
|
"styled-components": "^6.1.19"
|
||||||
"react-scroll": "^1.9.3",
|
"react-scroll": "^1.9.3",
|
||||||
"styled-components": "^6.1.19",
|
"styled-components": "^6.1.19",
|
||||||
"tailwind-merge": "^3.4.0",
|
"tailwind-merge": "^3.4.0",
|
||||||
@ -41,6 +47,7 @@
|
|||||||
"globals": "^16.5.0",
|
"globals": "^16.5.0",
|
||||||
"postcss": "^8.5.6",
|
"postcss": "^8.5.6",
|
||||||
"tailwindcss": "^3.4.0",
|
"tailwindcss": "^3.4.0",
|
||||||
|
"tailwindcss": "^3.4.0",
|
||||||
"vite": "^7.2.4"
|
"vite": "^7.2.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
151
src/App.jsx
151
src/App.jsx
@ -1,80 +1,97 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
// src/App.jsx
|
||||||
|
import React from "react";
|
||||||
|
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
|
||||||
|
import { AnimatePresence, LayoutGroup } from "framer-motion";
|
||||||
|
|
||||||
import "./i18n";
|
import "./i18n";
|
||||||
|
import "./App.css";
|
||||||
|
|
||||||
import Navbar from "./Components/Nav/Navbar";
|
import Navbar from "./Components/Nav/Navbar";
|
||||||
import Home from "./Components/Sections/Home/Home";
|
import Home from "./Components/Sections/Home/Home";
|
||||||
import Services from "./Components/Sections/Services/Services";
|
import Services from "./Components/Sections/Services/Services";
|
||||||
import About from "./Components/Sections/About/About";
|
import About from "./Components/Sections/About/About";
|
||||||
|
import Departments from "./Components/Sections/Departments/Departments";
|
||||||
|
import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
|
||||||
import Contact from "./Components/Sections/Contact/Contact";
|
import Contact from "./Components/Sections/Contact/Contact";
|
||||||
import ImagePreloader from "./Components/ImagePreloader";
|
|
||||||
import Footer from "./Components/Nav/Footer";
|
import Footer from "./Components/Nav/Footer";
|
||||||
import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
|
import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
|
||||||
import "./App.css";
|
|
||||||
|
|
||||||
const App = () => {
|
|
||||||
const [theme, setTheme] = useState("light");
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("Current theme:", theme);
|
|
||||||
console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
|
|
||||||
|
|
||||||
const canvas = document.querySelector('.background-canvas');
|
|
||||||
if (canvas) {
|
|
||||||
console.log("Canvas found:", canvas);
|
|
||||||
console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
|
|
||||||
console.log("Canvas position:", canvas.style.position);
|
|
||||||
console.log("Canvas z-index:", canvas.style.zIndex);
|
|
||||||
} else {
|
|
||||||
console.log("Canvas NOT found!");
|
|
||||||
}
|
|
||||||
}, [theme]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const savedTheme = localStorage.getItem("theme");
|
|
||||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
||||||
|
|
||||||
if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
|
|
||||||
setTheme("dark");
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.remove("dark");
|
|
||||||
setTheme("light");
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const toggleTheme = () => {
|
|
||||||
const newTheme = theme === "light" ? "dark" : "light";
|
|
||||||
setTheme(newTheme);
|
|
||||||
|
|
||||||
if (newTheme === "dark") {
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.remove("dark");
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage.setItem("theme", newTheme);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
/* MainPage — الصفحة التي تحتوي على الأقسام المجمعة (لا تتضمن Navbar هنا) */
|
||||||
|
const MainPage = () => {
|
||||||
return (
|
return (
|
||||||
<ImagePreloader>
|
<div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
|
||||||
<div className="relative min-h-screen bg-transparent">
|
<div className="flex flex-col min-h-screen">
|
||||||
<BackgroundCanvas theme={theme} />
|
<main className="flex-grow">
|
||||||
<div className="relative z-10">
|
<Home />
|
||||||
<div className="min-h-screen bg-transparent">
|
<Services />
|
||||||
<div className="flex flex-col min-h-screen">
|
<About />
|
||||||
<Navbar toggleTheme={toggleTheme} currentTheme={theme} />
|
<Departments />
|
||||||
<main className="flex-grow">
|
<Contact />
|
||||||
{/* <Home /> */}
|
</main>
|
||||||
<Services />
|
<Footer />
|
||||||
<About theme={theme} />
|
|
||||||
<Contact />
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</ImagePreloader>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
/* Router view يستخدم useLocation مع AnimatePresence */
|
||||||
|
function RouterView() {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LayoutGroup>
|
||||||
|
<AnimatePresence mode="wait" initial={false}>
|
||||||
|
<Routes location={location} key={location.pathname}>
|
||||||
|
<Route path="/" element={<MainPage />} />
|
||||||
|
<Route path="/departments/:id" element={<DepartmentDetail />} />
|
||||||
|
<Route path="/department-detail2" element={<DepartmentDetail2 />} />
|
||||||
|
{/* أضف مسارات إضافية هنا إذا احتجت */}
|
||||||
|
</Routes>
|
||||||
|
</AnimatePresence>
|
||||||
|
</LayoutGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout: يقرر متى يُعرض الـ Navbar بناءً على الـ pathname */
|
||||||
|
function Layout() {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
// هنا ضع المسارات أو الأنماط التي تريد إخفاء الـ Navbar فيها
|
||||||
|
const excludedExactPaths = [
|
||||||
|
"/department-detail2",
|
||||||
|
// أضف مسارات أخرى تريد إخفاء navbar فيها بنفس الشكل
|
||||||
|
];
|
||||||
|
|
||||||
|
// أمثلة على أنماط: إخفاء لكل ما يبدأ بـ /departments/
|
||||||
|
const excludedPrefixes = ["/departments/"];
|
||||||
|
|
||||||
|
const isExcludedExact = excludedExactPaths.includes(location.pathname);
|
||||||
|
const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));
|
||||||
|
|
||||||
|
const hideNavbar = isExcludedExact || isExcludedPrefix;
|
||||||
|
|
||||||
|
// ارتفاع الـ Navbar المستخدم كـ padding-top عندما يكون ظاهرًا (يتوافق مع height في Navbar.jsx)
|
||||||
|
const navbarHeight = hideNavbar ? 0 : 56;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Navbar يظهر فقط عندما hideNavbar === false */}
|
||||||
|
{!hideNavbar && <Navbar />}
|
||||||
|
|
||||||
|
{/* نضع الـ RouterView داخل حاوية لها padding-top مساوٍ لارتفاع الـ navbar عند ظهوره */}
|
||||||
|
<div style={{ paddingTop: navbarHeight }}>
|
||||||
|
<RouterView />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Layout />
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|||||||
@ -1,22 +1,22 @@
|
|||||||
import { useState, useEffect } from "react";
|
// import { useState, useEffect } from "react";
|
||||||
|
|
||||||
// Import all images statically
|
// // Import all images statically
|
||||||
// import home1 from "../assets/home1.jpg";
|
// // import home1 from "../assets/home1.jpg";
|
||||||
// import home1Mobile from "../assets/home1-2.jpg";
|
// // import home1Mobile from "../assets/home1-2.jpg";
|
||||||
// import home2 from "../assets/home2.jpg";
|
// // import home2 from "../assets/home2.jpg";
|
||||||
// import home2Mobile from "../assets/home2-2.jpg";
|
// // import home2Mobile from "../assets/home2-2.jpg";
|
||||||
// import home3 from "../assets/home3.png";
|
// // import home3 from "../assets/home3.png";
|
||||||
// import home4 from "../assets/home4.png";
|
// // import home4 from "../assets/home4.png";
|
||||||
// // import home4Mobile from "../assets/home4-2.jpg";
|
// // // import home4Mobile from "../assets/home4-2.jpg";
|
||||||
// import home5 from "../assets/home5.png";
|
// // import home5 from "../assets/home5.png";
|
||||||
// import home6 from "../assets/home6.jpg";
|
// // import home6 from "../assets/home6.jpg";
|
||||||
// import home6Mobile from "../assets/home6-2.jpg";
|
// // import home6Mobile from "../assets/home6-2.jpg";
|
||||||
// import home7 from "../assets/home7.jpg";
|
// // import home7 from "../assets/home7.jpg";
|
||||||
// import home7Mobile from "../assets/home7-2.jpg";
|
// // import home7Mobile from "../assets/home7-2.jpg";
|
||||||
// import home8 from "../assets/home8.jpg";
|
// // import home8 from "../assets/home8.jpg";
|
||||||
// import home8Mobile from "../assets/home8-2.jpg";
|
// // import home8Mobile from "../assets/home8-2.jpg";
|
||||||
// import home9 from "../assets/home9.jpg";
|
// // import home9 from "../assets/home9.jpg";
|
||||||
// import home10 from "../assets/home10.jpg";
|
// // import home10 from "../assets/home10.jpg";
|
||||||
|
|
||||||
// Services images
|
// Services images
|
||||||
// import gasStation from "../assets/Images/gasstation.jpg";
|
// import gasStation from "../assets/Images/gasstation.jpg";
|
||||||
@ -44,293 +44,293 @@ const imagesToPreload = [
|
|||||||
// Services images
|
// Services images
|
||||||
// gasStation,
|
// gasStation,
|
||||||
|
|
||||||
];
|
// ];
|
||||||
|
|
||||||
const ImagePreloader = ({ children }) => {
|
// const ImagePreloader = ({ children }) => {
|
||||||
const [imagesLoaded, setImagesLoaded] = useState(false);
|
// const [imagesLoaded, setImagesLoaded] = useState(false);
|
||||||
const [progress, setProgress] = useState(0);
|
// const [progress, setProgress] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
let loadedCount = 0;
|
// let loadedCount = 0;
|
||||||
const totalImages = imagesToPreload.length;
|
// const totalImages = imagesToPreload.length;
|
||||||
|
|
||||||
const preloadImages = async () => {
|
// const preloadImages = async () => {
|
||||||
try {
|
// try {
|
||||||
const loadImage = (src) => {
|
// const loadImage = (src) => {
|
||||||
return new Promise((resolve, reject) => {
|
// return new Promise((resolve, reject) => {
|
||||||
const img = new Image();
|
// const img = new Image();
|
||||||
img.src = src;
|
// img.src = src;
|
||||||
img.onload = () => {
|
// img.onload = () => {
|
||||||
loadedCount++;
|
// loadedCount++;
|
||||||
setProgress(Math.floor((loadedCount / totalImages) * 100));
|
// setProgress(Math.floor((loadedCount / totalImages) * 100));
|
||||||
resolve();
|
// resolve();
|
||||||
};
|
// };
|
||||||
img.onerror = reject;
|
// img.onerror = reject;
|
||||||
});
|
// });
|
||||||
};
|
// };
|
||||||
|
|
||||||
await Promise.all(imagesToPreload.map(loadImage));
|
// await Promise.all(imagesToPreload.map(loadImage));
|
||||||
setImagesLoaded(true);
|
// setImagesLoaded(true);
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.error("Failed to preload images:", error);
|
// console.error("Failed to preload images:", error);
|
||||||
// Continue anyway after a timeout
|
// // Continue anyway after a timeout
|
||||||
setTimeout(() => setImagesLoaded(true), 3000);
|
// setTimeout(() => setImagesLoaded(true), 3000);
|
||||||
}
|
// }
|
||||||
};
|
// };
|
||||||
|
|
||||||
preloadImages();
|
// preloadImages();
|
||||||
}, []);
|
// }, []);
|
||||||
|
|
||||||
if (!imagesLoaded) {
|
// if (!imagesLoaded) {
|
||||||
return (
|
// return (
|
||||||
<div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
|
// <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
|
||||||
{/* Animated background effect */}
|
// {/* Animated background effect */}
|
||||||
<div className="absolute inset-0 overflow-hidden opacity-10">
|
// <div className="absolute inset-0 overflow-hidden opacity-10">
|
||||||
<div className="absolute top-0 left-0 w-full h-full">
|
// <div className="absolute top-0 left-0 w-full h-full">
|
||||||
{[...Array(20)].map((_, i) => (
|
// {[...Array(20)].map((_, i) => (
|
||||||
<div
|
// <div
|
||||||
key={i}
|
// key={i}
|
||||||
className="absolute rounded-full bg-white/30"
|
// className="absolute rounded-full bg-white/30"
|
||||||
style={{
|
// style={{
|
||||||
width: `${Math.random() * 10 + 5}px`,
|
// width: `${Math.random() * 10 + 5}px`,
|
||||||
height: `${Math.random() * 10 + 5}px`,
|
// height: `${Math.random() * 10 + 5}px`,
|
||||||
top: `${Math.random() * 100}%`,
|
// top: `${Math.random() * 100}%`,
|
||||||
left: `${Math.random() * 100}%`,
|
// left: `${Math.random() * 100}%`,
|
||||||
animationDuration: `${Math.random() * 10 + 10}s`,
|
// animationDuration: `${Math.random() * 10 + 10}s`,
|
||||||
animationDelay: `${Math.random() * 5}s`,
|
// animationDelay: `${Math.random() * 5}s`,
|
||||||
}}
|
// }}
|
||||||
/>
|
// />
|
||||||
))}
|
// ))}
|
||||||
</div>
|
// </div>
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* Company logo or branding could go here */}
|
// {/* Company logo or branding could go here */}
|
||||||
<div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
|
// <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
|
||||||
TPS
|
// TPS
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* 3D-style Fuel Tank */}
|
// {/* 3D-style Fuel Tank */}
|
||||||
<div className="relative w-72 h-56 mb-8 perspective-800">
|
// <div className="relative w-72 h-56 mb-8 perspective-800">
|
||||||
{/* Tank body with 3D effect */}
|
// {/* Tank body with 3D effect */}
|
||||||
<div
|
// <div
|
||||||
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
|
// className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
|
||||||
style={{
|
// style={{
|
||||||
background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
|
// background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
|
||||||
boxShadow:
|
// boxShadow:
|
||||||
"inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
|
// "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
|
||||||
border: "1px solid rgba(255,255,255,0.1)",
|
// border: "1px solid rgba(255,255,255,0.1)",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
{/* Glass effect overlay */}
|
// {/* Glass effect overlay */}
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
|
// <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
|
||||||
|
|
||||||
{/* Tank Cap with metallic effect */}
|
// {/* Tank Cap with metallic effect */}
|
||||||
<div
|
// <div
|
||||||
className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
|
// className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
|
||||||
style={{
|
// style={{
|
||||||
background:
|
// background:
|
||||||
"linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
|
// "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
|
||||||
boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
|
// boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
|
// <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* Fuel Level with dynamic wave effect */}
|
// {/* Fuel Level with dynamic wave effect */}
|
||||||
<div
|
// <div
|
||||||
className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
|
// className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
|
||||||
style={{
|
// style={{
|
||||||
height: `${progress}%`,
|
// height: `${progress}%`,
|
||||||
background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
|
// background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
|
||||||
boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
|
// boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
{/* Animated wave effect at the top of fuel */}
|
// {/* Animated wave effect at the top of fuel */}
|
||||||
<div className="absolute -top-2 left-0 w-full h-4 animate-wave">
|
// <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
|
||||||
<div
|
// <div
|
||||||
className="relative w-[200%] h-full"
|
// className="relative w-[200%] h-full"
|
||||||
style={{
|
// style={{
|
||||||
backgroundImage:
|
// backgroundImage:
|
||||||
"linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
|
// "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
|
||||||
backgroundSize: "50% 100%",
|
// backgroundSize: "50% 100%",
|
||||||
animation: "moveWave 3s linear infinite",
|
// animation: "moveWave 3s linear infinite",
|
||||||
}}
|
// }}
|
||||||
></div>
|
// ></div>
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* Bubbles with varied animations */}
|
// {/* Bubbles with varied animations */}
|
||||||
{[...Array(8)].map((_, i) => (
|
// {[...Array(8)].map((_, i) => (
|
||||||
<div
|
// <div
|
||||||
key={i}
|
// key={i}
|
||||||
className="absolute rounded-full bg-white/20"
|
// className="absolute rounded-full bg-white/20"
|
||||||
style={{
|
// style={{
|
||||||
width: `${Math.random() * 6 + 2}px`,
|
// width: `${Math.random() * 6 + 2}px`,
|
||||||
height: `${Math.random() * 6 + 2}px`,
|
// height: `${Math.random() * 6 + 2}px`,
|
||||||
bottom: `${Math.random() * 80}%`,
|
// bottom: `${Math.random() * 80}%`,
|
||||||
left: `${Math.random() * 90 + 5}%`,
|
// left: `${Math.random() * 90 + 5}%`,
|
||||||
animation: `bubble ${
|
// animation: `bubble ${
|
||||||
Math.random() * 3 + 2
|
// Math.random() * 3 + 2
|
||||||
}s ease-in infinite ${Math.random() * 2}s`,
|
// }s ease-in infinite ${Math.random() * 2}s`,
|
||||||
}}
|
// }}
|
||||||
/>
|
// />
|
||||||
))}
|
// ))}
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* Tank level markings with glow effect */}
|
// {/* Tank level markings with glow effect */}
|
||||||
<div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
|
// <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
|
||||||
{[...Array(4)].map((_, i) => (
|
// {[...Array(4)].map((_, i) => (
|
||||||
<div
|
// <div
|
||||||
key={i}
|
// key={i}
|
||||||
className="w-full border-b border-[#F3C623]/20 h-1/4"
|
// className="w-full border-b border-[#F3C623]/20 h-1/4"
|
||||||
style={{
|
// style={{
|
||||||
boxShadow:
|
// boxShadow:
|
||||||
progress > 75 - i * 25
|
// progress > 75 - i * 25
|
||||||
? "0 1px 3px rgba(243,198,35,0.3)"
|
// ? "0 1px 3px rgba(243,198,35,0.3)"
|
||||||
: "none",
|
// : "none",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
<div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
|
// <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
|
||||||
</div>
|
// </div>
|
||||||
))}
|
// ))}
|
||||||
</div>
|
// </div>
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* Fuel Gauge with realistic dial */}
|
// {/* Fuel Gauge with realistic dial */}
|
||||||
<div
|
// <div
|
||||||
className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
|
// className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
|
||||||
style={{
|
// style={{
|
||||||
background:
|
// background:
|
||||||
"radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
|
// "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
|
||||||
boxShadow:
|
// boxShadow:
|
||||||
"inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
|
// "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
|
||||||
border: "2px solid rgba(235,131,23,0.7)",
|
// border: "2px solid rgba(235,131,23,0.7)",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
{/* Gauge markings */}
|
// {/* Gauge markings */}
|
||||||
{[...Array(9)].map((_, i) => {
|
// {[...Array(9)].map((_, i) => {
|
||||||
const rotation = -135 + i * 30;
|
// const rotation = -135 + i * 30;
|
||||||
const isLarge = i % 2 === 0;
|
// const isLarge = i % 2 === 0;
|
||||||
return (
|
// return (
|
||||||
<div
|
// <div
|
||||||
key={i}
|
// key={i}
|
||||||
className={`absolute w-${isLarge ? "1.5" : "1"} h-${
|
// className={`absolute w-${isLarge ? "1.5" : "1"} h-${
|
||||||
isLarge ? "3" : "2"
|
// isLarge ? "3" : "2"
|
||||||
} bg-[#F3C623]/${isLarge ? "70" : "40"}`}
|
// } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
|
||||||
style={{
|
// style={{
|
||||||
transform: `rotate(${rotation}deg) translateY(-7px)`,
|
// transform: `rotate(${rotation}deg) translateY(-7px)`,
|
||||||
transformOrigin: "bottom center",
|
// transformOrigin: "bottom center",
|
||||||
}}
|
// }}
|
||||||
/>
|
// />
|
||||||
);
|
// );
|
||||||
})}
|
// })}
|
||||||
|
|
||||||
{/* Gauge needle with smooth animation */}
|
// {/* Gauge needle with smooth animation */}
|
||||||
<div
|
// <div
|
||||||
className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
|
// className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
|
||||||
style={{
|
// style={{
|
||||||
transform: `rotate(${-135 + progress * 2.7}deg)`,
|
// transform: `rotate(${-135 + progress * 2.7}deg)`,
|
||||||
transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
// transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
||||||
boxShadow: "0 0 5px rgba(243,198,35,0.5)",
|
// boxShadow: "0 0 5px rgba(243,198,35,0.5)",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
<div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
|
// <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* Center pin */}
|
// {/* Center pin */}
|
||||||
<div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
|
// <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
|
||||||
|
|
||||||
{/* E and F indicators */}
|
// {/* E and F indicators */}
|
||||||
<div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
|
// <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
|
||||||
E
|
// E
|
||||||
</div>
|
// </div>
|
||||||
<div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
|
// <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
|
||||||
F
|
// F
|
||||||
</div>
|
// </div>
|
||||||
</div>
|
// </div>
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
{/* Progress indicator with animated glow */}
|
// {/* Progress indicator with animated glow */}
|
||||||
<div className="relative">
|
// <div className="relative">
|
||||||
<p
|
// <p
|
||||||
className="text-white text-2xl font-bold"
|
// className="text-white text-2xl font-bold"
|
||||||
style={{
|
// style={{
|
||||||
textShadow: "0 0 10px rgba(255,255,255,0.3)",
|
// textShadow: "0 0 10px rgba(255,255,255,0.3)",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
{progress}%
|
// {progress}%
|
||||||
</p>
|
// </p>
|
||||||
<div
|
// <div
|
||||||
className="absolute -inset-4 rounded-full opacity-0"
|
// className="absolute -inset-4 rounded-full opacity-0"
|
||||||
style={{
|
// style={{
|
||||||
background:
|
// background:
|
||||||
"radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
|
// "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
|
||||||
animation: "pulse 2s ease-in-out infinite",
|
// animation: "pulse 2s ease-in-out infinite",
|
||||||
}}
|
// }}
|
||||||
></div>
|
// ></div>
|
||||||
</div>
|
// </div>
|
||||||
|
|
||||||
<p className="mt-2 text-gray-300 font-medium tracking-wide">
|
// <p className="mt-2 text-gray-300 font-medium tracking-wide">
|
||||||
Filling your tank...
|
// Filling your tank...
|
||||||
</p>
|
// </p>
|
||||||
|
|
||||||
{/* Advanced animations */}
|
// {/* Advanced animations */}
|
||||||
{/* <style jsx>{`
|
// {/* <style jsx>{`
|
||||||
@keyframes bubble {
|
// @keyframes bubble {
|
||||||
0% {
|
// 0% {
|
||||||
transform: translateY(0) scale(0.8);
|
// transform: translateY(0) scale(0.8);
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
20% {
|
// 20% {
|
||||||
opacity: 0.8;
|
// opacity: 0.8;
|
||||||
transform: translateY(-10px) scale(1);
|
// transform: translateY(-10px) scale(1);
|
||||||
}
|
// }
|
||||||
80% {
|
// 80% {
|
||||||
opacity: 0.8;
|
// opacity: 0.8;
|
||||||
transform: translateY(-30px) scale(0.9);
|
// transform: translateY(-30px) scale(0.9);
|
||||||
}
|
// }
|
||||||
100% {
|
// 100% {
|
||||||
transform: translateY(-40px) scale(0.3);
|
// transform: translateY(-40px) scale(0.3);
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@keyframes pulse {
|
// @keyframes pulse {
|
||||||
0% {
|
// 0% {
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
transform: scale(0.8);
|
// transform: scale(0.8);
|
||||||
}
|
// }
|
||||||
50% {
|
// 50% {
|
||||||
opacity: 0.5;
|
// opacity: 0.5;
|
||||||
transform: scale(1.1);
|
// transform: scale(1.1);
|
||||||
}
|
// }
|
||||||
100% {
|
// 100% {
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
transform: scale(0.8);
|
// transform: scale(0.8);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@keyframes moveWave {
|
// @keyframes moveWave {
|
||||||
0% {
|
// 0% {
|
||||||
transform: translateX(0);
|
// transform: translateX(0);
|
||||||
}
|
// }
|
||||||
100% {
|
// 100% {
|
||||||
transform: translateX(-50%);
|
// transform: translateX(-50%);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.perspective-800 {
|
// .perspective-800 {
|
||||||
perspective: 800px;
|
// perspective: 800px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.animate-wave {
|
// .animate-wave {
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
}
|
// }
|
||||||
`}</style> */}
|
// `}</style> */}
|
||||||
</div>
|
// </div>
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
|
|
||||||
return <>{children}</>;
|
// return <>{children}</>;
|
||||||
};
|
// };
|
||||||
|
|
||||||
export default ImagePreloader;
|
// export default ImagePreloader;
|
||||||
|
|||||||
@ -1,147 +1,686 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
import styled from "styled-components";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Link } from "react-scroll";
|
import { Link, animateScroll as scroll } from "react-scroll";
|
||||||
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
|
|
||||||
import "../../index.css";
|
|
||||||
|
|
||||||
const Navbar = ({ toggleTheme, currentTheme }) => {
|
const SunIcon = ({ className }) => (
|
||||||
|
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||||
|
<path d="M12 4v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M12 18v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M4.22 4.22l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M18.36 18.36l1.42 1.42" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M1 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M21 12h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
const MoonIcon = ({ className }) => (
|
||||||
|
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||||
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
const GlobeIcon = ({ className }) => (
|
||||||
|
<svg viewBox="0 0 24 24" className={className} fill="none" aria-hidden>
|
||||||
|
<path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M2.05 12h19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
<path d="M12 2.05v19.9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const StyledWrapper = styled.div`
|
||||||
|
/* Base Styles */
|
||||||
|
.switch {
|
||||||
|
display: inline-block;
|
||||||
|
/* reduced a bit */
|
||||||
|
width: 5.2em;
|
||||||
|
height: 2.6em;
|
||||||
|
position: relative;
|
||||||
|
font-size: 16px;
|
||||||
|
user-select: none;
|
||||||
|
margin: 0;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide default HTML checkbox */
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slider */
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to right, #87ceeb, #e0f6ff);
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
box-shadow:
|
||||||
|
0 4px 8px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 -5px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inner slider for additional styling */
|
||||||
|
.slider-inner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.28em;
|
||||||
|
left: 0.28em;
|
||||||
|
height: 2.1em;
|
||||||
|
width: 2.1em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ffd700;
|
||||||
|
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
box-shadow:
|
||||||
|
0 2px 4px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0 -2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checked state */
|
||||||
|
.switch input:checked + .slider {
|
||||||
|
background: linear-gradient(to right, #1a237e, #3949ab);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner {
|
||||||
|
transform: translateX(2.6em);
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus state */
|
||||||
|
.switch input:focus + .slider {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0.4em rgba(25, 118, 210, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover and active states */
|
||||||
|
.switch:hover .slider {
|
||||||
|
background: linear-gradient(to right, #64b5f6, #e3f2fd);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked:hover + .slider {
|
||||||
|
background: linear-gradient(to right, #283593, #5c6bc0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation for slider inner */
|
||||||
|
@keyframes sunPulse {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 0 rgba(255, 215, 0, 0.7),
|
||||||
|
0 0 0 0 rgba(255, 215, 0, 0.4);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 20px 10px rgba(255, 215, 0, 0.7),
|
||||||
|
0 0 40px 20px rgba(255, 215, 0, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes moonPhase {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
box-shadow:
|
||||||
|
inset -10px -5px 0 0 #ddd,
|
||||||
|
0 0 20px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 0 #ddd,
|
||||||
|
0 0 20px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:not(:checked) + .slider .slider-inner {
|
||||||
|
animation: sunPulse 3s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner {
|
||||||
|
animation: moonPhase 5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stars effect */
|
||||||
|
@keyframes twinkle {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::before,
|
||||||
|
.slider::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: all 0.6s ease;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::before {
|
||||||
|
top: 20%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::after {
|
||||||
|
bottom: 25%;
|
||||||
|
right: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider::before,
|
||||||
|
.switch input:checked + .slider::after {
|
||||||
|
opacity: 1;
|
||||||
|
animation: twinkle 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider::before {
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3D effect */
|
||||||
|
.slider {
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
perspective: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-inner {
|
||||||
|
transform: translateZ(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner {
|
||||||
|
transform: translateX(2.6em) translateZ(5px) rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cloud effect for day mode */
|
||||||
|
.slider-inner::before,
|
||||||
|
.slider-inner::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: all 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-inner::before {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
top: -0.5em;
|
||||||
|
left: -0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-inner::after {
|
||||||
|
width: 1.2em;
|
||||||
|
height: 1.2em;
|
||||||
|
bottom: -0.6em;
|
||||||
|
right: -0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner::before,
|
||||||
|
.switch input:checked + .slider .slider-inner::after {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Crater effect for night mode */
|
||||||
|
.switch input:checked + .slider .slider-inner::before {
|
||||||
|
width: 0.6em;
|
||||||
|
height: 0.6em;
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
top: 0.3em;
|
||||||
|
left: 0.3em;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner::after {
|
||||||
|
width: 0.4em;
|
||||||
|
height: 0.4em;
|
||||||
|
background-color: rgba(0, 0, 0, 0.15);
|
||||||
|
bottom: 0.5em;
|
||||||
|
right: 0.5em;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility improvements */
|
||||||
|
.switch input:focus + .slider {
|
||||||
|
outline: 2px solid #4a90e2;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.switch {
|
||||||
|
width: 4.6em;
|
||||||
|
height: 2.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-inner {
|
||||||
|
height: 1.85em;
|
||||||
|
width: 1.85em;
|
||||||
|
top: 0.23em;
|
||||||
|
left: 0.23em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner {
|
||||||
|
transform: translateX(2.2em) translateZ(5px) rotateY(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.switch {
|
||||||
|
width: 3.8em;
|
||||||
|
height: 1.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-inner {
|
||||||
|
height: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
top: 0.2em;
|
||||||
|
left: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner {
|
||||||
|
transform: translateX(1.8em) translateZ(5px) rotateY(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* High contrast mode */
|
||||||
|
@media (forced-colors: active) {
|
||||||
|
.slider {
|
||||||
|
background: Canvas;
|
||||||
|
border: 2px solid ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider {
|
||||||
|
background: Highlight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-inner {
|
||||||
|
background-color: ButtonFace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch::before,
|
||||||
|
.switch::after {
|
||||||
|
color: ButtonText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion preference */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.switch,
|
||||||
|
.slider,
|
||||||
|
.slider-inner {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider .slider-inner,
|
||||||
|
.switch input:not(:checked) + .slider .slider-inner,
|
||||||
|
.switch input:checked + .slider::before,
|
||||||
|
.switch input:checked + .slider::after {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ThemeToggle = ({ theme, setTheme }) => {
|
||||||
|
const isDark = theme === "dark";
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
const next = isDark ? "light" : "dark";
|
||||||
|
setTheme(next);
|
||||||
|
if (next === "dark") document.documentElement.classList.add("dark");
|
||||||
|
else document.documentElement.classList.remove("dark");
|
||||||
|
try {
|
||||||
|
localStorage.setItem("theme", next);
|
||||||
|
} catch (e) {}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledWrapper>
|
||||||
|
<label
|
||||||
|
role="switch"
|
||||||
|
aria-checked={isDark}
|
||||||
|
tabIndex={0}
|
||||||
|
className="switch"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
toggle();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={isDark}
|
||||||
|
onChange={toggle}
|
||||||
|
aria-hidden="false"
|
||||||
|
/>
|
||||||
|
<span className="slider" aria-hidden="true">
|
||||||
|
<span className="slider-inner" />
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</StyledWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const LanguageToggle = ({ i18n }) => {
|
||||||
|
const isAr = i18n.language === "ar";
|
||||||
|
const toggle = () => {
|
||||||
|
const next = isAr ? "en" : "ar";
|
||||||
|
i18n.changeLanguage(next);
|
||||||
|
if (next === "ar") {
|
||||||
|
document.documentElement.dir = "rtl";
|
||||||
|
document.documentElement.lang = "ar";
|
||||||
|
} else {
|
||||||
|
document.documentElement.dir = "ltr";
|
||||||
|
document.documentElement.lang = next;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={toggle}
|
||||||
|
className="flex items-center gap-2 px-3 py-1 rounded-md font-semibold text-sm border border-transparent hover:border-amber-500/30 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/40 hover:shadow-md active:scale-95"
|
||||||
|
aria-label="Toggle language"
|
||||||
|
title={isAr ? "Switch to English" : "التبديل للعربية"}
|
||||||
|
>
|
||||||
|
<GlobeIcon className="w-4 h-4" />
|
||||||
|
<span className="hidden sm:inline">{isAr ? "عربي" : "EN"}</span>
|
||||||
|
<span className="text-amber-400/95 text-xs sm:text-sm">{isAr ? "AR" : "EN"}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Navbar = () => {
|
||||||
const { t, i18n } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
const [activeSection, setActiveSection] = useState("home");
|
const [activeSection, setActiveSection] = useState("home");
|
||||||
|
const [theme, setTheme] = useState("light");
|
||||||
|
|
||||||
const toggleMenu = () => {
|
useEffect(() => {
|
||||||
setMenuOpen(!menuOpen);
|
try {
|
||||||
};
|
const saved = localStorage.getItem("theme");
|
||||||
|
if (saved) setTheme(saved);
|
||||||
|
else if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
|
||||||
|
} catch (e) {
|
||||||
|
if (typeof window !== "undefined" && document.documentElement.classList.contains("dark")) setTheme("dark");
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (theme === "dark") document.documentElement.classList.add("dark");
|
||||||
|
else document.documentElement.classList.remove("dark");
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
const sections = ["home", "services", "about", "contact"];
|
const sections = ["home", "services", "about", "contact"];
|
||||||
const scrollPosition = window.scrollY + 100;
|
const scrollPosition = window.scrollY + 140;
|
||||||
|
|
||||||
for (const section of sections) {
|
for (const section of sections) {
|
||||||
const element =
|
const element = document.getElementById(section) || document.querySelector(`[name="${section}"]`);
|
||||||
document.getElementById(section) ||
|
|
||||||
document.querySelector(`[name="${section}"]`);
|
|
||||||
if (element) {
|
if (element) {
|
||||||
const offsetTop = element.offsetTop;
|
const offsetTop = element.offsetTop;
|
||||||
const offsetHeight = element.offsetHeight;
|
const offsetHeight = element.offsetHeight;
|
||||||
|
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
||||||
if (
|
|
||||||
scrollPosition >= offsetTop &&
|
|
||||||
scrollPosition < offsetTop + offsetHeight
|
|
||||||
) {
|
|
||||||
setActiveSection(section);
|
setActiveSection(section);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
handleScroll();
|
||||||
window.addEventListener("scroll", handleScroll);
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||||
return () => window.removeEventListener("scroll", handleScroll);
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (i18n.language === "ar") {
|
|
||||||
document.documentElement.dir = "rtl";
|
|
||||||
document.documentElement.lang = "ar";
|
|
||||||
} else {
|
|
||||||
document.documentElement.dir = "ltr";
|
|
||||||
document.documentElement.lang = i18n.language;
|
|
||||||
}
|
|
||||||
}, [i18n.language]);
|
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ key: "home", label: t("nav.home") },
|
{ key: "home", label: t("nav.home") || "Home" },
|
||||||
{ key: "services", label: t("nav.services") },
|
{ key: "services", label: t("nav.services") || "Services" },
|
||||||
{ key: "about", label: t("nav.about") },
|
{ key: "about", label: t("nav.about") || "About" },
|
||||||
{ key: "contact", label: t("nav.contact") },
|
{ key: "contact", label: t("nav.contact") || "Contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="navbar-theme fixed top-0 w-full z-50 shadow h-14">
|
<>
|
||||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-2 px-4">
|
<style>{`
|
||||||
<img
|
/* background and glass */
|
||||||
src="src/assets/TPS-logo.png"
|
.glass-nav {
|
||||||
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
|
background: linear-gradient(180deg, rgba(75,85,99,0.96), rgba(55,65,81,0.9));
|
||||||
alt="TPS Logo"
|
color: #e6e6e6;
|
||||||
/>
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
{/* الجانب الأيمن */}
|
/* nav links */
|
||||||
<div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
|
.nav-link {
|
||||||
{/* زر تبديل الثيم */}
|
position: relative;
|
||||||
<button
|
padding-bottom: 6px;
|
||||||
onClick={toggleTheme}
|
transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease, text-shadow .18s ease, box-shadow .18s ease;
|
||||||
type="button"
|
color: rgba(229,231,235,0.95);
|
||||||
className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm"
|
display: inline-block;
|
||||||
aria-label={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
|
}
|
||||||
title={currentTheme === "dark" ? "الوضع الفاتح" : "الوضع الداكن"}
|
.nav-link::after {
|
||||||
>
|
content: '';
|
||||||
{currentTheme === "dark" ? (
|
position: absolute;
|
||||||
<svg className="w-5 h-5 text-secondary" fill="currentColor" viewBox="0 0 20 20">
|
left: 50%;
|
||||||
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
|
transform: translateX(-50%) scaleX(0);
|
||||||
</svg>
|
bottom: -8px;
|
||||||
) : (
|
height: 3px;
|
||||||
<svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
width: 64%;
|
||||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
border-radius: 999px;
|
||||||
</svg>
|
transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s;
|
||||||
)}
|
opacity: 0;
|
||||||
</button>
|
}
|
||||||
|
.nav-link:hover {
|
||||||
|
transform: translateY(-6px) scale(1.03);
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 10px 30px rgba(2,6,23,0.5);
|
||||||
|
box-shadow: 0 8px 24px rgba(2,6,23,0.25);
|
||||||
|
}
|
||||||
|
.nav-link:hover::after {
|
||||||
|
background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
||||||
|
transform: translateX(-50%) scaleX(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.nav-link.active {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.nav-link.active::after {
|
||||||
|
background: linear-gradient(90deg, #9CA3AF, #F59E0B);
|
||||||
|
transform: translateX(-50%) scaleX(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
{/* Language Switcher */}
|
/* NEW: pill / circular orange background for the active/pressed link */
|
||||||
<LanguageSwitcher />
|
.nav-pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.32rem 0.6rem; /* vertical horizontal */
|
||||||
|
border-radius: 999px;
|
||||||
|
transition: transform .15s ease, background .18s ease, box-shadow .18s ease, color .12s ease;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
{/* زر القائمة للجوال */}
|
/* active (current) */
|
||||||
<button
|
.nav-link.active .nav-pill,
|
||||||
onClick={toggleMenu}
|
.nav-link:active .nav-pill,
|
||||||
type="button"
|
.nav-link:focus-visible .nav-pill {
|
||||||
className="icon-button-theme inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden"
|
background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18); /* warm orange */
|
||||||
aria-controls="navbar-menu"
|
color: #0b0b0b; /* dark text for contrast on orange */
|
||||||
aria-expanded={menuOpen}
|
box-shadow: 0 6px 18px rgba(255, 122, 24, 0.18), 0 2px 6px rgba(0,0,0,0.12);
|
||||||
>
|
transform: translateY(-4px) scale(1.03);
|
||||||
<span className="sr-only">Open main menu</span>
|
}
|
||||||
<svg className="w-5 h-5" viewBox="0 0 17 14" fill="none">
|
|
||||||
<path
|
|
||||||
d="M1 1h15M1 7h15M1 13h15"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* روابط الأقسام */}
|
/* Make press feedback snappier */
|
||||||
<div
|
.nav-link:active .nav-pill {
|
||||||
className={`w-full md:flex md:w-auto md:order-1 transition-all duration-300 ease-in-out ${
|
transform: translateY(-2px) scale(0.995);
|
||||||
menuOpen ? "block" : "hidden"
|
}
|
||||||
}`}
|
|
||||||
id="navbar-menu"
|
/* mobile drawer */
|
||||||
>
|
.mobile-drawer {
|
||||||
<ul className="flex flex-col md:flex-row p-4 md:p-0 rounded-lg space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y md:divide-y-0"
|
background: linear-gradient(180deg, rgba(17,24,39,0.98), rgba(15,23,42,0.95));
|
||||||
style={{ borderColor: 'var(--border-color)' }}>
|
backdrop-filter: blur(6px);
|
||||||
{navItems.map((item) => (
|
}
|
||||||
<li key={item.key} className="pt-2 md:pt-0 first:pt-0 md:first:pt-0">
|
|
||||||
<Link
|
/* ensure mobile pill doesn't stretch full width — make it inline inside block */
|
||||||
to={item.key}
|
.mobile-drawer .nav-pill {
|
||||||
smooth
|
display: inline-flex;
|
||||||
duration={500}
|
padding: 0.4rem 0.8rem;
|
||||||
spy={true}
|
}
|
||||||
offset={0}
|
|
||||||
onSetActive={() => setActiveSection(item.key)}
|
/* adjust mobile active color */
|
||||||
className={`nav-link-theme block text-center md:inline cursor-pointer text-lg px-4 py-2 rounded-lg ${
|
.mobile-drawer .nav-pill.active,
|
||||||
activeSection === item.key ? "nav-link-active" : ""
|
.mobile-drawer a[aria-current="page"] .nav-pill {
|
||||||
}`}
|
background: radial-gradient(circle at 30% 30%, #ffb347, #ff7a18);
|
||||||
|
color: #0b0b0b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enhanced button hover (more professional) */
|
||||||
|
.glass-nav button, .mobile-drawer button {
|
||||||
|
transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
|
||||||
|
will-change: transform, box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-nav button:hover, .mobile-drawer button:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 10px 24px rgba(2,6,23,0.25), 0 2px 6px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-nav button:active, .mobile-drawer button:active {
|
||||||
|
transform: translateY(-1px) scale(0.995);
|
||||||
|
box-shadow: 0 6px 18px rgba(2,6,23,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-nav button:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 4px rgba(245,158,11,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
`}</style>
|
||||||
|
|
||||||
|
<nav
|
||||||
|
className="fixed top-0 left-0 right-0 z-50 w-full glass-nav px-4 md:px-8 lg:px-16 py-3"
|
||||||
|
aria-label="Main navigation"
|
||||||
|
role="navigation"
|
||||||
|
>
|
||||||
|
<div className="mx-auto max-w-screen-xl">
|
||||||
|
<div className="flex items-center justify-between h-14 px-2 md:px-4">
|
||||||
|
<div className="hidden md:flex items-center space-x-6 rtl:space-x-reverse">
|
||||||
|
<ul className="flex items-center gap-6">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const isActive = activeSection === item.key;
|
||||||
|
return (
|
||||||
|
<li key={item.key}>
|
||||||
|
<Link
|
||||||
|
to={item.key}
|
||||||
|
smooth
|
||||||
|
duration={600}
|
||||||
|
spy={true}
|
||||||
|
offset={-110}
|
||||||
|
onSetActive={() => setActiveSection(item.key)}
|
||||||
|
onClick={() => {
|
||||||
|
if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
||||||
|
if (menuOpen) setMenuOpen(false);
|
||||||
|
}}
|
||||||
|
className={`nav-link cursor-pointer text-sm md:text-lg ${isActive ? "active" : "text-slate-200 dark:text-slate-200/90"}`}
|
||||||
|
aria-current={isActive ? "page" : undefined}
|
||||||
|
>
|
||||||
|
<span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* controls */}
|
||||||
|
<div className="flex items-center gap-3 md:gap-5">
|
||||||
|
<div className="hidden md:flex items-center gap-3">
|
||||||
|
<LanguageToggle i18n={i18n} />
|
||||||
|
<ThemeToggle theme={theme} setTheme={setTheme} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:hidden flex items-center gap-2">
|
||||||
|
<ThemeToggle theme={theme} setTheme={setTheme} />
|
||||||
|
<button
|
||||||
|
onClick={() => setMenuOpen((s) => !s)}
|
||||||
|
aria-controls="mobile-menu"
|
||||||
|
aria-expanded={menuOpen}
|
||||||
|
className="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-400/50 transition-transform hover:scale-105"
|
||||||
>
|
>
|
||||||
{item.label}
|
<span className="sr-only">Open main menu</span>
|
||||||
</Link>
|
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||||
</li>
|
{menuOpen ? <path d="M6 18L18 6M6 6l12 12" /> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
|
||||||
))}
|
</svg>
|
||||||
</ul>
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* mobile drawer */}
|
||||||
|
<div
|
||||||
|
id="mobile-menu"
|
||||||
|
className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${menuOpen ? "max-h-[420px] opacity-100" : "max-h-0 opacity-0"}`}
|
||||||
|
>
|
||||||
|
<div className="mobile-drawer px-4 pb-6 pt-3 rounded-b-2xl">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-3"></div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<LanguageToggle i18n={i18n} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="flex flex-col gap-2">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const isActive = activeSection === item.key;
|
||||||
|
return (
|
||||||
|
<li key={item.key}>
|
||||||
|
<Link
|
||||||
|
to={item.key}
|
||||||
|
smooth
|
||||||
|
duration={600}
|
||||||
|
spy={true}
|
||||||
|
offset={-110}
|
||||||
|
onSetActive={() => setActiveSection(item.key)}
|
||||||
|
onClick={() => {
|
||||||
|
if (item.key === "home") scroll.scrollToTop({ duration: 600 });
|
||||||
|
setMenuOpen(false);
|
||||||
|
}}
|
||||||
|
className={`block w-full text-right px-3 py-2 rounded-md font-semibold text-base ${isActive ? "text-amber-400" : "text-slate-200 hover:text-amber-400"}`}
|
||||||
|
aria-current={isActive ? "page" : undefined}
|
||||||
|
>
|
||||||
|
{/* add inline pill for mobile too — stays inline so it looks like a circle around the label */}
|
||||||
|
<span className={`nav-pill ${isActive ? "active" : ""}`}>{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className="mt-4 flex items-center gap-3">
|
||||||
|
<ThemeToggle theme={theme} setTheme={setTheme} />
|
||||||
|
<button className="flex-1 px-4 py-2 rounded-md bg-amber-500/95 text-black font-semibold shadow-inner hover:shadow-lg transition-shadow active:scale-95">
|
||||||
|
{t("nav.getQuote") || "Get Quote"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
22
src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx
Normal file
22
src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
// AnimatedRoutes.jsx
|
||||||
|
import React from "react";
|
||||||
|
import { Routes, Route, useLocation } from "react-router-dom";
|
||||||
|
import { AnimatePresence, LayoutGroup } from "framer-motion";
|
||||||
|
import Departments from "./Departments";
|
||||||
|
import DepartmentDetail from "./DepartmentDetail";
|
||||||
|
|
||||||
|
export default function AnimatedRoutes() {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LayoutGroup>
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
{/* key مهم حتى يعمل خروج/دخول الصفحة مع الانتقال */}
|
||||||
|
<Routes location={location} key={location.pathname}>
|
||||||
|
<Route path="/" element={<Departments />} />
|
||||||
|
<Route path="/departments/1" element={<DepartmentDetail />} />
|
||||||
|
</Routes>
|
||||||
|
</AnimatePresence>
|
||||||
|
</LayoutGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
639
src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
Normal file
639
src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
Normal file
@ -0,0 +1,639 @@
|
|||||||
|
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
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";
|
||||||
|
|
||||||
|
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: "1999-2015",
|
||||||
|
items: [
|
||||||
|
"دراسة وتصميم وتنفيذ خطوط السور والدرفلة (الوهيب)",
|
||||||
|
"العربية للدرفلة",
|
||||||
|
"العولية للدرفلة",
|
||||||
|
"معهد الإدارة العليا للسور والدرفلة",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
|
||||||
|
{ year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
|
||||||
|
{ year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
|
||||||
|
{
|
||||||
|
year: "2016",
|
||||||
|
items: [
|
||||||
|
"دراسة وتصميم وتنفيذ خطوط السور والدرفلة (الأنام)",
|
||||||
|
"أي أم، التايتيك - التروت، تصميم وتنفيذ",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
|
||||||
|
{ year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
|
||||||
|
{
|
||||||
|
year: "2019",
|
||||||
|
items: [
|
||||||
|
"إعادة تأهيل وصيانة مقومات تحميل وصيانة الستوك في مرفأ طرطوس",
|
||||||
|
"دراسة تأهيلية للصم وقياس الشمس (طرطوس - حمص)",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
|
||||||
|
{ year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
|
||||||
|
{ year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
|
||||||
|
{ year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function DepartmentDetail() {
|
||||||
|
const [active, setActive] = useState(null);
|
||||||
|
|
||||||
|
const buttons = [
|
||||||
|
{ id: 1, title: "اختصاص القسم", key: "expertise" },
|
||||||
|
{ id: 2, title: "خدمات القسم", key: "services" },
|
||||||
|
{ 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: "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
text: "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const servicesItems = [
|
||||||
|
{
|
||||||
|
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="M12 8v4l3 3"/>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M20 12a8 8 0 11-16 0 8 8 0 0116 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="M18.364 5.636l-1.414 1.414M6.05 17.95l-1.414 1.414M6.05 6.05L7.464 7.464M17.95 17.95l1.414 1.414"/>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3"/>
|
||||||
|
</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="M3 7h18M6 21h12M8 7v13M16 7v13"/>
|
||||||
|
</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="M3 7h18M3 12h18M3 17h18"/>
|
||||||
|
</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="M12 2l3 7h7l-5.5 4.2L19 21l-7-4-7 4 1.5-7.8L2 9h7z"/>
|
||||||
|
</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="M3 12h18M3 6h18M3 18h18"/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
text: "رفع كفاءة التشغيل وتقليل تكاليف الأعطال"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleButtonClick = (key) => {
|
||||||
|
setActive((prev) => (prev === key ? null : key));
|
||||||
|
};
|
||||||
|
|
||||||
|
const displayItems = active === "services" ? servicesItems : expertiseItems;
|
||||||
|
const heroImage = active === "expertise" ? d2 : active === "services" ? d3 : active === "works" ? d4 : d1;
|
||||||
|
|
||||||
|
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 === "services" ? (
|
||||||
|
<motion.div key="services-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||||
|
<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-3 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
173
src/Components/Sections/Departments/Departments.jsx
Normal file
173
src/Components/Sections/Departments/Departments.jsx
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
import React, { useRef } from "react";
|
||||||
|
import {
|
||||||
|
motion,
|
||||||
|
useMotionValue,
|
||||||
|
useSpring,
|
||||||
|
useTransform,
|
||||||
|
useScroll,
|
||||||
|
useVelocity,
|
||||||
|
} from "framer-motion";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
// images
|
||||||
|
import d1 from "../../../../src/assets/Images/d1.jpeg";
|
||||||
|
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: 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);
|
||||||
|
|
||||||
|
const rotateX = useMotionValue(0);
|
||||||
|
const rotateY = useMotionValue(0);
|
||||||
|
const scale = useMotionValue(1);
|
||||||
|
|
||||||
|
const rx = useSpring(rotateX, { stiffness: 180, damping: 22 });
|
||||||
|
const ry = useSpring(rotateY, { stiffness: 180, damping: 22 });
|
||||||
|
const s = useSpring(scale, { stiffness: 180, damping: 24 });
|
||||||
|
|
||||||
|
const titleZ = useTransform(s, [1, 1.05], [0, 36]);
|
||||||
|
|
||||||
|
const onMove = (e) => {
|
||||||
|
if (!wrapperRef.current) return;
|
||||||
|
const rect = wrapperRef.current.getBoundingClientRect();
|
||||||
|
const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
|
||||||
|
const y = (e.clientY - rect.top - rect.height / 2) / rect.height;
|
||||||
|
|
||||||
|
rotateY.set(-x * 28);
|
||||||
|
rotateX.set(y * 12);
|
||||||
|
scale.set(1.05);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onLeave = () => {
|
||||||
|
rotateX.set(0);
|
||||||
|
rotateY.set(0);
|
||||||
|
scale.set(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { scrollY, scrollYProgress } = useScroll({ target: wrapperRef });
|
||||||
|
const velocity = useVelocity(scrollY);
|
||||||
|
const smoothVelocity = useSpring(velocity, {
|
||||||
|
stiffness: 600,
|
||||||
|
damping: 90,
|
||||||
|
});
|
||||||
|
|
||||||
|
const velocityParallax = useTransform(
|
||||||
|
smoothVelocity,
|
||||||
|
[-3000, 0, 3000],
|
||||||
|
[-45, 0, 45]
|
||||||
|
);
|
||||||
|
|
||||||
|
const progressParallax = useTransform(
|
||||||
|
scrollYProgress,
|
||||||
|
[0, 1],
|
||||||
|
[15, -15]
|
||||||
|
);
|
||||||
|
|
||||||
|
const y = useTransform(
|
||||||
|
[velocityParallax, progressParallax],
|
||||||
|
([v, p]) => v + p
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if (dept.id === 2) {
|
||||||
|
navigate("/department-detail2");
|
||||||
|
} else {
|
||||||
|
navigate(`/departments/${dept.id}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={wrapperRef}
|
||||||
|
onMouseMove={onMove}
|
||||||
|
onMouseLeave={onLeave}
|
||||||
|
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 }}
|
||||||
|
className="block text-2xl md:text-3xl font-extrabold leading-snug
|
||||||
|
text-white drop-shadow-lg
|
||||||
|
bg-gradient-to-tr from-black/60 via-black/30 to-transparent
|
||||||
|
px-3 py-1 rounded-lg"
|
||||||
|
>
|
||||||
|
{dept.title}
|
||||||
|
</motion.span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.img
|
||||||
|
src={dept.image}
|
||||||
|
alt={dept.title}
|
||||||
|
draggable={false}
|
||||||
|
onClick={handleClick}
|
||||||
|
style={{
|
||||||
|
rotateX: rx,
|
||||||
|
rotateY: ry,
|
||||||
|
scale: s,
|
||||||
|
y,
|
||||||
|
transformStyle: "preserve-3d",
|
||||||
|
boxShadow:
|
||||||
|
"0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
|
||||||
|
}}
|
||||||
|
className="cursor-pointer w-full h-96 object-cover rounded-2xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Departments() {
|
||||||
|
return (
|
||||||
|
<section className="min-h-screen bg-white text-black" dir="rtl">
|
||||||
|
<header className="max-w-6xl mx-auto px-6 pt-12">
|
||||||
|
<h1 className="text-4xl font-extrabold">أقسامنا</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="max-w-6xl mx-auto px-6 py-20">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-48">
|
||||||
|
{departments.map((dept, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={dept.id}
|
||||||
|
initial={{ opacity: 0, y: 24 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: false, amount: 0.25 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.7,
|
||||||
|
ease: "easeOut",
|
||||||
|
delay: index * 0.06,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DepartmentCard
|
||||||
|
dept={dept}
|
||||||
|
offset={index % 2 === 0 ? "" : "md:translate-y-16"}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,254 +1,469 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useEffect, useState, useRef } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import styled from 'styled-components';
|
||||||
import { Element } from "react-scroll";
|
import { Element } from "react-scroll";
|
||||||
import { useTranslation } from "react-i18next";
|
import Departments from "../Departments/Departments";
|
||||||
import "../../../index.css";
|
|
||||||
|
|
||||||
import companyLogo from "../../../assets/REXNT.png";
|
export default function EngineeringHeroFlowbite() {
|
||||||
|
const defaultConfig = {
|
||||||
|
main_title: "شريكك الهندسي لتنفيذ وإدارة المشاريع باحتراف",
|
||||||
|
subtitle:
|
||||||
|
"حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
|
||||||
|
primary_color: "#e67e22",
|
||||||
|
background_color: "#000000",
|
||||||
|
text_color: "#ffffff",
|
||||||
|
secondary_surface: "#95a5a6",
|
||||||
|
secondary_action: "#34495e",
|
||||||
|
font_family: "Cairo",
|
||||||
|
font_size: 16,
|
||||||
|
};
|
||||||
|
|
||||||
const createStars = (count, config = {}) =>
|
const [config, setConfig] = useState(defaultConfig);
|
||||||
Array.from({ length: count }).map((_, i) => ({
|
const [isMounted, setIsMounted] = useState(false);
|
||||||
id: i,
|
|
||||||
x: Math.random() * 100,
|
|
||||||
y: Math.random() * 100,
|
|
||||||
size: Math.random() * (config.maxSize || 3) + (config.minSize || 1),
|
|
||||||
opacity: Math.random() * (config.maxOpacity || 0.8) + (config.minOpacity || 0.2),
|
|
||||||
duration: Math.random() * (config.maxDuration || 10) + (config.minDuration || 5),
|
|
||||||
delay: Math.random() * (config.maxDelay || 2),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const Home = () => {
|
const mainTitleRef = useRef(null);
|
||||||
const { t } = useTranslation();
|
const subtitleRef = useRef(null);
|
||||||
const [showLogo, setShowLogo] = useState(false);
|
const departmentsRef = useRef(null);
|
||||||
const [showTagline, setShowTagline] = useState(false);
|
|
||||||
const [scrollProgress, setScrollProgress] = useState(0);
|
|
||||||
const homeRef = useRef(null);
|
|
||||||
|
|
||||||
const stars = createStars(120);
|
|
||||||
const backgroundStars = createStars(80, {
|
|
||||||
minSize: 0.5,
|
|
||||||
maxSize: 2,
|
|
||||||
minOpacity: 0.1,
|
|
||||||
maxOpacity: 0.5,
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const logoTimeout = setTimeout(() => setShowLogo(true), 500);
|
const id = "cairo-font-link";
|
||||||
const taglineTimeout = setTimeout(() => setShowTagline(true), 1500);
|
if (!document.getElementById(id)) {
|
||||||
|
const link = document.createElement("link");
|
||||||
const handleScroll = () => {
|
link.id = id;
|
||||||
if (homeRef.current) {
|
link.rel = "stylesheet";
|
||||||
const scrollPosition = window.scrollY;
|
link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
|
||||||
const windowHeight = window.innerHeight;
|
document.head.appendChild(link);
|
||||||
const progress = Math.min(scrollPosition / (windowHeight * 0.2), 1);
|
}
|
||||||
setScrollProgress(progress);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("scroll", handleScroll);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearTimeout(logoTimeout);
|
|
||||||
clearTimeout(taglineTimeout);
|
|
||||||
window.removeEventListener("scroll", handleScroll);
|
|
||||||
};
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const AnimatedStars = () => (
|
useEffect(() => {
|
||||||
<>
|
// slight delay to ensure mount then trigger animations
|
||||||
{stars.map((star) => (
|
const t = setTimeout(() => setIsMounted(true), 60);
|
||||||
<motion.div
|
return () => clearTimeout(t);
|
||||||
key={`star-${star.id}`}
|
}, []);
|
||||||
className="absolute rounded-full bg-white"
|
|
||||||
style={{
|
|
||||||
left: `${star.x}%`,
|
|
||||||
top: `${star.y}%`,
|
|
||||||
width: star.size,
|
|
||||||
height: star.size,
|
|
||||||
opacity: star.opacity,
|
|
||||||
}}
|
|
||||||
animate={{
|
|
||||||
opacity: [star.opacity, star.opacity * 0.3, star.opacity],
|
|
||||||
y: star.y - (scrollProgress * 10),
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: star.duration,
|
|
||||||
delay: star.delay,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatType: "reverse",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
const StaticStars = () => (
|
useEffect(() => {
|
||||||
<>
|
const main = mainTitleRef.current;
|
||||||
{backgroundStars.map((star) => (
|
const sub = subtitleRef.current;
|
||||||
<div
|
const baseFontStack = "Arial, sans-serif";
|
||||||
key={`bg-star-${star.id}`}
|
const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
|
||||||
className="absolute rounded-full bg-white"
|
const baseSize = config.font_size || defaultConfig.font_size;
|
||||||
style={{
|
|
||||||
left: `${star.x}%`,
|
if (main) {
|
||||||
top: `${star.y}%`,
|
const headingText = (config.main_title || defaultConfig.main_title)
|
||||||
width: star.size,
|
.split("\n")
|
||||||
height: star.size,
|
.map((s) => s.trim())
|
||||||
opacity: star.opacity,
|
.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 * 3.8}px`;
|
||||||
|
main.style.color = config.text_color || defaultConfig.text_color;
|
||||||
|
main.style.fontWeight = 800;
|
||||||
|
main.style.textAlign = "right";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sub) {
|
||||||
|
sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
|
||||||
|
.split("\n")
|
||||||
|
.map((s) => `<div>${s.trim()}</div>`)
|
||||||
|
.join("");
|
||||||
|
sub.style.fontFamily = font;
|
||||||
|
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;
|
||||||
|
root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
|
||||||
|
root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
|
||||||
|
root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
|
||||||
|
root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
|
||||||
|
}, [config]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const element = {
|
||||||
|
defaultConfig,
|
||||||
|
onConfigChange: async (newCfg) => {
|
||||||
|
setConfig((c) => ({ ...c, ...newCfg }));
|
||||||
|
},
|
||||||
|
mapToCapabilities: (cfg) => ({
|
||||||
|
recolorables: [
|
||||||
|
{
|
||||||
|
get: () => cfg.background_color || defaultConfig.background_color,
|
||||||
|
set: (value) => {
|
||||||
|
cfg.background_color = value;
|
||||||
|
window?.elementSdk?.setConfig?.({ background_color: value });
|
||||||
|
setConfig({ ...cfg });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
get: () => cfg.secondary_surface || defaultConfig.secondary_surface,
|
||||||
|
set: (value) => {
|
||||||
|
cfg.secondary_surface = value;
|
||||||
|
window?.elementSdk?.setConfig?.({ secondary_surface: value });
|
||||||
|
setConfig({ ...cfg });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
get: () => cfg.text_color || defaultConfig.text_color,
|
||||||
|
set: (value) => {
|
||||||
|
cfg.text_color = value;
|
||||||
|
window?.elementSdk?.setConfig?.({ text_color: value });
|
||||||
|
setConfig({ ...cfg });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
get: () => cfg.primary_color || defaultConfig.primary_color,
|
||||||
|
set: (value) => {
|
||||||
|
cfg.primary_color = value;
|
||||||
|
window?.elementSdk?.setConfig?.({ primary_color: value });
|
||||||
|
setConfig({ ...cfg });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
get: () => cfg.secondary_action || defaultConfig.secondary_action,
|
||||||
|
set: (value) => {
|
||||||
|
cfg.secondary_action = value;
|
||||||
|
window?.elementSdk?.setConfig?.({ secondary_action: value });
|
||||||
|
setConfig({ ...cfg });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
borderables: [],
|
||||||
|
fontEditable: {
|
||||||
|
get: () => cfg.font_family || defaultConfig.font_family,
|
||||||
|
set: (value) => {
|
||||||
|
cfg.font_family = value;
|
||||||
|
window?.elementSdk?.setConfig?.({ font_family: value });
|
||||||
|
setConfig({ ...cfg });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontSizeable: {
|
||||||
|
get: () => cfg.font_size || defaultConfig.font_size,
|
||||||
|
set: (value) => {
|
||||||
|
cfg.font_size = value;
|
||||||
|
window?.elementSdk?.setConfig?.({ font_size: value });
|
||||||
|
setConfig({ ...cfg });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
mapToEditPanelValues: (cfg) =>
|
||||||
|
new Map([
|
||||||
|
["main_title", cfg.main_title || defaultConfig.main_title],
|
||||||
|
["subtitle", cfg.subtitle || defaultConfig.subtitle],
|
||||||
|
]),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (window?.elementSdk?.init) {
|
||||||
|
try {
|
||||||
|
window.elementSdk.init(element);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<Element name="home" ref={homeRef}>
|
<div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: "var(--ehb-background, #000000)" }}>
|
||||||
<div className="fixed inset-0 -z-10 overflow-hidden">
|
<style>{`
|
||||||
<div className="absolute inset-0 bg-gradient-to-b from-[#080613] via-[#12143b] to-[#080613]">
|
:root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
|
||||||
<StaticStars />
|
|
||||||
|
.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;position:relative;flex-direction:column}
|
||||||
|
|
||||||
|
/* 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; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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)}
|
||||||
|
|
||||||
|
@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 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)}}
|
||||||
|
|
||||||
|
/* 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}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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)}
|
||||||
|
|
||||||
|
@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){
|
||||||
|
.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={`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: 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>
|
||||||
|
|
||||||
<div className="relative min-h-screen w-full overflow-hidden" dir="rtl">
|
<div className="partner-strip-wrap" aria-hidden>
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="partner-strip" role="presentation" aria-hidden>
|
||||||
<AnimatedStars />
|
<div className="partner-item" aria-label="شريك TPS">
|
||||||
|
<img src="src/assets/TPS-logo.png" alt="TPS" />
|
||||||
<motion.div
|
</div>
|
||||||
className="absolute inset-0"
|
<div className="partner-item" aria-label="شريك NSC">
|
||||||
animate={{
|
<img src="src/assets/NSC.png" alt="NSC" />
|
||||||
background: [
|
</div>
|
||||||
"radial-gradient(circle at 30% 50%, rgba(63, 68, 106, 0.2) 0%, transparent 50%)",
|
<div className="partner-item" aria-label="شريك LOGO">
|
||||||
"radial-gradient(circle at 70% 50%, rgba(54, 57, 163, 0.3) 0%, transparent 50%)",
|
<img src="src/assets/LOGO.png" alt="LOGO" />
|
||||||
"radial-gradient(circle at 30% 50%, rgba(63, 68, 106, 0.2) 0%, transparent 50%)",
|
</div>
|
||||||
],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 20,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatType: "reverse",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
|
||||||
<motion.div
|
|
||||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full"
|
|
||||||
animate={{
|
|
||||||
background: [
|
|
||||||
"radial-gradient(circle, rgba(87, 97, 221, 0.15) 0%, transparent 70%)",
|
|
||||||
"radial-gradient(circle, rgba(54, 57, 163, 0.2) 0%, transparent 70%)",
|
|
||||||
"radial-gradient(circle, rgba(87, 97, 221, 0.15) 0%, transparent 70%)",
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 10,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatType: "reverse",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative z-10 min-h-screen flex flex-col items-center justify-center px-4">
|
|
||||||
<AnimatePresence>
|
|
||||||
{showLogo && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 50, scale: 0.9 }}
|
|
||||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
||||||
transition={{
|
|
||||||
duration: 1.2,
|
|
||||||
type: "spring",
|
|
||||||
damping: 20,
|
|
||||||
}}
|
|
||||||
className="relative mb-2"
|
|
||||||
>
|
|
||||||
<div className="relative">
|
|
||||||
<motion.img
|
|
||||||
src={companyLogo}
|
|
||||||
alt="Company Logo"
|
|
||||||
className="w-auto max-w-[280px] md:max-w-[400px] lg:max-w-[400px] h-auto"
|
|
||||||
whileHover={{ scale: 1.03 }}
|
|
||||||
transition={{ type: "spring", stiffness: 300 }}
|
|
||||||
/>
|
|
||||||
<motion.div
|
|
||||||
className="absolute inset-0 -z-10 blur-2xl opacity-40"
|
|
||||||
style={{
|
|
||||||
background: "linear-gradient(135deg, #5761dd 0%, #3639a3 50%, #3f446a 100%)",
|
|
||||||
}}
|
|
||||||
animate={{
|
|
||||||
scale: [1, 1.05, 1],
|
|
||||||
opacity: [0.3, 0.5, 0.3],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 4,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatType: "reverse",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
|
|
||||||
<AnimatePresence>
|
|
||||||
{showTagline && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{
|
|
||||||
duration: 1,
|
|
||||||
delay: 0.8,
|
|
||||||
}}
|
|
||||||
className="text-center max-w-4xl mx-auto"
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
className="text-xl md:text-2xl lg:text-2xl font-bold text-white mb-4 leading-relaxed"
|
|
||||||
animate={{
|
|
||||||
opacity: [0.9, 1, 0.9],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 4,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatType: "reverse",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h2 className="mb-4 text-2xl md:text-3xl">
|
|
||||||
شريكك الهندسي والتقني الرائد
|
|
||||||
</h2>
|
|
||||||
<p className="mb-3">
|
|
||||||
في تنفيذ وإدارة المشاريع الصناعية والسكنية والنفطية
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
والمساهمة في تطوير البنية التحتية والقطاعات الإنتاجية
|
|
||||||
<span className="block mt-3 text-xl md:text-2xl">
|
|
||||||
عبر حلول حديثة ومستدامة
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
className="w-48 h-1 mx-auto bg-gradient-to-r from-transparent via-[#5761dd] via-[#3639a3] to-transparent mt-6"
|
|
||||||
animate={{
|
|
||||||
scaleX: [0.5, 1, 0.5],
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 3,
|
|
||||||
repeat: Infinity,
|
|
||||||
repeatType: "reverse",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
className="absolute inset-0 pointer-events-none"
|
|
||||||
style={{
|
|
||||||
background: `radial-gradient(circle at ${scrollProgress * 100}% ${50 + scrollProgress * 20}%, rgba(87, 97, 221, 0.1) 0%, transparent 50%)`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</Element>
|
|
||||||
|
<Element name="departments" id="departments">
|
||||||
|
<Departments />
|
||||||
|
</Element>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Home;
|
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%; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|||||||
BIN
src/assets/Images/d1.jpeg
Normal file
BIN
src/assets/Images/d1.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
src/assets/Images/d10.png
Normal file
BIN
src/assets/Images/d10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
src/assets/Images/d11.png
Normal file
BIN
src/assets/Images/d11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
src/assets/Images/d12.jpeg
Normal file
BIN
src/assets/Images/d12.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
src/assets/Images/d13.jpeg
Normal file
BIN
src/assets/Images/d13.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
src/assets/Images/d14.jpg
Normal file
BIN
src/assets/Images/d14.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
src/assets/Images/d15.jpg
Normal file
BIN
src/assets/Images/d15.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/Images/d16.jpg
Normal file
BIN
src/assets/Images/d16.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/Images/d17.png
Normal file
BIN
src/assets/Images/d17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 KiB |
BIN
src/assets/Images/d18.jpg
Normal file
BIN
src/assets/Images/d18.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
src/assets/Images/d19.jpeg
Normal file
BIN
src/assets/Images/d19.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/Images/d2.jpeg
Normal file
BIN
src/assets/Images/d2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
src/assets/Images/d20.jpeg
Normal file
BIN
src/assets/Images/d20.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
src/assets/Images/d21.jpeg
Normal file
BIN
src/assets/Images/d21.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/Images/d22.jpg
Normal file
BIN
src/assets/Images/d22.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
src/assets/Images/d3.jpeg
Normal file
BIN
src/assets/Images/d3.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
src/assets/Images/d4.jpeg
Normal file
BIN
src/assets/Images/d4.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
src/assets/Images/d5.jpeg
Normal file
BIN
src/assets/Images/d5.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
src/assets/Images/d6.jpeg
Normal file
BIN
src/assets/Images/d6.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
src/assets/Images/d7.jpeg
Normal file
BIN
src/assets/Images/d7.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
src/assets/Images/d8.png
Normal file
BIN
src/assets/Images/d8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
BIN
src/assets/Images/d9.png
Normal file
BIN
src/assets/Images/d9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
BIN
src/assets/LOGO.png
Normal file
BIN
src/assets/LOGO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/assets/NSC.png
Normal file
BIN
src/assets/NSC.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
src/assets/TPS-logo.png
Normal file
BIN
src/assets/TPS-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Reference in New Issue
Block a user