Initial commit
This commit is contained in:
Rahaf
0
src/App.css
Normal file
0
src/App.css
Normal file
26
src/App.jsx
Normal file
26
src/App.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import "./i18n"; // Import i18n configuration
|
||||
import Navbar from "./Components/Nav/Navbar";
|
||||
import Home from "./Components/Sections/Home/Home";
|
||||
import Services from "./Components/Sections/Services/Services";
|
||||
import About from "./Components/Sections/About/About";
|
||||
import Contact from "./Components/Sections/Contact/Contact";
|
||||
import ImagePreloader from "./Components/ImagePreloader";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ImagePreloader>
|
||||
<div className="App">
|
||||
<Navbar />
|
||||
<Home />
|
||||
<Services />
|
||||
<About />
|
||||
<Contact />
|
||||
</div>
|
||||
</ImagePreloader>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
//test
|
||||
336
src/Components/ImagePreloader.jsx
Normal file
336
src/Components/ImagePreloader.jsx
Normal file
@ -0,0 +1,336 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
// Import all images statically
|
||||
// import home1 from "../assets/home1.jpg";
|
||||
// import home1Mobile from "../assets/home1-2.jpg";
|
||||
// import home2 from "../assets/home2.jpg";
|
||||
// import home2Mobile from "../assets/home2-2.jpg";
|
||||
// import home3 from "../assets/home3.png";
|
||||
// import home4 from "../assets/home4.png";
|
||||
// // import home4Mobile from "../assets/home4-2.jpg";
|
||||
// import home5 from "../assets/home5.png";
|
||||
// import home6 from "../assets/home6.jpg";
|
||||
// import home6Mobile from "../assets/home6-2.jpg";
|
||||
// import home7 from "../assets/home7.jpg";
|
||||
// import home7Mobile from "../assets/home7-2.jpg";
|
||||
// import home8 from "../assets/home8.jpg";
|
||||
// import home8Mobile from "../assets/home8-2.jpg";
|
||||
// import home9 from "../assets/home9.jpg";
|
||||
// import home10 from "../assets/home10.jpg";
|
||||
|
||||
// Services images
|
||||
import gasStation from "../assets/Images/gasstation.jpg";
|
||||
|
||||
|
||||
// List all critical images that need to be preloaded
|
||||
const imagesToPreload = [
|
||||
// Home images
|
||||
// home1,
|
||||
// home1Mobile,
|
||||
// home2,
|
||||
// home2Mobile,
|
||||
// home3,
|
||||
// home4,
|
||||
// home4Mobile,
|
||||
// home5,
|
||||
// home6,
|
||||
// home6Mobile,
|
||||
// home7,
|
||||
// home7Mobile,
|
||||
// home8,
|
||||
// home8Mobile,
|
||||
// home9,
|
||||
// home10,
|
||||
// Services images
|
||||
gasStation,
|
||||
|
||||
];
|
||||
|
||||
const ImagePreloader = ({ children }) => {
|
||||
const [imagesLoaded, setImagesLoaded] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
let loadedCount = 0;
|
||||
const totalImages = imagesToPreload.length;
|
||||
|
||||
const preloadImages = async () => {
|
||||
try {
|
||||
const loadImage = (src) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.src = src;
|
||||
img.onload = () => {
|
||||
loadedCount++;
|
||||
setProgress(Math.floor((loadedCount / totalImages) * 100));
|
||||
resolve();
|
||||
};
|
||||
img.onerror = reject;
|
||||
});
|
||||
};
|
||||
|
||||
await Promise.all(imagesToPreload.map(loadImage));
|
||||
setImagesLoaded(true);
|
||||
} catch (error) {
|
||||
console.error("Failed to preload images:", error);
|
||||
// Continue anyway after a timeout
|
||||
setTimeout(() => setImagesLoaded(true), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
preloadImages();
|
||||
}, []);
|
||||
|
||||
if (!imagesLoaded) {
|
||||
return (
|
||||
<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 */}
|
||||
<div className="absolute inset-0 overflow-hidden opacity-10">
|
||||
<div className="absolute top-0 left-0 w-full h-full">
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-white/30"
|
||||
style={{
|
||||
width: `${Math.random() * 10 + 5}px`,
|
||||
height: `${Math.random() * 10 + 5}px`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
animationDuration: `${Math.random() * 10 + 10}s`,
|
||||
animationDelay: `${Math.random() * 5}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company logo or branding could go here */}
|
||||
<div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
|
||||
TPS
|
||||
</div>
|
||||
|
||||
{/* 3D-style Fuel Tank */}
|
||||
<div className="relative w-72 h-56 mb-8 perspective-800">
|
||||
{/* Tank body with 3D effect */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
|
||||
style={{
|
||||
background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
|
||||
boxShadow:
|
||||
"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)",
|
||||
}}
|
||||
>
|
||||
{/* Glass effect overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
|
||||
|
||||
{/* Tank Cap with metallic effect */}
|
||||
<div
|
||||
className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
|
||||
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>
|
||||
|
||||
{/* Fuel Level with dynamic wave effect */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
|
||||
style={{
|
||||
height: `${progress}%`,
|
||||
background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
|
||||
boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
|
||||
}}
|
||||
>
|
||||
{/* Animated wave effect at the top of fuel */}
|
||||
<div className="absolute -top-2 left-0 w-full h-4 animate-wave">
|
||||
<div
|
||||
className="relative w-[200%] h-full"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
|
||||
backgroundSize: "50% 100%",
|
||||
animation: "moveWave 3s linear infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* Bubbles with varied animations */}
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-white/20"
|
||||
style={{
|
||||
width: `${Math.random() * 6 + 2}px`,
|
||||
height: `${Math.random() * 6 + 2}px`,
|
||||
bottom: `${Math.random() * 80}%`,
|
||||
left: `${Math.random() * 90 + 5}%`,
|
||||
animation: `bubble ${
|
||||
Math.random() * 3 + 2
|
||||
}s ease-in infinite ${Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-full border-b border-[#F3C623]/20 h-1/4"
|
||||
style={{
|
||||
boxShadow:
|
||||
progress > 75 - i * 25
|
||||
? "0 1px 3px rgba(243,198,35,0.3)"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fuel Gauge with realistic dial */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
|
||||
boxShadow:
|
||||
"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)",
|
||||
}}
|
||||
>
|
||||
{/* Gauge markings */}
|
||||
{[...Array(9)].map((_, i) => {
|
||||
const rotation = -135 + i * 30;
|
||||
const isLarge = i % 2 === 0;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`absolute w-${isLarge ? "1.5" : "1"} h-${
|
||||
isLarge ? "3" : "2"
|
||||
} bg-[#F3C623]/${isLarge ? "70" : "40"}`}
|
||||
style={{
|
||||
transform: `rotate(${rotation}deg) translateY(-7px)`,
|
||||
transformOrigin: "bottom center",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Gauge needle with smooth animation */}
|
||||
<div
|
||||
className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
|
||||
style={{
|
||||
transform: `rotate(${-135 + progress * 2.7}deg)`,
|
||||
transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
||||
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>
|
||||
|
||||
{/* Center pin */}
|
||||
<div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
|
||||
|
||||
{/* E and F indicators */}
|
||||
<div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
E
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
F
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress indicator with animated glow */}
|
||||
<div className="relative">
|
||||
<p
|
||||
className="text-white text-2xl font-bold"
|
||||
style={{
|
||||
textShadow: "0 0 10px rgba(255,255,255,0.3)",
|
||||
}}
|
||||
>
|
||||
{progress}%
|
||||
</p>
|
||||
<div
|
||||
className="absolute -inset-4 rounded-full opacity-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
|
||||
animation: "pulse 2s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<p className="mt-2 text-gray-300 font-medium tracking-wide">
|
||||
Filling your tank...
|
||||
</p>
|
||||
|
||||
{/* Advanced animations */}
|
||||
<style jsx>{`
|
||||
@keyframes bubble {
|
||||
0% {
|
||||
transform: translateY(0) scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-10px) scale(1);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-30px) scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-40px) scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveWave {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.perspective-800 {
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.animate-wave {
|
||||
overflow: hidden;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default ImagePreloader;
|
||||
87
src/Components/LanguageSwitcher/LanguageSwitcher.jsx
Normal file
87
src/Components/LanguageSwitcher/LanguageSwitcher.jsx
Normal file
@ -0,0 +1,87 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ukFlag from "../../assets/uk-flag.svg";
|
||||
import deFlag from "../../assets/de-flag.svg";
|
||||
import arFlag from "../../assets/syriaflag.svg";
|
||||
import frFlag from "../../assets/france-flag-icon.svg";
|
||||
import itFlag from "../../assets/italy-flag-icon.svg";
|
||||
import cnFlag from "../../assets/china-flag-icon.svg";
|
||||
|
||||
const LanguageSwitcher = () => {
|
||||
const { i18n } = useTranslation();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const languages = [
|
||||
{ code: "en", name: "English", flag: ukFlag },
|
||||
{ code: "ar", name: "العربية", flag: arFlag },
|
||||
{ code: "de", name: "Deutsch", flag: deFlag },
|
||||
{ code: "zh", name: "中文", flag: cnFlag },
|
||||
{ code: "fr", name: "Français", flag: frFlag },
|
||||
{ code: "it", name: "Italiano", flag: itFlag },
|
||||
];
|
||||
|
||||
const currentLanguage =
|
||||
languages.find((lang) => lang.code === i18n.language) || languages[0];
|
||||
|
||||
const changeLanguage = (langCode) => {
|
||||
i18n.changeLanguage(langCode);
|
||||
setIsOpen(false);
|
||||
|
||||
if (langCode === "ar") {
|
||||
document.documentElement.dir = "rtl";
|
||||
document.documentElement.lang = "ar";
|
||||
} else {
|
||||
document.documentElement.dir = "ltr";
|
||||
document.documentElement.lang = langCode;
|
||||
}
|
||||
};
|
||||
|
||||
const menuPosition =
|
||||
document.documentElement.dir === "rtl" ? "left-0" : "right-0"; // toggle position based on dir
|
||||
|
||||
return (
|
||||
<div className="relative inline-block text-left">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="inline-flex items-center font-bold text-lg px-3 py-2 text-white rounded-lg cursor-pointer hover:bg-gray-100/10 dark:hover:bg-gray-700 transition"
|
||||
>
|
||||
<img
|
||||
src={currentLanguage.flag}
|
||||
alt={currentLanguage.name}
|
||||
className="w-10 h-6"
|
||||
/>
|
||||
<span className="hidden sm:inline ms-2">{currentLanguage.name}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
className={`absolute top-12 ${menuPosition} z-50 w-44 bg-white dark:bg-gray-700 divide-y divide-gray-100 dark:divide-gray-600 rounded-lg shadow`}
|
||||
>
|
||||
<ul className="py-2">
|
||||
{languages.map((language) => (
|
||||
<li key={language.code}>
|
||||
<button
|
||||
onClick={() => changeLanguage(language.code)}
|
||||
className={`w-full text-left block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center gap-3 ${
|
||||
currentLanguage.code === language.code
|
||||
? "bg-gray-50 text-blue-600 dark:bg-gray-600"
|
||||
: "text-gray-800 dark:text-white"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={language.flag}
|
||||
alt={language.name}
|
||||
className="w-10 h-6"
|
||||
/>
|
||||
<span>{language.name}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LanguageSwitcher;
|
||||
133
src/Components/Nav/Navbar.jsx
Normal file
133
src/Components/Nav/Navbar.jsx
Normal file
@ -0,0 +1,133 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-scroll";
|
||||
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
|
||||
import "../../index.css";
|
||||
|
||||
const Navbar = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState("home");
|
||||
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
|
||||
// Handle scroll to update active section
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const sections = ["home", "services", "about", "contact"];
|
||||
const scrollPosition = window.scrollY + 100;
|
||||
|
||||
for (const section of sections) {
|
||||
const element =
|
||||
document.getElementById(section) ||
|
||||
document.querySelector(`[name="${section}"]`);
|
||||
if (element) {
|
||||
const offsetTop = element.offsetTop;
|
||||
const offsetHeight = element.offsetHeight;
|
||||
|
||||
if (
|
||||
scrollPosition >= offsetTop &&
|
||||
scrollPosition < offsetTop + offsetHeight
|
||||
) {
|
||||
setActiveSection(section);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// Update document direction when language changes
|
||||
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 = [
|
||||
{ key: "home", label: t("nav.home") },
|
||||
{ key: "services", label: t("nav.services") },
|
||||
{ key: "about", label: t("nav.about") },
|
||||
{ key: "contact", label: t("nav.contact") },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="bg-white/10 backdrop-blur-lg 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">
|
||||
{/* الشعار */}
|
||||
<img
|
||||
src="src/assets/TPS-logo.png"
|
||||
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
|
||||
alt="TPS Logo"
|
||||
/>
|
||||
|
||||
{/* الجانب الأيمن */}
|
||||
<div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
|
||||
{/* Language Switcher */}
|
||||
<LanguageSwitcher />
|
||||
|
||||
{/* زر القائمة للجوال */}
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
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"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* روابط الأقسام */}
|
||||
<div
|
||||
className={`w-full md:flex md:w-auto md:order-1 transition-all duration-300 ease-in-out ${
|
||||
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) => (
|
||||
<li key={item.key} className="pt-2 md:pt-0">
|
||||
<Link
|
||||
to={item.key}
|
||||
smooth
|
||||
duration={500}
|
||||
spy={true}
|
||||
offset={0}
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
className={`block text-center md:inline cursor-pointer text-lg font-semibold transition duration-200 ${
|
||||
activeSection === item.key
|
||||
? "text-yellow-500"
|
||||
: "text-gray-800 dark:text-white hover:text-yellow-500"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
30
src/Components/Sections/About/About.css
Normal file
30
src/Components/Sections/About/About.css
Normal file
@ -0,0 +1,30 @@
|
||||
.grow-img {
|
||||
animation: growIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes growIn {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes soft-blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-soft-blink {
|
||||
animation: soft-blink 3s infinite ease-in-out;
|
||||
}
|
||||
72
src/Components/Sections/About/About.jsx
Normal file
72
src/Components/Sections/About/About.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Element } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
|
||||
const About = () => {
|
||||
const { t } = useTranslation();
|
||||
const home10 = "https://i.imgur.com/MW2Sk0y.jpg";
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
AOS.init({ duration: 1000, once: false });
|
||||
|
||||
const handleScroll = () => {
|
||||
AOS.refresh();
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Element name="about">
|
||||
<section
|
||||
className="w-full h-screen px-4 sm:px-6 lg:px-16 py-12 sm:py-16 text-black font-sans relative overflow-hidden"
|
||||
style={{ direction: "rtl", backgroundColor: "#111827" }}
|
||||
>
|
||||
{/* صورة الخلفية */}
|
||||
<div
|
||||
className="relative w-full sm:w-3/4 mx-auto z-0"
|
||||
data-aos="fade-right"
|
||||
style={{
|
||||
borderRadius: "12px",
|
||||
border: "1px solid #EB8323",
|
||||
boxShadow:
|
||||
"0 0 15px 5px rgba(235, 131, 35, 0.4), 0 0 8px 2px rgba(235, 131, 35, 0.3)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={home10}
|
||||
alt="شخص"
|
||||
className="w-full h-[450px] sm:h-[500px] md:h-[600px] object-cover rounded-lg transition-all duration-300"
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* مربع النص المتراكب */}
|
||||
<div
|
||||
className="z-10 max-w-full px-4 sm:px-0 -mt-20 sm:mt-0 sm:absolute sm:bottom-10 sm:right-10
|
||||
bg-white/20 backdrop-blur-md text-black p-6 sm:p-12 rounded-xl shadow-2xl
|
||||
flex flex-col sm:max-w-md"
|
||||
data-aos="fade-left"
|
||||
>
|
||||
<h1 className="mb-4 sm:mb-6 text-3xl sm:text-5xl font-extrabold md:text-6xl lg:text-7xl text-center self-center mt-0">
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
{t('about.title')}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-2xl leading-relaxed flex-grow text-center">
|
||||
{t('about.description')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Element>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
355
src/Components/Sections/Contact/Contact.jsx
Normal file
355
src/Components/Sections/Contact/Contact.jsx
Normal file
@ -0,0 +1,355 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
FaMapMarkerAlt,
|
||||
FaPhoneAlt,
|
||||
FaEnvelope,
|
||||
FaWhatsapp,
|
||||
} from "react-icons/fa";
|
||||
import emailjs from "@emailjs/browser";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
const Contact = () => {
|
||||
const { t } = useTranslation();
|
||||
const form = useRef();
|
||||
const [message, setMessage] = useState({ text: "", type: "" });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const Background = "https://i.imgur.com/IVqkUJO.jpg";
|
||||
const sendEmail = (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setMessage({ text: "", type: "" });
|
||||
|
||||
emailjs
|
||||
.sendForm(
|
||||
"service_dynf5hg",
|
||||
"template_l4ik4he",
|
||||
form.current,
|
||||
"rRjr_WNgPp7_rGno1"
|
||||
)
|
||||
.then(
|
||||
(result) => {
|
||||
console.log("✅ Message sent:", result.text);
|
||||
setMessage({
|
||||
text: t("contact.successMessage") || "Message sent successfully!",
|
||||
type: "success",
|
||||
});
|
||||
form.current.reset();
|
||||
setIsLoading(false);
|
||||
// Clear message after 5 seconds
|
||||
setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
||||
},
|
||||
(error) => {
|
||||
console.error("❌ Failed to send message:", error.text);
|
||||
setMessage({
|
||||
text:
|
||||
t("contact.errorMessage") ||
|
||||
"Failed to send message. Please try again.",
|
||||
type: "error",
|
||||
});
|
||||
setIsLoading(false);
|
||||
// Clear message after 5 seconds
|
||||
setTimeout(() => setMessage({ text: "", type: "" }), 5000);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" className="relative min-h-screen">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src={Background}
|
||||
alt="Contact Background"
|
||||
className="w-full h-full object-cover"
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#10375C]/65 mix-blend-multiply"></div>
|
||||
</div>
|
||||
<div className="relative z-10 px-4 py-10 md:px-20 text-white">
|
||||
<h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
|
||||
<span
|
||||
className="text-transparent bg-clip-text"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, #10375C 0%, #F3C623 40%, #F3C623 100%)",
|
||||
}}
|
||||
>
|
||||
{t("contact.title")}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-center text-lg md:text-xl max-w-3xl mx-auto text-[#D1D5DB] leading-relaxed mb-12">
|
||||
{t("contact.subtitle")}
|
||||
</p>
|
||||
<div className="flex flex-col md:flex-row-reverse gap-10 items-start">
|
||||
{/* Enhanced Contact Information Section */}
|
||||
<div className="space-y-6 text-right md:w-1/2">
|
||||
{/* Address Card */}
|
||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
|
||||
<div className="flex flex-row-reverse items-start gap-6">
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
||||
<FaMapMarkerAlt className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-[#F3C623] mb-2 group-hover:text-white transition-colors duration-300">
|
||||
{t("contact.address")}
|
||||
</h3>
|
||||
<p className="text-[#D1D5DB] leading-relaxed group-hover:text-white transition-colors duration-300">
|
||||
{t("contact.addressText")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phone Card */}
|
||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
|
||||
<div className="flex flex-row-reverse items-start gap-6">
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
||||
<FaPhoneAlt className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-[#F3C623] mb-3 group-hover:text-white transition-colors duration-300">
|
||||
{t("contact.phone")}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3 justify-end bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300">
|
||||
<span className="text-white font-medium tracking-wide">
|
||||
0965656631
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<FaPhoneAlt
|
||||
className="text-[#F3C623] text-lg hover:scale-125 transition-transform duration-300 cursor-pointer"
|
||||
title="اتصال"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 justify-end bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300">
|
||||
{/* <FaWhatsapp className="text-xl" /> */}
|
||||
<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"
|
||||
>
|
||||
<span>963965656631</span>
|
||||
</a>
|
||||
<div className="flex items-center gap-2">
|
||||
<FaWhatsapp
|
||||
className="text-green-400 text-xl hover:scale-125 transition-transform duration-300 cursor-pointer"
|
||||
title="واتساب"
|
||||
/>
|
||||
<FaPhoneAlt
|
||||
className="text-[#F3C623] text-lg hover:scale-125 transition-transform duration-300 cursor-pointer"
|
||||
title="اتصال"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email Card */}
|
||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm rounded-2xl p-6 border border-[#F3C623]/30 shadow-xl hover:shadow-2xl hover:shadow-[#F3C623]/20 transition-all duration-500 hover:scale-105 hover:border-[#F3C623]/60">
|
||||
<div className="flex flex-row-reverse items-start gap-6">
|
||||
<div className="relative">
|
||||
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
||||
<FaEnvelope className="text-white text-2xl group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-[#F3C623] mb-2 group-hover:text-white transition-colors duration-300">
|
||||
{t("contact.email")}
|
||||
</h3>
|
||||
<p className="text-white font-medium bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-all duration-300 cursor-pointer hover:text-[#F3C623]">
|
||||
<a href="mailto:info@TPS-STATIONS.COM">
|
||||
<span>Info@TPS-STATIONS.COM</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form - keeping existing styling */}
|
||||
<div className="group bg-gradient-to-br from-[#10375C]/90 to-[#10375C]/70 backdrop-blur-sm text-white p-8 rounded-2xl shadow-2xl border border-[#F3C623]/30 hover:border-[#F3C623]/60 md:w-1/2 w-full min-h-[450px] hover:shadow-[0px_20px_50px_rgba(243,198,35,0.2)] transition-all duration-500 hover:scale-[1.02]">
|
||||
<div className="relative">
|
||||
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-[#F3C623] to-[#EB8317] leading-snug">
|
||||
{t("contact.formTitle")}
|
||||
</h2>
|
||||
<div className="absolute -top-2 left-1/2 transform -translate-x-1/2 w-16 h-1 bg-gradient-to-r from-[#F3C623] to-[#EB8317] rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
ref={form}
|
||||
onSubmit={sendEmail}
|
||||
className="space-y-5 text-right"
|
||||
>
|
||||
{/* Name Field */}
|
||||
<div className="group/field">
|
||||
<label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
|
||||
{t("contact.name")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
name="user_name"
|
||||
required
|
||||
className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
|
||||
placeholder={t("contact.nameePlaceholder")}
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="group/field">
|
||||
<label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
|
||||
{t("contact.email")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="email"
|
||||
name="user_email"
|
||||
required
|
||||
className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
|
||||
placeholder={t("contact.emailPlaceholder")}
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message Field */}
|
||||
<div className="group/field">
|
||||
<label className="block mb-2 font-semibold text-[#F3C623] text-base transition-colors duration-300 group-hover/field:text-white">
|
||||
{t("contact.message")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
name="user_message"
|
||||
required
|
||||
className="w-full border-2 border-[#F3C623]/30 p-3 rounded-xl resize-none bg-white/95 backdrop-blur-sm text-black text-base placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-[#F3C623]/30 focus:border-[#F3C623] transition-all duration-300 hover:border-[#F3C623]/50 hover:shadow-lg hover:shadow-[#F3C623]/10"
|
||||
rows="4"
|
||||
placeholder={t("contact.messagePlaceholder")}
|
||||
></textarea>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#F3C623]/5 to-[#EB8317]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success/Error Message */}
|
||||
{message.text && (
|
||||
<div
|
||||
className={`p-4 rounded-xl text-center font-medium transition-all duration-500 transform ${
|
||||
message.type === "success"
|
||||
? "bg-green-500/20 border border-green-400/50 text-green-300 shadow-lg shadow-green-500/20"
|
||||
: "bg-red-500/20 border border-red-400/50 text-red-300 shadow-lg shadow-red-500/20"
|
||||
} animate-pulse`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{message.type === "success" ? (
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{message.text}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className={`group/btn relative w-full bg-gradient-to-r from-[#EB8317] to-[#F3C623] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:from-[#F3C623] hover:to-[#EB8317] transition-all duration-500 transform hover:scale-105 hover:shadow-2xl hover:shadow-[#F3C623]/30 active:scale-95 overflow-hidden ${
|
||||
isLoading ? "opacity-70 cursor-not-allowed" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="relative z-10 flex items-center justify-center gap-2">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t("contact.send")}
|
||||
<svg
|
||||
className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
{!isLoading && (
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform -skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-1000"></div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
279
src/Components/Sections/Home/Home.jsx
Normal file
279
src/Components/Sections/Home/Home.jsx
Normal file
@ -0,0 +1,279 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Element } from "react-scroll";
|
||||
|
||||
import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "../../../index.css";
|
||||
|
||||
|
||||
const home1 = "https://i.imgur.com/g4fVyLj.jpg";
|
||||
const home1Mobile = "https://i.imgur.com/NNeCIAj.jpg";
|
||||
|
||||
const home2 = "https://i.imgur.com/d9enpvc.jpg";
|
||||
const home2Mobile = "https://i.imgur.com/a85P9Q8.jpg";
|
||||
|
||||
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 = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8 } },
|
||||
};
|
||||
|
||||
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(() => {
|
||||
const updateSize = () => setIsMobile(window.innerWidth < 640);
|
||||
updateSize();
|
||||
window.addEventListener("resize", updateSize);
|
||||
return () => window.removeEventListener("resize", updateSize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % phrases.length);
|
||||
}, 4000);
|
||||
return () => clearInterval(interval);
|
||||
}, [phrases.length]);
|
||||
|
||||
const nextPhrase = () => {
|
||||
setCurrentIndex((prev) => (prev + 1) % phrases.length);
|
||||
};
|
||||
|
||||
const prevPhrase = () => {
|
||||
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 "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Element name="home">
|
||||
<div className="relative h-screen w-full" dir="rtl">
|
||||
{/* الخلفية */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center z-0 transition-all duration-1000"
|
||||
style={{ backgroundImage: `url('${getBackgroundImage()}')` }}
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/50 z-10" />
|
||||
|
||||
{/* المحتوى */}
|
||||
<div className="relative z-20 flex flex-col items-center justify-center h-full w-full px-4 text-white text-center">
|
||||
<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">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.span
|
||||
key={currentIndex}
|
||||
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"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{phrases[currentIndex]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
onClick={nextPhrase}
|
||||
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>
|
||||
|
||||
{/* وصف إضافي */}
|
||||
<motion.div className="w-full px-2 sm:px-4" variants={itemVariants}>
|
||||
<div className="text-sm sm:text-lg md:text-2xl text-white space-y-1">
|
||||
<p>{t("home.subtitle1")}</p>
|
||||
<p>{t("home.subtitle2")}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* زر تواصل معنا */}
|
||||
<motion.div
|
||||
className="w-full flex justify-center"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<div className="relative">
|
||||
<motion.button
|
||||
onClick={() => setMenuOpen((prev) => !prev)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
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;
|
||||
829
src/Components/Sections/Services/Services.jsx
Normal file
829
src/Components/Sections/Services/Services.jsx
Normal file
@ -0,0 +1,829 @@
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Element } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Zap,
|
||||
ShieldCheck,
|
||||
RadioTower,
|
||||
HelpCircle,
|
||||
PackageSearch,
|
||||
} from "lucide-react";
|
||||
|
||||
import gasStationImage from "./../../../assets/Images/gasstation.jpg";
|
||||
|
||||
const CARDS_PER_PAGE = 3;
|
||||
const gasstation1 = "https://i.imgur.com/be6t8zE.jpg";
|
||||
const gasstation2 = "https://i.imgur.com/dn7OSjX.jpg";
|
||||
const gasstation3 = "https://i.imgur.com/audovxI.jpg";
|
||||
const gasstation4 = "https://i.imgur.com/k1s680S.jpg";
|
||||
|
||||
const clean1 = "https://i.imgur.com/2NQs9Wh.jpg";
|
||||
const clean2 = "https://i.imgur.com/TCJsvHj.jpg";
|
||||
const clean3 = "https://i.imgur.com/EIye8JU.jpg";
|
||||
const clean4 = "https://i.imgur.com/mO5LETx.jpg";
|
||||
|
||||
const test1 = "https://i.imgur.com/5d2r3N4.jpg";
|
||||
const test2 = "https://i.imgur.com/0HqkCPA.jpg";
|
||||
const test3 = "https://i.imgur.com/HpTV1GD.jpg";
|
||||
const test4 = "https://i.imgur.com/V4zTiA1.jpg";
|
||||
const test5 = "https://i.imgur.com/op6nAk3.jpg";
|
||||
|
||||
const dev1 = "https://i.imgur.com/IKJeTs7.jpg";
|
||||
const dev2 = "https://i.imgur.com/GjSwGhF.jpg";
|
||||
const dev3 = "https://i.imgur.com/TIR5WfS.jpg";
|
||||
const dev4 = "https://i.imgur.com/kbJe8Ty.jpg";
|
||||
|
||||
const repair1 = "https://i.imgur.com/ywBDvPS.jpg";
|
||||
const repair2 = "https://i.imgur.com/zN43sqf.jpg";
|
||||
const repair3 = "https://i.imgur.com/eJsWCZq.jpg";
|
||||
const repair4 = "https://i.imgur.com/VSHij6g.jpg";
|
||||
|
||||
const ite1 = "https://i.imgur.com/CNPO4Vu.jpg";
|
||||
const ite2 = "https://i.imgur.com/7TSbjgF.jpg";
|
||||
const ite3 = "https://i.imgur.com/RbNZyg3.jpg";
|
||||
const ite4 = "https://i.imgur.com/uFINv0O.jpg";
|
||||
const ite5 = "https://i.imgur.com/ZwrNebq.jpg";
|
||||
const ite6 = "https://i.imgur.com/tKOC0gO.jpg";
|
||||
|
||||
const Services = () => {
|
||||
const { t, ready } = useTranslation();
|
||||
|
||||
const reasonsToChooseUs = [
|
||||
{
|
||||
icon: <Zap className="w-6 h-6 text-[#e0ba38]" />,
|
||||
text: t("services.reasons.0", "Fast Service"),
|
||||
},
|
||||
{
|
||||
icon: <ShieldCheck className="w-6 h-6 text-[#e0ba38]" />,
|
||||
text: t("services.reasons.1", "Quality Assurance"),
|
||||
},
|
||||
{
|
||||
icon: <RadioTower className="w-6 h-6 text-[#e0ba38]" />,
|
||||
text: t("services.reasons.2", "Modern Technology"),
|
||||
},
|
||||
{
|
||||
icon: <HelpCircle className="w-6 h-6 text-[#e0ba38]" />,
|
||||
text: t("services.reasons.3", "Customer Support"),
|
||||
},
|
||||
{
|
||||
icon: <PackageSearch className="w-6 h-6 text-[#e0ba38]" />,
|
||||
text: t("services.reasons.4", "Comprehensive Solutions"),
|
||||
},
|
||||
];
|
||||
|
||||
const servicesData = [
|
||||
{
|
||||
title: t("services.items.0.title", "Gas Station Services"),
|
||||
text: t("services.items.0.text", "Comprehensive gas station solutions"),
|
||||
details: t(
|
||||
"services.items.0.details",
|
||||
"Installation\nMaintenance\nSafety Checks\nUpgrades"
|
||||
),
|
||||
images: [gasstation1, gasstation2, gasstation3, gasstation4],
|
||||
type: "default"
|
||||
},
|
||||
{
|
||||
title: t("services.items.1.title", "Development"),
|
||||
text: t("services.items.1.text", "Custom development solutions"),
|
||||
details: t(
|
||||
"services.items.1.details",
|
||||
"Web Development\nMobile Apps\nCustom Software\nSystem Integration"
|
||||
),
|
||||
images: [dev1, dev2, dev3, dev4],
|
||||
type: "default"
|
||||
},
|
||||
{
|
||||
title: t("services.items.2.title", "Repair Services"),
|
||||
text: t("services.items.2.text", "Professional repair services"),
|
||||
details: t(
|
||||
"services.items.2.details",
|
||||
"Equipment Repair\nComponent Replacement\nDiagnostics\nPreventive Maintenance"
|
||||
),
|
||||
images: [repair1, repair2, repair3, repair4],
|
||||
type: "default"
|
||||
},
|
||||
{
|
||||
title: t("services.items.3.title", "Cleaning Services"),
|
||||
text: t("services.items.3.text", "Thorough cleaning solutions"),
|
||||
details: t("services.items.3.details", "Deep Cleaning\nSanitization\nEquipment Cleaning\nMaintenance Cleaning"),
|
||||
images: [clean1, clean2, clean3, clean4, test1, test2, test3, test4, test5],
|
||||
type: "default"
|
||||
},
|
||||
{
|
||||
title: t("services.items.5.title", "IT Equipment"),
|
||||
text: t("services.items.5.text", "IT equipment services"),
|
||||
details: t(
|
||||
"services.items.5.details",
|
||||
"Installation\nConfiguration\nMaintenance\nUpgrades"
|
||||
),
|
||||
images: [ite1, ite2, ite3, ite4, ite5, ite6],
|
||||
type: "ite"
|
||||
},
|
||||
];
|
||||
|
||||
const [expandedIndex, setExpandedIndex] = useState(null);
|
||||
const [currentImage, setCurrentImage] = useState(gasStationImage);
|
||||
const [imageIndex, setImageIndex] = useState(0);
|
||||
const [page, setPage] = useState(0);
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setWindowWidth(window.innerWidth);
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let intervalId;
|
||||
|
||||
if (expandedIndex !== null && !isPaused) {
|
||||
const images = servicesData[expandedIndex].images;
|
||||
|
||||
setImageIndex(0);
|
||||
setCurrentImage(images[0]);
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
setImageIndex((prevIndex) => {
|
||||
const nextIndex = (prevIndex + 1) % images.length;
|
||||
setCurrentImage(images[nextIndex]);
|
||||
return nextIndex;
|
||||
});
|
||||
}, 2000);
|
||||
} else if (expandedIndex === null) {
|
||||
setCurrentImage(gasStationImage);
|
||||
setImageIndex(0);
|
||||
}
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [expandedIndex, isPaused]);
|
||||
|
||||
const toggleCard = (index) => {
|
||||
const actualIndex = startIndex + index;
|
||||
setExpandedIndex(actualIndex === expandedIndex ? null : actualIndex);
|
||||
};
|
||||
|
||||
const startIndex = page * CARDS_PER_PAGE;
|
||||
const endIndex = startIndex + CARDS_PER_PAGE;
|
||||
const visibleServices = servicesData.slice(startIndex, endIndex);
|
||||
|
||||
const handleNextPage = () => {
|
||||
const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);
|
||||
setExpandedIndex(null);
|
||||
setPage((prev) => (prev + 1) % totalPages);
|
||||
};
|
||||
|
||||
if (!ready) return <div>Loading translations...</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Element name="services">
|
||||
<section
|
||||
className="w-full min-h-screen py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
|
||||
style={{ direction: "rtl" }}
|
||||
>
|
||||
<h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
{t("services.title", "Our Services")}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<div className="w-full max-w-7xl mx-auto flex flex-col lg:flex-row items-start justify-between relative">
|
||||
<div className="w-full lg:w-1/2 px-4 relative z-10 mb-8 lg:mb-0">
|
||||
<p className="text-lg font-normal text-[var(--font-color)] lg:text-xl mb-8 text-center">
|
||||
{t("services.subtitle", "Explore our professional services")}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-6 relative">
|
||||
{visibleServices.map((service, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div
|
||||
onClick={() => toggleCard(index)}
|
||||
className="relative cursor-pointer transition-all duration-300 ease-in-out transform hover:scale-[1.02] p-6 bg-gray-800 rounded-md shadow-md hover:shadow-[0px_2px_6px_#F3C623] flex flex-col justify-center items-center text-center"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-[var(--accent-color)] mb-2">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-[var(--font-color)] text-md">
|
||||
{service.text}
|
||||
</p>
|
||||
|
||||
{expandedIndex === startIndex + index && (
|
||||
<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4 justify-center transition-all duration-300">
|
||||
{service.details.split("\n").map((line, i, arr) => {
|
||||
const isLastCentered =
|
||||
arr.length % 2 === 1 && i === arr.length - 1;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`w-[220px] h-[100px] px-4 py-2 bg-[#1f2937] text-white text-center rounded-lg shadow-[0_2px_8px_rgba(243,198,35,0.25)] flex items-center justify-center text-sm font-medium ${
|
||||
isLastCentered
|
||||
? "sm:col-span-2 mx-auto"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{line}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute bottom-4 right-4">
|
||||
<svg
|
||||
className="w-6 h-6 animate-soft-blink"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="arrowGradient"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="1"
|
||||
y2="0"
|
||||
>
|
||||
<stop offset="0%" stopColor="#10375C" />
|
||||
<stop offset="100%" stopColor="#F3C623" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M13 5l7 7-7 7M5 12h14"
|
||||
stroke="url(#arrowGradient)"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{windowWidth < 1024 && expandedIndex === startIndex + index && (
|
||||
<div className="relative w-full h-64 overflow-hidden rounded-lg shadow-md mb-4">
|
||||
<img
|
||||
src={currentImage}
|
||||
alt={`${service.title} Visual`}
|
||||
className={`w-full h-full ${
|
||||
service.type === "ite"
|
||||
? "object-contain bg-black"
|
||||
: "object-cover"
|
||||
}`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={handleNextPage}
|
||||
className="h-12 bg-[#10375C] rounded-full flex items-center justify-between px-4 shadow-lg"
|
||||
style={{
|
||||
boxShadow: "0 0 12px 3px #F3C623",
|
||||
transition: "box-shadow 0.3s ease-in-out",
|
||||
width: "fit-content",
|
||||
}}
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "0 0 20px 6px #F3C623")
|
||||
}
|
||||
onMouseLeave={(e) =>
|
||||
(e.currentTarget.style.boxShadow = "0 0 12px 3px #F3C623")
|
||||
}
|
||||
aria-label="Next Services"
|
||||
>
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M8 5l7 7-7 7"
|
||||
stroke="#F3C623"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span style={{ color: "#F3C623" }}>
|
||||
{t("services.moreServices", "More Services")}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!(windowWidth < 1024 && expandedIndex !== null) && (
|
||||
<div
|
||||
className={`w-full lg:w-1/2 px-4 flex justify-center items-center relative z-10
|
||||
${windowWidth < 1024 ? "order-first mb-8" : ""}`}
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
>
|
||||
<div className="relative w-full max-w-[740px]">
|
||||
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[494px] overflow-hidden rounded-lg shadow-md">
|
||||
<img
|
||||
src={currentImage}
|
||||
alt="Service Visual"
|
||||
className={`w-full h-full ${
|
||||
expandedIndex !== null &&
|
||||
servicesData[expandedIndex].type === "ite"
|
||||
? "object-contain bg-black"
|
||||
: "object-cover"
|
||||
}`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
{expandedIndex === null && (
|
||||
<div
|
||||
className="
|
||||
absolute bottom-4 left-1/2 transform -translate-x-1/2
|
||||
sm:left-6 sm:bottom-6 sm:translate-x-0
|
||||
bg-white/20 backdrop-blur-md p-4 sm:p-6 rounded-lg shadow-lg
|
||||
w-[90%] sm:w-[360px] text-white text-center
|
||||
z-20
|
||||
"
|
||||
>
|
||||
<h2 className="text-lg sm:text-xl font-bold text-white mb-2">
|
||||
{t("services.futureVision", "Our Future Vision")}
|
||||
</h2>
|
||||
<p className="text-sm sm:text-base text-[var(--font-color)]">
|
||||
{t(
|
||||
"services.futureVisionText",
|
||||
"Innovative solutions for tomorrow's challenges"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</Element>
|
||||
|
||||
<Element name="why-us">
|
||||
<section
|
||||
className="w-full py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
|
||||
style={{ direction: "rtl" }}
|
||||
>
|
||||
<h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
{t("services.whyChooseUs", "Why Choose Us")}
|
||||
</span>
|
||||
</h1>
|
||||
<div className="w-full max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
||||
{reasonsToChooseUs.map((reason, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group flex items-start gap-6 bg-gradient-to-br from-[#1f2937] to-[#374151] p-6 rounded-xl shadow-lg hover:shadow-[0px_8px_25px_rgba(243,198,35,0.3)] transition-all duration-500 hover:scale-105 border border-gray-700 hover:border-[#F3C623]/50"
|
||||
>
|
||||
<div className="relative flex-shrink-0">
|
||||
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
||||
<div className="text-white text-2xl group-hover:scale-110 transition-transform duration-300">
|
||||
{React.cloneElement(reason.icon, {
|
||||
className: "w-8 h-8 text-white",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#F3C623]/20 to-[#EB8317]/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500 opacity-0 group-hover:opacity-100"></div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-[var(--font-color)] text-lg leading-relaxed group-hover:text-white transition-colors duration-300">
|
||||
{reason.text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Element>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// import React, { useState, useEffect } from "react";
|
||||
// import { Element } from "react-scroll";
|
||||
// import { useTranslation } from "react-i18next";
|
||||
// import {
|
||||
// Zap,
|
||||
// ShieldCheck,
|
||||
// RadioTower,
|
||||
// HelpCircle,
|
||||
// PackageSearch,
|
||||
// } from "lucide-react";
|
||||
|
||||
// import gasStationImage from "./../../../assets/Images/gasstation.jpg";
|
||||
|
||||
|
||||
// const CARDS_PER_PAGE = 3;
|
||||
// const gasstation1 = "https://i.imgur.com/be6t8zE.jpg";
|
||||
// const gasstation2 = "https://i.imgur.com/dn7OSjX.jpg";
|
||||
// const gasstation3 = "https://i.imgur.com/audovxI.jpg";
|
||||
// const gasstation4 = "https://i.imgur.com/k1s680S.jpg";
|
||||
|
||||
// const clean1 = "https://i.imgur.com/2NQs9Wh.jpg";
|
||||
// const clean2 = "https://i.imgur.com/TCJsvHj.jpg";
|
||||
// const clean3 = "https://i.imgur.com/EIye8JU.jpg";
|
||||
// const clean4 = "https://i.imgur.com/mO5LETx.jpg";
|
||||
|
||||
// const test1 = "https://i.imgur.com/5d2r3N4.jpg";
|
||||
// const test2 = "https://i.imgur.com/0HqkCPA.jpg";
|
||||
// const test3 = "https://i.imgur.com/HpTV1GD.jpg";
|
||||
// const test4 = "https://i.imgur.com/V4zTiA1.jpg";
|
||||
// const test5 = "https://i.imgur.com/op6nAk3.jpg";
|
||||
|
||||
// const dev1 = "https://i.imgur.com/IKJeTs7.jpg";
|
||||
// const dev2 = "https://i.imgur.com/GjSwGhF.jpg";
|
||||
// const dev3 = "https://i.imgur.com/TIR5WfS.jpg";
|
||||
// const dev4 = "https://i.imgur.com/kbJe8Ty.jpg";
|
||||
|
||||
// const repair1 = "https://i.imgur.com/ywBDvPS.jpg";
|
||||
// const repair2 = "https://i.imgur.com/zN43sqf.jpg";
|
||||
// const repair3 = "https://i.imgur.com/eJsWCZq.jpg";
|
||||
// const repair4 = "https://i.imgur.com/VSHij6g.jpg";
|
||||
|
||||
// const ite1 = "https://i.imgur.com/CNPO4Vu.jpg";
|
||||
// const ite2 = "https://i.imgur.com/7TSbjgF.jpg";
|
||||
// const ite3 = "https://i.imgur.com/RbNZyg3.jpg";
|
||||
// const ite4 = "https://i.imgur.com/uFINv0O.jpg";
|
||||
// const ite5 = "https://i.imgur.com/ZwrNebq.jpg";
|
||||
// const ite6 = "https://i.imgur.com/tKOC0gO.jpg";
|
||||
|
||||
// const Services = () => {
|
||||
// const { t, ready } = useTranslation();
|
||||
|
||||
// const reasonsToChooseUs = [
|
||||
// {
|
||||
// icon: <Zap className="w-6 h-6 text-[#e0ba38]" />,
|
||||
// text: t("services.reasons.0", "Fast Service"),
|
||||
// },
|
||||
// {
|
||||
// icon: <ShieldCheck className="w-6 h-6 text-[#e0ba38]" />,
|
||||
// text: t("services.reasons.1", "Quality Assurance"),
|
||||
// },
|
||||
// {
|
||||
// icon: <RadioTower className="w-6 h-6 text-[#e0ba38]" />,
|
||||
// text: t("services.reasons.2", "Modern Technology"),
|
||||
// },
|
||||
// {
|
||||
// icon: <HelpCircle className="w-6 h-6 text-[#e0ba38]" />,
|
||||
// text: t("services.reasons.3", "Customer Support"),
|
||||
// },
|
||||
// {
|
||||
// icon: <PackageSearch className="w-6 h-6 text-[#e0ba38]" />,
|
||||
// text: t("services.reasons.4", "Comprehensive Solutions"),
|
||||
// },
|
||||
// ];
|
||||
|
||||
// const servicesData = [
|
||||
// {
|
||||
// title: t("services.items.0.title", "Gas Station Services"),
|
||||
// text: t("services.items.0.text", "Comprehensive gas station solutions"),
|
||||
// details: t(
|
||||
// "services.items.0.details",
|
||||
// "Installation\nMaintenance\nSafety Checks\nUpgrades"
|
||||
// ),
|
||||
// images: [gasstation1, gasstation2, gasstation3, gasstation4],
|
||||
// type: "default"
|
||||
// },
|
||||
// {
|
||||
// title: t("services.items.1.title", "Development"),
|
||||
// text: t("services.items.1.text", "Custom development solutions"),
|
||||
// details: t(
|
||||
// "services.items.1.details",
|
||||
// "Web Development\nMobile Apps\nCustom Software\nSystem Integration"
|
||||
// ),
|
||||
// images: [dev1, dev2, dev3, dev4],
|
||||
// type: "default"
|
||||
// },
|
||||
// {
|
||||
// title: t("services.items.2.title", "Repair Services"),
|
||||
// text: t("services.items.2.text", "Professional repair services"),
|
||||
// details: t(
|
||||
// "services.items.2.details",
|
||||
// "Equipment Repair\nComponent Replacement\nDiagnostics\nPreventive Maintenance"
|
||||
// ),
|
||||
// images: [repair1, repair2, repair3, repair4],
|
||||
// type: "default"
|
||||
// },
|
||||
// {
|
||||
// title: t("services.items.3.title", "Cleaning Services"),
|
||||
// text: t("services.items.3.text", "Thorough cleaning solutions"),
|
||||
// details: t("services.items.3.details", "Deep Cleaning\nSanitization\nEquipment Cleaning\nMaintenance Cleaning"),
|
||||
// images: [clean1, clean2, clean3, clean4, test1,test2,test3,test4,test5],
|
||||
// type: "default"
|
||||
// },
|
||||
// {
|
||||
// title: t("services.items.5.title", "IT Equipment"),
|
||||
// text: t("services.items.5.text", "IT equipment services"),
|
||||
// details: t(
|
||||
// "services.items.5.details",
|
||||
// "Installation\nConfiguration\nMaintenance\nUpgrades"
|
||||
// ),
|
||||
// images: [ite1, ite2, ite3, ite4, ite5, ite6],
|
||||
// type: "ite"
|
||||
// },
|
||||
// ];
|
||||
|
||||
// const [expandedIndex, setExpandedIndex] = useState(null);
|
||||
// const [currentImage, setCurrentImage] = useState(gasStationImage);
|
||||
// const [imageIndex, setImageIndex] = useState(0);
|
||||
// const [page, setPage] = useState(0);
|
||||
// const [isPaused, setIsPaused] = useState(false);
|
||||
// const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
|
||||
// useEffect(() => {
|
||||
// const handleResize = () => {
|
||||
// setWindowWidth(window.innerWidth);
|
||||
// };
|
||||
|
||||
// window.addEventListener("resize", handleResize);
|
||||
// return () => window.removeEventListener("resize", handleResize);
|
||||
// }, []);
|
||||
|
||||
// useEffect(() => {
|
||||
// let intervalId;
|
||||
|
||||
// if (expandedIndex !== null && !isPaused) {
|
||||
// const images = servicesData[expandedIndex].images;
|
||||
|
||||
// setImageIndex(0);
|
||||
// setCurrentImage(images[0]);
|
||||
|
||||
// intervalId = setInterval(() => {
|
||||
// setImageIndex((prevIndex) => {
|
||||
// const nextIndex = (prevIndex + 1) % images.length;
|
||||
// setCurrentImage(images[nextIndex]);
|
||||
// return nextIndex;
|
||||
// });
|
||||
// }, 2000);
|
||||
// } else if (expandedIndex === null) {
|
||||
// setCurrentImage(gasStationImage);
|
||||
// setImageIndex(0);
|
||||
// }
|
||||
|
||||
// return () => clearInterval(intervalId);
|
||||
// }, [expandedIndex, isPaused]);
|
||||
|
||||
// const toggleCard = (index) => {
|
||||
// setExpandedIndex(index === expandedIndex ? null : index);
|
||||
// };
|
||||
|
||||
// const startIndex = page * CARDS_PER_PAGE;
|
||||
// const endIndex = startIndex + CARDS_PER_PAGE;
|
||||
// const visibleServices = servicesData.slice(startIndex, endIndex);
|
||||
|
||||
// const handleNextPage = () => {
|
||||
// const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);
|
||||
// setExpandedIndex(null);
|
||||
// setPage((prev) => (prev + 1) % totalPages);
|
||||
// };
|
||||
|
||||
// if (!ready) return <div>Loading translations...</div>;
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <Element name="services">
|
||||
// <section
|
||||
// className="w-full min-h-screen py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
|
||||
// style={{ direction: "rtl" }}
|
||||
// >
|
||||
// <h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
|
||||
// <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
// {t("services.title", "Our Services")}
|
||||
// </span>
|
||||
// </h1>
|
||||
|
||||
// <div className="w-full max-w-7xl mx-auto flex flex-col lg:flex-row items-start justify-between relative">
|
||||
// <div className="w-full lg:w-1/2 px-4 relative z-10 mb-8 lg:mb-0">
|
||||
// <p className="text-lg font-normal text-[var(--font-color)] lg:text-xl mb-8 text-center">
|
||||
// {t("services.subtitle", "Explore our professional services")}
|
||||
// </p>
|
||||
|
||||
// <div className="flex flex-col gap-6 relative">
|
||||
// {visibleServices.map((service, index) => {
|
||||
// const globalIndex = startIndex + index;
|
||||
// return (
|
||||
// <React.Fragment key={globalIndex}>
|
||||
// <div
|
||||
// onClick={() => toggleCard(globalIndex)}
|
||||
// className="relative cursor-pointer transition-all duration-300 ease-in-out transform hover:scale-[1.02] p-6 bg-gray-800 rounded-md shadow-md hover:shadow-[0px_2px_6px_#F3C623] flex flex-col justify-center items-center text-center"
|
||||
// >
|
||||
// <h3 className="text-xl font-semibold text-[var(--accent-color)] mb-2">
|
||||
// {service.title}
|
||||
// </h3>
|
||||
// <p className="text-[var(--font-color)] text-md">
|
||||
// {service.text}
|
||||
// </p>
|
||||
|
||||
// {expandedIndex === globalIndex && (
|
||||
// <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4 justify-center transition-all duration-300">
|
||||
// {service.details.split("\n").map((line, i, arr) => {
|
||||
// const isLastCentered =
|
||||
// arr.length % 2 === 1 && i === arr.length - 1;
|
||||
// return (
|
||||
// <div
|
||||
// key={i}
|
||||
// className={`w-[220px] h-[100px] px-4 py-2 bg-[#1f2937] text-white text-center rounded-lg shadow-[0_2px_8px_rgba(243,198,35,0.25)] flex items-center justify-center text-sm font-medium ${
|
||||
// isLastCentered
|
||||
// ? "sm:col-span-2 mx-auto"
|
||||
// : ""
|
||||
// }`}
|
||||
// >
|
||||
// {line}
|
||||
// </div>
|
||||
// );
|
||||
// })}
|
||||
// </div>
|
||||
// )}
|
||||
|
||||
// <div className="absolute bottom-4 right-4">
|
||||
// <svg
|
||||
// className="w-6 h-6 animate-soft-blink"
|
||||
// viewBox="0 0 24 24"
|
||||
// fill="none"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <defs>
|
||||
// <linearGradient
|
||||
// id="arrowGradient"
|
||||
// x1="0"
|
||||
// y1="0"
|
||||
// x2="1"
|
||||
// y2="0"
|
||||
// >
|
||||
// <stop offset="0%" stopColor="#10375C" />
|
||||
// <stop offset="100%" stopColor="#F3C623" />
|
||||
// </linearGradient>
|
||||
// </defs>
|
||||
// <path
|
||||
// d="M13 5l7 7-7 7M5 12h14"
|
||||
// stroke="url(#arrowGradient)"
|
||||
// strokeWidth="2"
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// />
|
||||
// </svg>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {windowWidth < 1024 && expandedIndex === globalIndex && (
|
||||
// <div className="relative w-full h-64 overflow-hidden rounded-lg shadow-md mb-4">
|
||||
// <img
|
||||
// src={currentImage}
|
||||
// alt={`${service.title} Visual`}
|
||||
// // className="w-full h-full object-cover"
|
||||
// className={`w-full h-full ${
|
||||
// expandedIndex !== null && servicesData[expandedIndex].type === "ite"
|
||||
// ? "object-contain bg-black"
|
||||
// : "object-cover"
|
||||
// }`}
|
||||
// loading="lazy"
|
||||
// decoding="async"
|
||||
// />
|
||||
// </div>
|
||||
// )}
|
||||
// </React.Fragment>
|
||||
// );
|
||||
// })}
|
||||
|
||||
// <button
|
||||
// onClick={handleNextPage}
|
||||
// className="h-12 bg-[#10375C] rounded-full flex items-center justify-between px-4 shadow-lg"
|
||||
// style={{
|
||||
// boxShadow: "0 0 12px 3px #F3C623",
|
||||
// transition: "box-shadow 0.3s ease-in-out",
|
||||
// width: "fit-content",
|
||||
// }}
|
||||
// onMouseEnter={(e) =>
|
||||
// (e.currentTarget.style.boxShadow = "0 0 20px 6px #F3C623")
|
||||
// }
|
||||
// onMouseLeave={(e) =>
|
||||
// (e.currentTarget.style.boxShadow = "0 0 12px 3px #F3C623")
|
||||
// }
|
||||
// aria-label="Next Services"
|
||||
// >
|
||||
// <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
|
||||
// <path
|
||||
// d="M8 5l7 7-7 7"
|
||||
// stroke="#F3C623"
|
||||
// strokeWidth="2"
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// />
|
||||
// </svg>
|
||||
// <span style={{ color: "#F3C623" }}>
|
||||
// {t("services.moreServices", "More Services")}
|
||||
// </span>
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {!(windowWidth < 1024 && expandedIndex !== null) && (
|
||||
// <div
|
||||
// className={`w-full lg:w-1/2 px-4 flex justify-center items-center relative z-10
|
||||
// ${windowWidth < 1024 ? "order-first mb-8" : ""}`}
|
||||
// onMouseEnter={() => setIsPaused(true)}
|
||||
// onMouseLeave={() => setIsPaused(false)}
|
||||
// >
|
||||
// <div className="relative w-full max-w-[740px]">
|
||||
// <div className="relative w-full h-[300px] sm:h-[400px] md:h-[494px] overflow-hidden rounded-lg shadow-md">
|
||||
// <img
|
||||
// src={currentImage}
|
||||
// alt="Service Visual"
|
||||
// className="w-full h-full object-cover"
|
||||
// loading="lazy"
|
||||
// decoding="async"
|
||||
// />
|
||||
// </div>
|
||||
// {expandedIndex === null && (
|
||||
// <div
|
||||
// className="
|
||||
// absolute bottom-4 left-1/2 transform -translate-x-1/2
|
||||
// sm:left-6 sm:bottom-6 sm:translate-x-0
|
||||
// bg-white/20 backdrop-blur-md p-4 sm:p-6 rounded-lg shadow-lg
|
||||
// w-[90%] sm:w-[360px] text-white text-center
|
||||
// z-20
|
||||
// "
|
||||
// >
|
||||
// <h2 className="text-lg sm:text-xl font-bold text-white mb-2">
|
||||
// {t("services.futureVision", "Our Future Vision")}
|
||||
// </h2>
|
||||
// <p className="text-sm sm:text-base text-[var(--font-color)]">
|
||||
// {t(
|
||||
// "services.futureVisionText",
|
||||
// "Innovative solutions for tomorrow's challenges"
|
||||
// )}
|
||||
// </p>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </section>
|
||||
// </Element>
|
||||
|
||||
// <Element name="why-us">
|
||||
// <section
|
||||
// className="w-full py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
|
||||
// style={{ direction: "rtl" }}
|
||||
// >
|
||||
// <h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
|
||||
// <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
// {t("services.whyChooseUs", "Why Choose Us")}
|
||||
// </span>
|
||||
// </h1>
|
||||
// <div className="w-full max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
||||
// {reasonsToChooseUs.map((reason, index) => (
|
||||
// <div
|
||||
// key={index}
|
||||
// className="group flex items-start gap-6 bg-gradient-to-br from-[#1f2937] to-[#374151] p-6 rounded-xl shadow-lg hover:shadow-[0px_8px_25px_rgba(243,198,35,0.3)] transition-all duration-500 hover:scale-105 border border-gray-700 hover:border-[#F3C623]/50"
|
||||
// >
|
||||
// <div className="relative flex-shrink-0">
|
||||
// <div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
|
||||
// <div className="text-white text-2xl group-hover:scale-110 transition-transform duration-300">
|
||||
// {React.cloneElement(reason.icon, {
|
||||
// className: "w-8 h-8 text-white",
|
||||
// })}
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
|
||||
// <div className="absolute inset-0 bg-gradient-to-br from-[#F3C623]/20 to-[#EB8317]/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500 opacity-0 group-hover:opacity-100"></div>
|
||||
// </div>
|
||||
|
||||
// <div className="flex-1">
|
||||
// <p className="text-[var(--font-color)] text-lg leading-relaxed group-hover:text-white transition-colors duration-300">
|
||||
// {reason.text}
|
||||
// </p>
|
||||
// </div>
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </section>
|
||||
// </Element>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Services;
|
||||
|
||||
BIN
src/assets/Fonts/Madani Arabic Black.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Black.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Extra Bold.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Extra Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Extra Light.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Extra Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Light.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Medium.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Medium.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Semi Bold.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Semi Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Thin.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Thin.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Variable.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Variable.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani-Arabic-Bold.ttf
Normal file
BIN
src/assets/Fonts/Madani-Arabic-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani-Arabic-Regular.ttf
Normal file
BIN
src/assets/Fonts/Madani-Arabic-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/Images/gasstation.jpg
Normal file
BIN
src/assets/Images/gasstation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 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: 96 KiB |
BIN
src/assets/ar-flag.svg
Normal file
BIN
src/assets/ar-flag.svg
Normal file
Binary file not shown.
1
src/assets/china-flag-icon.svg
Normal file
1
src/assets/china-flag-icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.2 38.4" style="enable-background:new 0 0 55.2 38.4" xml:space="preserve"><style type="text/css">.st0{fill:#DE2910;} .st1{fill:#FFDE00;}</style><g><path class="st0" d="M3.01,0h49.17c1.66,0.01,3.01,1.37,3.01,3.03v32.33c0,1.66-1.35,3.02-3.01,3.03L3,38.4 c-1.65-0.02-3-1.38-3-3.03V3.03C0,1.37,1.35,0.01,3.01,0L3.01,0z"/><polygon class="st1" points="8.4,3.84 11.79,14.26 2.92,7.82 13.88,7.82 5.01,14.26 8.4,3.84"/><polygon class="st1" points="18.75,2.07 18.43,5.71 16.55,2.58 19.91,4.01 16.35,4.83 18.75,2.07"/><polygon class="st1" points="23.22,6.34 21.51,9.57 20.99,5.96 23.54,8.58 19.94,7.95 23.22,6.34"/><polygon class="st1" points="23.64,12.78 20.77,15.03 21.77,11.52 23.02,14.95 19.99,12.91 23.64,12.78"/><polygon class="st1" points="18.68,15.48 18.51,19.13 16.5,16.08 19.92,17.37 16.4,18.34 18.68,15.48"/></g></svg>
|
||||
|
After Width: | Height: | Size: 997 B |
1
src/assets/de-flag.svg
Normal file
1
src/assets/de-flag.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.2 38.4"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M3.03 0h49.13c1.67 0 3.03 1.36 3.03 3.03v32.33c0 1.66-1.36 3.02-3.02 3.03H3.02C1.36 38.4 0 37.03 0 35.37V3.03C0 1.36 1.36 0 3.03 0z"/><path d="M0 12.8h55.2v22.57c0 1.67-1.36 3.03-3.03 3.03H3.03C1.36 38.4 0 37.04 0 35.37V12.8z" fill="#d00"/><path d="M0 25.6h55.2v9.77c0 1.66-1.36 3.02-3.02 3.03H3.03A3.04 3.04 0 010 35.37V25.6z" fill="#ffce00"/></g></svg>
|
||||
|
After Width: | Height: | Size: 470 B |
1
src/assets/france-flag-icon.svg
Normal file
1
src/assets/france-flag-icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 356.18"><path fill="#E1000F" d="M345.04 0h139C499.44.1 512 12.72 512 28.13v299.91c0 15.47-12.65 28.13-28.13 28.14H345.04V0zM15.11 352.95zm-9.54-8.15z"/><path fill="#fff" d="M27.96 0h317.08v356.18H27.98C12.57 356.09 0 343.46 0 328.04V28.14C0 12.72 12.56.1 27.96 0z"/><path fill="#273375" d="M27.96 0h138.99v356.18H28c-15.42-.08-28-12.71-28-28.14V28.14C0 12.72 12.56.1 27.96 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 588 B |
BIN
src/assets/gas-station-img.jpg
Normal file
BIN
src/assets/gas-station-img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
1
src/assets/italy-flag-icon.svg
Normal file
1
src/assets/italy-flag-icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 90.77 63.15"><g fill-rule="nonzero"><path fill="#009246" d="M29.47 0v63.15H4.99C2.24 63.15 0 60.9 0 58.16V4.99C0 2.24 2.24 0 4.99 0h24.48z"/><path fill="#fff" d="M61.31 0v63.15H29.47V0z"/><path fill="#CE2B37" d="M61.31 63.15V0h24.48c2.74 0 4.98 2.24 4.98 4.99v53.17c0 2.74-2.24 4.99-4.98 4.99H61.31z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 512 B |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/assets/syriaflag.svg
Normal file
1
src/assets/syriaflag.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600"><g stroke-width="150"><path d="M0 0v600h1200V0z" fill="#007a3d"/><path d="M0 200v400h1200V200z" fill="#fff"/><path d="M0 400v200h1200V400z"/></g><g fill="#ce1126" stroke-width=".799"><path d="M600.01 228l46.677 144-122.207-88.996h151.04L553.313 372l46.678-144z"/><path d="M300.01 228l46.677 144-122.207-88.996h151.04L253.313 372l46.678-144z"/><path d="M900.01 228l46.677 144-122.207-88.996h151.04L853.313 372l46.678-144z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 499 B |
1
src/assets/uk-flag.svg
Normal file
1
src/assets/uk-flag.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.2 38.4" style="enable-background:new 0 0 55.2 38.4" xml:space="preserve"><style type="text/css">.st0{fill:#FEFEFE;} .st1{fill:#C8102E;} .st2{fill:#012169;}</style><g><path class="st0" d="M2.87,38.4h49.46c1.59-0.09,2.87-1.42,2.87-3.03V3.03c0-1.66-1.35-3.02-3.01-3.03H3.01 C1.35,0.01,0,1.37,0,3.03v32.33C0,36.98,1.28,38.31,2.87,38.4L2.87,38.4z"/><polygon class="st1" points="23.74,23.03 23.74,38.4 31.42,38.4 31.42,23.03 55.2,23.03 55.2,15.35 31.42,15.35 31.42,0 23.74,0 23.74,15.35 0,15.35 0,23.03 23.74,23.03"/><path class="st2" d="M33.98,12.43V0h18.23c1.26,0.02,2.34,0.81,2.78,1.92L33.98,12.43L33.98,12.43z"/><path class="st2" d="M33.98,25.97V38.4h18.35c1.21-0.07,2.23-0.85,2.66-1.92L33.98,25.97L33.98,25.97z"/><path class="st2" d="M21.18,25.97V38.4H2.87c-1.21-0.07-2.24-0.85-2.66-1.94L21.18,25.97L21.18,25.97z"/><path class="st2" d="M21.18,12.43V0H2.99C1.73,0.02,0.64,0.82,0.21,1.94L21.18,12.43L21.18,12.43z"/><polygon class="st2" points="0,12.8 7.65,12.8 0,8.97 0,12.8"/><polygon class="st2" points="55.2,12.8 47.51,12.8 55.2,8.95 55.2,12.8"/><polygon class="st2" points="55.2,25.6 47.51,25.6 55.2,29.45 55.2,25.6"/><polygon class="st2" points="0,25.6 7.65,25.6 0,29.43 0,25.6"/><polygon class="st1" points="55.2,3.25 36.15,12.8 40.41,12.8 55.2,5.4 55.2,3.25"/><polygon class="st1" points="19.01,25.6 14.75,25.6 0,32.98 0,35.13 19.05,25.6 19.01,25.6"/><polygon class="st1" points="10.52,12.81 14.78,12.81 0,5.41 0,7.55 10.52,12.81"/><polygon class="st1" points="44.63,25.59 40.37,25.59 55.2,33.02 55.2,30.88 44.63,25.59"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
571
src/i18n.js
Normal file
571
src/i18n.js
Normal file
@ -0,0 +1,571 @@
|
||||
import i18n from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
import LanguageDetector from "i18next-browser-languagedetector";
|
||||
|
||||
const resources = {
|
||||
en: {
|
||||
translation: {
|
||||
nav: {
|
||||
home: "Home",
|
||||
services: "Services",
|
||||
about: "About",
|
||||
contact: "Contact",
|
||||
},
|
||||
home: {
|
||||
phrases: [
|
||||
"Construction of strategic fuel stations and warehouses",
|
||||
"Development of fuel stations",
|
||||
"Manufacturing fuel tanks and related services",
|
||||
"Electrical works",
|
||||
"Specialized technical tests",
|
||||
"Engineering studies and metal and concrete constructions",
|
||||
"Fuel tank cleaning",
|
||||
],
|
||||
subtitle1: "Your smart engineering partner in the fuel and energy sector",
|
||||
subtitle2: "Integrated solutions for building, developing and maintaining fuel stations",
|
||||
contactUs: "Contact Us",
|
||||
},
|
||||
about: {
|
||||
title: "About Us",
|
||||
description: "We specialize in fuel infrastructure solutions where we provide comprehensive services including design, construction, maintenance, and development of fuel stations and storage facilities.",
|
||||
},
|
||||
contact: {
|
||||
title: "Contact Us",
|
||||
subtitle: "Our expertise serves everyone: from the simplest station to the largest chain of stations and from secondary warehouses to strategic warehouses. Contact us for professional solutions with international standards",
|
||||
address: "Address",
|
||||
addressText: "Headquarters: Syria - Damascus - Baramkeh\nFlexible Offices: Homs - Fairouzeh, Aleppo - Industrial Zone, Tartous - Dubai Street\nWork Areas: Ready to implement works in all Syrian governorates",
|
||||
phone: "Phone Numbers",
|
||||
email: "Email",
|
||||
formTitle: "Contact us and let us be your hands in creating achievement",
|
||||
name: "Name",
|
||||
nameePlaceholder: "Enter your name",
|
||||
emailPlaceholder: "example@example.com",
|
||||
message: "Message",
|
||||
messagePlaceholder: "Write your message here",
|
||||
send: "Send",
|
||||
successMessage: "Message sent successfully ",
|
||||
errorMessage: "An error occurred while sending ",
|
||||
},
|
||||
services: {
|
||||
title: "Our Services",
|
||||
|
||||
subtitle: "We provide comprehensive services including design, construction, maintenance, and development of gas stations and storage facilities.",
|
||||
whyChooseUs: "Why Choose Us",
|
||||
futureVision: "Our Future Vision",
|
||||
futureVisionText: "We strive to enhance gas stations by improving efficiency, sustainability, and service quality. Our goal is to provide a smoother refueling experience and reduce environmental impact.",
|
||||
moreServices: "More Services",
|
||||
reasons: [
|
||||
"24/7 rapid response to all requests and emergencies",
|
||||
"Implementation according to international safety and precision standards",
|
||||
"Providing and installing advanced automation systems for remote control of multiple stations from a unified control center",
|
||||
"Free consultations from specialized experts designed according to customer needs for stations and distribution systems",
|
||||
"Providing the latest high-efficiency petroleum equipment and accessories with warranties ranging from one to five years",
|
||||
],
|
||||
items: [{
|
||||
title: "Engineering Studies & Gas Station Construction",
|
||||
text: "Building gas stations and storage facilities according to international quality and safety standards.",
|
||||
details: "Providing engineering studies\nImplementing civil and metallic works\nSupplying and installing gas station equipment\nTesting and delivery with 2-year warranty for all works",
|
||||
},
|
||||
{
|
||||
title: "Station and Storage Development",
|
||||
text: "Capacity expansion, pump power increase, and smart monitoring solutions.",
|
||||
details: "Periodic maintenance for pumps and tanks\nPerformance improvement using latest technologies\nInfrastructure upgrade for stations\nProviding smart solutions for remote monitoring",
|
||||
},
|
||||
{
|
||||
title: "Comprehensive Maintenance",
|
||||
text: "Preventive and emergency maintenance including",
|
||||
details: "Civil works\nElectronic automation\nElectrical works\nMechanical works",
|
||||
},
|
||||
{
|
||||
title: "Tank Technical Life Inspection, Cleaning and Calibration",
|
||||
text: "Professional cleaning using specialized materials to ensure tank safety and fuel quality.",
|
||||
details: "Determining technical life of tanks with UT-MT-HT-PT tests\nCleaning fuel tanks using international protocols",
|
||||
},
|
||||
{
|
||||
title: "Specialized Technical Tests",
|
||||
text: "Advanced tests including",
|
||||
details: "Penetrating liquids for tanks\nand pipelines\nUltrasonic waves\nMagnetic field tests",
|
||||
},
|
||||
{
|
||||
title: "Automation and Monitoring Systems",
|
||||
text: "Advanced digital solutions including",
|
||||
details: "Managing multiple gas stations remotely from a unified control center\nReal-time station performance monitoring and data analysis to improve operational efficiency",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
ar: {
|
||||
translation: {
|
||||
nav: {
|
||||
home: "الرئيسية",
|
||||
services: "الخدمات",
|
||||
about: "من نحن",
|
||||
contact: "تواصل معنا",
|
||||
},
|
||||
home: {
|
||||
phrases: [
|
||||
"إنشاء محطات ومستودعات الوقود الاسترتيجية",
|
||||
"تطوير محطات الوقود",
|
||||
"تصنيع خزانات الوقود والخدمات المرافقة لها",
|
||||
"الأعمال الكهربائية",
|
||||
"اختبارات فنية متخصصة",
|
||||
"الدراسات الهندسية والإنشاءات المعدنية والبيتونية",
|
||||
"تنظيف خزانات الوقود",
|
||||
],
|
||||
subtitle1: "شريكك الهندسي الذكي في قطاع الوقود والطاقة",
|
||||
subtitle2: "حلول متكاملة لبناء وتطوير وصيانة محطات الوقود",
|
||||
contactUs: "تواصل معنا",
|
||||
},
|
||||
about: {
|
||||
title: "من نحن",
|
||||
description: "نحن متخصصون في حلول البنية التحتية للوقود حيث نقدم خدمات متكاملة تشمل التصميم، البناء، الصيانة، وتطوير محطات الوقود ومنشآت التخزين.",
|
||||
},
|
||||
contact: {
|
||||
title: "تواصل معنا",
|
||||
subtitle: "خبرتنا تخدم الجميع : من أبسط محطة إلى أكبر سلسة محطات ومن المستودعات الثانوية إلى المستوعات الاستراتيجية تواصل معنا لحلول مهنية بمقاييس عالمية",
|
||||
address: "العنوان",
|
||||
addressText: "المقر الرئيسي: سوريا - دمشق - البرامكة\nالمكاتب المرنة: حمص - فيروزة، حلب - المنطقة الصناعية، طرطوس - شارع دبي\nمناطق العمل: جاهزين لتنفيذ الأعمال في جميع المحافظات السورية",
|
||||
phone: "أرقام الاتصال",
|
||||
email: "البريد الإلكتروني",
|
||||
formTitle: "تواصل معنا و دعنا نكون يديك في صناعة الإنجاز",
|
||||
name: "الاسم",
|
||||
nameePlaceholder: "أدخل اسمك",
|
||||
emailPlaceholder: "example@example.com",
|
||||
message: "الرسالة",
|
||||
messagePlaceholder: "اكتب رسالتك هنا",
|
||||
send: "إرسال",
|
||||
successMessage: "تم إرسال الرسالة بنجاح ",
|
||||
errorMessage: "حدث خطأ أثناء الإرسال ",
|
||||
},
|
||||
services: {
|
||||
title: "خدماتنا",
|
||||
subtitle: "نقدم خدمات متكاملة تشمل التصميم، البناء، الصيانة، وتطوير محطات الوقود ومنشآت التخزين.",
|
||||
futureVision: "نظرتنا المستقبلية",
|
||||
whyChooseUs: "لماذا تختارنا",
|
||||
futureVisionText: "نسعى لتعزيز محطات الوقود من خلال تحسين الكفاءة والاستدامة وجودة الخدمة. هدفنا هو توفير تجربة تزوّد أكثر سلاسة وتقليل الأثر البيئي",
|
||||
moreServices: "المزيد من خدماتنا",
|
||||
reasons: [
|
||||
"استجابة سريعة على مدار الساعة لجميع الطلبات والطوارئ",
|
||||
"تنفيذ وفقًا لمعايير السلامة والدقة العالمية",
|
||||
"توفير وتركيب أنظمة أتمتة متقدمة للتحكم بعدة محطات عن بُعد من مركز تحكم موحد",
|
||||
"استشارات مجانية من خبراء متخصصين مصممة حسب احتياجات العميل للمحطات وأنظمة التوزيع",
|
||||
"توفير أحدث المعدات والملحقات البترولية عالية الكفاءة مع ضمانات تتراوح من سنة إلى خمس سنوات",
|
||||
],
|
||||
items: [{
|
||||
title: "الدراسات الهندسية و إنشاء محطات الوقود",
|
||||
text: "بناء محطات الوقود و منشآت التخزين وفقًا لمعايير الجودة والسلامة الدولية.",
|
||||
details: "تقدیم الدراسات الھندسیة\nتنفیذ الاعمال المدنیة والمعدنیة\nتوريد وتركیب تجھیزات محطات الوقود\nالتجریب والتسلیم مع كفالة 2 سنة لجمیع الاعمال",
|
||||
},
|
||||
{
|
||||
title: "تطوير المحطات والتخزين",
|
||||
text: "توسيع السعة و زيادة قوة الضخ و حلول المراقبة الذكية.",
|
||||
details: "صيانة دورية للمضخات والخزانات\nتحسين الأداء باستخدام أحدث التقنيات\nترقية البنية التحتية للمحطات\nتقديم حلول ذكية للمراقبة عن بعد",
|
||||
},
|
||||
{
|
||||
title: "الصيانة الشاملة",
|
||||
text: "صيانة وقائية و طارئة تشمل",
|
||||
details: "الأعمال المدنية\nالأتمتة الإلكترونية\nالأعمال الكهربائية\nالأعمال الميكانيكية",
|
||||
},
|
||||
{
|
||||
title: "فحص العمر الفني للخزانات وتنظیفھا ومعایرتھا",
|
||||
text: "تنظيف احترافي باستخدام مواد متخصصة لضمان سلامة الخزانات وجودة الوقود.",
|
||||
details: "تحدید العمر الفني للخزانات باختبارات UT-MT-HT-PT\nتنظیف خزانات الوقود باستخدام بروتوكولات عالمیة",
|
||||
},
|
||||
{
|
||||
title: "الاختبارات الفنية المتخصصة",
|
||||
text: "اختبارات متقدمة تشمل",
|
||||
details: "السوائل النفاذة للخزانات\nوخطوط الأنابيب\nالموجات فوق الصوتية\nاختبارات المجال المغناطيسي",
|
||||
},
|
||||
{
|
||||
title: "أنظمة الأتمتة والمراقبة",
|
||||
text: "حلول رقمية متطورة تشمل",
|
||||
details: "إدارة محطات الوقود المتعددة عن بُعد من مركز تحكم موحد\nمراقبة أداء المحطات بشكل لحظي وتحليل البيانات لتحسين الكفاءة التشغيلية",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
de: {
|
||||
translation: {
|
||||
nav: {
|
||||
home: "Startseite",
|
||||
services: "Dienstleistungen",
|
||||
about: "Über uns",
|
||||
contact: "Kontakt",
|
||||
},
|
||||
home: {
|
||||
phrases: [
|
||||
"Bau strategischer Tankstellen und Lager",
|
||||
"Entwicklung von Tankstellen",
|
||||
"Herstellung von Kraftstofftanks und verwandten Dienstleistungen",
|
||||
"Elektrische Arbeiten",
|
||||
"Spezialisierte technische Tests",
|
||||
"Ingenieurstudien und Metall- und Betonkonstruktionen",
|
||||
"Kraftstofftankreinigung",
|
||||
],
|
||||
subtitle1: "Ihr intelligenter Ingenieurpartner im Kraftstoff- und Energiesektor",
|
||||
subtitle2: "Integrierte Lösungen für Bau, Entwicklung und Wartung von Tankstellen",
|
||||
contactUs: "Kontaktieren Sie uns",
|
||||
},
|
||||
about: {
|
||||
title: "Über uns",
|
||||
description: "Wir sind spezialisiert auf Kraftstoffinfrastrukturlösungen und bieten umfassende Dienstleistungen einschließlich Design, Bau, Wartung und Entwicklung von Tankstellen und Lagereinrichtungen.",
|
||||
},
|
||||
contact: {
|
||||
title: "Kontaktieren Sie uns",
|
||||
subtitle: "Unsere Expertise dient allen: von der einfachsten Station bis zur größten Stationskette und von sekundären Lagern bis zu strategischen Lagern. Kontaktieren Sie uns für professionelle Lösungen mit internationalen Standards",
|
||||
address: "Adresse",
|
||||
addressText: "Hauptsitz: Syrien - Damas - Baramkeh\nFlexible Büros: Homs - Fairouzeh, Alep - Industriezone, Tartous - Dubai-Straße\nArbeitsgebiete: Bereit zur Durchführung von Arbeiten in allen syrischen Gouvernements",
|
||||
phone: "Telefonnummern",
|
||||
email: "E-Mail",
|
||||
formTitle: "Kontaktieren Sie uns und lassen Sie uns Ihre Hände bei der Schaffung von Erfolg sein",
|
||||
name: "Name",
|
||||
nameePlaceholder: "Geben Sie Ihren Namen ein",
|
||||
emailPlaceholder: "beispiel@beispiel.com",
|
||||
message: "Nachricht",
|
||||
messagePlaceholder: "Schreiben Sie hier Ihre Nachricht",
|
||||
send: "Senden",
|
||||
successMessage: "Nachricht erfolgreich gesendet ",
|
||||
errorMessage: "Beim Senden ist ein Fehler aufgetreten ",
|
||||
},
|
||||
services: {
|
||||
title: "Unsere Dienstleistungen",
|
||||
subtitle: "Wir bieten umfassende Dienstleistungen einschließlich Design, Bau, Wartung und Entwicklung von Tankstellen und Lagereinrichtungen.",
|
||||
futureVision: "Unser Ausblick",
|
||||
whyChooseUs: "Warum uns wählen",
|
||||
moreServices: "Weitere unserer Leistungen",
|
||||
futureVisionText: "Wir arbeiten daran, Tankstellen durch Effizienz, Nachhaltigkeit und Servicequalität zu optimieren. Unser Ziel ist es, ein reibungsloseres Tankerlebnis zu ermöglichen und die Umweltbelastung zu reduzieren.",
|
||||
reasons: [
|
||||
"24/7 schnelle Reaktion auf alle Anfragen und Notfälle",
|
||||
"Umsetzung nach internationalen Sicherheits- und Präzisionsstandards",
|
||||
"Bereitstellung und Installation fortschrittlicher Automatisierungssysteme für die Fernsteuerung mehrerer Stationen von einem einheitlichen Kontrollzentrum",
|
||||
"Kostenlose Beratungen von spezialisierten Experten, die nach Kundenbedürfnissen für Stationen und Verteilungssysteme entwickelt wurden",
|
||||
"Bereitstellung der neuesten hocheffizienten Erdölausrüstung und -zubehör mit Garantien von einem bis fünf Jahren",
|
||||
],
|
||||
items: [{
|
||||
title: "Ingenieurstudien & Tankstellenbau",
|
||||
text: "Bau von Tankstellen und Lagereinrichtungen nach internationalen Qualitäts- und Sicherheitsstandards.",
|
||||
details: "Bereitstellung von Ingenieurstudien\nDurchführung von Zivil- und Metallarbeiten\nLieferung und Installation von Tankstellenausrüstung\nPrüfung und Lieferung mit 2-jähriger Garantie für alle Arbeiten",
|
||||
},
|
||||
{
|
||||
title: "Stations- und Lagerentwicklung",
|
||||
text: "Kapazitätserweiterung, Pumpenleistungssteigerung und intelligente Überwachungslösungen.",
|
||||
details: "Regelmäßige Wartung für Pumpen und Tanks\nLeistungsverbesserung mit neuesten Technologien\nInfrastruktur-Upgrade für Stationen\nBereitstellung intelligenter Lösungen für Fernüberwachung",
|
||||
},
|
||||
{
|
||||
title: "Umfassende Wartung",
|
||||
text: "Vorbeugende und Notfallwartung einschließlich",
|
||||
details: "Travaux civils\nElektronische Automatisierung\nElektrische Arbeiten\nMechanische Arbeiten",
|
||||
},
|
||||
{
|
||||
title: "Tank-Lebensdauerinspektion, Reinigung und Kalibrierung",
|
||||
text: "Professionelle Reinigung mit spezialisierten Materialien zur Gewährleistung der Tanksicherheit und Kraftstoffqualität.",
|
||||
details: "Détermination de la durée de vie technique des réservoirs avec des tests UT-MT-HT-PT-Tests\nNettoyage des réservoirs de carburant utilisant des protocoles internationaux",
|
||||
},
|
||||
{
|
||||
title: "Spezialisierte technische Tests",
|
||||
text: "Tests avancés incluant",
|
||||
details: "Liquides pénétrants pour réservoirs\net canalisations\nOndes ultrasoniques\nTests de champ magnétique",
|
||||
},
|
||||
{
|
||||
title: "Sistems d'Automatisation et de Surveillance",
|
||||
text: "Solutions numériques avancées incluant",
|
||||
details: "Gestion de plusieurs stations-service à distance depuis un centre de contrôle unifié\nSurveillance en temps réel des performances des stations et analyse de données pour améliorer l'efficacité opérationnelle",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
zh: {
|
||||
translation: {
|
||||
nav: {
|
||||
home: "首页",
|
||||
services: "服务",
|
||||
about: "关于我们",
|
||||
contact: "联系我们",
|
||||
},
|
||||
home: {
|
||||
phrases: [
|
||||
"建设战略加油站和仓库",
|
||||
"加油站开发",
|
||||
"制造燃料罐和相关服务",
|
||||
"电气工程",
|
||||
"专业技术测试",
|
||||
"工程研究和金属混凝土建设",
|
||||
"燃料罐清洁",
|
||||
],
|
||||
subtitle1: "您在燃料和能源领域的智能工程合作伙伴",
|
||||
subtitle2: "建设、开发和维护加油站的综合解决方案",
|
||||
contactUs: "联系我们",
|
||||
},
|
||||
about: {
|
||||
title: "关于我们",
|
||||
description: "我们专注于燃料基础设施解决方案，提供包括设计、建设、维护和开发加油站及储存设施在内的综合服务。",
|
||||
},
|
||||
contact: {
|
||||
title: "联系我们",
|
||||
subtitle: "我们的专业知识为所有人服务：从最简单的站点到最大的连锁站点，从二级仓库到战略仓库。联系我们获得符合国际标准的专业解决方案",
|
||||
address: "地址",
|
||||
addressText: "总部：叙利亚 - 大马士革 - 巴拉姆凯\n灵活办公室：霍姆斯 - 费鲁泽，阿勒颇 - 工业区，塔尔图斯 - 迪拜街\n工作区域：准备在所有叙利亚省份实施工程",
|
||||
phone: "电话号码",
|
||||
email: "电子邮件",
|
||||
formTitle: "联系我们，让我们成为您创造成就的双手",
|
||||
name: "姓名",
|
||||
nameePlaceholder: "输入您的姓名",
|
||||
emailPlaceholder: "example@example.com",
|
||||
message: "消息",
|
||||
messagePlaceholder: "在此写下您的消息",
|
||||
send: "发送",
|
||||
successMessage: "消息发送成功 ",
|
||||
errorMessage: "发送时发生错误 ",
|
||||
},
|
||||
services: {
|
||||
title: "我们的服务",
|
||||
subtitle: "我们提供全面的服务，包括加油站和储存设施的设计、建设、维护和开发。",
|
||||
futureVision: "我们的未来展望",
|
||||
whyChooseUs: "为什么选择我们",
|
||||
futureVisionText: "我们致力于通过提高效率、可持续性和服务质量来提升加油站的水平。我们的目标是提供更顺畅的加油体验，并减少对环境的影响。",
|
||||
moreServices: "更多服务",
|
||||
reasons: [
|
||||
"24/7快速响应所有请求和紧急情况",
|
||||
"按照国际安全和精度标准实施",
|
||||
"提供和安装先进的自动化系统，从统一控制中心远程控制多个站点",
|
||||
"专业专家根据客户对站点和分配系统的需求设计的免费咨询",
|
||||
"提供最新的高效石油设备和配件，保修期从一年到五年不等",
|
||||
],
|
||||
items: [{
|
||||
title: "工程研究和加油站建设",
|
||||
text: "根据国际质量和安全标准建设加油站和储存设施。",
|
||||
details: "提供工程研究\n实施土木和金属工程\n供应和安装加油站设备\n测试和交付，所有工程享有2年保修",
|
||||
},
|
||||
{
|
||||
title: "站点和储存开发",
|
||||
text: "容量扩展、泵功率增加和智能监控解决方案。",
|
||||
details: "泵和油罐的定期维护\n使用最新技术改善性能\n站点基础设施升级\n提供远程监控的智能解决方案",
|
||||
},
|
||||
{
|
||||
title: "全面维护",
|
||||
text: "预防性和紧急维护包括",
|
||||
details: "土木工程\n电子自动化\n电气工程\n机械工程",
|
||||
},
|
||||
{
|
||||
title: "油罐技术寿命检查、清洁和校准",
|
||||
text: "使用专业材料进行专业清洁，确保油罐安全和燃料质量。",
|
||||
details: "通过UT-MT-HT-PT测试确定油罐的技术寿命\n使用国际协议清洁燃料罐",
|
||||
},
|
||||
{
|
||||
title: "专业技术测试",
|
||||
text: "高级测试包括",
|
||||
details: "油罐渗透液体\n和管道\n超声波\n磁场测试",
|
||||
},
|
||||
{
|
||||
title: "自动化和监控系统",
|
||||
text: "先进的数字解决方案包括",
|
||||
details: "从统一控制中心远程管理多个加油站\n实时监控站点性能和数据分析以提高运营效率",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
fr: {
|
||||
translation: {
|
||||
nav: {
|
||||
home: "Accueil",
|
||||
services: "Services",
|
||||
about: "À propos",
|
||||
contact: "Contact",
|
||||
},
|
||||
home: {
|
||||
phrases: [
|
||||
"Créer des stations de carburant stratégiques et des entrepôts",
|
||||
"Développement de stations de carburant",
|
||||
"Fabrication de réservoirs de carburant et services connexes",
|
||||
"Entreprise électrique",
|
||||
"Tests techniques spécialisés",
|
||||
"Études d'ingénierie et construction métallique et bitumineuse",
|
||||
"Nettoyage de réservoirs de carburant",
|
||||
],
|
||||
subtitle1: "Votre partenaire d'ingénierie intelligent dans le secteur du carburant et de l'énergie",
|
||||
subtitle2: "Solutions complètes pour la construction, le développement et l'entretien des stations-service",
|
||||
contactUs: "Contactez-nous",
|
||||
},
|
||||
about: {
|
||||
title: "À propos de nous",
|
||||
description: "Nous nous spécialisons dans les solutions d'infrastructure de carburant où nous fournissons des services complets incluant la conception, la construction, la maintenance et le développement de stations-service et d'installations de stockage.",
|
||||
},
|
||||
contact: {
|
||||
title: "Contactez-nous",
|
||||
subtitle: "Notre expertise sert tout le monde : de la station la plus simple à la plus grande chaîne de stations et des entrepôts secondaires aux entrepôts stratégiques. Contactez-nous pour des solutions professionnelles aux normes internationales",
|
||||
address: "Adresse",
|
||||
addressText: "Siège social : Syrie - Damas - Baramkeh\nBureaux flexibles : Homs - Fairouzeh, Alep - Zone industrielle, Tartous - Rue de Dubaï\nZones de travail : Prêts à mettre en œuvre des travaux dans tous les gouvernorats syriens",
|
||||
phone: "Numéros de téléphone",
|
||||
email: "E-mail",
|
||||
formTitle: "Contactez-nous et laissez-nous être vos mains dans la création de réalisations",
|
||||
name: "Nom",
|
||||
nameePlaceholder: "Entrez votre nom",
|
||||
emailPlaceholder: "exemple@exemple.com",
|
||||
message: "Message",
|
||||
messagePlaceholder: "Écrivez votre message ici",
|
||||
send: "Envoyer",
|
||||
successMessage: "Message envoyé avec succès ",
|
||||
errorMessage: "Une erreur s'est produite lors de l'envoi ",
|
||||
},
|
||||
services: {
|
||||
title: "Nos Services",
|
||||
subtitle: "Nous fournissons des services complets incluant la conception, la construction, la maintenance et le développement de stations-service et d'installations de stockage.",
|
||||
futureVision: "Nos perspectives d'avenir",
|
||||
whyChooseUs: "Pourquoi nous choisir",
|
||||
moreServices: "Plus de nos services",
|
||||
futureVisionText: "Nous nous efforçons d'améliorer l'efficacité, la durabilité et la qualité du service des stations-service. Notre objectif est d'offrir une expérience de ravitaillement plus fluide et de réduire l'impact environnemental.",
|
||||
reasons: [
|
||||
"Réponse rapide 24/7 à toutes les demandes et urgences",
|
||||
"Exécuté conformément aux normes mondiales de sécurité et de précision",
|
||||
"Fourniture et installation de systèmes d'automatisation avancés pour le contrôle à distance de plusieurs stations depuis un centre de contrôle unifié",
|
||||
"Consultations gratuites d'experts spécialisés conçues selon les besoins des clients pour les stations et systèmes de distribution",
|
||||
"Fourniture des équipements et accessoires pétroliers les plus récents et hautement efficaces avec des garanties allant d'un à cinq ans",
|
||||
],
|
||||
items: [{
|
||||
title: "Études d'ingénierie et construction de stations-service",
|
||||
text: "Construction de stations-service et d'installations de stockage selon les normes internationales de qualité et de sécurité.",
|
||||
details: "Fourniture d'études d'ingénierie \nMise en œuvre de travaux civils et métalliques\nFourniture et installation d'équipements de stations-service\nTests et livraison avec garantie de 2 ans pour tous les travaux",
|
||||
},
|
||||
{
|
||||
title: "Développement de Stations et de Stockage",
|
||||
text: "Expansion de capacité, augmentation de puissance de pompe et solutions de surveillance intelligente.",
|
||||
details: "Maintenance périodique pour pompes et réservoirs\nAmélioration des performances utilisant les dernières technologies\nMise à niveau de l'infrastructure pour les stations\nFourniture de solutions intelligentes pour la surveillance à distance",
|
||||
},
|
||||
{
|
||||
title: "Maintenance Complète",
|
||||
text: "Maintenance préventive et d'urgence incluant",
|
||||
details: "Travaux civils\nAutomatisation électronique\nTravaux électriques\nTravaux mécaniques",
|
||||
},
|
||||
{
|
||||
title: "Inspection de Durée de Vie Technique des Réservoirs, Nettoyage et Calibrage",
|
||||
text: "Nettoyage professionnel utilisant des matériaux spécialisés pour assurer la sécurité des réservoirs et la qualité du carburant.",
|
||||
details: "Détermination de la durée de vie technique des réservoirs avec des tests UT-MT-HT-PT\nNettoyage des réservoirs de carburant utilisant des protocoles internationaux",
|
||||
},
|
||||
{
|
||||
title: "Tests Techniques Spécialisés",
|
||||
text: "Tests avancés incluant",
|
||||
details: "Liquides perméables pour réservoirs\net canalisations Contrôle\npar ultrasons\nTests de champ magnétique",
|
||||
},
|
||||
{
|
||||
title: "Systèmes d'Automatisation et de Surveillance",
|
||||
text: "Solutions numériques avancées incluant",
|
||||
details: "Gestion de plusieurs stations-service à distance depuis un centre de contrôle unifié\nSurveillance en temps réel des performances des stations et analyse de données pour améliorer l'efficacité opérationnelle",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
it: {
|
||||
translation: {
|
||||
nav: {
|
||||
home: "Home",
|
||||
services: "Servizi",
|
||||
about: "Chi siamo",
|
||||
contact: "Contatti",
|
||||
},
|
||||
home: {
|
||||
phrases: [
|
||||
"Costruzione di stazioni di servizio e magazzini strategici",
|
||||
"Sviluppo di stazioni di servizio",
|
||||
"Produzione di serbatoi di carburante e servizi correlati",
|
||||
"Lavori elettrici",
|
||||
"Test tecnici specializzati",
|
||||
"Studi di ingegneria e costruzioni metalliche e in cemento",
|
||||
"Pulizia serbatoi carburante",
|
||||
],
|
||||
subtitle1: "Il vostro partner ingegneristico intelligente nel settore carburanti ed energia",
|
||||
subtitle2: "Soluzioni integrate per costruzione, sviluppo e manutenzione stazioni di servizio",
|
||||
contactUs: "Contattaci",
|
||||
},
|
||||
about: {
|
||||
title: "Chi siamo",
|
||||
description: "Siamo specializzati in soluzioni per infrastrutture di carburante dove forniamo servizi completi inclusi progettazione, costruzione, manutenzione e sviluppo di stazioni di servizio e strutture di stoccaggio.",
|
||||
},
|
||||
contact: {
|
||||
title: "Contattaci",
|
||||
subtitle: "La nostra competenza serve tutti: dalla stazione più semplice alla più grande catena di stazioni e dai magazzini secondari ai magazzini strategici. Contattaci per soluzioni professionali con standard internazionali",
|
||||
address: "Indirizzo",
|
||||
addressText: "Sede centrale: Siria - Damasco - Baramkeh\nUffici flessibili: Homs - Fairouzeh, Aleppo - Zona industriale, Tartous - Via Dubai\nAree di lavoro: Pronti a implementare lavori in tutti i governatorati siriani",
|
||||
phone: "Numeri di telefono",
|
||||
email: "Email",
|
||||
formTitle: "Contattaci e lascia che siamo le tue mani nel creare successi",
|
||||
name: "Nome",
|
||||
nameePlaceholder: "Inserisci il tuo nome",
|
||||
emailPlaceholder: "esempio@esempio.com",
|
||||
message: "Messaggio",
|
||||
messagePlaceholder: "Scrivi qui il tuo messaggio",
|
||||
send: "Invia",
|
||||
successMessage: "Messaggio inviato con successo ",
|
||||
errorMessage: "Si è verificato un errore durante l'invio ",
|
||||
},
|
||||
services: {
|
||||
title: "I Nostri Servizi",
|
||||
subtitle: "Forniamo servizi completi inclusi progettazione, costruzione, manutenzione e sviluppo di stazioni di servizio e strutture di stoccaggio.",
|
||||
futureVision: "La nostra prospettiva futura",
|
||||
whyChooseUs: "Perché scegliere noi",
|
||||
moreServices: "Altri nostri servizi",
|
||||
futureVisionText: "Ci impegniamo a migliorare le stazioni di servizio migliorandone l'efficienza, la sostenibilità e la qualità del servizio. Il nostro obiettivo è offrire un'esperienza di rifornimento più fluida e ridurre l'impatto ambientale.",
|
||||
reasons: [
|
||||
"Risposta rapida 24/7 a tutte le richieste ed emergenze",
|
||||
"Implementazione secondo standard internazionali di sicurezza e precisione",
|
||||
"Fornitura e installazione di sistemi di automazione avanzati per il controllo remoto di più stazioni da un centro di controllo unificato",
|
||||
"Consultazioni gratuite da esperti specializzati progettate secondo le esigenze del cliente per stazioni e sistemi di distribuzione",
|
||||
"Fornitura delle più recenti attrezzature e accessori petroliferi ad alta efficienza con garanzie da uno a cinque anni",
|
||||
],
|
||||
servicesList: [{
|
||||
title: "Studi di Ingegneria e Costruzione Stazioni di Servizio",
|
||||
text: "Costruzione di stazioni di servizio e strutture di stoccaggio secondo standard internazionali di qualità e sicurezza.",
|
||||
details: "Fornitura di studi di ingegneria\nImplementazione di lavori civili e metallici\nFornitura e installazione di attrezzature per stazioni di servizio\nTest e consegna con garanzia di 2 anni per tutti i lavori",
|
||||
},
|
||||
{
|
||||
title: "Sviluppo Stazioni e Stoccaggio",
|
||||
text: "Espansione capacità, aumento potenza pompa e soluzioni di monitoraggio intelligente.",
|
||||
details: "Manutenzione periodica per pompe e serbatoi\nMiglioramento prestazioni utilizzando le ultime tecnologie\nAggiornamento infrastruttura per stazioni\nFornitura di soluzioni intelligenti per monitoraggio remoto",
|
||||
},
|
||||
{
|
||||
title: "Manutenzione Completa",
|
||||
text: "Manutenzione preventiva ed emergenza incluso",
|
||||
details: "Lavori civili\nAutomazione elettronica\nLavori elettrici\nLavori meccanici",
|
||||
},
|
||||
{
|
||||
title: "Ispezione Vita Tecnica Serbatoi, Pulizia e Calibrazione",
|
||||
text: "Pulizia professionale utilizzando materiali specializzati per garantire sicurezza serbatoi e qualità carburante.",
|
||||
details: "Determinazione vita tecnica serbatoi con test UT-MT-HT-PT\nPulizia serbatoi carburante utilizzando protocolli internazionali",
|
||||
},
|
||||
{
|
||||
title: "Test Tecnici Specializzati",
|
||||
text: "Test avanzati incluso",
|
||||
details: "Liquidi penetranti per serbatoi\ne tubazioni\nOnde ultrasoniche\nTest campo magnetico",
|
||||
},
|
||||
{
|
||||
title: "Sistemi di Automazione e Monitoraggio",
|
||||
text: "Soluzioni digitali avanzate incluso",
|
||||
details: "Gestione multiple stazioni di servizio da remoto da un centro di controllo unificato\nMonitoraggio in tempo reale prestazioni stazioni e analisi dati per migliorare efficienza operativa",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
i18n
|
||||
.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: "en",
|
||||
debug: false,
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
detection: {
|
||||
order: ["localStorage", "navigator"],
|
||||
caches: ["localStorage"],
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
51
src/index.css
Normal file
51
src/index.css
Normal file
@ -0,0 +1,51 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "flowbite/src/themes/default";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@plugin "flowbite/plugin";
|
||||
@source "../node_modules/flowbite";
|
||||
:root {
|
||||
--primary-color: #F4F6FF;
|
||||
--secondary-color: #F3C623;
|
||||
--accent-color: #EB8317;
|
||||
/* --dark-color: #10375C; */
|
||||
--dark-color: #111827;
|
||||
--font-color: #D1D5DB;
|
||||
}
|
||||
|
||||
|
||||
/* Default font for all languages except Arabic */
|
||||
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* Arabic font family when document direction is RTL */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Madani Arabic';
|
||||
src: url('./assets/fonts/Madani-Arabic-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Madani Arabic';
|
||||
src: url('./assets/fonts/Madani-Arabic-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Arabic font override */
|
||||
|
||||
html[dir="rtl"] *,
|
||||
html[lang="ar"] * {
|
||||
font-family: 'Madani Arabic', Arial, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
Reference in New Issue
Block a user