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