Rahaf/REXNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

my changes

Browse Source
This commit is contained in:
Beilin
2026-01-09 00:07:39 +03:00
parent 6420af403a
commit 7ad7dff0da
24 changed files with 2345 additions and 727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

830
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -13,6 +13,8 @@
"@emailjs/browser": "^4.4.1", "@emailjs/browser": "^4.4.1",
"@tailwindcss/vite": "^4.1.18", "@tailwindcss/vite": "^4.1.18",
"aos": "^2.3.4", "aos": "^2.3.4",
"flowbite": "^4.0.1",
"flowbite-react": "^0.12.16",
"framer-motion": "^12.23.26", "framer-motion": "^12.23.26",
"i18next": "^25.7.3", "i18next": "^25.7.3",
"i18next-browser-languagedetector": "^8.2.0", "i18next-browser-languagedetector": "^8.2.0",
@ -21,7 +23,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-scroll": "^1.9.3" "react-router-dom": "^7.11.0",
"react-scroll": "^1.9.3",
"styled-components": "^6.1.19"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.39.1", "@eslint/js": "^9.39.1",

43
src/App.jsx
View File

@ -1,31 +1,64 @@
// App.jsx
import React from "react"; 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 ImagePreloader from "./Components/ImagePreloader";
import Footer from "./Components/Nav/Footer"; import Footer from "./Components/Nav/Footer";
import "./App.css";
const App = () => {
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="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen">
<Navbar /> <Navbar />
<main className="flex-grow"> <main className="flex-grow">
<Home /> <Home />
<Services /> <Services />
<About /> <About />
<Departments />
<Contact /> <Contact />
</main> </main>
<Footer /> <Footer />
</div> </div>
</div> </div>
</ImagePreloader> );
};
// Router view (نستخدم useLocation مع AnimatePresence لعمل انتقالات سلسة بين المسارات)
function RouterView() {
const location = useLocation();
return (
<LayoutGroup>
<AnimatePresence mode="wait">
<Routes location={location} key={location.pathname}>
<Route path="/" element={<MainPage />} />
<Route path="/departments/1" element={<DepartmentDetail />} />
{/* أضف مسارات إضافية هنا إذا احتجت */}
</Routes>
</AnimatePresence>
</LayoutGroup>
);
}
const App = () => {
return (
<BrowserRouter>
<RouterView />
</BrowserRouter>
); );
}; };

612
src/Components/ImagePreloader.jsx
View File

