Initial commit REXNT project
This commit is contained in:
Rahaf
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
16
README.md
Normal file
16
README.md
Normal file
@ -0,0 +1,16 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
29
eslint.config.js
Normal file
29
eslint.config.js
Normal file
@ -0,0 +1,29 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
])
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>rexnt</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4562
package-lock.json
generated
Normal file
4562
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
package.json
Normal file
41
package.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "rexnt",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emailjs/browser": "^4.4.1",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"aos": "^2.3.4",
|
||||
"framer-motion": "^12.23.26",
|
||||
"i18next": "^25.7.3",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"lucide-react": "^0.562.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-i18next": "^16.5.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-scroll": "^1.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
public/trader-safe.pdf
Normal file
BIN
public/trader-safe.pdf
Normal file
Binary file not shown.
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
0
src/App.css
Normal file
0
src/App.css
Normal file
26
src/App.jsx
Normal file
26
src/App.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import "./i18n"; // Import i18n configuration
|
||||
import Navbar from "./Components/Nav/Navbar";
|
||||
import Home from "./Components/Sections/Home/Home";
|
||||
import Services from "./Components/Sections/Services/Services";
|
||||
import About from "./Components/Sections/About/About";
|
||||
import Contact from "./Components/Sections/Contact/Contact";
|
||||
import ImagePreloader from "./Components/ImagePreloader";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ImagePreloader>
|
||||
<div className="App">
|
||||
<Navbar />
|
||||
<Home />
|
||||
<Services />
|
||||
<About />
|
||||
<Contact />
|
||||
</div>
|
||||
</ImagePreloader>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
//test
|
||||
336
src/Components/ImagePreloader.jsx
Normal file
336
src/Components/ImagePreloader.jsx
Normal file
@ -0,0 +1,336 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
// Import all images statically
|
||||
// import home1 from "../assets/home1.jpg";
|
||||
// import home1Mobile from "../assets/home1-2.jpg";
|
||||
// import home2 from "../assets/home2.jpg";
|
||||
// import home2Mobile from "../assets/home2-2.jpg";
|
||||
// import home3 from "../assets/home3.png";
|
||||
// import home4 from "../assets/home4.png";
|
||||
// // import home4Mobile from "../assets/home4-2.jpg";
|
||||
// import home5 from "../assets/home5.png";
|
||||
// import home6 from "../assets/home6.jpg";
|
||||
// import home6Mobile from "../assets/home6-2.jpg";
|
||||
// import home7 from "../assets/home7.jpg";
|
||||
// import home7Mobile from "../assets/home7-2.jpg";
|
||||
// import home8 from "../assets/home8.jpg";
|
||||
// import home8Mobile from "../assets/home8-2.jpg";
|
||||
// import home9 from "../assets/home9.jpg";
|
||||
// import home10 from "../assets/home10.jpg";
|
||||
|
||||
// Services images
|
||||
import gasStation from "../assets/Images/gasstation.jpg";
|
||||
|
||||
|
||||
// List all critical images that need to be preloaded
|
||||
const imagesToPreload = [
|
||||
// Home images
|
||||
// home1,
|
||||
// home1Mobile,
|
||||
// home2,
|
||||
// home2Mobile,
|
||||
// home3,
|
||||
// home4,
|
||||
// home4Mobile,
|
||||
// home5,
|
||||
// home6,
|
||||
// home6Mobile,
|
||||
// home7,
|
||||
// home7Mobile,
|
||||
// home8,
|
||||
// home8Mobile,
|
||||
// home9,
|
||||
// home10,
|
||||
// Services images
|
||||
gasStation,
|
||||
|
||||
];
|
||||
|
||||
const ImagePreloader = ({ children }) => {
|
||||
const [imagesLoaded, setImagesLoaded] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
let loadedCount = 0;
|
||||
const totalImages = imagesToPreload.length;
|
||||
|
||||
const preloadImages = async () => {
|
||||
try {
|
||||
const loadImage = (src) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.src = src;
|
||||
img.onload = () => {
|
||||
loadedCount++;
|
||||
setProgress(Math.floor((loadedCount / totalImages) * 100));
|
||||
resolve();
|
||||
};
|
||||
img.onerror = reject;
|
||||
});
|
||||
};
|
||||
|
||||
await Promise.all(imagesToPreload.map(loadImage));
|
||||
setImagesLoaded(true);
|
||||
} catch (error) {
|
||||
console.error("Failed to preload images:", error);
|
||||
// Continue anyway after a timeout
|
||||
setTimeout(() => setImagesLoaded(true), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
preloadImages();
|
||||
}, []);
|
||||
|
||||
if (!imagesLoaded) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
|
||||
{/* Animated background effect */}
|
||||
<div className="absolute inset-0 overflow-hidden opacity-10">
|
||||
<div className="absolute top-0 left-0 w-full h-full">
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-white/30"
|
||||
style={{
|
||||
width: `${Math.random() * 10 + 5}px`,
|
||||
height: `${Math.random() * 10 + 5}px`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
animationDuration: `${Math.random() * 10 + 10}s`,
|
||||
animationDelay: `${Math.random() * 5}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company logo or branding could go here */}
|
||||
<div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
|
||||
TPS
|
||||
</div>
|
||||
|
||||
{/* 3D-style Fuel Tank */}
|
||||
<div className="relative w-72 h-56 mb-8 perspective-800">
|
||||
{/* Tank body with 3D effect */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
|
||||
style={{
|
||||
background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
|
||||
boxShadow:
|
||||
"inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
}}
|
||||
>
|
||||
{/* Glass effect overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
|
||||
|
||||
{/* Tank Cap with metallic effect */}
|
||||
<div
|
||||
className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
|
||||
boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{/* Fuel Level with dynamic wave effect */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
|
||||
style={{
|
||||
height: `${progress}%`,
|
||||
background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
|
||||
boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
|
||||
}}
|
||||
>
|
||||
{/* Animated wave effect at the top of fuel */}
|
||||
<div className="absolute -top-2 left-0 w-full h-4 animate-wave">
|
||||
<div
|
||||
className="relative w-[200%] h-full"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
|
||||
backgroundSize: "50% 100%",
|
||||
animation: "moveWave 3s linear infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* Bubbles with varied animations */}
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-white/20"
|
||||
style={{
|
||||
width: `${Math.random() * 6 + 2}px`,
|
||||
height: `${Math.random() * 6 + 2}px`,
|
||||
bottom: `${Math.random() * 80}%`,
|
||||
left: `${Math.random() * 90 + 5}%`,
|
||||
animation: `bubble ${
|
||||
Math.random() * 3 + 2
|
||||
}s ease-in infinite ${Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tank level markings with glow effect */}
|
||||
<div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-full border-b border-[#F3C623]/20 h-1/4"
|
||||
style={{
|
||||
boxShadow:
|
||||
progress > 75 - i * 25
|
||||
? "0 1px 3px rgba(243,198,35,0.3)"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fuel Gauge with realistic dial */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
|
||||
boxShadow:
|
||||
"inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
|
||||
border: "2px solid rgba(235,131,23,0.7)",
|
||||
}}
|
||||
>
|
||||
{/* Gauge markings */}
|
||||
{[...Array(9)].map((_, i) => {
|
||||
const rotation = -135 + i * 30;
|
||||
const isLarge = i % 2 === 0;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`absolute w-${isLarge ? "1.5" : "1"} h-${
|
||||
isLarge ? "3" : "2"
|
||||
} bg-[#F3C623]/${isLarge ? "70" : "40"}`}
|
||||
style={{
|
||||
transform: `rotate(${rotation}deg) translateY(-7px)`,
|
||||
transformOrigin: "bottom center",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Gauge needle with smooth animation */}
|
||||
<div
|
||||
className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
|
||||
style={{
|
||||
transform: `rotate(${-135 + progress * 2.7}deg)`,
|
||||
transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
||||
boxShadow: "0 0 5px rgba(243,198,35,0.5)",
|
||||
}}
|
||||
>
|
||||
<div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
|
||||
</div>
|
||||
|
||||
{/* Center pin */}
|
||||
<div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
|
||||
|
||||
{/* E and F indicators */}
|
||||
<div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
E
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
|
||||
F
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress indicator with animated glow */}
|
||||
<div className="relative">
|
||||
<p
|
||||
className="text-white text-2xl font-bold"
|
||||
style={{
|
||||
textShadow: "0 0 10px rgba(255,255,255,0.3)",
|
||||
}}
|
||||
>
|
||||
{progress}%
|
||||
</p>
|
||||
<div
|
||||
className="absolute -inset-4 rounded-full opacity-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
|
||||
animation: "pulse 2s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<p className="mt-2 text-gray-300 font-medium tracking-wide">
|
||||
Filling your tank...
|
||||
</p>
|
||||
|
||||
{/* Advanced animations */}
|
||||
{/* <style jsx>{`
|
||||
@keyframes bubble {
|
||||
0% {
|
||||
transform: translateY(0) scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-10px) scale(1);
|
||||
}
|
||||
80% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(-30px) scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-40px) scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveWave {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.perspective-800 {
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.animate-wave {
|
||||
overflow: hidden;
|
||||
}
|
||||
`}</style> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default ImagePreloader;
|
||||
87
src/Components/LanguageSwitcher/LanguageSwitcher.jsx
Normal file
87
src/Components/LanguageSwitcher/LanguageSwitcher.jsx
Normal file
@ -0,0 +1,87 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import ukFlag from "../../assets/uk-flag.svg";
|
||||
import deFlag from "../../assets/de-flag.svg";
|
||||
import arFlag from "../../assets/syriaflag.svg";
|
||||
import frFlag from "../../assets/france-flag-icon.svg";
|
||||
import itFlag from "../../assets/italy-flag-icon.svg";
|
||||
import cnFlag from "../../assets/china-flag-icon.svg";
|
||||
|
||||
const LanguageSwitcher = () => {
|
||||
const { i18n } = useTranslation();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const languages = [
|
||||
{ code: "en", name: "English", flag: ukFlag },
|
||||
{ code: "ar", name: "العربية", flag: arFlag },
|
||||
{ code: "de", name: "Deutsch", flag: deFlag },
|
||||
{ code: "zh", name: "中文", flag: cnFlag },
|
||||
{ code: "fr", name: "Français", flag: frFlag },
|
||||
{ code: "it", name: "Italiano", flag: itFlag },
|
||||
];
|
||||
|
||||
const currentLanguage =
|
||||
languages.find((lang) => lang.code === i18n.language) || languages[0];
|
||||
|
||||
const changeLanguage = (langCode) => {
|
||||
i18n.changeLanguage(langCode);
|
||||
setIsOpen(false);
|
||||
|
||||
if (langCode === "ar") {
|
||||
document.documentElement.dir = "rtl";
|
||||
document.documentElement.lang = "ar";
|
||||
} else {
|
||||
document.documentElement.dir = "ltr";
|
||||
document.documentElement.lang = langCode;
|
||||
}
|
||||
};
|
||||
|
||||
const menuPosition =
|
||||
document.documentElement.dir === "rtl" ? "left-0" : "right-0"; // toggle position based on dir
|
||||
|
||||
return (
|
||||
<div className="relative inline-block text-left">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="inline-flex items-center font-bold text-lg px-3 py-2 text-white rounded-lg cursor-pointer hover:bg-gray-100/10 dark:hover:bg-gray-700 transition"
|
||||
>
|
||||
<img
|
||||
src={currentLanguage.flag}
|
||||
alt={currentLanguage.name}
|
||||
className="w-10 h-6"
|
||||
/>
|
||||
<span className="hidden sm:inline ms-2">{currentLanguage.name}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div
|
||||
className={`absolute top-12 ${menuPosition} z-50 w-44 bg-white dark:bg-gray-700 divide-y divide-gray-100 dark:divide-gray-600 rounded-lg shadow`}
|
||||
>
|
||||
<ul className="py-2">
|
||||
{languages.map((language) => (
|
||||
<li key={language.code}>
|
||||
<button
|
||||
onClick={() => changeLanguage(language.code)}
|
||||
className={`w-full text-left block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center gap-3 ${
|
||||
currentLanguage.code === language.code
|
||||
? "bg-gray-50 text-blue-600 dark:bg-gray-600"
|
||||
: "text-gray-800 dark:text-white"
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={language.flag}
|
||||
alt={language.name}
|
||||
className="w-10 h-6"
|
||||
/>
|
||||
<span>{language.name}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LanguageSwitcher;
|
||||
133
src/Components/Nav/Navbar.jsx
Normal file
133
src/Components/Nav/Navbar.jsx
Normal file
@ -0,0 +1,133 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-scroll";
|
||||
import LanguageSwitcher from "../LanguageSwitcher/LanguageSwitcher";
|
||||
import "../../index.css";
|
||||
|
||||
const Navbar = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState("home");
|
||||
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
|
||||
// Handle scroll to update active section
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const sections = ["home", "services", "about", "contact"];
|
||||
const scrollPosition = window.scrollY + 100;
|
||||
|
||||
for (const section of sections) {
|
||||
const element =
|
||||
document.getElementById(section) ||
|
||||
document.querySelector(`[name="${section}"]`);
|
||||
if (element) {
|
||||
const offsetTop = element.offsetTop;
|
||||
const offsetHeight = element.offsetHeight;
|
||||
|
||||
if (
|
||||
scrollPosition >= offsetTop &&
|
||||
scrollPosition < offsetTop + offsetHeight
|
||||
) {
|
||||
setActiveSection(section);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// Update document direction when language changes
|
||||
useEffect(() => {
|
||||
if (i18n.language === "ar") {
|
||||
document.documentElement.dir = "rtl";
|
||||
document.documentElement.lang = "ar";
|
||||
} else {
|
||||
document.documentElement.dir = "ltr";
|
||||
document.documentElement.lang = i18n.language;
|
||||
}
|
||||
}, [i18n.language]);
|
||||
|
||||
const navItems = [
|
||||
{ key: "home", label: t("nav.home") },
|
||||
{ key: "services", label: t("nav.services") },
|
||||
{ key: "about", label: t("nav.about") },
|
||||
{ key: "contact", label: t("nav.contact") },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="bg-white/10 backdrop-blur-lg fixed top-0 w-full z-50 shadow h-14">
|
||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-2 px-4">
|
||||
{/* الشعار */}
|
||||
<img
|
||||
src="src/assets/TPS-logo.png"
|
||||
className="h-8 sm:h-10 md:h-12 transition-all duration-300"
|
||||
alt="TPS Logo"
|
||||
/>
|
||||
|
||||
{/* الجانب الأيمن */}
|
||||
<div className="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse relative">
|
||||
{/* Language Switcher */}
|
||||
<LanguageSwitcher />
|
||||
|
||||
{/* زر القائمة للجوال */}
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
type="button"
|
||||
className="inline-flex items-center right--30 p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 ml-2"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg className="w-5 h-5" viewBox="0 0 17 14" fill="none">
|
||||
<path
|
||||
d="M1 1h15M1 7h15M1 13h15"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* روابط الأقسام */}
|
||||
<div
|
||||
className={`w-full md:flex md:w-auto md:order-1 transition-all duration-300 ease-in-out ${
|
||||
menuOpen ? "block" : "hidden"
|
||||
}`}
|
||||
id="navbar-menu"
|
||||
>
|
||||
<ul className="flex flex-col md:flex-row bg-white dark:bg-gray-900 md:bg-transparent md:dark:bg-transparent p-4 md:p-0 rounded-lg shadow-md md:shadow-none space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0 divide-y divide-gray-200 md:divide-y-0">
|
||||
{navItems.map((item) => (
|
||||
<li key={item.key} className="pt-2 md:pt-0">
|
||||
<Link
|
||||
to={item.key}
|
||||
smooth
|
||||
duration={500}
|
||||
spy={true}
|
||||
offset={0}
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
className={`block text-center md:inline cursor-pointer text-lg font-semibold transition duration-200 ${
|
||||
activeSection === item.key
|
||||
? "text-yellow-500"
|
||||
: "text-gray-800 dark:text-white hover:text-yellow-500"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
30
src/Components/Sections/About/About.css
Normal file
30
src/Components/Sections/About/About.css
Normal file
@ -0,0 +1,30 @@
|
||||
.grow-img {
|
||||
animation: growIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes growIn {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes soft-blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-soft-blink {
|
||||
animation: soft-blink 3s infinite ease-in-out;
|
||||
}
|
||||
72
src/Components/Sections/About/About.jsx
Normal file
72
src/Components/Sections/About/About.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Element } from "react-scroll";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import AOS from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
|
||||
const About = () => {
|
||||
const { t } = useTranslation();
|
||||
const home10 = "https://i.imgur.com/MW2Sk0y.jpg";
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
AOS.init({ duration: 1000, once: false });
|
||||
|
||||
const handleScroll = () => {
|
||||
AOS.refresh();
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Element name="about">
|
||||
<section
|
||||
className="w-full h-screen px-4 sm:px-6 lg:px-16 py-12 sm:py-16 text-black font-sans relative overflow-hidden"
|
||||
style={{ direction: "rtl", backgroundColor: "#111827" }}
|
||||
>
|
||||
{/* صورة الخلفية */}
|
||||
<div
|
||||
className="relative w-full sm:w-3/4 mx-auto z-0"
|
||||
data-aos="fade-right"
|
||||
style={{
|
||||
borderRadius: "12px",
|
||||
border: "1px solid #EB8323",
|
||||
boxShadow:
|
||||
"0 0 15px 5px rgba(235, 131, 35, 0.4), 0 0 8px 2px rgba(235, 131, 35, 0.3)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={home10}
|
||||
alt="شخص"
|
||||
className="w-full h-[450px] sm:h-[500px] md:h-[600px] object-cover rounded-lg transition-all duration-300"
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* مربع النص المتراكب */}
|
||||
<div
|
||||
className="z-10 max-w-full px-4 sm:px-0 -mt-20 sm:mt-0 sm:absolute sm:bottom-10 sm:right-10
|
||||
bg-white/20 backdrop-blur-md text-black p-6 sm:p-12 rounded-xl shadow-2xl
|
||||
flex flex-col sm:max-w-md"
|
||||
data-aos="fade-left"
|
||||
>
|
||||
<h1 className="mb-4 sm:mb-6 text-3xl sm:text-5xl font-extrabold md:text-6xl lg:text-7xl text-center self-center mt-0">
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
|
||||
{t('about.title')}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-2xl leading-relaxed flex-grow text-center">
|
||||
{t('about.description')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Element>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
448
src/Components/Sections/Contact/Contact.jsx
Normal file
448
src/Components/Sections/Contact/Contact.jsx
Normal file
@ -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 (
|
||||
<section
|
||||
id="contact"
|
||||
className="relative min-h-screen py-16 px-4 sm:px-6 font-sans"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-10 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-10 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h1 className="pt-0 mb-0 text-2xl font-extrabold md:text-5xl lg:text-6xl">
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: "200% 100%"
|
||||
}}
|
||||
>
|
||||
{t("contact.title")}
|
||||
</motion.span>
|
||||
</h1>
|
||||
</motion.div>
|
||||
<div className="flex flex-col lg:flex-row-reverse gap-8 items-start">
|
||||
<motion.div
|
||||
initial={{ x: 50, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="space-y-4 lg:w-1/2"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#23558f] to-[#3360b2] text-white shadow-lg"
|
||||
>
|
||||
<FaMapMarkerAlt className="text-2xl" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
{t("contact.address")}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed whitespace-pre-line">
|
||||
{t("contact.addressText")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
|
||||
initial={{ x: "-50%", width: "0%" }}
|
||||
whileHover={{ width: "75%" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#3c5ee3] to-[#5c7ce3] text-white shadow-lg"
|
||||
>
|
||||
<FaPhoneAlt className="text-2xl" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-3">
|
||||
{t("contact.phone")}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
<span className="text-[#23558f] font-medium">0965656631</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#2ecc71] to-[#1abc9c] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaPhoneAlt className="text-sm" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] rounded-xl p-3 hover:from-[#dceafe] hover:to-[#c6e2ff] transition-all duration-300">
|
||||
<a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#23558f] font-medium hover:text-[#3c5ee3] transition-colors"
|
||||
>
|
||||
963965656631
|
||||
</a>
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaWhatsapp className="text-sm" />
|
||||
</motion.a>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className="p-2 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<FaPhoneAlt className="text-sm" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-3 rounded-xl bg-gradient-to-br from-[#2ecc71] to-[#1abc9c] text-white shadow-lg"
|
||||
>
|
||||
<FaEnvelope className="text-2xl" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
{t("contact.email")}
|
||||
</h3>
|
||||
<a
|
||||
href="mailto:info@TPS-STATIONS.COM"
|
||||
className="inline-block bg-gradient-to-r from-[#e8f4ff] to-[#dceafe] text-[#23558f] font-medium rounded-xl px-4 py-3 hover:from-[#dceafe] hover:to-[#c6e2ff] hover:text-[#3c5ee3] hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
Info@TPS-STATIONS.COM
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#2ecc71] to-transparent rounded-full"
|
||||
initial={{ x: "-50%", width: "0%" }}
|
||||
whileHover={{ width: "75%" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ x: -50, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-8 rounded-2xl shadow-2xl border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-3xl transition-all duration-500 lg:w-1/2"
|
||||
>
|
||||
<div className="relative mb-3 pt-3">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-center">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71]">
|
||||
{t("contact.formTitle")}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] rounded-full"></div>
|
||||
</div>
|
||||
<form
|
||||
ref={form}
|
||||
onSubmit={sendEmail}
|
||||
className="space-y-2"
|
||||
>
|
||||
<div className="group/field">
|
||||
<label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||
{t("contact.name")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
name="user_name"
|
||||
required
|
||||
className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
|
||||
placeholder={t("contact.namePlaceholder")}
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="group/field">
|
||||
<label className="block mb-1 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||
{t("contact.email")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="email"
|
||||
name="user_email"
|
||||
required
|
||||
className="w-full border-2 border-gray-200 p-4 rounded-xl bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10"
|
||||
placeholder={t("contact.emailPlaceholder")}
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="group/field">
|
||||
<label className="block mb-2 font-semibold text-gray-700 text-base transition-colors duration-300 group-hover/field:text-[#23558f]">
|
||||
{t("contact.message")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
name="user_message"
|
||||
required
|
||||
className="w-full border-2 border-gray-200 p-4 rounded-xl resize-none bg-white text-gray-800 text-base placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-[#3c5ee3]/30 focus:border-[#3c5ee3] transition-all duration-300 hover:border-[#3c5ee3]/50 hover:shadow-lg hover:shadow-[#3c5ee3]/10 min-h-[120px]"
|
||||
placeholder={t("contact.messagePlaceholder")}
|
||||
></textarea>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#3c5ee3]/5 to-[#2ecc71]/5 opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
{message.text && (
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className={`p-4 rounded-xl text-center font-medium transition-all duration-500 ${
|
||||
message.type === "success"
|
||||
? "bg-gradient-to-r from-[#2ecc71]/20 to-[#1abc9c]/20 border border-[#2ecc71]/50 text-[#2ecc71] shadow-lg shadow-[#2ecc71]/20"
|
||||
: "bg-gradient-to-r from-[#e74c3c]/20 to-[#c0392b]/20 border border-[#e74c3c]/50 text-[#e74c3c] shadow-lg shadow-[#e74c3c]/20"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{message.type === "success" ? (
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{message.text}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
<div className="pt-2">
|
||||
<motion.button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`group/btn relative w-full bg-gradient-to-r from-[#23558f] via-[#3c5ee3] to-[#2ecc71] text-white px-6 py-4 text-lg font-semibold rounded-xl hover:shadow-2xl hover:shadow-[#3c5ee3]/30 transition-all duration-500 overflow-hidden ${
|
||||
isLoading ? "opacity-70 cursor-not-allowed" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="relative z-10 flex items-center justify-center gap-2">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
{t("contact.send")}...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{t("contact.send")}
|
||||
<FaPaperPlane className="w-5 h-5 transform group-hover/btn:translate-x-1 transition-transform duration-300" />
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
{!isLoading && (
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 transform -skew-x-12 -translate-x-full group-hover/btn:translate-x-full transition-transform duration-1000"></div>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-[#23558f]/10 to-[#3360b2]/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="absolute bottom-0 left-0 w-16 h-16 bg-gradient-to-br from-[#2ecc71]/10 to-[#1abc9c]/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-xl md:text-2xl font-bold text-white mb-4">
|
||||
{t('contact.contactSection.title')}
|
||||
</h3>
|
||||
<p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
|
||||
{t('contact.contactSection.description')}
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{t('contact.contactSection.badges', { returnObjects: true }).map((badge, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
whileHover={{ scale: 1.05, y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-4 py-2 bg-white/20 rounded-full text-white text-sm font-medium backdrop-blur-sm hover:bg-white/30 transition-all duration-300 cursor-pointer"
|
||||
>
|
||||
{badge}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
279
src/Components/Sections/Home/Home.jsx
Normal file
279
src/Components/Sections/Home/Home.jsx
Normal file
@ -0,0 +1,279 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Element } from "react-scroll";
|
||||
|
||||
import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "../../../index.css";
|
||||
|
||||
|
||||
const home1 = "https://i.imgur.com/g4fVyLj.jpg";
|
||||
const home1Mobile = "https://i.imgur.com/NNeCIAj.jpg";
|
||||
|
||||
const home2 = "https://i.imgur.com/d9enpvc.jpg";
|
||||
const home2Mobile = "https://i.imgur.com/a85P9Q8.jpg";
|
||||
|
||||
const home3 = "https://i.imgur.com/nWTJcjz.jpg";
|
||||
|
||||
const home4 = "https://i.imgur.com/btajXYO.jpg";
|
||||
const home4Mobile = "https://i.imgur.com/BZnHa4v.jpg";
|
||||
|
||||
const home6 = "https://i.imgur.com/gtwlzDA.jpg";
|
||||
const home6Mobile = "https://i.imgur.com/xs8OB15.jpg";
|
||||
|
||||
const home7 = "https://i.imgur.com/kSErZeJ.jpg";
|
||||
const home7Mobile = "https://i.imgur.com/02ftPiK.jpg";
|
||||
|
||||
const home8 = "https://i.imgur.com/0gsQF8L.jpg";
|
||||
const home8Mobile = "https://i.imgur.com/vey37dG.jpg";
|
||||
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.3, when: "beforeChildren" },
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8 } },
|
||||
};
|
||||
|
||||
const Home = () => {
|
||||
const { t } = useTranslation();
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const phrases = t("home.phrases", { returnObjects: true });
|
||||
|
||||
useEffect(() => {
|
||||
const updateSize = () => setIsMobile(window.innerWidth < 640);
|
||||
updateSize();
|
||||
window.addEventListener("resize", updateSize);
|
||||
return () => window.removeEventListener("resize", updateSize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % phrases.length);
|
||||
}, 4000);
|
||||
return () => clearInterval(interval);
|
||||
}, [phrases.length]);
|
||||
|
||||
const nextPhrase = () => {
|
||||
setCurrentIndex((prev) => (prev + 1) % phrases.length);
|
||||
};
|
||||
|
||||
const prevPhrase = () => {
|
||||
setCurrentIndex((prev) => (prev - 1 + phrases.length) % phrases.length);
|
||||
};
|
||||
|
||||
const getBackgroundImage = () => {
|
||||
switch (currentIndex) {
|
||||
case 0:
|
||||
return isMobile ? home2Mobile : home2;
|
||||
case 1:
|
||||
return home3;
|
||||
case 2:
|
||||
return isMobile ? home4Mobile : home4;
|
||||
case 3:
|
||||
return isMobile ? home6Mobile : home6;
|
||||
case 4:
|
||||
return isMobile ? home8Mobile : home8;
|
||||
case 5:
|
||||
return isMobile ? home7Mobile : home7;
|
||||
case 6:
|
||||
return isMobile ? home1Mobile : home1;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Element name="home">
|
||||
<div className="relative h-screen w-full" dir="rtl">
|
||||
{/* الخلفية */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center z-0 transition-all duration-1000"
|
||||
style={{ backgroundImage: `url('${getBackgroundImage()}')` }}
|
||||
loading="eager"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/50 z-10" />
|
||||
|
||||
{/* المحتوى */}
|
||||
<div className="relative z-20 flex flex-col items-center justify-center h-full w-full px-4 text-white text-center">
|
||||
<motion.div
|
||||
className="flex flex-col items-center justify-center gap-y-6 w-full max-w-screen-sm sm:max-w-2xl md:max-w-4xl"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* العنوان المتغير */}
|
||||
<motion.div
|
||||
className="relative flex items-center justify-between w-full px-2 sm:px-4"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<motion.button
|
||||
onClick={prevPhrase}
|
||||
className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
|
||||
aria-label="السابق"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 32 32"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-8 h-8 sm:w-10 sm:h-10"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M11 6l10 10-10 10"
|
||||
/>
|
||||
</svg>
|
||||
</motion.button>
|
||||
|
||||
<div className="relative h-[120px] sm:h-[150px] w-full flex justify-center items-center px-2">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.span
|
||||
key={currentIndex}
|
||||
className="absolute text-xl sm:text-3xl md:text-5xl font-bold text-[var(--primary-color)] text-center px-2 max-w-full break-words"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{phrases[currentIndex]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
onClick={nextPhrase}
|
||||
className="text-2xl sm:text-4xl p-1 sm:p-2 rounded bg-transparent text-[var(--primary-color)] hover:scale-110 transition-transform z-10"
|
||||
aria-label="التالي"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 32 32"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-8 h-8 sm:w-10 sm:h-10"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M21 6L11 16l10 10"
|
||||
/>
|
||||
</svg>
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
|
||||
{/* وصف إضافي */}
|
||||
<motion.div className="w-full px-2 sm:px-4" variants={itemVariants}>
|
||||
<div className="text-sm sm:text-lg md:text-2xl text-white space-y-1">
|
||||
<p>{t("home.subtitle1")}</p>
|
||||
<p>{t("home.subtitle2")}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* زر تواصل معنا */}
|
||||
<motion.div
|
||||
className="w-full flex justify-center"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<div className="relative">
|
||||
<motion.button
|
||||
onClick={() => setMenuOpen((prev) => !prev)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="relative inline-flex items-center justify-center px-8 py-2.5 overflow-hidden tracking-tighter text-white bg-[#EB8317] rounded-md group"
|
||||
style={{ zIndex: 30 }}
|
||||
>
|
||||
<span className="absolute w-0 h-0 transition-all duration-500 ease-out bg-[rgba(10,25,70,0.9)] rounded-full group-hover:w-56 group-hover:h-56"></span>
|
||||
<span className="absolute bottom-0 left-0 h-full -ml-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-auto h-full opacity-100 object-stretch"
|
||||
viewBox="0 0 487 487"
|
||||
>
|
||||
<path
|
||||
fillOpacity=".1"
|
||||
fillRule="nonzero"
|
||||
fill="#FFF"
|
||||
d="M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute top-0 right-0 w-12 h-full -mr-3">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="object-cover w-full h-full"
|
||||
viewBox="0 0 487 487"
|
||||
>
|
||||
<path
|
||||
fillOpacity=".1"
|
||||
fillRule="nonzero"
|
||||
fill="#FFF"
|
||||
d="M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-200"></span>
|
||||
<span className="relative text-base font-semibold">
|
||||
{t("home.contactUs")}
|
||||
</span>
|
||||
</motion.button>
|
||||
<AnimatePresence>
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20, y: -10 }}
|
||||
animate={{ opacity: 1, x: 0, y: 10 }}
|
||||
exit={{ opacity: 0, x: 20, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`absolute top-16 ${
|
||||
isMobile ? "right-0" : "sm:right-32"
|
||||
} bg-[rgba(10,25,70,0.9)] text-white rounded-lg shadow-lg py-5 px-5 z-40`}
|
||||
>
|
||||
<a
|
||||
href="https://wa.me/963965656631"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
|
||||
>
|
||||
<FaWhatsapp className="text-xl" />
|
||||
<span>963965656631</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://wa.me/963965656635"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
|
||||
>
|
||||
<FaWhatsapp className="text-xl" />
|
||||
<FaPhone className="text-xl" />
|
||||
<span>963965656635</span>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:info@TPS-STATIONS.COM"
|
||||
className="flex items-center gap-3 text-sm py-2 px-3 rounded hover:bg-[rgba(235,131,23,0.3)] transition-colors"
|
||||
>
|
||||
<FaEnvelope className="text-xl" />
|
||||
<span>info@TPS-STATIONS.COM</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</Element>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
656
src/Components/Sections/Services/Services.jsx
Normal file
656
src/Components/Sections/Services/Services.jsx
Normal file
@ -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: <Globe className="w-10 h-10" />,
|
||||
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: <Package className="w-10 h-10" />,
|
||||
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: <MessageSquare className="w-10 h-10" />,
|
||||
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: <Bell className="w-10 h-10" />,
|
||||
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: <BarChart3 className="w-10 h-10" />,
|
||||
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: <Shield className="w-10 h-10" />,
|
||||
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: <Zap className="w-10 h-10" />,
|
||||
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: <Users className="w-10 h-10" />,
|
||||
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: <Zap className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.speed.text'),
|
||||
description: t('tradesafe.reasons.speed.description')
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.reliability.text'),
|
||||
description: t('tradesafe.reasons.reliability.description')
|
||||
},
|
||||
{
|
||||
icon: <Globe className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.connection.text'),
|
||||
description: t('tradesafe.reasons.connection.description')
|
||||
},
|
||||
{
|
||||
icon: <MessageSquare className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.communication.text'),
|
||||
description: t('tradesafe.reasons.communication.description')
|
||||
},
|
||||
{
|
||||
icon: <Clock className="w-8 h-8" />,
|
||||
text: t('tradesafe.reasons.time.text'),
|
||||
description: t('tradesafe.reasons.time.description')
|
||||
},
|
||||
{
|
||||
icon: <CheckCircle className="w-8 h-8" />,
|
||||
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 (
|
||||
<div className="flex justify-center items-center h-screen bg-gradient-to-br from-[#23558f] via-[#3360b2] to-[#3c5ee3]">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-white"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Element name="services">
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="w-full min-h-screen py-12 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-8"
|
||||
>
|
||||
<h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl">
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: "200% 100%"
|
||||
}}
|
||||
>
|
||||
{t('tradesafe.services.title')}
|
||||
</motion.span>
|
||||
</h1>
|
||||
<p className="text-lg font-medium text-gray-700 lg:text-xl mb-6 max-w-3xl mx-auto">
|
||||
{t('tradesafe.subtitle')}
|
||||
</p>
|
||||
<div className="flex justify-center mb-8">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={toggleAllCards}
|
||||
className="px-6 py-3 bg-gradient-to-r from-[#23558f] to-[#3c5ee3] text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2"
|
||||
>
|
||||
{Object.values(expandedCards).every(Boolean) ? (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
{t('tradesafe.buttons.collapseAll')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
{t('tradesafe.buttons.showDetails')}
|
||||
</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="w-full px-4 relative z-10">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<AnimatePresence>
|
||||
{visibleServices.map((service, index) => {
|
||||
const isExpanded = expandedCards[service.id] || false;
|
||||
const isHovered = hoveredCard === service.id;
|
||||
return (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
||||
animate={{
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}}
|
||||
exit={{ scale: 0.9, opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
delay: index * 0.1,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}}
|
||||
whileHover={{
|
||||
y: -5,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
onHoverStart={() => 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'
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 rounded-2xl ${service.bgColor} opacity-20`}></div>
|
||||
<div className="relative z-10 h-full flex flex-col">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`p-3 rounded-xl bg-gradient-to-br ${service.color} text-white shadow-lg`}>
|
||||
{service.icon}
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{ rotate: isExpanded ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-6 h-6 text-gray-500"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
{service.description}
|
||||
</p>
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-4 border-t border-gray-200">
|
||||
<p className="text-gray-700 text-sm mb-3 leading-relaxed">
|
||||
{service.details}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.isArray(service.features) && service.features.map((feature, idx) => (
|
||||
<motion.span
|
||||
key={idx}
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: idx * 0.05 }}
|
||||
className="px-3 py-1 bg-gradient-to-r from-white to-gray-50 text-[#23558f] text-xs font-medium rounded-full border border-[#23558f]/20 shadow-sm"
|
||||
>
|
||||
{feature}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
{!isExpanded && isHovered && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-3 border-t border-dashed border-gray-300 mt-3">
|
||||
<p className="text-gray-700 text-xs mb-2 line-clamp-2">
|
||||
{service.details.split(' - ')[0]}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Array.isArray(service.features) && service.features.slice(0, 2).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-gradient-to-r from-[#dceafe] to-[#e8f4ff] text-[#23558f] text-xs font-medium rounded-full"
|
||||
>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
{isHovered && !isExpanded && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/5 to-transparent"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
/>
|
||||
)}
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/10 to-transparent"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="flex justify-center items-center gap-6 mt-12">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, x: -5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handlePrevPage}
|
||||
className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
<div className="flex gap-3">
|
||||
{Array.from({ length: totalPages }).map((_, idx) => (
|
||||
<motion.button
|
||||
key={idx}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => {
|
||||
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}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05, x: 5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handleNextPage}
|
||||
className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</motion.button>
|
||||
</div>
|
||||
<div className="text-center mt-4">
|
||||
<span className="text-gray-600 font-medium">
|
||||
{t('tradesafe.buttons.page', { current: page + 1, total: totalPages })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</Element>
|
||||
|
||||
<Element name="why-us">
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="w-full py-16 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
|
||||
style={{
|
||||
direction: "rtl",
|
||||
background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-white/90"></div>
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
|
||||
<div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
|
||||
|
||||
<div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto">
|
||||
<motion.h1
|
||||
initial={{ y: -30, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="pt-6 mb-12 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center"
|
||||
>
|
||||
<motion.span
|
||||
className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
|
||||
animate={{
|
||||
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: "200% 100%"
|
||||
}}
|
||||
>
|
||||
{t('tradesafe.reasons.title')}
|
||||
</motion.span>
|
||||
</motion.h1>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
||||
{reasonsToChooseUs.map((reason, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ y: 50, opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ y: 0, opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: index * 0.1,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}}
|
||||
whileHover={{
|
||||
y: -8,
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: [0, -10, 10, 0] }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`p-3 rounded-xl bg-gradient-to-br ${
|
||||
index % 3 === 0 ? 'from-[#23558f] to-[#3360b2]' :
|
||||
index % 3 === 1 ? 'from-[#3c5ee3] to-[#5c7ce3]' :
|
||||
'from-[#2ecc71] to-[#1abc9c]'
|
||||
} text-white shadow-lg`}
|
||||
>
|
||||
{reason.icon}
|
||||
</motion.div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
{reason.text}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{reason.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
initial={false}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
|
||||
initial={{ x: "-50%", width: "0%" }}
|
||||
whileHover={{ width: "75%" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 30 }}
|
||||
whileInView={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
{t('tradesafe.reasons.cta.title')}
|
||||
</h3>
|
||||
<p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
|
||||
{t('tradesafe.reasons.cta.subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<motion.button
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 10px 25px rgba(0,0,0,0.2)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={openPlatformLink}
|
||||
className="px-8 py-3 bg-white text-[#23558f] font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
{t('tradesafe.buttons.startNow')}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 10px 25px rgba(255,255,255,0.2)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={openPdfPresentation}
|
||||
className="px-8 py-3 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
{t('tradesafe.buttons.viewPresentation')}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</Element>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
BIN
src/assets/Fonts/Madani Arabic Black.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Black.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Extra Bold.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Extra Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Extra Light.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Extra Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Light.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Light.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Medium.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Medium.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Semi Bold.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Semi Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Thin.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Thin.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani Arabic Variable.ttf
Normal file
BIN
src/assets/Fonts/Madani Arabic Variable.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani-Arabic-Bold.ttf
Normal file
BIN
src/assets/Fonts/Madani-Arabic-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/Fonts/Madani-Arabic-Regular.ttf
Normal file
BIN
src/assets/Fonts/Madani-Arabic-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/Images/gasstation.jpg
Normal file
BIN
src/assets/Images/gasstation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
src/assets/TPS-logo.png
Normal file
BIN
src/assets/TPS-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
src/assets/ar-flag.svg
Normal file
BIN
src/assets/ar-flag.svg
Normal file
Binary file not shown.
1
src/assets/china-flag-icon.svg
Normal file
1
src/assets/china-flag-icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.2 38.4" style="enable-background:new 0 0 55.2 38.4" xml:space="preserve"><style type="text/css">.st0{fill:#DE2910;} .st1{fill:#FFDE00;}</style><g><path class="st0" d="M3.01,0h49.17c1.66,0.01,3.01,1.37,3.01,3.03v32.33c0,1.66-1.35,3.02-3.01,3.03L3,38.4 c-1.65-0.02-3-1.38-3-3.03V3.03C0,1.37,1.35,0.01,3.01,0L3.01,0z"/><polygon class="st1" points="8.4,3.84 11.79,14.26 2.92,7.82 13.88,7.82 5.01,14.26 8.4,3.84"/><polygon class="st1" points="18.75,2.07 18.43,5.71 16.55,2.58 19.91,4.01 16.35,4.83 18.75,2.07"/><polygon class="st1" points="23.22,6.34 21.51,9.57 20.99,5.96 23.54,8.58 19.94,7.95 23.22,6.34"/><polygon class="st1" points="23.64,12.78 20.77,15.03 21.77,11.52 23.02,14.95 19.99,12.91 23.64,12.78"/><polygon class="st1" points="18.68,15.48 18.51,19.13 16.5,16.08 19.92,17.37 16.4,18.34 18.68,15.48"/></g></svg>
|
||||
|
After Width: | Height: | Size: 997 B |
1
src/assets/de-flag.svg
Normal file
1
src/assets/de-flag.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.2 38.4"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M3.03 0h49.13c1.67 0 3.03 1.36 3.03 3.03v32.33c0 1.66-1.36 3.02-3.02 3.03H3.02C1.36 38.4 0 37.03 0 35.37V3.03C0 1.36 1.36 0 3.03 0z"/><path d="M0 12.8h55.2v22.57c0 1.67-1.36 3.03-3.03 3.03H3.03C1.36 38.4 0 37.04 0 35.37V12.8z" fill="#d00"/><path d="M0 25.6h55.2v9.77c0 1.66-1.36 3.02-3.02 3.03H3.03A3.04 3.04 0 010 35.37V25.6z" fill="#ffce00"/></g></svg>
|
||||
|
After Width: | Height: | Size: 470 B |
1
src/assets/france-flag-icon.svg
Normal file
1
src/assets/france-flag-icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 356.18"><path fill="#E1000F" d="M345.04 0h139C499.44.1 512 12.72 512 28.13v299.91c0 15.47-12.65 28.13-28.13 28.14H345.04V0zM15.11 352.95zm-9.54-8.15z"/><path fill="#fff" d="M27.96 0h317.08v356.18H27.98C12.57 356.09 0 343.46 0 328.04V28.14C0 12.72 12.56.1 27.96 0z"/><path fill="#273375" d="M27.96 0h138.99v356.18H28c-15.42-.08-28-12.71-28-28.14V28.14C0 12.72 12.56.1 27.96 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 588 B |
BIN
src/assets/gas-station-img.jpg
Normal file
BIN
src/assets/gas-station-img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
1
src/assets/italy-flag-icon.svg
Normal file
1
src/assets/italy-flag-icon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 90.77 63.15"><g fill-rule="nonzero"><path fill="#009246" d="M29.47 0v63.15H4.99C2.24 63.15 0 60.9 0 58.16V4.99C0 2.24 2.24 0 4.99 0h24.48z"/><path fill="#fff" d="M61.31 0v63.15H29.47V0z"/><path fill="#CE2B37" d="M61.31 63.15V0h24.48c2.74 0 4.98 2.24 4.98 4.99v53.17c0 2.74-2.24 4.99-4.98 4.99H61.31z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 512 B |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
1
src/assets/syriaflag.svg
Normal file
1
src/assets/syriaflag.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600"><g stroke-width="150"><path d="M0 0v600h1200V0z" fill="#007a3d"/><path d="M0 200v400h1200V200z" fill="#fff"/><path d="M0 400v200h1200V400z"/></g><g fill="#ce1126" stroke-width=".799"><path d="M600.01 228l46.677 144-122.207-88.996h151.04L553.313 372l46.678-144z"/><path d="M300.01 228l46.677 144-122.207-88.996h151.04L253.313 372l46.678-144z"/><path d="M900.01 228l46.677 144-122.207-88.996h151.04L853.313 372l46.678-144z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 499 B |
1
src/assets/uk-flag.svg
Normal file
1
src/assets/uk-flag.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.2 38.4" style="enable-background:new 0 0 55.2 38.4" xml:space="preserve"><style type="text/css">.st0{fill:#FEFEFE;} .st1{fill:#C8102E;} .st2{fill:#012169;}</style><g><path class="st0" d="M2.87,38.4h49.46c1.59-0.09,2.87-1.42,2.87-3.03V3.03c0-1.66-1.35-3.02-3.01-3.03H3.01 C1.35,0.01,0,1.37,0,3.03v32.33C0,36.98,1.28,38.31,2.87,38.4L2.87,38.4z"/><polygon class="st1" points="23.74,23.03 23.74,38.4 31.42,38.4 31.42,23.03 55.2,23.03 55.2,15.35 31.42,15.35 31.42,0 23.74,0 23.74,15.35 0,15.35 0,23.03 23.74,23.03"/><path class="st2" d="M33.98,12.43V0h18.23c1.26,0.02,2.34,0.81,2.78,1.92L33.98,12.43L33.98,12.43z"/><path class="st2" d="M33.98,25.97V38.4h18.35c1.21-0.07,2.23-0.85,2.66-1.92L33.98,25.97L33.98,25.97z"/><path class="st2" d="M21.18,25.97V38.4H2.87c-1.21-0.07-2.24-0.85-2.66-1.94L21.18,25.97L21.18,25.97z"/><path class="st2" d="M21.18,12.43V0H2.99C1.73,0.02,0.64,0.82,0.21,1.94L21.18,12.43L21.18,12.43z"/><polygon class="st2" points="0,12.8 7.65,12.8 0,8.97 0,12.8"/><polygon class="st2" points="55.2,12.8 47.51,12.8 55.2,8.95 55.2,12.8"/><polygon class="st2" points="55.2,25.6 47.51,25.6 55.2,29.45 55.2,25.6"/><polygon class="st2" points="0,25.6 7.65,25.6 0,29.43 0,25.6"/><polygon class="st1" points="55.2,3.25 36.15,12.8 40.41,12.8 55.2,5.4 55.2,3.25"/><polygon class="st1" points="19.01,25.6 14.75,25.6 0,32.98 0,35.13 19.05,25.6 19.01,25.6"/><polygon class="st1" points="10.52,12.81 14.78,12.81 0,5.41 0,7.55 10.52,12.81"/><polygon class="st1" points="44.63,25.59 40.37,25.59 55.2,33.02 55.2,30.88 44.63,25.59"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
952
src/i18n.js
Normal file
952
src/i18n.js
Normal file
@ -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;
|
||||
51
src/index.css
Normal file
51
src/index.css
Normal file
@ -0,0 +1,51 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "flowbite/src/themes/default";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@plugin "flowbite/plugin";
|
||||
@source "../node_modules/flowbite";
|
||||
:root {
|
||||
--primary-color: #F4F6FF;
|
||||
--secondary-color: #F3C623;
|
||||
--accent-color: #EB8317;
|
||||
/* --dark-color: #10375C; */
|
||||
--dark-color: #111827;
|
||||
--font-color: #D1D5DB;
|
||||
}
|
||||
|
||||
|
||||
/* Default font for all languages except Arabic */
|
||||
|
||||
* {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* Arabic font family when document direction is RTL */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Madani Arabic';
|
||||
src: url('./assets/fonts/Madani-Arabic-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Madani Arabic';
|
||||
src: url('./assets/fonts/Madani-Arabic-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Arabic font override */
|
||||
|
||||
html[dir="rtl"] *,
|
||||
html[lang="ar"] * {
|
||||
font-family: 'Madani Arabic', Arial, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
@ -0,0 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user