+ +

+ AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript +

+ AddType application/javascript .js + AddType application/json .json + AddType text/javascript .mjs + AddType text/css .css + AddType text/html .html .htm + AddType image/svg+xml .svg + AddType application/x-font-ttf .ttf + AddType application/x-font-woff .woff + AddType application/x-font-woff2 .woff2 +

+ + + + https://www.tps-stations.com/ + + + weekly + 1.0 + + + + + https://www.tps-stations.com/services + + + weekly + 0.9 + + + + + https://www.tps-stations.com/about + + + monthly + 0.8 + + + + + https://www.tps-stations.com/contact + + + monthly + 0.8 + +

+ + + + + +

+ {/* Animated background effect */} +

+ {[...Array(20)].map((_, i) => ( +

+ ))} +

+ + {/* Company logo or branding could go here */} +

+ TPS +

+ + {/* 3D-style Fuel Tank */} +

+ {/* Tank body with 3D effect */} +

+ {/* Glass effect overlay */} +

+ + {/* Tank Cap with metallic effect */} +

+ + {/* Fuel Level with dynamic wave effect */} +

+ {/* Animated wave effect at the top of fuel */} +

+ + {/* Bubbles with varied animations */} + {[...Array(8)].map((_, i) => ( +

+ ))} +

+ + {/* Tank level markings with glow effect */} +

+ {[...Array(4)].map((_, i) => ( +

75 - i * 25 + ? "0 1px 3px rgba(243,198,35,0.3)" + : "none", + }} + > +

+ ))} +

+ + {/* Fuel Gauge with realistic dial */} +

+ {/* Gauge markings */} + {[...Array(9)].map((_, i) => { + const rotation = -135 + i * 30; + const isLarge = i % 2 === 0; + return ( +

+ ); + })} + + {/* Gauge needle with smooth animation */} +

+ + {/* Center pin */} +

+ + {/* E and F indicators */} +

+ E +

+ F +

+ + {/* Progress indicator with animated glow */} +

+ {progress}% +

+ +

+ Filling your tank... +

+ + {/* Advanced animations */} + +

+ ); + } + + return <>{children}; +}; + +export default ImagePreloader; diff --git a/src/Components/LanguageSwitcher/LanguageSwitcher.jsx b/src/Components/LanguageSwitcher/LanguageSwitcher.jsx new file mode 100644 index 0000000..a363570 --- /dev/null +++ b/src/Components/LanguageSwitcher/LanguageSwitcher.jsx @@ -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 ( +

+ + + {isOpen && ( +

+ )} +

+ ); +}; + +export default LanguageSwitcher; diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx new file mode 100644 index 0000000..bb83d8d --- /dev/null +++ b/src/Components/Nav/Navbar.jsx @@ -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 ( +

+ {/* الشعار */} +

+ + {/* الجانب الأيمن */} +

+ {/* Language Switcher */} + + + {/* زر القائمة للجوال */} + +

+ + {/* روابط الأقسام */} +

+ 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} + +

+ ); +}; + +export default Navbar; diff --git a/src/Components/Sections/About/About.css b/src/Components/Sections/About/About.css new file mode 100644 index 0000000..c60ddee --- /dev/null +++ b/src/Components/Sections/About/About.css @@ -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; +} \ No newline at end of file diff --git a/src/Components/Sections/About/About.jsx b/src/Components/Sections/About/About.jsx new file mode 100644 index 0000000..e63b0dd --- /dev/null +++ b/src/Components/Sections/About/About.jsx @@ -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 ( + +

+ {/* صورة الخلفية */} +

+ + {/* مربع النص المتراكب */} +

+ + {t('about.title')} + +

+ {t('about.description')} +

+ + ); +}; + +export default About; diff --git a/src/Components/Sections/Contact/Contact.jsx b/src/Components/Sections/Contact/Contact.jsx new file mode 100644 index 0000000..437ab55 --- /dev/null +++ b/src/Components/Sections/Contact/Contact.jsx @@ -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 ( +

+ + {t("contact.title")} + +

+ +

+ {t("contact.subtitle")} +

+ {/* Enhanced Contact Information Section */} +

+ {/* Address Card */} +

+ +

+ {t("contact.address")} +

+ {t("contact.addressText")} +

+ + {/* Phone Card */} +

+ +

+ {t("contact.phone")} +

+ + 0965656631 + +

+ +

+ {/* */} + + 963965656631 + +

+ + +

+ + {/* Email Card */} +

+ +

+ {t("contact.email")} +

+ + Info@TPS-STATIONS.COM + +

+ + {/* Contact Form - keeping existing styling */} +

+ {t("contact.formTitle")} +

+ +

+ {/* Name Field */} +

+ + {t("contact.name")} + +

+ +

+ + {/* Email Field */} +

+ + {t("contact.email")} + +

+ +

+ + {/* Message Field */} +

+ + {t("contact.message")} + +

+ +

+ + {/* Success/Error Message */} + {message.text && ( +

+ {message.type === "success" ? ( + + ) : ( + + )} + {message.text} +

+ )} + + {/* Submit Button */} +

+ +

+ ); +}; + +export default Contact; diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx new file mode 100644 index 0000000..0d10785 --- /dev/null +++ b/src/Components/Sections/Home/Home.jsx @@ -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 ( + +

+ {/* الخلفية */} +

+ + {/* المحتوى */} +

+ + {/* العنوان المتغير */} + + + + + +

+ + + {phrases[currentIndex]} + + +

+ + + + + + + {/* وصف إضافي */} + +

{t("home.subtitle1")}

{t("home.subtitle2")}

+ + + {/* زر تواصل معنا */} + +

+ 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 }} + > + + + + + + + + + + {t("home.contactUs")} + + + + {menuOpen && ( + + + + 963965656631 + + + + + 963965656635 + + + + info@TPS-STATIONS.COM + + + )} + +

+ + +

+ + ); +}; + +export default Home; diff --git a/src/Components/Sections/Services/Services.jsx b/src/Components/Sections/Services/Services.jsx new file mode 100644 index 0000000..3258f05 --- /dev/null +++ b/src/Components/Sections/Services/Services.jsx @@ -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: , + text: t("services.reasons.0", "Fast Service"), + }, + { + icon: , + text: t("services.reasons.1", "Quality Assurance"), + }, + { + icon: , + text: t("services.reasons.2", "Modern Technology"), + }, + { + icon: , + text: t("services.reasons.3", "Customer Support"), + }, + { + icon: , + 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

Loading translations...

; + + return ( + <> + +

+ + {t("services.title", "Our Services")} + +

+ +

+ {t("services.subtitle", "Explore our professional services")} +

+ +

+ {visibleServices.map((service, index) => ( + +

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" + > +

+ {service.title} +

+ {service.text} +

+ + {expandedIndex === startIndex + index && ( +

+ {service.details.split("\n").map((line, i, arr) => { + const isLastCentered = + arr.length % 2 === 1 && i === arr.length - 1; + return ( +

+ {line} +

+ ); + })} +

+ )} + +

+ +

+ + {windowWidth < 1024 && expandedIndex === startIndex + index && ( +

+ )} + + ))} + + +

+ + {!(windowWidth < 1024 && expandedIndex !== null) && ( +

setIsPaused(true)} + onMouseLeave={() => setIsPaused(false)} + > +

+ {expandedIndex === null && ( +

+ {t("services.futureVision", "Our Future Vision")} +

+ {t( + "services.futureVisionText", + "Innovative solutions for tomorrow's challenges" + )} +

+ )} +

+ + + +

+ + {t("services.whyChooseUs", "Why Choose Us")} + +

+ {reasonsToChooseUs.map((reason, index) => ( +

+ {React.cloneElement(reason.icon, { + className: "w-8 h-8 text-white", + })} +

+ +

+ {reason.text} +

+ ))} +

+ + + ); +}; + +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: , +// text: t("services.reasons.0", "Fast Service"), +// }, +// { +// icon: , +// text: t("services.reasons.1", "Quality Assurance"), +// }, +// { +// icon: , +// text: t("services.reasons.2", "Modern Technology"), +// }, +// { +// icon: , +// text: t("services.reasons.3", "Customer Support"), +// }, +// { +// icon: , +// 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

Loading translations...

; + +// return ( +// <> +// +//

+//

+// +// {t("services.title", "Our Services")} +// +//

+ +//

+//

+// {t("services.subtitle", "Explore our professional services")} +//

+ +//

+// {visibleServices.map((service, index) => { +// const globalIndex = startIndex + index; +// return ( +// +//

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" +// > +//

+// {service.title} +//

+//

+// {service.text} +//

+ +// {expandedIndex === globalIndex && ( +//

+// {service.details.split("\n").map((line, i, arr) => { +// const isLastCentered = +// arr.length % 2 === 1 && i === arr.length - 1; +// return ( +//

+// {line} +//

+// ); +// })} +//

+// )} + +//

+// +//

+//

+ +// {windowWidth < 1024 && expandedIndex === globalIndex && ( +//

+//

+// )} +// +// ); +// })} + +// +//

+//

+ +// {!(windowWidth < 1024 && expandedIndex !== null) && ( +//

setIsPaused(true)} +// onMouseLeave={() => setIsPaused(false)} +// > +//

+//

+// {expandedIndex === null && ( +//

+//

+// {t("services.futureVision", "Our Future Vision")} +//

+//

+// {t( +// "services.futureVisionText", +// "Innovative solutions for tomorrow's challenges" +// )} +//

+//

+// )} +//

+//

+// )} +//

+//

+// + +// +//

+//

+// +// {t("services.whyChooseUs", "Why Choose Us")} +// +//

+//

+// {reasonsToChooseUs.map((reason, index) => ( +//

+//

+// {React.cloneElement(reason.icon, { +// className: "w-8 h-8 text-white", +// })} +//

+//

+ +//

+//

+// {reason.text} +//

+//

+// ))} +//

+//

+// +// +// ); +// }; + +// export default Services; + diff --git a/src/assets/Fonts/Madani Arabic Black.ttf b/src/assets/Fonts/Madani Arabic Black.ttf new file mode 100644 index 0000000..6870629 Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Black.ttf differ diff --git a/src/assets/Fonts/Madani Arabic Extra Bold.ttf b/src/assets/Fonts/Madani Arabic Extra Bold.ttf new file mode 100644 index 0000000..6d08c22 Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Extra Bold.ttf differ diff --git a/src/assets/Fonts/Madani Arabic Extra Light.ttf b/src/assets/Fonts/Madani Arabic Extra Light.ttf new file mode 100644 index 0000000..92b69ac Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Extra Light.ttf differ diff --git a/src/assets/Fonts/Madani Arabic Light.ttf b/src/assets/Fonts/Madani Arabic Light.ttf new file mode 100644 index 0000000..621075d Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Light.ttf differ diff --git a/src/assets/Fonts/Madani Arabic Medium.ttf b/src/assets/Fonts/Madani Arabic Medium.ttf new file mode 100644 index 0000000..504b6b0 Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Medium.ttf differ diff --git a/src/assets/Fonts/Madani Arabic Semi Bold.ttf b/src/assets/Fonts/Madani Arabic Semi Bold.ttf new file mode 100644 index 0000000..d4b2df4 Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Semi Bold.ttf differ diff --git a/src/assets/Fonts/Madani Arabic Thin.ttf b/src/assets/Fonts/Madani Arabic Thin.ttf new file mode 100644 index 0000000..dd42a04 Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Thin.ttf differ diff --git a/src/assets/Fonts/Madani Arabic Variable.ttf b/src/assets/Fonts/Madani Arabic Variable.ttf new file mode 100644 index 0000000..088cd2a Binary files /dev/null and b/src/assets/Fonts/Madani Arabic Variable.ttf differ diff --git a/src/assets/Fonts/Madani-Arabic-Bold.ttf b/src/assets/Fonts/Madani-Arabic-Bold.ttf new file mode 100644 index 0000000..96c02b9 Binary files /dev/null and b/src/assets/Fonts/Madani-Arabic-Bold.ttf differ diff --git a/src/assets/Fonts/Madani-Arabic-Regular.ttf b/src/assets/Fonts/Madani-Arabic-Regular.ttf new file mode 100644 index 0000000..8e3a952 Binary files /dev/null and b/src/assets/Fonts/Madani-Arabic-Regular.ttf differ diff --git a/src/assets/Images/gasstation.jpg b/src/assets/Images/gasstation.jpg new file mode 100644 index 0000000..0e44a51 Binary files /dev/null and b/src/assets/Images/gasstation.jpg differ diff --git a/src/assets/TPS-logo.png b/src/assets/TPS-logo.png new file mode 100644 index 0000000..27b03c1 Binary files /dev/null and b/src/assets/TPS-logo.png differ diff --git a/src/assets/ar-flag.svg b/src/assets/ar-flag.svg new file mode 100644 index 0000000..5246982 Binary files /dev/null and b/src/assets/ar-flag.svg differ diff --git a/src/assets/china-flag-icon.svg b/src/assets/china-flag-icon.svg new file mode 100644 index 0000000..a869731 --- /dev/null +++ b/src/assets/china-flag-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/de-flag.svg b/src/assets/de-flag.svg new file mode 100644 index 0000000..543a1bc --- /dev/null +++ b/src/assets/de-flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/france-flag-icon.svg b/src/assets/france-flag-icon.svg new file mode 100644 index 0000000..6539c7c --- /dev/null +++ b/src/assets/france-flag-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/gas-station-img.jpg b/src/assets/gas-station-img.jpg new file mode 100644 index 0000000..0de0347 Binary files /dev/null and b/src/assets/gas-station-img.jpg differ diff --git a/src/assets/italy-flag-icon.svg b/src/assets/italy-flag-icon.svg new file mode 100644 index 0000000..31d37af --- /dev/null +++ b/src/assets/italy-flag-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/syriaflag.svg b/src/assets/syriaflag.svg new file mode 100644 index 0000000..c8c13f1 --- /dev/null +++ b/src/assets/syriaflag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/uk-flag.svg b/src/assets/uk-flag.svg new file mode 100644 index 0000000..630b05c --- /dev/null +++ b/src/assets/uk-flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/i18n.js b/src/i18n.js new file mode 100644 index 0000000..5a8bdbc --- /dev/null +++ b/src/i18n.js @@ -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; \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ee84d3e --- /dev/null +++ b/src/index.css @@ -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; +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/src/main.jsx @@ -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( + + + , +) diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..c9f6a55 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,11 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], +} \ No newline at end of file diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})