@ -1,336 +1,336 @@
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";
// List all critical images that need to be preloaded // // List all critical images that need to be preloaded
const imagesToPreload = [ // const imagesToPreload = [
// Home images // // Home images
// home1, // // home1,
// home1Mobile, // // home1Mobile,
// home2, // // home2,
// home2Mobile, // // home2Mobile,
// home3, // // home3,
// home4, // // home4,
// home4Mobile, // // home4Mobile,
// home5, // // home5,
// home6, // // home6,
// home6Mobile, // // home6Mobile,
// home7, // // home7,
// home7Mobile, // // home7Mobile,
// home8, // // home8,
// home8Mobile, // // home8Mobile,
// home9, // // home9,
// home10, // // home10,
// 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;

187
src/Components/Nav/Navbar.jsx
View File

@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "react-scroll"; import { Link } from "react-scroll";
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
import "../../index.css"; import "../../index.css";
const Navbar = () => { const Navbar = () => {
@ -10,7 +9,6 @@ const Navbar = () => {
const [activeSection, setActiveSection] = useState("home"); const [activeSection, setActiveSection] = useState("home");
const [isDarkMode, setIsDarkMode] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false);
// Initialize dark mode
useEffect(() => { useEffect(() => {
const savedTheme = localStorage.getItem("theme"); const savedTheme = localStorage.getItem("theme");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@ -26,7 +24,6 @@ const Navbar = () => {
setMenuOpen(!menuOpen); setMenuOpen(!menuOpen);
}; };
// Toggle dark/light mode
const toggleDarkMode = () => { const toggleDarkMode = () => {
const newDarkMode = !isDarkMode; const newDarkMode = !isDarkMode;
setIsDarkMode(newDarkMode); setIsDarkMode(newDarkMode);
@ -40,25 +37,19 @@ const Navbar = () => {
} }
}; };
// Handle scroll to update active section
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
const sections = ["home", "services", "about", "contact"]; const sections = ["home", "services", "about", "contact", "sections"];
const scrollPosition = window.scrollY + 100; const scrollPosition = window.scrollY + 120; // offset to detect current section
for (const section of sections) { for (const section of sections) {
const element = const element =
document.getElementById(section) || document.getElementById(section) || document.querySelector(`[name="${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 ( if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
scrollPosition >= offsetTop &&
scrollPosition < offsetTop + offsetHeight
) {
setActiveSection(section); setActiveSection(section);
break; break;
} }
@ -70,7 +61,6 @@ const Navbar = () => {
return () => window.removeEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll);
}, []); }, []);
// Update document direction when language changes
useEffect(() => { useEffect(() => {
if (i18n.language === "ar") { if (i18n.language === "ar") {
document.documentElement.dir = "rtl"; document.documentElement.dir = "rtl";
@ -82,28 +72,77 @@ const Navbar = () => {
}, [i18n.language]); }, [i18n.language]);
const navItems = [ const navItems = [
{ key: "home", label: t("nav.home") }, { key: "home", label: t("nav.home", "الرئيسية") },
{ key: "services", label: t("nav.services") }, { key: "services", label: t("nav.services", "الخدمات") },
{ key: "about", label: t("nav.about") }, { key: "about", label: t("nav.about", "من نحن") },
{ key: "contact", label: t("nav.contact") }, { key: "sections", label: t("nav.sections", "الأقسام") },
{ key: "contact", label: t("nav.contact", "تواصل معنا") },
]; ];
return ( const toggleLang = () => {
<nav className="bg-white/10 backdrop-blur-lg fixed top-0 w-full z-50 shadow h-14"> const newLang = i18n.language === "ar" ? "en" : "ar";
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-2 px-4"> i18n.changeLanguage(newLang);
{/* الشعار */} };
<img
src="src/assets/TPS-logo.png"
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
alt="TPS Logo"
/>
{/* الجانب الأيمن */} return (
<div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative"> <nav className="fixed top-6 left-0 right-0 z-50 pointer-events-auto">
<div className="max-w-screen-xl mx-auto px-4">
{/* grid: spacer | centered nav | controls */}
<div className="grid grid-cols-3 items-center">
{/* left: spacer (removed TPS image as requested) */}
<div className="flex items-center">
<div style={{ width: 44 }} />
</div>
{/* center: 3D nav card */}
<div className="flex justify-center">
<div
className="hidden md:flex items-center nav-center"
style={{ perspective: "1000px" }}
>
<div className="nav-card bg-gradient-to-r from-white/90 to-gray-100/60 dark:from-gray-800/75 dark:to-gray-900/70 backdrop-blur-sm rounded-2xl px-5 py-3 shadow-2xl">
<ul className="flex items-center space-x-6 rtl:space-x-reverse">
{navItems.map((item) => (
<li key={item.key}>
<Link
to={item.key}
smooth
duration={500}
spy={true}
offset={-70}
onSetActive={() => setActiveSection(item.key)}
onClick={() => {
setActiveSection(item.key);
setMenuOpen(false);
}}
className={`nav-item relative inline-flex items-center text-base md:text-lg font-semibold px-6 py-3 rounded-full transition-all duration-300 focus:outline-none select-none
${
activeSection === item.key
? "text-yellow-500"
: "text-gray-800 dark:text-white"
}
`}
role="link"
aria-current={activeSection === item.key ? "page" : undefined}
>
{/* glow layer */}
<span className="nav-item-glow" aria-hidden="true" />
<span className="relative z-10">{item.label}</span>
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
{/* right: controls (dark mode, language toggle, mobile) */}
<div className="flex justify-end items-center space-x-2 rtl:space-x-reverse">
<button <button
onClick={toggleDarkMode} onClick={toggleDarkMode}
type="button" type="button"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 ml-2 transition-colors duration-200" className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
aria-label={isDarkMode ? "Light Mode" : "Dark Mode"} aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
title={isDarkMode ? "Light Mode" : "Dark Mode"} title={isDarkMode ? "Light Mode" : "Dark Mode"}
> >
@ -118,52 +157,62 @@ const Navbar = () => {
)} )}
</button> </button>
{/* Language Switcher */} {/* Language toggle (only EN / AR) with a globe + letters icon */}
<LanguageSwitcher /> <button
onClick={toggleLang}
type="button"
className="inline-flex items-center px-3 py-2 rounded-lg border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all duration-200 text-sm font-medium"
aria-label="Toggle language"
title={i18n.language === "ar" ? "العربية" : "English"}
>
<span className="flex items-center gap-2">
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" />
<path d="M2 12h20M12 2v20M4.5 6.5c3 2.5 6 2.5 15 0" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<span className="text-sm font-semibold">{i18n.language === "ar" ? "ع" : "EN"}</span>
</span>
</button>
{/* زر القائمة للجوال */} {/* mobile menu toggle */}
<button <button
onClick={toggleMenu} onClick={toggleMenu}
type="button" type="button"
className="inline-flex items-center right--30 p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 ml-2" className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
aria-controls="navbar-menu" aria-controls="navbar-menu"
aria-expanded={menuOpen} aria-expanded={menuOpen}
> >
<span className="sr-only">Open main menu</span> <span className="sr-only">Open main menu</span>
<svg className="w-5 h-5" viewBox="0 0 17 14" fill="none"> <svg className="w-6 h-6" viewBox="0 0 17 14" fill="none">
<path <path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
d="M1 1h15M1 7h15M1 13h15"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg> </svg>
</button> </button>
</div> </div>
</div>
{/* روابط الأقسام */} {/* Mobile menu (centered items in column) */}
<div <div className={`${menuOpen ? "block" : "hidden"} md:hidden mt-3 bg-white/90 dark:bg-gray-900/80 backdrop-blur-sm rounded-lg p-3`}>
className={`w-full md:flex md:w-auto md:order-1 transition-all duration-300 ease-in-out ${ <ul className="flex flex-col items-center space-y-3">
menuOpen ? "block" : "hidden"
}`}
id="navbar-menu"
>
<ul className="flex flex-col md:flex-row bg-white dark:bg-gray-900 md:bg-transparent md:dark:bg-transparent p-4 md:p-0 rounded-lg shadow-md md:shadow-none space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y divide-gray-200 md:divide-y-0">
{navItems.map((item) => ( {navItems.map((item) => (
<li key={item.key} className="pt-2 md:pt-0"> <li key={item.key} className="w-full">
<Link <Link
to={item.key} to={item.key}
smooth smooth
duration={500} duration={500}
spy={true} spy={true}
offset={0} offset={-70}
onSetActive={() => setActiveSection(item.key)} onSetActive={() => setActiveSection(item.key)}
className={`block text-center md:inline cursor-pointer text-lg font-semibold transition duration-200 ${ onClick={() => {
setActiveSection(item.key);
setMenuOpen(false);
}}
className={`block w-full text-center px-6 py-3 rounded-lg font-semibold transition-all duration-250
${
activeSection === item.key activeSection === item.key
? "text-yellow-500" ? "text-yellow-500 ring-4 ring-yellow-300/30 shadow-lg"
: "text-gray-800 dark:text-white hover:text-yellow-500" : "text-gray-800 dark:text-white hover:text-yellow-500"
}`} }
`}
> >
{item.label} {item.label}
</Link> </Link>
@ -172,6 +221,34 @@ const Navbar = () => {
</ul> </ul>
</div> </div>
</div> </div>
{/* inline CSS for 3D / hover visual polish */}
<style>{`
.nav-center { perspective: 1000px; }
.nav-card { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(.2,.9,.3,1), box-shadow 0.35s; }
.nav-item { transform-style: preserve-3d; transition: transform 0.28s, box-shadow 0.28s, color 0.2s; position: relative; }
.nav-item:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 20px 34px rgba(2,6,23,0.14); }
.nav-item:active { transform: translateY(-4px) scale(1.03); }
.nav-item-glow { position: absolute; inset: -8px; border-radius: 9999px; filter: blur(14px); opacity:0; transition: opacity 0.35s, transform 0.35s; pointer-events:none; z-index:0; }
.nav-item .relative { z-index: 10; }
.nav-item-glow { background: radial-gradient(circle at 50% 40%, rgba(250,204,21,0.14), transparent 30%); transform: scale(0.98); }
.nav-item:hover .nav-item-glow { opacity:0.9; transform: scale(1.03); }
/* IMPORTANT: active (aria-current) NO longer elevates - only color change and subtle underline */
.nav-item[aria-current="page"] { transform: none !important; box-shadow: none !important; }
.nav-item[aria-current="page"]::after { content: ""; position: absolute; height: 3px; left: 18%; right: 18%; bottom: -6px; border-radius: 9999px; background: linear-gradient(90deg, rgba(250,204,21,0.95), rgba(250,200,40,0.9)); opacity: 1; }
/* ensure text doesn't wrap */
.nav-item span { white-space: nowrap; }
/* small accessibility tweak: focus visible style */
.nav-item:focus-visible { outline: 3px solid rgba(99,102,241,0.12); outline-offset: 4px; }
/* mobile: slightly larger tappable targets */
@media (max-width: 767px) {
.nav-item { padding-left: 1rem; padding-right: 1rem; }
}
`}</style>
</nav> </nav>
); );
}; };

22
src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx Normal file
View 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>
);
}

641
src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx Normal file
View File

@ -0,0 +1,641 @@
// DepartmentDetail.jsx
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:#ea580c;stop-opacity:1");
const stop2 = document.createElementNS(svgNS, "stop");
stop2.setAttribute("offset", "50%");
stop2.setAttribute("style", "stop-color:#dc2626;stop-opacity:1");
const stop3 = document.createElementNS(svgNS, "stop");
stop3.setAttribute("offset", "100%");
stop3.setAttribute("style", "stop-color:#b91c1c;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(251, 191, 36, 0.3))";
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:#0f172a;--bg-mid:#1e293b;--bg-end:#334155}
.projects-timeline-root { direction: rtl; min-height: 100%; }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
.timeline-scroll::-webkit-scrollbar{ height:10px;}
.timeline-scroll::-webkit-scrollbar-track{ background: transparent; border-radius:10px; margin:0 8px;}
.timeline-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius:10px; border:2px solid transparent; background-clip:padding-box;}
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background:linear-gradient(135deg,#dc2626 0%,#b91c1c 50%,#991b1b 100%); color:white; box-shadow:0 8px 25px rgba(220,38,38,.4); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:5px solid rgba(255,255,255,.25); position:relative; z-index:2; backdrop-filter: blur(10px); }
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(220,38,38,.3); opacity:0; transition:all .6s ease; }
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 15px 50px rgba(220,38,38,.5); border-color: rgba(255,255,255,.5); transform: translateY(-15px) scale(1.05); animation: glow 2s ease-in-out infinite; }
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
@keyframes glow { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.15);} }
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.3); opacity:0;} }
.project-card { margin-top:40px; background: #ffffff; border-radius:20px; padding:28px; min-width:320px; max-width:380px; box-shadow:0 8px 30px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04); opacity:.6; transform: scale(.92) translateY(10px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(251,191,36,.1); position:relative; overflow:hidden;}
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left,#dc2626,#b91c1c,#991b1b); opacity:0; transition:opacity .6s ease;}
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 20px 60px rgba(0,0,0,.12),0 5px 15px rgba(0,0,0,.06),0 0 0 1px rgba(220,38,38,.15); border-color: rgba(220,38,38,.25); }
.timeline-item.active .project-card::before { opacity:1; }
.project-text { font-size:15px; line-height:2; color:#1f2937; font-weight:500; }
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
.timeline-item.active .project-text li:hover { background: rgba(220,38,38,.08); transform: translateX(-4px); }
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:#dc2626; box-shadow:0 6px 20px rgba(0,0,0,.15); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(10px); }
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fee2e2 100%); transform: scale(1.15); box-shadow:0 10px 35px rgba(220,38,38,.25); }
.scroll-btn: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%, #475569 100%)" };
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>
);
}

167
src/Components/Sections/Departments/Departments.jsx Normal file
View File

@ -0,0 +1,167 @@
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 d2 from "../../../../src/assets/Images/d2.jpeg";
import d3 from "../../../../src/assets/Images/d3.jpeg";
import d4 from "../../../../src/assets/Images/d4.jpeg";
import d5 from "../../../../src/assets/Images/d5.jpeg";
import d6 from "../../../../src/assets/Images/d6.jpeg";
import d7 from "../../../../src/assets/Images/d7.png";
import d8 from "../../../../src/assets/Images/d8.png";
import d9 from "../../../../src/assets/Images/d9.png";
// بيانات الأقسام
const departments = [
{ id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
{ id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d2 },
{ id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d3 },
{ id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d4 },
{ id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d5 },
{ id: 6, title: "قسم المشاريع الاستراتيجية", image: d6 },
{ id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d7 },
{ id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d8 },
{ id: 9, title: "قسم الاتمتة والتحكم", image: d9 },
];
// بطاقة القسم
function DepartmentCard({ dept, offset }) {
const navigate = useNavigate();
const wrapperRef = useRef(null);
// mouse tilt
const rotateX = useMotionValue(0);
const rotateY = useMotionValue(0);
const scale = useMotionValue(1);
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);
};
// scroll parallax
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
);
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={() => navigate(`/departments/${dept.id}`)}
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>
);
}

500
src/Components/Sections/Home/Home.jsx
View File

@ -1,279 +1,265 @@
import React, { useState, useEffect } from "react"; import React, { useEffect, useState, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { Button, Dropdown } from "flowbite-react";
import { Element } from "react-scroll";
import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa"; export default function EngineeringHeroFlowbite() {
import { useTranslation } from "react-i18next"; const defaultConfig = {
import "../../../index.css"; main_title: "حلول هندسية متكاملة",
subtitle: "نصمم ونبني المستقبل بخبرة ودقة واحترافية",
primary_color: "#e67e22",
const home1 = "https://i.imgur.com/g4fVyLj.jpg"; background_color: "#000000",
const home1Mobile = "https://i.imgur.com/NNeCIAj.jpg"; text_color: "#ffffff",
secondary_surface: "#95a5a6",
const home2 = "https://i.imgur.com/d9enpvc.jpg"; secondary_action: "#34495e",
const home2Mobile = "https://i.imgur.com/a85P9Q8.jpg"; font_family: "Cairo",
font_size: 16,
const home3 = "https://i.imgur.com/nWTJcjz.jpg";
const home4 = "https://i.imgur.com/btajXYO.jpg";
const home4Mobile = "https://i.imgur.com/BZnHa4v.jpg";
const home6 = "https://i.imgur.com/gtwlzDA.jpg";
const home6Mobile = "https://i.imgur.com/xs8OB15.jpg";
const home7 = "https://i.imgur.com/kSErZeJ.jpg";
const home7Mobile = "https://i.imgur.com/02ftPiK.jpg";
const home8 = "https://i.imgur.com/0gsQF8L.jpg";
const home8Mobile = "https://i.imgur.com/vey37dG.jpg";
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { staggerChildren: 0.3, when: "beforeChildren" },
},
}; };
const itemVariants = { const [config, setConfig] = useState(defaultConfig);
hidden: { opacity: 0, y: 20 }, const [dropdownOpen, setDropdownOpen] = useState(false);
visible: { opacity: 1, y: 0, transition: { duration: 0.8 } }, const mainTitleRef = useRef(null);
}; const subtitleRef = useRef(null);
const Home = () => {
const { t } = useTranslation();
const [currentIndex, setCurrentIndex] = useState(0);
const [menuOpen, setMenuOpen] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const phrases = t("home.phrases", { returnObjects: true });
useEffect(() => { useEffect(() => {
const updateSize = () => setIsMobile(window.innerWidth < 640); const id = "cairo-font-link";
updateSize(); if (!document.getElementById(id)) {
window.addEventListener("resize", updateSize); const link = document.createElement("link");
return () => window.removeEventListener("resize", updateSize); link.id = id;
link.rel = "stylesheet";
link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
document.head.appendChild(link);
}
}, []); }, []);
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const main = mainTitleRef.current;
setCurrentIndex((prev) => (prev + 1) % phrases.length); const sub = subtitleRef.current;
}, 4000); const baseFontStack = "Arial, sans-serif";
return () => clearInterval(interval); const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
}, [phrases.length]); const baseSize = config.font_size || defaultConfig.font_size;
const nextPhrase = () => { if (main) {
setCurrentIndex((prev) => (prev + 1) % phrases.length); main.textContent = config.main_title || defaultConfig.main_title;
}; main.style.fontFamily = font;
main.style.fontSize = `${baseSize * 4}px`;
const prevPhrase = () => { main.style.color = config.text_color || defaultConfig.text_color;
setCurrentIndex((prev) => (prev - 1 + phrases.length) % phrases.length);
};
const getBackgroundImage = () => {
switch (currentIndex) {
case 0:
return isMobile ? home2Mobile : home2;
case 1:
return home3;
case 2:
return isMobile ? home4Mobile : home4;
case 3:
return isMobile ? home6Mobile : home6;
case 4:
return isMobile ? home8Mobile : home8;
case 5:
return isMobile ? home7Mobile : home7;
case 6:
return isMobile ? home1Mobile : home1;
default:
return "";
} }
if (sub) {
sub.textContent = config.subtitle || defaultConfig.subtitle;
sub.style.fontFamily = font;
sub.style.fontSize = `${baseSize * 1.75}px`;
sub.style.color = config.text_color || defaultConfig.text_color;
}
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) {}
}
}, []);
return ( return (
<Element name="home"> <div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: 'var(--ehb-background, #000000)' }}>
<div className="relative h-screen w-full" dir="rtl"> <style>{`
{/* الخلفية */} :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
<div .logo-container{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--ehb-background) 0%, #34495e 100%);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeOutContainer 0.5s ease-out 4s forwards}
className="absolute inset-0 bg-cover bg-center z-0 transition-all duration-1000" .logo{width:80px;height:80px;border-radius:12px;position:absolute;opacity:0;transform:translateY(100%);display:flex;align-items:center;justify-content:center;background:transparent}
style={{ backgroundImage: `url('${getBackgroundImage()}')` }} .logo img{max-width:70%;max-height:70%;object-fit:contain;display:block}
loading="eager" .logo-1{animation:jumpIn 0.6s ease-out 0.2s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
fetchPriority="high" .logo-2{animation:jumpIn 0.6s ease-out 0.4s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
/> .logo-3{animation:jumpIn 0.6s ease-out 0.6s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
<div className="absolute inset-0 bg-black/50 z-10" /> .final-logo{width:120px;height:120px;background:transparent;border-radius:16px;position:absolute;opacity:0;transform:scale(0);animation:finalLogoAppear 0.6s ease-out 2.8s forwards;display:flex;align-items:center;justify-content:center}
.final-logo img{max-width:80%;max-height:80%;object-fit:contain;display:block}
@keyframes jumpIn{0%{opacity:0;transform:translateY(100%)}60%{transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes moveToMerge{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes finalLogoAppear{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeOutContainer{to{opacity:0;visibility:hidden}}
.hero-section{position:relative;width:100%;height:100%;overflow:hidden;opacity:0;animation:fadeInHero 1s ease-out 4.5s forwards}
@keyframes fadeInHero{to{opacity:1}}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
.hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:40px;gap:2rem;direction:ltr;flex-direction:row}
.hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px}
.hero-left img{max-width:100%;height:auto;display:block}
.hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
.hero-title{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6s forwards}
.hero-subtitle{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6.3s forwards}
@keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}
{/* المحتوى */} /* Brighter, more luminous navy glows: stronger cores, additional layered highlights, subtle lens flare and increased saturation */
<div className="relative z-20 flex flex-col items-center justify-center h-full w-full px-4 text-white text-center"> .navy-glow{position:absolute;pointer-events:none;z-index:4;opacity:1;transform:translateZ(0);mix-blend-mode:screen;filter:blur(160px) saturate(160%);transition:opacity .45s ease, transform .45s ease, filter .45s ease;will-change:opacity,transform,filter}
<motion.div
className="flex flex-col items-center justify-center gap-y-6 w-full max-w-screen-sm sm:max-w-2xl md:max-w-4xl"
variants={containerVariants}
initial="hidden"
animate="visible"
>
{/* العنوان المتغير */}
<motion.div
className="relative flex items-center justify-between w-full px-2 sm:px-4"
variants={itemVariants}
>
<motion.button
onClick={prevPhrase}
className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
aria-label="السابق"
>
<svg
viewBox="0 0 32 32"
strokeWidth={2}
stroke="currentColor"
className="w-8 h-8 sm:w-10 sm:h-10"
fill="none"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 6l10 10-10 10"
/>
</svg>
</motion.button>
<div className="relative h-[120px] sm:h-[150px] w-full flex justify-center items-center px-2"> /* bottom-left glow: very bright core + warm accent rim for contrast */
<AnimatePresence mode="wait"> .navy-glow.bottom-left{left:0;bottom:0;width:90vh;height:90vh;border-radius:50%;
<motion.span background: radial-gradient(circle at 15% 88%, rgba(10,34,78,0.98) 0%, rgba(22,54,110,0.76) 18%, rgba(40,78,140,0.48) 36%, rgba(6,23,58,0) 62%);
key={currentIndex} box-shadow: 0 0 120px 32px rgba(10,34,78,0.12), inset 0 0 140px 10px rgba(230,126,34,0.035);
className="absolute text-xl sm:text-3xl md:text-5xl font-bold text-[var(--primary-color)] text-center px-2 max-w-full break-words" animation: glowFloat 9s ease-in-out infinite alternate, glowPulse 5.8s ease-in-out infinite;}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} /* layered depth */
exit={{ opacity: 0, y: -20 }} .navy-glow.bottom-left::before, .navy-glow.bottom-left::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
transition={{ duration: 0.5 }} .navy-glow.bottom-left::before{background: radial-gradient(circle at 22% 78%, rgba(120,170,220,0.22), rgba(120,170,220,0) 46%);transform:scale(0.95);filter:blur(42px);opacity:0.96}
> .navy-glow.bottom-left::after{background: radial-gradient(circle at 42% 92%, rgba(230,126,34,0.12), rgba(230,126,34,0) 52%);transform:scale(0.7);filter:blur(30px);opacity:0.7}
{phrases[currentIndex]} /* tiny bright flare center */
</motion.span> .navy-glow.bottom-left .flare{position:absolute;left:18%;bottom:20%;width:18vh;height:18vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 8%, rgba(10,34,78,0.0) 45%);filter:blur(28px);opacity:0.95}
</AnimatePresence>
/* top-right glow: tighter and brighter to balance composition */
.navy-glow.top-right{right:0;top:0;width:78vh;height:78vh;border-radius:50%;
background: radial-gradient(circle at 88% 12%, rgba(12,36,82,0.98) 0%, rgba(20,44,88,0.72) 16%, rgba(44,78,140,0.38) 36%, rgba(6,23,58,0) 62%);
box-shadow: 0 0 110px 24px rgba(44,78,140,0.08), inset 0 0 120px 6px rgba(255,255,255,0.02);
animation: glowFloat 11.5s ease-in-out infinite alternate, glowPulse 6.6s ease-in-out infinite}
.navy-glow.top-right::before, .navy-glow.top-right::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
.navy-glow.top-right::before{background: radial-gradient(circle at 70% 30%, rgba(160,200,255,0.18), rgba(160,200,255,0) 48%);transform:scale(0.94);filter:blur(40px);opacity:0.98}
.navy-glow.top-right::after{background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%);transform:scale(0.62);filter:blur(24px);opacity:0.6}
.navy-glow.top-right .flare{position:absolute;right:14%;top:12%;width:10vh;height:10vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.28) 10%, rgba(12,36,82,0) 48%);filter:blur(20px);opacity:0.9}
/* slightly stronger pulse and float so glow reads as illuminated but stays subtle */
@keyframes glowFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-22px) scale(1.045)}}
@keyframes glowPulse{0%{opacity:1}50%{opacity:0.66}100%{opacity:1}}
/* small responsive tweak so glows don't overwhelm on narrow screens */
@media (max-width: 640px){
.navy-glow.bottom-left{width:56vh;height:56vh;filter:blur(110px)}
.navy-glow.top-right{width:50vh;height:50vh;filter:blur(106px)}
.navy-glow.bottom-left .flare, .navy-glow.top-right .flare{display:none}
}
`}</style>
<div className="logo-container">
<div className="logo logo-1" style={{ left: 'calc(50% - 200px)' }}>
<img src="src/assets/TPS-logo.png" alt="TPS logo" />
</div>
<div className="logo logo-2" style={{ left: 'calc(50% - 40px)' }}>
<img src="src/assets/NSC.png" alt="NSC logo" />
</div>
<div className="logo logo-3" style={{ left: 'calc(50% + 120px)' }}>
<img src="src/assets/LOGO.png" alt="LOGO" />
</div>
<div className="final-logo">
<img src="src/assets/REXNT.png" alt="REXNT" />
</div>
</div> </div>
<motion.button <div className="hero-section">
onClick={nextPhrase} {/* removed the previous hero-image background as requested */}
className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
aria-label="التالي"
>
<svg
viewBox="0 0 32 32"
strokeWidth={2}
stroke="currentColor"
className="w-8 h-8 sm:w-10 sm:h-10"
fill="none"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 6L11 16l10 10"
/>
</svg>
</motion.button>
</motion.div>
{/* وصف إضافي */} <div className="navy-glow bottom-left"><div className="flare" /></div>
<motion.div className="w-full px-2 sm:px-4" variants={itemVariants}> <div className="navy-glow top-right"><div className="flare" /></div>
<div className="text-sm sm:text-lg md:text-2xl text-white space-y-1">
<p>{t("home.subtitle1")}</p> <div className="hero-overlay" />
<p>{t("home.subtitle2")}</p>
<div className="hero-layout">
<div className="hero-left">
<img src="src/assets/REXNT.png" alt="REXNT" />
</div> </div>
</motion.div>
{/* زر تواصل معنا */} <div className="hero-content">
<motion.div <h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 24, textShadow: '2px 2px 8px rgba(0,0,0,0.5)' }} />
className="w-full flex justify-center"
variants={itemVariants} <p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: '1px 1px 4px rgba(0,0,0,0.5)' }} />
>
<div className="mt-8 flex items-center gap-6 justify-end">
<Button color="light" onClick={() => window?.scrollTo?.({ top: 0, behavior: 'smooth' })}>ابدأ</Button>
<div className="relative"> <div className="relative">
<motion.button <Button onClick={() => setDropdownOpen((s) => !s)} className="bg-[var(--ehb-primary)] text-black font-semibold">
onClick={() => setMenuOpen((prev) => !prev)} تواصل معنا
whileHover={{ scale: 1.05 }} </Button>
className="relative inline-flex items-center justify-center px-8 py-2.5 overflow-hidden tracking-tighter text-white bg-[#EB8317] rounded-md group"
style={{ zIndex: 30 }}
>
<span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-[rgba(10,25,70,0.9)] rounded-full group-hover:w-56 group-hover:h-56"></span>
<span className="absolute bottom-0 left-0 h-full -ml-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-auto h-full opacity-100 object-stretch"
viewBox="0 0 487 487"
>
<path
fillOpacity=".1"
fillRule="nonzero"
fill="#FFF"
d="M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z"
/>
</svg>
</span>
<span className="absolute top-0 right-0 w-12 h-full -mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
className="object-cover w-full h-full"
viewBox="0 0 487 487"
>
<path
fillOpacity=".1"
fillRule="nonzero"
fill="#FFF"
d="M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z"
/>
</svg>
</span>
<span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-200"></span>
<span className="relative text-base font-semibold">
{t("home.contactUs")}
</span>
</motion.button>
<AnimatePresence>
{menuOpen && (
<motion.div
initial={{ opacity: 0, x: 20, y: -10 }}
animate={{ opacity: 1, x: 0, y: 10 }}
exit={{ opacity: 0, x: 20, y: -10 }}
transition={{ duration: 0.3 }}
className={`absolute top-16 ${
isMobile ? "right-0" : "sm:right-32"
} bg-[rgba(10,25,70,0.9)] text-white rounded-lg shadow-lg py-5 px-5 z-40`}
>
<a
href="https://wa.me/963965656631"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
>
<FaWhatsapp className="text-xl" />
<span>963965656631</span>
</a>
<a
href="https://wa.me/963965656635"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
>
<FaWhatsapp className="text-xl" />
<FaPhone className="text-xl" />
<span>963965656635</span>
</a>
<a
href="mailto:info@TPS-STATIONS.COM"
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
>
<FaEnvelope className="text-xl" />
<span>info@TPS-STATIONS.COM</span>
</a>
</motion.div>
)}
</AnimatePresence>
</div>
</motion.div>
</motion.div>
</div>
</div>
</Element>
);
};
export default Home; {dropdownOpen && (
<div className="absolute mt-3 right-0 bg-[#06173a] border border-white/10 rounded p-3 text-white shadow-2xl">
<a className="flex items-center gap-3 py-2 px-3 hover:underline" href="https://wa.me/963965656631" target="_blank" rel="noreferrer">📱 <span>+963965656631</span></a>
<a className="flex items-center gap-3 py-2 px-3 hover:underline" href="mailto:info@TPS-STATIONS.COM">✉️ <span>info@TPS-STATIONS.COM</span></a>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

BIN
src/assets/Images/d1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
src/assets/Images/d10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
src/assets/Images/d11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
src/assets/Images/d2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/assets/Images/d3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
src/assets/Images/d4.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
src/assets/Images/d5.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/assets/Images/d6.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
src/assets/Images/d7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

BIN
src/assets/Images/d8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

BIN
src/assets/Images/d9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
src/assets/Images/gasstation.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/LOGO.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
src/assets/NSC.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
src/assets/REXNT.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB