+ {/* 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..085ebdf --- /dev/null +++ b/src/Components/Sections/Contact/Contact.jsx @@ -0,0 +1,448 @@ +import { useTranslation } from "react-i18next"; +import { + FaMapMarkerAlt, + FaPhoneAlt, + FaEnvelope, + FaWhatsapp, + FaPaperPlane, +} from "react-icons/fa"; +import emailjs from "@emailjs/browser"; +import { useRef, useState } from "react"; +import { motion } from "framer-motion"; + +const Contact = () => { + const { t } = useTranslation(); + const form = useRef(); + const [message, setMessage] = useState({ text: "", type: "" }); + const [isLoading, setIsLoading] = useState(false); + + 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); + 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); + setTimeout(() => setMessage({ text: "", type: "" }), 5000); + } + ); + }; + + return ( +

+ +

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

+ +

+ + +

+ + + + +

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

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

+ + + + + +

+ + + + +

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

+ 0965656631 +

+ + + +

+ +

+ + 963965656631 + +

+ + + + + + +

+ + + + +

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

+ + Info@TPS-STATIONS.COM + +

+ + + + + + + +

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

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

+ +

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

+ +

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

+ +

+ {message.text && ( + +

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

+ + )} +

+ + + {isLoading ? ( + <> + + {t("contact.send")}... + + ) : ( + <> + {t("contact.send")} + + + )} + + {!isLoading && ( +

+ )} + +

+ +

+ {t('contact.contactSection.title')} +

+ {t('contact.contactSection.description')} +

+ {t('contact.contactSection.badges', { returnObjects: true }).map((badge, index) => ( + + {badge} + + ))} +

+ +

+ ); +}; + +export default Contact; \ No newline at end of file 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..5f64f29 --- /dev/null +++ b/src/Components/Sections/Services/Services.jsx @@ -0,0 +1,656 @@ +import React, { useState, useEffect } from "react"; +import { Element } from "react-scroll"; +import { useTranslation } from "react-i18next"; +import { motion, AnimatePresence } from "framer-motion"; +import { + Globe, + MessageSquare, + Bell, + Package, + BarChart3, + Zap, + Shield, + Users, + Clock, + CheckCircle +} from "lucide-react"; + +const CARDS_PER_PAGE = 4; + +const Services = () => { + const { t, ready } = useTranslation(); + const servicesData = [ + { + id: "service-1", + title: t('tradesafe.services.platform.title'), + description: t('tradesafe.services.platform.description'), + details: t('tradesafe.services.platform.details'), + icon: , + color: "from-[#23558f] to-[#3360b2]", + bgColor: "bg-gradient-to-br from-[#23558f]/20 to-[#3360b2]/20", + features: t('tradesafe.services.platform.features', { returnObjects: true }) + }, + { + id: "service-2", + title: t('tradesafe.services.orders.title'), + description: t('tradesafe.services.orders.description'), + details: t('tradesafe.services.orders.details'), + icon: , + color: "from-[#3360b2] to-[#3c5ee3]", + bgColor: "bg-gradient-to-br from-[#3360b2]/20 to-[#3c5ee3]/20", + features: t('tradesafe.services.orders.features', { returnObjects: true }) + }, + { + id: "service-3", + title: t('tradesafe.services.communication.title'), + description: t('tradesafe.services.communication.description'), + details: t('tradesafe.services.communication.details'), + icon: , + color: "from-[#3c5ee3] to-[#5c7ce3]", + bgColor: "bg-gradient-to-br from-[#3c5ee3]/20 to-[#5c7ce3]/20", + features: t('tradesafe.services.communication.features', { returnObjects: true }) + }, + { + id: "service-4", + title: t('tradesafe.services.notifications.title'), + description: t('tradesafe.services.notifications.description'), + details: t('tradesafe.services.notifications.details'), + icon: , + color: "from-[#4a90e2] to-[#6aa8f2]", + bgColor: "bg-gradient-to-br from-[#4a90e2]/20 to-[#6aa8f2]/20", + features: t('tradesafe.services.notifications.features', { returnObjects: true }) + }, + { + id: "service-5", + title: t('tradesafe.services.dashboard.title'), + description: t('tradesafe.services.dashboard.description'), + details: t('tradesafe.services.dashboard.details'), + icon: , + color: "from-[#2ecc71] to-[#1abc9c]", + bgColor: "bg-gradient-to-br from-[#2ecc71]/20 to-[#1abc9c]/20", + features: t('tradesafe.services.dashboard.features', { returnObjects: true }) + }, + { + id: "service-6", + title: t('tradesafe.services.solutions.title'), + description: t('tradesafe.services.solutions.description'), + details: t('tradesafe.services.solutions.details'), + icon: , + color: "from-[#9b59b6] to-[#8e44ad]", + bgColor: "bg-gradient-to-br from-[#9b59b6]/20 to-[#8e44ad]/20", + features: t('tradesafe.services.solutions.features', { returnObjects: true }) + }, + { + id: "service-7", + title: t('tradesafe.services.speed.title'), + description: t('tradesafe.services.speed.description'), + details: t('tradesafe.services.speed.details'), + icon: , + color: "from-[#f39c12] to-[#e67e22]", + bgColor: "bg-gradient-to-br from-[#f39c12]/20 to-[#e67e22]/20", + features: t('tradesafe.services.speed.features', { returnObjects: true }) + }, + { + id: "service-8", + title: t('tradesafe.services.network.title'), + description: t('tradesafe.services.network.description'), + details: t('tradesafe.services.network.details'), + icon: , + color: "from-[#3498db] to-[#2980b9]", + bgColor: "bg-gradient-to-br from-[#3498db]/20 to-[#2980b9]/20", + features: t('tradesafe.services.network.features', { returnObjects: true }) + } + ]; + + const reasonsToChooseUs = [ + { + icon: , + text: t('tradesafe.reasons.speed.text'), + description: t('tradesafe.reasons.speed.description') + }, + { + icon: , + text: t('tradesafe.reasons.reliability.text'), + description: t('tradesafe.reasons.reliability.description') + }, + { + icon: , + text: t('tradesafe.reasons.connection.text'), + description: t('tradesafe.reasons.connection.description') + }, + { + icon: , + text: t('tradesafe.reasons.communication.text'), + description: t('tradesafe.reasons.communication.description') + }, + { + icon: , + text: t('tradesafe.reasons.time.text'), + description: t('tradesafe.reasons.time.description') + }, + { + icon: , + text: t('tradesafe.reasons.solutions.text'), + description: t('tradesafe.reasons.solutions.description') + } + ]; + + const [expandedCards, setExpandedCards] = useState({}); + const [hoveredCard, setHoveredCard] = useState(null); + const [page, setPage] = useState(0); + + const startIndex = page * CARDS_PER_PAGE; + const endIndex = startIndex + CARDS_PER_PAGE; + const visibleServices = servicesData.slice(startIndex, endIndex); + const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE); + + const toggleCard = (cardId) => { + setExpandedCards(prev => ({ + ...prev, + [cardId]: !prev[cardId] + })); + }; + + const toggleAllCards = () => { + const allExpanded = Object.values(expandedCards).every(Boolean); + const newState = {}; + visibleServices.forEach(service => { + newState[service.id] = !allExpanded; + }); + setExpandedCards(newState); + }; + + const handleNextPage = () => { + const newExpandedState = {}; + visibleServices.forEach(service => { + newExpandedState[service.id] = false; + }); + setExpandedCards(newExpandedState); + setPage((prev) => (prev + 1) % totalPages); + }; + + const handlePrevPage = () => { + const newExpandedState = {}; + visibleServices.forEach(service => { + newExpandedState[service.id] = false; + }); + setExpandedCards(newExpandedState); + setPage((prev) => (prev - 1 + totalPages) % totalPages); + }; + + useEffect(() => { + const newExpandedState = {}; + visibleServices.forEach(service => { + newExpandedState[service.id] = expandedCards[service.id] || false; + }); + setExpandedCards(newExpandedState); + }, [page]); + + const openPdfPresentation = () => { + const pdfUrl = `${window.location.origin}/trader-safe.pdf`; + window.open(pdfUrl, "_blank", "noopener,noreferrer"); + }; + + const openPlatformLink = () => { + const platformUrl = "http://45.93.137.91/"; + window.open(platformUrl, "_blank", "noopener,noreferrer"); + }; + + if (!ready) return ( +

+ ); + + return ( + <> + + +

+ +

+ + {t('tradesafe.services.title')} + +

+ {t('tradesafe.subtitle')} +

+ + {Object.values(expandedCards).every(Boolean) ? ( + <> + + {t('tradesafe.buttons.collapseAll')} + + ) : ( + <> + + {t('tradesafe.buttons.showDetails')} + + )} + +

+ + +

+ + {visibleServices.map((service, index) => { + const isExpanded = expandedCards[service.id] || false; + const isHovered = hoveredCard === service.id; + return ( + setHoveredCard(service.id)} + onHoverEnd={() => setHoveredCard(null)} + onClick={() => toggleCard(service.id)} + className={`relative cursor-pointer transition-all duration-300 ease-in-out p-6 rounded-2xl shadow-lg backdrop-blur-sm bg-white/90 border-2 ${ + isExpanded + ? 'border-[#3c5ee3] shadow-xl' + : 'border-white/20 hover:border-[#3c5ee3]/30' + }`} + > +

+ {service.icon} +

+ + + +

+ {service.title} +

+ {service.description} +

+ + {isExpanded && ( + +

+ {service.details} +

+ {Array.isArray(service.features) && service.features.map((feature, idx) => ( + + {feature} + + ))} +

+ + )} + + + {!isExpanded && isHovered && ( + +

+ {service.details.split(' - ')[0]} +

+ {Array.isArray(service.features) && service.features.slice(0, 2).map((feature, idx) => ( + + {feature} + + ))} +

+ + )} + +

+ {isHovered && !isExpanded && ( + + )} + {isExpanded && ( + + )} + + ); + })} + +

+ + + +

+ {Array.from({ length: totalPages }).map((_, idx) => ( + { + const newExpandedState = {}; + visibleServices.forEach(service => { + newExpandedState[service.id] = false; + }); + setExpandedCards(newExpandedState); + setPage(idx); + }} + className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${ + page === idx + ? 'bg-gradient-to-r from-[#3c5ee3] to-[#2ecc71] text-white shadow-lg scale-110' + : 'bg-white/80 text-gray-600 hover:bg-white' + }`} + > + {idx + 1} + + ))} +

+ + + +

+ + {t('tradesafe.buttons.page', { current: page + 1, total: totalPages })} + +

+ + + + + +

+ +

+ + + {t('tradesafe.reasons.title')} + + +

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

+ + {reason.icon} + + +

+ {reason.text} +

+ {reason.description} +

+ + + + ))} +

+ +

+ {t('tradesafe.reasons.cta.title')} +

+ {t('tradesafe.reasons.cta.subtitle')} +

+ + + {t('tradesafe.buttons.startNow')} + + + + {t('tradesafe.buttons.viewPresentation')} + +

+ +

+ + + + ); +}; + +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..1112fcf --- /dev/null +++ b/src/i18n.js @@ -0,0 +1,952 @@ +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: "Ready to serve you around the clock", + 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 start your international trade journey with confidence", + name: "Name", + namePlaceholder: "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", + contactSection: { + title: "Ready to serve you around the clock", + description: "Our team is available to answer your inquiries and provide the best solutions for your projects", + badges: [ + "Direct call", + "Technical support", + "Quick response", + "Integrated solutions" + ] + } + }, + tradesafe: { + subtitle: "An innovative platform connecting traders with customs brokers and shipping companies to simplify international trade operations", + services: { + title: "TradeSafe Services", + platform: { + title: "International Trade Platform", + description: "Connecting traders with logistics service providers", + details: "Create requests easily - Receive multiple offers - Direct communication with providers - Comprehensive rating system", + features: ["Create Requests", "Multiple Offers", "Direct Chat", "Rating System"] + }, + orders: { + title: "Order Management", + description: "Track your shipments in real-time", + details: "Monitor shipment status - Instant updates - Detailed reports - Complete records", + features: ["Live Tracking", "Instant Updates", "Detailed Reports", "Records"] + }, + communication: { + title: "Direct Communication", + description: "In-app chat with partners", + details: "Instant communication with customs brokers - Chat with shipping companies - Document sharing - Conversation history saving", + features: ["Instant Chat", "File Sharing", "Chat History", "Notifications"] + }, + notifications: { + title: "Instant Notifications", + description: "Stay updated with all updates", + details: "New offer notifications - Order status updates - Partner messages - Payment alerts", + features: ["New Offers", "Status Updates", "Partner Messages", "Alerts"] + }, + dashboard: { + title: "Smart Dashboard", + description: "Smart tools for decision making", + details: "Market analysis - Performance reports - Key performance indicators - AI-based recommendations", + features: ["Market Analysis", "Performance Reports", "KPIs", "Smart Recommendations"] + }, + solutions: { + title: "Integrated Solutions", + description: "Secure payment and additional features", + details: "Integrated payment systems - Technical support - AI assistance - Custom reports", + features: ["Secure Payment", "Technical Support", "AI Assistance", "Custom Reports"] + }, + speed: { + title: "Speed and Efficiency", + description: "Fast performance and simplified interface", + details: "Improved user interface - Faster task completion - Smooth user experience - High performance", + features: ["Fast Interface", "Faster Completion", "Smooth Experience", "High Performance"] + }, + network: { + title: "Partner Network", + description: "Connection with multiple service providers", + details: "Certified customs clearance companies - Reliable shipping companies - Diverse service providers - Global network", + features: ["Certified Brokers", "Shipping Companies", "Diverse Providers", "Global Network"] + } + }, + reasons: { + title: "Why Choose TradeSafe?", + speed: { + text: "Speed of performance and response", + description: "30% faster interface for completing tasks" + }, + reliability: { + text: "High reliability and security", + description: "Secure payment systems and data protection" + }, + connection: { + text: "Global connection", + description: "Network of international service providers" + }, + communication: { + text: "Direct communication", + description: "Instant chat with all parties" + }, + time: { + text: "Time saving", + description: "Managing international trade in a few clicks" + }, + solutions: { + text: "Integrated solutions", + description: "Comprehensive platform for all trade needs" + }, + cta: { + title: "International trade experience in your pocket", + subtitle: "Join the TradeSafe platform now and enjoy all the benefits of managing international trade easily and quickly", + start: "Start Now", + presentation: "View Presentation" + } + }, + buttons: { + expandAll: "Expand All Cards", + collapseAll: "Collapse All Cards", + showDetails: "Show All Details", + next: "Next", + prev: "Previous", + page: "Page {{current}} of {{total}}", + startNow: "Start Now", + viewPresentation: "View Presentation" + } + } + } + }, + + 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: "الاسم", + namePlaceholder: "أدخل اسمك", + emailPlaceholder: "example@example.com", + message: "الرسالة", + messagePlaceholder: "اكتب رسالتك هنا", + send: "إرسال", + successMessage: "تم إرسال الرسالة بنجاح", + errorMessage: "حدث خطأ أثناء الإرسال", + contactSection: { + title: "مستعدون لخدمتك على مدار الساعة", + description: "فريقنا متاح للإجابة على استفساراتك وتقديم أفضل الحلول لمشاريعك", + badges: [ + "اتصال مباشر", + "دعم فني", + "استجابة سريعة", + "حلول متكاملة" + ] + } + }, + tradesafe: { + subtitle: "منصة مبتكرة تربط التجار مع الوسطاء الجمركيين وشركات الشحن لتبسيط عمليات التجارة الدولية", + services: { + title: "خدمات TradeSafe", + platform: { + title: "منصة التجارة الدولية", + description: "ربط التجار مع مقدمي الخدمات اللوجستية", + details: "أنشئ طلبات بسهولة - استقبال عروض متعددة - تواصل مباشر مع المزودين - نظام تقييم شامل", + features: ["إنشاء الطلبات", "عروض متعددة", "دردشة مباشرة", "نظام التقييم"] + }, + orders: { + title: "إدارة الطلبات", + description: "تتبع شحناتك في الوقت الفعلي", + details: "مراقبة حالة الشحن - تحديثات فورية - تقارير مفصلة - سجلات كاملة", + features: ["تتبع حي", "تحديثات فورية", "تقارير مفصلة", "السجلات"] + }, + communication: { + title: "التواصل المباشر", + description: "دردشة داخل التطبيق مع الشركاء", + details: "تواصل فوري مع الوسطاء الجمركيين - دردشة مع شركات الشحن - مشاركة المستندات - حفظ تاريخ المحادثات", + features: ["دردشة فورية", "مشاركة الملفات", "تواريخ المحادثات", "إشعارات"] + }, + notifications: { + title: "الإشعارات الفورية", + description: "كن على اطلاع بكل التحديثات", + details: "إشعارات العروض الجديدة - تحديثات حالة الطلبات - رسائل الشركاء - تنبيهات الدفع", + features: ["عروض جديدة", "تحديثات الحالة", "رسائل الشركاء", "تنبيهات"] + }, + dashboard: { + title: "لوحة التحكم الذكية", + description: "أدوات ذكية لاتخاذ القرارات", + details: "تحليلات السوق - تقارير الأداء - مؤشرات الأداء الرئيسية", + features: ["تحليلات السوق", "تقارير الأداء", "مؤشرات الأداء", "توصيات ذكية"] + }, + solutions: { + title: "الحلول المتكاملة", + description: "دفع آمن ومميزات إضافية", + details: "أنظمة دفع متكاملة - دعم فني - تقارير مخصصة", + features: ["دفع آمن", "دعم فني", "تقارير مخصصة"] + }, + speed: { + title: "السرعة والكفاءة", + description: "أداء سريع وواجهة مبسطة", + details: "واجهة مستخدم محسنة - إنجاز المهام بشكل أسرع - تجربة مستخدم سلسة - أداء عالي", + features: ["واجهة سريعة", "إنجاز أسرع", "تجربة سلسة", "أداء عالي"] + }, + network: { + title: "شبكة الشركاء", + description: "اتصال مع مزودي خدمات متعددين", + details: "شركات تخليص جمركي معتمدة - شركات شحن موثوقة - مزودي خدمات متنوعين - شبكة عالمية", + features: ["وسطاء معتمدون", "شركات شحن", "مزودون متنوعون", "شبكة عالمية"] + } + }, + reasons: { + title: "لماذا تختار TradeSafe؟", + speed: { + text: "سرعة الأداء والاستجابة", + description: "واجهة أسرع بنسبة 30% لإنجاز المهام" + }, + reliability: { + text: "موثوقية وأمان عالي", + description: "أنظمة دفع آمنة وحماية للبيانات" + }, + connection: { + text: "اتصال عالمي", + description: "شبكة من مقدمي الخدمات الدوليين" + }, + communication: { + text: "تواصل مباشر", + description: "دردشة فورية مع جميع الأطراف" + }, + time: { + text: "توفير الوقت", + description: "إدارة التجارة الدولية في بضع نقرات" + }, + solutions: { + text: "حلول متكاملة", + description: "منصة شاملة لجميع احتياجات التجارة" + }, + cta: { + title: "تجربة التجارة الدولية في جيبك", + subtitle: "انضم إلى منصة TradeSafe الآن وتمتع بجميع مزايا إدارة التجارة الدولية بسهولة وسرعة", + start: "ابدأ الآن", + presentation: "شاهد عرض تقديمي" + } + }, + buttons: { + expandAll: "فتح جميع البطاقات", + collapseAll: "طي جميع البطاقات", + showDetails: "عرض جميع التفاصيل", + next: "التالي", + prev: "السابق", + page: "الصفحة {{current}} من {{total}}", + startNow: "ابدأ الآن", + viewPresentation: "شاهد عرض تقديمي" + } + } + } + }, + + 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: "Bereit, Ihnen rund um die Uhr zu dienen", + 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 beginnen Sie Ihre internationale Handelsreise mit Vertrauen", + name: "Name", + namePlaceholder: "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", + contactSection: { + title: "Bereit, Ihnen rund um die Uhr zu dienen", + description: "Unser Team ist verfügbar, um Ihre Anfragen zu beantworten und die besten Lösungen für Ihre Projekte zu bieten", + badges: [ + "Direkter Anruf", + "Technischer Support", + "Schnelle Reaktion", + "Integrierte Lösungen" + ] + } + }, + + tradesafe: { + subtitle: "Eine innovative Plattform, die Händler mit Zollmaklern und Reedereien verbindet, um den internationalen Handel zu vereinfachen", + services: { + title: "TradeSafe Dienstleistungen", + platform: { + title: "Internationale Handelsplattform", + description: "Verknüpfen Sie Händler mit Logistikdienstleistern", + details: "Erstellen Sie Anfragen einfach - Erhalten Sie mehrere Angebote - Direkte Kommunikation mit Anbietern - Umfassendes Bewertungssystem", + features: ["Anfragen Erstellen", "Mehrere Angebote", "Direkter Chat", "Bewertungssystem"] + }, + orders: { + title: "Auftragsverwaltung", + description: "Verfolgen Sie Ihre Sendungen in Echtzeit", + details: "Überwachen Sie den Sendungsstatus - Sofortige Updates - Detaillierte Berichte - Vollständige Aufzeichnungen", + features: ["Live-Verfolgung", "Sofortige Updates", "Detaillierte Berichte", "Aufzeichnungen"] + }, + communication: { + title: "Direkte Kommunikation", + description: "Chat innerhalb der App mit Partnern", + details: "Sofortige Kommunikation mit Zollmaklern - Chat mit Reedereien - Dokumentenaustausch - Gesprächsverlauf speichern", + features: ["Sofort-Chat", "Dateiaustausch", "Chat-Verlauf", "Benachrichtigungen"] + }, + notifications: { + title: "Sofortige Benachrichtigungen", + description: "Bleiben Sie über alle Updates informiert", + details: "Benachrichtigungen über neue Angebote - Updates zum Auftragsstatus - Nachrichten von Partnern - Zahlungsbenachrichtigungen", + features: ["Neue Angebote", "Status-Updates", "Partner-Nachrichten", "Warnungen"] + }, + dashboard: { + title: "Intelligentes Dashboard", + description: "Intelligente Tools für Entscheidungen", + details: "Marktanalyse - Leistungsberichte - Wichtige Leistungskennzahlen", + features: ["Marktanalyse", "Leistungsberichte", "KPIs"] + }, + solutions: { + title: "Integrierte Lösungen", + description: "Sichere Zahlung und Zusatzfunktionen", + details: "Integrierte Zahlungssysteme - Technischer Support - Benutzerdefinierte Berichte", + features: ["Sichere Zahlung", "Technischer Support", "Benutzerdefinierte Berichte"] + }, + speed: { + title: "Geschwindigkeit und Effizienz", + description: "Schnelle Leistung und vereinfachte Schnittstelle", + details: "Verbesserte Benutzeroberfläche - Schnellere Aufgabenbearbeitung - Nahtloses Nutzererlebnis - Hohe Leistung", + features: ["Schnelle Schnittstelle", "Schnellere Bearbeitung", "Nahtloses Erlebnis", "Hohe Leistung"] + }, + network: { + title: "Partnernetzwerk", + description: "Verbindung mit mehreren Dienstleistern", + details: "Zertifizierte Zollabfertigungsunternehmen - Zuverlässige Reedereien - Vielfältige Dienstleister - Globales Netzwerk", + features: ["Zertifizierte Makler", "Reedereien", "Vielfältige Anbieter", "Globales Netzwerk"] + } + }, + reasons: { + title: "Warum TradeSafe wählen?", + speed: { + text: "Geschwindigkeit der Leistung und Reaktion", + description: "30 % schnellere Oberfläche für Aufgabenbearbeitung" + }, + reliability: { + text: "Hohe Zuverlässigkeit und Sicherheit", + description: "Sichere Zahlungssysteme und Datenschutz" + }, + connection: { + text: "Globale Verbindung", + description: "Netzwerk internationaler Dienstleister" + }, + communication: { + text: "Direkte Kommunikation", + description: "Sofortiger Chat mit allen Parteien" + }, + time: { + text: "Zeitersparnis", + description: "Internationalen Handel mit wenigen Klicks verwalten" + }, + solutions: { + text: "Integrierte Lösungen", + description: "Umfassende Plattform für alle Handelsbedürfnisse" + }, + cta: { + title: "Internationale Handelserfahrung in Ihrer Tasche", + subtitle: "Treten Sie jetzt der TradeSafe-Plattform bei und genießen Sie alle Vorteile der einfachen und schnellen Verwaltung des internationalen Handels", + start: "Jetzt Starten", + presentation: "Präsentation Ansehen" + } + }, + buttons: { + expandAll: "Alle Karten Erweitern", + collapseAll: "Alle Karten Einklappen", + showDetails: "Alle Details Anzeigen", + next: "Weiter", + prev: "Zurück", + page: "Seite {{current}} von {{total}}", + startNow: "Jetzt Starten", + viewPresentation: "Präsentation Ansehen" + } + } + } + }, + + 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: "姓名", + namePlaceholder: "输入您的姓名", + emailPlaceholder: "example@example.com", + message: "消息", + messagePlaceholder: "在此写下您的消息", + send: "发送", + successMessage: "消息发送成功", + errorMessage: "发送时发生错误", + contactSection: { + title: "随时准备为您服务", + description: "我们的团队随时准备回答您的疑问并为您的项目提供最佳解决方案", + badges: [ + "直接通话", + "技术支持", + "快速响应", + "综合解决方案" + ] + } + }, + + tradesafe: { + subtitle: "连接贸易商与海关代理和航运公司的创新平台，简化国际贸易操作", + services: { + title: "TradeSafe 服务", + platform: { + title: "国际贸易平台", + description: "连接贸易商与物流服务提供商", + details: "轻松创建请求 - 接收多个报价 - 直接与供应商沟通 - 全面的评级系统", + features: ["创建请求", "多个报价", "直接聊天", "评级系统"] + }, + orders: { + title: "订单管理", + description: "实时跟踪您的货物", + details: "监控货物状态 - 即时更新 - 详细报告 - 完整记录", + features: ["实时跟踪", "即时更新", "详细报告", "记录"] + }, + communication: { + title: "直接沟通", + description: "与合作伙伴的应用内聊天", + details: "与海关代理即时沟通 - 与航运公司聊天 - 文件共享 - 保存聊天历史", + features: ["即时聊天", "文件共享", "聊天历史", "通知"] + }, + notifications: { + title: "即时通知", + description: "随时了解所有更新", + details: "新报价通知 - 订单状态更新 - 合作伙伴消息 - 付款提醒", + features: ["新报价", "状态更新", "合作伙伴消息", "提醒"] + }, + dashboard: { + title: "智能仪表板", + description: "决策的智能工具", + details: "市场分析 - 绩效报告 - 关键绩效指标 ", + features: ["市场分析", "绩效报告", "关键绩效指标"] + }, + solutions: { + title: "综合解决方案", + description: "安全支付和附加功能", + details: "集成支付系统 - 技术支持 - 自定义报告", + features: ["安全支付", "技术支持", "自定义报告"] + }, + speed: { + title: "速度和效率", + description: "快速性能和简化界面", + details: "改进的用户界面 - 更快的任务完成 - 流畅的用户体验 - 高性能", + features: ["快速界面", "更快完成", "流畅体验", "高性能"] + }, + network: { + title: "合作伙伴网络", + description: "与多个服务提供商连接", + details: "认证的清关公司 - 可靠的航运公司 - 多样化的服务提供商 - 全球网络", + features: ["认证经纪人", "航运公司", "多样化提供商", "全球网络"] + } + }, + reasons: { + title: "为什么选择TradeSafe？", + speed: { + text: "性能和响应速度", + description: "完成任务速度快30%的界面" + }, + reliability: { + text: "高可靠性和安全性", + description: "安全支付系统和数据保护" + }, + connection: { + text: "全球连接", + description: "国际服务提供商网络" + }, + communication: { + text: "直接沟通", + description: "与所有方即时聊天" + }, + time: { + text: "节省时间", + description: "点击几下即可管理国际贸易" + }, + solutions: { + text: "综合解决方案", + description: "满足所有贸易需求的综合平台" + }, + cta: { + title: "口袋中的国际贸易体验", + subtitle: "立即加入TradeSafe平台，享受轻松快速管理国际贸易的所有好处", + start: "立即开始", + presentation: "查看演示" + } + }, + buttons: { + expandAll: "展开所有卡片", + collapseAll: "折叠所有卡片", + showDetails: "显示所有详情", + next: "下一页", + prev: "上一页", + page: "第 {{current}} 页，共 {{total}} 页", + startNow: "立即开始", + viewPresentation: "查看演示" + } + } + } + }, + + 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: "Prêts à vous servir 24h/24", + 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 commencez votre voyage dans le commerce international avec confiance", + name: "Nom", + namePlaceholder: "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", + contactSection: { + title: "Prêts à vous servir 24h/24", + description: "Notre équipe est disponible pour répondre à vos questions et fournir les meilleures solutions pour vos projets", + badges: [ + "Appel direct", + "Support technique", + "Réponse rapide", + "Solutions intégrées" + ] + } + }, + + + tradesafe: { + subtitle: "Une plateforme innovante qui relie les commerçants aux courtiers en douane et aux compagnies maritimes pour simplifier les opérations de commerce international", + services: { + title: "Services TradeSafe", + platform: { + title: "Plateforme de Commerce International", + description: "Relier les commerçants aux prestataires de services logistiques", + details: "Créez des demandes facilement - Recevez plusieurs offres - Communication directe avec les fournisseurs - Système d'évaluation complet", + features: ["Créer des Demandes", "Offres Multiples", "Chat Direct", "Système d'Évaluation"] + }, + orders: { + title: "Gestion des Commandes", + description: "Suivez vos expéditions en temps réel", + details: "Surveillez l'état de l'expédition - Mises à jour instantanées - Rapports détaillés - Archives complètes", + features: ["Suivi en Direct", "Mises à Jour Instantanées", "Rapports Détaillés", "Archives"] + }, + communication: { + title: "Communication Directe", + description: "Chat dans l'application avec les partenaires", + details: "Communication instantanée avec les courtiers en douane - Chat avec les compagnies maritimes - Partage de documents - Sauvegarde de l'historique des conversations", + features: ["Chat Instantané", "Partage de Fichiers", "Historique des Chats", "Notifications"] + }, + notifications: { + title: "Notifications Instantanées", + description: "Restez informé de toutes les mises à jour", + details: "Notifications de nouvelles offres - Mises à jour de l'état des commandes - Messages des partenaires - Alertes de paiement", + features: ["Nouvelles Offres", "Mises à Jour de Statut", "Messages des Partenaires", "Alertes"] + }, + dashboard: { + title: "Tableau de Bord Intelligent", + description: "Outils intelligents pour la prise de décision", + details: "Analyse du marché - Rapports de performance - Indicateurs clés de performance", + features: ["Analyse du Marché", "Rapports de Performance", "ICP"] + }, + solutions: { + title: "Solutions Intégrées", + description: "Paiement sécurisé et fonctionnalités supplémentaires", + details: "Systèmes de paiement intégrés - Support technique - Rapports personnalisés", + features: ["Paiement Sécurisé", "Support Technique", "Rapports Personnalisés"] + }, + speed: { + title: "Vitesse et Efficacité", + description: "Performances rapides et interface simplifiée", + details: "Interface utilisateur améliorée - Achèvement plus rapide des tâches - Expérience utilisateur fluide - Haute performance", + features: ["Interface Rapide", "Achèvement Plus Rapide", "Expérience Fluide", "Haute Performance"] + }, + network: { + title: "Réseau de Partenaires", + description: "Connexion avec plusieurs prestataires de services", + details: "Sociétés de dédouanement certifiées - Compagnies maritimes fiables - Prestataires de services diversifiés - Réseau mondial", + features: ["Courtiers Certifiés", "Compagnies Maritimes", "Prestataires Diversifiés", "Réseau Mondial"] + } + }, + reasons: { + title: "Pourquoi choisir TradeSafe ?", + speed: { + text: "Vitesse des performances et de la réponse", + description: "Interface 30% plus rapide pour accomplir les tâches" + }, + reliability: { + text: "Fiabilité et sécurité élevées", + description: "Systèmes de paiement sécurisés et protection des données" + }, + connection: { + text: "Connexion mondiale", + description: "Réseau de prestataires de services internationaux" + }, + communication: { + text: "Communication directe", + description: "Chat instantané avec toutes les parties" + }, + time: { + text: "Économie de temps", + description: "Gestion du commerce international en quelques clics" + }, + solutions: { + text: "Solutions intégrées", + description: "Plateforme complète pour tous les besoins commerciaux" + }, + cta: { + title: "Expérience du commerce international dans votre poche", + subtitle: "Rejoignez la plateforme TradeSafe dès maintenant et profitez de tous les avantages de la gestion du commerce international facilement et rapidement", + start: "Commencer Maintenant", + presentation: "Voir la Présentation" + } + }, + buttons: { + expandAll: "Développer Toutes les Cartes", + collapseAll: "Réduire Toutes les Cartes", + showDetails: "Afficher Tous les Détails", + next: "Suivant", + prev: "Précédent", + page: "Page {{current}} sur {{total}}", + startNow: "Commencer Maintenant", + viewPresentation: "Voir la Présentation" + } + } + } + }, + + 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", + namePlaceholder: "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", + }, + + tradesafe: { + subtitle: "Una piattaforma innovativa che collega i commercianti con agenti doganali e compagnie di spedizione per semplificare le operazioni di commercio internazionale", + services: { + title: "Servizi TradeSafe", + platform: { + title: "Piattaforma di Commercio Internazionale", + description: "Collega i commercianti con i fornitori di servizi logistici", + details: "Crea richieste facilmente - Ricevi più offerte - Comunicazione diretta con i fornitori - Sistema di valutazione completo", + features: ["Crea Richieste", "Offerte Multiple", "Chat Diretta", "Sistema di Valutazione"] + }, + orders: { + title: "Gestione Ordini", + description: "Traccia le tue spedizioni in tempo reale", + details: "Monitora lo stato della spedizione - Aggiornamenti istantanei - Report dettagliati - Registri completi", + features: ["Tracciamento Live", "Aggiornamenti Istantanei", "Report Dettagliati", "Registri"] + }, + communication: { + title: "Comunicazione Diretta", + description: "Chat nell'app con i partner", + details: "Comunicazione istantanea con gli agenti doganali - Chat con le compagnie di spedizione - Condivisione documenti - Salvataggio cronologia conversazioni", + features: ["Chat Istantanea", "Condivisione File", "Cronologia Chat", "Notifiche"] + }, + notifications: { + title: "Notifiche Istantanee", + description: "Rimani aggiornato su tutti gli aggiornamenti", + details: "Notifiche nuove offerte - Aggiornamenti stato ordini - Messaggi partner - Avvisi pagamento", + features: ["Nuove Offerte", "Aggiornamenti Stato", "Messaggi Partner", "Avvisi"] + }, + dashboard: { + title: "Dashboard Intelligente", + description: "Strumenti intelligenti per il processo decisionale", + details: "Analisi di mercato - Report prestazioni - Indicatori chiave di prestazione", + features: ["Analisi di Mercato", "Report Prestazioni", "KPI"] + }, + solutions: { + title: "Soluzioni Integrate", + description: "Pagamento sicuro e funzionalità aggiuntive", + details: "Sistemi di pagamento integrati - Supporto tecnico - Report personalizzati", + features: ["Pagamento Sicuro", "Supporto Tecnico", "Report Personalizzati"] + }, + speed: { + title: "Velocità ed Efficienza", + description: "Prestazioni veloci e interfaccia semplificata", + details: "Interfaccia utente migliorata - Completamento attività più veloce - Esperienza utente fluida - Alte prestazioni", + features: ["Interfaccia Veloce", "Completamento Più Veloce", "Esperienza Fluida", "Alte Prestazioni"] + }, + network: { + title: "Rete di Partner", + description: "Connessione con più fornitori di servizi", + details: "Società di sdoganamento certificate - Compagnie di spedizione affidabili - Fornitori di servizi diversificati - Rete globale", + features: ["Agenti Certificati", "Compagnie di Spedizione", "Fornitori Diversificati", "Rete Globale"] + } + }, + reasons: { + title: "Perché scegliere TradeSafe?", + speed: { + text: "Velocità delle prestazioni e della risposta", + description: "Interfaccia 30% più veloce per completare le attività" + }, + reliability: { + text: "Alta affidabilità e sicurezza", + description: "Sistemi di pagamento sicuri e protezione dei dati" + }, + connection: { + text: "Connessione globale", + description: "Rete di fornitori di servizi internazionali" + }, + communication: { + text: "Comunicazione diretta", + description: "Chat istantanea con tutte le parti" + }, + time: { + text: "Risparmio di tempo", + description: "Gestione del commercio internazionale in pochi clic" + }, + solutions: { + text: "Soluzioni integrate", + description: "Piattaforma completa per tutte le esigenze commerciali" + }, + cta: { + title: "Esperienza di commercio internazionale in tasca", + subtitle: "Unisciti ora alla piattaforma TradeSafe e goditi tutti i vantaggi della gestione del commercio internazionale in modo facile e veloce", + start: "Inizia Ora", + presentation: "Visualizza Presentazione" + } + }, + buttons: { + expandAll: "Espandi Tutte le Carte", + collapseAll: "Comprimi Tutte le Carte", + showDetails: "Mostra Tutti i Dettagli", + next: "Avanti", + prev: "Indietro", + page: "Pagina {{current}} di {{total}}", + startNow: "Inizia Ora", + viewPresentation: "Visualizza Presentazione" + } + } + } + } +}; + +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()], +})